/* After Hours — studioafterhours.co — "Paper & paint"
   One page, nine chapters. Tokens, base, nav, chapters, overlays, motion. */

/* ---------- tokens ---------- */
:root {
  --paper: #F6F3EE;
  --paper-2: #EFE9DF;
  --clay: #DCC6B2;
  --clay-2: #E9DCCB;
  --ink: #0B0D11;
  --midnight: #1B2433;
  --forest: #2F423D;
  --terra: #B25A3C;          /* display sizes only on light */
  --terra-deep: #9A4A2E;     /* fills with Paper text */
  --gold: #C9A15A;           /* rules, ornament, text on dark only */

  /* light tokens are the default; .dark sections flip them */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-meta: rgba(11, 13, 17, .72);
  --line: rgba(11, 13, 17, .14);
  --line-strong: rgba(11, 13, 17, .32);
  --accent: var(--terra-deep);

  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-body: 1rem;
  --fs-meta: .8125rem;
  --fs-label: .8125rem;
  --fs-h2: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-lede: clamp(1.125rem, 1rem + .5vw, 1.375rem);

  --gutter: clamp(1rem, 4vw, 4.5rem);
  --max: 1440px;
  --chapter: clamp(5rem, 12vw, 11rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 180ms; --t-med: 360ms; --t-slow: 700ms;
}
@media (min-width: 768px) { :root { --fs-body: 1.0625rem; } }

/* dark chapters (arrival, close) carry their own ground; hard edges, no cross-fade */
.dark {
  --bg: var(--ink); --fg: var(--paper); --fg-meta: rgba(246, 243, 238, .72);
  --line: rgba(246, 243, 238, .16); --line-strong: rgba(246, 243, 238, .34); --accent: var(--gold);
  background: var(--ink); color: var(--paper);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; background: var(--ink); }
html.html-js { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  color: var(--fg); background: var(--paper);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
html.no-smooth { scroll-behavior: auto; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--terra); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.meta { font-size: var(--fs-meta); color: var(--fg-meta); }
.lede { font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.4; }
.serif { font-family: var(--serif); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chapter { position: relative; padding-block: var(--chapter); }
.chapter--tight { padding-top: calc(var(--chapter) / 2); }
.anchor { scroll-margin-top: 4rem; }
.slash { display: inline-block; width: 1.6em; height: .5em; vertical-align: -.05em; fill: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .85em 1.6em; font-weight: 600; font-size: .9375rem; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary { background: var(--terra-deep); color: var(--paper); }
.btn--primary:hover { background: var(--terra); }
.dark .btn--primary { background: var(--gold); color: var(--ink); }
.dark .btn--primary:hover { background: #D9B46E; }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--midnight); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--block { width: 100%; }
.link { position: relative; display: inline-block; text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--t-med) var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link--arrow::after { content: ' \2192'; }

/* ---------- fixed navigation ---------- */
/* the fixed controls follow the ground beneath them (body[data-bg], set by the chapter in view) */
.mark { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: var(--gutter); z-index: 60; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; min-height: 44px; color: var(--ink); transition: color var(--t-med); }
.mark::before { content: ''; position: absolute; inset: -6px -14px -6px -8px; z-index: -1; border-radius: 999px; background: rgba(246, 243, 238, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color var(--t-med); }
body[data-bg="ink"] .mark::before { background: rgba(11, 13, 17, .5); }
body[data-bg="terra"] .mark::before { background: rgba(154, 74, 46, .72); }
body[data-bg="ink"] .mark { color: var(--paper); }
.mark__disc { position: relative; width: 40px; height: 41px; flex: none; }
.mark__disc img { position: absolute; left: 0; top: 0; width: 40px; height: 41px; transition: opacity var(--t-med); }
.mark__disc .is-gold { opacity: 0; }
body[data-bg="ink"] .mark__disc .is-gold { opacity: 1; }
body[data-bg="ink"] .mark__disc .is-dark { opacity: 0; }
.mark span { font-family: var(--serif); font-size: 1.25rem; line-height: 1; }

/* a rail of ticks in the right gutter; the label shows for the current chapter and on hover */
.index { position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%); z-index: 60; display: none; flex-direction: column; gap: 0; }
.index a { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-height: 44px; text-decoration: none; font-size: var(--fs-meta); font-weight: 500; color: rgba(11, 13, 17, .7); transition: color var(--t-fast); }
body[data-bg="ink"] .index a { color: rgba(246, 243, 238, .7); }
.index a span { opacity: 0; transform: translateX(6px); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); text-shadow: 0 1px 12px var(--paper); }
body[data-bg="ink"] .index a span { text-shadow: 0 1px 12px var(--ink); }
.index a::after { content: ''; width: 16px; height: 1px; background: currentColor; transition: width var(--t-med) var(--ease), background-color var(--t-med); }
.index a:hover span, .index a[aria-current="true"] span, .index:focus-within a span { opacity: 1; transform: none; }
.index a:hover, .index a[aria-current="true"] { color: var(--ink); }
body[data-bg="ink"] .index a:hover, body[data-bg="ink"] .index a[aria-current="true"] { color: var(--paper); }
.index a[aria-current="true"]::after { width: 32px; background: var(--terra); }
@media (min-width: 900px) { .index { display: flex; } :root { --rail: 3.5rem; } }
.wrap { width: min(100% - 2 * var(--gutter) - var(--rail, 0px), var(--max)); margin-left: max(var(--gutter), calc((100% - var(--max) - var(--rail, 0px)) / 2)); margin-right: auto; }

.pill { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med), background-color var(--t-med), color var(--t-med), border-color var(--t-med); }
.pill--book { right: var(--gutter); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(11, 13, 17, .22); }
.pill--book:hover { background: #fff; }
body.in-arrival .pill--book, body.is-locked .pill--book { opacity: 0; pointer-events: none; transform: translateY(8px); }
.pill--menu { top: calc(14px + env(safe-area-inset-top, 0px)); right: var(--gutter); background: transparent; color: var(--ink); border-color: rgba(11, 13, 17, .4); min-height: 44px; }
body[data-bg="ink"] .pill--menu { color: var(--paper); border-color: rgba(246, 243, 238, .45); }
.pill--menu svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
@media (min-width: 900px) { .pill--menu { display: none; } }

.menu { border: 0; padding: 0; margin: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: var(--paper); color: var(--ink); }
.menu::backdrop { background: transparent; }
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--gutter) 2rem; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.menu__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(11, 13, 17, .3); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.menu__links { display: flex; flex-direction: column; margin-top: 1.5rem; border-top: 1px solid rgba(11, 13, 17, .14); }
.menu__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .6rem 0; border-bottom: 1px solid rgba(11, 13, 17, .14); font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); text-decoration: none; }
.menu__links a small { font-family: var(--sans); font-size: var(--fs-meta); color: rgba(11, 13, 17, .6); }
.menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; }

