/* =====================================================================
   SIRIN GUNKLOY — Archive module (Klingspor-style)
   Shared by the home page (archive-first) and the dedicated Archive page.
   ===================================================================== */

/* Paper base for any page hosting the archive */
body.archive-host { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-dim: var(--muted); --hairline: var(--line-dark); }
body.archive-host ::selection { background: var(--ink); color: var(--paper); }

/* ---------- Intro masthead (home) ---------- */
.arc-hero { padding: calc(var(--nav-h) + 6vh) 0 2vh; }
.arc-hero h1 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: .95; letter-spacing: -0.02em; }
.arc-hero h1 .th { font-family: var(--thai); font-size: var(--fs-body); color: var(--fg-dim); display: block; }
.arc-hero p { max-width: 56ch; color: var(--fg-dim); margin-top: 1.2rem; }
.arc-hero__meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; margin-top: 1.6rem; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.arc-hero__meta b { font-family: var(--serif); font-weight: 200; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--fs-body); margin-right: .4em; }

/* ---------- Sticky toolbar ---------- */
.arc-bar { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(247,247,245,.9); backdrop-filter: blur(10px);
  border-block: 1px solid var(--line-dark); padding: .9rem 0; margin-top: 5vh; }
.arc-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.3rem; }
.arc-bar__group { display: flex; align-items: center; gap: .5rem; }
.arc-bar__label { font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
.arc-bar__sep { width: 1px; align-self: stretch; background: var(--line-dark); }

/* segmented toggles */
.view-toggle, .script-toggle { display: flex; border: 1px solid var(--line-dark); border-radius: 100px; overflow: hidden; }
.view-toggle button, .script-toggle button { padding: .5em 1em; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s; }
.view-toggle button[aria-pressed="true"], .script-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* category chips */
#arc-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
#arc-cats button { padding: .4em .9em; font-size: var(--fs-small); letter-spacing: .06em; border: 1px solid var(--line-dark); border-radius: 100px; transition: background .25s, color .25s, border-color .25s; }
#arc-cats button[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* native selects */
.arc-select { font: inherit; font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink); background: transparent;
  border: 1px solid var(--line-dark); border-radius: 100px; padding: .5em 2em .5em 1em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  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='%238c8678' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8em center; }
.arc-select:focus { outline: none; border-color: var(--accent); }

/* object-colour swatches */
#arc-colors { display: flex; align-items: center; gap: .35rem; }
.arc-color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: transform .2s; padding: 0; }
.arc-color span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); display: block; }
.arc-color.is-all { width: auto; padding: 0 .8em; height: 22px; border-radius: 100px; font-size: var(--fs-small); letter-spacing: .06em; color: var(--fg-dim); }
.arc-color[aria-pressed="true"] { transform: scale(1.12); border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.arc-color.is-all[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; transform: none; }

/* search */
.arc-search { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line-dark); margin-left: auto; }
.arc-search input { background: none; border: none; outline: none; font: inherit; font-size: var(--fs-small); letter-spacing: .05em; padding: .4em 0; width: clamp(110px, 16vw, 190px); color: var(--ink); }
.arc-search input::placeholder { color: var(--fg-dim); }

.arc-iconbtn { width: 30px; height: 30px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-small); transition: background .25s, color .25s; }
.arc-iconbtn:hover, .arc-iconbtn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
#arc-reset { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
#arc-reset:hover { color: var(--accent); }
#arc-count { font-family: var(--serif); }

/* ---------- Stage / views ---------- */
.arc-stage { padding: 7vh 0 18vh; min-height: 60vh; }
.arc-empty { padding: 6vh 0; color: var(--fg-dim); font-family: var(--serif); font-size: var(--fs-section); }

.arc-grid.view-masonry { columns: 3 300px; column-gap: clamp(1.6rem,3.2vw,3.2rem); }
.arc-grid.view-masonry .arc-card { break-inside: avoid; margin-bottom: clamp(1.6rem,3.2vw,3.2rem); }
.arc-grid.view-stack { position: relative; min-height: 78vh; }
.arc-grid.view-stack .arc-card { position: absolute; width: clamp(180px, 18vw, 250px); transform: rotate(var(--rot,0deg)); transition: box-shadow .3s, transform .15s; cursor: grab; }
.arc-grid.view-stack .arc-card.dragging { cursor: grabbing; transform: rotate(0deg) scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.arc-grid.view-stack .arc-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.18); }

