/* ==========================================================================
   SAUTER ARCHIV — Elin Sauter, photographer, Zürich (fictional)
   Archive / catalogue system: archival paper, ink, one Stamp Ink accent.
   Archivo (variable wdth/wght) + IBM Plex Mono. Swiss 12-column grid.
   Longhand gaps/padding/borders + literal grid columns (Webflow-portable).
   ========================================================================== */

:root {
  --paper: #EEEDE9;
  --paper-2: #E3E1DB;
  --ink: #141413;
  --muted: #5E5C57;
  --rule: #CBC8C1;
  --accent: #3424E8;
  --viewer: #111110;
  --chrome: rgba(20, 20, 19, .84);

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --vw: 1vw;                                       /* set by JS to clientWidth / 100 (no scrollbar) */
  --m: clamp(16px, 1.667vw, 32px);
  --g: clamp(12px, 1.111vw, 20px);
  --col: calc((var(--vw) * 100 - 2 * var(--m) - 11 * var(--g)) / 12);
  --sec: clamp(96px, 12vw, 200px);
  --hdr-h: 68px;

  --fs-mono: clamp(11.5px, .8vw, 13px);
  --fs-body: clamp(15px, 1.05vw, 18px);
  --fs-body-l: clamp(17px, 1.25vw, 21px);
  --fs-sub: clamp(20px, 2vw, 34px);
  --fs-statement: clamp(28px, 3.4vw, 60px);
  --fs-disc: clamp(22px, 2.6vw, 46px);
  --fs-index: clamp(24px, 3vw, 54px);
  --fs-head: clamp(34px, 4.6vw, 84px);
  --fs-cat: clamp(64px, 16vw, 300px);
  --fs-code: clamp(96px, 22vw, 420px);

  --r-slip: 2px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-wipe: cubic-bezier(.65, 0, .35, 1);

  --wall-w: min(calc(var(--vw) * 100 - 2 * var(--m)), calc((100svh - 260px) * 2));
}

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root) { animation: vt-out .3s ease both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
::view-transition-group(cover) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(20px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
sup { line-height: 1; }
::selection { background-color: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--m); top: -60px; z-index: 130; background-color: var(--ink); color: var(--paper); padding-top: 10px; padding-right: 14px; padding-bottom: 10px; padding-left: 14px; transition: top .2s; }
.skip:focus { top: 10px; }

/* ---------- Type roles ---------- */
.mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; font-weight: 400; }
.lbl { color: var(--muted); }
.val { color: var(--ink); font-weight: 500; }
.body { font-size: var(--fs-body); line-height: 1.5; max-width: 62ch; }
.sub { font-variation-settings: "wdth" 88; font-weight: 500; font-size: var(--fs-sub); line-height: 1.1; }
.hl { font-variation-settings: "wdth" 72; font-weight: 600; font-size: var(--fs-head); line-height: .92; letter-spacing: -.015em; text-transform: uppercase; }
.statement { font-variation-settings: "wdth" 80; font-weight: 500; font-size: var(--fs-statement); line-height: 1.02; letter-spacing: -.01em; }

.roll { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.roll > span { display: inline-block; }
.split-line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }

/* underline wipe — enters from the left, exits to the right */
.ul {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 100% 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size .6s var(--ease-wipe);
  padding-bottom: 2px;
}
.ul:hover, .ul:focus-visible { background-size: 100% 1px; background-position: 0 100%; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--accent); margin-right: 8px; vertical-align: .1em; }

.grid12 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: var(--g);
  grid-row-gap: var(--g);
  padding-left: var(--m);
  padding-right: var(--m);
}

.plate { position: relative; display: block; overflow: hidden; background-color: var(--paper-2); }
button.plate { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.plate img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }

.sec { padding-top: var(--sec); padding-bottom: var(--sec); }
.sec-head { margin-bottom: clamp(40px, 5vw, 80px); align-items: end; }
.sec-head__l { grid-column: 1 / 7; }
.sec-head__l .lbl { margin-bottom: 18px; }
.sec-head__r { grid-column: 8 / 12; color: var(--ink); }

/* grease-pencil select mark */
.grease { position: absolute; left: -22%; top: -38%; width: 144%; height: 176%; pointer-events: none; overflow: visible; }
.grease path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .8s var(--ease-out), opacity .1s; }
.is-marked > .grease path, .grease.is-drawn path { stroke-dashoffset: 0; opacity: 1; }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 110; background-color: var(--paper); display: none; }
.js .page-home .loader { display: block; }
.is-seen .page-home .loader, .is-curtained .page-home .loader { display: none; }
.loader__tl { position: absolute; left: var(--m); top: 20px; }
.loader__grid {
  position: absolute; left: 50%; top: 46%;
  width: var(--wall-w); transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 4px; grid-row-gap: 4px;
}
.lcell { aspect-ratio: 1; position: relative; overflow: hidden; background-color: var(--paper-2); outline: 1px solid var(--rule); outline-offset: -1px; }
.lcell img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); filter: saturate(.92) contrast(1.03); }
.lcell--block { grid-column: 6 / 8; grid-row: 3 / 5; aspect-ratio: 1; z-index: 2; }
.loader__odo {
  position: absolute; left: var(--m); bottom: 14px;
  display: flex; font-variation-settings: "wdth" 62; font-weight: 800; font-size: 12vw; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.odo__d { display: block; height: 1em; overflow: hidden; }
.odo__col { display: flex; flex-direction: column; }
.odo__col span { display: block; height: 1em; line-height: 1; }
.loader__br { position: absolute; right: var(--m); bottom: 28px; text-align: right; }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--rule); }
.loader__bar span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }

/* ==========================================================================
   Header — caption sheet
   ========================================================================== */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: var(--g);
  padding-top: 16px; padding-right: var(--m); padding-bottom: 16px; padding-left: var(--m);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-transform: uppercase; line-height: 1.35;
  color: var(--ink);
  background-color: var(--paper);
  transition: transform .5s var(--ease-out), color .3s, background-color .3s;
}
.hdr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; background-image: linear-gradient(180deg, rgba(17, 17, 16, .5), rgba(17, 17, 16, 0)); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: -1; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr.is-hidden:focus-within { transform: none; }
.hdr--light { color: var(--paper); background-color: transparent; }
.hdr--light::before { opacity: 1; }
.hdr--light .lbl, .hdr--light .val { color: var(--paper); }
.hdr--light .lbl { opacity: .72; }
.hdr__col { display: flex; flex-direction: column; row-gap: 2px; min-width: 0; }
.hdr__index .val a { opacity: .62; transition: opacity .3s; }
.hdr__index .val a.is-active, .hdr__index .val a:hover { opacity: 1; }
.js-clock .colon { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hdr__menu { display: none; }

.menu {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; background-color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--hdr-h) + 20px); padding-right: var(--m); padding-bottom: 28px; padding-left: var(--m);
}
.menu[hidden] { display: none; }
.menu__cats a { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 10px; padding-bottom: 10px; }
.menu__cats a .hl { font-size: clamp(34px, 11vw, 60px); }
.menu__foot { display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; }
.menu__foot > * { min-height: 32px; display: inline-flex; align-items: center; }