/* pointer glow: dark grounds only, fine pointers only */
.glow { position: fixed; left: 0; top: 0; z-index: 1; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(201, 161, 90, .16), transparent 70%); transition: opacity 600ms; will-change: transform; }
body[data-bg="ink"] .glow { opacity: 1; }
@media (hover: none), (pointer: coarse) { .glow { display: none; } }

/* ---------- chapter 1: arrival ---------- */
.arrival { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.arrival::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 13, 17, .94) 0%, rgba(11, 13, 17, .6) 38%, rgba(11, 13, 17, 0) 70%); }
.collage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tile { position: absolute; width: var(--w, 18vw); aspect-ratio: 1; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); will-change: transform; transform-origin: 50% 50%; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* the entrance lives on the image, so the engine owns the tile's transform with no CSS transition smoothing it */
.html-js .tile { opacity: 0; transition: opacity 900ms var(--ease-out); }
.html-js .tile img { transform: scale(1.18); transition: transform 1400ms var(--ease-out); }
.html-js .tile.is-in { opacity: var(--o, 1); }
.html-js .tile.is-in img { transform: none; }
.arrival__in { position: relative; z-index: 1; padding-block: 6rem 3.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.arrival__eyebrow { display: flex; align-items: center; gap: .8rem; }
.arrival__eyebrow .rule { width: 2.2rem; height: 1px; background: var(--gold); }
.word { font-family: var(--serif); font-weight: 700; font-size: clamp(4.5rem, 22vw, 19rem); line-height: .86; letter-spacing: -.04em; color: var(--paper); text-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
/* each line rises out of its own mask; at this tight leading the tops of A, f and t stand above the line box, so the mask is
   open above and at the sides (a clip that reaches past them, not overflow: hidden) and only its foot hides the rising word */
.word span { display: block; clip-path: inset(-.4em -.15em 0 -.15em); }
.word span i { display: block; font-style: normal; }
.html-js .word span i { transform: translateY(110%); }   /* hidden to rise in only with script; without it the words simply show */
.html-js .word.is-in span i { transform: none; transition: transform 1100ms var(--ease-out); }
.html-js .word.is-in span:nth-child(2) i { transition-delay: 90ms; }
.arrival__line { font-family: var(--serif); font-size: var(--fs-lede); color: rgba(246, 243, 238, .8); max-width: 30em; }
.arrival__line b { font-weight: 400; color: var(--paper); }
.arrival__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.cue { position: absolute; right: var(--gutter); bottom: 1.5rem; z-index: 1; display: none; align-items: center; gap: .6rem; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 243, 238, .6); }
.cue i { display: block; width: 1px; height: 48px; background: rgba(246, 243, 238, .4); position: relative; overflow: hidden; }
.cue i::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--gold); animation: cue 1800ms var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }
@media (min-width: 900px) { .cue { display: flex; } .arrival__in { padding-bottom: 5rem; } }

/* ---------- chapter 2: marquee ---------- */
.manifesto { padding-block: clamp(2rem, 5vw, 4rem); border-block: 1px solid var(--line); overflow: clip; }
.marquee { display: flex; width: max-content; will-change: transform; animation: marquee 48s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee > div { display: flex; align-items: center; gap: 1.2em; padding-right: 1.2em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 7vw, 7rem); line-height: 1; letter-spacing: -.02em; color: var(--terra); white-space: nowrap; }
.marquee > div .slash { width: .9em; height: .3em; color: var(--gold); flex: none; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- chapter 4: story ---------- */
.story__quote { font-family: var(--serif); font-size: clamp(2rem, 6.6vw, 7.5rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14em; }
.story__quote .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.story__quote .w i { display: inline-block; font-style: normal; transform: translateY(110%); }
.html-js .story__quote.is-in .w i { transform: none; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 28ms); }
.story__quote em { font-style: italic; font-weight: 300; color: var(--terra); }
.story__grid { display: grid; gap: 3rem; margin-top: clamp(3rem, 7vw, 6rem); }
.story__copy { display: flex; flex-direction: column; gap: 1.25rem; max-width: 36em; }
.story__copy .big { font-family: var(--serif); font-size: var(--fs-h3); color: var(--terra); line-height: 1.2; }
.values { display: grid; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.values li { display: flex; flex-direction: column; gap: .2rem; }
.values b { font-weight: 600; font-size: var(--fs-meta); letter-spacing: .08em; text-transform: uppercase; }
.values span { font-size: var(--fs-meta); color: var(--fg-meta); }
.story__art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.story__art img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
@media (min-width: 900px) { .story__grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .values { grid-template-columns: 1fr 1fr; } .story__art { margin-top: -8rem; } }

/* ---------- chapter 5: this season (horizontal) ---------- */
.hs { position: relative; }
.hs__head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.hs__head .row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.hs__pin { position: relative; }
.hs__stage { position: relative; }
.hs__track { display: flex; gap: 1.25rem; padding-inline: var(--gutter); will-change: transform; }
.hs__track > * { flex: none; width: min(80vw, 320px); }
/* the track is always a native horizontal scroller; on wide screens the engine drives its scrollLeft from vertical scroll */
.hs__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); padding-bottom: 1.5rem; scrollbar-width: none; }
.hs__track::-webkit-scrollbar { display: none; }
.hs__stage-in { display: grid; gap: 1.5rem; width: 100%; }
.hs__lead { padding-inline: var(--gutter); display: flex; flex-direction: column; gap: .75rem; }
.hs__lead .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .hs__track { scroll-snap-type: x mandatory; }
  .hs__track > * { scroll-snap-align: start; }
}
@media (min-width: 768px) {
  .html-js.motion .hs__pin { height: var(--hs-h, 300vh); }
  .html-js.motion .hs__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
  .hs__track > * { width: clamp(360px, 30vw, 440px); }
  .hs__stage-in { grid-template-columns: minmax(280px, 30vw) 1fr; align-items: center; gap: 0; }
  .hs__lead { padding-right: 2rem; }
  .hs__track { padding-inline: 0 var(--gutter); }
}
.wcard { display: flex; flex-direction: column; border-radius: 2px; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 20px 60px rgba(11, 13, 17, .12); }
.wcard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
.wcard:hover .wcard__img img { transform: scale(1.05); }
.wcard__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; flex: 1; }
.wcard__kicker { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--terra-deep); }
.wcard__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; }
.wcard__text { font-size: var(--fs-meta); color: rgba(11, 13, 17, .7); }
.wcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; }
.wcard__meta { display: flex; flex-direction: column; gap: .15rem; font-size: var(--fs-meta); color: rgba(11, 13, 17, .7); }
.wcard__meta b { color: var(--ink); font-weight: 600; font-size: var(--fs-body); }
.wcard .btn { min-height: 44px; padding: .55em 1.1em; font-size: .875rem; }
.mcard { --acc: var(--terra); display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem; min-height: 100%; border-radius: 2px; background: var(--ink); color: var(--paper); overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(11, 13, 17, .18); }
.mcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 28%, transparent), transparent 70%); pointer-events: none; }
.mcard__kicker { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.mcard__title { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.2rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; position: relative; }
.mcard__q { font-family: var(--serif); font-style: italic; font-size: var(--fs-lede); line-height: 1.3; color: rgba(246, 243, 238, .78); position: relative; }
.mcard__tags { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; }
.mcard__tags li { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; padding: .35em .6em; border: 1px solid rgba(246, 243, 238, .3); border-radius: 2px; }
.mcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; border-top: 1px solid rgba(246, 243, 238, .16); position: relative; }
.mcard__foot .wcard__meta, .mcard__foot .wcard__meta b { color: rgba(246, 243, 238, .78); }
.mcard__foot .wcard__meta b { color: var(--paper); }
.mcard .btn { min-height: 44px; padding: .55em 1.1em; font-size: .875rem; background: var(--gold); color: var(--ink); }
.mcard--abstract { --acc: var(--terra); } .mcard--surreal { --acc: var(--gold); } .mcard--impression { --acc: #9DB8AE; }
.hs__hint { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: var(--fs-meta); color: var(--fg-meta); }

/* ---------- chapter 6: the course ---------- */
.course__grid { display: grid; gap: 3rem; }
.course { background: var(--clay); --bg: var(--clay); }
.statement { font-family: var(--serif); font-weight: 700; font-size: clamp(2.75rem, 11vw, 10rem); line-height: .9; letter-spacing: -.035em; }
.statement em { font-style: italic; font-weight: 300; }
.course__price { font-family: var(--serif); font-weight: 700; font-size: clamp(5rem, 16vw, 14rem); line-height: .85; letter-spacing: -.04em; color: var(--ink); }
.course__price small { font-size: .4em; vertical-align: .9em; font-weight: 400; margin-right: .05em; }
.course__title { font-family: var(--serif); font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.02em; margin-top: 1rem; }
.course__title em { font-style: italic; font-weight: 300; }
.rail { position: relative; counter-reset: node; max-width: 760px; }
.rail > li { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1rem; padding-block: 1.5rem; }
.rail > li::before { content: counter(node); counter-increment: node; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); font-family: var(--serif); font-size: 1.2rem; font-variant-numeric: lining-nums; transition: background-color 900ms; }
.rail > li::after { content: ''; position: absolute; left: calc(1.375rem - .5px); top: calc(1.5rem + 2.75rem); bottom: -1.5rem; width: 1px; background: var(--line-strong); }
.rail > li:last-child::after { display: none; }
.rail__sub { font-size: var(--fs-meta); color: var(--fg-meta); margin-bottom: .25rem; }
.rail__title { font-size: var(--fs-h3); margin-bottom: .35rem; }
.rail__body { color: var(--fg-meta); max-width: 34em; }
.rail > li.rail__plus::before { content: '+1'; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); font-family: var(--sans); font-weight: 700; font-size: 1rem; }
.rail > li.rail__plus .rail__title { color: var(--terra-deep); }
.aside-card { padding: 1.5rem; border-radius: 2px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; }
.aside-card dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: var(--fs-meta); }
.aside-card dt { color: var(--fg-meta); } .aside-card dd { margin: 0; }
@media (min-width: 900px) { .course__grid { grid-template-columns: 1.2fr .8fr; gap: 5rem; align-items: start; } .course__grid > aside { position: sticky; top: 6rem; } }

