/* the page shell the preview is published in, as far as the site counts on it: no margin round the body,
   pictures no wider than their box, and a [hidden] element hidden whatever its display rule says */
body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Self-hosted web fonts: Marcellus (400) and Inter Tight (400, 500, 400 italic),
   the same families and subsets the site asked Google Fonts for. From Fontsource 5.3.0
   (SIL Open Font License 1.1, see the LICENSE files beside this one). build_mpa.py
   copies these files to dist/assets/fonts/ and inlines this CSS into the site stylesheet. */
/* marcellus-latin-ext-400-normal */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marcellus-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* marcellus-latin-400-normal */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marcellus-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-tight-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-tight-cyrillic-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-tight-greek-ext-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-ext-400-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* inter-tight-greek-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-400-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-tight-vietnamese-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-tight-latin-ext-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-tight-latin-400-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-tight-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-tight-cyrillic-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-tight-greek-ext-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-ext-500-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* inter-tight-greek-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-500-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-tight-vietnamese-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-tight-latin-ext-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-tight-latin-500-normal */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-tight-cyrillic-ext-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-tight-cyrillic-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-cyrillic-400-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-tight-greek-ext-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-ext-400-italic.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* inter-tight-greek-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-greek-400-italic.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-tight-vietnamese-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-vietnamese-400-italic.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-tight-latin-ext-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-tight-latin-400-italic */
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   RDC — tokens.css   (RDC-BUILD.md §2, verbatim)
   Nothing else belongs in this file.
   ========================================================================== */

:root {
  /* --- 2.1 Color ---------------------------------------------------------- */

  /* Brand — from the Art Direction Template, do not alter */
  --indigo:        #2E2268;
  --heritage:      #5B6FAA;
  --ivory:         #F5F0E8;
  --ink:           #1A1614;

  /* Derived — for hierarchy within the brand palette */
  --ink-secondary: #6B6052;
  --ink-tertiary:  #A89F90;
  --rule:          #DCD6CB;
  --rule-inverse:  #443878;
  --surface-muted: #EBE6DC;
  --lavender:      #EBE8F7;
  --ivory-on-indigo: #9E97CC;  /* 5.0:1 on indigo; #8E86BE was 4.1:1 */
  --heritage-on-indigo: #9BA8D4;  /* coda on indigo — heritage itself is 2.4:1 there */

  /* The inverse band is dark in BOTH modes, so anything sitting on it keeps
     ivory-family colour either way. --mark is the logo, which does flip. */
  --on-band: #F5F0E8;
  --mark:    #2E2268;

  /* The weave. Every mark is fully opaque; a mark that carries a piece of
     work is simply cut deeper than the rest of the pattern. */
  --motif:    #453A7C;   /* the plain weave */
  --motif-on: #221847;   /* mentor and consultant work — the house indigo */
  --motif-st: #152E52;   /* student work — deep Heritage */
  --motif-cl: #3B1F3E;   /* client work  — deep plum */

  /* Selection. Indigo on the light ground. In dark mode both the page ground
     and the band are dark, so one highlight serves both — and it uses the
     unremapped brand Heritage (#5B6FAA), because --heritage is deliberately
     lightened in dark mode for text contrast and would wash out under ivory. */
  --select-bg: var(--indigo);
  --select-fg: var(--on-band);
  --select-bg-band: #5B6FAA;   /* constant in both modes — the band is dark either way */

  /* --- 2.2 Type ----------------------------------------------------------- */

  /* Voice — Optima. A serifless roman: classical Roman proportion with every
     serif removed. Carries display, statement, section heads, coda, titles.
     Hierarchy comes from size and proportion, never from added weight, so the
     voice face stays at 400 throughout and never faux-bolds on the fallback. */
  --serif: Optima, 'Optima nova', 'URW Classico', Marcellus, 'Palatino Linotype', serif;

  /* Apparatus — Helvetica. Nav, labels, body, tables, numerals, fine print. */
  --sans:  'Helvetica Now Text', 'Helvetica Neue', Helvetica, 'Inter Tight', Arial, sans-serif;

  --t-display:   clamp(2rem, 3.8vw, 3.125rem);
  --t-statement: clamp(1.5rem, 2.8vw, 2.25rem);
  --t-section:   clamp(1.25rem, 1.9vw, 1.625rem);
  --t-sub:       1.25rem;
  --t-lede:      1.125rem;
  --t-body:      1.0625rem;
  --t-small:     0.9375rem;
  --t-micro:     0.75rem;

  /* --- 2.3 Space ---------------------------------------------------------- */

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  1rem;
  --s-4:  1.5rem;
  --s-5:  2rem;
  --s-6:  3rem;
  --s-7:  4.5rem;
  --s-8:  6rem;
  --s-9:  9rem;
  --s-10: 12rem;

  /* --- 2.4 Grid ----------------------------------------------------------- */

  --gutter: clamp(1.5rem, 5vw, 5rem);
  --max:    90rem;
  --cols:   12;
  --gap:    var(--s-5);
}

/* --- Reversed brand mode -------------------------------------------------
   Carried over from the homepage concept artifact: the ground becomes deep
   RDC indigo, type becomes ivory, and the inverse band deepens rather than
   flipping to ivory — so indigo stays dominant in both modes.
   Brand values themselves are untouched; only the derived set is remapped. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ivory:           #1B1544;   /* page ground */
    --ink:             #F5F0E8;
    --ink-secondary:   #B9B2D8;   /* 7.4:1 */
    --ink-tertiary:    #837BB0;   /* 3.8:1 — non-essential metadata only */
    --rule:            #3A3168;
    --surface-muted:   #241C57;
    --indigo:          #0F0A26;   /* the band deepens */
    --heritage:        #8B9AD0;   /* 5.4:1 on the dark ground */
    --rule-inverse:    #332B5E;
    --mark:            #F5F0E8;
    --motif:           #2A2350;
    --motif-on:        #171137;
    --motif-st:        #0E2038;
    --motif-cl:        #2A1430;
    --select-bg:       #5B6FAA;   /* brand Heritage, not the remapped --heritage */
  }
}

:root[data-theme="dark"] {
  --ivory:           #1B1544;
  --ink:             #F5F0E8;
  --ink-secondary:   #B9B2D8;
  --ink-tertiary:    #837BB0;
  --rule:            #3A3168;
  --surface-muted:   #241C57;
  --indigo:          #0F0A26;
  --heritage:        #8B9AD0;
  --rule-inverse:    #332B5E;
  --mark:            #F5F0E8;
  --motif:           #2A2350;
  --motif-on:        #171137;
  --motif-st:        #0E2038;
  --motif-cl:        #2A1430;
  --select-bg:       #5B6FAA;   /* brand Heritage, not the remapped --heritage */
}

/* ==========================================================================
   RDC — base.css   reset · typography defaults · focus
   No border-radius. No box-shadow. No gradients.
   ========================================================================== */

/* watermark tile — the geometric mark, ivory, for indigo grounds */
/* watermark tile — the R·D·C alphabet from build_svg.py, woven.
   Each row draws its neighbours' overlap so the tile joins seamlessly, and
   the second row is offset half a period to weave rather than stripe. */
:root { --wm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201102%20300%22%20width%3D%221102%22%20height%3D%22300%22%3E%3Cg%20fill%3D%22%23F5F0E8%22%20fill-rule%3D%22nonzero%22%3E%3Cg%20transform%3D%22translate%280%200%29%22%3E%3Cpath%20d%3D%22M-551%2C0L-451%2C0A100%2C100%200%200%201%20-551%2C100ZM-356.5%2C100A100%2C100%200%200%201%20-456.5%2C0L-356.5%2C0ZM-164%2C0A100%2C100%200%200%201%20-364%2C0ZM-195.5%2C100A100%2C100%200%200%201%204.5%2C100ZM0%2C0A100%2C100%200%200%201%20100%2C100L0%2C100ZM194.5%2C100L94.5%2C100A100%2C100%200%200%201%20194.5%2C0ZM187%2C100A100%2C100%200%200%201%20387%2C100ZM555.5%2C0A100%2C100%200%200%201%20355.5%2C0ZM551%2C0L651%2C0A100%2C100%200%200%201%20551%2C100ZM745.5%2C100A100%2C100%200%200%201%20645.5%2C0L745.5%2C0ZM938%2C0A100%2C100%200%200%201%20738%2C0ZM906.5%2C100A100%2C100%200%200%201%201106.5%2C100Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28551%20150%29%22%3E%3Cpath%20d%3D%22M-551%2C0L-451%2C0A100%2C100%200%200%201%20-551%2C100ZM-356.5%2C100A100%2C100%200%200%201%20-456.5%2C0L-356.5%2C0ZM-164%2C0A100%2C100%200%200%201%20-364%2C0ZM-195.5%2C100A100%2C100%200%200%201%204.5%2C100ZM0%2C0A100%2C100%200%200%201%20100%2C100L0%2C100ZM194.5%2C100L94.5%2C100A100%2C100%200%200%201%20194.5%2C0ZM187%2C100A100%2C100%200%200%201%20387%2C100ZM555.5%2C0A100%2C100%200%200%201%20355.5%2C0ZM551%2C0L651%2C0A100%2C100%200%200%201%20551%2C100ZM745.5%2C100A100%2C100%200%200%201%20645.5%2C0L745.5%2C0ZM938%2C0A100%2C100%200%200%201%20738%2C0ZM906.5%2C100A100%2C100%200%200%201%201106.5%2C100Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--select-bg); color: var(--select-fg); }
/* On the indigo grounds the light-mode default would be indigo on indigo.
   Pinned to the brand value rather than var(--heritage), which lightens in
   dark mode and would leave ivory type sitting on a pale blue. */
.band ::selection, .close--indigo ::selection, .footer ::selection
  { background: var(--select-bg-band); color: var(--on-band); }

:focus-visible {
  outline: 2px solid var(--heritage);
  outline-offset: 2px;
}

/* --- container ------------------------------------------------------------ */

.shell {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

/* full-bleed */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- type roles (§2.2, do not deviate) ------------------------------------ */

/* Optima is wide, open and short-descendered where Cormorant was narrow,
   spindly and deep. So: leading up (the old 1.12 gave a line box shorter than
   the descenders, which cropped every g and y under a selection highlight),
   tracking eased off (negative tracking crushes the flared terminals), and
   weight held at 400 throughout — Optima's presence comes from proportion,
   and 400 is also the only weight the Marcellus fallback really owns. */

.t-display {
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.008em;
  max-width: 22ch;
}

.t-statement {
  font-family: var(--serif);
  font-size: var(--t-statement);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
  max-width: 22ch;
}

.t-sectionhead {
  font-family: var(--serif);
  font-size: var(--t-section);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.002em;
}

.t-sub {
  font-family: var(--serif);
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.32;
}

.t-coda {
  font-family: var(--serif);
  font-size: var(--t-lede);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--heritage);
}

.t-lede {
  font-family: var(--sans);
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.5;
  max-width: 54ch;
}

.t-body { font-size: var(--t-body); line-height: 1.65; max-width: 68ch; }
.t-small { font-size: var(--t-small); line-height: 1.5; }

.t-eyebrow {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heritage);
}

.t-meta {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the Heritage Blue vertical bar, in RDC | Academy */
.bar {
  display: inline-block;
  width: 1px;
  height: 0.82em;
  background: var(--heritage);
  margin-inline: 0.42em;
  vertical-align: -0.02em;
}

/* --- links (§3.9) --------------------------------------------------------- */

.link {
  text-decoration: none;
  text-underline-offset: 4px;
  transition: text-decoration-color 120ms ease-out;
}
.link:hover { text-decoration: underline 1px; }

.arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--t-small);
}
.arrow span { transition: transform 120ms ease-out; }
.arrow:hover span { transform: translateX(4px); }
.arrow:hover { text-decoration: underline 1px; text-underline-offset: 4px; }

/* the only button. square. */
.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  padding: var(--s-3) var(--s-5);
  background: var(--indigo);
  color: var(--on-band);
  border: 0;
  transition: opacity 120ms ease-out;
}
.button:hover { opacity: 0.85; }
.button:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }
.button--ivory { background: var(--on-band); color: var(--indigo); }

/* In reversed mode --indigo deepens past the page ground, so a solid indigo
   button all but disappears against it (1.13:1). Heritage keeps it a button. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button:not(.button--ivory) {
    background: var(--heritage); color: var(--indigo);
  }
}
:root[data-theme="dark"] .button:not(.button--ivory) {
  background: var(--heritage); color: var(--indigo);
}

/* --- pending (§3.10) — never a skeleton bar ------------------------------- */

.pending {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   RDC — components.css   (RDC-BUILD.md §3)
   ========================================================================== */

/* --- 3.1 Header ----------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ivory);
  padding-block: var(--s-4);
}
.header__inner {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}
.header__mark { color: var(--mark); }
.header__mark svg { height: 56px; width: auto; }
.header__nav { display: flex; align-items: center; gap: var(--s-5); }
.header__nav a {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 400;
  color: var(--ink); padding-block: 2px;
}
.header__nav a[aria-current="page"] {
  border-bottom: 1px solid var(--heritage);
  padding-bottom: 4px;
}

/* --- 3.2 Hero ------------------------------------------------------------- */

.hero { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.hero__eyebrow { display: block; margin-bottom: var(--s-2); }
.hero__title { grid-column: 1 / span 8; }
.hero__lede  { grid-column: 1 / span 6; margin-top: var(--s-5); color: var(--ink); }

/* Contact hero: eyebrow left, meta right, on one rule */
.hero__rail {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6);
}
.hero__rail .t-meta { color: var(--ink-tertiary); }

/* --- 3.3 InverseBand ------------------------------------------------------ */

.band {
  position: relative; isolation: isolate;
  background: var(--indigo); color: var(--on-band);
  padding-block: var(--s-9);
}
.band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--wm); background-repeat: repeat;
  background-size: 420px auto; background-position: 50% 0; opacity: 0.06;
}
.band > * { position: relative; z-index: 1; }
.band__statement { grid-column: 1 / span 7; }
.band__sub {
  grid-column: 1 / span 7; margin-top: var(--s-5);
  max-width: 48ch; color: var(--ivory-on-indigo);
}
.band__coda { grid-column: 1 / span 7; margin-top: var(--s-6); }
.band:not(.band--ivory) .t-coda { color: var(--heritage-on-indigo); }

/* the ivory variant, for pages whose single indigo band is spent elsewhere */
.band--ivory {
  background: transparent; color: var(--ink);
  border-top: 1px solid var(--rule);
}
.band--ivory::before { display: none; }
.band--ivory .band__sub { color: var(--ink-secondary); }

/* --- 3.4 SplitPair -------------------------------------------------------- */
/* The rule sits on the page centre. A column border would land half a gutter
   off it, which reads as a mistake at this scale. */

.split { grid-column: 1 / -1; position: relative; }
.split::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--rule); pointer-events: none;
}
.split__a {
  grid-column: 1 / span 6;
  padding-right: calc(var(--gap) / 2 + var(--s-6));
}
.split__b {
  grid-column: 7 / span 6;
  padding-left: calc(var(--gap) / 2 + var(--s-6));
}
.split__name { margin-bottom: var(--s-4); }
.split__line { color: var(--ink-secondary); max-width: 34ch; }
.split__link { margin-top: var(--s-5); display: inline-flex; }

/* on indigo */
.band .split::after { background: var(--rule-inverse); }

/* --- 3.5 LadderTable ------------------------------------------------------ */

.ladder { grid-column: 1 / span 12; }
.ladder__row {
  display: grid; grid-template-columns: 4fr 5fr 3fr;
  gap: var(--s-5);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-4);
  align-items: baseline;
}
.ladder__row:last-child { border-bottom: 1px solid var(--rule); }
.ladder__service { font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; color: var(--ink); line-height: 1.32; }
.ladder__desc { font-size: var(--t-body); color: var(--ink-secondary); }
.ladder__terms {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-tertiary); text-align: right;
}

/* --- 3.6 WorkGrid + WorkTile ---------------------------------------------- */

.workgrid {
  grid-column: 1 / span 12;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tile__media {
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease-out; }
.tile:hover .tile__media img { opacity: 0.85; }
.tile__await {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary);
}
.tile__caption {
  margin-top: var(--s-3);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
}
/* Bumped from --t-body to --t-sub: the old rank came from 600 weight against
   17px body, and with the voice face held at 400 the size has to carry it. */
.tile__title { font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; color: var(--ink); line-height: 1.32; }
.tile__author { display: block; margin-top: 4px; color: var(--heritage); }
.tile__tag { color: var(--ink-tertiary); white-space: nowrap; }

/* filters — text links, never pills */
.filters { grid-column: 1 / span 12; display: flex; gap: var(--s-5); margin-bottom: var(--s-6); }
.filters a { font-family: var(--sans); font-size: var(--t-small); color: var(--ink); padding-bottom: 4px; }
.filters a[aria-pressed="true"] { border-bottom: 1px solid var(--heritage); }

/* --- section scaffolding -------------------------------------------------- */

.section { padding-block: 0; margin-top: var(--s-9); }
.hero + .section { margin-top: 0; }
.section__label { grid-column: 1 / span 12; margin-bottom: var(--s-4); }
.section__labelrow {
  grid-column: 1 / span 12; margin-bottom: var(--s-5);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
}
.section__body { grid-column: 1 / span 12; }

/* prose column — About origin */
.prose { grid-column: 1 / span 7; }
.prose p + p { margin-top: var(--s-3); }

/* --- 3.7 CloseBlock ------------------------------------------------------- */

.close { margin-top: var(--s-10); padding-block: var(--s-9); }
.close__title { grid-column: 1 / span 7; }
.close__line { grid-column: 1 / span 7; margin-top: var(--s-4); max-width: 48ch; }
.close__cta { grid-column: 1 / span 7; margin-top: var(--s-6); }
.close--indigo { position: relative; isolation: isolate; background: var(--indigo); color: var(--on-band); }
.close--indigo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--wm); background-repeat: repeat;
  background-size: 420px auto; background-position: 50% 0; opacity: 0.06;
}
.close--indigo > * { position: relative; z-index: 1; }
.close--indigo .close__line { color: var(--ivory-on-indigo); }
.close--ivory { border-top: 1px solid var(--rule); }
.close--ivory .close__line { color: var(--ink-secondary); }