/* ==========================================================================
   Stage — hero plate → full bleed → the Wall
   ========================================================================== */
.stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }

.wall-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; visibility: hidden; }
.wall {
  position: absolute; left: 50%; top: 50%;
  width: var(--wall-w); margin-left: calc(var(--wall-w) / -2); margin-top: calc(var(--wall-w) / -4 - 2px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 4px; grid-row-gap: 4px;
  transform-origin: 50% 50%;
}
.cell { aspect-ratio: 1; position: relative; overflow: hidden; background-color: var(--paper-2); cursor: zoom-in; display: block; width: 100%; }
.cell img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: opacity .2s, filter .2s; }
.cell--block { grid-column: 6 / 8; grid-row: 3 / 5; aspect-ratio: 1; }
.cell--block img, .lcell--block img { position: absolute; top: 0; left: 0; }
.wall.is-dim .cell:not(.is-match) img { opacity: .12; filter: grayscale(1); transition: opacity .45s, filter .45s; }
.cell:focus-visible { outline-offset: -2px; z-index: 2; }
.wall__line { position: absolute; left: var(--m); bottom: 22px; max-width: calc(50% - 180px - var(--m)); }
.wall__line.hl { font-size: clamp(26px, 2.9vw, 52px); }
.wall__count { position: absolute; right: var(--m); bottom: 30px; text-align: right; }
.wall__legend { position: absolute; left: 0; right: 0; top: calc(50% + var(--wall-w) / 4 + 12px); text-align: center; opacity: 0; padding-left: var(--m); padding-right: var(--m); }
.wall__legend button { padding-top: 6px; padding-bottom: 6px; color: var(--ink); }
.wall__legend .sep { color: var(--muted); margin-left: 8px; margin-right: 8px; }

.stage__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 2; pointer-events: none; filter: saturate(.92) contrast(1.03); }

.hero { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; --plate-w: calc(4 * var(--col) + 3 * var(--g)); --plate-h: calc(var(--plate-w) * 4 / 3); --top: 14svh; }
.hero > * { pointer-events: auto; }
.fitword { font-variation-settings: "wdth" 62; font-weight: 800; line-height: .78; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; display: flex; justify-content: center; align-items: flex-start; }
.fitword__text { display: block; font-size: var(--fit, 19vw); }
.fitword__sup { position: relative; top: .6em; margin-left: .4em; color: var(--ink); }
.hero__word { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.hero__word .fitword__text { margin-bottom: -.14em; }
.hero__plate {
  position: absolute; z-index: 2;
  left: calc(var(--m) + 4 * (var(--col) + var(--g)));
  top: var(--top);
  width: var(--plate-w); height: var(--plate-h);
  display: block;
}
.hero__plate img { position: absolute; top: 0; left: 0; }
.hero__plate .wipe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__left { position: absolute; left: var(--m); top: var(--top); width: calc(3 * var(--col) + 2 * var(--g)); z-index: 3; }
.hero__subline { margin-top: 18px; color: var(--ink); }
.hero__controls { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; margin-top: 28px; }
.hero__controls button { min-height: 44px; }
.hero__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.hero__card { position: absolute; right: var(--m); top: var(--top); width: calc(3 * var(--col) + 2 * var(--g)); z-index: 3; display: flex; flex-direction: column; row-gap: 8px; }
.hero__card .mono { color: var(--muted); }
.hero__hint { position: absolute; right: var(--m); top: calc(var(--top) + 9.5rem); width: calc(3 * var(--col) + 2 * var(--g)); color: var(--muted); z-index: 3; }

/* static stage (reduced motion / low-power): hero then wall as normal sections */
.stage.is-static { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
.stage.is-static .hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; order: 0; overflow: hidden; }
.stage.is-static .wall-wrap { position: relative; visibility: visible; order: 1; height: calc(var(--wall-w) / 2 + 260px); }
.stage.is-static .stage__overlay { display: none; }
.stage.is-static .wall__legend { opacity: 1; }
.stage.is-static .wall__line { position: absolute; top: 24px; bottom: auto; display: flex; flex-direction: column; font-size: var(--fs-sub); }
.static-line { display: block; }
@media (max-width: 767px) { .stage.is-static .wall-wrap { height: calc(var(--wall-w) * 2 + 220px); } }

/* ==========================================================================
   04 Box Open
   ========================================================================== */
.boxopen { row-gap: 0; }
.bo-head { margin-bottom: clamp(32px, 4vw, 64px); align-items: end; }
.bo-head .lbl { grid-column: 1 / 7; margin-bottom: 16px; }
.bo-head .hl { grid-column: 1 / 7; }
.bo-head .body { grid-column: 8 / 12; }
.bo-plates { row-gap: clamp(24px, 3vw, 48px); }
.bo-a { grid-column: 1 / 13; }
.bo-a .plate { aspect-ratio: 3 / 2; }
.bo-b { grid-column: 2 / 7; }
.bo-c { grid-column: 8 / 12; margin-top: 10vw; }
.bo-b .plate, .bo-c .plate { aspect-ratio: 3 / 4; }
.cap { margin-top: 10px; color: var(--muted); display: flex; column-gap: 10px; align-items: baseline; }
.cap .no { position: relative; color: var(--ink); }
.bo-cta { grid-column: 8 / 13; margin-top: 24px; }
.bo-cta a { font-variation-settings: "wdth" 72; font-weight: 600; text-transform: uppercase; font-size: var(--fs-sub); }
.zoomable { cursor: zoom-in; }

/* ==========================================================================
   05 Archive browser
   ========================================================================== */
.archive { overflow-x: clip; padding-top: calc(var(--sec) * .6); }
.catword {
  font-variation-settings: "wdth" 62; font-weight: 800; font-size: var(--fs-cat); line-height: .8; letter-spacing: -.02em;
  white-space: nowrap; text-align: right; margin-right: -.04em; position: relative; display: flex; justify-content: flex-end; align-items: flex-start;
  padding-right: var(--m);
}
.catword__text { display: block; }
.catword__sup { font-size: var(--fs-mono); margin-left: 6px; margin-top: .4em; letter-spacing: .04em; font-weight: 400; }

.toolbar {
  position: sticky; top: var(--hdr-h); z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g);
  align-items: center;
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: 10px; padding-right: var(--m); padding-bottom: 10px; padding-left: var(--m);
  background-color: var(--paper);
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--rule);
  transition: top .5s var(--ease-out);
}
body.hdr-hidden .toolbar { top: 0; }
.toolbar__filters { grid-column: 1 / 9; display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 4px; }
.filt { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); transition: color .3s; }
.filt:hover, .filt[aria-pressed="true"] { color: var(--ink); }
.filt sup { font-size: .82em; margin-left: 2px; position: relative; top: -.5em; }
.filt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background-color: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out); }
.filt[aria-pressed="true"]::after { transform: scaleX(1); }
.toolbar__sort { grid-column: 9 / 11; display: flex; column-gap: 16px; }
.toolbar__sort button { min-height: 44px; color: var(--muted); }
.toolbar__sort button[aria-pressed="true"] { color: var(--ink); }
.toolbar__views { grid-column: 11 / 13; display: flex; justify-content: flex-end; column-gap: 6px; }
.toolbar__close { display: none; }
.vbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-width: 1px; border-style: solid; border-color: var(--rule);
  transition: background-color .3s, border-color .3s, color .3s;
}
.vbtn:hover { border-color: var(--ink); }
.vbtn[aria-pressed="true"] { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }
.picto { width: 18px; height: 14px; position: relative; overflow: hidden; display: grid; grid-column-gap: 2px; grid-row-gap: 2px; }
.picto i { display: block; background-color: currentColor; transition: transform .5s var(--ease-out); }
.picto--grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.picto--index { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; }
.picto--index i { height: 2px; align-self: center; }
.picto--plates { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
@media (hover: hover) { .vbtn:hover .picto i { animation: picto .5s var(--ease-out); } }
@keyframes picto { 0% { transform: translateX(0); } 49% { transform: translateX(110%); } 50% { transform: translateX(-110%); } 100% { transform: translateX(0); } }

.boxes-wrap { position: relative; padding-top: clamp(28px, 3vw, 48px); padding-right: var(--m); padding-left: var(--m); }
.boxes-head { display: none; }
.boxes { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); grid-row-gap: 40px; }
.box-tile { display: block; position: relative; }
.tile-media { display: block; aspect-ratio: 4 / 5; }
.tile-media img { transition: transform .5s var(--ease-out); }
.tile-meta { display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; row-gap: 2px; margin-top: 12px; align-items: baseline; }
.t-code, .t-count, .t-year, .t-cat { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .04em; text-transform: uppercase; }
.t-count, .t-year { color: var(--muted); }
.boxes:not(.is-index) .t-year::before { content: '· '; }
.t-title { grid-column: 1 / 4; font-size: var(--fs-body); }
.t-client, .t-cat { display: none; }
.tile-strip { display: none; }
.boxes.is-grid .box-tile.is-offset { margin-top: 6vw; }
.box-tile.is-filtered { display: none; }
@media (hover: hover) {
  .boxes.is-grid .box-tile:hover .tile-media img, .boxes.is-plates .box-tile:hover .tile-media img { transform: scale(1.04); }
  .boxes.is-grid:has(.box-tile:hover) .box-tile:not(:hover), .boxes.is-plates:has(.box-tile:hover) .box-tile:not(:hover) { opacity: .45; }
  .boxes .box-tile { transition: opacity .25s; }
  .boxes:has(.box-tile:hover) .box-tile:hover { transition: opacity .5s; }
}
.boxes.is-preview .box-tile:not(.is-match) { opacity: .15; filter: grayscale(1); }
.boxes .box-tile { transition: opacity .45s, filter .45s; }