/* ---------- chapter 7: private events (terracotta band) ---------- */
.events { background: var(--terra-deep); color: var(--paper); --fg: var(--paper); --fg-meta: rgba(246, 243, 238, .78); --line: rgba(246, 243, 238, .2); --line-strong: rgba(246, 243, 238, .4); --accent: var(--paper); overflow: clip; }
.events__title { font-family: var(--serif); font-weight: 700; font-size: clamp(3rem, 12vw, 11rem); line-height: .88; letter-spacing: -.04em; }
.events__title em { font-style: italic; font-weight: 300; }
.formats { display: grid; gap: 1rem; margin-top: 3rem; }
.format { padding: 1.25rem 0; border-top: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: .4rem; }
.format b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); }
.format span { font-size: var(--fs-meta); color: var(--fg-meta); }
.events .btn--primary { background: var(--paper); color: var(--ink); }
.events .btn--primary:hover { background: #fff; }
.events__blob { position: absolute; right: -10vw; top: -10vh; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 161, 90, .35), transparent 70%); pointer-events: none; will-change: transform; }
@media (min-width: 900px) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* ---------- chapter 8: residents ---------- */
.people { display: grid; gap: 1rem; margin-top: 2rem; }
.person { display: flex; flex-direction: column; gap: .6rem; }
.person__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--clay); }
.person__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.9); }
.person b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); }
.person span { font-size: var(--fs-meta); color: var(--fg-meta); }
@media (min-width: 700px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
/* the portraits sit in black and white and come into colour under the pointer; on a touch screen, as each one comes fully
   into view (site.js sets is-lit) */
.person__img img { transition: filter 700ms var(--ease), transform 1200ms var(--ease-out); }
.person.is-lit .person__img img { filter: none; }
/* on a tablet the three arrive together: they develop one after another */
.person.is-lit:nth-child(2) .person__img img { transition-delay: 150ms; }
.person.is-lit:nth-child(3) .person__img img { transition-delay: 300ms; }
@media (hover: hover) { .person:hover .person__img img { filter: none; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .person:hover .person__img img { transform: scale(1.04); } }
.sample { display: inline-flex; align-items: center; gap: .3em; padding: .2em .5em; border: 1px dashed var(--line-strong); border-radius: 2px; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-meta); }

/* ---------- chapter 9: studio and close (dark) ---------- */
.studio__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.studio__handle { font-family: var(--serif); font-size: var(--fs-h2); text-decoration: none; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mosaic__col { display: grid; gap: 4px; will-change: transform; }
.mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.knockout { display: flex; flex-direction: column; margin-top: clamp(3rem, 8vw, 6rem); font-family: var(--serif); font-weight: 600; font-size: min(14vw, 10rem, 18vh); font-size: min(14vw, 10rem, 18svh); line-height: .9; letter-spacing: -.03em; color: transparent; background-color: var(--clay); background-image: linear-gradient(rgba(220, 198, 178, .45), rgba(220, 198, 178, .45)), url(paint/band-1800.webp); background-blend-mode: screen, normal; background-size: cover; background-position: center 45%; -webkit-background-clip: text; background-clip: text; }
.knockout span { display: block; }
@media (max-width: 899px) { .knockout { background-image: linear-gradient(rgba(220, 198, 178, .45), rgba(220, 198, 178, .45)), url(paint/band-900.webp); } }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .knockout { background: none; color: var(--clay); } }
@media (forced-colors: active) { .knockout { background: none; color: CanvasText; } }
.footer { margin-top: clamp(3rem, 8vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: 2rem; }
.footer h4 { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; }
.footer ul { display: flex; flex-direction: column; gap: .3rem; }
.footer ul a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--fg-meta); }
.footer ul a:hover { color: var(--fg); }
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.copy-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .7em; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; cursor: pointer; font-size: var(--fs-meta); }
.footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--fg-meta); }
@media (min-width: 768px) { .footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- forms and the booking sheet (Paper) ---------- */
.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: var(--fs-meta); font-weight: 600; }
.field label small { font-weight: 400; color: rgba(11, 13, 17, .6); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: .7em .9em; font: inherit; font-size: 16px; line-height: 1.3; color: var(--ink); background: #fff; border: 1px solid rgba(11, 13, 17, .25); border-radius: 2px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(11, 13, 17, .55); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--terra-deep); box-shadow: 0 0 0 3px rgba(154, 74, 46, .18); }
.field--row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .field--row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: var(--fs-meta); color: rgba(11, 13, 17, .65); }
.form__note a { color: inherit; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.result { display: none; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid rgba(11, 13, 17, .25); border-radius: 2px; }
.result[data-show] { display: flex; }
.result h3 { font-size: var(--fs-h3); }
.result--ok { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 161, 90, .25); }
.result--fail { border-color: var(--ink); border-left-width: 6px; border-left-color: #D99A2B; }
.email-fallback { display: flex; flex-direction: column; gap: .5rem; }
.form[data-needs-js] [data-js-only] { display: none; }

.sheet { position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh; background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-meta: rgba(11, 13, 17, .7); --line: rgba(11, 13, 17, .14); --line-strong: rgba(11, 13, 17, .32); --accent: var(--terra); border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform 380ms var(--ease-out); overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(11, 13, 17, .55); opacity: 0; transition: opacity 320ms; }
.sheet.is-open { transform: none; }
.sheet.is-open::backdrop { opacity: 1; }
.sheet__in { max-height: inherit; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sheet__grab { width: 44px; height: 4px; border-radius: 2px; background: rgba(11, 13, 17, .25); margin: .6rem auto 0; }
.sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: sticky; top: 0; background: var(--paper); padding-block: .5rem; z-index: 1; }
.sheet__close { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(11, 13, 17, .3); border-radius: 50%; background: transparent; cursor: pointer; }
.sheet__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.sheet__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.05; }
.sheet__kicker { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--terra-deep); margin-bottom: .35rem; }
.sheet__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--fs-meta); color: rgba(11, 13, 17, .7); }
.sheet__meta b { color: var(--ink); font-weight: 600; }
.sheet__switch select { min-height: 48px; font-size: 16px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border: 1px solid rgba(11, 13, 17, .14); border-radius: 2px; background: #fff; }
.stepper__ctl { display: inline-flex; align-items: center; gap: .25rem; }
.stepper__ctl button { width: 44px; height: 44px; border: 1px solid rgba(11, 13, 17, .3); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.stepper__ctl button:disabled { opacity: .35; cursor: default; }
.stepper__ctl output { min-width: 2ch; text-align: center; font-weight: 600; font-size: 1.125rem; }
.stepper__total { text-align: right; }
.stepper__total b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.stepper__total span { font-size: var(--fs-meta); color: rgba(11, 13, 17, .65); }
@media (max-width: 480px) { .stepper { flex-wrap: wrap; } .stepper > div:first-child .meta { display: none; } .stepper__total { flex-basis: 100%; display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding-top: .6rem; border-top: 1px solid rgba(11, 13, 17, .14); } }
@media (min-width: 768px) { .sheet { inset: 0 0 0 auto; width: 480px; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; transform: translateX(100%); } .sheet__grab { display: none; } .sheet__in { padding: 1.5rem 2rem 2rem; } .sheet__top { padding-top: 0; } }
.sheet .btn--primary { background: var(--terra-deep); color: var(--paper); }
.sheet .btn--ghost { border-color: rgba(11, 13, 17, .3); color: var(--ink); }

/* ---------- review / launch ---------- */
[data-mode="launch"] .review-only { display: none !important; }
[data-mode="review"] .launch-only { display: none !important; }

/* ---------- scroll reveal and parallax ---------- */
.html-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.html-js .reveal.is-in { opacity: 1; transform: none; }
.html-js .reveal[data-delay="1"] { transition-delay: 90ms; }
.html-js .reveal[data-delay="2"] { transition-delay: 180ms; }
/* the wipe clips the image, not its frame: a frame clipped to nothing never counts as on screen, so it would never be revealed */
.html-js .wipe > img { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); }
.html-js .wipe.is-in > img { clip-path: inset(0 0 0 0); }
[data-depth] { will-change: transform; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  html.html-js { scroll-behavior: auto; }
  .html-js .tile, .html-js .word span i, .html-js .story__quote .w i, .html-js .reveal, .html-js .wipe, .html-js .wipe > img { opacity: 1; transform: none; clip-path: none; }
  .marquee { animation: none; width: auto; flex-wrap: wrap; }
  .marquee > div { white-space: normal; }
  .marquee > div:last-child { display: none; }
  .glow, .cue { display: none; }
  [data-depth] { transform: none !important; }
}

/* ---------- privacy / 404 prose ---------- */
.prose { max-width: 40em; display: flex; flex-direction: column; gap: 1rem; }
.prose h2 { font-size: var(--fs-h3); margin-top: 1.5rem; }
.prose ul { list-style: disc; padding-left: 1.2em; display: flex; flex-direction: column; gap: .4rem; }
.prose a { color: var(--terra-deep); }
.band { padding-block: clamp(7rem, 14vw, 10rem) clamp(2.5rem, 6vw, 4.5rem); }
.display { font-family: var(--serif); font-size: clamp(2.75rem, 1.4rem + 6vw, 6rem); line-height: .98; letter-spacing: -.02em; }
.crumbs { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-meta); color: var(--fg-meta); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }

/* ---------- late additions ---------- */
button.link { border: 0; padding: 0 0 2px; background-color: transparent; cursor: pointer; font: inherit; color: inherit; }
body[data-bg="terra"] .mark, body[data-bg="terra"] .index a:hover, body[data-bg="terra"] .index a[aria-current="true"] { color: var(--paper); }
body[data-bg="terra"] .index a { color: rgba(246, 243, 238, .7); }
body[data-bg="terra"] .mark__disc .is-gold { opacity: 1; } body[data-bg="terra"] .mark__disc .is-dark { opacity: 0; }
body[data-bg="terra"] .pill--menu { color: var(--paper); border-color: rgba(246, 243, 238, .5); }
@media (max-width: 700px) { .tile { width: calc(var(--w, 18vw) * 1.9); } .tile--d { display: none; } .arrival__in { padding-top: 7rem; } }
.wcard--hear { background: var(--clay-2); box-shadow: none; border: 1px dashed rgba(11, 13, 17, .3); }
.wcard--hear .wcard__body { height: 100%; }
.quotes { display: grid; gap: 1.5rem; }
.quote { display: flex; flex-direction: column; gap: .9rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: 2px; margin: 0; }
.quote p { font-family: var(--serif); font-style: italic; font-size: var(--fs-lede); line-height: 1.35; }
.quote footer { font-size: var(--fs-meta); color: var(--fg-meta); }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu .mark { color: var(--ink); }