/* --- 3.8 Footer ----------------------------------------------------------- */

.footer { background: var(--indigo); color: var(--on-band); padding-top: var(--s-8); }
.footer__col { grid-column: span 3; }
.footer__col h4 { margin-bottom: var(--s-4); color: var(--heritage); }
.footer__col li + li { margin-top: var(--s-2); }
.footer__col a, .footer__col span { font-size: var(--t-small); color: var(--on-band); }
.footer__positioning {
  grid-column: 1 / span 12; margin-top: var(--s-8);
  font-family: var(--serif); font-size: var(--t-lede); font-style: italic; color: var(--on-band);
}

/* the signature moment — the geometric alphabet, edge to edge.
   R = two quarter discs, D = dome, C = bowl; radius == strip height.
   Alternate units mirrored. The strip is built to the viewport (see the
   footer-rule script): the count of units rises and falls with the width,
   always a multiple of three, so a unit stays about the same size on screen
   whatever the window or zoom. Never set a height — it follows the units. */
.footer-rule {
  margin-top: var(--s-8);
  width: 100vw; margin-inline: calc(50% - 50vw);
  color: var(--on-band); opacity: 0.9; line-height: 0;
}
.footer-rule svg { width: 100%; height: auto; display: block; }

/* --- 3.9 Hero mark — the page's sublogo, right of the hero ---------------- */
.hero__mark {
  grid-column: 9 / span 3; grid-row: 1 / span 2;
  align-self: center; justify-self: center;
  color: var(--heritage);
}
.hero__mark svg { height: var(--mark-h, 124px); width: auto; max-width: 100%; }

/* --- 3.11 Letter lens ----------------------------------------------------
   Every sublogo is built from the same three glyphs. Hover isolates one;
   a click carries that same glyph to the centre of the screen. */

.hero__mark svg { overflow: visible; }
.ltr {
  cursor: pointer; outline: none;
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity 260ms ease-out, fill 260ms ease-out,
              transform 320ms cubic-bezier(.22,.66,.24,1);
}
.hero__mark svg:hover .ltr, .hero__mark svg:focus-within .ltr { opacity: .38; }
.hero__mark svg .ltr:hover, .hero__mark svg .ltr:focus-visible {
  opacity: 1; fill: var(--indigo); transform: scale(1.03);
}
.ltr:focus-visible { outline: 2px solid var(--heritage); outline-offset: 6px; }

/* the About mark is the R alone — its two arcs are the two halves of the
   practice, so they part rather than swell */
.hero__mark svg .ltr[data-letter="R1"]:hover,
.hero__mark svg .ltr[data-letter="R1"]:focus-visible { transform: translate(-6px, -6px); }
.hero__mark svg .ltr[data-letter="R2"]:hover,
.hero__mark svg .ltr[data-letter="R2"]:focus-visible { transform: translate(6px, 6px); }
.ltr[data-lifted] { opacity: 0 !important; transition: opacity 180ms ease-out; }

#lens {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; visibility: hidden; pointer-events: none;
  background: color-mix(in srgb, var(--ivory) 86%, transparent);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: opacity 560ms cubic-bezier(.4,0,.2,1),
              backdrop-filter 660ms cubic-bezier(.4,0,.2,1),
              -webkit-backdrop-filter 660ms cubic-bezier(.4,0,.2,1),
              visibility 0s linear 620ms;
}
#lens[data-on] {
  opacity: 1; visibility: visible; pointer-events: auto; cursor: zoom-out;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  transition-delay: 0s, 0s, 0s, 0s;
}
#lens .inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); max-width: 40rem; }
#lensfig { transform-origin: 0 0; will-change: transform; }
#lensfig.travel { transition: transform 720ms cubic-bezier(.4,0,.2,1); }
#lensmark { height: min(26vh, 196px); width: auto; color: var(--indigo); }
#lens .text {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  opacity: 0; transform: translateY(14px);
  transition: opacity 560ms ease-out, transform 680ms cubic-bezier(.4,0,.2,1);
}
#lens[data-on] .text { opacity: 1; transform: none; transition-delay: 300ms; }
#lens .label { text-align: center; }
#lens .label .glyph { color: var(--heritage); margin-right: .4em; }
#lens .body { text-align: center; max-width: 50ch; color: var(--ink-secondary); }
#lens .dismiss { color: var(--ink-tertiary); margin-top: var(--s-2); }
#lens .dismiss [data-coarse] { display: none; }
@media (pointer: coarse) {
  #lens .dismiss [data-fine] { display: none; }
  #lens .dismiss [data-coarse] { display: inline; }
}

/* on the dark ground indigo disappears — the isolate flips to ivory */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__mark svg .ltr:hover,
  :root:not([data-theme="light"]) .hero__mark svg .ltr:focus-visible { fill: var(--ink); }
  :root:not([data-theme="light"]) #lensmark { color: var(--ink); }
}
:root[data-theme="dark"] .hero__mark svg .ltr:hover,
:root[data-theme="dark"] .hero__mark svg .ltr:focus-visible { fill: var(--ink); }
:root[data-theme="dark"] #lensmark { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #lens, #lens .text, #lensfig.travel, .ltr { transition-duration: 1ms !important; }
}

/* --- 3.12 Theme toggle ---------------------------------------------------
   The monogram and the pill are the same three glyphs in different places:
   R and D sit one unit right in the pill, and C swings from the back of the
   word to the front. So the switch is a rearrangement, not a swap. */

.header__right { display: flex; align-items: center; gap: var(--s-5); }

.tt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--mark); font-family: var(--sans); line-height: 1;
}
.tt:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.tt__mark { height: 22px; width: auto; overflow: visible; }

.tg { transition: transform 620ms cubic-bezier(.4,0,.2,1); }

/* The pill arrangement is bound to the same query that drives every colour
   token, so the button can never disagree with the page it sits on. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg--c { transform: translateX(-202.06px); }
  :root:not([data-theme="light"]) .tg--r,
  :root:not([data-theme="light"]) .tg--d { transform: translateX(102.05px); transition-delay: 70ms; }
}
:root[data-theme="dark"] .tg--c { transform: translateX(-202.06px); }
:root[data-theme="dark"] .tg--r,
:root[data-theme="dark"] .tg--d { transform: translateX(102.05px); transition-delay: 70ms; }

/* one word only, and it changes side as well as word */
.tt__cap {
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-tertiary); height: 0.6rem;
  opacity: 0; transition: opacity 380ms ease;
}
.tt__cap--bot { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tt__cap--bot { opacity: 0; }
  :root:not([data-theme="light"]) .tt__cap--top { opacity: 1; }
}
:root[data-theme="dark"] .tt__cap--bot { opacity: 0; }
:root[data-theme="dark"] .tt__cap--top { opacity: 1; }
.tt:hover .tt__cap { color: var(--heritage); }

/* the ground changes with the same grace as everything else */
body, .menu, .band, .close--indigo, .footer, .tile__media, .header__mark {
  transition: background-color 420ms ease, color 420ms ease;
}

.footer__base {
  padding-block: var(--s-5) var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  color: var(--ivory-on-indigo);
}

/* --- 6. Responsive -------------------------------------------------------- */

@media (max-width: 1023px) {
  .hero__title { grid-column: 1 / span 12; }
  .hero__lede  { grid-column: 1 / span 10; }
  .hero__mark  { grid-column: 1 / span 12; grid-row: auto;
                 justify-self: start; margin-top: var(--s-6); }
  .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.75); }
  .band__statement, .band__sub, .band__coda,
  .close__title, .close__line, .close__cta { grid-column: 1 / span 12; }
  .split::after { display: none; }
  .split__a { grid-column: 1 / span 12; padding-right: 0; }
  .split__b {
    grid-column: 1 / span 12; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: var(--s-6); margin-top: var(--s-6);
  }
  .band .split__b { border-top-color: var(--rule-inverse); }
  .workgrid, .workgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose { grid-column: 1 / span 12; }
  .footer__col { grid-column: span 4; }
  .section, .close { margin-top: var(--s-7); }
}

@media (max-width: 767px) {
  :root { --cols: 4; --gutter: 1.5rem; }
  .hero__title, .hero__lede, .band__statement, .band__sub, .band__coda,
  .close__title, .close__line, .close__cta, .split__a, .split__b,
  .ladder, .workgrid, .filters, .section__label, .section__labelrow,
  .section__body, .prose, .footer__positioning { grid-column: 1 / span 4; }
  .hero__mark { grid-column: 1 / span 4; }
  .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.62); }
  .workgrid, .workgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .ladder__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .ladder__terms { text-align: left; }
  .footer__col { grid-column: span 4; }
  .footer__col + .footer__col { margin-top: var(--s-6); }
}


/* ---- mockup chrome: hash routing, mobile menu, filter empty state -------- */
.page[hidden] { display: none !important; }

/* --- 3.16 Retracting header ----------------------------------------------
   Reading is the point; the navigation is not. It leaves on the way down the
   page and comes back the moment you scroll up, reach for the top of the
   screen, or tab into it. It never leaves while the menu is open, and never
   at the top of a page. */
.header { transition: transform 380ms cubic-bezier(.4, 0, .2, 1),
                      border-color 120ms ease-out,
                      background-color 420ms ease;
          border-bottom: 1px solid transparent; }
.header.is-scrolled { border-bottom-color: var(--rule); }
.header[data-away] { transform: translateY(-100%); }


.header__menu, .menu__close {
  display: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-small); color: var(--ink);
}
.menu { position: fixed; inset: 0; z-index: 100; background: var(--ivory); }
.menu__inner { padding: var(--s-4) var(--gutter); height: 100%; }
.menu__close { display: block; margin-left: auto; }
.menu nav { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-8); }
.menu nav a { font-family: var(--serif); font-size: var(--t-section); font-weight: 400; color: var(--ink); line-height: 1.28; }

@media (max-width: 899px) {
  .header__nav { display: none; }
  .header__menu { display: block; }
}

.work-empty { grid-column: 1 / -1; padding-block: var(--s-7); }

/* ---- intro: the mark draws itself, then flies into the nav slot --------- */
#intro {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ivory); display: grid; place-items: center;
}
#intro[hidden] { display: none !important; }
#intro svg {
  width: min(560px, 74vw); height: auto; color: var(--mark);
  overflow: visible; will-change: transform;
}
#intro .mono { stroke: currentColor; }
#intro .txt  { fill: currentColor; }
#intro.flip svg { transition: transform .95s cubic-bezier(.65, 0, .2, 1); }
#navlogo { transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  #intro.flip svg { transition: none; }
}

/* --- 3.17 Framed sections -------------------------------------------------
   The indigo boxes used to run edge to edge. Framing them leaves a margin of
   page on either side, so each reads as an object set down on the page rather
   than a band cutting across it. .bleed still does its job everywhere else;
   these two just opt out of it. */

.band.bleed, .close.bleed, .band:not(.band--ivory) {
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  margin-inline: auto;
}

/* --- 3.15 Bring with you -------------------------------------------------
   The same gesture as the sublogo letters: hovering one dims its neighbours,
   clicking lifts it to the centre of the screen. A list of three, read the
   way the marks are read. */

.bring { margin-top: var(--s-4); }
.bring__item { border-top: 1px solid var(--rule); padding-block: var(--s-3); }
.bring__t {
  display: inline-block; cursor: pointer; outline: none;
  transform-origin: left center;
  transition: opacity 260ms ease-out, color 260ms ease-out,
              transform 320ms cubic-bezier(.22,.66,.24,1);
}
.bring:hover .bring__t { opacity: .38; }
.bring .bring__t:hover, .bring .bring__t:focus-visible {
  opacity: 1; color: var(--indigo); transform: scale(1.03);
}
.bring__t:focus-visible { outline: 2px solid var(--heritage); outline-offset: 6px; }
.bring__t[data-lifted] { opacity: 0 !important; transition: opacity 180ms ease-out; }

/* the lens carries a line of type instead of a glyph for these */
#lensline {
  display: none;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.2;
  letter-spacing: -0.012em; color: var(--indigo);
  max-width: 18ch; text-align: center;
}
#lensfig[data-mode="text"] #lensmark { display: none; }
#lensfig[data-mode="text"] #lensline { display: block; }

/* on the dark ground indigo disappears, exactly as it does for the marks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bring .bring__t:hover,
  :root:not([data-theme="light"]) .bring .bring__t:focus-visible { color: var(--ink); }
  :root:not([data-theme="light"]) #lensline { color: var(--ink); }
}
:root[data-theme="dark"] .bring .bring__t:hover,
:root[data-theme="dark"] .bring .bring__t:focus-visible { color: var(--ink); }
:root[data-theme="dark"] #lensline { color: var(--ink); }

/* --- 3.13 People ---------------------------------------------------------
   Portraits in About are doors. Each opens a page carrying that person's
   practice, publications and press. */

.ptile { display: block; cursor: pointer; }
.ptile .tile__media { aspect-ratio: 1 / 1; }
.ptile__name {
  display: block; margin-top: var(--s-3);
  font-family: var(--serif); font-size: var(--t-sub); font-weight: 400;
  line-height: 1.32; color: var(--ink);
}
.ptile__role { display: block; margin-top: 4px; color: var(--heritage); }
.ptile:hover .ptile__name { text-decoration: underline 1px; text-underline-offset: 4px; }
.ptile:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }

.person__portrait { grid-column: 1 / span 4; }
.person__intro    { grid-column: 6 / span 7; }
.person__portrait .tile__media { aspect-ratio: 1 / 1; }
.person__role  { margin-top: var(--s-3); color: var(--heritage); }
.person__lede  { margin-top: var(--s-4); }
.person__links { margin-top: var(--s-5); display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* a dated row — publications, press, anything with year / title / source */
.entry {
  display: grid; grid-template-columns: 5rem 1fr 12rem;
  gap: var(--s-5); align-items: baseline;
  border-top: 1px solid var(--rule); padding-block: var(--s-4);
}
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry__year {
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: 0.08em;
  color: var(--ink-tertiary); font-variant-numeric: tabular-nums;
}
.entry__title { font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; line-height: 1.32; }
.entry__where { display: block; margin-top: 4px; color: var(--ink-secondary); }
.entry__meta {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-tertiary); text-align: right;
}

/* --- 3.14 Booking --------------------------------------------------------
   Calendly draws its own iframe. If it cannot load — offline, blocked, or
   no link set yet — the panel says so plainly instead of sitting empty. */

.cal { border: 1px solid var(--rule); background: var(--surface-muted); }
.cal__mount { min-height: 700px; }
.cal__note { padding: var(--s-6); }
.cal__note p + p { margin-top: var(--s-3); }
.cal__note .button { margin-top: var(--s-5); }
.cal__steps { margin-top: var(--s-4); }
.cal__steps li {
  border-top: 1px solid var(--rule); padding-block: var(--s-3);
  font-size: var(--t-small); color: var(--ink-secondary);
}
.cal__steps li b { color: var(--ink); font-weight: 500; }
.cal__alt {
  border-top: 1px solid var(--rule);
  padding: var(--s-3) var(--s-6);
  color: var(--ink-tertiary);
}

@media (max-width: 1023px) {
  .person__portrait { grid-column: 1 / span 5; }
  .person__intro { grid-column: 1 / span 12; margin-top: var(--s-5); }
  .entry { grid-template-columns: 4rem 1fr; }
  .entry__meta { grid-column: 2; text-align: left; margin-top: var(--s-2); }
}
@media (max-width: 767px) {
  .person__portrait, .person__intro { grid-column: 1 / span 4; }
  .entry { grid-template-columns: 1fr; gap: var(--s-2); }
  .entry__meta { grid-column: 1; text-align: left; margin-top: 0; }
}

/* the filter is the only stateful control on the site */
.filters a { cursor: pointer; }


/* ==========================================================================
   RDC — v2 additions   (iteration on the first build; the original file is
   untouched — this is a second artifact built beside it)
   ========================================================================== */

[hidden]:not([hidden="until-found" i]) { display: none !important; }
.header { top: env(safe-area-inset-top, 0px); }

/* the pill's tiny caption never made the contrast cut — one step up */
.tt__cap { font-size: 0.5625rem; }

/* --- 4.1 Embodied Works, rebuilt ------------------------------------------
   The frame is the sentence. In the first build each live phrase breathed
   between lower case and capitals, letter by letter — and capitals are wider,
   so every beat re-wrapped the paragraph and the reader lost their place.

   Now the sentence never moves. The three phrases are the coloured thread
   through it; hovering one underlines it, lights the marks that embody it,
   slows the weave, and lets its other wordings pass one at a time on a
   reserved line beneath — so the play happens beside the sentence, never
   inside it. Opening a work covers the statement rather than replacing it:
   the stage is measured once for its tallest occupant and held there. */

.gal { position: relative; isolation: isolate; overflow: hidden; min-height: 34rem; }
.gal::before { display: none; }

.motif {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
}
.mrow { overflow: hidden; pointer-events: auto; }
.mrow__belt { display: flex; width: max-content; will-change: transform; }

.mu path {
  fill: var(--motif);
  transform-box: view-box; transform-origin: 0 0;
  transition: fill 420ms ease-out, transform 700ms cubic-bezier(.34,.02,.2,1);
}
.mu[data-kind] { cursor: pointer; }
.mu[data-kind="mentor"]     path,
.mu[data-kind="consultant"] path { fill: var(--motif-on); }
.mu[data-kind="student"]    path { fill: var(--motif-st); }
.mu[data-kind="client"]     path { fill: var(--motif-cl); }
.mu:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }

/* the gather: D is already the top half of a circle and C the bottom half, so
   they only have to meet; the two R quarters fold into the same centre */