.arc-card { background: var(--paper); border: 1px solid var(--line-dark); padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.arc-card__head { display: flex; justify-content: space-between; font-size: var(--fs-small); letter-spacing: .1em; color: var(--fg-dim); }
.arc-card__glyph { flex: 1; display: grid; place-items: center; font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: .8; color: var(--gc, var(--ink)); }
.arc-card__glyph.thai { font-family: var(--thai); }
.arc-card__foot { display: flex; flex-direction: column; gap: .2rem; }
/* Project names italic in every view (27-Aug feedback: "ตรงชื่อโปรเจคทุกชื่อ ขอปรับเป็นตัวเอียง") */
.arc-card__foot .t, .arc-row .r-title, .cmp-meta__title { font-style: italic; }
.arc-card__foot .t { font-size: var(--fs-body); font-family: var(--serif); }
.arc-card__foot .t .thai { font-family: var(--thai); color: var(--fg-dim); font-size: var(--fs-body); }
.arc-card__foot .m { font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }

/* image objects (real works) */
.arc-card__media { overflow: hidden; background: var(--paper-dim); border: 1px solid var(--line-dark); }
.work-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No portfolio picture (image audit 2026-09-26): a type card set in the
   work's own webfont, or a plain "image pending" tile — never a stand-in. */
.work-img--type, .work-img--pending { background: #000; display: flex; align-items: center; justify-content: center; }
.work-img--type svg { width: 100%; height: 100%; display: block; }
.work-img--pending { color: var(--muted); font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small);
  letter-spacing: .12em; text-transform: uppercase; }
.arc-card__media .work-img { aspect-ratio: 16/10; }
.cmp-media { overflow: hidden; background: var(--paper-dim); }
.cmp-media .work-img { aspect-ratio: 5/4; }
.r-thumb { width: 56px; height: 38px; overflow: hidden; background: var(--paper-dim); border: 1px solid var(--line-dark); }
.r-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-thumb svg { width: 100%; height: 100%; display: block; background: #000; }   /* a live-type cover (Manu) where there is no picture */
.work-plate { background: #fff; }
.work-plate .work-img { aspect-ratio: 16/10; object-fit: contain; background: #fff; }
.sheet__link { color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.4); }
.sheet__link:hover { border-color: var(--paper); }

/* list / index */
.arc-grid.view-list { display: flex; flex-direction: column; }
.arc-row { display: grid; grid-template-columns: 80px 60px 1.4fr 1fr .8fr 60px; align-items: center; gap: 1rem;
  padding: 1rem .4rem; border-bottom: 1px solid var(--line-dark); font-size: var(--fs-body); transition: background .25s, padding-left .25s; }
.arc-row:hover { background: rgba(13,13,12,.04); padding-left: 1rem; }
.arc-row .r-id, .arc-row .r-cat, .arc-row .r-year { font-size: var(--fs-small); letter-spacing: .08em; color: var(--fg-dim); }
.arc-row .r-glyph { font-family: var(--serif); font-size: var(--fs-section); }
.arc-row .r-glyph.thai { font-family: var(--thai); }
.arc-row .r-fam { color: var(--fg-dim); }

/* compare / side-by-side */
.arc-grid.view-compare { display: flex; gap: clamp(1rem,2vw,2rem); overflow-x: auto; padding-bottom: 1.5rem; scroll-snap-type: x mandatory; }
.cmp-panel { flex: 0 0 clamp(300px, 42vw, 460px); scroll-snap-align: start; border: 1px solid var(--line-dark); background: var(--paper); cursor: pointer; display: flex; flex-direction: column; }
.cmp-panel .plate-art { aspect-ratio: 5/4; }
.cmp-meta { padding: 1.2rem 1.3rem 1.5rem; }
.cmp-meta__id { font-size: var(--fs-small); letter-spacing: .12em; color: var(--fg-dim); }
.cmp-meta__title { font-family: var(--serif); font-size: var(--fs-section); line-height: 1.05; margin: .2rem 0 1rem; }
.cmp-meta__dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line-dark); font-size: var(--fs-body); }
.cmp-meta__dl dt { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }

/* ---------- Plate art treatments — monochrome gallery objects ---------- */
.plate-art { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 16/10; padding: 13%; background: var(--paper-dim); }
.plate-art__glyph { font-family: var(--serif); font-weight: 200; line-height: .8; font-size: var(--fs-section); color: var(--gc); }
.plate-art.thai .plate-art__glyph { font-family: var(--thai); }
.plate--ink { background: #141414; }
.plate--ink .plate-art__glyph { color: var(--paper); text-shadow: 0 0 55px rgba(255,255,255,.14); }
.plate--grid { background:
  linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 30px 30px,
  linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 30px 30px,
  #ffffff; }
.plate--grid .plate-art__glyph { color: transparent; -webkit-text-stroke: 1.5px var(--gc); text-stroke: 1.5px var(--gc); }
.plate--rubbing { background: #e5e4e1; }
.plate--rubbing::before { content: ""; position: absolute; inset: 0; opacity: .26; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.plate--rubbing .plate-art__glyph { color: #2b2b2b; opacity: .82; mix-blend-mode: multiply; }
.plate--outline { background: #fafafa; }
.plate--outline .plate-art__glyph { color: transparent; -webkit-text-stroke: 2px var(--gc); text-stroke: 2px var(--gc); }

/* ---------- Data sheet ---------- */
/* Full-screen gallery reader — a dark "room" you step into */
.sheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
body.sheet-open { overflow: hidden; }
body.sheet-open .sheet { pointer-events: auto; }
.sheet__scrim { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .4s var(--ease); }
body.sheet-open .sheet__scrim { opacity: 1; }
.sheet__page { position: absolute; inset: 0; background: var(--ink); color: var(--paper); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.sheet-open .sheet__page { opacity: 1; transform: none; }
.sheet__bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem clamp(1.4rem,4vw,3rem);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink); z-index: 2; }
.sheet__id { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .2em; color: var(--muted); }
.sheet__close { font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.sheet__close:hover { color: var(--muted); }

.sheet__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none;
  container-type: size; }   /* lets the first screen size itself to the scroller (cqh) */
.sheet__inner { --pt: clamp(2rem,7vh,5rem); --sg: clamp(1.5rem,4vw,3rem);   /* top space · grid gutter */
  max-width: 1080px; margin-inline: auto; padding: var(--pt) clamp(1.4rem,5vw,3rem) clamp(4rem,14vh,9rem); }

/* First screen = the image alone (27-Aug: image first with fitting space
   around it, no text yet; scroll on for title, details, description).
   The first figure fills exactly one screen of the scroller and the image is
   fitted inside it, so a tall plate no longer runs off-screen and the
   masthead never peeks in underneath. */
.sheet__inner > :first-child { height: calc(100cqh - var(--pt)); margin: 0; padding-bottom: var(--pt);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sheet__inner > :first-child img.work-img { width: 100%; height: 100%; object-fit: contain; }   /* fill the screen box, fit the image inside */
.sheet__inner > :first-child svg { width: 100%; height: 100%; }

/* ===== Museum-caption art direction (client feedback, 2026-08-27) =====
   3 sizes / 3 levels only, flush-left throughout, Lava Thai Thin as the one
   voice (italic reserved for the work title). "Other levels" (Headline,
   Caption) fill the full width; only Text sits in a 2-col grid: Thai in
   column 1, English in column 2, both always visible — independent of the
   site's EN/TH toggle, like a bilingual gallery caption (2026-08-24 feedback). */

/* Masthead — BAE So-Hyun-style page caption (2026-09-20): one 4-column row —
   title+category, studio+year, role, ID. Sits right after the opening
   image (27-Aug feedback: image first, then title, details, description),
   followed by the colophon.
   Swiss grid (layout audit 2026-09-26): four equal columns on the same
   gutter as the 2-column text, so column 3 starts exactly where the English
   text column does — caption, colophon and text share one set of lines. */
.sheet__masthead { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--sg); row-gap: .6rem; align-items: start;
  padding-block: clamp(1rem,4vh,2.5rem) clamp(1rem,3vh,1.6rem); }
.sheet__mh-title { min-width: 0; }
.sheet__title { font-family: var(--wf-lava); font-weight: 200; font-style: italic; font-size: var(--fs-section); line-height: .98; letter-spacing: -0.01em; }
.sheet__title-th { font-family: var(--wf-lava); font-weight: 200; font-style: italic; color: var(--muted); display: block; font-size: var(--fs-body); margin-top: .5rem; }
.sheet__mh-cat { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }
.sheet__mh-meta p, .sheet__mh-desc p { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-body); }
.sheet__mh-meta { color: var(--muted); }
.sheet__mh-desc p { color: rgba(247,247,245,.85); }
.sheet__mh-id { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .12em; color: var(--muted);
  justify-self: end; text-align: right; }   /* flush to the grid's right edge, like a page number (client, 2026-09-26) */
/* Colophon — Ad Reinhardt booklet ref (13-Sep): "role : names" in two flush-left
   columns, caption size, one rule closing the whole caption block. */
.sheet__colophon { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--sg); row-gap: .3rem;
  padding-bottom: clamp(1.5rem,4vh,2rem); border-bottom: 1px solid var(--line);
  font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); line-height: 1.5; }
.sheet__col-row { display: contents; }
.sheet__colophon dt { grid-column: 1; color: var(--muted); }
.sheet__colophon dd { grid-column: 2 / -1; }   /* names line up under studio+year */
.sheet__colophon dt::after { content: ' :'; }
.sheet__colophon dd { color: rgba(247,247,245,.85); }
.sheet__colophon .sheet__link { color: rgba(247,247,245,.85); }

/* Typeface opening card (13-Sep "Project Font" ref, deck p.28/43): black
   stage, name in both scripts; solid = the script Sirin drew, outline = not.
   An SVG graphic (like the deck slides it follows), so its glyph size scales
   with the frame rather than sitting on the 13/16/40 UI text scale. */
.sheet__open { margin-top: 0; }
.sheet__open svg { display: block; width: 100%; height: auto; }
.sheet__open-bg { fill: #000; }
.sheet__open-t { font-size: 200px; font-weight: 300; }
.sheet__open-t.is-drawn { fill: var(--paper); }
.sheet__open-t.is-undrawn { fill: none; stroke: var(--paper); stroke-width: 1; }

/* Plates — framed works, generous air between them. Flush to the same
   left/right edge as the hero/data/read text (client feedback, 2026-09-20:
   pixel-perfect grid like the BAE So-Hyun portfolio reference — every block,
   image or text, shares one margin instead of images floating narrower/centered). */
.sheet__fig { margin: clamp(2.5rem,8vh,6rem) 0; }
.sheet__fig img.work-img { width: 100%; display: block; }

/* Reading sections — Caption level (label + heading) fills full width;
   Text level (the paragraph) is the only 2-col grid. */
.sheet__read { margin: clamp(2.5rem,9vh,6.5rem) 0; text-align: left; }
.sheet__read-cap { margin-bottom: 1.2rem; }
.sheet__read-label, .sheet__read-h { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); color: var(--muted); }
.sheet__read-label { letter-spacing: .22em; text-transform: uppercase; margin-bottom: .4rem; }
.sheet__read-h { letter-spacing: .01em; }
.sheet__read-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sg); }
.sheet__read-p { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-body); line-height: 1.7; color: rgba(247,247,245,.85); text-align: left; }
.sheet__read-p--th { grid-column: 1; }
.sheet__read-p--en { grid-column: 2; }