/* the frosted backing belongs to the fixed header mark only */
.menu .mark, main .mark { position: relative; }
.menu .mark::before, main .mark::before { display: none; }
/* the chapter index follows the ground at mid-height (its own observer), not the strip under the header */
.index[data-bg="ink"] a, .index[data-bg="terra"] a { color: rgba(246, 243, 238, .75); }
.index[data-bg="ink"] a:hover, .index[data-bg="ink"] a[aria-current="true"], .index[data-bg="terra"] a:hover, .index[data-bg="terra"] a[aria-current="true"] { color: var(--paper); }
.index[data-bg="ink"] a span, .index[data-bg="terra"] a span { text-shadow: 0 1px 12px rgba(11, 13, 17, .8); }
.index[data-bg="paper"] a, .index[data-bg="clay"] a { color: rgba(11, 13, 17, .7); }
.index[data-bg="paper"] a:hover, .index[data-bg="paper"] a[aria-current="true"], .index[data-bg="clay"] a:hover, .index[data-bg="clay"] a[aria-current="true"] { color: var(--ink); }
@media (min-width: 900px) { :root { --rail: 5rem; } }
/* the mosaic columns move a little, never over the heading */
.studio__head { position: relative; z-index: 1; margin-bottom: 3rem; }
.mosaic { position: relative; z-index: 0; }

/* statements: solid Ink at weight 800, no italic-light word (the user asked for black type at scale) */
.statement, .events__title { font-weight: 800; }
.statement em, .events__title em { font-style: normal; font-weight: inherit; }
.studio__head { margin-bottom: 0; }
.knockout { margin-top: clamp(2rem, 5vw, 3.5rem); }
.hs__lead .statement { font-size: clamp(2.75rem, 7.5vw, 8rem); }
@media (min-width: 900px) { :root { --rail: 6rem; } }

/* ---------- three ways in: hover-preview cards that jump into each chapter ---------- */
.pillars { display: grid; gap: 1rem; margin-top: 2.5rem; }
.pillar { --role: var(--gold); position: relative; display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--ink); color: var(--paper); text-decoration: none; isolation: isolate; box-shadow: 0 24px 60px rgba(11, 13, 17, .16); }
.pillar__img { position: absolute; inset: 0; z-index: -1; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out), filter 700ms var(--ease-out); }
.pillar__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 13, 17, .94) 0%, rgba(11, 13, 17, .45) 48%, rgba(11, 13, 17, .08) 100%); }
.pillar__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.pillar__n { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.pillar__title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.02em; }
.pillar__desc { font-size: var(--fs-meta); color: rgba(246, 243, 238, .82); max-width: 30em; }
.pillar__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; min-height: 44px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold); }
.pillar__go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pillar__img img { filter: grayscale(.4) brightness(.78); }
  .pillar__desc, .pillar__go { opacity: 0; transform: translateY(8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
  .pillar:hover .pillar__img img, .pillar:focus-visible .pillar__img img { filter: none; transform: scale(1.05); }
  .pillar:hover .pillar__desc, .pillar:hover .pillar__go, .pillar:focus-visible .pillar__desc, .pillar:focus-visible .pillar__go { opacity: 1; transform: none; }
  .pillar:hover .pillar__go svg { transform: translateX(4px); }
}
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

/* ---------- contact ---------- */
.contact__grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
.contact__rows { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.75rem; }
.contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-height: 44px; }
.contact__k { min-width: 6em; }
.contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: start; } .contact__actions { padding-top: 1rem; } }
.testimonials { background: var(--clay); --bg: var(--clay); }
.people { margin-top: 2.5rem; }

/* ---------- three ways in: previews that click into each chapter (description always visible) ---------- */
.ways { background: var(--paper-2); }
.pillars { display: grid; gap: 1rem; margin-top: 2.5rem; }
.pillar { position: relative; display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; min-height: 420px; background: var(--ink); color: var(--paper); text-decoration: none; isolation: isolate; box-shadow: 0 24px 60px rgba(11, 13, 17, .16); }
.pillar__img { position: absolute; inset: 0; z-index: -1; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out), filter 700ms var(--ease-out); }
.pillar__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 13, 17, .94) 0%, rgba(11, 13, 17, .5) 50%, rgba(11, 13, 17, .08) 100%); }
.pillar__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.pillar__n { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.pillar__title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.02em; }
.pillar__desc { font-size: var(--fs-meta); color: rgba(246, 243, 238, .85); max-width: 30em; }
.pillar__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; min-height: 44px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold); }
.pillar__go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; transition: transform var(--t-med) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pillar__img img { filter: grayscale(.35) brightness(.8); }
  .pillar:hover .pillar__img img, .pillar:focus-visible .pillar__img img { filter: none; transform: scale(1.05); }
  .pillar:hover .pillar__go svg, .pillar:focus-visible .pillar__go svg { transform: translateX(4px); }
}
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 899.98px) {
  /* thumbnail rows: the three previews stay a short index on phones */
  .pillar { aspect-ratio: auto; display: grid; grid-template-columns: 88px 1fr; gap: 1rem; align-items: center; background: var(--paper); color: var(--ink); box-shadow: none; border: 1px solid var(--line); padding: .75rem; }
  .pillar__img { position: relative; inset: auto; z-index: 0; width: 88px; aspect-ratio: 1; border-radius: 2px; overflow: hidden; }
  .pillar__img::after { display: none; }
  .pillar__body { position: static; padding: 0; gap: .25rem; }
  .pillar__n, .pillar__go { color: var(--terra-deep); }
  .pillar__title { font-size: 1.35rem; }
  .pillar__desc { color: var(--fg-meta); }
  .pillar__go { min-height: 32px; }
}