.mu[data-on] .p-d  { transform: translate(134.25px, 0px)  scale(.5); }
.mu[data-on] .p-c  { transform: translate(50px, 49.4px)   scale(.5); }
.mu[data-on] .p-r1,
.mu[data-on] .p-r2 { transform: translate(277.75px, 50px) scale(0); }
.mu[data-on] path { fill: var(--on-band); }
.mu[data-lift] { visibility: hidden; }

/* what a mark becomes once it has been chosen */
.puck {
  position: absolute; z-index: 2; pointer-events: none; left: 0; top: 0;
  width: var(--pw, 96px); height: var(--ph, 96px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 320ms ease-out,
              left 740ms cubic-bezier(.34,.02,.2,1), top 740ms cubic-bezier(.34,.02,.2,1),
              width 740ms cubic-bezier(.34,.02,.2,1), height 740ms cubic-bezier(.34,.02,.2,1);
}
.puck[data-on] { opacity: 1; pointer-events: auto; }
.puck[data-still] { transition: opacity 320ms ease-out; }
.puck__disc, .puck__shot { position: absolute; inset: 0; transition: opacity 560ms ease-out; }
.puck__disc { color: var(--heritage-on-indigo); }
.puck__disc svg { width: 100%; height: 100%; display: block; }
.puck__shot { opacity: 0; background: var(--surface-muted); display: grid; place-items: center; overflow: hidden; }
.puck__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puck__shot span {
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.puck[data-shot] .puck__disc { opacity: 0; }
.puck[data-shot] .puck__shot { opacity: 1; }
.puck__go {
  position: absolute; inset: 0; display: grid; place-items: end center;
  padding-bottom: var(--s-4); opacity: 0; pointer-events: none;
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-band); text-decoration: none;
  background: rgba(26,22,20,.42);
  transition: opacity 320ms ease-out;
}
.puck[data-shot] .puck__go { pointer-events: auto; }
.puck[data-shot]:hover .puck__go, .puck__go:focus-visible { opacity: 1; }

/* the text half */
.gal__text { grid-column: 1 / span 6; position: relative; z-index: 1; }
.gal__stage { position: relative; }
.gal__statement { transition: opacity 420ms ease-out, color 320ms ease-out; }
.galwork {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
  opacity: 0; pointer-events: none; transition: opacity 420ms ease-out 120ms;
}
.galwork__t { color: var(--on-band); }
.galwork__d {
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.55;
  letter-spacing: 0; margin-top: var(--s-4); max-width: 44ch;
  color: var(--ivory-on-indigo);
}
.gal[data-open] .galwork { opacity: 1; }
.gal[data-open] .gal__statement { opacity: 0; pointer-events: none; }

/* the reserved line beneath: the phrase's other wordings, or a work's meta */
.gal__meta {
  min-height: 1.6em; margin-top: var(--s-4);
  display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: baseline;
  color: var(--heritage-on-indigo);
}
.gal__alt { font-family: var(--serif); font-style: italic; font-size: var(--t-lede); letter-spacing: 0; text-transform: none; }
.gal__alt em { font-style: normal; color: var(--ivory-on-indigo); margin-right: .4em; }
.gal__alt span { display: inline-block; opacity: 0; transition: opacity 360ms ease-out; }
.gal__alt span[data-in] { opacity: 1; }
.gal__hint { min-height: 2.2em; margin-top: var(--s-5); color: var(--ivory-on-indigo); }
.gal__close {
  background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-band);
  border-bottom: 1px solid var(--heritage-on-indigo);
}

/* the live phrases — the coloured thread, still */
.ph {
  cursor: pointer; color: var(--heritage-on-indigo);
  border-bottom: 1px solid transparent;
  transition: color 320ms ease-out, opacity 320ms ease-out, border-color 320ms ease-out;
}
.gal[data-word] .ph:not([data-on]) { opacity: .45; }
.gal[data-word] .gal__statement { color: var(--ivory-on-indigo); }
.ph[data-on] { border-bottom-color: var(--heritage-on-indigo); }
.ph:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }

@media (max-width: 1023px) {
  .gal__text { grid-column: 1 / span 12; }
  /* on a narrow band the opened work sits below the words, so the band keeps room for it */
  .gal { padding-bottom: calc(var(--s-9) + 18rem); }
}
@media (max-width: 767px) { .gal__text { grid-column: 1 / span 4; } }

/* --- 4.2 The Pairing (Academy) -------------------------------------------
   The Academy's premise in one picture: what students come to learn on the
   left, the people still practising it on the right, a thread between each
   pair. Resting, the whole web is faintly there; hovering either side draws
   its threads and lets the rest step back. */

.pair { grid-column: 1 / span 12; display: grid; grid-template-columns: 5fr 2fr 5fr; position: relative; }
.pair__col { list-style: none; margin: 0; padding: 0; }
#pair-a { grid-column: 1; } #pair-b { grid-column: 3; }
.pair__head { display: block; margin-bottom: var(--s-3); }
.pair__item {
  display: block; border-top: 1px solid var(--rule); padding-block: var(--s-3);
  font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; line-height: 1.32;
  color: var(--ink); cursor: default; outline: none;
  transition: color 260ms ease-out, opacity 260ms ease-out;
}
a.pair__item { cursor: pointer; }
.pair__item:last-child { border-bottom: 1px solid var(--rule); }
.pair__item small {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em;
  text-transform: uppercase; color: var(--heritage);
}
.pair__item--soon { color: var(--ink-tertiary); }
.pair__item--soon small { color: var(--ink-tertiary); }
.pair[data-live] .pair__item:not([data-on]) { opacity: .32; }
.pair__item[data-on] { color: var(--indigo); }
.pair__item:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.pair__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pair__lines path { fill: none; stroke: var(--heritage); stroke-width: 1; opacity: .18; transition: opacity 300ms ease-out; }
.pair[data-live] .pair__lines path { opacity: .06; }
.pair[data-live] .pair__lines path[data-on] { opacity: 1; }
.pair__note { grid-column: 1 / span 12; margin-top: var(--s-4); min-height: 1.6em; color: var(--ink-secondary); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pair__item[data-on] { color: var(--ink); }
}
:root[data-theme="dark"] .pair__item[data-on] { color: var(--ink); }

@media (max-width: 767px) {
  .pair { grid-template-columns: 1fr; gap: var(--s-6); }
  #pair-a, #pair-b { grid-column: 1; }
  .pair__lines { display: none; }
}

/* --- 4.3 The ladder, live (Atelier) ----------------------------------------
   The engagements in order. Hovering a step shows how far along it sits:
   the steps before it stay lit and the rail on the left fills down to it.
   The consultation is the step that credits forward, and hovering it — or
   either step it credits into — shows the credit on the row itself. */

.ladder { grid-column: 1 / span 12; position: relative; }
.ladder__row {
  display: grid; grid-template-columns: 3rem 4fr 5fr 3fr;
  gap: var(--s-5); border-top: 1px solid var(--rule); padding-block: var(--s-4);
  align-items: baseline; position: relative; cursor: default;
  transition: opacity 260ms ease-out;
}
.ladder__row:last-child { border-bottom: 1px solid var(--rule); }
.ladder__n {
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em;
  color: var(--ink-tertiary); font-variant-numeric: tabular-nums; position: relative;
  transition: color 260ms ease-out;
}
/* the rail: each row carries its own segment, lit when the row is done */
.ladder__n::before {
  content: ""; position: absolute; left: 3px; top: -1.7rem; bottom: -1.7rem; width: 1px;
  background: var(--heritage); opacity: 0; transition: opacity 260ms ease-out;
}
.ladder__row[data-done] .ladder__n::before, .ladder__row[data-here] .ladder__n::before { opacity: 1; }
.ladder__row[data-here] .ladder__n::before { bottom: 50%; }
.ladder__row:first-child[data-done] .ladder__n::before,
.ladder__row:first-child[data-here] .ladder__n::before { top: 50%; }
.ladder__n::after {
  content: ""; position: absolute; left: 0; top: .3em; width: 7px; height: 7px;
  background: var(--rule); transition: background 260ms ease-out;
}
.ladder__row[data-done] .ladder__n::after, .ladder__row[data-here] .ladder__n::after { background: var(--heritage); }
.ladder__n span { padding-left: 1.1rem; }
.ladder__row[data-done] .ladder__n, .ladder__row[data-here] .ladder__n { color: var(--heritage); }
.ladder[data-live] .ladder__row:not([data-done]):not([data-here]):not([data-credit]) { opacity: .4; }
.ladder__service { font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; color: var(--ink); line-height: 1.32; }
.ladder__desc { font-size: var(--t-body); color: var(--ink-secondary); }
.ladder__terms {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-tertiary); text-align: right; position: relative;
}
.ladder__terms b { display: block; font-weight: 400; color: var(--heritage); opacity: 0; transition: opacity 260ms ease-out; margin-top: 4px; }
.ladder__row[data-credit] .ladder__terms b { opacity: 1; }
.ladder__row[data-credit] .ladder__service { color: var(--heritage); }
.ladder__note { grid-column: 1 / span 12; margin-top: var(--s-4); min-height: 3.2em; color: var(--ink-secondary); }
.ladder__note b { font-weight: 400; color: var(--ink); }

@media (max-width: 767px) {
  .ladder__row { grid-template-columns: 3rem 1fr; gap: var(--s-2) var(--s-4); }
  .ladder__n { grid-row: 1 / span 3; }
  .ladder__terms { text-align: left; }
}

/* --- 4.4 Grid / Index (Work) ----------------------------------------------
   Two ways to read the same room. The grid is for looking; the index is for
   finding — every piece on one line, and a preview that keeps pace with the
   row under the pointer. */

.worktools {
  grid-column: 1 / span 12; margin-bottom: var(--s-6);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.worktools .filters { margin-bottom: 0; grid-column: auto; }
.views { display: flex; gap: var(--s-4); }
.views button {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-small); color: var(--ink-tertiary);
  border-bottom: 1px solid transparent;
}
.views button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--heritage); }
.views button:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }

.workindex { grid-column: 1 / span 12; position: relative; }
.workindex[hidden] { display: none !important; }
.workindex__rows { padding-right: calc(220px + var(--s-6)); }
.wrow {
  display: grid; grid-template-columns: 3rem 1fr 1fr 9rem 9.5rem;
  gap: var(--s-4); align-items: baseline;
  border-top: 1px solid var(--rule); padding-block: var(--s-3);
  transition: opacity 240ms ease-out; cursor: default;
}
.wrow:last-child { border-bottom: 1px solid var(--rule); }
.wrow__n { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.wrow__t { font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; line-height: 1.32; color: var(--ink); }
.wrow__a { font-size: var(--t-small); color: var(--heritage); }
.wrow__c, .wrow__k { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); }
.wrow__k { text-align: right; }
.workindex[data-live] .wrow:not([data-on]) { opacity: .4; }
.workpeek {
  position: absolute; right: 0; top: 0; width: 220px; pointer-events: none;
  opacity: 0; transition: opacity 260ms ease-out, top 420ms cubic-bezier(.22,.66,.24,1);
}
.workpeek[data-on] { opacity: 1; }
.workpeek .tile__media { aspect-ratio: 4 / 5; }
.workpeek__cap { margin-top: var(--s-2); font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); }
.work-count { grid-column: 1 / span 12; margin-top: var(--s-4); color: var(--ink-tertiary); }

@media (max-width: 1023px) {
  .workindex__rows { padding-right: 0; }
  .workpeek { display: none; }
  .wrow { grid-template-columns: 3rem 1fr 1fr; }
  .wrow__c, .wrow__k { grid-column: 2 / span 2; text-align: left; }
}
@media (max-width: 767px) {
  .wrow { grid-template-columns: 2.5rem 1fr; }
  .wrow__a, .wrow__c, .wrow__k { grid-column: 2; }
}

/* --- 4.5 The Network (About) -----------------------------------------------
   It began as a network. Here it is drawn as one: the people as marks, the
   threads between them, the Academy gathered to one side and the Atelier to
   the other, and the place where the two meet in the middle. It drifts,
   slowly, the way a room of people does. */

.net { grid-column: 1 / span 12; position: relative; height: clamp(22rem, 46vw, 34rem); }
.net svg { width: 100%; height: 100%; display: block; overflow: visible; }
.net .lk { stroke: var(--rule); stroke-width: 1; fill: none; transition: stroke 300ms ease-out, opacity 300ms ease-out; }
.net .lk--meet { stroke: var(--heritage); stroke-dasharray: 3 5; opacity: .7; }
.net[data-live] .lk { opacity: .25; }
.net[data-live] .lk[data-on] { stroke: var(--heritage); opacity: 1; }
.net .nd { cursor: default; outline: none; }
.net .nd[data-href] { cursor: pointer; }
.net .nd circle { fill: var(--indigo); transition: r 300ms ease-out, fill 300ms ease-out, opacity 300ms ease-out; }
.net .nd[data-kind="student"] circle { fill: var(--heritage); }
.net .nd[data-kind="client"] circle { fill: var(--ink-secondary); }
.net .nd[data-kind="soon"] circle { fill: none; stroke: var(--heritage); stroke-dasharray: 2 3; }
.net .nd text { font-family: var(--sans); font-size: 12px; fill: var(--ink-secondary); letter-spacing: .02em; transition: fill 300ms ease-out, opacity 300ms ease-out; }
.net .nd .role { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-tertiary); opacity: 0; }
.net[data-live] .nd:not([data-on]) { opacity: .3; }
.net .nd[data-on] circle { r: 9; }
.net .nd[data-on] text { fill: var(--ink); }
.net .nd[data-hot] .role { opacity: 1; }
.net .nd:focus-visible circle { stroke: var(--heritage); stroke-width: 2; }
.net .zone { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; fill: var(--heritage); }
.net .zone--mid { fill: var(--ink-tertiary); }
.net .seam { stroke: var(--rule); stroke-width: 1; }
.net__note { grid-column: 1 / span 12; margin-top: var(--s-4); min-height: 1.6em; color: var(--ink-secondary); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .net .nd circle { fill: var(--ink); }
  :root:not([data-theme="light"]) .net .nd[data-kind="student"] circle { fill: var(--heritage); }
}
:root[data-theme="dark"] .net .nd circle { fill: var(--ink); }
:root[data-theme="dark"] .net .nd[data-kind="student"] circle { fill: var(--heritage); }

/* --- 4.6 Which room? (Contact) + the studio clock -------------------------
   The call's first question, asked ahead of the call. Choosing an answer
   names the branch and the first step — in a box that is already tall
   enough for its longest answer, so the page holds still. */

.room { margin-top: var(--s-7); }
.room__q { margin-top: var(--s-4); }
.room__opts { display: flex; flex-direction: column; margin-top: var(--s-3); }
.room__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  border-top: 1px solid var(--rule); padding: var(--s-3) 0;
  font-family: var(--serif); font-size: var(--t-sub); font-weight: 400; line-height: 1.32; color: var(--ink);
  transition: color 260ms ease-out, opacity 260ms ease-out;
}
.room__opt:last-child { border-bottom: 1px solid var(--rule); }
.room__opt span { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-tertiary); transition: transform 120ms ease-out; }
.room__opt:hover span, .room__opt[aria-pressed="true"] span { transform: translateX(4px); color: var(--heritage); }
.room[data-live] .room__opt:not([aria-pressed="true"]) { opacity: .4; }
.room__opt[aria-pressed="true"] { color: var(--indigo); }
.room__opt:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.room__answer { margin-top: var(--s-4); min-height: 7.5em; color: var(--ink-secondary); }
.room__answer b { display: block; font-weight: 400; font-family: var(--serif); font-size: var(--t-sub); color: var(--ink); margin-bottom: var(--s-2); }
.room__answer > * { opacity: 0; transition: opacity 360ms ease-out; }
.room__answer[data-in] > * { opacity: 1; }
.contact__left { grid-column: 1 / span 5; }
.contact__right { grid-column: 6 / span 7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .room__opt[aria-pressed="true"] { color: var(--ink); }
}
:root[data-theme="dark"] .room__opt[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 1023px) {
  .contact__left, .contact__right { grid-column: 1 / span 12; }
  .contact__right { margin-top: var(--s-7); }
}
@media (max-width: 767px) {
  .contact__left, .contact__right { grid-column: 1 / span 4; }
}
.clock { font-variant-numeric: tabular-nums; }

/* --- 4.7 Small lists that were pending in the first build ----------------- */
.four { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.four__item { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.four__n { display: block; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; color: var(--ink-tertiary); margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.four__t { display: block; font-family: var(--serif); font-size: var(--t-sub); line-height: 1.32; color: var(--ink); }
.four__d { display: block; margin-top: var(--s-2); color: var(--ink-secondary); font-size: var(--t-small); max-width: 30ch; }
.programs { grid-column: 1 / span 12; }
.programs__row {
  display: grid; grid-template-columns: 4fr 5fr 2fr 2fr; gap: var(--s-5);
  border-top: 1px solid var(--rule); padding-block: var(--s-4); align-items: baseline;
}
.programs__row:last-child { border-bottom: 1px solid var(--rule); }
.programs__row--head { padding-block: var(--s-2); border-top: 0; }
.programs__row--head span { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); }
.programs__t { font-family: var(--serif); font-size: var(--t-sub); line-height: 1.32; color: var(--ink); }
.programs__d { color: var(--ink-secondary); }
.programs__f, .programs__p { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); }
.programs__p { text-align: right; }
.draft { color: var(--ink-tertiary); }

@media (max-width: 1023px) { .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .four { grid-template-columns: minmax(0, 1fr); grid-column: 1 / span 4; }
  .programs { grid-column: 1 / span 4; }
  .programs__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .programs__row--head { display: none; }
  .programs__p { text-align: left; }
  .pair, .ladder, .workindex, .worktools, .net, .net__note, .pair__note, .ladder__note, .work-count { grid-column: 1 / span 4; }
}

/* ==========================================================================
   RDC — v3   photography-led rebuild
   What changed since v2, in one line each:
   · the display scale is larger and the hero carries a real photograph
   · work tiles are 4:5 with a second frame on hover, in a mixed-size grid
   · a work opens a sheet with its frames, its maker, and previous / next
   · mentors have a page of their own, with their real portraits
   · the header carries the studio clock
   ========================================================================== */

:root {
  --t-display: clamp(2.375rem, 4.6vw, 4rem);
  --t-statement: clamp(1.625rem, 3vw, 2.5rem);
}
.t-display { line-height: 1.12; letter-spacing: -0.012em; max-width: 16ch; text-wrap: balance; }
.t-statement { text-wrap: balance; }
.t-sectionhead { text-wrap: balance; }

/* --- the header clock ------------------------------------------------------ */
.header__clock { color: var(--ink-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: baseline; }
.header__city { background: none; border: 0; padding: 0 0 2px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--heritage); border-bottom: 1px solid transparent; transition: color 160ms ease-out, border-color 160ms ease-out; }
.header__city:hover { color: var(--indigo); border-bottom-color: var(--indigo); }
.header__city:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .header__city:hover { color: var(--ink); border-bottom-color: var(--ink); } }
:root[data-theme="dark"] .header__city:hover { color: var(--ink); border-bottom-color: var(--ink); }
.header__time { min-width: 11.5ch; }
@media (max-width: 1099px) { .header__clock { display: none; } }