/* index view */
.boxes-wrap.is-index { display: grid; grid-template-columns: 9fr 3fr; grid-column-gap: var(--g); align-items: start; }
.boxes-wrap.is-index .boxes-head {
  display: grid; grid-column: 1 / 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: var(--g);
  color: var(--muted); padding-bottom: 10px;
}
.boxes-head span:nth-child(1) { grid-column: 1 / 2; }
.boxes-head span:nth-child(2) { grid-column: 2 / 6; }
.boxes-head span:nth-child(3) { grid-column: 6 / 8; }
.boxes-head span:nth-child(4) { grid-column: 8 / 9; }
.boxes-head span:nth-child(5) { grid-column: 9 / 10; }
.boxes-head span:nth-child(6) { grid-column: 10 / 11; text-align: right; }
.boxes.is-index {
  grid-column: 1 / 2; display: block;
  border-top-width: 1px; border-top-style: solid; border-top-color: var(--ink);
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--ink);
}
.boxes.is-index .box-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: var(--g); align-items: center;
  min-height: 76px; padding-top: 14px; padding-bottom: 14px;
  border-top-width: 1px; border-top-style: solid; border-top-color: var(--rule);
  isolation: isolate;
}
.boxes.is-index .box-tile:first-child { border-top-color: transparent; }
.boxes.is-index .tile-media, .boxes.is-index .tile-strip { display: none; }
.boxes.is-index .tile-meta { display: contents; }
.boxes.is-index .t-code { grid-column: 1 / 2; }
.boxes.is-index .t-title { grid-column: 2 / 6; font-variation-settings: "wdth" 72; font-weight: 600; font-size: var(--fs-index); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; transition: font-variation-settings .5s var(--ease-out); }
.boxes.is-index .t-client { display: block; grid-column: 6 / 8; font-size: var(--fs-body); }
.boxes.is-index .t-cat { display: block; grid-column: 8 / 9; }
.boxes.is-index .t-year { grid-column: 9 / 10; grid-row: 1; }
.boxes.is-index .t-count { display: block; grid-column: 10 / 11; grid-row: 1; text-align: right; }
@media (max-width: 1100px) and (min-width: 768px) {
  .boxes.is-index .t-title { grid-column: 2 / 5; }
  .boxes.is-index .t-client { grid-column: 5 / 7; }
  .boxes.is-index .t-cat { grid-column: 7 / 9; }
  .boxes-head span:nth-child(2) { grid-column: 2 / 5; }
  .boxes-head span:nth-child(3) { grid-column: 5 / 7; }
  .boxes-head span:nth-child(4) { grid-column: 7 / 9; }
}
.boxes.is-index .box-tile::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--g) * -.5); right: calc(var(--g) * -.5); z-index: -1;
  background-color: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease-out);
}
.boxes.is-index .box-tile > * , .boxes.is-index .tile-meta > * { transition: color .35s var(--ease-out); }
@media (hover: hover) {
  .boxes.is-index .box-tile:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .boxes.is-index .box-tile:hover .tile-meta > * { color: var(--paper); }
  .boxes.is-index .box-tile:hover .t-title { font-variation-settings: "wdth" 100; }
}
.preview { display: none; }
.boxes-wrap.is-index .preview {
  display: block; grid-column: 2 / 3; grid-row: 1 / 3; position: sticky; top: calc(var(--hdr-h) + 90px);
  aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--paper-2);
}
.preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.preview .is-in { clip-path: inset(100% 0 0 0); animation: wipeUp .6s var(--ease-out) forwards; }
@keyframes wipeUp { to { clip-path: inset(0 0 0 0); } }

