/* Content typography, main layout, TOP, About, Gallery, work details, archives and Articles.
   Shared chrome and interactions: common-ui.css. Recruitment: event.css. */
:root { --ink:#000; --muted:#626262; --line:#bcbcbc; --paper:#fff; --side:#f6f6f6; --accent:#222; --tint:#f6f6f6; --publisher:#823249; --atelier:#94334a; --font:-apple-system,BlinkMacSystemFont,"Yu Gothic Medium","游ゴシック Medium","Yu Gothic",YuGothic,"游ゴシック体","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Helvetica Neue",HelveticaNeue,"メイリオ",Meiryo,Arial,"MS ゴシック",sans-serif; }
:root { --page-bg-mobile:#f8f8f8; }
* { box-sizing:border-box; }
html { scroll-padding-top:90px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.7407407407 var(--font); }
a { color:inherit; text-underline-offset:.2em; }
@media (hover: hover) and (pointer: fine) { a:hover { color:var(--accent); } }
/* A link inside running text reads as the text around it, with a quiet, thin underline in a lighter text color at all times (on every pointer). */
.prose-link, .prose-link:hover { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(0,0,0,.4); }
img { max-width:100%; height:auto; vertical-align:middle; }
button { font:inherit; }
input { font:inherit; }
select { font:inherit; }
button { cursor:pointer; }
select { cursor:pointer; }
button { touch-action:manipulation; }
a { touch-action:manipulation; }
input { touch-action:manipulation; }
select { touch-action:manipulation; }
summary { touch-action:manipulation; }
button { color:inherit; }
a:focus-visible { outline:3px solid #2275b5; outline-offset:4px; }
button:focus-visible { outline:3px solid #2275b5; outline-offset:4px; }
input:focus-visible { outline:3px solid #2275b5; outline-offset:4px; }
select:focus-visible { outline:3px solid #2275b5; outline-offset:4px; }
summary:focus-visible { outline:3px solid #2275b5; outline-offset:4px; }
h1 { font-weight:700; line-height:1.5; letter-spacing:.05em; }
h2 { font-weight:700; line-height:1.5; letter-spacing:.05em; }
h3 { font-weight:700; line-height:1.5; letter-spacing:.05em; }
h1 { font-size:24px; margin:0; }
h2 { font-size:22px; margin:0 0 24px; }
h3 { font-size:18px; margin:0 0 12px; }
p { margin:0 0 1.5em; }
ul { padding-left:1.4em; }
small { color:var(--muted); }
.muted { color:var(--muted); }
.phrase { white-space:nowrap; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.layout { display:flex; justify-content:center; min-height:55vh; }
.main { flex:1 1 calc(50% + 340px); max-width:calc(100% - 350px); padding:58px 0 76px; min-width:0; }
.main-inner { max-width:1140px; margin-left:auto; padding:0 4.3859649123%; }
.page-heading { border-bottom:1px solid #000; margin-bottom:32px; }
.page-heading p { margin:18px 0 0; }
/* A heading's second paragraph continues the first (no blank line between them). */
.page-heading p + p { margin-top:0; }
.section { margin-top:52px; }
.section-heading { border-left:4px solid var(--accent); padding-left:12px; }
.prose { overflow-wrap:anywhere; }
.prose h2 { margin-top:40px; }
.prose li { margin:8px 0; }
.key-visual { display:block; width:100%; height:auto; }
/* An edition's catchphrase under its key visual: the same type as the 2026 page's first lead line (event.css), in the edition accent. */
.edition-lead { max-width:56rem; margin:0 auto; padding-top:32px; text-align:center; }
.edition-lead p { margin:0; font-size:34px; font-weight:600; line-height:1.7; color:var(--accent); text-wrap:balance; text-indent:0; }
@media (min-width:1024px) and (max-width:1199.98px) { .edition-lead p { font-size:30px; } }
@media (max-width:640px) { .edition-lead { padding-top:28px; } .edition-lead p { font-size:28px; line-height:1.8; } }
.home-main { padding-top:35px; }
.home-kv { margin-bottom:68px; }
.filters { display:grid; grid-template-columns:.8fr 1fr 1.1fr 1.3fr auto; gap:10px; align-items:end; margin:26px 0 20px; }
.field-label { display:block; font-size:13px; margin-bottom:7px; }
.filters input { width:100%; height:44px; border:1px solid #999; border-radius:0; background:#fff; color:#111; padding:6px 10px; min-width:0; font-size:14px; }
.filters select { width:100%; height:44px; border:1px solid #999; border-radius:0; background:#fff; color:#111; padding:6px 10px; min-width:0; font-size:14px; }
.filters label { min-width:0; }
.result-summary { font-size:13px; color:var(--muted); margin:18px 0 24px; }
.works-grid { display:grid; grid-template-columns:repeat(auto-fill,256px); gap:20px; justify-content:center; margin:24px 0; }
.work-card { display:block; width:256px; height:100%; text-decoration:none; color:inherit; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:transform .18s ease,box-shadow .18s ease; }
.work-card:hover { color:inherit; }
/* The card lifts only for pointers that can hover; on touch the lift stayed after a tap. */
@media (hover: hover) and (pointer: fine) { .work-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.14); } }
.work-thumb { width:256px; height:256px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.work-meta { padding:12px 14px 14px; line-height:1.5; }
.work-genre { display:inline-block; margin-bottom:8px; padding:3px 8px; border-radius:999px; background:#f3f6fb; color:#2f4ea1; font-size:12px; font-weight:700; }
.work-author { font-size:16px; font-weight:700; color:#222; margin-bottom:4px; }
.work-affiliation { font-size:13px; color:#555; overflow-wrap:anywhere; }
.work-grade { display:inline-block; }
.empty { padding:36px 0; border-top:1px solid var(--line); }
.work-facts { display:grid; }
.work-facts dt { color:var(--muted); }
.work-facts dd { margin:0; }
.artwork { margin:0 0 32px; text-align:center; }
.artwork img { width:auto; max-width:100%; max-height:1000px; object-fit:contain; }
/* Reserve the final box before the file arrives. A pending lazy image has `width:auto` = 0 in Chrome, so the text below
   jumped when it loaded (WebKit instead fills the column). `min-width` carries the size `auto` yields once loaded (the
   natural width, capped by the column and by the 1000px height limit at the image's own ratio), and `max-width` stops
   the natural width from ever being exceeded. A loaded image is therefore laid out exactly as before; a pending one
   already occupies its final box (the height follows from the width/height ratio). Nothing is enlarged. */
.artwork .artwork-image { min-width:min(100%, calc(var(--nw) * 1px), calc(1000px * var(--nw) / var(--nh))); max-width:min(100%, calc(var(--nw) * 1px)); }
.artwork a { display:block; }
/* Enlargeable artwork: the row under the (unchanged) image link is as wide as the displayed image (same formula as
   .artwork-image), so the zoom-in control sits outside the image, its icon flush with the image's right edge; 44px to
   tap, 22px to see. Its top meets the image bottom and the -11px bottom keeps the next heading 36px from the icon, as it
   was from the image. */
.artwork-tools { width:min(100%, calc(var(--nw) * 1px), calc(1000px * var(--nw) / var(--nh))); margin-inline:auto; }
.artwork .artwork-zoom { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 -11px -11px auto; color:var(--muted); cursor:pointer; }
.artwork .artwork-zoom svg { display:block; }
/* The image itself says "zoom in" to a pointer; the visible zoom control is an ordinary link (pointer). */
@media (hover:hover) and (pointer:fine) {
  .artwork .artwork-link { cursor:zoom-in; }
}
.artwork figcaption { font-size:12px; color:var(--muted); margin-top:10px; }
.work-reading { max-width:720px; margin:0 auto 36px; }
.work-reading p { white-space:pre-wrap; line-height:2; }
.work-reading h2 { font-size:22px; margin:0 0 32px; }
.document-pages { display:flex; flex-direction:column; gap:24px; }
.document-pages img { max-height:none; width:auto; }
audio { width:100%; margin-bottom:24px; }
video { width:100%; margin-bottom:24px; }
video { max-height:650px; }
.media-pending { background:var(--side); border:1px solid var(--line); padding:36px 24px; text-align:center; min-height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.media-pending p { margin-bottom:18px; }
/* The music surface stays separate from the untouched title, credit and lyrics. */
/* Embedded video (Kollus): the publisher's player at the full reading width, at the supplied ratio; nothing is drawn around it. */
.media-embed { margin:0; }
.media-embed .embed-frame { position:relative; width:100%; aspect-ratio:var(--embed-w) / var(--embed-h); }
.media-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-embed .media-note { margin:8px 0 0; font-size:12px; line-height:1.6; color:var(--muted); text-align:right; }
.media-audio { margin:0; padding:12px 0 0; }
.audio-player { width:min(100%, 440px); margin-inline:auto; }
.audio-artwork { display:flex; align-items:center; justify-content:center; width:min(100%, 300px); margin-inline:auto; aspect-ratio:1; border-radius:4px; background:#e4e8ea; color:#bbc3c7; }
.audio-artwork .audio-glyph { display:block; width:40%; height:auto; }
.audio-player audio { display:block; width:100%; margin:24px 0 0; }
.audio-player.is-enhanced audio { display:none; }
.audio-custom { margin-top:8px; }
.audio-custom[hidden] { display:none; }
.audio-seek { display:block; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer; --progress:0%; }
.audio-seek::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right, #6b7b85 var(--progress), #d5dade var(--progress)); }
.audio-seek::-moz-range-track { height:3px; border-radius:2px; background:#d5dade; }
.audio-seek::-moz-range-progress { height:3px; background:#6b7b85; }
.audio-seek::-webkit-slider-thumb { appearance:none; width:10px; height:10px; margin-top:-3.5px; border:0; border-radius:50%; background:#6b7b85; }
.audio-seek::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#6b7b85; }
.audio-times { margin-top:-4px; display:flex; justify-content:space-between; color:#68747b; font-size:12px; line-height:20px; font-variant-numeric:tabular-nums; }
.audio-transport { display:flex; align-items:center; justify-content:center; gap:20px; margin:24px 0 0; }
.audio-transport button { display:flex; align-items:center; justify-content:center; flex-direction:column; width:48px; height:48px; padding:0; border:0; background:transparent; color:#46535b; cursor:pointer; font:inherit; }
.audio-transport .audio-toggle { width:64px; height:64px; border-radius:50%; background:transparent; color:#46535b; }
.audio-transport button svg { transform:scale(1); transition:transform 120ms ease-out; }
.audio-transport button:not(:disabled).is-pressed { color:#222; }
.audio-transport button:not(:disabled).is-pressed svg { transform:scale(var(--audio-press-scale,.96)); }
.audio-skip-icon { width:36px; height:36px; }
.audio-skip-icon text { font-size:13px; font-weight:600; fill:currentColor; }
.audio-toggle svg { width:40px; height:40px; fill:currentColor; }
.audio-pause-icon, .is-playing .audio-play-icon { display:none; }
.is-playing .audio-pause-icon { display:block; }
.audio-player :is(button,input,a):focus-visible { outline:3px solid #333; outline-offset:5px; }
.audio-player :disabled { opacity:.45; cursor:default; }
.audio-player.is-enhanced:not(.has-audio-error) .audio-file-link { display:none; }
.audio-file-link { display:block; width:fit-content; margin:14px auto 0; font-size:12px; color:#626262; }
.media-audio .media-note { margin:8px auto 0; max-width:500px; font-size:12px; line-height:1.6; color:var(--muted); text-align:center; text-wrap:balance; }
.media-audio .audio-player + .media-note { margin-top:32px; }
@media (hover:hover) and (pointer:fine) {
  .audio-transport button:not(:disabled):hover { color:#222; }
}
@media (prefers-reduced-motion:reduce) {
  .audio-transport { --audio-press-scale:1; }
  .audio-transport button svg { transition:none; }
}
@media (max-width:640px) {
  .audio-player { width:min(100%, 500px); }
  .audio-artwork { width:min(72vw, 280px, 100%); }
}
.award-note { border-left:3px solid var(--accent); padding:12px 18px; background:var(--tint); margin:24px 0; }
.award-note p:last-child { margin-bottom:0; }
.detail-nav { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; }
/* Phones held upright: the way back sits top-left and the edition link bottom-right, a step lower (gallery first). Each link's own
   5px vertical padding plus the gap below sets the stagger. Landscape phones, tablets and PCs keep the row. */
@media (max-width:640px) and (orientation:portrait) {
  .detail-nav { flex-direction:column; flex-wrap:nowrap; gap:8px; }
  .detail-nav > :first-child { align-self:flex-start; }
  .detail-nav > :last-child { align-self:flex-end; }
}
.event-status { display:flex; gap:16px; align-items:baseline; border-bottom:1px solid var(--accent); padding:20px 0; margin-bottom:30px; color:var(--accent); }
.event-status strong { font-size:18px; }
.event-status span { font-size:14px; }
.notice { background:var(--tint); padding:18px 22px; border-left:3px solid var(--accent); font-size:14px; margin:24px 0; }
.facts { margin:0; }
.facts>div { display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--line); padding:18px 0; gap:24px; }
.facts dt { font-weight:700; }
.facts dd { margin:0; }
.facts dd p:last-child { margin-bottom:0; }
.award-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.award-block { border-top:2px solid var(--accent); background:var(--tint); padding:24px; }
.award-block p { font-size:14px; margin-bottom:0; }
.judge-placeholder { border:1px solid var(--line); padding:24px; color:var(--muted); }
details { border-bottom:1px solid var(--line); padding:18px 0; }
summary { font-weight:700; cursor:pointer; min-height:28px; }
details p { margin:16px 0 0; }
.year-list { padding:0; margin:0; list-style:none; }
.news-list { padding:0; margin:0; list-style:none; }
.year-list a { display:flex; gap:30px; align-items:center; padding:25px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.year-list strong { font-size:26px; font-weight:400; }
@media (hover: hover) and (pointer: fine) { .year-list a:hover span { text-decoration:underline; } }
.news-list li { border-bottom:1px solid var(--line); }
.news-list a { display:grid; text-decoration:none; }
@media (hover: hover) and (pointer: fine) { .news-list a:hover span { text-decoration:underline; } }
.news-list time { font-size:14px; }
.article-grid { display:grid; grid-template-columns:1fr 1fr; }
.article-card { border:1px solid var(--line); display:flex; flex-direction:column; text-decoration:none; background:#fff; }
.article-card img { background:var(--side); }
.article-card time { font-size:13px; }
@media(min-width:1400px) {
  .main-inner { padding:0 6.1403508772%; }
}
@media(min-width:1600px) {
  .main-inner { padding:0 100px; }
}
@media(max-width:1199.98px) and (min-width:1024px) {
  .filters { gap:6px; }
  .filters input { padding-inline:5px; font-size:12px; }
  .filters select { padding-inline:5px; font-size:12px; }
  .filters .button { padding-inline:8px; }
}
@media(max-width:1023.98px) {
  html { scroll-padding-top:76px; }
  body { padding-top:68px; background-color:var(--page-bg-mobile); }
  .layout { display:block; }
  /* Keep trailing content margins inside main when the sidebar owns the gap. */
  .main { display:flow-root; max-width:100%; padding:24px 0 0; }
  .main-inner { padding:0; width:88%; margin:0 auto; max-width:800px; }
  h1 { font-size:17px; }
  h2 { font-size:16.5px; }
  h3 { font-size:16px; }
  .page-heading { margin-bottom:24px; }
  .page-heading p { font-size:16px; }
  .section { margin-top:36px; }
  .home-kv { margin-bottom:40px; }
  .filters { grid-template-columns:1fr 1fr 1fr; }
  .filters .keyword { grid-column:1/3; }
  .filters input { font-size:16px; }
  .filters select { font-size:16px; }
  .facts>div { grid-template-columns:110px 1fr; gap:15px; }
  .work-reading h2 { font-size:17px; }
}
@media(max-width:640px) {
  .works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .work-card { width:100%; }
  .work-thumb { width:100%; height:auto; aspect-ratio:1; }
  .work-meta { padding:10px 10px 12px; }
  .work-author { font-size:14px; }
  .work-affiliation { font-size:12px; }
  .filters { grid-template-columns:1fr 1fr; }
  .filters .author { grid-column:1/-1; }
  .filters .keyword { grid-column:1/-1; }
  .filters .button { grid-column:1/-1; }
  .award-grid { grid-template-columns:1fr; }
  .facts>div { display:block; }
  .facts dt { margin-bottom:8px; }
  .event-status { display:block; }
  .event-status span { display:block; margin-top:6px; }
  .year-list a { gap:16px; }
  .year-list strong { font-size:22px; }
  .year-list span { font-size:14px; }
  .media-pending { min-height:180px; padding:24px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  * { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  *:before { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  *:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  .work-card:hover { transform:none; }
}
.thumb-missing { font-size:13px; text-align:center; color:#666; line-height:1.8; letter-spacing:.04em; }
.media-pending+.media-pending { margin-top:24px; }
@media print {
  body { padding-top:0; }
  .filters { display:none!important; }
  .detail-nav { display:none!important; }
  .layout { display:block; }
  .main { max-width:none; padding:0; }
  .main-inner { max-width:none; width:100%; padding:0; }
  .work-card { box-shadow:none; }
  .artwork { break-inside:avoid; }
}
p { margin-bottom: 1em; }
.prose { max-width: none; }
.prose p { font-size: 16px; line-height: 1.7407407407; }
.page-heading { padding-bottom: 17px; }
.page-heading h1 { margin: 5px 0 7px; }
/* Gallery selects draw their own down chevron 16px inside the right edge (Gene-NAVI's form select keeps ~1em),
   instead of the native arrow pressed against the border; the text stops before it. Size, border and fill stay. */
.filters select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 10px 6px; }
/* Gallery thumbnails use NAVI's 200px image limit inside the centered square media area. */
.work-thumb img { display: block; width: auto; height: auto; max-width: min(200px, 100%); max-height: min(200px, 100%); object-fit: contain; object-position: center; }
/* The label column fits the longest label (年度・ジャンル) on one line at every width. */
/* Page information -> the work itself: one shared boundary for every genre (NAVI's block margin is 36px at every width). */
.work-facts { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 16px; line-height: 1.5; margin: 0 0 36px; }
.work-facts dd:first-of-type { font-weight: 700; }
.work-facts dt { font-size: 13px; align-self: center; white-space: nowrap; }
.work-detail .artwork { margin-bottom: 36px; }
/* The work's own opening (title, credit) is set quietly centered above its text; the reading itself stays left aligned. */
.work-reading .work-opening { margin: 36px 0 32px; text-align: center; }
.work-reading .work-opening > * { margin: 0; white-space: normal; text-wrap: balance; line-height: 1.6; letter-spacing: .05em; }
.work-reading .work-opening > :first-child { font-size: 18px; font-weight: 700; }
/* A title's source emphasis must not compound its shared heading weight. */
.work-reading .work-opening > :first-child strong { font-weight: inherit; }
.work-reading .work-opening > :first-child ~ * { margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--muted); }
/* Lyrics: the stanza block sits on the same center axis as the title, sized to its longest line; every line stays left aligned. */
.work-reading .work-lyrics { width: fit-content; max-width: 100%; margin-inline: auto; }
.work-detail .section { margin-top: 36px; }
/* PC: the author's texts (作品について, 受賞者コメント) read in one centred 760px column, heading and body together. */
@media (min-width: 1024px) {
  .work-detail .work-comment { max-width: 760px; margin-inline: auto; }
}
.work-detail .section-heading { margin-bottom: 16px; }
.news-list { font-size: 16px; line-height: 1.5; }
.news-list li { border: 0; }
.news-list li + li { margin-top: 1.4375em; }
.news-list a { grid-template-columns: 108px minmax(0,1fr); gap: 0; padding: 0; align-items: start; }
.news-list .news-date, .news-date { display: block; font: 700 18px/1.5 var(--number-font); letter-spacing: normal; color: #9c9c9c; opacity: 1; white-space: nowrap; margin: 0; padding: 0 9px 0 0; }
.news-list a span { padding-top: .05em; text-decoration: underline; text-underline-offset: .2em; }
.past-award + .past-award { margin-top: 32px; }
/* Each award reads as a group: its name at the content edge, the winner and the work indented beneath it (18px, mobile too). */
.past-award p { margin: 0 0 8px 18px; }
/* 『 is a full-width glyph whose ink sits in its right half, so a name starting with it looks indented next to 大賞. Hang half an em on the
   first line only (text-indent, so a wrapped second line keeps the normal edge); the bracket's stroke then reads as flush with 大. */
.past-award h3.past-award-bracket { text-indent: -0.5em; }
@media (max-width:640px) {
  #past-overview .facts > div { display: block; }
  #past-overview .facts dt { margin-bottom: 8px; }
}
.article-grid { gap: 36px 3.829787234%; }
.article-card { position: relative; font-size: 18px; }
.article-image { overflow: hidden; aspect-ratio: 1 / .5244444444; }
.article-card img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.article-card-body { padding: 19px 20px 20px; }
.article-meta { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.article-card time { font: 700 16px/1 var(--number-font); color: #9c9c9c; margin-top: 3px; }
.article-card h2 { font-size: 18px; line-height: 1.5; letter-spacing: normal; margin: 0; }
.news-list a { transition: opacity .2s linear; }
@media (hover: hover) and (pointer: fine) { .news-list a:hover { opacity: .6; } }
@media (max-width: 1023.98px) {
  html { scroll-padding-top: 65px; }
  body { padding-top: 53px; }
  .page-heading { padding-bottom: 9px; margin-bottom: 18px; }
  .page-heading h1 { margin: 7px 0 9px; }
  .work-genre { font-size: 16px; line-height: 24px; }
  .work-author { font-size: 16px; line-height: 24px; }
  .work-affiliation { font-size: 16px; line-height: 24px; }
  .work-facts { gap: 4px 10px; }
  .work-reading .work-opening > :first-child { font-size: 16px; }
  .news-list { font-size: 12px; }
  .news-list a { grid-template-columns: 95px minmax(0,1fr); }
  .news-list .news-date, .news-date { font-size: 13.5px; padding-right: 0; }
  .news-list a span { padding-top: .2em; }
  .article-grid { row-gap: 24px; }
  .article-card { font-size: 13.5px; }
  .article-image { aspect-ratio: 1 / .5273556231; }
  .article-card-body { padding: 14px 14.5px 12px; }
  .article-meta { margin-bottom: 10.5px; }
  .article-card time { font-size: 12px; margin-top: 2.25px; }
  .article-card h2 { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .article-grid { row-gap: 18.72px; }
}
/* Gene-NAVI's article list (.p-tile--col2) is two columns from 600px; phones below that stack one card per row. */
@media (max-width: 599.98px) {
  .article-grid { grid-template-columns: 1fr; }
}
@media (max-width: 374.98px) {
  body { padding-top: 46.375px; }
}

/* Quiet gallery explanation and inline work metadata; never repeated inside cards. */
.affiliation-note { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6; margin: 12px 0 20px; }
.work-affiliation-timing { font-size: .8125em; font-weight: 400; color: var(--muted); letter-spacing: normal; white-space: nowrap; }