/* Gallery mosaic — BAE So-Hyun-style multi-image grid (client feedback,
   2026-09-20/21): real plates from the Dropbox portfolio import, in a tight
   grid in one frame, sitting at the very end of the sheet, flush to the same
   margin as everything above it. Column count follows the real photo count
   per work (1/2/4 = that many columns, 3 or 5-6 = a 3-wide row) — a work with
   no real extra plates renders no gallery section at all (see galleryHTML in
   js/archive-v2.js), never a placeholder standing in for missing photography. */
.sheet__gallery { margin: clamp(3rem,9vh,6.5rem) 0 0; }
.sheet__gallery-label { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.sheet__gallery-rows { --gg: clamp(6px, .8vw, 10px); display: flex; flex-direction: column; gap: var(--gg); }
/* Justified rows (BAE So-Hyun): each figure grows in proportion to its own
   aspect ratio and keeps that ratio, so every image in a row ends up the
   same height and the row fills the column — no boxes, no letterboxing. */
.sheet__gallery-row { display: flex; gap: var(--gg); width: calc(var(--fill, 1) * 100%); }
.sheet__gallery-item { flex: var(--r) 1 0; aspect-ratio: var(--r); min-width: 0; margin: 0; }
.sheet__gallery-item img.work-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Asymmetric block (BAE pp.13/15/19): one lead image beside two stacked
   ones, top and bottom flush. With lead aspect a and k = 1/b + 1/c for the
   stacked pair, the stack width that makes both columns the same height is
   w = (W − g·(1 + a)) / (a·k + 1); the lead takes the rest. */
.sheet__gallery-asym { display: flex; gap: var(--gg); align-items: flex-start; }
.sheet__gallery-asym.is-R { flex-direction: row-reverse; }
.sheet__gallery-asym > .sheet__gallery-item { flex: 1 1 0; aspect-ratio: var(--a); }
.sheet__gallery-stack { flex: none; width: calc((100% - var(--gg) * (1 + var(--a))) / (var(--a) * var(--k) + 1));
  display: flex; flex-direction: column; gap: var(--gg); }
.sheet__gallery-stack > .sheet__gallery-item { flex: none; width: 100%; }

@media (max-width: 620px) {
  /* phone: lead image full width, the pair below it as a justified row */
  .sheet__gallery-asym, .sheet__gallery-asym.is-R { flex-direction: column; }
  .sheet__gallery-asym > .sheet__gallery-item { width: 100%; flex: none; }
  .sheet__gallery-stack { width: 100%; flex-direction: row; }
  .sheet__gallery-stack > .sheet__gallery-item { flex: var(--r) 1 0; width: auto; }
  .sheet__read-grid { grid-template-columns: 1fr; }
  .sheet__read-p--th, .sheet__read-p--en { grid-column: 1; }
  .sheet__masthead { grid-template-columns: 1fr; gap: .6rem; }
  .sheet__mh-id { order: -1; }
  .sheet__colophon { grid-template-columns: 1fr; row-gap: 0; }
  .sheet__colophon dt, .sheet__colophon dd { grid-column: 1; }
  .sheet__colophon dd { margin-bottom: .5rem; }
}
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: middle; margin-right: .3em; }