/* plates view */
.boxes.is-plates { grid-template-columns: 1fr 1fr; grid-row-gap: clamp(40px, 5vw, 80px); }
.boxes.is-plates .tile-media { aspect-ratio: 4 / 3; }
.boxes.is-plates .tile-strip { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 4px; margin-top: 4px; }
.tile-strip span { aspect-ratio: 1; }
.boxes-empty { padding-top: 40px; color: var(--muted); }

/* ==========================================================================
   06 Commissions — specification sheet
   ========================================================================== */
.spec { padding-left: var(--m); padding-right: var(--m); }
.spec__head, .srow__btn {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); align-items: baseline;
}
.spec__head { color: var(--muted); padding-bottom: 12px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--ink); }
.spec__head span:nth-child(1), .srow__btn > :nth-child(1) { grid-column: 1 / 2; }
.spec__head span:nth-child(2), .srow__btn > :nth-child(2) { grid-column: 2 / 5; }
.spec__head span:nth-child(3), .srow__btn > :nth-child(3) { grid-column: 5 / 7; }
.spec__head span:nth-child(4), .srow__btn > :nth-child(4) { grid-column: 7 / 10; }
.spec__head span:nth-child(5), .srow__btn > :nth-child(5) { grid-column: 10 / 11; }
.spec__head span:nth-child(6), .srow__btn > :nth-child(6) { grid-column: 11 / 12; }
.spec__head span:nth-child(7), .srow__btn > :nth-child(7) { grid-column: 12 / 13; text-align: right; }
.srow { position: relative; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--rule); }
.srow:last-child { border-bottom-color: var(--ink); }
.srow__btn { width: 100%; padding-top: 22px; padding-bottom: 22px; min-height: 44px; }
.srow__disc { font-variation-settings: "wdth" 72; font-weight: 600; font-size: var(--fs-disc); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; transition: font-variation-settings .5s var(--ease-out); }
.srow__btn .body { font-size: clamp(14px, .95vw, 16px); max-width: none; }
.srow__btn .mono:first-child { color: var(--muted); }
.srow__btn .from { font-weight: 500; }
.srow__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-io); }
.srow.is-open .srow__panel { grid-template-rows: 1fr; }
.srow__inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .6s; }
.srow.is-open .srow__inner { visibility: visible; transition-delay: 0s; }
.srow__detail { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); padding-bottom: 28px; }
.srow__detail > div:nth-child(1) { grid-column: 2 / 6; }
.srow__detail > div:nth-child(2) { grid-column: 7 / 10; }
.srow__detail > div:nth-child(3) { grid-column: 10 / 13; display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; }
.srow__detail .lbl { margin-bottom: 6px; }
.srow__detail a, .srow__detail button { font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; min-height: 32px; }
.srow__strip { position: absolute; top: 12px; left: calc(4 * (var(--col) + var(--g))); width: calc(5 * var(--col) + 4 * var(--g)); display: flex; column-gap: 6px; pointer-events: none; z-index: 2; height: 74px; }
.srow__strip span { height: 100%; aspect-ratio: 1; overflow: hidden; clip-path: inset(0 0 0 100%); transform: translateX(40%); transition: clip-path .3s var(--ease-out), transform .3s var(--ease-out); }
.srow__strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
@media (hover: hover) {
  .srow:not(.is-open):hover .srow__strip span { clip-path: inset(0 0 0 0); transform: translateX(0); transition-duration: .7s; }
  .srow:not(.is-open):hover .srow__strip span:nth-child(2) { transition-delay: .05s; }
  .srow:not(.is-open):hover .srow__strip span:nth-child(3) { transition-delay: .1s; }
  .srow:not(.is-open):hover .srow__btn > :nth-child(3), .srow:not(.is-open):hover .srow__btn > :nth-child(4) { opacity: 0; }
  .srow__btn > * { transition: opacity .3s; }
  .srow:hover .srow__disc { font-variation-settings: "wdth" 100; }
}

/* ==========================================================================
   07 Method — catalogue cards
   ========================================================================== */
.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: var(--g); grid-row-gap: var(--g); padding-left: var(--m); padding-right: var(--m); }
.card {
  position: relative; aspect-ratio: 5 / 3; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 20px; padding-right: 20px; padding-bottom: 28px; padding-left: 20px;
  border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
  border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid;
  border-top-color: var(--ink); border-right-color: var(--ink); border-bottom-color: var(--ink); border-left-color: var(--ink);
  background-color: var(--paper);
  transition: translate .6s var(--ease-out);
}
.card::after { content: ''; position: absolute; left: 50%; bottom: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1px solid var(--ink); }
.card__day { display: block; height: 1.35em; overflow: hidden; }
.card__day span { display: block; transition: transform .6s var(--ease-out); }
.card h3 { font-variation-settings: "wdth" 88; font-weight: 500; font-size: var(--fs-sub); line-height: 1.1; margin-bottom: 8px; }
.card p.body { color: var(--ink); font-size: clamp(14px, .95vw, 16px); }
@media (hover: hover) {
  .card:hover { translate: 0 -6px; }
  .card:hover .card__day span { transform: translateY(-100%); }
}
.card:focus-within .card__day span { transform: translateY(-100%); }

/* ==========================================================================
   08 Dossier
   ========================================================================== */
.dossier .grid12 { align-items: start; }
.dossier__portrait { grid-column: 1 / 5; position: sticky; top: 12vh; }
.dossier__img { aspect-ratio: 3 / 4; }
.dossier__img img { height: 120%; }
.dossier__portrait figcaption { margin-top: 10px; color: var(--muted); }
.dossier__body { grid-column: 6 / 13; }
.dossier__body > .lbl { margin-bottom: 22px; }
.ledger-wrap { margin-top: clamp(48px, 5vw, 80px); }
.ledger__row { display: grid; grid-template-columns: .6fr 1.4fr 2fr 1fr; grid-column-gap: var(--g); padding-top: 10px; padding-bottom: 10px; position: relative; font-size: clamp(14px, .95vw, 16px); }
.ledger__row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: var(--rule); transform-origin: 0 50%; }
.ledger__row--head { color: var(--muted); }
.ledger__row--head span { font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; }
.ledger__row--head::before { display: none; }
.ledger__row span:first-child, .ledger__row span:last-child { font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; }
.facts { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: var(--g); grid-row-gap: 18px; margin-top: 40px; border-top: 1px solid var(--ink); padding-top: 18px; }
.facts dt { color: var(--muted); }
.facts dd { color: var(--ink); font-weight: 500; margin-top: 2px; }

/* ==========================================================================
   09 Clients + press
   ========================================================================== */
