/* Bad Weather Tattoo · "Night Archive" · Graphicl concept site */

/* ---------- fonts: self-hosted. Syne and the mono are caps-only subsets (all their text is uppercase) ---------- */
@font-face { font-family: "Syne"; src: url("fonts/syne-800-caps.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-ext.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Spline Sans Mono"; src: url("fonts/spline-sans-mono-caps.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --ink: #0C0B0E;
  --ink-2: #151318;
  --ink-3: #1E1B21;
  --bone: #E9E7E3;
  --ash: #C8C4BD;
  --smoke: #8C8882;
  --mag: #FF2E7E;
  --mag-ink: #C4125A;      /* magenta as text on bone */
  --mag-deep: #730C35;     /* unlit words of the scrub, 3.24:1 on magenta */
  --rule: rgba(233, 231, 227, .16);
  --rule-ink: rgba(12, 11, 14, .28);
  /* ink on the magenta flood. #FF2E7E is bright, so ink has to be at .80 to clear 4.5:1 on it;
     .72 measured 4.0 and .6 measured 3.2. .84 leaves a little headroom. */
  --ink-on-mag: var(--ink);          /* 5.56:1, the most ink can do on this magenta */
  --ink-on-mag-2: rgba(12, 11, 14, .72);

  --display: "Syne", "Arial Black", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: 50px;
  --gap: 24px;
  --section: 120px;
  --nav-h: 64px;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: 800ms;
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 300ms;
  --ease-grow: cubic-bezier(0.76, 0, 0.24, 1);
  --stagger: 200ms;
  --rise: 40px;
}
@media (max-width: 1100px) { :root { --gutter: 32px; --section: 96px; } }
@media (max-width: 767.98px) { :root { --gutter: 20px; --gap: 12px; --section: 72px; --nav-h: 56px; } }

/* ---------- base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
::selection { background: var(--mag); color: var(--ink); }
:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--mag); color: var(--ink); padding: 8px 14px; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--gutter); container-type: inline-size; }
.linkish { background: none; border: 0; padding: 0; color: var(--mag); cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; }

.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -0.045em; }
.label { font: 400 11.5px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.label--dim { color: var(--smoke); }
.rc { color: var(--mag); margin-right: .9em; }
a.rc { transition: color var(--dur-hover) var(--ease-hover); }
a.rc:hover { color: var(--bone); }

/* accession strings: ACC. 2026.114 · JONAH REYES · ... */
.acc { display: flex; flex-wrap: wrap; gap: 2px 0; font: 400 11.5px/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ash); }
.acc b { font-weight: 500; color: var(--bone); }
.acc > * + *::before { content: "·"; margin: 0 .6em; color: var(--smoke); }
.acc--ink { color: var(--ink-on-mag); }
.acc--ink b { color: var(--ink); }
.acc--ink > * + *::before { color: var(--ink-on-mag-2); }

.status { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status--open::before { background: var(--mag); box-shadow: 0 0 0 3px rgba(255, 46, 126, .22); }
.status--wait::before { border: 1.5px solid var(--bone); }
.status--closed { color: var(--ash); }
.status--closed::before { background: var(--smoke); }

/* ---------- buttons: split pills ---------- */
.btn { --bg: transparent; --fg: var(--bone); --disc: var(--bone); --disc-fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 6px 0 24px;
  border-radius: 999px; background: var(--bg); color: var(--fg); font: 500 15px/1 var(--body); letter-spacing: .01em;
  cursor: pointer; border: 0; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.btn__disc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--disc); color: var(--disc-fg); flex: none;
  transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.btn__disc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.btn:hover .btn__disc { transform: rotate(-45deg); }
.btn--mag { --bg: var(--mag); --fg: var(--ink); --disc: var(--ink); --disc-fg: var(--mag); }
.btn--mag:hover { --bg: var(--bone); }
.btn--ink { --bg: var(--ink); --fg: var(--bone); --disc: var(--mag); --disc-fg: var(--ink); }
.btn--ink:hover { --bg: #2a2530; }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--rule); }
.btn--ghost::before, .btn--ink-ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--bone);
  transform: translateX(-101%); transition: transform var(--dur-hover) var(--ease-hover); }
.btn--ghost:hover { --fg: var(--ink); --disc: var(--ink); --disc-fg: var(--bone); }
.btn--ghost:hover::before, .btn--ink-ghost:hover::before { transform: none; }
.btn--ink-ghost { --fg: var(--ink); --disc: var(--ink); --disc-fg: var(--mag); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ink-ghost::before { background: var(--ink); }
.btn--ink-ghost:hover { --fg: var(--mag); --disc: var(--mag); --disc-fg: var(--ink); }

.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ash); font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.chip span { color: var(--smoke); transition: color var(--dur-hover) var(--ease-hover); }
.chip:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.chip.is-on { background: var(--mag); color: var(--ink); box-shadow: none; }
.chip.is-on span { color: var(--ink-on-mag); }
.chip--ghost.is-on { background: var(--bone); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__count { margin-top: 2px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
  background: rgba(12, 11, 14, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-hover) var(--ease-hover); }
.nav.is-solid { background: rgba(12, 11, 14, .9); }
.nav__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__mark { font: 800 21px/1 var(--display); text-transform: uppercase; letter-spacing: -0.04em; }
.nav__sub { font: 400 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); padding-left: 12px; border-left: 1px solid var(--rule); }
.nav__links { display: flex; gap: 26px; }
.nav__links a { position: relative; font: 500 14px/1 var(--body); color: var(--ash); transition: color var(--dur-hover) var(--ease-hover); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--mag); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-hover); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--bone); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: none; }
.nav__links a[aria-current]::after { height: 2px; }
.nav__cta { height: 44px; font-size: 14px; padding-left: 18px; }
.nav__cta .btn__disc { width: 34px; height: 34px; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav__toggle i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--bone); transition: transform var(--dur-hover) var(--ease-hover); }
.nav__toggle i:nth-of-type(1) { top: 17px; }
.nav__toggle i:nth-of-type(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-4px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); padding: calc(var(--nav-h) + 32px) var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu nav { display: grid; }
/* the grid sizes every row to the longest word, so AFTERCARE at 10vw pushed the whole menu
   past the screen and squeezed its RM number down to two lines. 7.4vw fits the longest one. */
.menu nav a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 800 clamp(26px, 7.4vw, 64px)/1 var(--display); text-transform: uppercase; letter-spacing: -0.045em; min-width: 0; }
.menu nav a[aria-current] { color: var(--mag); }
.menu nav a small { flex: none; white-space: nowrap; font: 400 11px var(--mono); letter-spacing: .08em; color: var(--mag); }
.menu__foot { font: 400 12px/1.6 var(--mono); color: var(--ash); text-transform: uppercase; letter-spacing: .06em; padding-top: 24px; }

@media (max-width: 1100px) { .nav__links { display: none; } .nav__toggle { display: block; } }
@media (max-width: 767.98px) { .nav { gap: 10px; } .nav__sub { display: none; } .nav__cta { display: none; } .nav__mark { font-size: 19px; } }

/* ---------- load and reveal primitives. Start states only under .js, inside no-preference ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .enter { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter);
    transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js .enter--big { transform: translateY(80px); }
  .is-in .enter, .js .is-in .enter { opacity: 1; transform: none; }
  .js .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); transition-delay: calc(var(--d, 0) * var(--stagger)); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- home hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: var(--nav-h); display: flex; flex-direction: column; overflow: clip; background: var(--ink); isolation: isolate; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: 50% 45%; }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 7, 10, .78) 0%, rgba(8, 7, 10, .38) 45%, rgba(8, 7, 10, .55) 100%),
    linear-gradient(180deg, rgba(8, 7, 10, .5) 0%, rgba(8, 7, 10, .1) 40%, rgba(8, 7, 10, .7) 80%, var(--ink) 100%); }
.hero__grid, .err__grid { --row: clamp(150px, calc((100svh - var(--nav-h) - 176px) / 3), 264px);
  position: relative; flex: 1; display: grid; grid-template-rows: repeat(3, minmax(var(--row), auto)); align-content: start; padding-inline: var(--gutter); }
.hero__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; border-bottom: 1px solid var(--rule); min-height: 0; }
.frag { --size: min(calc(var(--row) * 1.02), 19.4vw);
  font: 800 var(--size)/.74 var(--display); letter-spacing: -0.05em; text-transform: uppercase; color: var(--bone); white-space: nowrap; margin-bottom: -0.035em; }
.frag--bad { grid-column: 1 / span 7; }
.frag--wea { grid-column: 3 / -1; grid-row: 1; color: var(--mag); }
.frag--ther { grid-column: 4 / -1; justify-self: end; }
.hero__msg { grid-column: 8 / -1; align-self: start; padding-top: 22px; display: grid; gap: 16px; justify-items: start; }
.hero__lede { font-size: 18px; line-height: 1.5; max-width: 34ch; color: var(--bone); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__coord { grid-column: 1 / span 2; align-self: start; padding-top: 18px; position: relative; z-index: 2; }
.hero__note { grid-column: 1 / span 2; grid-row: 1; align-self: start; padding-top: 18px; display: grid; gap: 6px; position: relative; z-index: 2; }
.hero__note strong { font: 800 clamp(15px, 1.36vw, 22px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.03em; color: var(--bone); }

.phases { position: absolute; inset: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); pointer-events: none; z-index: 0; }
.phase { grid-column: var(--p); grid-row: 1; position: relative; border-right: 1px solid var(--rule); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 10px 12px 0; text-align: right;
  font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.phase b { position: absolute; right: -1px; bottom: 0; width: 1px; height: 38px; background: var(--mag); }

.books { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(150px, 1.1fr) repeat(4, minmax(0, 2fr)); column-gap: var(--gap); padding: 20px var(--gutter) 26px; }
.books__head { align-self: start; }
.books__row { display: grid; gap: 4px; align-content: start; padding: 2px 0 0 16px; border-left: 1px solid var(--rule); transition: border-color var(--dur-hover) var(--ease-hover); }
.books__row:hover { border-color: var(--mag); }
.books__name { font: 500 17px/1.2 var(--body); color: var(--bone); }
.books__style { font-size: 14px; line-height: 1.3; color: var(--ash); margin-bottom: 8px; }

/* hero load: WEA lands first, BAD and THER slide in from the sides (centre-out) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__media img { transform: scale(1.08); transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
  .js .frag { opacity: 0; transition: opacity var(--dur-enter) var(--ease-enter), transform 1000ms var(--ease-enter); }
  .js .frag--wea { transform: translateY(80px); transition-delay: 200ms; }
  .js .frag--bad { transform: translateX(34vw); transition-delay: 400ms; }
  .js .frag--ther { transform: translateX(-34vw); transition-delay: 600ms; }
  .js .hero .enter, .js .err .enter { transition-delay: calc(200ms + var(--i) * var(--stagger)); }
  .js .phase { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-enter) var(--ease-enter) 800ms, transform var(--dur-enter) var(--ease-enter) 800ms; }
  .is-in .hero__media img, .is-in .frag, .is-in .phase { opacity: 1; transform: none; }
  /* reverse on scroll: triggered, runs at a fixed speed, and comes back on return */
  .hero.is-in.is-out .frag { transition-duration: 500ms, 700ms; transition-delay: 0ms; }
  .hero.is-in.is-out .frag--wea { opacity: 0; transform: translateY(80px); }
  .hero.is-in.is-out .frag--bad { opacity: 0; transform: translateX(34vw); transition-delay: 80ms; }
  .hero.is-in.is-out .frag--ther { opacity: 0; transform: translateX(-34vw); transition-delay: 160ms; }
}

