/* ============================================================
   A BALLAD OF CHAOS — the Artwork gallery
   Loaded after css/style.css (tokens, nav, footer, cosmos layers) and
   css/page.css (.pg-hero, .pg-title, .pg-lede, .pg-more).

   Two things drive every decision here: the page is a WALL of images over a
   live WebGL starfield, and the images themselves are loud. So the chrome is
   nearly absent — hairline rules, no filled panels — and the wall is held at
   a partial desaturation until you point at a piece. That is what makes eighty-odd
   images read as a collection instead of a pile.
   ============================================================ */

.art{position:relative;z-index:3}

/* ---- the header, on this page only ----
   Everywhere else the nav floats over the art and only fades a gradient in on
   scroll. Here the room index parks directly beneath it, so the two have to be
   the SAME ground or the seam reads as a rendering fault — and that ground is
   the .96→.8 pair the room index and the Characters page both already use, so
   the art still shows through. Scoped to body.artwork; no other page moves.
   It is on `.scrolled` ONLY — the bar starts transparent over the hero and takes
   the glass at y>40, like Characters and Essays. Painting the unscrolled state
   too made this page the odd one out, opaque from the first frame. The index sits
   far below the fold, so it can never stick while the nav is still clear. */
body.artwork .site-nav.scrolled{
  background:linear-gradient(180deg,rgba(10,8,9,.96),rgba(10,8,9,.8));
  -webkit-backdrop-filter:blur(14px) saturate(.9);
  backdrop-filter:blur(14px) saturate(.9)}

/* ============================================================ MASTHEAD */
/* Text left, the master ward ghosted into the space on the right. page.css caps
   .pg-lede at 40ch for the narrow author-page column; this hero is a two-column
   layout with room to breathe, so the measure is reset for both title and lede. */
.art-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:center}
.art-hero .pg-title{font-size:clamp(2.8rem,7vw,6rem)}
.art-hero .pg-title em{font-size:.36em}
.art-hero .pg-lede{max-width:56ch;font-size:clamp(1.12rem,1.55vw,1.4rem)}

.art-hero__ward{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1;
  pointer-events:none}
.art-hero__ward img{width:100%;height:100%;object-fit:contain;opacity:.16;
  filter:drop-shadow(0 0 60px rgba(209,4,3,.3));
  animation:art-ward-turn 210s linear infinite}
@keyframes art-ward-turn{to{transform:rotate(360deg)}}

/* The hero counts the collection out loud — the page's only statistic. Six of them
   won't sit on one line inside the hero's left column, and a flex row wrapping 5+1
   leaves an orphan; a 3x2 block is the same information read as a block on purpose. */
.art-tally{display:grid;grid-template-columns:repeat(3,max-content);
  gap:clamp(1.1rem,2.4vw,1.8rem) clamp(1.6rem,4vw,3rem);margin-top:2.4rem}
.art-tally div{display:flex;flex-direction:column;gap:.28rem}
.art-tally b{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1;color:var(--accent)}
.art-tally span{font-family:var(--label);font-size:.53rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash-dim)}

/* ---- the ribbon: a slow drift of the collection, before you know what it is ----
   Two identical tracks side by side, the pair translated by exactly -50%, so the
   seam lands where the second copy starts and the loop is invisible. Paused on
   hover so a piece can actually be clicked. */
.art-ribbon{position:relative;z-index:3;margin:clamp(2rem,5vw,3.5rem) 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.art-ribbon__rail{display:flex;width:max-content;animation:art-drift 76s linear infinite}
.art-ribbon:hover .art-ribbon__rail{animation-play-state:paused}
.art-ribbon__track{display:flex;gap:.7rem;padding-right:.7rem}
.art-ribbon button{flex:0 0 auto;width:clamp(96px,10vw,142px);aspect-ratio:.78;padding:0;border:0;
  background:#100c0d;cursor:pointer;overflow:hidden;opacity:.62;
  filter:grayscale(.5);transition:opacity .5s,filter .5s,transform .5s}
.art-ribbon button img{width:100%;height:100%;object-fit:cover}
.art-ribbon button:hover,.art-ribbon button:focus-visible{opacity:1;filter:none;transform:translateY(-4px)}
@keyframes art-drift{to{transform:translateX(-50%)}}

/* ============================================================ ROOM INDEX */
/* The site nav is position:fixed, so this has to park BELOW it rather than at 0
   or it pins itself out of sight. 5.4rem is the scrolled nav (66px mark + .7rem
   padding either side); the 760px block below matches the 44px mobile mark. */
/* top = .site-nav.scrolled's height: the 66px .logo__mark + 2 x its .7rem padding.
   Derived, not rounded -- a rem-only value drifts from the fixed-px mark. */
.art-index{position:sticky;top:calc(66px + 1.4rem);z-index:20;backdrop-filter:blur(14px) saturate(.9);
  background:linear-gradient(180deg,rgba(10,8,9,.96),rgba(10,8,9,.8));
  border-top:1px solid rgba(201,162,75,.1);
  border-bottom:1px solid rgba(201,162,75,.14)}
.art-index__in{max-width:1240px;margin:0 auto;padding:.8rem var(--gutter);
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none}
.art-index__in::-webkit-scrollbar{display:none}
.art-index a{flex:0 0 auto;display:flex;align-items:baseline;gap:.55em;padding:.5rem .9rem;
  font-family:var(--label);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);border:1px solid transparent;transition:color .3s,border-color .3s,background .3s}