/* ---------- Info "?" overlay ---------- */
.arc-info { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
body.info-open .arc-info { pointer-events: auto; }
.arc-info__scrim { position: absolute; inset: 0; background: rgba(13,13,12,.6); opacity: 0; transition: opacity .4s; }
body.info-open .arc-info__scrim { opacity: 1; }
.arc-info__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--pad-x);
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
body.info-open .arc-info__panel { opacity: 1; transform: none; }
.arc-info__card { background: var(--paper); color: var(--ink); max-width: 640px; width: 100%; padding: clamp(2rem,5vw,3.5rem); position: relative; }
.arc-info__card h2 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); margin-bottom: 1.2rem; }
.arc-info__card p { color: var(--fg-dim); margin-bottom: 1rem; max-width: 56ch; }
.arc-info__card dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin-top: 1.4rem; font-size: var(--fs-body); }
.arc-info__card dt { font-weight: 200; }
.arc-info__close { position: absolute; top: 1.2rem; right: 1.4rem; font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-dim); }
.arc-info__close:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .arc-grid.view-masonry { columns: 2 200px; } }
@media (max-width: 720px) {
  .arc-row { grid-template-columns: 44px 56px 1.5fr .7fr; }
  .arc-row .r-fam, .arc-row .r-year { display: none; }
  .arc-bar__sep { display: none; }
  .arc-search { margin-left: 0; }
}
@media (max-width: 520px) { .arc-grid.view-masonry { columns: 1; } .arc-grid.view-stack .arc-card { width: 46vw; } .cmp-panel { flex-basis: 80vw; } }