/* --- hero with a photograph ------------------------------------------------ */
.hero { padding-top: var(--s-6); padding-bottom: var(--s-8); }
.hero--img .hero__title { grid-column: 1 / span 7; }
.hero--img .hero__lede  { grid-column: 1 / span 6; }
.hero--img .hero__mark  { grid-column: 1 / span 3; grid-row: auto; justify-self: start; align-self: start; margin-top: var(--s-6); }
.hero--img .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.5); }
.hero__fig { grid-column: 9 / span 4; grid-row: 1 / span 3; align-self: start; }
.hero__fig .fig { position: relative; aspect-ratio: 4 / 5; background: var(--surface-muted); overflow: hidden; }
.hero__fig .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1400ms ease; }
.hero__fig .fig img[data-on] { opacity: 1; }
.hero__fig .fig--one img { opacity: 1; }
.hero__fig[data-open] .fig { cursor: zoom-in; }
.hero__cap { margin-top: var(--s-2); display: flex; justify-content: space-between; gap: var(--s-3); color: var(--ink-tertiary); }
.hero__cap b { font-weight: 400; color: var(--ink-secondary); }
.hero__cap .n { font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .hero--img .hero__title, .hero--img .hero__lede { grid-column: 1 / span 12; }
  .hero__fig { grid-column: 1 / span 7; grid-row: auto; margin-top: var(--s-6); }
  .hero--img .hero__mark { grid-column: 8 / span 5; grid-row: auto; align-self: end; justify-self: end; margin-top: 0; }
}
@media (max-width: 767px) {
  .hero--img .hero__title, .hero--img .hero__lede, .hero__fig { grid-column: 1 / span 4; }
  .hero--img .hero__mark { grid-column: 1 / span 4; justify-self: start; margin-top: var(--s-5); }
}

/* --- credential strip ------------------------------------------------------ */
.creds { grid-column: 1 / span 12; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--s-3); display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-4); align-items: baseline; }
.creds + .creds { border-top: 0; }
.creds__k { color: var(--ink-tertiary); }
.creds__v { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.creds__v span { color: var(--ink-secondary); }
@media (max-width: 767px) { .creds { grid-template-columns: 1fr; gap: var(--s-2); grid-column: 1 / span 4; } }

/* --- split with a figure each ---------------------------------------------- */
.split__fig { aspect-ratio: 3 / 2; background: var(--surface-muted); overflow: hidden; margin-bottom: var(--s-5); }
.split__fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(.22,.66,.24,1); }
.split__a:hover .split__fig img, .split__b:hover .split__fig img { transform: scale(1.025); }

/* --- tiles: 4:5, a second frame on hover ----------------------------------- */
.tile { cursor: pointer; }
.tile__media { position: relative; }
.tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media img.b { opacity: 0; transition: opacity 420ms ease; }
.tile:hover .tile__media img.b, .tile:focus-visible .tile__media img.b { opacity: 1; }
.tile:hover .tile__media img { opacity: 1; }           /* undo the old dim */
.tile:hover .tile__media img.a { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.tile__await { position: absolute; inset: 0; display: grid; place-items: center; }
.tile[data-state="coming"] .tile__media { background: var(--lavender); }
.tile[data-state="coming"] .tile__await { color: var(--heritage); }

/* the mixed grid: one wide tile and one tall one make equal rows —
   (2w) × 5/8 = w × 5/4 — so the seams line up without a fixed height */
.mosaic { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mosaic .tile--wide { grid-column: span 2; }
.mosaic .tile--wide .tile__media { aspect-ratio: 8 / 5; }
@media (max-width: 767px) { .mosaic { grid-template-columns: minmax(0, 1fr); grid-column: 1 / span 4; } .mosaic .tile--wide { grid-column: auto; } .mosaic .tile--wide .tile__media { aspect-ratio: 4 / 5; } }

/* --- the work sheet ---------------------------------------------------------
   A piece opens over the page, not on a new one: the frame on the left, the
   words on the right, previous and next beneath. */
#sheet { position: fixed; inset: 0; z-index: 210; background: var(--ivory); overflow: auto; opacity: 0; visibility: hidden; transition: opacity 360ms ease, visibility 0s linear 360ms; }
#sheet[data-on] { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.sheet__inner { max-width: var(--max); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-8); min-height: 100%; }
.sheet__rail { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.sheet__close, .sheet__nav button { background: none; border: 0; padding: 0 0 3px; cursor: pointer; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--heritage); }
.sheet__close:focus-visible, .sheet__nav button:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.sheet__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.sheet__fig { grid-column: 1 / span 7; }
.sheet__fig .fig { position: relative; aspect-ratio: 4 / 5; width: min(100%, calc(74vh * 0.8)); background: var(--surface-muted); overflow: hidden; }
.sheet__fig .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms ease; }
.sheet__fig .fig img[data-on] { opacity: 1; }
.sheet__fig .fig button { position: absolute; top: 0; bottom: 0; width: 34%; background: none; border: 0; cursor: pointer; opacity: 0; }
.sheet__fig .fig button.l { left: 0; cursor: w-resize; } .sheet__fig .fig button.r { right: 0; cursor: e-resize; }
.sheet__frames { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sheet__frames button { width: 44px; aspect-ratio: 4 / 5; border: 1px solid transparent; padding: 0; background: var(--surface-muted); cursor: pointer; overflow: hidden; opacity: .55; transition: opacity 200ms; }
.sheet__frames button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet__frames button[aria-current="true"] { opacity: 1; border-color: var(--heritage); }
.sheet__cap { margin-top: var(--s-2); display: flex; justify-content: space-between; color: var(--ink-tertiary); }
.sheet__text { grid-column: 9 / span 4; }
.sheet__text .t-meta { color: var(--heritage); }
.sheet__text h2 { margin-top: var(--s-2); }
.sheet__text .desc { margin-top: var(--s-5); color: var(--ink-secondary); }
.sheet__text .sheet__note { margin-top: var(--s-3); color: var(--ink-tertiary); max-width: 44ch; }
.sheet__text .sheet__note[hidden] { display: none; }
.sheet__text .who { margin-top: var(--s-5); }
.sheet__text .links { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.sheet__nav { grid-column: 1 / span 12; margin-top: var(--s-8); border-top: 1px solid var(--rule); padding-top: var(--s-4); display: flex; justify-content: space-between; gap: var(--s-4); }
.sheet__nav span { display: block; font-family: var(--serif); font-size: var(--t-sub); margin-top: var(--s-2); color: var(--ink); }
.sheet__nav .next { text-align: right; }
@media (max-width: 1023px) { .sheet__fig { grid-column: 1 / span 12; } .sheet__text { grid-column: 1 / span 12; margin-top: var(--s-6); } }
@media (max-width: 767px) { .sheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sheet__fig, .sheet__text, .sheet__nav { grid-column: 1 / span 4; } }
body[data-sheet] { overflow: hidden; }

/* --- mentors ---------------------------------------------------------------- */
.roster { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.mtile { display: block; cursor: pointer; transition: opacity 260ms ease-out; }
.mtile__media { aspect-ratio: 1 / 1; background: var(--surface-muted); overflow: hidden; position: relative; }
.mtile__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; transition: transform 900ms cubic-bezier(.22,.66,.24,1); }
.mtile:hover .mtile__media img { transform: scale(1.03); }
.mtile__name { display: block; margin-top: var(--s-3); font-family: var(--serif); font-size: var(--t-sub); line-height: 1.32; color: var(--ink); }
.mtile:hover .mtile__name { text-decoration: underline 1px; text-underline-offset: 4px; }
.mtile__line { display: block; margin-top: 4px; color: var(--heritage); }
.mtile__at { display: block; margin-top: var(--s-2); color: var(--ink-tertiary); font-size: var(--t-small); }
.roster[data-live] .mtile:not([data-on]) { opacity: .28; }
.mtile:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.disc { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-6); }
.disc a { font-family: var(--sans); font-size: var(--t-small); color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid transparent; cursor: pointer; }
.disc a[aria-pressed="true"] { border-bottom-color: var(--heritage); }
.disc a:hover { color: var(--heritage); }
.roster__note { grid-column: 1 / span 12; margin-top: var(--s-4); min-height: 1.6em; color: var(--ink-secondary); }
@media (max-width: 1023px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / span 4; } .disc, .roster__note { grid-column: 1 / span 4; } }

/* a row of mentors on the home page — cut-outs on the page ground */
.mrow-home { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.mrow-home a { display: block; }
.mrow-home .mtile__media { aspect-ratio: 1 / 1; }
.mrow-home .mtile__name { font-size: var(--t-body); }
@media (max-width: 1023px) { .mrow-home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .mrow-home { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / span 4; } }

/* the pairing on the mentors page uses the lists as they were, but the
   right-hand column is the roster's own people */

/* --- person page ------------------------------------------------------------ */
.person__portrait .tile__media { position: relative; }
.person__portrait .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.person__creds { grid-column: 1 / span 8; }
.person__creds .entry { grid-template-columns: 9rem 1fr; }
.person__tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.person__tags span { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--heritage); }
@media (max-width: 767px) { .person__creds { grid-column: 1 / span 4; } .person__creds .entry { grid-template-columns: 1fr; } }

/* --- a collection, narrated (Atelier) --------------------------------------- */
.story { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.story__frame { grid-column: span 4; cursor: zoom-in; }
.story__frame .fig { aspect-ratio: 4 / 5; background: var(--surface-muted); overflow: hidden; position: relative; }
.story__frame .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.22,.66,.24,1); }
.story__frame:hover .fig img { transform: scale(1.025); }
.story__wide { grid-column: 1 / span 8; cursor: zoom-in; }
.story__wide .fig { aspect-ratio: 16 / 9; background: var(--surface-muted); overflow: hidden; position: relative; }
.story__wide .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__text { grid-column: 9 / span 4; align-self: end; }
.story__text .t-coda { color: var(--heritage); }
.story__text p + p { margin-top: var(--s-4); }
.story__cap { margin-top: var(--s-2); color: var(--ink-tertiary); }
@media (max-width: 1023px) { .story__frame { grid-column: span 4; } .story__wide { grid-column: 1 / span 12; } .story__text { grid-column: 1 / span 12; } }
@media (max-width: 767px) { .story { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / span 4; } .story__frame { grid-column: span 2; } .story__wide, .story__text { grid-column: 1 / span 4; } }

/* --- numbered rail (How it runs) -------------------------------------------- */
.rail { grid-column: 1 / span 12; }
.rail__row { display: grid; grid-template-columns: 3rem 4fr 6fr 2fr; gap: var(--s-5); border-top: 1px solid var(--rule); padding-block: var(--s-4); align-items: baseline; }
.rail__row:last-child { border-bottom: 1px solid var(--rule); }
.rail__n { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; color: var(--heritage); font-variant-numeric: tabular-nums; }
.rail__t { font-family: var(--serif); font-size: var(--t-sub); line-height: 1.32; color: var(--ink); }
.rail__d { color: var(--ink-secondary); }
.rail__m { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); text-align: right; }
@media (max-width: 767px) { .rail { grid-column: 1 / span 4; } .rail__row { grid-template-columns: 3rem 1fr; } .rail__d, .rail__m { grid-column: 2; text-align: left; } }

/* --- facts row (numbers at the point of decision) --------------------------- */
.facts { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.fact { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.fact b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t-statement); line-height: 1.1; color: var(--ink); }
.fact span { display: block; margin-top: var(--s-2); color: var(--ink-secondary); font-size: var(--t-small); }
@media (max-width: 767px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / span 4; } }

/* --- quote ------------------------------------------------------------------ */
.quote { grid-column: 2 / span 9; }
.quote p { font-family: var(--serif); font-size: var(--t-statement); line-height: 1.26; text-wrap: balance; }
.quote cite { display: block; margin-top: var(--s-4); font-style: normal; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); }
@media (max-width: 767px) { .quote { grid-column: 1 / span 4; } }

/* --- work tools on the work page -------------------------------------------- */
.workgrid.mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workindex[hidden], .workgrid[hidden] { display: none !important; }
.workpeek .tile__media { position: relative; }
.workpeek .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- the mark inside a band on a photograph (home) ----------------------------- */
.people-intro { grid-column: 1 / span 7; color: var(--ink-secondary); margin-bottom: var(--s-6); }

/* studio team list — text, tenure-style */
.team { grid-column: 1 / span 12; }
.team__row { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--s-5); border-top: 1px solid var(--rule); padding-block: var(--s-3); align-items: baseline; }
.team__row:last-child { border-bottom: 1px solid var(--rule); }
.team__n { font-family: var(--serif); font-size: var(--t-sub); color: var(--ink); }
.team__r { color: var(--ink-secondary); }
.team__e { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); text-align: right; }
@media (max-width: 767px) { .team { grid-column: 1 / span 4; } .team__row { grid-template-columns: 1fr; gap: var(--s-1); } .team__e { text-align: left; } }

/* ==========================================================================
   v3.1 — the roll, sequences, breathing letters, breathing room
   ========================================================================== */

/* --- room to breathe: sections sit further apart on wide screens ----------- */
@media (min-width: 1024px) {
  .section { margin-top: var(--s-10); }
  .hero + .section { margin-top: 0; }
  .hero { padding-bottom: var(--s-9); }
  .close { margin-top: calc(var(--s-10) + var(--s-6)); }
  .home-part > div[style] { height: var(--s-10) !important; }
  .section__label, .section__labelrow { margin-bottom: var(--s-6); }
}

/* --- the roll ---------------------------------------------------------------- */
.roll { grid-column: 1 / span 12; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--s-5); overflow: hidden; }
.roll__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.roll__row + .roll__row { margin-top: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.roll__k { color: var(--ink-tertiary); }
.roll__belt { overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.roll__track { display: flex; width: max-content; will-change: transform; }
.roll__run { display: flex; align-items: baseline; }
.roll__item { display: inline-flex; align-items: baseline; white-space: nowrap; cursor: pointer; outline: none; padding-block: 2px; transition: opacity 300ms ease-out; }
.roll__name { font-family: var(--serif); font-size: var(--t-section); line-height: 1.32; color: var(--ink); border-bottom: 1px solid transparent; transition: color 260ms ease-out, border-color 260ms ease-out; }
.roll__item[data-kind="past"] .roll__name, .roll__item[data-kind="attended"] .roll__name { color: var(--ink-secondary); }
.roll__item[data-kind="stockist"] .roll__name, .roll__item[data-kind="collab"] .roll__name { color: var(--ink-tertiary); font-style: italic; }
.roll__sep { display: inline-block; width: 7px; height: 7px; margin-inline: var(--s-5); background: var(--rule); align-self: center; }
.roll__item[data-kind="current"] .roll__sep, .roll__item[data-kind="teach"] .roll__sep { background: var(--heritage); }
.roll[data-live] .roll__item:not([data-on]) { opacity: .38; }
.roll__item[data-on] .roll__name { color: var(--heritage); border-bottom-color: var(--heritage); }
.roll__item:focus-visible .roll__name { outline: 2px solid var(--heritage); outline-offset: 4px; }
.roll__note { grid-column: 1 / span 12; margin-top: var(--s-4); height: 1.6em; overflow: hidden; color: var(--ink-secondary); }
.roll__note b { font-weight: 400; color: var(--ink); }
.roll__soft { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-tertiary); margin-left: .5em; }
.roll__legend { grid-column: 1 / span 12; margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-tertiary); }
.roll__legend i { display: inline-block; width: 7px; height: 7px; margin-right: .5em; background: var(--rule); vertical-align: middle; }
.roll__legend i.h { background: var(--heritage); }
@media (max-width: 767px) { .roll, .roll__note, .roll__legend { grid-column: 1 / span 4; } .roll__row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* --- sequences ---------------------------------------------------------------- */
.seq { position: relative; display: block; }
.seq__fig { position: relative; aspect-ratio: 4 / 5; background: var(--surface-muted); overflow: hidden; cursor: zoom-in; }
.seq--wide .seq__fig { aspect-ratio: 3 / 2; }
.seq__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1200ms ease; }
.seq__fig img[data-on] { opacity: 1; }
.seq__rail { margin-top: var(--s-3); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); color: var(--ink-tertiary); }
.seq__cap b { font-weight: 400; color: var(--ink-secondary); }
/* the place in every sequence is kept by a row of circles in Heritage — the
   one filled is the frame showing; the others take you to theirs */
.seq__list { display: flex; gap: var(--s-2); align-items: center; }
.seq__list button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--heritage); border-radius: 50%; background: transparent; font-size: 0; cursor: pointer; opacity: .8; transition: background 200ms ease, opacity 200ms ease; }
.seq__list button[aria-current="true"] { background: var(--heritage); opacity: 1; }
.seq__list button { transition: background 200ms ease, opacity 200ms ease, transform 200ms ease, filter 200ms ease; }
/* every nav circle on the site answers to the pointer: it fills, grows a
   little, and takes the Heritage halo */