/* ---------- room header (inner pages) ---------- */
.room { padding: calc(var(--nav-h) + 44px) 0 88px; border-bottom: 1px solid var(--rule); }
.room__strip { display: flex; flex-wrap: wrap; gap: 4px 0; padding-bottom: 18px; border-bottom: 1px solid var(--rule); font: 400 11.5px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.room__strip > span + span::before { content: "·"; margin: 0 .7em; color: var(--smoke); }
.room__strip .rc + span::before { content: none; }
.room__title { position: relative; font-size: calc(100cqw / var(--n)); line-height: .8; letter-spacing: -0.055em; margin: 28px 0 0 -0.03em; padding-top: .34em; white-space: nowrap; }
.room__pre { position: absolute; left: .04em; top: 0; font-size: .26em; letter-spacing: -0.04em; color: var(--mag); white-space: nowrap; }
.room__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 48px; align-items: start; }
.room__side { grid-column: 7 / -1; display: grid; gap: 22px; align-content: start; justify-items: start; }
.room__intro { font-size: 19px; line-height: 1.55; max-width: 44ch; color: var(--bone); }
.room--short { padding-bottom: 64px; }

.sum { grid-column: 1 / span 4; display: grid; }
.sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sum div:last-child { border-bottom: 1px solid var(--rule); }
.sum dd { font: 800 28px/1 var(--display); letter-spacing: -0.03em; text-transform: uppercase; text-align: right; }
.sum dd a { transition: color var(--dur-hover) var(--ease-hover); }
.sum dd a:hover { color: var(--mag); }

.case { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.case__label { padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 56px; }
.room + .case { border-top: 0; }

/* ---------- archive head (home) ---------- */
.archive { padding: var(--section) 0; position: relative; }
.archive__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: 96px; }
.archive__label { grid-column: 1 / -1; padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.archive__title { grid-column: 1 / -1; position: relative; font-size: calc(100cqw / 7.45); line-height: .8; letter-spacing: -0.055em; margin-left: -0.03em; padding-top: .34em; }
.archive__the { position: absolute; left: .04em; top: 0; font-size: .26em; letter-spacing: -0.04em; color: var(--mag); }
.archive__intro { grid-column: 7 / -1; margin-top: 44px; display: grid; gap: 24px; align-content: start; }
.archive__sum { margin-top: 44px; }
.archive__intro p { font-size: 19px; line-height: 1.55; max-width: 44ch; color: var(--bone); }
.archive__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ---------- the wall of records (signature) ---------- */
.wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 88px; align-items: start; }
.piece { grid-column: var(--c) / span var(--s); margin-top: var(--mt, 0); min-width: 0; transition: opacity 500ms var(--ease-hover); scroll-margin-top: calc(var(--nav-h) + 24px); }
.wall--home:not([data-active="all"]) .piece { opacity: .12; pointer-events: none; }
.wall--home[data-active="mira"] .piece[data-artist="mira"],
.wall--home[data-active="jonah"] .piece[data-artist="jonah"],
.wall--home[data-active="tess"] .piece[data-artist="tess"],
.wall--home[data-active="kit"] .piece[data-artist="kit"] { opacity: 1; pointer-events: auto; }
.wall__empty { padding: 48px 0; }

.frame { position: relative; display: block; aspect-ratio: var(--ar, 4/5); overflow: hidden; background: var(--ink-2); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg2 .q2, .cg2 .q3 { display: none; }
.piece .frame img { transition: transform 700ms var(--ease-hover); }
.piece .frame.done:hover img, .ret__rec:hover .frame.done img, .frow:hover .frame.done img, .ret.done .ret__rec:hover img, .frow:hover .frow__photo.done img { transform: scale(1.035); }
.frame__tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 6px 10px; border-radius: 999px; background: var(--mag); color: var(--ink); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cg2 .frame__tag { display: none; }
.piece figcaption { display: grid; gap: 6px; padding-top: 14px; }
.piece .acc b { flex-basis: 100%; margin-bottom: 2px; }
.piece .acc b + span::before { content: none; }
.piece__title { font: 500 17px/1.3 var(--body); color: var(--bone); }
.piece__title em { font: 400 10.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--mag); margin-left: 6px; white-space: nowrap; }
.piece .frame:hover + figcaption .acc b { color: var(--mag); }
.piece--feature .frame, .cg4 { background: var(--mag); }
.piece.is-target .acc b { color: var(--mag); }

/* corner-growth reveal. 2-tile: TL and BR squares grow out from their corners.
   4-tile: quadrants from their corners on misregistered delays, magenta showing in the seams.
   Start states only under .js; one-off clip-path transitions, never scroll-linked, never reversed. */
@media (prefers-reduced-motion: no-preference) {
  .js .cg img { transition: clip-path 1600ms var(--ease-grow), transform 700ms var(--ease-hover); }
  .js .cg2 .q1 { clip-path: inset(0 52% 52% 0); }
  .js .cg2 .q4 { clip-path: inset(52% 0 0 52%); }
  .js .cg2.in .q1, .js .cg2.in .q4 { clip-path: inset(0 0 0 0); }

  .js .cg4 img { transition-duration: 1300ms, 700ms; }
  .js .cg4 .q1 { clip-path: inset(0 50% 100% 0); }
  .js .cg4 .q2 { clip-path: inset(0 0 50% 100%); transition-delay: 220ms, 0ms; }
  .js .cg4 .q3 { clip-path: inset(100% 50% 0 0); transition-delay: 140ms, 0ms; }
  .js .cg4 .q4 { clip-path: inset(50% 0 0 100%); transition-delay: 380ms, 0ms; }
  .js .cg4.in .q1 { clip-path: inset(0 50% 50% 0); }
  .js .cg4.in .q2 { clip-path: inset(0 0 50% 50%); }
  .js .cg4.in .q3 { clip-path: inset(50% 50% 0 0); }
  .js .cg4.in .q4 { clip-path: inset(50% 0 0 50%); }
  .js .cg4 .frame__tag { opacity: 0; transition: opacity 400ms var(--ease-hover) 1100ms; }
  .js .cg4.in .frame__tag { opacity: 1; }

  /* the record lands line by line only once the image is whole */
  .js .piece figcaption > *, .js .piece .acc > *, .js .ret__line > *, .js .frow__photo .acc { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter); }
  .js .piece.in figcaption > *, .js .piece.in .acc > *, .js .ret.in .ret__line > *, .js .frow__photo.in .acc { opacity: 1; transform: none; }
  .js .piece.in .acc > :nth-child(1) { transition-delay: var(--cap, 1400ms); }
  .js .piece.in .acc > :nth-child(2) { transition-delay: calc(var(--cap, 1400ms) + 70ms); }
  .js .piece.in .acc > :nth-child(3) { transition-delay: calc(var(--cap, 1400ms) + 140ms); }
  .js .piece.in .acc > :nth-child(4) { transition-delay: calc(var(--cap, 1400ms) + 210ms); }
  .js .piece.in .acc > :nth-child(5) { transition-delay: calc(var(--cap, 1400ms) + 280ms); }
  .js .piece.in .piece__title, .js .ret.in .ret__name, .js .frow__photo.in .acc { transition-delay: calc(var(--cap, 1400ms) + 350ms); }
  .js .ret.in .ret__line .acc { transition-delay: var(--cap, 1400ms); }
}