/* ---------- Full-view lightbox (client, 2026-09-26) ---------- */
.work-img.is-zoomable { cursor: zoom-in; }
.work-img.is-zoomable:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(8,8,8,.96); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { margin: 0; width: 100%; height: 100%; padding: clamp(3.2rem,8vh,4.5rem) clamp(3rem,7vw,6rem); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.lightbox__img { max-width: 100%; max-height: calc(100% - 2rem); object-fit: contain; display: block; cursor: zoom-out; }
.lightbox__cap { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .12em; color: var(--muted); }
.lightbox__btn { position: absolute; font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); letter-spacing: .15em;
  text-transform: uppercase; color: var(--paper); padding: .8rem; }
.lightbox__btn:hover { color: var(--muted); }
.lightbox__close { top: .6rem; right: clamp(.8rem,3vw,2.2rem); }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); font-size: var(--fs-body); letter-spacing: 0; }
.lightbox__prev { left: clamp(.4rem,2vw,1.6rem); }
.lightbox__next { right: clamp(.4rem,2vw,1.6rem); }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next { display: none; }

/* ---------- Films (Vimeo, background mode) — 2026-10-05 ----------
   A clip sits in the layout exactly like a photograph: same aspect-ratio box,
   no controls, muted loop. The transparent button on top opens it in the
   lightbox with controls. */