.seq__list button:hover {
  opacity: 1; transform: scale(1.3);
  background: color-mix(in srgb, var(--heritage) 45%, transparent);
  filter: drop-shadow(0 0 4px rgba(91, 111, 170, .8)) drop-shadow(0 0 9px rgba(91, 111, 170, .45));
}
.seq__list button[aria-current="true"]:hover { background: var(--heritage); }
.seq__list button:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }
.hero__fig .seq__fig { aspect-ratio: 4 / 5; }

/* --- two practices, boxed --------------------------------------------------- */
.split--boxed { border: 1px solid var(--rule); padding: var(--s-6); }
.split--boxed::after { top: var(--s-6); bottom: var(--s-6); }
.split--boxed .split__a { padding-right: calc(var(--gap) / 2 + var(--s-6)); }
.split--boxed .split__b { padding-left: calc(var(--gap) / 2 + var(--s-6)); }
.split__seq { margin-bottom: var(--s-7); }
.split__seq .seq__fig { aspect-ratio: 4 / 5; }
@media (max-width: 767px) { .split--boxed { padding: var(--s-4); } .split--boxed .split__a, .split--boxed .split__b { padding: 0; } .split--boxed .split__b { padding-top: var(--s-6); } }

/* --- breathing letters: each in a box as wide as its wider case ---------------- */
.wb__w { white-space: nowrap; }
.wb__l { display: inline-block; text-align: center; vertical-align: baseline; }
.wb__l.up { font-size: .68em; }
.gal[data-caps="full"] .wb__l.up { font-size: 1em; }
/* the reserved line beneath the statement never changes height */
.gal__meta { height: 2rem; min-height: 0; overflow: hidden; align-items: center; }
.gal__alt { line-height: 1.2; }
.gal__hint { height: 2.2em; min-height: 0; }

/* the lift and the return — quicker than the crossing */
.puck[data-mode="lift"] {
  transition: opacity 320ms ease-out, left 480ms cubic-bezier(.22,.66,.24,1), top 480ms cubic-bezier(.22,.66,.24,1),
              width 420ms cubic-bezier(.22,.66,.24,1), height 420ms cubic-bezier(.22,.66,.24,1);
  cursor: pointer;
}

/* --- v3.3 fixes ------------------------------------------------------------- */
/* the opening section sits right under the header; the hero follows it */
.section--opening { margin-top: var(--s-5) !important; }
.section--opening + .hero { padding-top: var(--s-10); }
/* the closing invitation keeps clear of the footer */
.close { margin-bottom: var(--s-9); }
@media (min-width: 1024px) { .close { margin-bottom: var(--s-10); } }
/* the words over the weave never catch the pointer — only the phrases and the close do */
.gal__text { pointer-events: none; }
.gal__text .ph, .gal__text .gal__close { pointer-events: auto; }
/* the sublogo dims its other letters only while one is actually under the pointer */
.hero__mark svg:hover .ltr { opacity: 1; }
.hero__mark svg:has(.ltr:hover) .ltr, .hero__mark svg:focus-within .ltr { opacity: .38; }
.hero__mark svg .ltr:hover, .hero__mark svg .ltr:focus-visible, .hero__mark svg:has(.ltr:hover) .ltr:hover { opacity: 1; }
/* the About mark's two arcs no longer move out from under the pointer */
.hero__mark svg .ltr[data-letter="R1"]:hover, .hero__mark svg .ltr[data-letter="R1"]:focus-visible,
.hero__mark svg .ltr[data-letter="R2"]:hover, .hero__mark svg .ltr[data-letter="R2"]:focus-visible { transform: none; }

/* --- v3.4 ------------------------------------------------------------------- */
/* the opening slideshow: one frame, as tall as the screen allows, the circles at bottom right */
.seq--full { position: relative; }
.seq--full .seq__fig { aspect-ratio: auto; height: min(calc(100vh - 12rem), 52rem); min-height: 22rem; cursor: zoom-in; }
.seq--full .seq__fig img { transition: opacity 1600ms ease; transform: scale(1.06); }   /* past the film frame's own black edge */
.seq--full .seq__cap { position: absolute; left: var(--s-4); bottom: var(--s-4); color: var(--on-band); pointer-events: none; }
.seq--full .seq__cap b { color: var(--on-band); }
.seq--full .seq__dots { position: absolute; right: var(--s-4); bottom: calc(var(--s-4) + 3px); }
@media (max-width: 767px) { .seq--full .seq__fig { height: 60vh; } }

/* the sublogo: the visible shape moves on hover; an invisible hit shape underneath does not */
.ltr { transition: opacity 260ms ease-out, fill 260ms ease-out; transform: none !important; }
.ltr > path { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 320ms cubic-bezier(.22,.66,.24,1); }
.ltr > path.hit { fill: transparent; pointer-events: all; }
.hero__mark svg .ltr:hover > path:not(.hit), .hero__mark svg .ltr:focus-visible > path:not(.hit) { transform: scale(1.03); }
.hero__mark svg .ltr[data-letter="R1"]:hover > path:not(.hit), .hero__mark svg .ltr[data-letter="R1"]:focus-visible > path:not(.hit) { transform: translate(-6px, -6px); }
.hero__mark svg .ltr[data-letter="R2"]:hover > path:not(.hit), .hero__mark svg .ltr[data-letter="R2"]:focus-visible > path:not(.hit) { transform: translate(6px, 6px); }

/* --- v3.5 ------------------------------------------------------------------- */
/* the mark gathers into a circle in place, in the disc's own colour, so the
   disc can take over from it — and hand back to it — without a seam */
.mu path { transition: fill 420ms ease-out, opacity 420ms ease-out, transform 700ms cubic-bezier(.34,.02,.2,1); }
.mu[data-on] path { fill: var(--heritage-on-indigo); }
/* while one thing is held, the rest of the weave steps back — the other work
   marks too. It steps back by going a little soft, not transparent: the
   shapes overlap, and transparency would show the overlaps through. */
/* the whole lower weave goes soft as one surface — no row or unit edge of its
   own to fade — while the upper copy draws only the lit marks, sharp */
#motif { transition: filter 120ms ease-out; }
.gal[data-word] #motif, .gal[data-open] #motif { filter: blur(2.2px); transition-duration: 360ms; }
.motif--lit { z-index: 1; pointer-events: none; }
.motif--lit .mrow { pointer-events: none; }
.motif--lit .mu { visibility: hidden; }
.motif--lit .mu[data-on] { visibility: visible; }
.motif--lit .mu[data-lift] { visibility: hidden; }
/* and so does every word that is not the one being held — the sentence's own
   words, the other phrases, the hint; the line that names what is held stays */
.gal__t, .ph, .gal__hint { transition: color 320ms ease-out, filter 320ms ease-out; }
.gal[data-word] .gal__t, .gal[data-word] .gal__hint { filter: blur(.9px); }
.gal[data-word] .ph:not([data-on]) { opacity: 1; filter: blur(.9px); color: var(--ivory-on-indigo); }

/* the live phrases: a fixed box the width of the sentence's own wording; the
   wording inside can change, and lift a little, without moving a neighbour */
.ph { display: inline-block; position: relative; vertical-align: baseline; white-space: nowrap; text-align: center; border-bottom: 0; }
.ph[data-on] { border-bottom: 0; }
.ph__w {
  display: inline-block; position: relative; left: 50%; transform: translateX(-50%);
  transform-origin: 50% 80%;
  transition: opacity 900ms ease, transform 420ms cubic-bezier(.22,.66,.24,1), color 320ms ease-out;
}
.ph__w::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: 1px; background: currentColor; opacity: 0; transition: opacity 320ms ease-out; }
.ph__w--out { position: absolute; top: 0; opacity: 0; pointer-events: none; }
.ph[data-on] .ph__w { transform: translateX(-50%) scale(1.07); color: var(--on-band); }
.ph[data-on] .ph__w::after { opacity: 1; }

/* every band keeps the same distance from what precedes it as any section does;
   after a hero, the hero's own foot is that distance */
.band { margin-top: var(--s-9); }
.hero + .band { margin-top: 0; }
@media (min-width: 1024px) { .band { margin-top: var(--s-10); } .hero + .band { margin-top: 0; } }
/* nothing laid over the weave catches the pointer except the phrases and the close */
.gal .shell, .gal .grid { pointer-events: none; }
/* while the letters are being measured, nothing is scaled or in transition */
.gal[data-measure] .ph__w, .gal[data-measure] .wb__l { transform: translateX(-50%) !important; transition: none !important; }
.gal[data-measure] .wb__l { transform: none !important; }
/* the two halves overlap by a hair so the gathered circle shows no seam */
/* the gathered circle is 85 on the 100 strip: a whole circle with room round it */
.mu[data-on] .p-d { transform: translate(155.77px, 7.5px) scale(.425); }
.mu[data-on] .p-c { transform: translate(84.16px, 49px)   scale(.425); }   /* the bowl sits a hair up into the dome, so the halves show no seam */
/* the About mark: only the hit shapes catch the pointer, so each disc is
   hoverable exactly over itself */
.ltr[data-mark="about"] > path:not(.hit) { pointer-events: none; }
/* letting go is quicker than taking hold: the way back is immediate */
.mu path { transition: fill 240ms ease-out, opacity 240ms ease-out, transform 380ms cubic-bezier(.22,.66,.24,1); }
.mu[data-on] path { transition: fill 420ms ease-out, opacity 420ms ease-out, transform 700ms cubic-bezier(.34,.02,.2,1); }
.gal__t, .ph, .gal__hint { transition-duration: 120ms; }
.gal[data-word] .gal__t, .gal[data-word] .ph, .gal[data-word] .gal__hint { transition-duration: 360ms; }
.gal__statement { transition-duration: 120ms; }
.gal[data-word] .gal__statement { transition-duration: 320ms; }
/* the roll can be pulled by hand */
.roll__belt { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.roll__belt[data-drag] { cursor: grabbing; }
.roll__belt[data-drag] .roll__item { cursor: grabbing; }

/* --- a smaller screen keeps less room --------------------------------------- */
@media (max-width: 767px) {
  .section { margin-top: var(--s-8); }
  .band { margin-top: var(--s-8); padding-block: var(--s-8); }
  .hero + .band { margin-top: 0; }
  .close { margin-top: var(--s-9); padding-block: var(--s-7); margin-bottom: var(--s-6); }
  /* the weave keeps just the room the opened work needs beneath the words */
  .gal { min-height: 0; padding-bottom: calc(18rem + var(--s-6)); }
  .people-intro { grid-column: 1 / span 4; }
}

/* the hovered mark's line: the work's title, ivory, a little larger, with a faint halo; the maker beside it */
.gal__wt, .gal__ww { display: inline-block; opacity: 0; transition: opacity 360ms ease-out; }
.gal__wt[data-in], .gal__ww[data-in] { opacity: 1; }
.gal__wt { font-style: normal; font-size: calc(var(--t-lede) * 1.18); color: var(--on-band); text-shadow: 0 0 14px rgba(245, 240, 232, .45), 0 0 3px rgba(245, 240, 232, .25); }
/* the maker is already set as it will be set when the work opens — the same
   face, the same case, the same tracking — so travelling there changes only
   its place and its size, never its voice */
.gal__ww {
  font-family: var(--sans); font-style: normal; font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  color: var(--heritage-on-indigo); margin-left: var(--s-5);
}
/* a title or maker in flight from the hover line to its place */
.gal__fly { position: absolute; z-index: 3; white-space: nowrap; pointer-events: none; will-change: left, top, font-size; }

/* --- v3.16: the opening circles, and a Heritage halo behind whatever sits on top ------ */
/* the opening slideshow keeps its place with larger circles, in ivory, over the film */
.seq--full .seq__dots { gap: var(--s-3); bottom: calc(var(--s-4) + 2px); filter: drop-shadow(0 0 3px rgba(91, 111, 170, .95)) drop-shadow(0 0 8px rgba(91, 111, 170, .6)); }
.seq--full .seq__dots button { width: 13px; height: 13px; border-color: var(--on-band); opacity: .85; }
.seq--full .seq__dots button[aria-current="true"] { background: var(--on-band); opacity: 1; }
.seq--full .seq__dots button:focus-visible { outline-color: var(--on-band); }

/* Anything laid over a photograph, a pattern or a surface close to its own
   colour carries a faint Heritage halo, so it reads whatever is behind it. */
:root { --halo: 0 0 5px rgba(91, 111, 170, .95), 0 0 14px rgba(91, 111, 170, .65), 0 0 28px rgba(91, 111, 170, .35); }
.seq--full .seq__cap, .seq--full .seq__cap b { text-shadow: var(--halo); }                     /* the caption on the film */
.puck__go { text-shadow: var(--halo); }                                                        /* "Open the work" on the photograph */
.puck__shot span, .tile__await { text-shadow: var(--halo); }                                   /* every "Image pending" / "Coming" over a muted surface */
/* the words over the weave carry no halo — only the hovered work's title keeps its own faint ivory glow */

/* --- v3.18: the rooms sit closer together ------------------------------------
   The intervals were set wide enough that a page read as a series of separate
   rooms. They are pulled in by about a sixth — still generous, but the page
   now holds together as one. The phone keeps its own, tighter, measure. */
@media (min-width: 768px) {
  .section, .band { margin-top: 7.5rem; }
  .hero + .section, .hero + .band { margin-top: 0; }
  .hero { padding-bottom: 7.5rem; }
  .close { margin-top: 9rem; padding-block: 7rem; margin-bottom: 7rem; }
  .section--opening + .hero { padding-top: 7.5rem; }
}
@media (min-width: 1024px) {
  .section, .band { margin-top: 10rem; }
  .hero + .section, .hero + .band { margin-top: 0; }
  .hero { padding-bottom: 7.5rem; }
  .close { margin-top: 11.5rem; padding-block: 7.5rem; margin-bottom: 9rem; }
  .section--opening + .hero { padding-top: 10rem; }
  .home-part > div[style] { height: 10rem !important; }
}

/* --- v3.19: the monogram carries more weight -----------------------------------
   The mark is the practice's signature beside the opening sentence; at its old
   size it read as a footnote. One factor scales every hero mark, so the photo
   heroes and the narrow breakpoints keep their proportions to it. */
:root { --mark-k: 1.4; }
.hero__mark svg { height: calc(var(--mark-h, 124px) * var(--mark-k)); }
@media (max-width: 1023px) { .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.75 * var(--mark-k)); } }
@media (max-width: 767px)  { .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.62 * var(--mark-k)); } }
.hero--img .hero__mark svg { height: calc(var(--mark-h, 124px) * 0.5 * var(--mark-k)); }

/* --- v3.20: the opening line, set by hand --------------------------------------
   The headline breaks where it is written to break rather than where the
   measure happens to run out: three lines, with the semicolon holding the two
   halves of the practice apart. The 16ch measure is lifted for this one
   heading, since the lines set their own width. Below the tablet breakpoint
   the words flow again — a fixed break at phone width leaves orphans. */
.hero__title--set { max-width: none; text-wrap: initial; }
.hero__title--set .ln { display: block; }
@media (max-width: 767px) {
  .hero__title--set { max-width: 16ch; text-wrap: balance; }
  .hero__title--set .ln { display: inline; }
}

/* --- v3.21: the Atelier opens on its work ---------------------------------------
   The page begins with the room's own output. One ruled panel carries the
   whole opening: the line the practice is held to, the work itself on a rail
   that moves on its own until a hand takes it, and what the room does beneath.
   The mark sits beside the line, as a signature does. */
.hero--strip { padding-bottom: 0; }
.strip__eyebrow { grid-column: 1 / span 12; display: block; margin-bottom: var(--s-4); }

.strip { grid-column: 1 / span 12; border: 1px solid var(--rule); background: var(--surface-muted); padding: var(--s-6) 0 var(--s-6); }
.strip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: 0 var(--s-6) var(--s-6); }
.strip__title { max-width: 18ch; margin: 0; }
.strip__head .hero__mark { grid-column: auto; grid-row: auto; margin: 0; flex: 0 0 auto; color: var(--heritage); }
.strip__head .hero__mark svg { height: calc(var(--mark-h, 124px) * .9 * var(--mark-k)); }
.strip__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); padding: var(--s-6) var(--s-6) 0; }
.strip__lede { margin: 0; max-width: 56ch; color: var(--ink-secondary); }
.strip__dots { flex: 0 0 auto; padding-bottom: .35em; }

.strip__rail {
  display: flex; gap: var(--s-4); padding-inline: var(--s-6);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  cursor: grab; user-select: none; -webkit-user-select: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.strip__rail::-webkit-scrollbar { display: none; }
.strip__rail[data-drag] { cursor: grabbing; scroll-snap-type: none; }
.strip__rail:focus-visible { outline: 2px solid var(--heritage); outline-offset: 4px; }
.strip__item { flex: 0 0 auto; width: 21rem; scroll-snap-align: start; cursor: zoom-in; }
.strip__fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory); }
.strip__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(.22,.66,.24,1); }
.strip__item:hover .strip__fig img { transform: scale(1.03); }
.strip__cap { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.strip__cap b { font-weight: 400; color: var(--ink); }
.strip__cap span { color: var(--ink-tertiary); }

@media (max-width: 1023px) {
  .strip__head, .strip__foot { gap: var(--s-5); }
  .strip__title { font-size: calc(var(--t-display) * .9); }
  .strip__item { width: 16rem; }
}
@media (max-width: 767px) {
  .strip { grid-column: 1 / span 4; padding: var(--s-4) 0; }
  .strip__head { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: 0 var(--s-4) var(--s-4); }
  .strip__foot { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) var(--s-4) 0; }
  .strip__rail { padding-inline: var(--s-4); }
  .strip__item { width: 13rem; }
  .strip__head .hero__mark svg { height: calc(var(--mark-h, 124px) * .62 * var(--mark-k)); }
}