/* The quieter entrances. Corner-growth is the signature and runs at eight moments on the whole site;
   every other image arrives one of these ways, and a wall arrives a row at a time (data-row), not tile by tile.
   sleeve: the file slides up out of its sleeve (one-edge clip).  sleeve-l: the same, from the left edge.
   settle: fades in and settles from 1.04.  develop: exposure in steps, like a print coming up in the tray.
   mount: a flash mat lifts onto the board, its magenta block following.  pin: a mat drops onto its pin from above.  (none: small thumbnails and lists.)
   Start states only under .js and inside no-preference; one-way; triggered at 30% visible after decode. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-en] { --cap: 450ms; }
  .js [data-en="settle"] .en-img { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease-enter), transform 1400ms var(--ease-enter); }
  .js [data-en="develop"] .en-img { opacity: 0; transition: opacity 1200ms steps(6, jump-end); }
  .js [data-en="sleeve"] .en-img { clip-path: inset(100% 0 0 0); transform: translateY(6%); transition: clip-path 1000ms var(--ease-enter), transform 1000ms var(--ease-enter); }
  .js [data-en="sleeve-l"] .en-img { clip-path: inset(0 100% 0 0); transform: translateX(-4%); transition: clip-path 1100ms var(--ease-enter), transform 1100ms var(--ease-enter); }
  .js [data-en].in .en-img { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  .js [data-en="mount"] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-enter), transform 800ms var(--ease-enter); }
  .js [data-en="mount"]::before { opacity: 0; transition: opacity 500ms var(--ease-hover) 350ms; }
  .js [data-en="pin"] { opacity: 0; transform: translateY(-22px) rotate(1.6deg); transition: opacity 500ms var(--ease-enter), transform 900ms var(--ease-enter); }
  .js [data-en="mount"].in, .js [data-en="mount"].in::before, .js [data-en="pin"].in { opacity: 1; transform: none; }
}
/* arrived: plain image again, so the hover zoom is a normal transform */
.js [data-en].done .en-img { clip-path: none; transition: transform 700ms var(--ease-hover); }

/* 4-tile quadrants end exactly on the 50% lines */
.cg4 .q1 { clip-path: none; }
.cg4 .q2 { clip-path: inset(0 0 50% 50%); }
.cg4 .q3 { clip-path: inset(50% 50% 0 0); }
.cg4 .q4 { clip-path: inset(50% 0 0 50%); }
/* assembled: collapse to the first image, whole, and hide the duplicate tiles. One-way. */
.js .cg.done .q1 { clip-path: none !important; transition: transform 700ms var(--ease-hover) !important; transition-delay: 0s !important; }
.js .cg.done .q2, .js .cg.done .q3, .js .cg.done .q4 { visibility: hidden; }
.cg4.done { background: var(--ink-2); }

/* ---------- home RM 02: the card drawer ---------- */
.drawer { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.drawer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.drawer__intro { grid-column: 1 / span 4; grid-row: 1 / span 3; }
.drawer__title { font-size: calc(100cqw / 22.6); line-height: .86; margin-bottom: 28px; }
.drawer__intro p { font-size: 18px; line-height: 1.55; max-width: 36ch; color: var(--ash); }
/* an explicit instruction sitting on the row itself, with three chevrons that run across it */
.drawer__pick { grid-column: 6 / -1; grid-row: 1; align-self: end; justify-self: start;
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: -10px; color: var(--mag);
  font: 700 19px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.drawer__pick-arrows { display: inline-flex; gap: 5px; }
.drawer__pick-arrows { gap: 7px; }
.drawer__pick-arrows i { width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); opacity: .22; }
.drawer__tabs { grid-column: 6 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
/* The tabs read as a printed list, so nothing said they could be pressed. Each one is now a
   chip with an edge and a chevron that steps right on hover, and the open card is filled. */
.tab { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 40px 16px 14px; color: var(--ash); cursor: pointer;
  background: rgba(233, 231, 227, .05); box-shadow: inset 0 0 0 1px var(--rule);
  transition: color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.tab + .tab { margin-left: -1px; }
.tab::before { content: ""; position: absolute; right: 16px; top: 18px; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--dur-hover) var(--ease-hover); }
.tab:hover, .tab:focus-visible { background: rgba(233, 231, 227, .12); }
.tab:hover::before, .tab:focus-visible::before { transform: rotate(-45deg) translate(2px, 2px); }
.tab.is-on { background: rgba(255, 46, 126, .14); box-shadow: inset 0 0 0 1px var(--mag); }
.tab.is-on::before { color: var(--mag); }
/* one run of the chevrons on arrival, left to right, so the row reads as something you press */
@media (prefers-reduced-motion: no-preference) {
  .js .drawer__tabs.in .tab::before { animation: tab-point 1100ms var(--ease-hover) 2 both; }
  .js .drawer__tabs.in .tab:nth-child(2)::before { animation-delay: 120ms; }
  .js .drawer__tabs.in .tab:nth-child(3)::before { animation-delay: 240ms; }
  .js .drawer__tabs.in .tab:nth-child(4)::before { animation-delay: 360ms; }
  /* the three chevrons light one after the other, left to right, then rest */
  .js .drawer__pick .drawer__pick-arrows i { animation: pick-blink 1600ms var(--ease-hover) infinite; }
  .js .drawer__pick .drawer__pick-arrows i:nth-child(2) { animation-delay: 190ms; }
  .js .drawer__pick .drawer__pick-arrows i:nth-child(3) { animation-delay: 380ms; }
  @keyframes tab-point { 0%, 55%, 100% { transform: rotate(-45deg); } 25% { transform: rotate(-45deg) translate(3px, 3px); } }
  @keyframes pick-blink { 0% { opacity: .22; } 8% { opacity: 1; } 26% { opacity: .22; } 100% { opacity: .22; } }
}
.tab b { font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mag); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-hover); }
.tab:hover { color: var(--bone); }
.tab.is-on { color: var(--bone); }
.tab.is-on::after { transform: none; }
.tab .status { font-size: 10.5px; }
.drawer__well { grid-column: 6 / -1; grid-row: 3; position: relative; display: grid; }
/* without JS every card shows, stacked; with JS only the pulled card */
.card { position: relative; background: var(--ink-2); border: 1px solid var(--rule); display: grid; margin-bottom: 16px;
  background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(233, 231, 227, .045) 35px 36px); }
.js .drawer__well .card { grid-area: 1 / 1; margin-bottom: 0; }
.js .drawer__well .card:not(.is-on) { visibility: hidden; }
.card__strip { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 12px 20px; border-bottom: 1px solid var(--rule); font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); background: var(--ink-2); }
.card__strip > span + span::before { content: "·"; margin: 0 .7em; color: var(--smoke); }
.card__strip .rc + span::before { content: none; }
.card__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 20px 20px 40px; }
.card__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); grid-row: span 2; }
.card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-hover); }
.card:hover .card__photo img { transform: scale(1.035); }
.card__text { display: grid; gap: 4px; align-content: start; }
.card__name { font: 800 clamp(34px, 3.6vw, 56px)/.86 var(--display); text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 8px; }
.card__style { font-size: 16px; color: var(--ash); margin-bottom: 14px; }
.card__dl { display: grid; margin-bottom: 18px; }
.card__dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.card__dl div:last-child { border-bottom: 1px solid var(--rule); }
.card__foot { display: grid; gap: 16px; align-content: end; justify-items: start; }
.card__foot .label a { color: var(--bone); transition: color var(--dur-hover) var(--ease-hover); }
.card__foot .label a:hover { color: var(--mag); }
.card__hole { position: absolute; left: 50%; bottom: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.drawer__lip { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--bone); }
.js .drawer__lip { grid-area: 2 / 1; }
.ruled li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.3; }
.ruled li:last-child { border-bottom: 1px solid var(--rule); }
.ruled li span { font: 400 11px/1.6 var(--mono); color: var(--mag); letter-spacing: .06em; }
/* pulling a card: the new one rises out of the drawer, the old one drops back in */
@media (prefers-reduced-motion: no-preference) {
  .js .drawer__well .card { transition: transform 800ms var(--ease-enter), opacity 500ms var(--ease-enter), visibility 0s linear 0s; }
  .js .drawer__well .card:not(.is-on) { opacity: 0; transform: translateY(56px); transition: transform 400ms var(--ease-hover), opacity 300ms var(--ease-hover), visibility 0s linear 400ms; }
}

/* ---------- flash mats: the numbered wall (from Flash Sheet, in Night Archive dress) ---------- */
.mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; grid-auto-flow: dense; }
.mat { position: relative; min-width: 0; }
.mat:nth-child(3n+1) { --tilt: -1deg; }
.mat:nth-child(3n+2) { --tilt: .8deg; }
.mat::before { content: ""; position: absolute; inset: 0; background: var(--mag); rotate: var(--tilt, 0deg); }
.mat__tile { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bone); color: var(--ink); padding: 10px 10px 0; rotate: var(--tilt, 0deg);
  transition: transform var(--dur-hover) var(--ease-hover); outline-offset: 6px; }