.clients { position: relative; }
.clients__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); grid-row-gap: 32px; padding-left: var(--m); padding-right: var(--m); }
.clients__grid li { border-top: 1px solid var(--rule); padding-top: 12px; }
.client-name { display: block; font-variation-settings: "wdth" 75; font-weight: 500; font-size: clamp(17px, 1.5vw, 26px); line-height: 1.08; opacity: .7; transition: opacity .5s var(--ease-out), font-variation-settings .5s var(--ease-out); }
.clients__grid .mono { color: var(--muted); margin-top: 6px; display: block; }
@media (hover: hover) { .clients__grid li:hover .client-name { opacity: 1; font-variation-settings: "wdth" 100; } }
.clients__press-lbl { padding-left: var(--m); margin-top: clamp(64px, 7vw, 120px); margin-bottom: 14px; }
.press { padding-left: var(--m); padding-right: var(--m); border-bottom: 1px solid var(--rule); }
.press a { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); align-items: baseline; min-height: 56px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--rule); }
.press .p-name { grid-column: 1 / 7; font-variation-settings: "wdth" 88; font-weight: 500; font-size: var(--fs-sub); line-height: 1.1; }
.press .p-year { grid-column: 7 / 9; }
.press .p-type { grid-column: 9 / 12; }
.press .p-arrow { grid-column: 12 / 13; text-align: right; }
.press .p-name span { background-image: linear-gradient(currentColor, currentColor); background-position: 100% 100%; background-size: 0 1px; background-repeat: no-repeat; transition: background-size .6s var(--ease-wipe); }
.press a:hover .p-name span { background-size: 100% 1px; background-position: 0 100%; }
.clients__note { padding-left: var(--m); margin-top: 16px; }
.press-thumb { position: fixed; top: 0; left: 0; z-index: 70; width: 160px; aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--ease-out); }
.press-thumb.is-on { opacity: 1; transform: scale(1); }
.press-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   10 Correspondence
   ========================================================================== */
.letters__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: var(--g); grid-row-gap: 48px; padding-left: var(--m); padding-right: var(--m); }
.letter { position: relative; padding-top: 18px; display: flex; flex-direction: column; row-gap: 18px; align-items: flex-start; }
.letter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: var(--ink); transform-origin: 0 50%; }
.letter .mono.lbl { color: var(--muted); }
.letter blockquote { margin: 0; font-size: var(--fs-body-l); line-height: 1.45; }
.letter .who { color: var(--muted); font-size: var(--fs-body); }
.letter .who strong { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   11 Request slip
   ========================================================================== */
.slip-sec .grid12 { align-items: start; }
.slip-l { grid-column: 1 / 6; display: flex; flex-direction: column; row-gap: 14px; align-items: flex-start; }
.slip-l .hl { margin-bottom: 18px; }
.email { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 8px; }
.email__link { font-variation-settings: "wdth" 72; font-weight: 600; font-size: clamp(22px, 2.5vw, 44px); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }
.email__copy { min-height: 44px; padding-left: 10px; padding-right: 10px; border: 1px solid var(--ink); }
.email__copy:hover { background-color: var(--ink); color: var(--paper); }
.status { color: var(--ink); }
.strip-lbl { margin-top: 24px; }
.strip { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 4px; grid-row-gap: 4px; width: 100%; margin-bottom: 10px; }
.month {
  position: relative; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px;
  border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
  transition: border-color .3s;
}
.month .m { color: var(--ink); font-weight: 500; }
.month .s { color: var(--muted); font-size: .86em; }
.month[aria-disabled="true"] { cursor: not-allowed; }
.month[aria-disabled="true"] .m { text-decoration: line-through; text-decoration-thickness: 1px; }
.month:not([aria-disabled="true"]):hover { border-color: var(--ink); }
.month .grease { left: -14%; top: -22%; width: 128%; height: 144%; }

.slip-r { grid-column: 7 / 13; }
.slip {
  position: relative; background-color: var(--paper-2); border-radius: var(--r-slip);
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink);
  padding-top: 32px; padding-right: 32px; padding-bottom: 32px; padding-left: 32px;
}
.slip__head { margin-bottom: 28px; }
.slip__odo { display: inline-block; min-width: 4ch; }
.slip__fields { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; grid-row-gap: 22px; }
.field { display: flex; flex-direction: column; row-gap: 6px; grid-column: span 1; }
.field--toggles, .field:has(textarea) { grid-column: 1 / 3; }
.field label, .field legend { color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: var(--fs-body); color: var(--ink); background-color: transparent;
  border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  min-height: 44px; padding-top: 8px; padding-right: 0; padding-bottom: 8px; padding-left: 0;
  background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-size: 0 2px; background-repeat: no-repeat;
  transition: background-size .4s var(--ease-out);
  outline: none;
}
.field input:focus, .field textarea:focus { background-size: 100% 2px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field textarea { resize: none; overflow: hidden; min-height: 88px; line-height: 1.45; }
.field .helper { color: var(--muted); font-size: clamp(13px, .9vw, 15px); }
.field[aria-invalid="true"] input, .field[aria-invalid="true"] textarea, input[aria-invalid="true"], textarea[aria-invalid="true"] { border-bottom-width: 2px; }
.err { color: var(--ink); font-weight: 500; }
.err::before { content: '— '; }
.toggles { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; }
.toggle { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); }
.toggle[aria-pressed="true"] { color: var(--ink); }
.toggle::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background-color: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out); }
.toggle[aria-pressed="true"]::after { transform: scaleX(1); }
.submit { grid-column: 1 / 3; justify-self: start; min-height: 48px; font-variation-settings: "wdth" 72; font-weight: 600; font-size: var(--fs-sub); text-transform: uppercase; background-size: 100% 1px; background-position: 0 100%; }
.submit:hover { background-size: 0 1px; background-position: 100% 100%; }
.slip__done { display: flex; flex-direction: column; row-gap: 14px; }
.slip__summary { color: var(--ink); }
.slip__success { outline: none; }
.stamp {
  position: absolute; right: 28px; top: 22px;
  padding-top: 6px; padding-right: 12px; padding-bottom: 6px; padding-left: 12px;
  border: 2px solid var(--accent); color: var(--accent); font-weight: 500; font-size: 15px; letter-spacing: .16em;
  transform: rotate(-8deg) scale(1.4); opacity: 0; pointer-events: none;
}
.slip__demo { margin-top: 12px; }

/* ==========================================================================
   12 Closing
   ========================================================================== */
.closing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-top: var(--sec); border-top: 1px solid var(--ink); }
.closing__index { flex: 1; align-content: start; }
.closing__index > div { grid-column: span 3; display: flex; flex-direction: column; row-gap: 6px; }
.closing__index .lbl { margin-bottom: 10px; }
.closing__index li { min-height: 28px; }
.closing__boxes { display: flex; flex-direction: column; row-gap: 6px; }
.closing__credit { margin-top: 18px; }
.closing__meta { margin-top: 40px; margin-bottom: 12px; align-items: end; }
.closing__meta p { grid-column: 1 / 9; }
.closing__meta a { grid-column: 9 / 13; justify-self: end; min-height: 32px; display: inline-flex; align-items: center; }
.closing__word { margin-bottom: -.06em; }