.art-index a em{font-style:normal;font-size:.85em;opacity:.55}
.art-index a:hover{color:var(--bone)}
.art-index a.is-on{color:var(--bone);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* ============================================================ ROOMS */
/* clear both the fixed nav and the sticky index when jumped to from the index */
.art-room{max-width:1240px;margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gutter) 0;
  scroll-margin-top:9rem}
.art-room:last-of-type{padding-bottom:clamp(5rem,10vw,8rem)}
.art-room__head{display:flex;align-items:flex-end;gap:clamp(1.2rem,3vw,2.4rem);
  padding-bottom:1.4rem;margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(201,162,75,.16)}
.art-room__num{font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:.8;color:var(--accent);
  opacity:.65;flex:0 0 auto}
.art-room__ttl{font-family:var(--display);font-weight:600;line-height:1.05;
  font-size:clamp(1.6rem,3.2vw,2.5rem);color:var(--bone)}
.art-room__ttl em{display:block;font-size:.4em;font-style:italic;font-weight:500;
  color:var(--ash-dim);margin-top:.35rem;letter-spacing:.02em}
.art-room__n{margin-left:auto;font-family:var(--label);font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash);white-space:nowrap;padding-bottom:.4rem}
/* full bleed, not a column parked on the left — the room head above it is
   full width, and a narrow blurb under a full-width rule reads as a mistake */
.art-room__lede{margin:-1rem 0 clamp(2.2rem,4vw,3rem);
  color:var(--ash);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.7;
  text-wrap:pretty}
.art-room__lede em{color:var(--bone-dim);font-style:italic}

/* ============================================================ THE WALL */
.art-grid{display:grid;gap:clamp(.6rem,1.4vw,1.1rem)}
/* 42 portraits want a WALL — six to a row, not four fat ones */
.art-grid--faces{grid-template-columns:repeat(auto-fill,minmax(clamp(126px,11.5vw,158px),1fr))}
/* ---- the hand-drawn room: a justified wall, nothing cropped ----
   These are originals, so re-cropping them into a uniform tile the way Worlds and
   Stills do would be an edit, not a layout. Instead every row is FULLY justified:
   flex-basis AND flex-grow are both proportional to the piece's aspect ratio, so
   within a row each width comes out proportional to its ratio, which makes every
   height in that row identical. Rows fill edge to edge, nothing is cropped, and no
   piece leaves a hole under it. `--ar` is set per tile in artwork.js. */
.art-grid--pencil{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,1.8rem)}
.art-grid--pencil .piece{flex:var(--ar) 1 calc(var(--ar) * 13rem);aspect-ratio:var(--ar)}

/* Pencil and ink is already monochrome, so the wall's hold-until-you-look
   desaturation does nothing to it and the brightness dip just dulls the linework.
   These get their full value straight away, and a lift rather than a colour reveal. */
.piece--pencil img{filter:contrast(1.04)}
.piece--pencil:hover img,.piece--pencil:focus-visible img{filter:contrast(1.08) brightness(1.08)}
/* The stills come in three aspects (9:16, 2:3, 1:1), which on a row grid leaves
   ragged half-empty rows — so the TILE is a fixed 3:4 crop, four to a row, and
   the whole painting is restored in the viewer. */
.art-grid--stills{grid-template-columns:repeat(auto-fill,minmax(clamp(160px,17vw,240px),1fr));
  gap:clamp(.7rem,1.6vw,1.3rem)}