.mat:hover .mat__tile, .mat__tile:focus-visible, .mat:focus-within .mat__tile { transform: translate(-8px, -8px); }
.mat__img { position: relative; display: block; flex: 1; aspect-ratio: 4 / 5; overflow: hidden; background: #dcdad5; }
.mat--feature { grid-column: span 2; grid-row: span 2; }
.mat--feature .mat__img { aspect-ratio: auto; min-height: 0; }
.mat__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mat--claimed .mat__img img { opacity: .45; }
.mat__info { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 12px 14px; background: var(--ink); color: var(--bone); transform: translateY(101%); transition: transform var(--dur-hover) var(--ease-hover); }
.mat__info b { font: 800 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.mat__info span { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mag); }
.mat:hover .mat__info, .mat__tile:focus-visible .mat__info, .mat:focus-within .mat__info { transform: none; }
.mat__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 2px 12px; font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(12, 11, 14, .72); }
.mat__bar em { font: 800 22px/1 var(--display); font-style: normal; color: var(--mag-ink); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.mat__bar span { text-align: right; }
.mat--end::before { background: var(--bone); }
.mat__tile--end { background: var(--mag); padding: 22px; justify-content: space-between; gap: 18px; min-height: 260px; }
.mat__tile--end .label { color: var(--ink-on-mag); }
.mat__endno { font: 800 64px/.8 var(--display); letter-spacing: -0.05em; }
.mat__tile--end strong { font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.mat__tile--end .btn__disc { background: var(--ink); color: var(--mag); width: 52px; height: 52px; }
.mat--retired { grid-column: span 2; }
.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-11deg); padding: 10px 18px 8px; border: 3px solid var(--mag-ink); color: var(--mag-ink);
  font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: -0.02em; text-align: center; background: rgba(233, 231, 227, .9); white-space: nowrap; }
.stamp small { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; margin-top: 4px; }
@media (hover: none) { .mat__info { transform: none; } .mat:hover .mat__tile { transform: none; } }

/* home preview: four mats and the end tile in one row, under the rules */
.fpre { padding: var(--section) 0; border-top: 1px solid var(--rule); }
.fpre__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: 64px; }
.fpre__title { grid-column: 1 / span 7; font-size: calc(100cqw / 12.8); line-height: .82; }
.fpre__rules { grid-column: 9 / -1; display: grid; }
.fpre__rules li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.fpre__rules li:last-child { border-bottom: 1px solid var(--rule); }
.fpre__rules .label { color: var(--mag); padding-top: 3px; }
.mats--pre { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.mats--pre .mat__tile--end, .mats--artist .mat__tile--end { min-height: 0; }
.mats--artist { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

/* ---------- booking section (home) and the record card ---------- */
.booking { padding: var(--section) 0; border-top: 1px solid var(--rule); background: var(--ink); }
.booking .case__label { margin-bottom: 0; }
.booking__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.booking__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 40px); }
.booking__title { font-size: calc(100cqw / 13.2); line-height: .82; letter-spacing: -0.05em; padding: 36px 0 64px; margin-left: -0.03em; }
.stages { display: grid; }
.stages li { display: grid; grid-template-columns: 80px 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); }
.stages li:last-child { border-bottom: 1px solid var(--rule); }
.stages__k { grid-row: span 2; font: 400 11.5px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mag); }
.stages strong { font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.stages li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--ash); }
.record-wrap { grid-column: 6 / -1; }
.record__more { margin-top: 36px; font-size: 15px; }
.record__more a { color: var(--ash); text-decoration: underline; text-decoration-color: var(--mag); text-underline-offset: 4px; transition: color var(--dur-hover) var(--ease-hover); }
.record__more a:hover { color: var(--bone); }

.record { background: var(--bone); color: var(--ink); position: relative; }
.record::after { content: ""; position: absolute; left: 14px; right: -14px; bottom: -14px; height: 14px; background: var(--mag); }   /* plinth */
.record__form { display: grid; grid-template-columns: 1fr 1fr; }
.record__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: stretch; border-bottom: 2px solid var(--ink); }
.record__head p { padding: 18px 22px; display: grid; gap: 2px; font: 400 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(12, 11, 14, .66); }
.record__head b { font: 800 22px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); text-transform: uppercase; }
.record__no { border-left: 1px solid var(--rule-ink); text-align: right; background: var(--ink); color: var(--ash) !important; }
.record__no b { color: var(--mag); font-family: var(--mono); font-weight: 500; font-size: 22px; letter-spacing: 0; }
.cell { display: grid; gap: 10px; align-content: start; margin: 0; padding: 16px 22px 18px; border: 0; border-bottom: 1px solid var(--rule-ink); min-width: 0; position: relative; }
.cell--l { border-right: 1px solid var(--rule-ink); }
.cell--full { grid-column: 1 / -1; }
.cell legend, .cell__k { float: left; width: 100%; padding: 0; font: 400 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(12, 11, 14, .66); }
.cell legend + * { clear: both; }
.cell legend span, .cell__k span { color: var(--mag-ink); margin-right: 10px; }
.cell__k em { font-style: normal; color: rgba(12, 11, 14, .5); margin-left: 8px; }
.cell input[type="text"], .cell input[type="email"], .cell input[type="url"], .cell input[type="tel"], .cell textarea { width: 100%; border: 0; border-bottom: 1.5px solid rgba(12, 11, 14, .3); background: transparent; padding: 6px 0 8px; font-size: 18px; border-radius: 0; resize: vertical; transition: border-color var(--dur-hover) var(--ease-hover); }
.cell input::placeholder, .cell textarea::placeholder { color: rgba(12, 11, 14, .45); }
.cell input:focus, .cell textarea:focus { outline: none; border-color: var(--ink); }
.cell [aria-invalid="true"] { border-color: var(--mag-ink) !important; }
.cell__note { font-size: 13.5px; line-height: 1.4; color: rgba(12, 11, 14, .7); }
.cell__sub { display: grid; gap: 8px; margin-top: 8px; max-width: 220px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(12, 11, 14, .3); font-size: 14.5px; font-weight: 500;
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.seg label:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--bone); box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--mag-ink); outline-offset: 2px; }
.seg--sm span { height: 34px; padding: 0 12px; font-size: 13.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.record__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; }
.record__checks { display: grid; gap: 8px; }
.record__priv { font-size: 13.5px; color: rgba(12, 11, 14, .72); }
.record__priv a { text-decoration: underline; text-underline-offset: 3px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; flex: none; }
.check.is-bad { color: var(--mag-ink); }
.record__msg { grid-column: 1 / -1; padding: 0 22px; font-size: 14.5px; color: var(--mag-ink); }
.record__msg:empty { display: none; }
.record__msg:not(:empty) { padding-bottom: 18px; }
.record__done { padding: 48px 32px; display: grid; gap: 16px; min-height: 420px; align-content: center; justify-items: start; }
.record__done .label { color: var(--mag-ink); }
.record__done-no { font-size: clamp(40px, 5vw, 80px); line-height: .9; }
.record__done p:not(.label) { font-size: 18px; max-width: 42ch; }
.record__done .record__demo { color: rgba(12, 11, 14, .6); }

/* ---------- visitors' book: tilted scrubbed quote on magenta ---------- */
.proof { background: var(--mag); color: var(--ink); padding: var(--section) 0; overflow: clip; }
/* 400-weight mono at 11.5px is thin on a ground this saturated, and contrast is already as far
   as it goes at 5.56:1, so the magenta labels also carry weight and a little size. */
.proof .label, .close .label, .mat__tile--end .label, .acc--ink, .chip.is-on span {
  font-weight: 600; font-size: 12.5px; letter-spacing: .06em; }
.proof .label { color: var(--ink-on-mag); }
.proof .rc { color: var(--ink); }
.proof__label { padding-bottom: 20px; border-bottom: 1px solid var(--rule-ink); margin-bottom: 72px; }
.proof__main { display: grid; gap: 36px; margin-bottom: 96px; }
.tilt { transform: perspective(700px) rotateY(8deg); transform-origin: 30% 50%; max-width: 1180px; margin: 0 0 0 3vw; }
.scrub { font-size: clamp(38px, 4.6vw, 80px); line-height: .94; letter-spacing: -0.05em; color: var(--ink); }
.js .scrub .w { color: var(--mag-deep); transition: color 400ms var(--ease-hover); }
.js .scrub .w.lit { color: var(--ink); }
.proof__main figcaption { margin-left: 3vw; }
.proof__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.note { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px 28px 8px 0; }
.note + .note { padding-left: 28px; border-left: 1px solid var(--rule-ink); }
.note p { font: 500 22px/1.35 var(--body); letter-spacing: -0.01em; }

/* ---------- home studio band ---------- */
.studio { background: var(--ink); padding-bottom: var(--section); }
.studio__band { position: relative; height: min(82vh, 820px); min-height: 520px; }
.studio__photo { position: absolute; inset: 0; aspect-ratio: auto; }
.studio__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 10, .7) 0%, rgba(8, 7, 10, .1) 40%, rgba(8, 7, 10, .2) 70%, var(--ink) 100%); pointer-events: none; z-index: 1; }
.studio__over { position: relative; z-index: 1; padding-top: 48px; display: grid; gap: 20px; }
/* The band is a fixed height and .ledger--four is pulled 120px up over it, so a title sized
   only from the container width outgrows the room it has: at 1900x900 the third line, RD, sat
   107px under the conditions cards. Cap it by the band height too. 2.4 is three lines at .8. */
.studio__title { font-size: min(calc(100cqw / 6.75), calc((min(82vh, 820px) - 250px) / 2.4));
  line-height: .8; letter-spacing: -0.055em; margin-left: -0.03em; }