/* ==========================================================================
   Global: Docket, cursor, loupe, viewer, curtain, grid overlay
   ========================================================================== */
.docket {
  position: fixed; left: 50%; bottom: 20px; z-index: 60;
  height: 52px; display: flex; align-items: center; column-gap: 12px;
  padding-top: 8px; padding-right: 20px; padding-bottom: 8px; padding-left: 8px;
  background-color: var(--chrome); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--paper); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  transform: translate(-50%, 0); transition: transform .5s var(--ease-io), opacity .3s, visibility 0s 0s;
  white-space: nowrap; overflow: hidden;
}
.docket.is-hidden { transform: translate(-50%, 160%); visibility: hidden; transition: transform .5s var(--ease-io), opacity .3s, visibility 0s .5s; }
.docket__lines > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docket__thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; background-color: rgba(238, 237, 233, .12); }
.docket__thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.docket__lines { display: flex; flex-direction: column; min-width: 0; }
.docket__l2 { opacity: .7; }
.docket__div { width: 1px; height: 24px; background-color: rgba(238, 237, 233, .4); flex: none; }
.docket__actions { display: flex; column-gap: 14px; align-items: center; }
.docket__actions button, .docket__actions a { min-height: 36px; display: inline-flex; align-items: center; color: var(--paper); opacity: .72; transition: opacity .3s; }
.docket__actions button:hover, .docket__actions a:hover, .docket__actions [aria-pressed="true"] { opacity: 1; }
.docket__actions [aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--paper); }
.docket__bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background-color: rgba(238, 237, 233, .2); }
.docket__bar span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--paper); transform: scaleX(0); transform-origin: 0 50%; }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none;
  background-color: var(--paper); color: var(--ink);
  padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 8px;
  transform: scale(0); transform-origin: 0 0; transition: transform .3s var(--ease-out);
  margin-left: 14px; margin-top: 14px; white-space: nowrap;
}
.cursor.is-on { transform: scale(1); }

.loupe { position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none; width: 180px; margin-left: -90px; margin-top: -90px; transform: scale(0); transition: transform .3s var(--ease-out); }
.loupe.is-on { transform: scale(1); }
.loupe__lens { display: block; width: 180px; height: 180px; border-radius: 50%; border: 1px solid var(--ink); background-color: var(--paper-2); background-repeat: no-repeat; box-shadow: 0 10px 30px rgba(20, 20, 19, .18); }
.loupe__cap { display: block; text-align: center; margin-top: 8px; background-color: var(--paper); color: var(--ink); justify-self: center; width: max-content; margin-left: auto; margin-right: auto; padding-left: 6px; padding-right: 6px; }

.viewer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; color: var(--paper); overflow: hidden; }
.viewer[hidden] { display: none; }
.viewer__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--viewer); }
.viewer__stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.viewer__img { position: absolute; top: 0; left: 0; display: block; max-width: none; will-change: transform; user-select: none; -webkit-user-drag: none; }
.viewer.is-fill .viewer__img { cursor: grab; }
.viewer.is-static .viewer__img { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 48px); max-height: calc(100vh - 144px); width: auto; height: auto; }
.viewer__bar { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; column-gap: 16px; padding-left: var(--m); padding-right: var(--m); z-index: 4; color: rgba(238, 237, 233, .7); }
.viewer__bar--top { top: 0; height: 64px; }
.viewer__bar--bot { bottom: 0; height: 64px; }
.viewer__bar button { min-height: 44px; color: rgba(238, 237, 233, .8); transition: color .3s; }
.viewer__bar button:hover, .viewer__bar button[aria-pressed="true"], .viewer__bar button[aria-expanded="true"] { color: var(--paper); }
.viewer__bar .val { color: var(--paper); font-weight: 500; }
.viewer__nav, .viewer__tools { display: flex; column-gap: 22px; align-items: center; }
.viewer__info {
  position: absolute; top: 64px; right: 0; bottom: 64px; width: 320px; z-index: 3; background-color: #1b1b1a; color: var(--paper);
  padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px;
  overflow-y: auto;
}
.viewer__info dl { display: grid; grid-template-columns: 1fr; grid-row-gap: 12px; }
.viewer__info dt { color: rgba(238, 237, 233, .62); }
.viewer__info dd { color: var(--paper); font-family: var(--sans); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; margin-top: 2px; }

.curtain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.curtain i { display: block; background-color: var(--viewer); transform: scale(0); margin-top: -1px; margin-left: -1px; margin-right: -1px; margin-bottom: -1px; }
.is-curtained .curtain i { transform: scale(1.02); }
.curtain.is-active { pointer-events: all; }
.curtain__label { position: absolute; left: 0; right: 0; top: 50%; text-align: center; color: var(--paper); z-index: 2; transform: translateY(-50%); }
.curtain__label .roll > span { transform: translateY(110%); }
.no-js .curtain { display: none; }

.gridov { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 120; pointer-events: none; display: none; }
.gridov.is-on { display: block; }
.gridov__cols { height: 100%; }
.gridov__cols i { display: block; background-color: rgba(52, 36, 232, .06); }
.gridov__lbl { position: absolute; left: var(--m); bottom: 12px; color: var(--accent); }

/* ==========================================================================
   Project page
   ========================================================================== */
.page-project main { padding-top: var(--hdr-h); }
.phero { position: relative; min-height: 100svh; align-content: start; grid-template-rows: auto auto auto 1fr; padding-top: 24px; padding-bottom: clamp(64px, 8vw, 128px); grid-row-gap: 0; }
.phero__code {
  grid-column: 1 / 10; grid-row: 1; z-index: 1; position: relative;
  font-variation-settings: "wdth" 62; font-weight: 800; font-size: var(--fs-code); line-height: .78; letter-spacing: -.02em;
  white-space: nowrap; margin-left: -.05em; display: flex; align-items: flex-start;
}
.phero__codetext { display: block; }
.phero__sup { font-size: var(--fs-mono); font-weight: 400; letter-spacing: .04em; margin-left: 8px; margin-top: .3em; }
.phero__title { grid-column: 1 / 8; grid-row: 2; margin-top: clamp(20px, 2vw, 32px); }
.phero__cover { grid-column: 8 / 13; grid-row: 1 / 5; z-index: 2; aspect-ratio: 4 / 5; align-self: start; margin-top: clamp(20px, 6vw, 110px); }
.phero__credits { grid-column: 1 / 7; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: var(--g); grid-row-gap: 14px; margin-top: clamp(32px, 4vw, 64px); align-self: start; }
.phero__credits dt { color: var(--muted); }
.phero__credits dd { color: var(--ink); font-weight: 500; margin-top: 2px; }
.phero__text { grid-column: 1 / 7; grid-row: 4; align-self: start; margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; row-gap: 18px; }