.art-grid--stills .piece{aspect-ratio:.75}
/* Worlds run 3:1 to 1:1. Letting each tile keep its own shape on a dense grid
   left holes wherever a row couldn't be packed, so the tile is now ONE 16:9 box,
   three to a row, and the art is cropped into it. The whole plate is restored,
   uncropped, the moment it opens — the crop is a wall decision, not an edit. */
.art-grid--worlds{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.6vw,1.2rem)}
.art-grid--worlds .piece{aspect-ratio:1.7778}

.piece{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  background:#0d0a0b;overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.piece img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.42) contrast(1.05) brightness(.92);
  transform:scale(1.001);
  transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.piece::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.14);transition:box-shadow .45s}
.piece:hover,.piece:focus-visible{transform:translateY(-5px);outline:0;
  box-shadow:0 28px 54px -24px rgba(0,0,0,.95),0 0 40px -16px var(--accent)}
.piece:hover img,.piece:focus-visible img{filter:none;transform:scale(1.055)}
.piece:hover::after,.piece:focus-visible::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 62%,transparent)}

/* the name plate rides in from under the bottom edge */
.piece__plate{position:absolute;left:0;right:0;bottom:0;padding:2.4rem .85rem .7rem;
  text-align:left;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,5,5,.9) 62%);
  transform:translateY(101%);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .35s}
.piece:hover .piece__plate,.piece:focus-visible .piece__plate{transform:none;opacity:1}
.piece__ttl{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;
  line-height:1.15;color:var(--bone)}
.piece__k{display:block;margin-top:.22rem;font-family:var(--label);font-size:.48rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* worlds: the downloadable ones wear a corner tag even at rest */
.piece__wall{position:absolute;top:.6rem;right:.6rem;z-index:2;pointer-events:none;
  font-family:var(--label);font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);padding:.32em .6em;background:rgba(6,5,5,.62);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  backdrop-filter:blur(4px);opacity:.72;transition:opacity .35s,background .35s}
.piece:hover .piece__wall{opacity:1;background:color-mix(in srgb,var(--accent) 78%,#000)}

/* ============================================================ SIGILS */
/* not a wall — a plate. The master ward sits beside the reasoning, the five
   bearings run as one rank beneath it, and the separators are shown as what
   they are: rules, at their real proportions. */
.art-wards{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:clamp(3rem,6vw,4.5rem)}
.ward-master{position:relative;width:min(100%,420px);justify-self:center;aspect-ratio:1;
  cursor:zoom-in;background:none;border:0;padding:0}
.ward-master img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 40px rgba(209,4,3,.16));transition:transform 1.2s,filter .8s}
.ward-master:hover img{transform:rotate(14deg) scale(1.03);
  filter:drop-shadow(0 0 60px rgba(209,4,3,.34))}
.art-wards__say p{color:var(--ash);font-size:1.05rem;line-height:1.75}
.art-wards__say p + p{margin-top:1rem}
.art-wards__say strong{color:var(--bone-dim);font-weight:600}

.art-rank{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.6rem,1.6vw,1.4rem)}
.art-rank--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ward{position:relative;display:block;width:100%;aspect-ratio:1;padding:11%;border:0;
  cursor:zoom-in;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 70%);
  transition:background .5s}
.ward img{width:100%;height:100%;object-fit:contain;opacity:.82;
  transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.3,1)}
.ward::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.12);transition:box-shadow .45s}
.ward:hover,.ward:focus-visible{outline:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
.ward:hover img,.ward:focus-visible img{opacity:1;transform:scale(1.06)}
.ward:hover::after,.ward:focus-visible::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.ward__cap{position:absolute;left:0;right:0;bottom:.5rem;text-align:center;pointer-events:none;
  font-family:var(--label);font-size:.47rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);transition:color .4s}
.ward:hover .ward__cap{color:var(--accent)}

.art-subhead{margin:clamp(2.6rem,5vw,4rem) 0 1.3rem;display:flex;align-items:baseline;gap:1rem}
.art-subhead h3{font-family:var(--label);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);flex:0 0 auto;font-weight:500}
.art-subhead span{font-size:.94rem;font-style:italic;color:var(--ash-dim);line-height:1.4}
.art-subhead::after{content:"";flex:1 1 auto;height:1px;background:rgba(201,162,75,.16)}