.ledger { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ink-2); border: 1px solid var(--rule); }
.ledger--four { margin-top: -120px; }
.ledger li { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 30px; min-height: 200px; }
.ledger--four li + li { border-left: 1px solid var(--rule); }
.ledger .label { color: var(--mag); margin-bottom: auto; padding-bottom: 36px; }
.ledger strong { font: 800 23px/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.ledger li > span:last-child { font-size: 15px; color: var(--ash); }
.aftercare { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 72px; }
.aftercare__k { grid-column: 1 / span 3; padding-top: 6px; }
.aftercare__steps { grid-column: 4 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.aftercare__steps li { font-size: 15px; line-height: 1.5; color: var(--ash); padding-top: 14px; border-top: 2px solid var(--bone); }
.aftercare__steps b { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); margin-bottom: 8px; }
.aftercare__btns { grid-column: 11 / -1; display: grid; gap: 10px; justify-items: end; }

/* ---------- close band (magenta) ---------- */
.close { background: var(--mag); color: var(--ink); padding: var(--section) 0 calc(var(--section) - 16px); overflow: clip; }
.close .label { color: var(--ink-on-mag); padding-bottom: 20px; border-bottom: 1px solid var(--rule-ink); }
.close .rc { color: var(--ink); }
.close__title { display: grid; font-size: calc(100cqw / var(--n, 9.35)); line-height: .84; letter-spacing: -0.06em; margin: 48px 0 64px -0.03em; }
.close__title span { white-space: nowrap; }
.close__title span:last-child { justify-self: end; }
.close__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-top: 28px; border-top: 2px solid var(--ink); }
.close__line { grid-column: 1 / span 5; font: 500 20px/1.45 var(--body); }
.close__ctas { grid-column: 7 / -1; justify-self: end; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- footer: catalogue card plus the collection index ---------- */
.foot { background: var(--ink); padding: 88px 0 28px; }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; padding-bottom: 56px; align-items: start; }
.foot__card { grid-column: 1 / span 5; background: var(--ink-2); border: 1px solid var(--rule); padding: 28px 28px 20px; }
.foot__mark { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: -0.04em; margin-bottom: 8px; }
.foot__dl { display: grid; margin-top: 24px; }
.foot__dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.foot__dl dd { text-align: right; }
.foot__dl a { transition: color var(--dur-hover) var(--ease-hover); }
.foot__dl a:hover { color: var(--mag); }
.foot__index { grid-column: 7 / -1; }
.foot__head { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.foot__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-top: 18px; }
.foot__lists ul { margin-top: 10px; }
.foot__lists a { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font: 400 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ash); transition: color var(--dur-hover) var(--ease-hover); }
.foot__lists a b { font-weight: 500; color: var(--bone); min-width: 5.4em; transition: color var(--dur-hover) var(--ease-hover); }
.foot__lists a:hover, .foot__lists a:hover b { color: var(--mag); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--rule); font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }

/* ---------- WORK: register and record view ---------- */
.room__side .filters--state { margin-top: -10px; }
.reg__scroll { overflow-x: auto; }
.reg { width: 100%; font-size: 15px; }
.reg th { text-align: left; padding: 0 12px 12px 0; border-bottom: 1px solid var(--bone); font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.reg th button { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: color var(--dur-hover) var(--ease-hover); }
.reg th button::after { content: "↕"; color: var(--smoke); }
.reg th[aria-sort="ascending"] button::after { content: "↑"; color: var(--mag); }
.reg th[aria-sort="descending"] button::after { content: "↓"; color: var(--mag); }
.reg th button:hover { color: var(--bone); }
.reg td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); color: var(--ash); transition: background-color var(--dur-hover) var(--ease-hover); }
.reg tbody tr { cursor: pointer; }
.reg tbody tr:hover td { background: var(--ink-2); color: var(--bone); }
.reg td:first-child { padding-left: 8px; }
.reg th:first-child { padding-left: 8px; }
.reg__acc a { font: 500 13px var(--mono); letter-spacing: .06em; color: var(--bone); }
.reg tbody tr:hover .reg__acc a { color: var(--mag); }
.reg__num { text-align: right; font-variant-numeric: tabular-nums; }
.reg th.reg__num { text-align: right; }
.reg .status { font-size: 10.5px; }