/* the Atelier's opening panel: a quieter line, a smaller signature, and the
   room the next section needs beneath it */
.hero--strip { padding-bottom: var(--s-8); }
@media (min-width: 768px)  { .hero--strip { padding-bottom: 7.5rem; } }
@media (min-width: 1024px) { .hero--strip { padding-bottom: 10rem; } }
.strip__title { font-size: calc(var(--t-display) * .74); max-width: 20ch; }
.strip__head .hero__mark svg { height: calc(var(--mark-h, 124px) * .62 * var(--mark-k)); }
@media (max-width: 1023px) { .strip__title { font-size: calc(var(--t-display) * .72); } }

/* --- v3.22: one guideline for every box ----------------------------------------
   The indigo band was measured from the page and the shell from its own box,
   so a panel inside the shell sat a gutter inside the band beside it. Both are
   now the same box — the frame — and anything with an edge of its own uses it.
   Type stays a gutter inside the frame, so the words line up as they always
   did while every border, ground and photograph now starts on one line. */
.shell, .frame, .band, .band.bleed, .close, .close.bleed, .band:not(.band--ivory) {
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  max-width: none; margin-inline: auto;
}
.frame > .shell, .band > .shell, .close > .shell { width: 100%; }

/* the boxes that carry the frame, and the padding that puts their words back on the text line */
.seq--full.frame { padding: 0; }
.split--boxed.frame { padding: var(--s-6) var(--gutter); }
.strip.frame { padding: var(--s-6) 0; }
.strip .strip__head, .strip .strip__foot { padding-inline: var(--gutter); }
.strip .strip__rail { padding-inline: var(--gutter); }
.seq--full .seq__cap { left: var(--gutter); }
.seq--full .seq__dots { right: var(--gutter); }

/* --- v3.23: the clock down the left margin --------------------------------------
   It is not part of the navigation: it belongs to the page, rides with it, and
   stops when the closing section arrives. */
.sideclock {
  position: fixed; left: 0; bottom: 96px; z-index: 40;
  width: var(--gutter); display: none; align-items: center; justify-content: center; gap: var(--s-3);
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--ink-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none;
}
.sideclock > * { pointer-events: auto; }
.sideclock .header__city { writing-mode: inherit; padding: 2px 0 2px 2px; border-bottom: 0; border-left: 1px solid transparent; }
.sideclock .header__city:hover { border-left-color: currentColor; border-bottom-color: transparent; }
.sideclock .header__time { min-width: 0; }
@media (min-width: 1200px) { .sideclock { display: flex; } }
/* the hero no longer carries it, so the header keeps only what it needs */
.header__clock { display: none !important; }
/* a phone reads the work grid one tile at a time — the three-column rule was
   winning over the narrow one on specificity, which cropped every caption */
@media (max-width: 1023px) { .workgrid.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  {
  .workgrid.mosaic { grid-template-columns: minmax(0, 1fr); }
  .strip__eyebrow { grid-column: 1 / span 4; }
  .tile__caption { flex-wrap: wrap; }
}

/* --- v3.24 ---------------------------------------------------------------------
   The roll now sits inside the mentors section, directly under their faces:
   the same people, and every room they teach and work in. */
.rollblock { grid-column: 1 / span 12; margin-top: var(--s-8); }
.rollblock .section__labelrow, .rollblock .roll, .rollblock .roll__note, .rollblock .roll__legend { grid-column: 1 / span 12; }
@media (max-width: 767px) { .rollblock { grid-column: 1 / span 4; margin-top: var(--s-6); } }

/* --- the clock: upright, one line to a row, centred in the margin -------------- */
.sideclock {
  /* the whole empty margin to the left of the frame is its column, so it sits
     in the middle of that space at any width */
  position: fixed; left: 0; top: 50%; bottom: auto; z-index: 40;
  width: calc((100vw - min(100vw - 2 * var(--gutter), var(--max))) / 2);
  display: none; flex-direction: column; align-items: center; gap: 1px;
  writing-mode: horizontal-tb; transform: translateY(-50%);
  text-align: center; white-space: normal; line-height: 1.3;
  letter-spacing: .06em;
  color: var(--ink-tertiary); pointer-events: none;
}
/* read by rank: the time first, then the zone it is in, then the city, then the day */
.sideclock__time { font-size: .8125rem; color: var(--ink-secondary); }
.sideclock__zone { font-size: .75rem; }
.sideclock .header__city { font-size: .6875rem; }
.sideclock__day { font-size: .625rem; }
.sideclock > * { pointer-events: auto; }
.sideclock .header__city {
  writing-mode: horizontal-tb; font-family: inherit; font-weight: 400; letter-spacing: inherit; text-transform: uppercase;
  padding: 0 0 2px; border: 0; border-bottom: 1px solid transparent; color: var(--heritage); cursor: pointer; background: none;
}
.sideclock .header__city:hover { border-bottom-color: currentColor; color: var(--indigo); }
.sideclock__day { color: var(--ink-tertiary); }
.sideclock__time { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sideclock__zone { opacity: .9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sideclock .header__city:hover { color: var(--ink); } }
:root[data-theme="dark"] .sideclock .header__city:hover { color: var(--ink); }
@media (min-width: 1200px) { .sideclock { display: flex; } }

/* the rail glides rather than stepping, so nothing snaps against it */
.strip__rail { scroll-snap-type: none; }
.strip__item { scroll-snap-align: none; }

/* the time leads the column; the rest follow beneath it */
.sideclock { display: none; }
@media (min-width: 1200px) { .sideclock { display: flex; } }
.sideclock .header__city { order: 3; }
.sideclock__day { order: 4; }
.sideclock__time { order: 1; }
.sideclock__zone { order: 2; }

/* --- v3.26 --- the city heads the column, set apart; the rest follow by rank */
.sideclock .header__city { order: 1; margin-bottom: var(--s-3); }
.sideclock__day { order: 2; }
.sideclock__time { order: 3; }
.sideclock__zone { order: 4; }

/* the city is the one thing here that answers to a click, so it carries the
   Heritage halo the site uses elsewhere — a glow off the letters themselves,
   faint at rest and brought up under the hand. No box, no edge. */
.sideclock .header__city {
  padding: 0; background: none; border-bottom: 0;
  text-shadow: 0 0 6px rgba(91, 111, 170, .32), 0 0 16px rgba(91, 111, 170, .18);
  transition: text-shadow 220ms ease-out, color 220ms ease-out;
}
.sideclock .header__city:hover, .sideclock .header__city:focus-visible {
  border-bottom: 0; color: var(--indigo);
  text-shadow: 0 0 5px rgba(91, 111, 170, .8), 0 0 14px rgba(91, 111, 170, .5), 0 0 28px rgba(91, 111, 170, .3);
}

/* The rail carries its work on a belt of its own. The scroll box moves in
   whole pixels; the belt takes the fraction left over as a transform, so a
   drift of a few pixels a second reads as travel rather than a twitch. */
.strip__rail { display: block; }
.strip__belt { display: flex; gap: var(--s-4); width: max-content; will-change: transform; }


/* --- v3.29 --- the ivory dots over the film take an ivory fill instead */
.seq--full .seq__dots button:hover { background: color-mix(in srgb, var(--on-band) 55%, transparent); filter: none; }
.seq--full .seq__dots button[aria-current="true"]:hover { background: var(--on-band); }


/* --- v3.32 --- the ladder, with its card ------------------------------------
   The steps take the left eight columns; the right four hold a card that
   describes whichever step is in hand and rides with the page, so every
   note is read where the pointer is, not at the foot of the list. */
.ladder[data-side] { grid-column: 1 / span 8; }
.ladder[data-side] .ladder__row { grid-template-columns: 3rem 4fr 5fr 3fr; }
.ladder__side { grid-column: 9 / span 4; align-self: stretch; position: relative; }
.ladder__card { position: absolute; left: 0; right: 0; top: 0; border: 1px solid var(--rule); padding: var(--s-5) var(--s-5) var(--s-6); transition: top 420ms cubic-bezier(.22,.66,.24,1), opacity 160ms ease-out, transform 160ms ease-out; }
.ladder__card[data-swap] { opacity: 0; transform: translateY(4px); }
.ladder__bign { display: block; font-family: var(--serif); font-size: clamp(3rem, 4.6vw, 4.25rem); line-height: 1; color: var(--heritage); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ladder__cardk { display: block; margin-top: var(--s-4); }
.ladder__cardt { margin-top: var(--s-2); color: var(--ink); }
.ladder__card .ladder__note { grid-column: auto; margin-top: var(--s-3); min-height: 0; color: var(--ink-secondary); }
.ladder__cardc { margin-top: var(--s-4); }
.ladder__cardc:empty { margin-top: 0; }
.ladder__lead { display: block; color: var(--ink-tertiary); margin-bottom: var(--s-2); }
.ladder__cr { display: flex; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--rule); padding-block: var(--s-2); font-size: var(--t-small); }
.ladder__cr span:first-child { font-family: var(--serif); font-size: var(--t-body); color: var(--ink); }
.ladder__cr span:last-child { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--heritage); white-space: nowrap; align-self: baseline; }
.ladder__cr:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 1199px) { .ladder[data-side] .ladder__row { grid-template-columns: 3rem 4fr 5fr 2fr; } }
@media (max-width: 1023px) {
  .ladder[data-side], .ladder__side { grid-column: 1 / span 12; position: static; }
  .ladder__side { order: 0; margin-bottom: var(--s-6); }
  .ladder__card { position: static; }
  .ladder[data-side] { order: 1; }
}
@media (max-width: 767px) {
  .ladder[data-side], .ladder__side { grid-column: 1 / span 4; }
  .ladder[data-side] .ladder__row { grid-template-columns: 3rem 1fr; }
}


/* --- v3.32 --- the break between the two galleries: concept on the left, product on the right */
.brk__a { grid-column: 1 / span 5; }
.brk__b { grid-column: 7 / span 6; }
.brk__b .t-body { color: var(--ink-secondary); }
.brk__b .t-body + .t-body { margin-top: var(--s-4); }
.brk__b .t-coda { margin-top: var(--s-5); }
@media (max-width: 1023px) { .brk__a { grid-column: 1 / span 12; } .brk__b { grid-column: 1 / span 10; margin-top: var(--s-5); } }
@media (max-width: 767px) { .brk__a, .brk__b { grid-column: 1 / span 4; } }


/* --- v3.32 --- the houses, turning on the band's right ---------------------- */
.houses { grid-column: 9 / span 4; grid-row: 1 / span 3; align-self: center; }
/* an ivory card on the band, in both modes — the brand values, not the remapped ones */
.houses__fig { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--rule-inverse); background: var(--on-band); }
.houses__f { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-5); opacity: 0; transition: opacity 640ms ease-out; }
.houses__f[data-on] { opacity: 1; }
/* v3.71 — the mark is centred on the card itself, not in a grid track sized by the
   image: a tall mark (Bridget Parris) used to sit low in the frame */
.houses__f img { position: absolute; inset: 0; margin: auto; max-width: 64%; max-height: 42%; width: auto; height: auto; }
.houses__name { display: none; font-family: var(--serif); font-size: var(--t-statement); line-height: 1.2; text-align: center; color: #2E2268; letter-spacing: -.005em; max-width: 12ch; }
.houses__f[data-nologo] img { display: none; }
.houses__f[data-nologo] .houses__name { display: block; }
.houses__rail { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; color: var(--ivory-on-indigo); }
.houses__cap { min-height: 1.3em; }
.houses__cap b { font-weight: 400; color: var(--on-band); }
.houses__dots { flex-wrap: wrap; gap: var(--s-2); }
.houses .seq__list button { border-color: var(--on-band); opacity: .7; }
.houses .seq__list button[aria-current="true"] { background: var(--on-band); opacity: 1; }
.houses .seq__list button:hover { background: color-mix(in srgb, var(--on-band) 55%, transparent); filter: none; opacity: 1; }
.houses .seq__list button[aria-current="true"]:hover { background: var(--on-band); }
.houses .seq__list button:focus-visible { outline-color: var(--on-band); }
@media (max-width: 1023px) { .houses { grid-column: 1 / span 8; grid-row: auto; margin-top: var(--s-6); } }
@media (max-width: 767px) { .houses { grid-column: 1 / span 4; } }


/* --- v3.33 --- mentors by discipline: the matched stay, the rest fold into a row of names */
.roster .mtile { transition: opacity 220ms ease-out; }
.roster[data-filter] .mtile[data-fade] { opacity: 0; }
.roster[data-filter] .mtile[data-out] { display: none; }
.roster[data-filter] .mtile[data-on] { opacity: 1; }
.roster__rest { grid-column: 1 / span 12; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); display: none; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.roster__rest[data-on] { display: flex; }
.roster__rest .t-meta { color: var(--ink-tertiary); margin-right: var(--s-2); }
.roster__rest a { font-family: var(--serif); font-size: var(--t-body); color: var(--ink-secondary); border-bottom: 1px solid transparent; transition: color 160ms ease-out, border-color 160ms ease-out; }
.roster__rest a:hover { color: var(--ink); border-bottom-color: var(--heritage); }
@media (max-width: 767px) { .roster__rest { grid-column: 1 / span 4; } }


/* --- v3.34 --- a step can be kept: click holds its card while the pointer moves on */
.ladder[data-side] .ladder__row { cursor: pointer; }
.ladder__row[data-pin] .ladder__n::after { background: var(--heritage); box-shadow: none; outline: 1px solid var(--heritage); outline-offset: 2px; }
.ladder__row[data-pin] .ladder__service { color: var(--ink); }
.ladder[data-live] .ladder__row[data-pin] { opacity: 1; }

/* --- v3.34 --- the D and C, under the statement between the two galleries */
.brk__a { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; }
.brk__a .hero__mark { grid-column: auto; grid-row: auto; margin: 0; align-self: flex-start; justify-self: start; }


/* --- v3.36 --- the associates: names only, for now */
.assoc { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.assoc span { font-family: var(--serif); font-size: var(--t-sub); line-height: 1.32; color: var(--ink); }
@media (max-width: 767px) { .assoc { grid-column: 1 / span 4; gap: var(--s-2) var(--s-4); } .assoc span { font-size: var(--t-body); } }


/* --- v3.38 (hero demo) --- Work overview: the grid alone; the sentence that sorted it is gone */
.rw__grid { margin-top: var(--s-6); }
.rw__grid .tile { animation: rw-in 360ms ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.rw__empty { grid-column: 1 / span 12; margin-top: var(--s-6); color: var(--ink-secondary); }
.rw__more { grid-column: 1 / span 12; margin-top: var(--s-5); color: var(--ink-secondary); display: flex; gap: var(--s-2); align-items: baseline; }
@keyframes rw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .rw__empty, .rw__more { grid-column: 1 / span 4; } }
@media (prefers-reduced-motion: reduce) { .rw__grid .tile { animation: none; } }






/* --- v3.44 --- the clock over the film: ivory, with the halo the film's caption carries */
.sideclock, .sideclock > * { transition: color 300ms ease, text-shadow 300ms ease; }
.sideclock[data-lit], .sideclock[data-lit] .sideclock__day, .sideclock[data-lit] .sideclock__zone { color: var(--on-band); text-shadow: var(--halo); }
.sideclock[data-lit] .sideclock__time { color: var(--on-band); }
.sideclock[data-lit] .header__city { color: var(--on-band); text-shadow: var(--halo); }


/* --- v3.47 --- films inside sequences and the sheet */
.seq__fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1200ms ease; background: #111; }
.seq__fig video[data-on] { opacity: 1; }
.sheet__fig .fig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0e0c0b; opacity: 0; transition: opacity 420ms ease; z-index: 1; }
.sheet__fig .fig video[data-on] { opacity: 1; }
.sheet__fig .fig video:not([data-on]) { pointer-events: none; }
.sheet__frames button[data-film] { position: relative; }
.sheet__frames button[data-film]::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--on-band); filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }



/* --- v3.48 --- every frame takes the shape of what is in it ------------------ */
.mosaic { grid-auto-flow: row dense; }                       /* wide pieces leave no holes behind them */
.sheet__fig .fig[data-land] { aspect-ratio: 3 / 2; width: 100%; }
.sheet__fig .fig { transition: aspect-ratio 420ms ease, width 420ms ease; }
.sheet__frames button[data-land] { width: 66px; aspect-ratio: 3 / 2; }
.workpeek[data-land] .tile__media { aspect-ratio: 3 / 2; }

/* v3.54 — films preview silent; one button, the same everywhere, turns the sound on */
.puck__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sound {
  position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 3;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .8em .5em .65em; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo); background: rgba(246, 243, 236, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(26, 22, 20, .06), var(--halo);
  transition: background 200ms ease, transform 200ms ease;
}
.sound:hover, .sound:focus-visible { background: rgba(246, 243, 236, 1); transform: translateY(-1px); }
.sound svg { width: 1.15em; height: 1.15em; display: block; }
.sound[aria-pressed="true"] .off, .sound[aria-pressed="false"] .on { display: none; }
.sound[hidden] { display: none; }
.seq__fig .sound { bottom: var(--s-5); }
.sheet__fig .fig button.sound { top: auto; bottom: var(--s-4); left: auto; right: var(--s-4); width: auto; opacity: 1; cursor: pointer; background: rgba(246, 243, 236, .88); }
.sheet__fig .fig button.sound:hover, .sheet__fig .fig button.sound:focus-visible { background: rgba(246, 243, 236, 1); }
.sheet__fig .fig video { cursor: pointer; }
@media (max-width: 767px) { .sound { right: var(--s-3); bottom: var(--s-3); } }

