/* MAISON ANONYMOWL — Collection 01: Silence. Archetype M, THE MAISON.
   Act I (Day) on cool pale paper measured from the muse render's backdrop (220,220,221); Act II (Night) on #000.
   Fonts: Ibarra Real Nova (roman + italic, one serif voice), Gothic A1 (tiny caps, body, CA).
   Square corners everywhere; hairlines instead of boxes; gold is light only (stitches, focus, underlines).
   Motion: everything that moves is gated on html.js:not(.rm) (boot.js). */
:root {
  --paper: #dcdcdd;
  --ink: #0e0d0b;
  --mute: #55524c;
  --black: #000;
  --bone: #ece8df;
  --mute-n: #9a958c;
  --gold: #e1b883;
  --hair-d: rgba(14, 13, 11, .16);
  --hair-n: rgba(236, 232, 223, .22);
  --gut: clamp(16px, 2.8vw, 40px);
  --nav-h: 56px;
  --serif: 'Ibarra Real Nova', 'Gothic A1', Georgia, serif;
  --sans: 'Gothic A1', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --k: .1334;
}
@media (max-width: 599px) { :root { --nav-h: 52px; } }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.stockists a.stk[hidden] { display: inline-flex !important; }    /* pre-launch: the marks show as plain text, no href */
html { scroll-behavior: smooth; }
html.rm { scroll-behavior: auto; }
html.menu-open { overflow: hidden; }
body { margin: 0; background-color: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
section[id], #label, #join { scroll-margin-top: calc(var(--nav-h) + 16px); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.night :focus-visible, .menu :focus-visible, .foot :focus-visible, html.is-night .nav :focus-visible { outline-color: var(--gold); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 16px; background-color: var(--ink); color: var(--paper); font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- shared ---------- */
.tc { font: 500 12px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mute { color: var(--mute); }
.mute-n { color: var(--mute-n); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 0; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
html.js:not(.rm) .btn { transition: background-color .2s, color .2s, box-shadow .2s; }
.btn--sm { min-height: 40px; padding: 0 18px; }
.btn--ink { background-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--bone { background-color: var(--bone); color: var(--black); }
.btn--bone:hover { background-color: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.arr { font-family: var(--sans); }
.u { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.u:hover { text-decoration-color: var(--gold); }
.cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; }
.cap-v, .cap-d { font: italic 400 16px/1.4 var(--serif); }
.cap-d { color: var(--mute); }
.night .cap-d { color: var(--mute-n); }
.statement { font: italic 400 clamp(24px, 1.2vw + 18px, 36px)/1.2 var(--serif); text-wrap: balance; }
.body { font-size: clamp(16px, .25vw + 15px, 18px); line-height: 1.6; max-width: 40ch; text-wrap: pretty; }
.look-t { font: italic 400 clamp(40px, 3.6vw + 20px, 88px)/1 var(--serif); letter-spacing: -.005em; text-wrap: balance; }

/* ---------- the blank label (signature device) ---------- */
.lbl { display: inline-block; position: relative; flex: none; vertical-align: middle; background-color: var(--bone);
  background-image: repeating-linear-gradient(90deg, rgba(14, 13, 11, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(14, 13, 11, .03) 0 1px, transparent 1px 4px);
  box-shadow: 0 1px 0 rgba(14, 13, 11, .25); }
.lbl::before, .lbl::after { content: ''; position: absolute; top: 50%; width: 1.5px; height: 15px; transform: translateY(-50%);
  background: repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 9px); box-shadow: 0 0 0 .5px rgba(122, 94, 58, .35); }
.lbl::before { left: 8px; }
.lbl::after { right: 8px; }
.top .lbl, .house .lbl, .look-mask .lbl, .dusk-day .lbl { background-color: var(--ink);
  background-image: repeating-linear-gradient(90deg, rgba(236, 232, 223, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(236, 232, 223, .04) 0 1px, transparent 1px 4px); }
.lbl--s { width: 40px; height: 14px; }
.lbl--s::before, .lbl--s::after { height: 8px; left: 5px; }
.lbl--s::after { left: auto; right: 5px; }
.lbl--m { width: 72px; height: 26px; }
.lbl--i { width: 88px; height: 30px; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); background-color: var(--paper); color: var(--ink); border-bottom: 1px solid transparent; }
html.js:not(.rm) .nav { transition: background-color .4s, color .4s, border-color .4s; }
html.docked .nav { border-bottom-color: var(--hair-d); }
html.is-night .nav { background-color: var(--black); color: var(--bone); border-bottom-color: var(--hair-n); }
html.is-night .nav .btn--ink { background-color: var(--bone); color: var(--black); }
html.is-night .nav .btn--ink:hover { background-color: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--bone); }
.nav-l { white-space: nowrap; }
.nav-l-short { display: none; }
.nav-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 15px/1 var(--serif); letter-spacing: .18em; text-decoration: none; white-space: nowrap; padding: 14px 0; opacity: 0; visibility: hidden; }
html.docked .nav-mark { opacity: 1; visibility: visible; }
html.js:not(.rm) .nav-mark { transition: opacity .2s, visibility .2s; }
.nav-r { display: flex; align-items: center; gap: 24px; }
.burger { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 1023px) {
  .nav-l-long { display: none; }
  .nav-l-short { display: inline; }
  .nav .nav-x { display: none; }
}
@media (max-width: 599px) {
  .nav .nav-buy { display: none; }
  html.js:not(.rm) .nav-l { transition: opacity .2s; }
  html.docked .nav-l { opacity: 0; }
}

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 100; padding: var(--gut); background-color: var(--black); color: var(--bone); overflow-y: auto; }
.menu:not([hidden]) { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-close { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.menu-list { align-self: center; }
.menu-list a { display: inline-block; font: italic 400 clamp(28px, 4vw, 48px)/1.25 var(--serif); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.menu-list a:hover, .menu-list a:focus-visible { border-bottom-color: var(--gold); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
html.js:not(.rm) .menu:not([hidden]) { animation: fade .24s var(--ease); }
html.js:not(.rm) .menu:not([hidden]) .menu-list li { animation: rise .5s var(--ease) both; }
html.js:not(.rm) .menu-list li:nth-child(2) { animation-delay: .03s; }
html.js:not(.rm) .menu-list li:nth-child(3) { animation-delay: .06s; }
html.js:not(.rm) .menu-list li:nth-child(4) { animation-delay: .09s; }
html.js:not(.rm) .menu-list li:nth-child(5) { animation-delay: .12s; }
html.js:not(.rm) .menu-list li:nth-child(6) { animation-delay: .15s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- #top: the muse ---------- */
.top { padding-top: calc(var(--nav-h) + 16px); padding-bottom: clamp(40px, 5vw, 72px); background-color: var(--paper); }
.wm-box { position: relative; container-type: inline-size; padding: 0 var(--gut); overflow-x: clip; }
.wm { font: 400 clamp(28px, calc(var(--k) * 98.5cqi), 220px)/.8 var(--serif); letter-spacing: -.01em; white-space: nowrap; text-align: center; color: inherit; }
.wm-probe { position: absolute; left: 0; top: 0; visibility: hidden; font: 400 100px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; pointer-events: none; }
.hair { height: 1px; margin: 12px var(--gut) 16px; background-color: var(--hair-d); }
.hero-row { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: clamp(32px, 3.4vw, 56px); padding: 0 var(--gut); align-items: start; }
.flank { display: flex; flex-direction: column; }
.flank-l { text-align: right; align-items: flex-end; }
.flank-r { text-align: left; align-items: flex-start; }
.beat { margin-top: clamp(64px, 16svh, 180px); font: italic 400 clamp(24px, 1.2vw + 18px, 44px)/1.15 var(--serif); text-wrap: balance; }
.hero-photo { position: relative; }
.hero-photo img { height: clamp(420px, calc(100svh - var(--nav-h) - 10.5vw - 10px), 980px); width: auto; }
.hero-photo .lbl--m { position: absolute; top: 0; right: 12px; transform: translateY(-50%); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.hero-ca { margin-top: 16px; display: grid; gap: 2px; max-width: 300px; }
.ca-v { font: 500 12px/1.5 var(--sans); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }

@media (max-width: 1023px) {
  .hero-row { grid-template-columns: 1fr 1fr; column-gap: 24px; grid-template-areas: "cl cr" "ph ph" "b1 b2" "cta cta" "ca ca"; text-align: center; }
  .flank { display: contents; }
  .flank-l > .tc { grid-area: cl; text-align: left; }
  .flank-r > .tc { grid-area: cr; text-align: right; }
  .hero-photo { grid-area: ph; justify-self: center; margin-top: 20px; }
  .hero-photo img { height: min(62svh, 900px); }
  .beat { margin-top: 20px; font-size: clamp(24px, 3.4vw, 30px); }
  .beat-1 { grid-area: b1; text-align: right; }
  .beat-2 { grid-area: b2; text-align: left; }
  .cta { grid-area: cta; justify-content: center; }
  .hero-ca { grid-area: ca; justify-self: center; text-align: center; }
}
@media (max-width: 599px) {
  .top { padding-top: calc(var(--nav-h) + 12px); }
  .hair { margin: 10px var(--gut); }
  .hero-row { grid-template-columns: 1fr; grid-template-areas: "cl" "ph" "b1" "b2" "cta" "ca" "cr"; }
  .flank-l > .tc, .flank-r > .tc { text-align: center; }
  .flank-r > .tc { margin-top: 18px; }
  .hero-photo { margin-top: 12px; }
  .hero-photo img { height: clamp(240px, calc(100svh - 356px), calc((100vw - 2 * var(--gut)) * 1.5)); }
  .hero-photo .lbl--m { width: 60px; height: 22px; right: 10px; }
  .beat { margin-top: 12px; font-size: 26px; }
  .beat-1, .beat-2 { text-align: center; }
  .beat-2 { margin-top: 2px; }
  .cta .btn { width: 100%; }
}

/* ---------- #house ---------- */
.house { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: clamp(80px, 10vw, 140px) var(--gut); background-color: var(--paper); border-top: 1px solid var(--hair-d); }
.house-k { grid-column: 1 / 4; padding-top: 12px; }
.house-in { grid-column: 4 / 11; }
.house h2 { font: 400 clamp(28px, 2vw + 18px, 52px)/1.1 var(--serif); text-wrap: balance; }
.house .body { margin-top: 20px; }
.credits { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); margin-top: 40px; }
.credits div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair-d); }
.credits dt { color: var(--mute); }
.credits dd { font: italic 400 19px/1.3 var(--serif); text-align: right; }
.label-row { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.label-row em { font: italic 400 19px/1.3 var(--serif); }
@media (max-width: 1023px) { .house-k, .house-in { grid-column: 1 / -1; } .house-k { padding: 0 0 16px; } }
@media (max-width: 599px) { .credits { grid-template-columns: 1fr; } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: 14px 0; border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); background-color: var(--paper); }
.marquee-in { display: flex; width: max-content; }
.marquee-in span { flex: none; padding-right: 8px; white-space: nowrap; font: 500 12px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
html.js:not(.rm) .marquee-in { animation: marquee 60s linear infinite; }
.marquee:hover .marquee-in { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- looks ---------- */
.look { padding: clamp(64px, 8vw, 120px) var(--gut); background-color: var(--paper); }
.night { background-color: var(--black); color: var(--bone); }
.look-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; margin-bottom: clamp(24px, 3vw, 40px); }
.look-head > .tc { grid-column: 1 / 4; }
.look-head > .look-t { grid-column: 4 / 13; }
.plate-3x2 { width: min(100%, calc((100svh - 120px) * 1.5)); margin: 0 auto; }
.plate-3x2 img { width: 100%; }
.look-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; margin-top: 16px; }
.look-foot > :first-child { grid-column: 1 / 7; }
.look-foot > .statement { grid-column: 8 / 13; }
.look-mask .look-foot { width: min(100%, calc((100svh - 120px) * 1.5)); margin-left: auto; margin-right: auto; }
.statement-r { text-align: right; }
.look-silence .body { margin-top: 12px; }
.diptych { display: flex; gap: var(--gut); align-items: flex-start; }
.diptych .d1 { flex: 1.5 1 0; }
.diptych .d2 { flex: 1 1 0; }
.diptych img { width: 100%; }
.diptych figcaption { margin-top: 10px; }
.night-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
.night-photo { grid-column: 2 / 7; justify-self: center; }
.night-photo img { height: min(calc(100svh - 120px), 900px); width: auto; padding: 16px; background-color: var(--bone); }
.night-t { grid-column: 8 / 13; }
.night-t .look-t { margin: 8px 0 20px; }
.night-t .statement { font-size: clamp(28px, 2vw + 18px, 52px); margin-bottom: 20px; }
@media (max-width: 1023px) {
  .look-head > .tc, .look-head > .look-t { grid-column: 1 / -1; }
  .look-foot > :first-child, .look-foot > .statement { grid-column: 1 / -1; }
  .look-foot > .statement { margin-top: 16px; }
  .statement-r { text-align: left; }
  .night-photo { grid-column: 1 / 7; }
  .night-t { grid-column: 7 / 13; }
  .night-photo img { height: auto; width: 100%; }
}
@media (max-width: 700px) {
  .diptych { flex-direction: column; }
  .diptych .d1, .diptych .d2 { flex: none; width: 100%; }
  .night-photo, .night-t { grid-column: 1 / -1; }
  .night-t { margin-top: 24px; }
  .night-photo img { padding: 10px; }
}

/* ---------- dusk: the paper changes once ---------- */
.dusk-day { padding: 14svh var(--gut) 6svh; text-align: center; background-color: var(--paper); }
.dusk-fade { height: 22svh; background: linear-gradient(var(--paper), var(--black)); }
.dusk-night { padding: 6svh var(--gut) 14svh; text-align: center; background-color: var(--black); color: var(--bone); }
.dusk-night .look-t { margin-top: 12px; }

/* ---------- boutique ---------- */
.boutique { padding: clamp(88px, 10vw, 160px) var(--gut); }
.boutique .look-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.bq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.bq-photo { grid-column: 1 / 6; }
.bq-photo img { width: 100%; }
.bq-photo figcaption { margin-top: 10px; }
.steps { grid-column: 7 / 13; }
.steps li { display: grid; grid-template-columns: clamp(84px, 8vw, 124px) 1fr; column-gap: 16px; padding: 24px 0; border-top: 1px solid var(--hair-n); }
.steps .num { font: 400 clamp(44px, 3vw + 24px, 72px)/.9 var(--serif); color: var(--bone); white-space: nowrap; }
.steps h3 { font: 400 22px/1.25 var(--serif); margin-bottom: 6px; }
.steps p { font-size: 16px; line-height: 1.6; }
.steps .u { min-height: 0; }
.pl { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; filter: brightness(0) invert(92%) sepia(12%); }
.bq-col { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 760px; margin: clamp(64px, 8vw, 120px) auto 0; text-align: center; }
.biglabel { width: 100%; }
.biglabel-in { position: relative; display: grid; min-height: 220px; padding: 40px 56px; color: var(--ink); background-color: #f1eee7;
  background-image: repeating-linear-gradient(90deg, rgba(14, 13, 11, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(14, 13, 11, .03) 0 1px, transparent 1px 4px);
  box-shadow: 0 1px 0 rgba(236, 232, 223, .3); }
.biglabel-in::before, .biglabel-in::after { content: ''; position: absolute; top: 50%; width: 2px; height: 56px; transform: translateY(-50%); background: repeating-linear-gradient(to bottom, var(--gold) 0 10px, transparent 10px 16px); box-shadow: 0 0 0 .5px rgba(122, 94, 58, .45); }
.biglabel-in::before { left: 18px; }
.biglabel-in::after { right: 18px; }
.face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.face .tc { color: var(--mute); }
.care { font: italic 400 26px/1.25 var(--serif); text-wrap: balance; }
.bl-ca { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; }
.bl-ca .ca-v { font: 500 clamp(14px, 1vw + 10px, 20px)/1.4 var(--sans); letter-spacing: .04em; }
.ca-soon { font: italic 400 20px/1.3 var(--serif); }
.face--back { visibility: hidden; }
[data-side="back"] .face--back { visibility: visible; }
.face--front { background-color: #f1eee7; clip-path: inset(0); }
[data-side="back"] .face--front { clip-path: inset(0 0 0 100%); visibility: hidden; pointer-events: none; }
html.js:not(.rm) .face--front { transition: clip-path .7s var(--ease), visibility 0s linear .7s; }
html.js:not(.rm) [data-side="front"] .face--front { transition: clip-path .7s var(--ease), visibility 0s; }
.biglabel figcaption { margin-top: 16px; font: italic 400 18px/1.4 var(--serif); }
.product { width: 100%; }
.product div, details { border-top: 1px solid var(--hair-n); }
.product div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
.product dt { color: var(--mute-n); }
.product dd { font: italic 400 19px/1.3 var(--serif); text-align: right; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.buy-row:not(:has(a:not([hidden]))) { display: none; }
.stk-h { margin-top: 12px; }
.stockists { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.stk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mute-n); font: 400 12px/1 var(--sans); text-decoration: none; }
a.stk[href] { color: var(--bone); }
a.stk[href]:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.stk .pl { width: 22px; height: 22px; }
details { width: 100%; text-align: left; }
details:last-child { border-bottom: 1px solid var(--hair-n); }
summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font: 400 18px/1 var(--sans); }
html.js:not(.rm) summary::after { transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 18px; }
@media (max-width: 1023px) { .bq-photo { grid-column: 1 / 6; } .steps { grid-column: 6 / 13; } }
@media (max-width: 700px) {
  .bq-photo, .steps { grid-column: 1 / -1; }
  .steps { margin-top: 32px; }
  .steps li { grid-template-columns: 64px 1fr; }
  .biglabel-in { padding: 28px 30px; min-height: 180px; }
  .biglabel-in::before { left: 10px; }
  .biglabel-in::after { right: 10px; }
  .care { font-size: 22px; }
  .stockists { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px 24px; }
}

/* ---------- finale ---------- */
.finale { position: relative; }
.finale-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: clip; }
.finale-frame img { width: 100%; height: 100%; object-fit: cover; }
html.js:not(.rm) .finale-frame img { transform: scale(1.05) translateY(calc(var(--fp, 0) * -2%)); }
.finale-wm { position: absolute; left: var(--gut); right: var(--gut); top: 81.5%; container-type: inline-size; overflow-x: clip; }
.finale-wm .wm { color: var(--bone); }
.finale-line { position: absolute; z-index: 2; left: var(--gut); top: 9%; max-width: 36%; }
.bow { margin-top: 6px; font: italic 400 clamp(26px, 1.6vw + 14px, 40px)/1.2 var(--serif); }
html.js:not(.rm) .finale-wm { opacity: 0; transform: translateY(12px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
html.js:not(.rm) .finale-wm.in { opacity: 1; transform: none; }
@media (max-width: 1023px) { .finale-line { position: static; max-width: none; padding: 64px var(--gut) 32px; text-align: center; background-color: var(--black); } }

/* ---------- footer: the care label ---------- */
.foot { padding: clamp(64px, 7vw, 110px) var(--gut) 40px; border-top: 1px solid var(--hair-n); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gut); align-items: start; }
.foot-label { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footlabel { width: min(100%, 320px); }
.lbl--f { min-height: 130px; padding: 20px 34px; }
.lbl--f::before, .lbl--f::after { height: 40px; }
.lbl--f .care { font-size: 19px; }
.lbl--f .face .tc { color: var(--mute); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.foot-btns { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.legal { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--mute-n); max-width: 44ch; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--hair-n); }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-r { grid-column: 1 / -1; } }
@media (max-width: 599px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- sound caption ---------- */
.sound-cap { position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 110; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px 16px; background-color: var(--paper); color: var(--ink); font: italic 400 18px/1.3 var(--serif); text-align: center; opacity: 0; pointer-events: none; }
html.is-night .sound-cap, html.menu-open .sound-cap { background-color: var(--black); color: var(--bone); }
.sound-cap.show { opacity: 1; }
html.js:not(.rm) .sound-cap { transition: opacity .3s; }

/* ---------- motion: entrance + reveals ---------- */
html.js:not(.rm) .hero-photo img { animation: photoIn 1.6s var(--ease) .15s both; }
html.js:not(.rm) .wm-in { display: inline-block; animation: rise 1.2s var(--ease) both; }
html.js:not(.rm) .flank > .tc { animation: fade .8s var(--ease) .4s both; }
html.js:not(.rm) .beat-1 { animation: rise10 .9s var(--ease) .9s both; }
html.js:not(.rm) .beat-2 { animation: rise10 .9s var(--ease) 1.6s both; }
html.js:not(.rm) .cta { animation: fade .8s var(--ease) 2s both; }
@keyframes photoIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes rise10 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.js:not(.rm) .rv { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 1.1s var(--ease), opacity 1.1s var(--ease); }
html.js:not(.rm) .rv.in { clip-path: inset(0); opacity: 1; }

/* ---------- no JS / failed JS ---------- */
html:not(.js) .burger, html.broken .burger, html:not(.js) .sound, html.broken .sound, html:not(.js) .motion, html.broken .motion,
html:not(.js) .open-label, html.broken .open-label { display: none !important; }
html:not(.js) .nav-mark, html.broken .nav-mark { opacity: 1; visibility: visible; }

/* ---------- 404 ---------- */
.nf-body { background-color: var(--black); color: var(--bone); }
.nf-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .55; }
.nf { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px var(--gut); text-align: center; }
.nf h1 { font: italic 400 clamp(36px, 5vw, 56px)/1.1 var(--serif); }
.nf-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 2; height: 56px; display: flex; align-items: center; justify-content: center; }
.nf-nav a { font: 400 15px/1 var(--serif); letter-spacing: .18em; text-decoration: none; }

/* =====================================================================
   REVIEW FIXES — token-site-review wf_3288fd3b-185 (2026-09-27). Numbers = research/review_index.txt.
   ===================================================================== */
:root { --gut: max(clamp(16px, 2.8vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }   /* 18 */
.menu { padding: clamp(16px, 2.8vw, 40px) var(--gut); }
.biglabel-in :focus-visible { outline-color: var(--ink); }                                                      /* 20 */
.nf-body :focus-visible { outline-color: var(--gold); }                                                         /* 19 */
.nf-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

/* 34: the fitted wordmark keeps running edge to edge on wide screens */
.wm { font-size: clamp(28px, calc(var(--k) * 98.5cqi), 400px); }

/* 3 + 16: the muse melts into the paper (feathered edges), capped by width on tall screens; the label sits on the rule */
.hero-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.hero-photo img { height: clamp(420px, min(calc(100svh - var(--nav-h) - 10.5vw - 10px), 58vw), 980px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 95%, transparent);
  mask-composite: intersect; }
@media (min-width: 1024px) { .hero-photo .lbl--m { top: -16.5px; } }
/* 17: short landscape tablets / big phones keep the three-column hero */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: landscape) and (max-height: 820px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: none; text-align: left; }
  .flank { display: flex; }
  .hero-photo { grid-area: auto; margin-top: 0; justify-self: auto; }
  .hero-photo img { height: max(200px, calc(100svh - var(--nav-h) - 10vw - 91px)); }
  .flank-l > .tc, .beat-1 { text-align: right; }
  .flank-r > .tc, .beat-2 { text-align: left; }
  .cta { justify-content: flex-start; }
  .hero-ca { justify-self: auto; text-align: left; }
}
/* 35: the hero CA wraps into two even halves */
.hero-ca { max-width: 360px; }
.ca-v { word-break: break-all; text-wrap: balance; }
@media (max-width: 1023px) { .hero-ca { justify-items: center; } }

/* 7: the house holds a real label; the thesis is bigger */
.lbl--h { display: block; width: min(100%, 260px); aspect-ratio: 3 / 1; margin-top: 40px; }
.lbl--h::before, .lbl--h::after { width: 2px; height: 42%; }
.label-cap { margin-top: 14px; }
.label-cap em { font: italic 400 19px/1.3 var(--serif); }
@media (max-width: 1023px) { .lbl--h { width: 200px; margin-top: 20px; } }
.house h2 { font: 400 clamp(36px, 3vw + 14px, 64px)/1.05 var(--serif); text-wrap: balance; }
/* 47: jokes in the left column, facts in the right; on phones the four jokes read in a row */
.credits { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
@media (max-width: 599px) { .credits { grid-auto-flow: row; grid-template-rows: none; } }

/* 8: the small ink labels read as sewn cloth, not redaction bars */
.top .lbl, .house .lbl, .look-mask .lbl, .dusk-day .lbl { background-color: var(--ink);
  background-image: linear-gradient(180deg, rgba(236, 232, 223, .10), rgba(236, 232, 223, 0) 45%, rgba(0, 0, 0, .35)), repeating-linear-gradient(90deg, rgba(236, 232, 223, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(236, 232, 223, .04) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(236, 232, 223, .12), 0 4px 8px -4px rgba(14, 13, 11, .5); }
.lbl--s::before, .lbl--s::after { height: 6px; width: 1px; }

/* 33: the marquee never runs out of text (10 spans, same speed) */
html.js:not(.rm) .marquee-in { animation-duration: 150s; }

/* 1: the paper turns to night over the empty moonlit field ("no trace") */
.dusk-fade { height: 16svh; background: linear-gradient(180deg, var(--paper) 0%, #b4b4b5 18%, #7a7a7b 38%, #3d3d3e 60%, #121213 82%, #020108 100%); }
.dusk-night { min-height: clamp(420px, 66.667vw, 100svh); display: flex; flex-direction: column; justify-content: center; padding: 10svh var(--gut); background: #020108 url(/img/night-1536.webp) 50% 100% / cover no-repeat; }
@media (max-width: 599px) { .dusk-night { background-position: 82% 100%; } }

/* 15 + 29: the night print keeps its 2:3 shape at every size */
.night-photo { justify-self: stretch; }
.night-photo img { width: min(100%, calc((min(100svh - 120px, 900px) - 32px) * 2 / 3 + 32px)); height: auto; margin-inline: auto; }
@media (max-width: 1023px) { .night-photo img { width: 100%; } }

/* 6: the boutique still life is trimmed so the owl lines up with step I */
.bq-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 80%; }

/* 4 + 22 + 31: the label is one woven piece; the front face carries the same weave */
.biglabel-in { padding: 0; }
.biglabel-in::before, .biglabel-in::after { z-index: 1; }
.face { padding: 40px 56px; text-align: center; }
.face--front { background: inherit; clip-path: inset(0); }
@media (max-width: 700px) { .biglabel-in { padding: 0; min-height: 180px; } .face { padding: 28px 30px; } }
.lbl--f { padding: 0; }
.lbl--f .face { padding: 20px 34px; }

/* 5: the finale fits one screen: the owl, the tree line and the name together */
.finale-frame { aspect-ratio: auto; height: min(66.667vw, calc(100svh - var(--nav-h))); }
.finale-frame img { object-position: 50% 45%; }
.finale-wm { top: auto; bottom: 3%; }

/* 9: the footer label is centred; before launch the empty link column disappears */
.foot-links:not(:has(a:not([hidden]))) { display: none; }
@media (min-width: 1024px) { .foot-r { grid-column: 3; } }
.foot-bottom a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot-bottom a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* 23: finger-sized targets */
.foot-links a, .nav .nav-x { min-width: 44px; }
.nav .nav-x { justify-content: center; }
.burger, .menu-close { padding: 0 12px; margin-right: -12px; }
.bl-ca [data-copy] { min-width: 48px; justify-content: center; }
.hero-ca [data-copy] { justify-self: start; min-width: 48px; }
@media (max-width: 1023px) { .hero-ca [data-copy] { justify-self: center; justify-content: center; } }