.rv { width: min(1240px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: calc(100svh - 48px); padding: 0; border: 1px solid var(--rule); background: var(--ink); color: var(--bone); overflow: auto; }
.rv::backdrop { background: rgba(8, 7, 10, .82); }
.rv__in { padding: 20px 28px 32px; }
.rv__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.rv__x { display: inline-flex; gap: 10px; align-items: center; background: none; border: 0; color: var(--bone); font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rv__x span { font-size: 22px; line-height: 1; color: var(--mag); }
.rv__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.rv__frame { grid-column: 1 / span 7; max-height: calc(100svh - 170px); }
.rv__frame img { object-fit: contain; background: var(--ink-2); }
.rv__rec { grid-column: 8 / -1; display: grid; gap: 18px; align-content: start; justify-items: start; }
.rv__acc { font: 500 13px var(--mono); letter-spacing: .08em; color: var(--mag); text-transform: uppercase; }
.rv__title { font: 800 clamp(28px, 2.6vw, 40px)/.95 var(--display); text-transform: uppercase; letter-spacing: -0.04em; }
.rv__dl { display: grid; width: 100%; }
.rv__dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.rv__dl div:last-child { border-bottom: 1px solid var(--rule); }
.rv__dl dt { font: 400 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.rv__dl dd { text-align: right; }
.rv__nav { display: flex; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .rv[open] { animation: rv-in 300ms var(--ease-hover); }
  @keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- ARTISTS: flush row stack of catalogue cards ---------- */
.case--rows { padding-bottom: 0; }
.case--rows .case__label { margin-bottom: 0; }
.frows { margin-top: 0; }
.frow { position: sticky; top: var(--nav-h); z-index: var(--z); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap);
  min-height: min(78svh, 760px); padding: 0 var(--gutter) 40px; background: var(--ink); border-top: 1px solid var(--rule); }
.frow--alt { background: var(--ink-2); }
.frow__strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 14px 0; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.frow__strip > span + span::before { content: "·"; margin: 0 .7em; color: var(--smoke); }
.frow__strip .rc + span::before { content: none; }
.frow__no { grid-column: 1 / span 2; display: grid; gap: 18px; align-content: start; }
.frow__art { font: 800 44px/.84 var(--display); letter-spacing: -0.04em; color: var(--mag); }
.frow__main { grid-column: 3 / span 6; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; min-width: 0; }
.frow__name { font-size: calc(100cqw / var(--n)); line-height: .82; letter-spacing: -0.05em; margin-left: -0.03em; transition: color var(--dur-hover) var(--ease-hover); }
.frow:hover .frow__name { color: var(--mag); }
.frow__style { font-size: 19px; color: var(--ash); }
.frow__spec { display: grid; margin-top: 8px; max-width: 460px; }
.frow__spec span { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.frow__spec span:last-child { border-bottom: 1px solid var(--rule); }
.frow__spec i { font: 400 11px/1.7 var(--mono); font-style: normal; color: var(--mag); }
.frow__go { margin-top: auto; display: inline-flex; align-items: center; gap: 14px; font: 500 15px var(--body); }
.frow__go .btn__disc { background: var(--mag); color: var(--ink); }
.frow:hover .frow__go .btn__disc { transform: rotate(-45deg); }
.frow__photo { grid-column: 9 / -1; display: grid; gap: 12px; align-content: start; }
.frow__photo .frame { max-height: calc(min(78svh, 760px) - 150px); aspect-ratio: 4 / 5; }
.frow--alt .frow__photo { grid-column: 1 / span 4; grid-row: 2; }
.frow--alt .frow__main { grid-column: 5 / span 6; grid-row: 2; }
.frow--alt .frow__no { grid-column: 11 / -1; grid-row: 2; justify-items: end; text-align: right; }
.frow:last-child { margin-bottom: 0; }
.terms { display: grid; }
.terms > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 22px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.terms > div:last-child { border-bottom: 1px solid var(--rule); }
.terms dt { grid-column: 1 / span 3; }
.terms dt .status { font-size: 12.5px; }
.terms dd { grid-column: 4 / span 6; font-size: 17px; color: var(--ash); max-width: 56ch; }
.terms dd.terms__do { grid-column: 10 / -1; justify-self: end; }
.terms__do a { font-weight: 500; color: var(--bone); text-decoration: underline; text-decoration-color: var(--mag); text-underline-offset: 4px; transition: color var(--dur-hover) var(--ease-hover); }
.terms__do a:hover { color: var(--mag); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ---------- ARTIST page: the artist file ---------- */
.afile { position: relative; min-height: min(100svh, 980px); padding: calc(var(--nav-h) + 40px) var(--gutter) 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); overflow: clip; border-bottom: 1px solid var(--rule); }
.afile__photo { position: absolute; left: 0; top: 0; bottom: 0; width: calc(50% - var(--gap) / 2); overflow: hidden; background: var(--ink-2); }
.afile__photo img { width: 100%; height: 100%; object-fit: cover; }
.afile__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 7, 10, 0) 55%, rgba(8, 7, 10, .55) 100%), linear-gradient(180deg, rgba(8, 7, 10, .45) 0%, rgba(8, 7, 10, 0) 30%); }
.afile__body { grid-column: 7 / -1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; container-type: inline-size; min-width: 0; }
.afile__strip { display: flex; flex-wrap: wrap; gap: 4px 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font: 400 11.5px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.afile__strip > span + span::before { content: "·"; margin: 0 .7em; color: var(--smoke); }
.afile__strip .rc + span::before { content: none; }
.afile__name { display: grid; font-size: calc(100cqw / var(--nn, 5.2)); line-height: .82; letter-spacing: -0.05em; margin-top: 12px; }
.afile__given { display: block; }
/* the surname starts two columns early, crossing onto the photo */
.afile__sur { display: block; margin-top: .1em; margin-left: calc(-1 * ((100cqw - 5 * var(--gap)) / 3 + 2 * var(--gap))); white-space: nowrap; }
.afile__books { display: grid; margin-top: auto; }
.afile__books div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.afile__books div:last-child { border-bottom: 1px solid var(--rule); }
.afile__books dd { text-align: right; }
.afile__status dd { display: grid; justify-items: end; gap: 8px; }
.afile__status b { font: 800 32px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.afile__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .js .afile__photo img { transform: scale(1.06); transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
  .afile.is-in .afile__photo img { transform: none; }
}

.words { padding: var(--section) 0; position: relative; overflow: clip; }
.words__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap); align-items: start; }
.words__label { grid-column: 1 / -1; grid-row: 1; }
/* composed, not placed: the working photo bleeds off the left edge and the words ride over it on their own panel */
.words__detail { grid-column: 1 / span 6; grid-row: 2 / span 2; margin-left: calc(-1 * var(--gutter)); position: relative; }
.words__detail img { width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; }
.words__detail figcaption { position: absolute; left: var(--gutter); bottom: 16px; color: var(--bone); background: rgba(12, 11, 14, .78); padding: 6px 10px; }
.words__text { grid-column: 5 / span 5; grid-row: 2; margin-top: 18%; position: relative; z-index: 1; display: grid; gap: 24px; padding: 36px 36px 40px; background: var(--ink-2); border: 1px solid var(--rule); box-shadow: 16px 16px 0 var(--mag); }
.words__text p { font: 500 22px/1.35 var(--body); letter-spacing: -0.01em; }
.words__side { grid-column: 10 / -1; grid-row: 2 / span 2; display: grid; gap: 28px; padding-top: 4px; }
.words__takes { display: grid; gap: 16px; }
.words__takes div { display: grid; gap: 6px; }
.words__takes dd { font-size: 15px; color: var(--ash); }
.recs__title { position: relative; font-size: calc(100cqw / 8.4); line-height: .8; letter-spacing: -0.055em; margin: 0 0 88px -0.03em; padding-top: .34em; }
.recs__count { position: absolute; left: .04em; top: 0; font-size: .26em; color: var(--mag); }
.notes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--bone); }
.notes3 li { display: flex; flex-direction: column; gap: 12px; padding: 22px 28px 24px 0; min-height: 240px; }
.notes3 li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.notes3 .label { color: var(--mag); margin-bottom: auto; padding-bottom: 32px; }
.notes3 strong { font: 800 23px/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.notes3 li > span:last-child { font-size: 16px; color: var(--ash); }
.nextfile { padding: 0; background: var(--ink); }
.nextfile__row { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "k n go" "name name go"; column-gap: 24px; row-gap: 8px; align-items: end; padding: 40px 0; border-bottom: 1px solid var(--rule); }
.nextfile__row > .label:first-child { grid-area: k; }
.nextfile__row > .label:nth-child(2) { grid-area: n; color: var(--mag); }
.nextfile__row strong { grid-area: name; font: 800 48px/.9 var(--display); text-transform: uppercase; letter-spacing: -0.045em; transition: color var(--dur-hover) var(--ease-hover); }
.nextfile__row .btn__disc { grid-area: go; width: 64px; height: 64px; background: var(--mag); color: var(--ink); }
.nextfile__row:hover strong { color: var(--mag); }
.nextfile__row:hover .btn__disc { transform: rotate(-45deg); }

/* ---------- FLASH page ---------- */
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ash); position: relative; }
.toggle input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.toggle__ui { width: 44px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); position: relative; transition: background-color var(--dur-hover) var(--ease-hover); }
.toggle__ui::after { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ash); transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.toggle input:checked + .toggle__ui { background: var(--mag); box-shadow: none; }
.toggle input:checked + .toggle__ui::after { transform: translateX(20px); background: var(--ink); }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--mag); outline-offset: 3px; }
.toggle:hover { color: var(--bone); }
.sat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--bone); }
.sat li { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 28px 0; min-height: 230px; }
.sat li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.sat time { font: 800 40px/.9 var(--display); letter-spacing: -0.04em; color: var(--mag); text-transform: uppercase; margin-bottom: auto; padding-bottom: 28px; }
.sat strong { font: 800 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.sat li > span { font-size: 15px; color: var(--ash); }
.sat__foot { margin-top: 32px; font-size: 18px; color: var(--ash); }
.sat__foot b { color: var(--bone); font-weight: 500; }
.rets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 72px; }
.ret { display: grid; grid-template-columns: minmax(0, 4fr) auto minmax(0, 5fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 16px; align-items: center; }
.ret__mat { position: relative; background: var(--bone); padding: 8px 8px 0; rotate: -1.2deg; }
.ret:nth-child(even) .ret__mat { rotate: 1deg; }
.ret__mat img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ret__no { display: block; padding: 8px 2px 10px; font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; color: var(--mag-ink); }
.ret__arrow { font: 800 40px/1 var(--display); color: var(--mag); }
.ret__rec { display: block; }
.ret__line { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ret__line .acc b { color: var(--mag); }
.ret__name { font: 500 17px/1.3 var(--body); }

/* ---------- BOOKING page ---------- */
.rstages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rstages li { display: grid; gap: 4px; padding: 14px 14px 16px 0; position: relative; }
.rstages li + li { padding-left: 14px; border-left: 1px solid var(--rule); }
.rstages b { font: 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.rstages li > span:last-child { font-size: 14px; color: var(--ash); }
.rstages li.is-on .label { color: var(--mag); }
.rstages li.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--mag); }
.record--full { width: calc(8 / 12 * 100% + 7 / 12 * var(--gap)); margin-left: calc(2 / 12 * 100% + 2 / 12 * var(--gap)); }
.clauses2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.clauses2 li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 20px 0; border-top: 1px solid var(--rule); }
.clauses2 .label { color: var(--mag); padding-top: 4px; }
.clauses2 p { font-size: 17px; color: var(--ash); max-width: 52ch; }
.clauses2 b { color: var(--bone); font-weight: 500; }
.case--skip { padding: 64px 0; }
.skiprow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr) auto; gap: var(--gap); align-items: center; padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.skiprow strong { font: 800 28px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; transition: color var(--dur-hover) var(--ease-hover); }
.skiprow__line { font-size: 15px; color: var(--ash); }
.skiprow .btn__disc { background: var(--mag); color: var(--ink); }
.skiprow:hover strong { color: var(--mag); }
.skiprow:hover .btn__disc { transform: rotate(-45deg); }
.filed { padding: calc(var(--nav-h) + 72px) 0 var(--section); }
.record--filed { max-width: 760px; }
.record--filed .record__head { border-bottom: 2px solid var(--ink); }

/* ---------- AFTERCARE page ---------- */
.stages5 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.stages5__idx { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 32px); }
.stages5__idx a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 14px 0 14px 16px; border-top: 1px solid var(--rule); color: var(--smoke); position: relative;
  transition: color var(--dur-hover) var(--ease-hover); }
.stages5__idx li:last-child a { border-bottom: 1px solid var(--rule); }
.stages5__idx a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--mag); transform: scaleY(0); transition: transform var(--dur-hover) var(--ease-hover); }
.stages5__idx .label { grid-row: span 2; color: inherit; padding-top: 3px; }
.stages5__idx b { font: 800 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.stages5__idx a > span:last-child { font-size: 14px; }
.stages5__idx a:hover, .stages5__idx a.is-on { color: var(--bone); }
.stages5__idx a.is-on::before { transform: none; }
.stages5__idx a.is-on .label { color: var(--mag); }
.stages5__blocks { grid-column: 6 / -1; display: grid; gap: 96px; }
.stage { display: grid; gap: 22px; scroll-margin-top: calc(var(--nav-h) + 32px); }
.stage__title { font: 800 48px/.92 var(--display); text-transform: uppercase; letter-spacing: -0.045em; }
.stage__img { display: grid; gap: 10px; position: relative; }
.stage--photo > .label { order: -2; }
.stage--photo .stage__img { order: -1; margin-right: calc(-1 * var(--gutter)); }
.stage--photo .stage__title { margin-top: -1.9em; position: relative; z-index: 1; justify-self: start; background: var(--ink); padding: 16px 22px 0 0; }
.stage__over { position: absolute; right: calc(var(--gutter) + 16px); top: 12px; font-size: clamp(56px, 7vw, 120px); line-height: .8; color: var(--mag); letter-spacing: -0.05em; }
.stage--photo figcaption { position: absolute; left: 12px; top: 12px; max-width: min(40%, 420px); padding: 6px 10px; background: rgba(12, 11, 14, .78); color: var(--bone); }
.stage__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.stage__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.stage__k { padding-bottom: 10px; border-bottom: 2px solid var(--bone); color: var(--bone); }
.stage__k--no { border-color: var(--mag); color: var(--mag); }
.stage__lists li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ash); }
.watch { width: 100%; font-size: 16px; }
.watch th { text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--bone); font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.watch td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); color: var(--ash); vertical-align: top; }
.watch td:first-child { color: var(--bone); font-weight: 500; width: 32%; }
.watch td b { color: var(--mag); font-weight: 500; }
.watch__note { margin-top: 22px; }