/* ============================================================ THE VIEWER */
.viewer{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(5,4,4,.93);backdrop-filter:blur(20px) saturate(.85)}
.viewer.is-open{display:block}
body.viewing{overflow:hidden}

/* The stage takes the whole overlay and the image is pinned to its top-left:
   the transform is the ONLY thing that positions it. Centring it with flex as
   well would compose with the translate and put every piece at double the
   offset — the transform maths in artwork.js owns placement outright. */
.viewer__stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.viewer__stage.is-dragging{cursor:grabbing}
.viewer__img{position:absolute;top:0;left:0;
  max-width:92vw;max-height:86vh;width:auto;height:auto;display:block;
  transform-origin:0 0;will-change:transform;
  box-shadow:0 40px 120px -40px rgba(0,0,0,1);user-select:none;-webkit-user-drag:none}
.viewer__img.is-settling{transition:transform .34s cubic-bezier(.2,.7,.3,1)}
/* the sigils are line-art on transparency — they need a ground, not a photo frame */
.viewer__img.is-ward{background:radial-gradient(circle at 50% 45%,#151011,#0a0809 72%);
  padding:3%;max-width:min(86vw,660px);max-height:80vh}

.viewer__spin{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(201,162,75,.2);border-top-color:var(--accent);border-radius:50%;
  animation:vspin .9s linear infinite;opacity:0;transition:opacity .3s;pointer-events:none}
.viewer.is-loading .viewer__spin{opacity:1}
@keyframes vspin{to{transform:rotate(360deg)}}

/* ---- caption rail ---- */
.viewer__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:clamp(3rem,8vw,5.5rem) clamp(1.1rem,4vw,3rem) clamp(1.5rem,2.6vw,2.2rem);
  background:linear-gradient(180deg,transparent,rgba(5,4,4,.72) 42%,rgba(5,4,4,.94) 78%);
  display:flex;align-items:flex-end;gap:clamp(1rem,3vw,2.4rem);flex-wrap:wrap}
.viewer__cap > *{pointer-events:auto}
.viewer__txt{min-width:0;flex:1 1 22rem}
.viewer__room{font-family:var(--label);font-size:.5rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.45rem}
.viewer__ttl{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.1;color:var(--bone)}
.viewer__note{margin-top:.4rem;font-size:.99rem;font-style:italic;color:var(--ash);
  line-height:1.5;max-width:56ch}
.viewer__meta{font-family:var(--label);font-size:.48rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);margin-top:.6rem;display:flex;
  flex-wrap:wrap;gap:.35rem 1.1rem}

/* [hidden] is only display:none at author-level specificity — a flex display
   on the class outranks it, so say it here or every sigil offers a wallpaper */
.vget[hidden]{display:none}
.vget{display:inline-flex;align-items:center;gap:.65em;flex:0 0 auto;
  padding:.75rem 1.15rem;font-family:var(--label);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  transition:background .35s,color .35s,gap .35s}
.vget:hover{background:var(--accent);color:#100b09;gap:1.05em}
.vget svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.vget em{font-style:normal;opacity:.62;font-size:.9em}

/* ---- controls ---- */
.vbtn{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:1px solid rgba(201,162,75,.18);
  background:rgba(10,8,9,.55);color:var(--bone-dim);cursor:pointer;backdrop-filter:blur(8px);
  transition:color .3s,border-color .3s,background .3s,transform .3s}
.vbtn:hover{color:var(--bone);border-color:var(--accent);background:rgba(10,8,9,.85)}
.vbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.vbtn--x{top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem)}
.vbtn--prev{left:clamp(.6rem,2vw,1.6rem);top:50%;margin-top:-23px}
.vbtn--next{right:clamp(.6rem,2vw,1.6rem);top:50%;margin-top:-23px}
.vbtn--prev:hover{transform:translateX(-3px)}
.vbtn--next:hover{transform:translateX(3px)}
.vbtn[disabled]{opacity:.22;pointer-events:none}

.viewer__zoom{position:absolute;z-index:4;top:clamp(.8rem,2vw,1.4rem);
  left:clamp(.8rem,2vw,1.4rem);display:flex;align-items:center;gap:.55rem}
.viewer__zoom .vbtn{position:static;width:38px;height:38px}
.viewer__pct{font-family:var(--label);font-size:.5rem;letter-spacing:.14em;color:var(--ash-dim);
  min-width:3.4em;text-align:center}