.work-video { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.work-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.work-video__zoom { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; padding: 0; cursor: zoom-in; }
.work-video__zoom:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
/* opening film: as large as the first screen allows at its own ratio */
.sheet__open--video .work-video { aspect-ratio: var(--r); width: min(100%, calc((100cqh - var(--pt) * 2) * var(--r))); height: auto; }
.lightbox__video { aspect-ratio: var(--r, 16/9); width: min(100%, calc((100vh - 9rem) * var(--r, 1.7778))); position: relative; }
.lightbox__video[hidden], .lightbox__img[hidden] { display: none; }
.lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Live-type specimen (Manu, 2026-10-05) ----------
   Paper plates set in the real webfont, laid out on the same gutter as the
   gallery so they read as pictures of the type, not page text. Sizes inside
   the plates scale with the plate (container units), like an image would. */
.sheet__spec-note { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); color: var(--muted); margin: -.6rem 0 1.2rem; }
.sheet__spec { --gg: clamp(6px, .8vw, 10px); display: flex; flex-direction: column; }
.sheet__spec > div + div, .sheet__spec-styles + .sheet__spec-ramp { margin-top: var(--gg); }
.sheet__spec-card { margin: 0; background: var(--paper); color: var(--ink); container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; padding: clamp(1rem, 3cqi, 2rem); box-sizing: border-box; }
.sheet__spec-cap { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); color: #6b6b66; margin: 0; }
.sheet__spec-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gg); }
.sheet__spec-styles .sheet__spec-card { aspect-ratio: 4 / 5; }
/* the sitewide Lava weight (200) must not leak in: plates show each cut's Regular */
.sheet__spec-big, .sheet__spec-para, .sheet__spec-chars { font-weight: 400; }
.sheet__spec-big { font-size: 15cqi; line-height: 1.35; margin: 0; }
.sheet__spec-row { display: grid; grid-template-columns: 9rem 1fr; align-items: baseline; gap: 1rem; border-top: 1px solid rgba(20,20,20,.12); padding: .35rem 0; }
.sheet__spec-row:first-child { border-top: 0; }
.sheet__spec-w { font-family: var(--wf-lava); font-weight: 200; font-size: var(--fs-small); color: #6b6b66; }
.sheet__spec-line { font-size: 4.6cqi; line-height: 1.45; }
.sheet__spec-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg); }
.sheet__spec-pair .sheet__spec-card { aspect-ratio: 4 / 3; }
.sheet__spec-para { font-size: 7cqi; line-height: 1.6; margin: 0; }
.sheet__spec-chars { font-size: 8.5cqi; line-height: 1.55; margin: 0; word-break: break-all; }
@media (max-width: 620px) {
  .sheet__spec-styles, .sheet__spec-pair { grid-template-columns: 1fr; }
  .sheet__spec-styles .sheet__spec-card { aspect-ratio: 3 / 2; }
  .sheet__spec-pair .sheet__spec-card { aspect-ratio: auto; }
  .sheet__spec-row { grid-template-columns: 6rem 1fr; }
  .sheet__spec-line { font-size: 9cqi; }
}