.pwork { align-items: start; padding-bottom: clamp(80px, 10vw, 160px); }
.rail { grid-column: 1 / 3; position: sticky; top: calc(var(--hdr-h) + 16px); display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 8px; grid-row-gap: 10px; }
.rail__item { position: relative; display: block; }
.rail__item .plate { aspect-ratio: 1; }
.rail__item .mono { display: inline-block; position: relative; margin-top: 4px; color: var(--muted); font-size: 11px; }
.rail__item[aria-current="true"] .mono { color: var(--ink); }
.bracket { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; }
.bracket i { position: absolute; width: 10px; height: 10px; border-color: var(--accent); border-style: solid; border-width: 0; }
.bracket i:nth-child(1) { top: -4px; left: -4px; border-top-width: 2px; border-left-width: 2px; }
.bracket i:nth-child(2) { top: -4px; right: -4px; border-top-width: 2px; border-right-width: 2px; }
.bracket i:nth-child(3) { bottom: -4px; left: -4px; border-bottom-width: 2px; border-left-width: 2px; }
.bracket i:nth-child(4) { bottom: -4px; right: -4px; border-bottom-width: 2px; border-right-width: 2px; }

.pplates { grid-column: 3 / 13; display: flex; flex-direction: column; row-gap: clamp(48px, 7vw, 120px); }
.prow { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: var(--g); align-items: start; }
.pplate .plate { cursor: zoom-in; }
.pplate .plate.o-L { aspect-ratio: 3 / 2; }
.pplate .plate.o-P { aspect-ratio: 3 / 4; }
.prow--1 .pplate { grid-column: 1 / 11; }
.prow--2 .pplate:nth-child(1) { grid-column: 1 / 6; }
.prow--2 .pplate:nth-child(2) { grid-column: 7 / 11; margin-top: 8vw; }
.prow--3 { align-items: end; }
.prow--3 .pplate:nth-child(1) { grid-column: 1 / 4; }
.prow--3 .pplate:nth-child(2) { grid-column: 4 / 11; }
.prow--4 .pplate { grid-column: 6 / 11; }
.prow--5 .pplate { grid-column: 4 / 8; }
.pplates.is-sheet { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 8px; grid-row-gap: 8px; }
.pplates.is-sheet .prow { display: contents; }
.pplates.is-sheet .pplate { grid-column: auto !important; margin-top: 0 !important; }
.pplates.is-sheet .pplate .plate { aspect-ratio: 1; }
.pplates.is-sheet .cap { font-size: 10px; margin-top: 4px; }
.pplates.is-sheet .cap .c-text { display: none; }

.pnext { position: relative; display: block; min-height: 100svh; overflow: hidden; color: var(--ink); border-top: 1px solid var(--ink); }
.pnext__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: inset(35% 0 35% 0); }
.pnext__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.pnext__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding-top: calc(var(--hdr-h) + 16px); padding-right: var(--m); padding-bottom: 36px; padding-left: var(--m); pointer-events: none; }
.pnext__text > .mono:first-child { order: 0; }
.pnext__code { order: 1; font-variation-settings: "wdth" 62; font-weight: 800; font-size: var(--fs-code); line-height: .78; letter-spacing: -.02em; margin-left: -.05em; margin-top: 8px; }
.pnext__text .hl { order: 3; margin-top: auto; }
.pnext__text .js-pnext-meta { order: 4; margin-top: 10px; color: var(--muted); }
.pfoot { padding-top: 28px; padding-bottom: 96px; border-top: 1px solid var(--rule); align-items: center; }
.pfoot p { grid-column: 1 / 8; color: var(--muted); }
.pfoot a { grid-column: 8 / 13; justify-self: end; min-height: 32px; display: inline-flex; align-items: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .hero__hint { display: none; }
  .srow__btn { grid-row-gap: 6px; }
}