.viewer__count{position:absolute;z-index:4;top:calc(clamp(.8rem,2vw,1.4rem) + 62px);
  left:clamp(.8rem,2vw,1.4rem);font-family:var(--label);font-size:.5rem;letter-spacing:.22em;
  color:var(--ash-dim)}
.viewer__count b{color:var(--bone);font-weight:500}

/* sits above the caption rail, not on top of it */
.viewer__hint{position:absolute;z-index:4;top:calc(clamp(.8rem,2vw,1.4rem) + 6px);
  left:50%;transform:translateX(-50%);
  font-family:var(--label);font-size:.44rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);opacity:.45;white-space:nowrap;pointer-events:none;
  transition:opacity .5s}
.viewer.is-zoomed .viewer__hint{opacity:0}

/* ============================================================ CLOSING */
.art-close{max-width:1240px;margin:0 auto;padding:0 var(--gutter) clamp(6rem,11vw,9rem)}
.art-close__box{border-top:1px solid rgba(201,162,75,.16);padding-top:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem);align-items:flex-start}
.art-close__box p{flex:1 1 26rem;max-width:56ch;color:var(--ash);font-size:1.02rem;line-height:1.72}
.art-close__box p em{color:var(--bone-dim);font-style:italic}

/* ============================================================ RESPONSIVE */
@media(max-width:1040px){
  .art-hero{grid-template-columns:1fr}
  .art-hero__ward{order:-1;width:min(46%,220px)}
  .art-wards{grid-template-columns:1fr;gap:2.2rem}
  .ward-master{width:min(74%,320px)}
}
@media(max-width:760px){
  .art-index{top:calc(44px + 1.4rem)}  /* 44px mark below 760px */
  .art-room{padding-left:1.25rem;padding-right:1.25rem}
  .art-close{padding-left:1.25rem;padding-right:1.25rem}
  /* Ankit, 23 Aug: *"adjust the hero space such that the submenu shows above the fold, like it shows
     on press page"*. Measured at 390x844 the room index started at y1017 — 173px past the fold — and
     the two biggest contributors were both in the masthead: the decorative ward (161px) and this tally
     at three rows (166px). The ward goes on a phone exactly as `.ch-hero__sigil` already does on
     Characters; the tally goes to three columns, so six figures take two rows instead of three. */
  .art-hero__ward{display:none}
  .art-tally{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .8rem}
  .art-tally span{letter-spacing:.18em}
  .art-room__head{flex-wrap:wrap;gap:.9rem}
  .art-room__n{margin-left:0;width:100%;padding-bottom:0}
  .art-grid--faces{grid-template-columns:repeat(auto-fill,minmax(clamp(118px,30vw,150px),1fr))}
  /* two 16:9 tiles to a row would be postage stamps — one, full width */
  .art-grid--worlds{grid-template-columns:1fr}
  .art-grid--stills{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* a justified row of four is unreadable on a phone — let the basis force pairs */
  .art-grid--pencil .piece{flex-basis:calc(var(--ar) * 7.5rem)}
  .art-rank,.art-rank--four{grid-template-columns:repeat(3,minmax(0,1fr))}
  .piece img{filter:grayscale(.25) brightness(.9)}
  .vbtn--prev,.vbtn--next{top:auto;bottom:calc(50% - 23px);margin-top:0}
  .viewer__cap{padding-bottom:1rem}
  .viewer__note{display:none}
  .viewer__hint{display:none}
}

/* ============================================================ NO HOVER = NO AFFORDANCE
   Ankit, 21 Aug: *"no mouseover in mobile"*, applied across the site. Gated on `hover:none`, not on a
   width: this is a question about the INPUT. A tablet and a touch laptop lose a hover reveal exactly
   the way a phone does, and a narrow desktop window does not lose it at all.
   The line drawn here is **information vs decoration**. A caption, a title, the only sign that a
   thing is downloadable — those come back. Colour washes, scale nudges and opacity lifts on things
   that are already visible stay hover-only, because making every one of them permanent flattens the
   design rather than fixing anything. */
@media(hover:none){
  /* the plate carries the piece's title — the only way to read one without a pointer. Moved here
     out of the 760px block so a touch tablet gets it too. */
  .piece__plate{transform:none;opacity:1;padding-top:1.8rem}
}

@media(prefers-reduced-motion:reduce){
  .art-ribbon__rail,.art-hero__ward img{animation:none}
  .piece,.piece img,.ward img,.ward-master img,.piece__plate,.viewer__img{transition:none}
  .piece:hover{transform:none}
  .piece:hover img{transform:none}
}