/* ---------- residents: launch-mode frames; contact; minimal footer ---------- */
.frame { aspect-ratio: 4 / 5; border: 1px dashed var(--line-strong); border-radius: 2px; background: var(--clay-2); display: flex; align-items: flex-end; padding: 1rem; }
.frame span { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-meta); }
.contact { background: var(--clay); --bg: var(--clay); }
.contact__grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
.contact__email { display: inline-block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; word-break: break-all; }
.contact__rows { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-height: 44px; }
.contact__k { min-width: 6em; }
/* the email and Instagram links are Contact's direct routes: a thumb-sized target around each (they are only ~30px tall) */
.contact__email::before { content: ''; position: absolute; inset: -8px 0; }
.contact__row .link::before { content: ''; position: absolute; inset: -9px -8px; }
.contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.contact .btn--ghost { border-color: rgba(11, 13, 17, .4); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: start; } .contact__actions { padding-top: 1rem; } }
.testimonials { background: var(--paper-2); }
.people { margin-top: 2.5rem; }
.footer--min { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.footer--min .footer__brand { display: flex; flex-direction: column; gap: .75rem; }
.footer--min .footer__bottom { border: 0; padding: 0; margin: 0; width: auto; gap: 1.5rem; }
.footer--min .footer__bottom a { color: var(--fg-meta); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer--min .footer__bottom a:hover { color: var(--fg); }

/* legibility: 44px targets on the copy button and menu rows, firmer borders */
.copy-btn { min-height: 44px; border-color: rgba(11, 13, 17, .5); }
.dark .copy-btn { border-color: rgba(246, 243, 238, .5); }
.menu__links a { min-height: 48px; padding: .4rem 0; font-size: clamp(1.625rem, 6.5vw, 2.25rem); }
/* the preview cards are complete without hover: hover only un-mutes the image */
@media (hover: hover) and (pointer: fine) { .pillar__desc, .pillar__go { opacity: 1; transform: none; } }
@media (max-width: 899.98px) { .pillar { min-height: 0; } }
.ways .pillars { margin-top: 1.5rem; }

/* ---------- inner pages ---------- */
.crumbs-bar { padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 0 0; }
.crumbs-bar + .chapter { padding-top: 2rem; }
.events.crumbs-bar { background: var(--terra-deep); color: var(--paper); --fg-meta: rgba(246, 243, 238, .78); }
.events.crumbs-bar .crumbs { margin-bottom: 0; }
.split { display: grid; gap: 2rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; } }
.format[href] { transition: border-color var(--t-fast); }
.format[href]:hover { border-top-color: var(--ink); }
.footer--min .footer__bottom span { display: inline-flex; align-items: center; min-height: 44px; }
/* pages fade into each other */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 260ms ease-in both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* the header and the pills hold still while pages fade */
.mark { view-transition-name: ah-mark; } .pill--book { view-transition-name: ah-pill; } .pill--menu { view-transition-name: ah-menu; }
/* on phones the three rows wear the colour of the page they open */
@media (max-width: 899.98px) {
  .pillar--courses { background: var(--clay); border-color: transparent; }
  .pillar--events { background: var(--terra-deep); color: var(--paper); border-color: transparent; }
  .pillar--events .pillar__n, .pillar--events .pillar__go { color: var(--paper); }
  .pillar--events .pillar__desc { color: rgba(246, 243, 238, .82); }
}
/* contrast on the terracotta and Clay pages; targets on small links */
.events { --fg-meta: rgba(246, 243, 238, .9); }
.course { --accent: #85402A; }
.rail > li.rail__plus .rail__title { color: var(--accent); }
.crumbs a, button.link { display: inline-flex; align-items: center; min-height: 44px; }
.menu .mark { view-transition-name: none; }
.footer--min .footer__bottom span { gap: .3em; }

/* ---------- the pinned arrival: the page holds still while the tiles move ---------- */
/* a third of a screen on phones, half a screen from 768px wide */
@media (prefers-reduced-motion: no-preference) {
  /* pin-ok is set by site.js only when the hero's text fits the screen, so a short laptop or small phone never loses the buttons */
  .html-js.motion.pin-ok .arrival-pin { --pin: 35vh; position: relative; height: calc(100vh + var(--pin)); height: calc(100svh + var(--pin)); background: var(--ink); }
  .html-js.motion.pin-ok .arrival-pin > .arrival { position: sticky; top: 0; min-height: 0; height: 100vh; height: 100svh; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) { .html-js.motion.pin-ok .arrival-pin { --pin: 50vh; } }
.arrival__in, .cue { will-change: transform, opacity; }
/* the wordmark is capped by screen height too, so the hero (and its buttons) fit common laptop screens and the pin can run there */
.word { font-size: clamp(4.5rem, min(22vw, 32vh), 19rem); font-size: clamp(4.5rem, min(22vw, 32svh), 19rem); }
/* short desktop screens: a tighter hero so its text fits and the pin can run (the fixed mark needs ~64px clearance) */
@media (min-width: 900px) and (max-height: 820px) { .arrival__in { padding-top: 4.5rem; padding-bottom: 3rem; } }
/* the scroll cue shows from 768px, where a wheel or trackpad hold could read as stuck; on phones the paintings moving under the finger are the answer */
@media (min-width: 768px) { .cue { display: flex; } }
/* paintings now pass under the Menu pill during the hold: it gets the logo's scrim so its label stays readable */
.pill--menu { background: rgba(246, 243, 238, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body[data-bg="ink"] .pill--menu { background: rgba(11, 13, 17, .5); }
body[data-bg="terra"] .pill--menu { background: rgba(154, 74, 46, .72); }
/* the hero's second action: a 44px target without moving its underline */
.arrival__cta .link::before { content: ''; position: absolute; inset: -10px -8px; }

/* ---------- labels clear their headings ---------- */
/* at these tight leadings a display heading's capitals rise about .08em above its line box: the label above keeps that plus a steady gap */
.label + .statement, .label + .events__title, .label + .story__quote { margin-top: calc(.08em + .75rem); }

/* ---------- chapters are at least a screen tall ---------- */
/* content centred in a screen-tall chapter, so none trails off into empty paper; a taller one just gets even padding.
   The inner pages' footer bands (chapter--tight) and the chapter under a page's breadcrumbs keep their own height. */
:root { --chapter: clamp(4.5rem, 8vw, 7rem); }
/* --screen is the screen's height in px, set by site.js once per width, so a sliding browser bar never resizes a chapter */
main > .chapter:not(.hs):not(.chapter--tight):not(.crumbs-bar + .chapter) { min-height: 100vh; min-height: 100svh; min-height: var(--screen, 100svh); display: flex; flex-direction: column; justify-content: center; }
/* on the home page a chapter link or a shared #link lands on the chapter's top, where the settle (site.js) rests, not 9rem
   above it on a seam; the same with the settle off. The margin cancels html's scroll-padding, which stays for keyboard focus */
main[data-settle] > .anchor { scroll-margin-top: -5rem; }

/* ---------- the hold: a full screen of scroll on laptops, most of one on phones ---------- */
/* more paintings wait below the fold and rise into the frame as the first ones leave it, so the longer hold never empties.
   Phones get 90% of a screen so one flick doesn't clear it; their paintings travel no further, just more slowly (site.js) */
@media (prefers-reduced-motion: no-preference) { .html-js.motion.pin-ok .arrival-pin { --pin: 90vh; } }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) { .html-js.motion.pin-ok .arrival-pin { --pin: 100vh; } }

/* ---------- the wash: one ground behind the home page, the evening coming on ---------- */
/* paper, then clay behind the three cards, then terracotta from the painting through Contact, then ink for Instagram and the
   close. site.js sets the ground colour, data-tone (ink or paper text) and data-mid on body as you scroll; without it each
   chapter keeps a solid ground of its own */
html.wash main > [data-wash] { background: transparent; }
html:not(.wash) .ways { background: var(--clay-2); }
html:not(.wash) #residents, html:not(.wash) .testimonials { background: var(--clay); }
/* the text colours are registered so they fade with the ground instead of cutting from ink to paper in one frame */
@property --fg { syntax: '<color>'; inherits: true; initial-value: #0B0D11; }
@property --fg-meta { syntax: '<color>'; inherits: true; initial-value: rgba(11, 13, 17, .72); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #9A4A2E; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(11, 13, 17, .14); }
@property --line-strong { syntax: '<color>'; inherits: true; initial-value: rgba(11, 13, 17, .32); }
html.wash main { color: var(--fg); transition: --fg 320ms var(--ease), --fg-meta 320ms var(--ease), --accent 320ms var(--ease), --line 320ms var(--ease), --line-strong 320ms var(--ease); }
/* the dark tone starts where paper text reads better than ink on the ground (luminance .176): both stay above 4:1 at the switch */
html.wash body[data-tone="dark"] main { --fg: var(--paper); --fg-meta: rgba(246, 243, 238, .82); --line: rgba(246, 243, 238, .2); --line-strong: rgba(246, 243, 238, .7); --accent: var(--paper); }
html.wash body[data-tone="dark"] main .btn--primary { background: var(--paper); color: var(--ink); }
html.wash body[data-tone="dark"] main .btn--primary:hover { background: #fff; }
html.wash body[data-tone="dark"] main .btn--ghost { border-color: rgba(246, 243, 238, .7); color: var(--paper); }
html.wash body[data-tone="dark"] main .copy-btn { border-color: rgba(246, 243, 238, .7); }
/* labels: a deeper terracotta that holds 4.5:1 on clay; on the dark close, paper while terracotta is still fading out, gold once the ground is near ink */
html.wash body[data-tone="light"] main { --accent: #85402A; }
html.wash .dark[data-wash] { --accent: var(--paper); }
html.wash body[data-near="ink"] .dark[data-wash] { --accent: var(--gold); }
/* on a mid-tone ground (blush, rose, terracotta, and on the way between) labels and small print take the full text colour,
   since terracotta labels and dimmed text both fall under 4.5:1 there */
html.wash body[data-mid] main { --accent: var(--fg); --fg-meta: var(--fg); }
/* contact sits on terracotta; without the wash it carries that ground and the light text itself */
html:not(.wash) .contact { background: var(--terra-deep); --fg: var(--paper); --fg-meta: rgba(246, 243, 238, .9); --line: rgba(246, 243, 238, .2); --line-strong: rgba(246, 243, 238, .7); --accent: var(--paper); color: var(--paper); }
html:not(.wash) .contact .btn--primary { background: var(--paper); color: var(--ink); }
html:not(.wash) .contact .btn--ghost, html:not(.wash) .contact .copy-btn { border-color: rgba(246, 243, 238, .7); color: var(--paper); }
/* the header's frosted backing takes the colour of the ground under it (site.js writes --scrim on these two only) */
html.wash .mark::before, html.wash .pill--menu { background: rgba(var(--scrim, 246, 243, 238), .72); }
/* the rail follows the ground at its own height: these tie with the header's body[data-bg] rules and win by coming later */
body .index[data-bg="paper"] a, body .index[data-bg="clay"] a { color: rgba(11, 13, 17, .7); }
body .index[data-bg="paper"] a:hover, body .index[data-bg="paper"] a[aria-current="true"], body .index[data-bg="clay"] a:hover, body .index[data-bg="clay"] a[aria-current="true"] { color: var(--ink); }
body .index[data-bg="paper"] a span, body .index[data-bg="clay"] a span { text-shadow: 0 1px 12px var(--paper); }
body .index[data-bg="ink"] a, body .index[data-bg="terra"] a { color: rgba(246, 243, 238, .75); }
body .index[data-bg="ink"] a:hover, body .index[data-bg="ink"] a[aria-current="true"], body .index[data-bg="terra"] a:hover, body .index[data-bg="terra"] a[aria-current="true"] { color: var(--paper); }
body .index[data-bg="ink"] a span, body .index[data-bg="terra"] a span { text-shadow: 0 1px 12px rgba(11, 13, 17, .8); }
/* the current tick in the text's own colour: terracotta vanished on the terracotta ground */
.index a[aria-current="true"]::after { background: currentColor; }
/* the floating Request a seat steps aside while Contact's own button is on screen */
body.at-contact .pill--book { opacity: 0; pointer-events: none; transform: translateY(8px); }
/* phones and tablets, held either way up: exactly the screens that don't settle (site.js finePointer; a phone on its side is wider than 768px) */
@media (max-width: 767.98px), not all and (hover: hover) and (pointer: fine) { body.past-contact .pill--book { opacity: 0; pointer-events: none; transform: translateY(8px); } }
/* a rule of its own: a browser without :has() drops the whole rule, and then simply keeps the pill */
body.at-painting:has(.expand.is-open) .pill--book { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ---------- the opening painting ---------- */
/* without motion (or script) it is simply the painting, full bleed and a screen tall, with its caption */
.expand { position: relative; }
.expand__stage { position: relative; height: 100vh; height: 100svh; height: var(--screen, 100svh); overflow: hidden; }
.expand__frame { position: absolute; inset: 0; display: block; }
.expand__frame img { width: 100%; height: 100%; object-fit: cover; }
/* its call to action sits in the middle of the screen, over a soft dark glow so paper text reads on the painting's pale strokes */
.expand__cap { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); text-align: center; color: var(--paper); pointer-events: none; }
.expand__cta { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
/* a warm dark (not the blue-black ink, which greys on the cream paint), strong right out to the label's ends */
.expand__cta::before { content: ''; position: absolute; z-index: -1; inset: -40% -26%; background: radial-gradient(closest-side, rgba(24, 13, 10, .76), rgba(24, 13, 10, .62) 58%, rgba(24, 13, 10, 0)); pointer-events: none; }
.expand__cta .label { margin: 0; color: var(--paper); text-shadow: 0 0 10px rgba(24, 13, 10, .7), 0 1px 2px rgba(24, 13, 10, .5); }
.expand__title { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-weight: 350; font-size: clamp(3.5rem, 2rem + 8vw, 9rem); line-height: .95; letter-spacing: -.02em; }
.expand__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.expand__title .w i { display: inline-block; font-style: inherit; transform-origin: 0 100%; }
/* a gold brushstroke under the words, painted rather than ruled (the filter roughens its edges like bristles) */
.expand__stroke { display: block; width: clamp(15rem, 30vw, 30rem); height: auto; margin: .1rem auto 1.75rem; color: var(--gold); overflow: visible; }
/* the one action here, so the larger pill on the screen; a dark ring keeps its edge on the pale paint */
.btn.expand__btn { min-height: 58px; padding: .95em 2.2em; font-size: 1rem; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 1px rgba(11, 13, 17, .35), 0 10px 30px rgba(11, 13, 17, .4); }
.btn.expand__btn:hover { background: #D9B46E; }
/* with motion: a framed card that opens to the screen's edges, the painting easing back as it does (--k, 0 to 1, from site.js).
   The stage is the tall screen (browser bar hidden), so the painting really reaches every edge once the bar slides away;
   the section is one short screen longer, which is how long the stage stays pinned. The caption arrives once it is open. */
@media (prefers-reduced-motion: no-preference) {
  .html-js.motion .expand { --ex0: 16%; --ey0: 20%; height: 200vh; height: calc(var(--screen, 100svh) + var(--screen-l, 100lvh)); }
  /* the stage follows the live tall screen, so it always reaches every edge (a window made taller, an in-app frame growing);
     it sits inside the fixed-height section, so this never changes the page's length */
  .html-js.motion .expand__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; }
  .html-js.motion .expand__frame { clip-path: inset(calc(var(--ey0) * (1 - var(--k, 0))) calc(var(--ex0) * (1 - var(--k, 0))) round calc(4px * (1 - var(--k, 0)))); will-change: clip-path; }
  .html-js.motion .expand__frame img { transform: scale(calc(1 + .14 * (1 - var(--k, 0)))); will-change: transform; }
  /* the call to action is centred on the screen that shows: on a phone the browser's bottom bar covers the foot of the tall stage */
  .html-js.motion .expand__cap { bottom: 0; bottom: calc(100lvh - 100svh); }
  /* it arrives once the painting is open: the glow and the label, the words rising one by one, the button (the action, so it
     doesn't wait), then the brushstroke drawn under the words left to right. Leaving, it all goes at once */
  /* nothing in the middle of the painting can be clicked until it shows: a tap on the framed card stays on the page */
  .html-js.motion .expand__cta { pointer-events: none; }
  .html-js.motion .expand.is-open .expand__cta { pointer-events: auto; }
  .html-js.motion .expand__cta::before { opacity: 0; transition: opacity 400ms var(--ease); }
  .html-js.motion .expand__cta .label { opacity: 0; letter-spacing: .5em; transition: opacity 300ms var(--ease), letter-spacing 300ms var(--ease); }
  .html-js.motion .expand__title .w i { transform: translateY(115%) rotate(7deg); transition: transform 350ms var(--ease); }
  .html-js.motion .expand__stroke { clip-path: inset(0 100% 0 0); transition: clip-path 300ms var(--ease); }
  /* the button arrives on translate, leaving transform free for the magnetic effect (a shared, delayed transform froze it) */
  .html-js.motion .expand__btn { opacity: 0; translate: 0 14px; transition: opacity 300ms var(--ease), translate 300ms var(--ease), transform var(--t-fast) var(--ease), background-color var(--t-fast); }
  .html-js.motion .expand.is-open .expand__cta::before { opacity: 1; transition-duration: 900ms; }
  .html-js.motion .expand.is-open .expand__cta .label { opacity: 1; letter-spacing: .14em; transition-duration: 1200ms; }
  .html-js.motion .expand.is-open .expand__title .w i { transform: none; transition: transform 900ms var(--ease-out) calc(150ms + var(--i) * 110ms); }
  .html-js.motion .expand.is-open .expand__btn { opacity: 1; translate: none; transition: opacity 600ms var(--ease) 600ms, translate 800ms var(--ease-out) 600ms, transform var(--t-fast) var(--ease), background-color var(--t-fast); }
  .html-js.motion .expand.is-open .expand__stroke { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(.65, 0, .35, 1) 850ms; }
  /* tabbing to the button shows it all at once, open or not (a screen reader reads it either way). Keyboard focus only: a
     click focuses the link too, and would leave it all showing over the framed card on the way back up */
  .html-js.motion .expand__cap:has(:focus-visible) .expand__cta { pointer-events: auto; }
  .html-js.motion .expand__cap:has(:focus-visible) .expand__cta::before, .html-js.motion .expand__cap:has(:focus-visible) .expand__btn { opacity: 1; translate: none; transition: none; }
  .html-js.motion .expand__cap:has(:focus-visible) .expand__cta .label { opacity: 1; letter-spacing: .14em; transition: none; }
  .html-js.motion .expand__cap:has(:focus-visible) .expand__title .w i { transform: none; transition: none; }
  .html-js.motion .expand__cap:has(:focus-visible) .expand__stroke { clip-path: inset(0 0 0 0); transition: none; }
}
/* browsers without :has() fall back to any focus inside, which still keeps a tabbed-to button from being invisible */
@supports not selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    .html-js.motion .expand__cap:focus-within .expand__cta { pointer-events: auto; }
    .html-js.motion .expand__cap:focus-within .expand__cta::before, .html-js.motion .expand__cap:focus-within .expand__btn { opacity: 1; translate: none; transition: none; }
    .html-js.motion .expand__cap:focus-within .expand__cta .label { opacity: 1; letter-spacing: .14em; transition: none; }
    .html-js.motion .expand__cap:focus-within .expand__title .w i { transform: none; transition: none; }
    .html-js.motion .expand__cap:focus-within .expand__stroke { clip-path: inset(0 0 0 0); transition: none; }
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) { .html-js.motion .expand { --ex0: 22%; --ey0: 16%; } }

/* ---------- live Instagram posts (once CONFIG.INSTAGRAM_FEED is set) ---------- */
.mosaic--live .post { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--midnight); color: var(--paper); text-decoration: none; }
.mosaic--live .post img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.post__kind { position: absolute; top: .6rem; right: .6rem; padding: .3em .55em; border-radius: 2px; background: rgba(11, 13, 17, .66); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* the scrim is solid behind the caption itself and only fades above it, so captions read on pale posts too */
.post__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .9rem .9rem; background: linear-gradient(to top, rgba(11, 13, 17, .85) calc(100% - 1.75rem), rgba(11, 13, 17, 0)); font-size: var(--fs-meta); line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.post__cap span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post:hover .post__cap, .post:focus-visible .post__cap { opacity: 1; transform: none; }
.post:hover img, .post:focus-visible img { transform: scale(1.04); }
.post:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (hover: none) { .post__cap { display: none; } }
.studio__head .sample { align-self: flex-end; }
/* six tiles, narrower than the page on laptops, with room above and below so the drifting columns never touch the heading or the closing line */
.studio__head { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.knockout { margin-top: clamp(4.5rem, 10vw, 8rem); }
@media (min-width: 900px) { .mosaic { max-width: 62rem; } }

/* ---------- boxes that carry their own ground keep their own text colours when the page's text turns light ---------- */
.frame { --fg-meta: rgba(11, 13, 17, .72); --line-strong: rgba(11, 13, 17, .32); }
@media (max-width: 899.98px) {
  .pillar--courses, .pillar--workshops { --fg-meta: rgba(11, 13, 17, .72); --line: rgba(11, 13, 17, .14); }
}

/* ---------- Residents on phones ---------- */
/* the three sample portraits become a swipe row instead of a screen and a half of stacked cards; launch mode's empty frames are not shown on phones */
@media (max-width: 699.98px) {
  [data-mode="review"] .people.review-only { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .5rem; scrollbar-width: none; }
  [data-mode="review"] .people.review-only::-webkit-scrollbar { display: none; }
  .people.review-only > .person { flex: 0 0 72%; scroll-snap-align: start; }
  .people.launch-only { display: none; }
}

/* ---------- older browsers ---------- */
/* without overflow: clip (iOS before 16) the body's clip is ignored; the root's hidden overflow keeps the page from panning sideways and leaves sticky intact */
@supports not (overflow: clip) { html { overflow-x: hidden; } }