@media (max-width: 991px) {
  .boxes { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .clients__grid { grid-template-columns: 1fr 1fr 1fr; }
  .closing__index > div { grid-column: span 6; margin-bottom: 28px; }
  .spec__head { display: none; }
  .srow__btn { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 8px; }
  .srow__btn > :nth-child(1) { grid-column: 1 / 2 !important; }
  .srow__btn > :nth-child(2) { grid-column: 2 / 6 !important; }
  .srow__btn > :nth-child(7) { grid-column: 6 / 7 !important; grid-row: 1; }
  .srow__btn > :nth-child(3), .srow__btn > :nth-child(4), .srow__btn > :nth-child(5), .srow__btn > :nth-child(6) { grid-column: 2 / 7 !important; }
  .srow__btn > [data-k]::before { content: attr(data-k) ' · '; color: var(--muted); font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .04em; }
  .srow__strip { display: none; }
  .srow__detail > div:nth-child(1) { grid-column: 2 / 13; }
  .srow__detail > div:nth-child(2) { grid-column: 2 / 13; margin-top: 16px; }
  .srow__detail > div:nth-child(3) { grid-column: 2 / 13; margin-top: 16px; }
  .slip-l { grid-column: 1 / 13; margin-bottom: 48px; }
  .slip-r { grid-column: 1 / 13; }
  .dossier__portrait { grid-column: 1 / 6; }
  .dossier__body { grid-column: 7 / 13; }
}

@media (max-width: 767px) {
  :root { --hdr-h: 60px; --wall-w: min(calc(var(--vw) * 100 - 2 * var(--m)), calc((100svh - 260px) / 2)); }
  .hdr { grid-template-columns: 1fr auto; align-items: center; padding-top: 12px; padding-bottom: 12px; }
  .hdr__index, .hdr__status { display: none; }
  .hdr__time { grid-column: 2; grid-row: 1; flex-direction: row; column-gap: 14px; align-items: center; }
  .hdr__time .lbl { display: none; }
  .hdr__menu { display: inline-flex; min-height: 44px; align-items: center; grid-column: 2; grid-row: 1; justify-self: end; margin-left: 84px; }
  .hdr__time { justify-self: end; margin-right: 70px; }

  /* wall: 6 × 12 portrait */
  .wall, .loader__grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
  .wall { margin-top: calc(var(--wall-w) * -1 - 6px); }
  .cell--block, .lcell--block { grid-column: 3 / 5; grid-row: 6 / 8; }
  .wall__legend { top: calc(50% + var(--wall-w) + 10px); font-size: 10.5px; }
  .wall__count { top: calc(var(--hdr-h) + 8px); bottom: auto; }
  .wall__line { max-width: calc(100% - 2 * var(--m)); bottom: auto; top: calc(var(--hdr-h) + 10px); }
  .wall__line.hl { font-size: 22px; }
  .wall__count { display: none; }
  .hero__word { bottom: 74px; }
  .hero__word .fitword__text { margin-bottom: 0; }
  .loader__odo { font-size: 18vw; }

  .hero { --plate-w: 60vw; --plate-h: 80vw; --top: calc(var(--hdr-h) + 18px); }
  .hero__plate { left: calc(50% - 30vw); }
  .hero__left { left: var(--m); right: var(--m); width: auto; top: calc(var(--top) + var(--plate-h) + 20px); }
  .hero__statement { font-size: 19px; }
  .hero__subline { display: none; }
  .hero__controls { margin-top: 14px; }
  .hero__card, .hero__hint { display: none; }

  .bo-head .lbl, .bo-head .hl, .bo-head .body { grid-column: 1 / 13; }
  .bo-head .body { margin-top: 16px; }
  .bo-a, .bo-b, .bo-c, .bo-cta { grid-column: 1 / 13; }
  .bo-c { margin-top: 0; }

  .toolbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 85;
    display: flex; flex-direction: column; align-items: stretch; row-gap: 16px;
    padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ink); border-bottom: 0;
    transform: translateY(105%); transition: transform .5s var(--ease-io);
    margin-top: 0;
  }
  .toolbar.is-open { transform: translateY(0); }
  body.hdr-hidden .toolbar { top: auto; }
  .toolbar__views { justify-content: flex-start; }
  .toolbar__close { display: inline-flex; min-height: 44px; align-items: center; align-self: flex-end; }
  .boxes-wrap.is-index { display: block; }
  .boxes-wrap.is-index .boxes-head, .boxes-wrap.is-index .preview { display: none; }
  .boxes.is-index .box-tile { grid-template-columns: 64px 1fr auto; column-gap: 14px; min-height: 0; }
  .boxes.is-index .tile-media { display: block; grid-column: 1; grid-row: 1 / 3; width: 64px; }
  .boxes.is-index .t-code { grid-column: 2; grid-row: 1; }
  .boxes.is-index .t-title { grid-column: 2 / 4; grid-row: 2; font-size: 22px; }
  .boxes.is-index .t-count { display: block; grid-column: 3; grid-row: 1; }
  .boxes.is-index .t-client, .boxes.is-index .t-cat, .boxes.is-index .t-year { display: none; }
  .boxes.is-plates { grid-template-columns: 1fr; }
  .boxes.is-grid .box-tile.is-offset { margin-top: 0; }

  .cards { grid-template-columns: 1fr; }
  .card { aspect-ratio: auto; min-height: 200px; }
  .sec-head__l, .sec-head__r { grid-column: 1 / 13; }
  .sec-head__r { margin-top: 16px; }
  .dossier__portrait { grid-column: 1 / 13; position: relative; top: 0; margin-bottom: 32px; }
  .dossier__body { grid-column: 1 / 13; }
  .ledger-wrap { overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .ledger { min-width: 560px; }
  .facts { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: 1fr 1fr; }
  .press .p-name { grid-column: 1 / 13; }
  .press .p-year { grid-column: 1 / 4; }
  .press .p-type { grid-column: 4 / 12; }
  .letters__grid { grid-template-columns: 1fr; }
  .slip { padding-top: 24px; padding-right: 20px; padding-bottom: 24px; padding-left: 20px; }
  .slip__fields { grid-template-columns: 1fr; }
  .field, .field--toggles, .field:has(textarea), .submit { grid-column: 1 / 2; }
  .field input { min-height: 48px; }
  .strip { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .stamp { right: 16px; top: 14px; }
  .closing__index > div { grid-column: 1 / 13; }
  .closing__meta p { grid-column: 1 / 13; }
  .closing__meta a { grid-column: 1 / 13; justify-self: start; }

  .docket { left: 16px; right: 16px; transform: none; height: 56px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .docket.is-hidden { transform: translateY(160%); visibility: hidden; }
  .docket__lines { flex: 1; }

  .phero__code { grid-column: 1 / 13; }
  .phero__title { grid-column: 1 / 13; grid-row: 2; }
  .phero__cover { grid-column: 1 / 13; grid-row: 3; margin-top: 28px; }
  .phero__credits { grid-column: 1 / 13; grid-row: 4; grid-template-columns: 1fr; }
  .phero__text { grid-column: 1 / 13; grid-row: 5; }
  .rail {
    grid-column: 1 / 13; position: sticky; top: var(--hdr-h); z-index: 10; display: flex; column-gap: 6px; overflow-x: auto;
    scroll-snap-type: x mandatory; background-color: var(--paper); padding-top: 8px; padding-bottom: 8px; margin-left: calc(var(--m) * -1); margin-right: calc(var(--m) * -1); padding-left: var(--m); padding-right: var(--m);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__item { flex: none; width: 56px; scroll-snap-align: start; }
  .rail__item .mono { font-size: 10px; }
  .pplates { grid-column: 1 / 13; margin-top: 24px; row-gap: 40px; }
  .prow { display: flex; flex-direction: column; row-gap: 40px; align-items: stretch; }
  .prow .pplate { width: 100%; margin-top: 0 !important; }
  .pplates .pplate:nth-of-type(even) { width: 82%; align-self: flex-end; }
  .pplates.is-sheet { grid-template-columns: 1fr 1fr 1fr; }
  .pplates.is-sheet .pplate { width: auto !important; }
  .pfoot p, .pfoot a { grid-column: 1 / 13; justify-self: start; }
}


/* ---- review fixes: responsive edge cases ---- */
@media (min-width: 992px) and (max-width: 1199px) { .strip { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (min-width: 768px) and (max-width: 991px) { .hero__count { order: 3; flex-basis: 100%; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .hero { --plate-y: max(var(--top), calc(100% - var(--plate-h) - 8vw)); }
  .hero__plate { top: var(--plate-y); }
}
@media (max-width: 767px) {
  .hero { --plate-h: min(80vw, max(160px, calc(100svh - var(--hdr-h) - 330px))); --plate-w: calc(var(--plate-h) * .75); }
  .hero__plate { left: calc(50% - var(--plate-w) / 2); }
  .rail { transition: top .5s var(--ease-out); }
  body.hdr-hidden .rail { top: 0; }
  .toolbar { visibility: hidden; transition: transform .5s var(--ease-io), visibility 0s linear .5s; }
  .toolbar.is-open { visibility: visible; transition: transform .5s var(--ease-io), visibility 0s; }
  .viewer__info { top: auto; left: 0; right: 0; bottom: 64px; width: auto; max-height: 60svh; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-out .2s linear both; }
  ::view-transition-new(root) { animation: vt-fade .2s linear both; }
}
@keyframes vt-fade { from { opacity: 0; } }

@media (hover: none) {
  .cursor, .loupe, .press-thumb { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}