/* ---------- STUDIO page ---------- */
.shero { position: relative; min-height: min(88svh, 860px); padding: calc(var(--nav-h) + 40px) 0 44px; display: flex; flex-direction: column; overflow: clip; isolation: isolate; }
.shero__media { position: absolute; inset: 0; z-index: -2; }
.shero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.shero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 7, 10, .55) 0%, rgba(8, 7, 10, .1) 45%, rgba(8, 7, 10, .75) 85%, var(--ink) 100%); }
.shero__in { flex: 1; display: flex; flex-direction: column; }
.shero__title { font-size: calc(100cqw / 6.75); line-height: .8; letter-spacing: -0.055em; margin: 36px 0 0 -0.03em; }
.shero__status { margin-top: auto; display: grid; gap: 16px; padding-top: 48px; }
.shero__live .status { font-size: 13px; }
.shero__hours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.shero__hours li { display: grid; gap: 4px; padding: 12px 12px 0 0; }
.shero__hours li + li { padding-left: 12px; border-left: 1px solid var(--rule); }
.shero__hours b { font-weight: 500; font-size: 15px; }
.shero__hours li.is-today .label { color: var(--mag); }
.shero__hours li.is-today b { color: var(--bone); }
.ledger--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger--six li { min-height: 240px; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.ledger--six li:nth-child(3n+1) { border-left: 0; }
.ledger--six li:nth-child(-n+3) { border-top: 0; }
.ledger--six li > span:last-child { max-width: 36ch; }
.wall--rooms { row-gap: 72px; }
.piece--room figcaption { padding-top: 12px; }
.piece--room .acc b { flex-basis: auto; }
.piece--room .acc b + span::before { content: "·"; }
.timeline { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 2px solid var(--bone); position: relative; }
.timeline li { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); }
.timeline li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.timeline li + li::before { left: -6px; }
.timeline__y { font: 800 clamp(24px, 2.3vw, 36px)/.9 var(--display); letter-spacing: -0.04em; }
.timeline .label { color: var(--mag); }
.timeline__t { font-size: 14.5px; line-height: 1.45; color: var(--ash); }
.timeline__next::before { background: var(--mag) !important; box-shadow: 0 0 0 4px rgba(255, 46, 126, .25); }
.timeline__next .timeline__y { color: var(--mag); }
.visit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.visit__hours { grid-column: 1 / span 4; display: grid; }
.visit__hours div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.visit__hours div:last-child { border-bottom: 1px solid var(--rule); }
.visit__where { grid-column: 6 / -1; display: grid; gap: 24px; justify-items: start; }
.visit__addr { font: 800 clamp(32px, 3.4vw, 52px)/.92 var(--display); text-transform: uppercase; letter-spacing: -0.045em; }
.visit__dl { display: grid; width: 100%; }
.visit__dl div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.visit__dl a { transition: color var(--dur-hover) var(--ease-hover); }
.visit__dl a:hover { color: var(--mag); }

/* ---------- TERMS page ---------- */
.tclauses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.tclauses__idx { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 32px); }
.tclauses__idx a { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ash); transition: color var(--dur-hover) var(--ease-hover); }
.tclauses__idx a:hover { color: var(--bone); }
.tclauses__idx .label { color: var(--mag); }
.tclauses__text { grid-column: 5 / span 7; display: grid; gap: 40px; }
.tclauses__text section { scroll-margin-top: calc(var(--nav-h) + 32px); }
.tclauses__text h3 { display: grid; gap: 8px; font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: 14px; }
.tclauses__text h3 .label { color: var(--mag); }
.tclauses__text p { max-width: 68ch; color: var(--ash); }