/* v3.55 — a film standing as a still plays three silent seconds under the pointer */
[data-film] { position: relative; }
[data-film] video.peep { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* a film is never cropped to a still’s shape */ display: block; opacity: 0; transition: opacity 360ms ease; pointer-events: none; z-index: 2; background: #0e0c0b; }
[data-film][data-peep] video.peep { opacity: 1; }
.sheet__frames button[data-film]::after { z-index: 3; }
.sheet__frames button[data-film][data-peep]::after { opacity: 0; }

/* v3.56 — the Academy opens on the sketchbook: the hero stands on the photograph,
   the mark at its right, the way the Atelier's title and mark share the strip head */
.seq--stage .seq__fig { height: min(calc(100vh - 11rem), 54rem); }
.seq--stage .seq__fig::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 10, 38, .86) 0%, rgba(15, 10, 38, .62) 34%, rgba(15, 10, 38, .22) 66%, rgba(15, 10, 38, .06) 100%); }
.stage { position: absolute; left: 0; right: 0; bottom: calc(var(--s-4) + 3.2rem); z-index: 2; padding: 0 var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-7); pointer-events: none; }
.stage__text { max-width: 46rem; min-width: 0; }
.stage__eyebrow, .stage__title, .stage__lede { grid-column: auto; color: var(--on-band); }
.stage__eyebrow { opacity: .82; }
.stage__eyebrow .bar { background: var(--on-band); opacity: .6; }
.stage__title { margin: 0; max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 28px rgba(15, 10, 38, .55); }
.stage__lede { margin-top: var(--s-4); max-width: 38rem; color: var(--on-band); opacity: .9; text-shadow: 0 1px 18px rgba(15, 10, 38, .6); }
.stage .hero__mark { grid-column: auto; grid-row: auto; margin: 0 0 .35rem; flex: 0 0 auto; pointer-events: auto; color: var(--on-band); filter: drop-shadow(0 0 14px rgba(91, 111, 170, .55)); }
.stage .hero__mark svg { height: calc(var(--mark-h, 124px) * .9 * var(--mark-k)); }
.seq--stage .seq__cap, .seq--stage .seq__dots { z-index: 2; }
@media (max-width: 1023px) {
  .stage { gap: var(--s-5); }
  .stage .hero__mark svg { height: calc(var(--mark-h, 124px) * .62 * var(--mark-k)); }
  .stage__title { font-size: calc(var(--t-display) * .8); }
}
@media (max-width: 767px) {
  .seq--stage .seq__fig { height: max(62vh, 36rem); }
  .stage { flex-direction: column; align-items: flex-start; gap: var(--s-4); bottom: calc(var(--s-4) + 2.6rem); }
  .stage__title { font-size: calc(var(--t-display) * .66); max-width: none; }
  .stage__lede { font-size: var(--t-body); }
  .stage .hero__mark { order: -1; margin: 0; }
  .stage .hero__mark svg { height: calc(var(--mark-h, 124px) * .5 * var(--mark-k)); }
  .seq--stage .seq__fig { height: max(66vh, 40rem); }
  .seq--stage .seq__cap { max-width: calc(100% - 10rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line beside the dots, as on the home film */
  .stage { bottom: calc(var(--s-4) + 2.4rem); }
}

/* the Academy's sign-up: newsletter, events, classes and master classes */
.signup { grid-column: 1 / span 12; display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--s-6); }
.signup__head { max-width: 14ch; }
.signup__line { margin-top: var(--s-4); color: var(--ink-secondary); max-width: 40ch; }
.signup__b { display: grid; gap: var(--s-5); }
.signup__opts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.chip { font-family: var(--sans); font-size: var(--t-small); letter-spacing: .02em; padding: .55em 1em; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-secondary); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.chip:hover { color: var(--ink); border-color: var(--heritage); }
.chip[aria-pressed="true"] { color: var(--on-band); background: var(--indigo); border-color: var(--indigo); }
.chip:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }
.signup__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field { display: block; min-width: 0; }
.field__k { display: block; color: var(--ink-tertiary); }
.field__k i { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: .4em; opacity: .8; }
.field input { display: block; width: 100%; margin-top: var(--s-2); padding: .55em 0; border: 0; border-bottom: 1px solid var(--ink-tertiary); border-radius: 0; background: transparent;
  font-family: var(--serif); font-size: var(--t-lede); color: var(--ink); outline: none; transition: border-color 160ms ease; }
.field input::placeholder { color: var(--ink-tertiary); opacity: .7; }
.field input:focus { border-bottom-color: var(--heritage); box-shadow: 0 1px 0 var(--heritage); }
.signup__b[data-bad] [name="email"] { border-bottom-color: #B3402F; }
.signup__row { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.signup__go span { display: inline-block; margin-left: .4em; transition: transform 120ms ease-out; }
.signup__go:hover span { transform: translateX(4px); }
.signup__note { color: var(--ink-tertiary); max-width: 34ch; }
.signup__note[data-kind="done"] { color: var(--ink); }
.signup__note[data-kind="bad"] { color: #B3402F; }
.signup__b[data-busy] .signup__go { opacity: .6; pointer-events: none; }
.signup__b[data-done] .signup__go { background: var(--heritage); }
@media (max-width: 1023px) { .signup { grid-template-columns: 1fr; gap: var(--s-6); } }
@media (max-width: 767px) { .signup { grid-column: 1 / span 4; } .signup__fields { grid-template-columns: 1fr; } }
/* in the reversed theme indigo sinks into the ground, so a chosen chip is heritage, like the button */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { background: var(--heritage); border-color: var(--heritage); color: var(--ivory-on-indigo, #fff); } }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--heritage); border-color: var(--heritage); color: var(--ivory-on-indigo, #fff); }


/* v3.59 — in any picture view the ground is the way out: the cursor is an ×, and a
   click anywhere that is not a control closes back to where the visitor was */
:root { --x-cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2226%22%20height=%2226%22%20viewBox=%220%200%2026%2026%22%3E%3Cg%20fill=%22none%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M6%206l14%2014M20%206L6%2020%22%20stroke=%22%23F5F0E8%22%20stroke-width=%225%22/%3E%3Cpath%20d=%22M6%206l14%2014M20%206L6%2020%22%20stroke=%22%232E2268%22%20stroke-width=%221.8%22/%3E%3C/g%3E%3C/svg%3E") 13 13, pointer; }
#sheet, .gal[data-open] { cursor: var(--x-cursor); }
#sheet a, #sheet button, #sheet video, #sheet input, #sheet .sheet__frames, #sheet .sound,
.gal[data-open] .puck, .gal[data-open] .puck__go, .gal[data-open] .gal__close, .gal[data-open] .sound, .gal[data-open] .ph, .gal[data-open] a, .gal[data-open] button { cursor: pointer; }
#sheet .fig button.l { cursor: w-resize; } #sheet .fig button.r { cursor: e-resize; }

/* v3.70 — selection: a pale heritage wash, and every selected letter set in deep indigo.
   Whatever colour the type was (ink, grey, heritage) a selection reads in one voice, and
   indigo sits so close to ink that a descender reaching past the wash (the g of Design)
   never shows as a two-tone letter. On the indigo surfaces it inverts: heritage block,
   ivory letters. In dark mode: a deep heritage wash, ivory letters. */
::selection { background: #D6DBEA; color: #2E2268; }
.band:not(.band--ivory) ::selection, .close--indigo ::selection, .footer ::selection { background: #5B6FAA; color: #F5F0E8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::selection { background: color-mix(in srgb, #5B6FAA 42%, var(--ivory)); color: #F5F0E8; } }
:root[data-theme="dark"] ::selection { background: color-mix(in srgb, #5B6FAA 42%, var(--ivory)); color: #F5F0E8; }
/* the page's furniture never joins a selection: photographs and film, the clock, the
   following line, section labels and their hints, arrows and buttons, captions laid over
   imagery. A drag or select-all catches only the reading: headlines, paragraphs, names,
   roles, addresses. */
img, video, picture, canvas, svg, .fig, .tile__media, .mtile__media, .seq__fig, #intro,
.header, .sideclock, .follow, .t-eyebrow, .section__labelrow, .arrow, button,
.seq__cap, .seq__list, .houses__rail, .story__cap, .workpeek, .sheet__cap, .sheet__frames, .footer-rule,
.rollblock, .gal__statement, .gal__hint, .gal__meta, .filters, .views, .nosel { -webkit-user-select: none; user-select: none; }
img::selection, video::selection, svg::selection { background: transparent; }
/* the intro takes the wider measure */
.hero__intro { grid-column: 1 / span 7; max-width: 62ch; }
@media (max-width: 1023px) { .hero__intro { grid-column: 1 / span 12; } }
@media (max-width: 767px) { .hero__intro { grid-column: 1 / span 4; } }

/* v3.62 — the g, whole. Measured on the Mac: Optima's g reaches 0.268em below the
   baseline, and display type set at 1.12 leaves only 0.235em of line box beneath the
   baseline. Safari paints selected letters clipped to the line box, so a selected g,
   p or y lost its foot. Display type now takes the same Optima declared with a deeper
   descent: the line box is unchanged, the letters sit 0.05em higher in it, and the
   whole descender is inside. Machines without Optima are untouched. */
@font-face { font-family: 'Optima RDC Deep'; src: local('Optima Regular'), local('Optima-Regular'), local('Optima'); ascent-override: 92%; descent-override: 38%; }
.t-display { font-family: 'Optima RDC Deep', var(--serif); line-height: 1.22; }   /* a touch more air between display lines, so the foot of every g has room under Safari's clip */

/* v3.63 — a mentor whose portrait is still to come: their initials, in the site's serif */
.mtile__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: .04em; color: var(--heritage); opacity: .7; }
.mtile__pending { position: absolute; left: 0; right: 0; bottom: var(--s-3); text-align: center; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); }
.mrow-home .mtile__initials { font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.roll__item[data-kind="residency"] .roll__name, .roll__item[data-kind="client"] .roll__name { color: var(--ink-tertiary); font-style: italic; }
/* a drawn mark carries more of the card than a line of type */
.houses__f img[src$=".png"] { max-width: 60%; max-height: 60%; }

/* v3.72 — laptops and tablets read the site 5% smaller, as if zoomed to 95%; every size on
   the site is set in rem, so the root carries it. A large screen keeps the full size. */
@media (min-width: 768px) and (max-width: 1599px) { html { font-size: 95%; } }

/* --- v3.30: the opening statement and the two practices sit in one box ----------
   One border round the headline, its paragraph, the mark and both practices, so
   the promise and the two ways RDC keeps it read as one thing. The practices keep
   their divider; their own border comes off. */
.homebox { border: 1px solid var(--rule); margin-top: var(--s-8); }
.homebox .shell { width: 100%; }
.homebox .hero { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.section--opening + .homebox .hero { padding-top: var(--s-7); }
.homebox .section { margin-top: 0; }
.homebox .split--boxed { border: 0; padding: var(--s-6) var(--gutter) var(--s-7); }
@media (max-width: 767px) {
  .homebox .hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .homebox .split--boxed { padding: var(--s-4) var(--gutter) var(--s-6); }
}

/* --- v3.31: nothing hangs off the edge --------------------------------------------
   The clock's column is the margin beside the frame, which is only 60-80px on a
   laptop: the lines now wrap inside it instead of running past the screen edge. */
.sideclock { box-sizing: border-box; padding-inline: 4px; }
.sideclock > * { max-width: 100%; }
.sideclock .header__city { white-space: normal; text-align: center; line-height: 1.25; }

/* ==========================================================================
   29 Sep 2026 — copy review (Home)
   ========================================================================== */
/* work titles and captions are set as written, never in capitals */
.seq__cap, .strip__cap, .workpeek__cap, .sheet__cap, .puck__go { text-transform: none; letter-spacing: .02em; }
/* the brand's bar between a title and its maker, in the caption's own colour */
.seq__cap .bar, .roll__note .bar, .houses__cap .bar, .roster__note .bar { background: currentColor; opacity: .6; height: .95em; margin-inline: .55em; vertical-align: -.12em; }
/* the note under the belts names everyone a place belongs to: room for three lines */
.roll__note { height: auto; min-height: 4.6em; overflow: visible; }
@media (max-width: 767px) { .roll__note { min-height: 3.2em; } }
.roll__item[data-kind="taught"] .roll__name, .roll__item[data-kind="ownpast"] .roll__name { color: var(--ink-secondary); }
.roll__item[data-kind="pastres"] .roll__name { color: var(--ink-tertiary); font-style: italic; }
/* hovering a name lights its tense in the legend, in RDC indigo */
:root { --legend-lit: #2E2268; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --legend-lit: #9E97CC; } }
:root[data-theme="dark"] { --legend-lit: #9E97CC; }
.roll__legend span { transition: color 260ms ease-out; }
.roll__legend span i { transition: background-color 260ms ease-out; }
.roll__legend span[data-lit] { color: var(--legend-lit); }
.roll__legend span[data-lit] i { background: var(--legend-lit); }
.hero__eyebrow .bar { margin-inline: .45em .6em; }
.gal__hint { text-wrap: pretty; }

/* 29 Sep (Academy copy): the facts row holds three since the fee fact was cut; the name is required */
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .facts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts--3 .fact:last-child { grid-column: 1 / -1; } }
.signup__b[data-badname] [name="name"] { border-bottom-color: #B3402F; }

/* 29 Sep (QA): the intro holds the page still; a piece's own page takes focus quietly;
   punctuation stays with the word before it */
#intro { touch-action: none; overscroll-behavior: contain; }
#sheet:focus { outline: none; }
.gal__keep { white-space: nowrap; }
@media (max-width: 767px) {
  /* a label row whose link or note is long takes two lines rather than squeezing both */
  .section__labelrow { flex-wrap: wrap; row-gap: var(--s-2); }
  /* a film with more than four frames: its circles take a row of their own above the caption */
  .seq--stage:has(.seq__dots button:nth-child(5)) .seq__dots { bottom: calc(var(--s-4) + 1.75rem); }
  .seq--stage:has(.seq__dots button:nth-child(5)) .seq__cap { max-width: calc(100% - 2 * var(--gutter)); }
  .seq--stage:has(.seq__dots button:nth-child(5)) .stage { bottom: calc(var(--s-4) + 2.4rem + 1.75rem); }
  /* a portrait still to come: the initials sit clear of the one-line label */
  .mtile__initials { inset: 0 0 1.4rem 0; }
  .mtile__pending { white-space: nowrap; letter-spacing: .06em; font-size: .5625rem; bottom: var(--s-2); }
}

/* ==========================================================================
   1 Oct 2026 — Atelier copy (Elliot's go, 2:46 pm)
   ========================================================================== */
/* the labels in the band are names: set as their owners write them, not in capitals */
.houses__cap { text-transform: none; letter-spacing: .02em; }
/* step 02 shows its condition at all times now that the steps it credits no longer
   point back to it: "Within sixty days" sits quiet, and lights with the step */
.ladder__row[data-step="1"] .ladder__terms b { opacity: 1; color: var(--ink-tertiary); }
.ladder__row[data-step="1"][data-here] .ladder__terms b, .ladder__row[data-step="1"][data-pin] .ladder__terms b { color: var(--heritage); }
/* the fine print: smaller than the terms, in sentence case */
.ladder__tc { display: block; margin-top: 6px; font-family: var(--sans); font-size: .6875rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-tertiary); }
.ladder__lead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.ladder__lead .ladder__tc { display: inline; margin-top: 0; text-align: right; }

/* --- the mark panel's pillar, small, on top (Monogram Copy, 3 Oct) -------------------------------------------
   On every mark but Home's the letter carries the page's own word; the pillar it answers to sits above in the
   label size. Home's letters carry the pillars themselves, so the line stays hidden there. */
#lens .lens__over { display: block; text-align: center; }
#lens .lens__over[hidden] { display: none; }

/* About's mark: the crossing is a part of its own. Like the arcs it takes the pointer on a hit path; its drawn path has no
   fill of its own at rest (the two arcs draw it), lights in Indigo when it is hovered or focused, and holds still */
.hero__mark svg .ltr[data-letter="X"] > path:not(.hit) { fill-opacity: 0; transition: fill 260ms ease-out, fill-opacity 260ms ease-out; }
.hero__mark svg .ltr[data-letter="X"]:hover, .hero__mark svg .ltr[data-letter="X"]:focus-visible,
.hero__mark svg .ltr[data-letter="X"]:hover > path:not(.hit), .hero__mark svg .ltr[data-letter="X"]:focus-visible > path:not(.hit) { transform: none; }
.hero__mark svg .ltr[data-letter="X"]:hover > path:not(.hit), .hero__mark svg .ltr[data-letter="X"]:focus-visible > path:not(.hit) { fill: var(--indigo); fill-opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__mark svg .ltr[data-letter="X"]:hover > path:not(.hit),
  :root:not([data-theme="light"]) .hero__mark svg .ltr[data-letter="X"]:focus-visible > path:not(.hit) { fill: var(--ink); }
}
:root[data-theme="dark"] .hero__mark svg .ltr[data-letter="X"]:hover > path:not(.hit),
:root[data-theme="dark"] .hero__mark svg .ltr[data-letter="X"]:focus-visible > path:not(.hit) { fill: var(--ink); }

/* --- hero rebuild (1 Oct 2026) ---------------------------------------------------
   The line on the opening film, and the same line, shrunk, following the reader.
   Tokens only: indigo, heritage, ivory, ink. No radius, no shadow, no gradient, and
   nothing behind the line on the film: no panel, no scrim, no halo. */

/* the statement block keeps its eyebrow, alone, where the heading began */
.hero__title--eyebrow { margin: 0; }

/* the line on the film: bottom-left, on the credit's margin, above the credit */
.seq__hero {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); margin: 0; max-width: none; pointer-events: none;
  bottom: calc(var(--s-4) + var(--cap-h, 1.25rem) + var(--s-3));
  font-family: 'Optima RDC Deep', var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 3.5rem);
  line-height: 1.12; letter-spacing: -.005em; color: var(--on-band); text-wrap: balance;
}
/* a small Indigo halo keeps the line from blending into a light photograph (Elliot, box review, 2 Oct); the travelling
   words carry it while they are over the film */
.seq__hero, .morph__lit {
  text-shadow: 0 0 .05em rgba(46, 34, 104, .65), 0 0 .22em rgba(46, 34, 104, .4);
  text-shadow: 0 0 .05em color-mix(in srgb, var(--indigo) 65%, transparent), 0 0 .22em color-mix(in srgb, var(--indigo) 40%, transparent);
}
.seq__hero-ln { display: block; }
@media (max-width: 767px) { .seq__hero { line-height: 1.16; } }

/* the crossing. When the film lets go, the words the box keeps lift off and travel (.morph__w, below); the rest fade
   where they stand. Coming home, the travelling words land in their places and the rest fade back in as they do */
.seq__w { transition: opacity 300ms ease 320ms; }
.seq__hero[data-gone] .seq__w { opacity: 0; transition: opacity 220ms ease; }
.seq__w[data-fly] { visibility: hidden; }
.morph { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 46; pointer-events: none; }
.morph__w {
  position: fixed; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; will-change: transform;
  font-family: 'Optima RDC Deep', var(--serif); font-weight: 400; line-height: normal; letter-spacing: -.005em;
  color: var(--ink);
}
.morph__f { position: relative; display: block; }
.morph__f + .morph__f { position: absolute; left: 0; top: 0; }
/* drawn twice: ink for the page, ivory for the film, each clipped to its side of the film's edge as the word crosses it */
.morph__lit { position: absolute; left: 0; top: 0; color: var(--on-band); clip-path: inset(100% 0 0 0); }
.morph__bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* the following line */
.follow {
  position: fixed; left: 0; top: 0; z-index: 44; box-sizing: border-box; display: none;
  font-family: var(--serif); font-weight: 400; line-height: 1.22; letter-spacing: -.005em;
  color: var(--ink); background: transparent; border: 0;
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word;   /* no automatic hyphens ("chan-ges"); a long name breaks at its soft hyphen, never past the box */
  opacity: 0; pointer-events: none; transition: opacity 320ms ease-out;
}
.follow[data-on] { opacity: 1; pointer-events: auto; }
/* the box's ivory and its edge are layers of their own, so they can come up while the words arrive. The ivory lets the
   page show through a little (Elliot, 2 Oct); a fine Heritage line draws the edge, one device pixel on sharp screens */
.follow::before, .follow::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.follow::before { background: var(--ivory); opacity: calc(var(--fo, 1) * .85); }
/* and blurs what it lets through (Elliot, 2 Oct): the fill becomes Ivory at 85 percent alpha on a frosted backdrop */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .follow::before { background: color-mix(in srgb, var(--ivory) 85%, transparent); opacity: var(--fo, 1);
    -webkit-backdrop-filter: blur(var(--follow-blur, 10px)); backdrop-filter: blur(var(--follow-blur, 10px)); }
}
.follow::after { border: 1px solid var(--heritage); opacity: var(--fo, 1); }
@media (min-resolution: 2dppx) { .follow::after { border-width: .5px; } }
/* while the words travel the box is there at once, its own words held back until the travelling ones land */
.follow[data-morph] { transition: none; }
.follow[data-morph] .follow__stack { visibility: hidden; }
.follow[data-morph] .follow__k { opacity: var(--fo, 1); }
.follow__k { display: block; margin-bottom: var(--s-3); font-family: var(--sans); font-size: var(--t-micro); font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--heritage); }
.follow__stack { display: grid; overflow: hidden; transition: height 280ms ease; }
.follow__t { grid-area: 1 / 1; align-self: start; margin: 0; max-width: none; opacity: 0; transition: opacity 360ms ease; }
.follow__t[data-on] { opacity: 1; }
.follow__s { transition: color 200ms ease, opacity 200ms ease; }
.follow[data-hl="teach"] .follow__s[data-k="teach"], .follow[data-hl="practice"] .follow__s[data-k="practice"] { color: var(--heritage); }
/* the practice not under the pointer steps back, in the box and on the page (Elliot, box review, 2 Oct) */
.follow[data-hl="teach"] .follow__s[data-k="practice"], .follow[data-hl="practice"] .follow__s[data-k="teach"] { opacity: .4; }
.split > .split__a, .split > .split__b { transition: opacity 240ms ease; }
.split[data-hl="teach"] > .split__b, .split[data-hl="practice"] > .split__a { opacity: .5; }
.follow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 200ms ease; }
.follow a:hover, .follow a:focus-visible { color: var(--heritage); }
.follow a:focus-visible { outline: 2px solid var(--heritage); outline-offset: 3px; }

/* each sentence on its own line, in the margin and in the corner alike; a sentence that must break breaks evenly,
   never leaving one short word ("it.") alone on its last line */
.follow[data-mode] .follow__s { display: block; text-wrap: balance; }
.follow__t[data-stack] .follow__w { display: block; }
/* the opening statement and the Work line set one word to a line (Elliot, box review round 2, 2 Oct) */
.follow__l { display: block; }

/* in the margin: the old box's place and footprint; below 1440px it narrows with the margin */
.follow[data-mode="box"] { display: block; width: var(--follow-w, 12rem); padding: var(--follow-pad, var(--s-3)); font-size: var(--follow-fs, clamp(1.0625rem, 1.3vw, 1.5rem)); }
.follow[data-mode="box"] .follow__k { margin-bottom: var(--follow-gap, var(--s-3)); }

/* in the corner (tablets, phones): the same box, set over the page */
.follow[data-mode="dock"] {
  display: block; top: auto; left: auto; transform: none;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: clamp(11.5rem, 52vw, 15rem); padding: .75rem .875rem .8125rem; font-size: 1.0625rem;
}
.follow[data-mode="dock"] .follow__k { margin-bottom: .5rem; }

/* never over the work sheet or the menu */
body[data-sheet] .follow { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .follow, .follow__t, .follow__s, .seq__w { transition-duration: 1ms; transition-delay: 0ms; } }

/* --- the motif gallery's three key words (hero demo; Elliot, 2 Oct) ---------------
   One case only: a capital first letter, the rest lower case; no pass to capitals.
   A hidden copy of the first wording holds the phrase's space and the sentence's
   baseline, so the sentence never moves. The wording on show sits in the middle of
   that space (one wider than it is set a touch smaller, --fit), and a new wording
   types out in place, a letter at a time. Held, a phrase lights and underlines in
   place; it no longer grows. */
.ph { display: inline-grid; }
.ph__z { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.ph__w { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(var(--fit, 1)); transform-origin: 50% 80%; white-space: nowrap; }
.ph[data-on] .ph__w { transform: translateX(-50%) scale(var(--fit, 1)); }
.wb__l { display: inline; width: auto; }
.wb__l[data-hide] { visibility: hidden; }

/* --- 5 Oct 2026 (Elliot, ten screenshots of the live site) ------------------------------------------------------
   The clock on laptops and desktops: its column is the whole open ivory to the left of the type, from the window's
   edge to the type line, so it sits in the middle of that space on every screen (a 14-inch Mac had it against the
   edge). Where a photograph or a band reaches the margin's edge the clock takes the box's glass, so it can be read
   on either side of the edge. */
.sideclock__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .625rem .75rem .6875rem; }
.sideclock__in::before, .sideclock__in::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity 220ms ease-out; }
.sideclock__in::before { background: var(--ivory); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .sideclock__in::before { background: color-mix(in srgb, var(--ivory) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.sideclock__in::after { border: 1px solid var(--heritage); }
@media (min-resolution: 2dppx) { .sideclock__in::after { border-width: .5px; } }
@media (min-width: 1200px) {
  .sideclock { width: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2 + var(--gutter)); }
  .sideclock__in::before, .sideclock__in::after { opacity: 0; }
  .sideclock[data-glass] .sideclock__in::before, .sideclock[data-glass] .sideclock__in::after { opacity: 1; }
  .sideclock[data-ride] .sideclock__in::before, .sideclock[data-ride] .sideclock__in::after { opacity: 0; }
}
/* the city wraps rather than widening the column ("Los Angeles" on two lines) */
.sideclock .header__city { white-space: normal; max-width: 6.5rem; line-height: 1.2; }

/* Phones and tablets: the clock shows (it was hidden), set at the foot of the screen in the box's own glass: to the
   left of the box on Home, in the middle of the foot on every other page. The script stops it on the closing rule. */
@media (max-width: 1199px) {
  .sideclock {
    display: flex; position: fixed; z-index: 44; top: auto; transform: none; width: auto;
    left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .sideclock__in { min-width: 5.5rem; }
  body:not(:has(#page-home:not([hidden]))) .sideclock { left: 50%; transform: translateX(-50%); }
  .sideclock .header__city { margin-bottom: var(--s-2); }
  /* never over the work sheet or the menu */
  body[data-sheet] .sideclock { opacity: 0; pointer-events: none; }
  .sideclock { transition: opacity 320ms ease-out; }
}

/* the footer's last line on phones: one thing to a line */
@media (max-width: 767px) {
  .footer__base { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-5) var(--s-5); }
  .footer__base .bar { display: none; }
  .footer__c { display: block; }
  .footer__c + .footer__c { margin-top: var(--s-1); }
}

/* Contact: the email sits in the middle of its row, between the two rules; the address breaks at the bar on phones */
.team__row--writing { grid-template-columns: 1fr 1fr; align-items: center; }
.team__row--writing .team__e { text-align: left; }
@media (max-width: 767px) {
  .team__row--writing { grid-template-columns: 1fr auto; gap: var(--s-4); }
  .team__row--writing .team__e { text-align: right; }
  .addr .bar { display: none; }
  .addr__b { display: block; }
}

/* The opening film on phones: the circles take a row of their own above the caption, and the hero line sits above
   both, so nothing lies over anything else */
@media (max-width: 767px) {
  .seq--full .seq__cap { max-width: calc(100% - 2 * var(--gutter)); }
  .seq--full .seq__dots { right: auto; left: var(--gutter); bottom: calc(var(--s-4) + var(--cap-h, 1.25rem) + var(--s-3)); }
  .seq__hero { bottom: calc(var(--s-4) + var(--cap-h, 1.25rem) + var(--s-3) + 13px + var(--s-3)); }
  /* the stage films likewise, whatever their count of frames */
  .seq--stage .seq__dots { bottom: calc(var(--s-4) + 1.75rem); }
  .seq--stage .seq__cap { max-width: calc(100% - 2 * var(--gutter)); }
  .seq--stage .stage { bottom: calc(var(--s-4) + 2.4rem + 1.75rem); }
}
/* a swipe turns a frame; a vertical pull still scrolls the page */
.seq__fig, .sheet__fig .fig { touch-action: pan-y; }
/* touch-sized circles: each keeps its size and grows its reach */
@media (hover: none) and (pointer: coarse) {
  .seq__list button, .strip__dots button, .houses__dots button { position: relative; }
  .seq__list button::after, .strip__dots button::after, .houses__dots button::after { content: ''; position: absolute; inset: -9px; }
  .seq__list { gap: var(--s-3); }
  .sheet__close, .sheet__nav button { padding: 8px 0 8px; }
}

/* Touch: the sublogo's letters hover on their own (the script sets data-auto on the mark and on one letter at a time) */
.hero__mark svg[data-auto] .ltr { opacity: .38; }
.hero__mark svg[data-auto] .ltr[data-auto] { opacity: 1; }
.hero__mark svg .ltr[data-auto] > path:not(.hit) { transform: scale(1.03); }
.hero__mark svg .ltr[data-letter="R1"][data-auto] > path:not(.hit) { transform: translate(-6px, -6px); }
.hero__mark svg .ltr[data-letter="R2"][data-auto] > path:not(.hit) { transform: translate(6px, 6px); }
.hero__mark svg .ltr[data-letter="X"][data-auto] > path:not(.hit) { transform: none; fill: var(--indigo); fill-opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__mark svg .ltr[data-letter="X"][data-auto] > path:not(.hit) { fill: var(--ink); } }
:root[data-theme="dark"] .hero__mark svg .ltr[data-letter="X"][data-auto] > path:not(.hit) { fill: var(--ink); }

/* --- the studio on Home (5 Oct): six photographs of Suite 6A, one at a time, where the page had an open space */
.studio__seq { grid-column: 1 / span 8; }
.studio__text { grid-column: 9 / span 4; align-self: end; color: var(--ink-secondary); }
.studio .seq__rail { justify-content: flex-start; gap: var(--s-4); }
.studio .seq__rail .seq__list { margin-left: auto; }
.seq--still .seq__fig { cursor: default; }
@media (max-width: 1023px) { .studio__seq { grid-column: 1 / span 12; } .studio__text { grid-column: 1 / span 12; margin-top: var(--s-4); } }
@media (max-width: 767px) { .studio__seq, .studio__text { grid-column: 1 / span 4; } }

/* phones: the studio's caption takes its own line, the counter and the circles the next; the footer's last lines and
   the Contact email at a size that holds one line */
@media (max-width: 767px) {
  .studio .seq__rail { flex-wrap: wrap; row-gap: var(--s-2); }
  .studio .seq__rail .seq__cap { flex: 1 0 100%; }
  .footer__base .t-meta { font-size: .6875rem; letter-spacing: .06em; }
  .team__row--writing .team__e { font-size: .625rem; letter-spacing: .06em; }
}

/* --- a light photograph on the opening film (5 Oct: Silin Gu's cover): shown from the painted back down, and the
   hero line, caption and the travelling words take a deeper Indigo halo so they read on cream */
.seq--full .seq__fig img[data-light] { object-position: 50% 12%; }
.seq--full[data-light] .seq__hero, .seq--full[data-light] .seq__cap, .seq--full[data-light] .seq__cap b {
  text-shadow: 0 0 .06em rgba(46, 34, 104, .9), 0 0 .28em rgba(46, 34, 104, .7), 0 0 .7em rgba(46, 34, 104, .5);
  text-shadow: 0 0 .06em color-mix(in srgb, var(--indigo) 90%, transparent), 0 0 .28em color-mix(in srgb, var(--indigo) 70%, transparent), 0 0 .7em color-mix(in srgb, var(--indigo) 50%, transparent);
}

/* --- 5 Oct, 6:40 pm ---------------------------------------------------------------------------------------------
   Contact: the gallery sits right under the studio's address; the address carries the arrow to Google Maps */
.contact__studio { margin-top: var(--s-5); }
.contact__studio .seq__rail { justify-content: flex-start; gap: var(--s-4); }
.contact__studio .seq__rail .seq__list { margin-left: auto; }
.addr__go { display: inline-block; margin-left: .5em; transition: transform 120ms ease-out; }
.addr:hover .addr__go, .addr:focus-visible .addr__go { transform: translateX(4px); }
@media (max-width: 767px) {
  .contact__studio .seq__rail { flex-wrap: wrap; row-gap: var(--s-2); }
  .contact__studio .seq__rail .seq__cap { flex: 1 0 100%; }
}

/* phones: a gallery's caption keeps two lines' room, so the page below does not jump as the frames turn */
@media (max-width: 767px) {
  .seq__rail { align-items: flex-start; }
  .seq__rail .seq__cap { min-height: 2.6em; min-height: 2lh; }
  .seq__rail .seq__list { margin-top: .1em; }
}

/* phones and tablets: the box and the clock let more of the page through, so they do not sit heavy on it */
@media (max-width: 1199px) {
  .follow[data-mode="dock"]::before, .sideclock__in::before { background: var(--ivory); opacity: .45; }
  .sideclock__in { justify-content: center; box-sizing: border-box; }
  .follow[data-mode="dock"] { box-sizing: border-box; }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .follow[data-mode="dock"]::before { background: color-mix(in srgb, var(--ivory) 45%, transparent); opacity: var(--fo, 1); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
    .sideclock__in::before { background: color-mix(in srgb, var(--ivory) 45%, transparent); opacity: 1; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
  }
}

/* phones: the motif gallery keeps only the room its words need; its rows run from the top, so a piece opened beneath
   the words grows the band without moving a mark; the opened piece's words take the statement's place */
@media (max-width: 767px) {
  .gal { padding-block: var(--s-6); }
  .motif { justify-content: flex-start; }
  .motif .mrow { flex: none; }                 /* the rows keep their height; the band clips the ones below */
  .gal__statement { font-size: 1.3125rem; line-height: 1.32; }
  #galtext { min-height: 0; }
  .gal__meta { height: auto; min-height: 3rem; margin-top: var(--s-3); }
  /* the taken-up mark lights where it is, under the words, and does not gather into a circle (it would sit across the type) */
  .motif--lit { z-index: 0; }
  .mu[data-on] .p-d, .mu[data-on] .p-c { transform: none; }   /* room for a long title and its maker on two lines, so the band never grows */
  .gal__hint { height: auto; min-height: 0; margin-top: var(--s-3); }
  .gal[data-open] #galtext { display: none; }
  .gal[data-open] .galwork { position: static; }
  .galwork__t { font-size: 1.3125rem; }
  .galwork__d { font-size: var(--t-small); margin-top: var(--s-3); }
}

/* 6 Oct: the note beside a studio mail link (computers): Gmail, or the address to copy, if no mail app opens */
.mailnote { position: fixed; z-index: 60; max-width: min(22rem, calc(100vw - 32px)); display: grid; gap: var(--s-2); padding: .75rem .875rem;
  background: var(--ivory); color: var(--ink); border: 1px solid var(--heritage); opacity: 0; transform: translateY(4px);
  transition: opacity 200ms ease-out, transform 200ms ease-out; text-transform: none; letter-spacing: .02em; }
.mailnote[data-on] { opacity: 1; transform: none; }
.mailnote__t { color: var(--ink-secondary); }
.mailnote__a { display: flex; flex-wrap: wrap; align-items: center; gap: .25em; }
.mailnote .link { color: var(--indigo); }
.mailnote__copy { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid currentColor; }
@media (min-resolution: 2dppx) { .mailnote { border-width: .5px; } }

/* 5 Oct, 8:32 pm: the studio photographs sit under the booking panel, in Contact's right column */
.contact__right .contact__studio { margin-top: var(--s-7); }

/* --- published build ------------------------------------------------------------
   Each page is its own document: the opening animation, played once a visit (and on a
   reload), is not drawn at all on the pages after (html[data-intro] is set in <head>). */
html[data-intro="off"] #intro { display: none; }