/* ---------- 404 ---------- */
.err { position: relative; min-height: 100svh; padding-top: var(--nav-h); display: flex; flex-direction: column; overflow: clip; }
.err .hero__msg { grid-column: 8 / -1; }
.err .frag--wea { grid-column: 1 / span 6; }
@media (min-width: 768px) { .err .frag { --size: min(calc(var(--row) * .92), 15.6vw); } }
.err__lede { font: 500 22px/1.35 var(--body); letter-spacing: -0.01em; max-width: 30ch; }
.err__rooms { padding-top: 32px; padding-bottom: 48px; display: grid; gap: 20px; }
.err__rooms ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.err__rooms li a { display: grid; gap: 6px; padding: 14px 12px 14px 0; transition: color var(--dur-hover) var(--ease-hover); }
.err__rooms li + li a { padding-left: 12px; border-left: 1px solid var(--rule); }
.err__rooms b { font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: -0.03em; }
.err__rooms .btn__disc { width: 32px; height: 32px; background: var(--ink-3); color: var(--bone); }
.err__rooms li a:hover { color: var(--mag); }
.err__rooms p a { color: var(--bone); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .sum, .archive__sum { grid-column: 1 / span 5; }
  .room__side, .archive__intro { grid-column: 7 / -1; }
  .hero__msg { grid-column: 7 / -1; }
  .hero__lede { font-size: 16px; }
  .books { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
  .books__head { grid-column: 1 / -1; }
  .booking__side { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .record-wrap { grid-column: 1 / -1; }
  .record--full { width: auto; margin-left: 0; }
  .stages { grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); }
  .stages li:last-child { border-bottom: 0; }
  .ledger--four { grid-template-columns: repeat(2, 1fr); }
  .ledger--four li:nth-child(3) { border-left: 0; }
  .ledger--four li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .aftercare__k { grid-column: 1 / -1; margin-bottom: 20px; }
  .aftercare__steps { grid-column: 1 / -1; }
  .aftercare__btns { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; margin-top: 28px; }
  .drawer__intro { grid-column: 1 / -1; grid-row: auto; }
  .drawer__title { font-size: calc(100cqw / 11); }
  .drawer__pick, .drawer__tabs, .drawer__well { grid-column: 1 / -1; }
  /* .label drops to 10.5px in a later media block, so this needs to out-specify it */
  .drawer__pick.label { font-size: 13px; padding: 8px 14px; }
  .mats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mats--pre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mat--retired { grid-column: span 1; }
  .foot__card { grid-column: 1 / -1; }
  .foot__index { grid-column: 1 / -1; }
  .frow__main { grid-column: 3 / span 6; }
  .frow__photo { grid-column: 9 / -1; }
  .words__detail { grid-column: 1 / span 7; }
  .words__text { grid-column: 5 / -1; }
  .words__side { grid-column: 1 / -1; grid-row: 4; margin-top: 56px; grid-template-columns: 1fr 1fr; }
  .sat { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .sat li:nth-child(4) { padding-left: 0; border-left: 0; }
  .rets { column-gap: 32px; }
  .stages5__idx { grid-column: 1 / span 4; }
  .stages5__blocks { grid-column: 5 / -1; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
  .timeline__y { font-size: 36px; }
  .timeline li:nth-child(5) { border-left: 0; padding-left: 0; }
  .timeline li:nth-child(5)::before { left: 0; }
  .err__rooms ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tclauses__idx { grid-column: 1 / span 4; }
  .tclauses__text { grid-column: 6 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .label, .acc, .room__strip, .afile__strip { font-size: 10.5px; }
  .hero__grid, .err__grid { --row: auto; grid-template-rows: none; padding-top: 12px; display: flex; flex-direction: column; container-type: inline-size; }
  .hero__row { display: contents; }
  .frag { line-height: .78; order: 1; display: block; border-bottom: 1px solid var(--rule); padding-top: 10px; margin-bottom: 0; }
  .frag--bad { --size: calc(100cqw / 3.5); }
  .frag--wea { --size: calc(100cqw / 4.1); }
  .frag--ther { --size: calc(100cqw / 4.62); text-align: right; }
  .hero__msg { order: 2; padding: 22px 0 8px; }
  .hero__lede { font-size: 16.5px; }
  .hero__coord { display: none; }
  .hero__note { order: 3; padding: 18px 0 8px; grid-template-columns: 1fr; }
  .phases { display: none; }
  .books { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding-top: 22px; }
  .books__row { padding-left: 12px; }
  .books__name { font-size: 15.5px; }
  .books__style { font-size: 13px; margin-bottom: 6px; }
  .status { font-size: 10px; white-space: normal; line-height: 1.3; }

  .room { padding: calc(var(--nav-h) + 28px) 0 56px; }
  .room__title { margin-top: 20px; }
  .room__grid { margin-top: 32px; row-gap: 32px; }
  .sum, .archive__sum, .room__side, .archive__intro { grid-column: 1 / -1; }
  .sum dd { font-size: 22px; }
  .room__intro, .archive__intro p { font-size: 17px; }
  .case__label { margin-bottom: 36px; }
  .archive__head { margin-bottom: 56px; }
  .archive__intro { margin-top: 24px; }
  .archive__sum { margin-top: 28px; }
  .chip { height: 34px; padding: 0 12px; font-size: 11px; }

  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 48px; }
  .piece { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .piece[data-p="1"] { grid-column: 2 / -1 !important; }
  .piece[data-p="2"] { grid-column: 1 / span 5 !important; }
  .piece--feature { grid-column: 1 / -1 !important; }
  .archive__foot { flex-direction: column; align-items: flex-start; margin-top: 56px; }

  .drawer__tabs { grid-template-columns: 1fr 1fr; }
  .tab:nth-child(3) { padding-left: 0; border-left: 0; }
  .tab b { font-size: 16px; }
  .card__body { grid-template-columns: 1fr; padding: 16px; }
  .card__photo { grid-row: auto; aspect-ratio: 4 / 3.4; }
  .card__strip { padding: 10px 16px; font-size: 10px; }
  .card__name { font-size: 40px; }
  .drawer__lip span:last-child { display: none; }

  .mats, .mats--pre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mats--artist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat--feature { grid-column: 1 / -1; grid-row: auto; }
  .mat--feature .mat__img { aspect-ratio: 4 / 5; }
  .mat--retired { grid-column: 1 / -1; }
  .mat__tile { padding: 6px 6px 0; }
  .mat__bar { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 9.5px; padding: 8px 0 10px; }
  .mat__bar span { text-align: left; }
  .mat__bar em { font-size: 17px; }
  .mat__info { padding: 8px 8px 10px; }
  .mat__info b { font-size: 13px; }
  .mat__info span { font-size: 9.5px; }
  .mat:hover .mat__tile { transform: none; }
  .mat__tile--end { padding: 16px; min-height: 200px; }
  .mat__endno { font-size: 44px; }
  .mat__tile--end strong { font-size: 19px; }
  .stamp { font-size: 20px; padding: 6px 10px 5px; }
  .fpre__head { margin-bottom: 40px; row-gap: 28px; }
  .fpre__title, .fpre__rules { grid-column: 1 / -1; }
  .fpre__title { font-size: calc(100cqw / 7.2); }

  .booking__title { font-size: calc(100cqw / 8.2); white-space: normal; }
  .stages { grid-template-columns: 1fr; }
  .stages li:last-child { border-bottom: 1px solid var(--rule); }
  .record__form { grid-template-columns: 1fr; }
  .cell { grid-column: 1 / -1; padding: 14px 16px 16px; }
  .cell--l { border-right: 0; }
  .record__head p { padding: 14px 16px; }
  .record__head b { font-size: 17px; }
  .record__no b { font-size: 17px; }
  .record__foot { padding: 16px; }
  .record__foot .btn { width: 100%; justify-content: space-between; }
  .record__msg { padding: 0 16px; }

  .tilt { margin-left: 0; transform: perspective(700px) rotateY(6deg); }
  .scrub { font-size: calc(100cqw / 14.8); }
  .proof__main figcaption { margin-left: 0; }
  .proof__label { margin-bottom: 48px; }
  .proof__more { grid-template-columns: 1fr; }
  .note, .note + .note { padding: 20px 0; border-left: 0; }
  .note + .note { border-top: 1px solid var(--rule-ink); }
  .note p { font-size: 19px; }

  .studio__band { height: 78svh; min-height: 480px; }
  .studio__photo img { object-position: 42% 50%; }
  .ledger--four, .ledger--six { grid-template-columns: 1fr; }
  .ledger--four { margin-top: -80px; }
  .ledger li, .ledger--six li { min-height: 0; padding: 20px; border-left: 0 !important; }
  .ledger li + li { border-top: 1px solid var(--rule) !important; }
  .ledger .label { padding-bottom: 14px; }
  .aftercare__steps { grid-template-columns: 1fr; }
  .aftercare__btns { grid-auto-flow: row; }

  .close__title { font-size: calc(100cqw / var(--n, 9.35)); }
  .close__line, .close__ctas { grid-column: 1 / -1; justify-self: start; }
  .close__ctas { margin-top: 24px; justify-content: flex-start; }
  .foot__lists { grid-template-columns: 1fr; }
  .foot__card { padding: 22px 18px 14px; }

  .reg thead { display: none; }
  .reg, .reg tbody { display: block; }
  .reg tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .reg td { padding: 0; border: 0; }
  .reg td:first-child { padding-left: 0; }
  .reg td:nth-child(2) { color: var(--bone); }
  .reg td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; font-size: 14px; }
  .reg td.reg__style, .reg td:nth-child(7) { display: none; }
  .reg td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .reg td:nth-child(5)::after { content: "H"; }
  .reg td:nth-child(6) { grid-column: 3; grid-row: 2; text-align: right; }
  .rv { width: 100vw; max-height: 100svh; height: 100svh; }
  .rv__in { padding: 14px 16px 24px; }
  .rv__frame, .rv__rec { grid-column: 1 / -1; }
  .rv__frame { max-height: 52svh; margin-bottom: 20px; }

  .frow { position: relative; top: auto; min-height: 0; padding-bottom: 32px; row-gap: 20px; }
  .frow__no, .frow--alt .frow__no { grid-column: 1 / -1; grid-row: auto; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: start; text-align: left; }
  .frow__art { font-size: 30px; }
  .frow__art br { display: none; }
  .frow__main, .frow--alt .frow__main, .frow__photo, .frow--alt .frow__photo { grid-column: 1 / -1; grid-row: auto; }
  .frow__photo { order: -1; }
  .frow__strip { margin-bottom: 16px; }
  .frow__photo .frame { max-height: none; }
  .terms > div { row-gap: 10px; }
  .terms dt, .terms dd, .terms dd.terms__do { grid-column: 1 / -1; justify-self: start; }
  .legend { gap: 10px 16px; }

  .afile { display: block; min-height: 0; padding: 0 0 40px; }
  .afile__photo { position: relative; width: 100%; height: 62svh; }
  .afile__body { padding: 24px var(--gutter) 0; gap: 22px; }
  .afile__name { font-size: calc(100cqw / var(--nm)); margin-top: -0.62em; }
  .afile__sur { margin-left: 0; }
  .afile__status b { font-size: 26px; }
  .words__detail { grid-column: 1 / -1; grid-row: 2; margin-right: calc(-1 * var(--gutter)); }
  .words__text { grid-column: 1 / -1; grid-row: 3; margin: -64px 16px 0 0; padding: 24px 22px 26px; box-shadow: 10px 10px 0 var(--mag); }
  .words__text p { font-size: 19px; }
  .words__side { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr; margin-top: 48px; }
  .stage--photo .stage__title { margin-top: -1.5em; }
  .stage--photo figcaption { display: none; }
  .recs__title { margin-bottom: 48px; }
  .notes3 { grid-template-columns: 1fr; }
  .notes3 li, .notes3 li + li { padding: 20px 0; border-left: 0; min-height: 0; }
  .notes3 li + li { border-top: 1px solid var(--rule); }
  .notes3 .label { padding-bottom: 12px; }
  .nextfile__row strong { font-size: 30px; }
  .nextfile__row .btn__disc { width: 48px; height: 48px; }

  .sat { grid-template-columns: 1fr; }
  .sat li, .sat li + li { padding: 18px 0; border-left: 0; min-height: 0; display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; }
  .sat li + li { border-top: 1px solid var(--rule); }
  .sat time { grid-row: span 2; font-size: 28px; padding: 0; margin: 0; }
  .rets { grid-template-columns: 1fr; row-gap: 48px; }
  .ret { grid-template-columns: minmax(0, 4fr) auto minmax(0, 5fr); column-gap: 12px; }
  .ret__arrow { font-size: 26px; }
  .rstages b { font-size: 16px; }
  .clauses2 { grid-template-columns: 1fr; }
  .clauses2 li { grid-template-columns: 56px 1fr; }
  .skiprow { grid-template-columns: 1fr auto; row-gap: 10px; }
  .skiprow > .label { grid-column: 1 / -1; }
  .skiprow strong { font-size: 22px; grid-column: 1; }
  .skiprow__line { grid-column: 1; }
  .skiprow .btn__disc { grid-column: 2; grid-row: 2 / span 2; }

  .stages5__idx { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .stages5__blocks { grid-column: 1 / -1; gap: 64px; }
  .stage__title { font-size: 36px; }
  .stage__lists { grid-template-columns: 1fr; }
  .watch thead { display: none; }
  .watch, .watch tbody, .watch tr, .watch td { display: block; width: auto !important; }
  .watch tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .watch td { padding: 2px 0; border: 0; }

  .shero { min-height: 82svh; }
  .shero__title { font-size: calc(100cqw / 4.3); }
  .shero__hours { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
  .shero__hours li:nth-child(5) { padding-left: 0; border-left: 0; }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--bone); row-gap: 0; }
  .timeline li, .timeline li + li { padding: 0 0 26px 22px; border-left: 0; display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; }
  .timeline li::before, .timeline li + li::before, .timeline li:nth-child(5)::before { left: -7px; top: 4px; }
  .timeline__y { font-size: 26px; grid-row: span 2; }
  .visit__hours, .visit__where { grid-column: 1 / -1; }
  .visit__where { margin-top: 40px; }
  .visit__dl div { grid-template-columns: 90px 1fr; }

  .tclauses__idx { display: none; }
  .tclauses__text { grid-column: 1 / -1; }

  .err .hero__msg { order: 4; padding-top: 24px; }
  .err__rooms ul { grid-template-columns: 1fr 1fr; }
  .err__rooms li:nth-child(odd) a { padding-left: 0; border-left: 0; }
  .err__rooms li a { border-top: 1px solid var(--rule); }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .js .hero:not(.is-in) .frag--bad, .js .err:not(.is-in) .frag--bad { transform: translateX(40vw); }
  .js .hero:not(.is-in) .frag--ther, .js .err:not(.is-in) .frag--ther { transform: translateX(-40vw); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* ---------- print: the care sheet on one A4 page ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; color: #0C0B0E !important; font-size: 10.5pt; }
  .nav, .menu, .skip, .foot, .close, .case--watch, .room__side, .room__grid, .stages5__idx, .stage__img, .case__label { display: none !important; }
  .room { padding: 0 0 6mm; border: 0; }
  .room__title { font-size: 34pt; color: #0C0B0E; margin: 0; }
  .room__pre, .rc { color: #C4125A !important; }
  .room__strip { color: #0C0B0E; border-color: #0C0B0E; }
  .case { padding: 0; border: 0; }
  .stages5, .stages5__blocks { display: block; }
  .stage { display: block; break-inside: avoid; margin-bottom: 4mm; }
  .stage .label, .stage__lists li { color: #0C0B0E !important; }
  .stage__title { font-size: 15pt; margin: 1mm 0 2mm; color: #0C0B0E; }
  .stage__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .stage__lists li { padding: 1mm 0; border-color: #ccc; font-size: 9.5pt; }
  .stage__k { border-color: #0C0B0E !important; color: #0C0B0E !important; padding-bottom: 1mm; }
  .js .enter, .js .reveal { opacity: 1 !important; transform: none !important; }
}