/* Equalls — site styles
   Colors from the design comps: blue #0909AF. The pages alternate
   pages alternate ivory #FFFCEB and white #FFFFFF.
   Type: Sentinel (serif) + Pitch Sans (utility labels). */

@font-face {
  font-family: 'Sentinel';
  src: url('../assets/fonts/Sentinel-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('../assets/fonts/Sentinel-BookItal.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('../assets/fonts/Sentinel-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('../assets/fonts/Sentinel-SemiboldItal.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('../assets/fonts/Sentinel-BoldItal.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pitch Sans';
  src: url('../assets/fonts/PitchSansTest-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pitch Sans';
  src: url('../assets/fonts/PitchSansTest-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Publish Gothic Condensed';
  /* TRIAL cut — swap for the licensed web cut before launch */
  src: url('../assets/fonts/PublishGothicCondensed-Extrabold-Trial.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #0909af;
  --ivory: #fffceb;
  --white: #ffffff; /* the two page tones: ivory and this */
  --paper-grey: #f2f2f0; /* Who we are only, so the portraits' white
                            grounds read as cards against the page */
  --ink: #1a1a1a;   /* the signup pill only */
  --serif: 'Sentinel', Georgia, 'Times New Roman', serif;
  --mono: 'Pitch Sans', 'SF Mono', ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 3.2vw, 56px);
  --strip: clamp(64px, 6.8vw, 132px); /* ivory strip that stays when menu opens */
  --copy-x: clamp(48px, 17vw, 300px); /* left edge of copy columns */
}

html { scroll-behavior: smooth; background: var(--white); }
/* what shows when the page is pulled past its end: the footer's blue at
   the bottom, the opener's white at the top (set from the scroll) */
html.end-blue,
html.end-blue body { background: var(--blue); } /* html and body both: a phone shows the body's ground behind a collapsing toolbar */

body {
  background: var(--white);
  color: var(--blue);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* ---------- utility label type ---------- */
.meta {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.link {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.link:hover { opacity: 0.65; }

/* ---------- fixed frame ---------- */
.frame { pointer-events: none; }
.frame a, .frame button, .frame input { pointer-events: auto; }


.bar {
  position: fixed;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--pad);
  z-index: 60;
}
.bar-top { top: 0; padding-bottom: 0; }
.bar-bottom { bottom: 0; padding-top: 0; }
.bar > :first-child { justify-self: start; }
.bar > :last-child { justify-self: end; }

/* the menu button is the mark's equals-in-a-circle; the negative margin
   drops its centre onto the 12px dot column below it */
.menu-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--blue);
  margin-left: calc((12px - 38px) / 2);
  transition: color 0.25s ease;
}
.menu-mark { display: block; }
/* the mark's own geometry: ring centre (111.13, 111.375), bars centred at
   y 88.80 and y 133.95 — so each is 22.575 units off centre */
.menu-mark .mb {
  transform-box: view-box;
  transform-origin: 111.13px 111.375px;
  transition: transform 0.36s cubic-bezier(0.65, 0, 0.35, 1);
}
/* the two bars slide together and cross into the X */
body.menu-open .menu-mark .mb-1 { transform: rotate(45deg) translateY(22.575px); }
body.menu-open .menu-mark .mb-2 { transform: rotate(-45deg) translateY(-22.575px); }

/* the tagline belongs to the opening screen; once the papers start
   sliding it steps back. The locations stay the whole way down. */
.bar-bottom .tagline-swap { transition: opacity 0.45s ease; }
body.past-home .bar-bottom .tagline-swap {
  opacity: 0;
  pointer-events: none;
}

/* the locations: all three on a wide screen, one at a time on a phone */
.loc-rot { display: none; justify-items: end; }
.loc-rot span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: loc-turn 9s infinite;
}
.loc-rot span:nth-child(2) { animation-delay: 3s; }
.loc-rot span:nth-child(3) { animation-delay: 6s; }
@keyframes loc-turn {
  0% { opacity: 0; }
  5%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-rot span { animation: none; }
  .loc-rot span:first-child { opacity: 1; }
}

/* bottom-centre label crossfades to the belief line on hover */
.tagline-swap {
  position: relative;
  display: inline-block;
  pointer-events: auto;
}
.tagline-swap .ts-a,
.tagline-swap .ts-b { transition: opacity 0.35s ease; }
.tagline-swap .ts-b {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
}
.tagline-swap:hover .ts-a { opacity: 0; }
.tagline-swap:hover .ts-b { opacity: 1; }

/* The mark sits outside the wordmark: the word runs 0-88.44 of the
   95.04-unit viewBox, so the box carries 6.6 units of dead space on the
   right. Nudging by half of that (3.3u = 3.472% of the box) centres the
   word itself rather than the word-plus-mark. */
.logo {
  display: block;
  color: var(--blue);
  transform: translateX(3.472%);
  transition: opacity 0.25s ease;
}
.logo svg { display: block; width: clamp(150px, 14vw, 210px); height: auto; aspect-ratio: 95.04 / 30.16; }

/* section dots — left edge */
.dots {
  position: fixed;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(90px, 18vh, 190px);
  z-index: 60;
}
.dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  pointer-events: auto;
  transition: background 0.3s ease;
}
.dot.active { background: var(--blue); }

/* paint toggle — a dot matching the left nav, aligned with the middle
   dot; the paintbrush pops out of the dot's center and stays centered */
.paint-btn {
  position: fixed;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  cursor: pointer;
  z-index: 60;
  overflow: visible;
  transition: border-color 0.15s;
}
.paint-btn svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.paint-btn:hover,
.paint-btn:focus-visible { border-color: transparent; }
.paint-btn:hover svg,
.paint-btn:focus-visible svg { transform: translate(-50%, -50%) scale(1); }
/* in paint mode the dot becomes the circled X that exits it */
body.paint-on .paint-btn {
  width: 38px;
  height: 38px;
  border-color: transparent;
}
body.paint-on .paint-btn svg { transform: translate(-50%, -50%) scale(1); }

/* ---------- paint overlay ----------
   Each painted section carries its own canvas (inside the panel, or the
   About rail so it pins with the imagery). Strokes therefore scroll,
   stick, and get wiped over exactly like the section they belong to. */
.paint-host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
  pointer-events: none;
}
/* the tool is offered on the opener, the arrow screen and the footer */
body:not(.paint-ok) .paint-btn,
body:not(.paint-ok) .paint-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* display only — all pointer input arrives via the fixed #paint-input
   layer and is mapped into the active section's canvas */
#paint-input {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: none;
}
body.paint-on #paint-input {
  display: block;
  cursor: crosshair;
}

/* slider with Clear beneath it, both to the LEFT of the X, on its
   centerline (offset clears the 38px button in paint mode) */
.paint-tools {
  position: fixed;
  right: calc(var(--pad) + 54px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 60;
}
.paint-tools[hidden] { display: none; }
#brush-size {
  -webkit-appearance: none;
  appearance: none;
  width: 74px;
  height: 2px;
  background: var(--blue);
  cursor: ew-resize;
}
#brush-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}
#paint-clear { font-size: 10px; }
/* it sits among icons, so it needs to read as a control rather than a caption */
#paint-clear:hover,
#paint-clear:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.paint-tools .studio-btn { font-size: 10px; color: #b3261e; }

/* frame over the blue section: chrome goes ivory, the crossing label
   takes the logo's place, copyright dims */
body.on-dark .bar-top .link,
body.on-dark .menu-btn,
body.on-dark .bar-bottom .meta:not(:first-child),
body.on-dark .paint-btn { color: var(--ivory); }
body.on-dark .bar-bottom .meta:first-child { color: var(--ivory); }
body.on-dark .bar-top .logo { opacity: 0; pointer-events: none; }
body.on-dark .dot { border-color: var(--ivory); }
body.on-dark .dot.active { background: var(--ivory); }
body.on-dark .paint-btn { border-color: var(--ivory); color: var(--ivory); }
body.on-dark .paint-btn:hover,
body.on-dark .paint-btn:focus-visible { border-color: transparent; }

/* Each chrome element colours itself against the page behind its own
   midpoint — see js/chrome-wipe.js for why this is per element and not a
   single class or a cloned overlay. */
.over-dark { color: var(--ivory); }
.logo.over-dark,
.link.over-dark,
.menu-btn.over-dark,
.meta.over-dark,
.paint-btn.over-dark { color: var(--ivory); }
.bar-bottom .meta:first-child.over-dark { color: var(--ivory); }
.dot.over-dark { border-color: var(--ivory); }
.dot.over-dark.active { background: var(--ivory); }
.paint-btn.over-dark { border-color: var(--ivory); }
.paint-btn.over-dark:hover,
.paint-btn.over-dark:focus-visible { border-color: transparent; }
/* the tools sit in a stack; the slider and its thumb need the colour too */
.paint-tools.over-dark .link,
.paint-tools.over-dark .studio-btn { color: var(--ivory); }
.paint-tools.over-dark #brush-size { background: var(--ivory); }
.paint-tools.over-dark #brush-size::-webkit-slider-thumb { background: var(--ivory); }
.paint-tools.over-dark #brush-size::-moz-range-thumb { background: var(--ivory); }

/* menu open: same treatment, and MENU becomes X in the ivory strip.
   Declared after the on-dark rules so an open menu on the footer fades
   the logo back in. */
body.menu-open .bar-top .logo,
body.menu-open .bar-top .link,
body.menu-open .bar-bottom .meta:not(:first-child) { color: var(--ivory); }
body.menu-open .bar-top .logo { opacity: 1; pointer-events: auto; }

/* ---------- the page wipe ----------
   The covering state on arrival: the striped field with the reversed
   disc inside, as two fixed pseudo-elements on body, so the page is
   covered before first paint. js/wipe.js draws the motion as an SVG
   over them and then removes them. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: none;
  --band: 12.5vh;
  background: repeating-linear-gradient(to bottom,
    var(--blue) 0 var(--band), var(--ivory) var(--band) calc(2 * var(--band)));
}
body::after {
  background-position: 0 var(--band); /* the bands reversed */
  /* the ring, where the last page left it, and still moving at the same
     speed until js/wipe.js takes over */
  clip-path: circle(var(--wipe-r, 32%) at 50% 50%);
  animation: wipe-ring var(--wipe-dur, 1s) linear forwards;
}
@keyframes wipe-ring {
  to { clip-path: circle(calc(var(--wipe-r, 32%) + 120vmax) at 50% 50%); }
}
html.wipe-in body::before,
html.wipe-in body::after { display: block; }
.wipe-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  pointer-events: none;
}

/* ---------- the screensaver ----------
   A paint canvas over the page, under the top bar's wordmark, which is
   all of the chrome that stays. See js/saver.js. */
.saver-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 59; /* under the bars (60), over everything else */
  pointer-events: none;
}
html.saver-on .menu-btn,
html.saver-on .bar-top .link,
html.saver-on .bar-bottom,
html.saver-on .dots,
html.saver-on .paint-btn,
html.saver-on .paint-tools {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
/* the wordmark, once the paint has reached it, in the paint's opposite */
html.saver-on .bar-top .logo { transition: color 0.5s ease, opacity 0.25s ease; opacity: 1; pointer-events: none; }
html.saver-marked:not(.saver-dark) .bar-top .logo { color: var(--ivory); }
html.saver-marked.saver-dark .bar-top .logo { color: var(--blue); }

/* ---------- menu overlay ---------- */
/* wipes in from the right */
.menu {
  position: fixed;
  inset: 0 0 0 var(--strip);
  background: var(--blue);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.6s;
}
body.menu-open .menu {
  transform: none;
  visibility: visible;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
/* overlay starts after the ivory strip — pull back to viewport center */
.menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(calc(var(--strip) / -2));
  /* clears the wordmark in the fixed top bar */
  padding: clamp(104px, 16vh, 190px) 0 8vh;
}
/* "Equal, and all" is a brow under the nameplate; the passage about
   meeting leaders as equals closes the menu under the links */
.menu-tagline {
  color: var(--ivory);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu-note {
  color: var(--ivory);
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(11px, 0.95vw, 15px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  max-width: 46em;
  margin-top: clamp(32px, 6vh, 64px);
}
/* the four links as a block of Publish Gothic caps, lines set tight */
.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: clamp(28px, 6vh, 72px);
}
.menu-links a {
  color: var(--ivory);
  text-decoration: none;
  font-family: 'Publish Gothic Condensed', Impact, 'Arial Narrow Bold', sans-serif;
  font-weight: 800;
  /* sized to the window's height as well as its width, so the four
     lines, the passage and the link all clear the bottom bar */
  font-size: clamp(52px, min(10.2vw, 15vh), 160px);
  line-height: 0.8;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* hovering one line fades the other three down; the hovered one holds */
.menu-links a { transition: opacity 0.35s ease; }
.menu-links:hover a { opacity: 0.5; }
.menu-links a:hover { opacity: 1; }
.menu-links a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 6px; }
.menu-links a span { display: inline; }

/* ---------- sections ----------
   Panels are sticky-stacked: each holds at the top of the viewport while
   the next one slides in over it (the cream background does the wipe).
   The .stack wrapper bounds the stickiness so every panel releases at
   its end — the transparent spacer then reveals the fixed crossing. */
.stack { position: relative; }
.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  /* clip, not hidden: hidden would make the panel a scroll container and
     break the rail's viewport-relative position: sticky */
  overflow: clip;
}
.panel.dark { background: var(--blue); color: var(--ivory); }
.panel.dark .manifesto-label { color: inherit; }

/* a bare blue screen between the offerings and the partners — it carries
   a painted mark and nothing else */
.panel.arrow {
  padding: 0;
  /* the margin holds the blue full-screen for an extra half a screen of
     scroll before the partners slide over it — the panel is sticky, so
     the gap is never seen, only the pause */
  margin-bottom: 50vh;
}

/* "Who we are" set around the arrow in the mono, one word at a time:
   WHO above the shaft, WE below it, ARE past the head. The words sit on
   a 1440x900 composition and scale with the screen. */
.arrow-words {
  position: absolute;
  inset: 0;
  z-index: 5; /* over the paint canvas */
  margin: 0;
  pointer-events: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 28px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory);
}
.aw {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.aw-who { left: 30%; top: 35%; }
.aw-we  { left: 40.5%; top: 67.5%; }
.aw-are { left: 82%; top: 51%; }
.arrow.words-in .aw-who { opacity: 1; transition-delay: 0.2s; }
.arrow.words-in .aw-we  { opacity: 1; transition-delay: 1.0s; }
.arrow.words-in .aw-are { opacity: 1; transition-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .aw { transition: none; }
}

/* the field panel: photograph full-bleed on white with the headline over
   it. No shader here — the page stays still, and light, so the chrome
   does not invert. */
/* The wall screen runs longer than it is tall, so the composition
   scrolls up inside it: the headline rises from the foot of the screen
   to its centre, with the page's own white beneath it, before the next
   screen comes in over the top. */
/* The wall heads the How we work panel: a screen of photograph with the
   headline low under it, then the four columns follow in the flow. The
   panel is sized to its content (sizeTallPanels) and scrolls up inside
   itself before the next screen comes in. Its ground is the
   photograph's own — a shade off the page white — so there is no seam. */
.how { display: block; background: #fafaf8; padding: 0; }
.how-head { position: relative; height: 100vh; }
/* the wall runs across the upper part of the screen, and the headline
   sits centred in the ground below it */
.field-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.panel-copy.panel-copy-below {
  /* the headline sits low on the wall screen; the columns follow */
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 var(--pad) 10vh;
}
.panel-copy-below .statement { white-space: nowrap; }

/* the iris panel: photograph full-bleed on black, headline over it. The
   canvas carries the shader; the <img> beneath is both its texture source
   and the fallback when WebGL is missing. */
/* headline on the full-bleed screens — iris, field, and the blue one */
.panel-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(14vh, 16vh, 18vh) var(--copy-x) 0;
  pointer-events: none;
}
/* only the dark screens take ivory — the field sits on its own white */
.panel.dark .panel-copy { color: var(--ivory); }
.panel-copy .statement { max-width: none; margin: 0; }
/* the iris: the two halves of the line flank the eye, centred on its
   height — one at the copy column, the other against the right margin */
.panel-copy-split {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-right: var(--copy-x);
}
/* each half sits the same distance from the centre, so the gap from
   "speed." to the eye matches the gap from the eye to "Clarity" */
.panel-copy-split .statement {
  position: relative;
  width: 100%;
  height: 1.5em;
}
.panel-copy-split .statement span {
  position: absolute;
  top: 0;
  --inset: clamp(160px, 20vw, 360px); /* from the centre line to the nearest letter */
}
.panel-copy-split .statement span:first-child { right: calc(50% + var(--inset)); }
.panel-copy-split .statement span:last-child { left: calc(50% + var(--inset)); }
/* set as the bottom bar's label — the small mono caps — in ivory */
.panel-copy-split .statement.meta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory);
}

.panel.iris {
  background: #000;
  padding: 0;
  overflow: clip;
}
.iris-photo,
.iris-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.iris-canvas { opacity: 0; transition: opacity 0.4s ease; }
.iris.iris-live .iris-canvas { opacity: 1; }
.iris.iris-live .iris-photo { visibility: hidden; }

/* screens alternate white / cream so they read as sheets of paper —
/* Every page is white. They read as stacked paper by the shadow each one
   casts on the page beneath as it slides up over it, not by a change of
   tone — the shadow sits above the leading edge, so it only shows while a
   panel is travelling and tucks off-screen once it pins. */
.stack > section + section,
.crossing-fixed {
  /* One soft stop only. Neutral, not the brand blue — that cast read as a
     lavender haze against the grey. And no tight stop: a 1px offset at 2px
     blur lands as a hairline on the edge and reads as a border. */
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.045);
}

/* zero-height rail carrying dots (and About's statement + rock).
   Absolute in fixed-height panels (no internal scroll); sticky in the
   tall About panel so its contents pin while the copy scrolls. */
/* Absolute (out of flow) so it never becomes a flex child and shifts a
   panel's centered content. NO z-index: a stacking context would isolate
   the children's mix-blend-mode and give the photos white boxes. */
.sticky-rail {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
}
/* About and People are display:block, so a sticky rail tracks the
   viewport at every scroll position — an absolute rail would put the
   fade mid-panel (masking the bios) and paint off-screen */
/* A sticky rail holds the media in the viewport on the compositor. About
   cannot use one: sticky only engages once the rail would pass the top of
   the screen, so the rocks would ride in with the panel instead of holding
   still while it wipes over them. They are js-translated instead. */
.people-tall .sticky-rail { position: sticky; }


/* home */
.hero-object {
  max-height: 68vh;
  max-width: min(60vw, 780px);
  object-fit: contain;
  mix-blend-mode: darken; /* white-background photography sits on ivory */
}
/* subjects that sit small in their frame get oversized (the panel clips
   the empty margins) so every hero reads at the same optical size */
.hero-object.hero-lg {
  max-width: none;
  max-height: none;
  height: 108vh;
}
/* the chair stands taller than the others at the same height; a quarter
   more lets it sit in the space the way they do */
.hero-object.hero-md {
  max-width: none;
  max-height: 86vh;
  height: 86vh;
  /* the panel centres it; a translate, not a margin, moves it down without
     the centring taking half back — it sits clear of the wordmark and
     runs a little off the foot of the screen */
  transform: translateY(7vh);
}
/* for a hero that should run off the bottom edge (unused at present) */
.hero-object.hero-bleed {
  max-width: none;
  max-height: none;
  height: 96vh;
  align-self: flex-end;
  margin-bottom: -16vh;
}

/* no widows on the set passages; the two named ones are also glued in
   the markup for browsers without pretty wrapping */
.people-lead, .serif-sub p, .manifesto-copy p,
.residence-intro, .offer p, .bio-body p {
  text-wrap: pretty;
}
/* not the statements: at three lines, "pretty" rebalances the whole
   block to dodge a short last line and throws the break somewhere odd.
   The two that had widows are glued by hand instead. */

/* ---------- statement screens (about / people) ---------- */
/* exactly two serif sizes site-wide */
:root {
  --serif-display: clamp(28px, 2.8vw, 48px); /* a shade under the old 3vw/52, so the People headline holds two lines in Safari */
  --serif-body: clamp(14px, 1.05vw, 17px);
}

.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--serif-display);
  line-height: 1.16;
  letter-spacing: 0.002em;
  border-top: 2px solid var(--blue);
  padding-top: 14px; /* rule sits tight to the text */
  max-width: 11.5em;
}
.statement.wide { max-width: 26em; } /* the People headline on two lines — Safari sets Sentinel wider than Chrome */
.statement.no-rule { border-top: 0; padding-top: 0; }

/* the serif passages share the opener's treatment */
.serif-sub {
  font-weight: 400;
  font-size: clamp(18px, 1.85vw, 32px);
  line-height: 1.24;
  max-width: 30em;
}
.serif-sub p + p { margin-top: 1.15em; }

/* ---------- manifesto: one full-width statement screen ---------- */
/* left edge aligns with the copy column that follows (About, People) */
.manifesto {
  justify-content: flex-start;
  /* both edges on the copy column, so the measure matches the People
     grid: left edge of photo 1 to right edge of photo 3 */
  padding: 0 var(--copy-x);
}
.manifesto-copy {
  width: 100%;
  max-width: 1450px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.72vw, 30px);
  line-height: 1.24;
  position: relative;
  z-index: 2;
}
.manifesto-copy p + p { margin-top: 1.05em; }
.manifesto-copy em { font-style: italic; }
/* small mono labels heading each passage */
.manifesto-label {
  margin-bottom: clamp(20px, 3.4vh, 40px);
  color: var(--blue);
}
.manifesto-copy p.manifesto-label + p { margin-top: 0; }
.manifesto-label.section-gap { margin-top: clamp(38px, 7vh, 84px); }

/* the 'Where we work' opener and 'What we believe' closer both run at the
   headline size used by the statements between them */
/* the closer runs tall: its copy pins at the centre of the screen and
   holds there while the footer climbs over it */
#believe {
  display: block;
  height: 200vh;
  top: calc(100vh - 200vh);
}
/* A 100vh holder sticks at the top of the panel and centres the copy
   inside it. Sticking the copy itself at top:50% needed a permanent
   translateY(-50%), which lifted it above the panel's own box before
   sticky engaged — and overflow:clip cut it off while the page slid in. */
.believe-hold {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
#believe .manifesto-copy { margin: 0 auto; }

#manifesto .manifesto-copy,
#about .manifesto-copy,
#believe .manifesto-copy {
  /* the vh term only bites on short windows, where the display size
     would otherwise overflow a clipped panel */
  font-size: min(var(--serif-display), 5.4vh);
  line-height: 1.16;
}

/* ---------- "how we work": copy left, chair right, offerings below ------ */
/* the panel is the four offerings now; its height comes from their content
   (sizeTallPanels) */

/* ---------- the four offerings: four columns under a rule ---------- */
/* Open columns rather than cards: the title in the serif, the body
   beneath. Four across, then two on a
   narrower window, then one on a phone. */
.offerings-grid {
  position: relative;
  z-index: 2;
  margin: 0 var(--copy-x);
  padding: clamp(40px, 8vh, 96px) 0 clamp(60px, 10vh, 120px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(40px, 6vh, 72px);
  align-items: start;
}
.offer {
  font-family: var(--serif);
  font-weight: 400;
  /* the bio pages' body setting */
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  letter-spacing: 0;
}
.offer p + p { margin-top: 1.15em; }
.offer em { font-style: italic; }

/* the four C's are headed in Inter Extra Bold — they are labels, not the
   editorial voice — rather than in the serif or the small mono */
.offer .manifesto-label {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 26px);
  line-height: 1.1;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: clamp(22px, 3.4vh, 40px);
}
.offer-link { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
.offer-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 1180px) {
  .offerings-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- people: one tall panel — headline, then all six ---------- */
.people-tall {
  background: var(--paper-grey);
  display: block;
  /* sized so the advisors are still settling as the panel finishes —
     no empty screens before the next panel wipes over */
  height: 375vh;
  top: calc(100vh - 375vh);
}
.people-inner {
  position: relative;
  z-index: 2;
  margin: 0 var(--copy-x);
  padding-top: 16vh;
}
.people-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, clamp(140px, 16vw, 280px));
  justify-content: space-between;
  row-gap: clamp(48px, 9vh, 110px);
  margin-top: clamp(48px, 9vh, 110px);
}
/* full-width passage under the headline, set in the opener's treatment */
.people-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.85vw, 32px);
  line-height: 1.24;
  margin-top: clamp(34px, 6vh, 76px);
}
.people-lead em { font-style: italic; }

.people-cards img { width: 100%; display: block; } /* white photo boxes intentional, per comps */
.people-cards > li > a { display: block; } /* the photograph links to the bio as the name does */
.people-cards h3 {
  font-family: var(--serif);
  font-weight: 400;
  /* the larger serif. The columns track 16vw, and the longest name
     ("Michael Ventura") measures 7.56em — so 2vw keeps every name on one
     line, and the bounds match the column's own 140/280px clamp */
  font-size: clamp(17px, 2vw, 34px);
  line-height: 1.1;
  letter-spacing: 0;
  margin: clamp(18px, 3vh, 34px) 0 0.5em;
}
.people-cards p {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.34;
  letter-spacing: 0.03em;
}

/* ---------- partner bio pages ---------- */
.partner-link { color: inherit; text-decoration: none; }
.partner-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.bio-page { background: var(--white); }
.bio {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(30px, 5vw, 90px);
  padding: 18vh var(--pad) 14vh var(--copy-x);
}
.bio-copy { width: min(500px, 38vw); } /* a little narrower, to give the portrait room */
/* the rule moves onto the row so the small socials tuck under it,
   right-aligned against the name */
.bio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-top: 2px solid var(--blue);
  padding-top: 14px;
}
.bio-name { max-width: none; margin: 0; }
.bio-role { margin-top: clamp(14px, 2.4vh, 26px); }
.bio-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(38px, 6vh, 72px) 0 0;
}
.socials { display: flex; gap: 8px; flex: none; }
.bio-link { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
.bio-link:hover { text-decoration-thickness: 2px; }

/* the way on to the next partner: under the buttons, in the bar's small
   caps with the name in the serif */
.bio-next { margin-top: clamp(32px, 5vh, 56px); }
.bio-next a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--blue);
  text-decoration: none;
}
.bio-next .meta { opacity: 0.7; }
.bio-next-name { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 26px); line-height: 1; }
.bio-next-arrow { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 26px); transition: transform 0.25s ease; }
.bio-next a:hover .bio-next-arrow { transform: translateX(6px); }
.social {
  width: 30px;
  height: 30px;
  border: 2px solid var(--blue);   /* the rule above the name */
  border-radius: 50%;
  color: var(--blue);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.social svg { width: 14px; height: 14px; display: block; }
.social:hover { background: var(--blue); color: var(--ivory); }
.pill {
  font-family: var(--mono);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-decoration: none;
  border: 2px solid var(--blue);   /* the social rings' weight */
  border-radius: 999px;
  padding: 13px clamp(18px, 2vw, 28px);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.pill:hover { background: var(--blue); color: var(--ivory); }
.bio-body {
  margin-top: clamp(40px, 7vh, 84px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
}
.bio-body p + p { margin-top: 1.15em; }
/* pinned to the lower right of the screen; only the copy scrolls */
/* Sized by height — the photograph stands from the window's foot up to
   just under the bar — and set on the right so that it may run off the
   edge rather than shrink. */
.bio-figure { display: contents; }
/* Stands on the window's foot, bleeding 6vw off the right. As tall as
   the window allows — unless that would push it into the copy column, in
   which case it is as tall as the room beside the column allows. So it
   is always up, always clear of the text, and never squeezed.
   --portrait-aspect is the file's width over its height. */
.bio-portrait {
  --portrait-aspect: 0.8;
  --portrait-bleed: 6vw; /* a page can set this to 0 if the frame has no room on the right */
  --portrait-room: calc(100vw + var(--portrait-bleed) - var(--copy-x) - min(500px, 38vw) - clamp(32px, 4vw, 80px));
  position: fixed;
  bottom: 0;
  right: calc(-1 * var(--portrait-bleed));
  height: min(calc(100vh - 100px), calc(var(--portrait-room) / var(--portrait-aspect)));
  width: auto;
  max-width: none;
  mix-blend-mode: darken;
}
/* the bio pages keep only the copyright in the bottom bar — the tagline
   and the locations ran across the copy and the portrait */
.bio-page .bar-bottom .tagline-swap,
.bio-page .bar-bottom .meta:last-child { display: none; }

/* The middle: a window too narrow, or too tall for its width, for the
   pinned portrait (it would be capped small and sink to the floor). The
   photograph joins the flow instead — a grey card to the right of the
   bio, its top on the first line, the actions running down beside it. */
@media (max-width: 860px), (min-width: 861px) and (max-aspect-ratio: 5/4), (min-width: 861px) and (max-width: 1180px) {
  .bio {
    display: grid;
    grid-template-columns: 1fr 1fr; /* copy and photograph, equal */
    grid-template-areas: "head ." "role ." "body photo" "actions photo" "next photo";
    column-gap: clamp(32px, 5vw, 90px);
    row-gap: 0; /* the wide layout's flex gap would otherwise open every row */
    align-items: start;
    min-height: 0;
    padding: clamp(100px, 16vh, 160px) var(--pad) 96px var(--copy-x);
  }
  .bio-copy { display: contents; }
  .bio-head { grid-area: head; }
  .bio-role { grid-area: role; }
  .bio-body { grid-area: body; }
  .bio-actions { grid-area: actions; }
  .bio-next { grid-area: next; }
  .bio-figure {
    display: block;
    grid-area: photo;
    align-self: start;
    margin-top: clamp(40px, 7vh, 84px); /* the body's own offset, so the tops meet */
    background: var(--paper-grey);
    line-height: 0;
  }
  .bio-portrait {
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    mix-blend-mode: darken; /* the photograph's white ground takes the grey */
  }
}

@media (max-width: 860px) {
  /* name and role, then the portrait, then the bio. The copy wrapper
     steps out of the box tree so its children can be ordered around the
     photograph, which sits outside it in the markup. */
  .bio {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "role" "photo" "body" "actions" "next";
    padding: clamp(84px, 12vh, 110px) var(--pad) 96px;
  }
  .bio-figure { margin-top: 28px; }
  .bio-body { margin-top: 32px; }
  .bio-actions { flex-wrap: wrap; }
}

/* ---------- the Circle application ----------
   A blue panel over the bio page, in the menu's manner: serif title,
   mono labels, ivory rules under the fields. */
.pill-solid { background: var(--blue); color: var(--ivory); }
.pill-solid:hover { background: var(--ivory); color: var(--blue); }
.apply {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(9, 9, 175, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  overflow-y: auto;
}
.apply[aria-hidden="false"] { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
.apply-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--blue);
  color: var(--ivory);
  padding: clamp(36px, 5vw, 64px);
  transform: translateY(16px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.apply[aria-hidden="false"] .apply-panel { transform: none; }
.apply-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--ivory);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.apply-brow { opacity: 0.8; }
.apply-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.1;
  margin: 10px 0 clamp(26px, 4vh, 44px);
}
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.apply-field { display: block; }
.apply-field .meta { display: block; margin-bottom: 6px; opacity: 0.8; white-space: normal; }
.apply-field .meta em { font-style: normal; text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }
.apply-field input,
.apply-field textarea {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid rgba(255, 252, 235, 0.55);
  border-radius: 0;
  padding: 8px 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s ease;
}
.apply-field select {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid rgba(255, 252, 235, 0.55);
  border-radius: 0;
  padding: 8px 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.apply-field select option { color: var(--blue); }
.apply-pick { position: relative; margin-bottom: 22px; }
.apply-pick::after { content: ''; position: absolute; right: 4px; bottom: 16px; width: 8px; height: 8px; border-right: 2px solid var(--ivory); border-bottom: 2px solid var(--ivory); transform: rotate(45deg); pointer-events: none; opacity: 0.8; }
.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus { border-bottom-color: var(--ivory); }
.apply-field textarea { resize: vertical; min-height: 120px; }
.apply-why { margin-top: 22px; }
/* the occasion, under the person: three across */
.apply-grid-event { grid-template-columns: 1fr 1fr 1fr; margin-top: 22px; }
@media (max-width: 600px) { .apply-grid-event { grid-template-columns: 1fr; } }
.apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.apply-error { min-height: 1.4em; margin: 14px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.apply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 14px; }
.apply .pill-solid { background: var(--ivory); color: var(--blue); border-color: var(--ivory); cursor: pointer; }
.apply .pill-solid:hover { background: transparent; color: var(--ivory); }
.apply .pill-solid:disabled { opacity: 0.6; cursor: default; }
.apply-note { opacity: 0.7; white-space: normal; }
.apply-done-copy { font-family: var(--serif); font-size: 17px; line-height: 1.45; max-width: 36em; }
body.apply-open { overflow: hidden; }
@media (max-width: 600px) {
  .apply { padding: 0; align-items: stretch; }
  .apply-panel { width: 100%; max-height: none; min-height: 100%; }
  .apply-grid { grid-template-columns: 1fr; }
}

/* ---------- Equalls in Residence + Advisors (inside Who we are) ------- */
.residence,
.advisors {
  position: relative;
  z-index: 2;
  margin: 0 var(--copy-x);
  text-align: center;
  padding-top: clamp(80px, 18vh, 200px);
}
.residence-intro {
  font-size: clamp(18px, 1.85vw, 32px);
  line-height: 1.28;
  max-width: 30em;
  margin: clamp(30px, 5vh, 60px) auto 0;
}
/* flex so the short last row centres under the three above it */
/* three to a row, never more — the list is capped at three cards plus
   two gutters, so a wide window does not spread the five into 4 + 1 */
.residents {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(40px, 6vh, 80px) clamp(24px, 3.6vw, 62px);
  margin: clamp(50px, 9vh, 110px) auto 0;
  max-width: calc(3 * clamp(150px, 17vw, 220px) + 2 * clamp(24px, 3.6vw, 62px));
}
.residents li {
  flex: 0 0 clamp(150px, 17vw, 220px);
  text-align: left;
}
/* a circular mask, not a visible disc: the drawings are ink on
   transparent, so the circle only softens where the shoulders end */
.residents img,
.advisor-list img {
  display: block;
  width: clamp(74px, 8vw, 110px);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 50%;
  margin: 0 auto clamp(18px, 3vh, 34px);
}
.residents p,
.advisor-list li {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.55;
  letter-spacing: 0.03em;
}
/* same basis and gutter as .residents so the two columns land on the
   same x positions as the residence grid's last row */
.advisor-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(40px, 6vh, 80px) clamp(24px, 3.6vw, 62px);
  margin: clamp(50px, 9vh, 110px) auto 0;
  max-width: calc(3 * clamp(150px, 17vw, 220px) + 2 * clamp(24px, 3.6vw, 62px));
  text-align: left;
}
.advisor-list li { flex: 0 0 clamp(150px, 17vw, 220px); }
.advisor-name { display: block; }

/* the blurbs set in Semibold — the partners' too — so the Bold names
   read as bold */
.residents p,
.advisor-list li,
.people-cards p { font-weight: 600; }
.person-link { color: inherit; text-decoration: none; }
.person-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
/* Semibold and Bold sit a hair apart in Pitch Sans; a thin stroke in
   the text colour pushes the names clearly bolder than the blurbs */
.residents strong,
.advisor-name {
  font-weight: 700;
  -webkit-text-stroke: 0.035em currentColor;
  paint-order: stroke fill;
}

/* ---------- the crossing — fixed behind the page; the transparent
   spacer at the end of the flow reveals it as the bottom opens up ---- */
/* a few px taller than the viewport so the stack's bottom edge clears
   the top of the screen at max scroll — otherwise subpixel rounding
   leaves a hairline of ivory over the blue */
.panel-spacer { height: calc(100vh + 4px); }
.crossing-fixed {
  position: fixed;
  inset: 0;
  /* above the page, below the frame chrome — it slides up over the pinned
     closing copy as the spacer scrolls (transform driven in js) */
  z-index: 5;
  transform: translateY(100%);
  will-change: transform;
  background: var(--blue);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.crossing-label {
  position: absolute;
  top: var(--pad);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.5;
  white-space: normal;
}
/* the rights line sits on the bar's own line, between the year and the
   locations; the marks are centred in the room between it and the
   wordmark */
.crossing-rights {
  position: absolute;
  bottom: var(--pad);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
}
.crossing-rights a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.crossing-rights a:hover { text-decoration: none; }
/* the three marks, as on the partner pages, in ivory — centred between
   the foot of the wordmark (the inner is centred in the screen, so its
   foot is at 50% + half its height) and the rights line */
.crossing-socials {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad) + 18px);
  top: calc(50% + min(82vw, 1500px) * 30.16 / 95.04 / 2);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.crossing-socials .socials { gap: 22px; } /* roomier than the bio rows */
.crossing-socials .social {
  border-color: var(--ivory);
  color: var(--ivory);
}
.crossing-socials .social:hover,
.crossing-socials .social:focus-visible {
  background: var(--ivory);
  color: var(--blue);
}
.crossing-inner {
  position: relative;
  width: min(82vw, 1500px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crossing-mark {
  width: 100%;
  height: auto;
  aspect-ratio: 95.04 / 30.16;
  color: var(--ivory);
}
.signup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: min(46vw, 660px);
  background: var(--ink);
  border-radius: 999px;
  padding: 8px;
}
.signup input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  padding: 10px 22px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
}
.signup input::placeholder { color: var(--ivory); opacity: 0.85; }
.signup button {
  flex: 0 0 auto;
  width: clamp(72px, 8vw, 128px);
  height: clamp(40px, 4.6vw, 64px);
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--ivory);
  font-size: clamp(20px, 2vw, 30px);
  cursor: pointer;
}
.signup button:hover { opacity: 0.85; }
.signup.done { visibility: hidden; }
.signup-thanks {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- 4-column layout grid (toggle with G) ---------- */
.grid-overlay {
  position: fixed;
  inset: 0;
  /* 3 columns spanning the copy column, matching the People grid */
  padding: 0 var(--copy-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  z-index: 200;
  pointer-events: none;
}
.grid-overlay[hidden] { display: none; }
.grid-overlay div {
  background: rgba(9, 9, 175, 0.05);
  border-inline: 1px solid rgba(9, 9, 175, 0.28);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  :root { --m-top: clamp(84px, 12vh, 110px); } /* clears the fixed bar, no more */
  .dots { display: none; }
  /* the pinned paintings play on phones; painting by hand does not —
     a finger on the page is a scroll */
  .paint-btn { display: none; }
  .paint-tools { display: none; }
  /* the tagline has no room beside the year; the locations stay, and
     take the far column now the middle one is empty */
  .bar-bottom .tagline-swap { display: none; }
  .bar-bottom { grid-template-columns: 1fr 1fr; }
  /* no dots column on mobile, so the menu takes the full width */
  .menu { inset: 0; }
  .menu-inner { transform: none; padding: 92px var(--pad) 4vh; }
  /* each link on two lines, large, with air between the four */
  /* sized to the phone's height too, so a short one still fits without scrolling */
  .menu-links { gap: clamp(16px, 3vh, 26px); margin-top: 24px; }
  .menu-links a { font-size: clamp(40px, min(15vw, 7.2vh), 64px); line-height: 0.74; text-align: center; }
  .menu-links a span { display: block; }
  .menu-note { margin-top: clamp(20px, 4vh, 36px); }
  /* no ivory strip on a phone — the blue runs under the button, so the
     X turns ivory with the rest of the bar */
  body.menu-open .menu-btn { color: var(--ivory); }
  .meta { font-size: 11.5px; letter-spacing: 0.1em; }
  .logo svg { width: 128px; }

  /* simple scrolling on mobile: no sticky stacking, no pinned rails.
     relative, not static — the full-bleed screens' headlines are
     absolutely positioned and must stay inside their own panel. */
  .panel { position: relative; height: auto; min-height: 100vh; top: auto; }
  /* only About's rail carries content that belongs in the flow (the
     rocks). The rest hold just a paint canvas, and as flow items they
     sat beside the panel's own content and pushed it off centre. */
  .people-tall .sticky-rail { position: absolute; }

  .hero-object { max-width: 86vw; max-height: 62vh; height: auto; }
  /* the oversized subjects stay oversized; the panel clips the sides */
  .hero-object.hero-lg { max-width: none; max-height: 66vh; height: auto; }
  .hero-object.hero-md { max-width: 86vw; max-height: 66vh; height: auto; transform: none; }

  /* one column, in the page margins */
  .offerings-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin: 0 var(--pad);
    padding: 24px 0 48px;
  }
  .offer .manifesto-label { margin-bottom: 12px; }
  .how { min-height: 0; }
  /* the hold after the blue screen is a sticky-stack device; in plain
     flow it is just a hole in the page */
  .panel.arrow { margin-bottom: 0; }
  /* the arrow is fitted to the recording's landscape aspect on a phone,
     so it sits in a band at the centre; the words gather round that */
  .arrow-words { font-size: 15px; letter-spacing: 0.26em; }
  /* the painted arrow measures x 7–89%, y 38–65% of the screen there */
  .aw-who { left: 24%; top: 34%; }
  .aw-we  { left: 34%; top: 66%; }
  .aw-are { left: 80%; top: 61%; } /* just under the point, above WE: WHO, WE, ARE */

  /* the two passages: room under the chrome, the phone's measure, and a
     size that fits it. The closer takes its natural height with a tail
     for the footer to climb over. */
  .manifesto { padding: var(--m-top) var(--pad) 12vh; }
  .panel-copy { padding: var(--m-top) var(--pad) 0; } /* the same left edge as the passages */
  /* on a phone the two lines stack again, top left, as before */
  .panel-copy-split { display: block; padding-top: var(--m-top); }
  .panel-copy-split .statement { display: block; height: auto; }
  .panel-copy-split .statement span,
  .panel-copy-split .statement span:first-child,
  .panel-copy-split .statement span:last-child { position: static; display: block; text-align: left; }
  .panel-copy-split .statement.meta { font-size: 11.5px; line-height: 1.6; white-space: normal; }
  /* on a phone the wall sits higher and the line wraps */
  .how-head { height: 100vh; }
  .panel-copy.panel-copy-below { padding: 0 var(--pad) 12vh; }
  .panel-copy-below .statement { white-space: normal; }
  .field-photo { object-position: 50% 25%; }
  .wide-only { display: none; } /* authored line breaks for the wide measure */
  #manifesto .manifesto-copy,
  #believe .manifesto-copy { font-size: clamp(20px, 5.4vw, 30px); }
  #believe { height: auto; min-height: 0; top: auto; padding-bottom: 96px; }
  .believe-hold { position: static; height: auto; }

  .people-tall { height: auto; }
  .people-inner {
    margin-left: var(--pad);
    margin-right: var(--pad);
    max-width: none;
    padding-top: var(--m-top);
    padding-bottom: 0;
  }
  .people-cards { grid-template-columns: 1fr 1fr; gap: 24px; justify-content: start; }
  .residence,
  .advisors { margin: 0 var(--pad); padding-top: 64px; }
  .advisors { padding-bottom: 72px; }
  /* the drawings read small on a phone at the desktop clamp */
  .residents img,
  .advisor-list img { width: 128px; margin-bottom: 18px; }
  /* the same two columns as the partners above, edge for edge */
  .residents,
  .advisor-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 24px;
    margin-top: 40px;
  }
  /* an odd last one sits centred under the pair above, at a column's width */
  .residents > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }

  /* The footer is an ordinary last screen on a phone: in the flow, so it
     scrolls in at the speed of the finger rather than climbing on a
     lever. The wordmark spans the frame with the email field across it,
     as on the desktop; the line above it is dropped for room. */
  .panel-spacer { display: none; }
  .crossing-fixed {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
    transform: none !important;
    visibility: visible !important;
  }
  .crossing-label { display: none; }
  /* The letters run from the menu button's left edge (it hangs 13px
     outside the margin) to Contact's right edge; the ring after the s
     is let off the right of the screen. In the artwork the letters end
     at 88.44 of 95.04 units, hence the ratio. */
  .crossing-fixed { overflow: hidden; }
  .crossing-inner {
    width: calc((100vw - 2 * var(--pad) + 13px) * 95.04 / 88.44);
    align-self: flex-start;
    margin-left: calc(var(--pad) - 13px);
  }
  /* the field centres on the letters, not on the letters plus the ring */
  .signup { left: calc(50% * 88.44 / 95.04); }
  .signup { width: 74vw; }
  /* on the year's and the locations' line: the bar's text is 10px tall
     and the rings 30, so they drop by half the difference */
  /* the bar's line is the year and the city; the rights line goes above
     the marks, wrapped, and the marks sit between it and the wordmark */
  .crossing-rights { bottom: calc(var(--pad) + 34px); white-space: normal; width: 84vw; font-size: 10px; }
  .crossing-socials { top: calc(50svh + 62px + 8vh); bottom: calc(var(--pad) + 84px); }

  /* one city at a time, bottom right */
  .loc-full { display: none; }
  .loc-rot { display: inline-grid; }
}

/* ---------- the phone's type scale ----------
   The desktop clamps bottom out at sizes that read on a laptop and not in
   the hand. Enlarged progressively: the smallest settings the most, the
   display headlines hardly at all.
     mono labels   10 -> 11.5   (+15%)
     mono blurbs   10 -> 12.5   (+25%)
     serif body    14 -> 16.5   (+18%)
     when body     15 -> 17.5   (+17%)
     bio lede      16 -> 19     (+19%)
     names         17 -> 20.5   (+21%)
     leads/intros  18 -> 20.5   (+14%)
     passages      21 -> 23     (+10%)
     statements    30 -> 31     (+3%)                                   */
@media (max-width: 860px) {
  .people-cards p,
  .residents p,
  .advisor-list li { font-size: 12.5px; line-height: 1.5; }
  .menu-note { font-size: 12.5px; }
  .pill { font-size: 13px; }
  /* 16px is also the size below which iOS zooms the page on focus */
  .signup input { font-size: 16px; letter-spacing: 0.08em; padding: 10px 18px; }

  .offer,
  .bio-body { font-size: 16.5px; line-height: 1.45; }

  .people-cards h3,
  .offer .manifesto-label { font-size: 19px; }
  .people-lead,
  .residence-intro,
  .serif-sub { font-size: 20.5px; line-height: 1.28; }

  #manifesto .manifesto-copy,
  #about .manifesto-copy,
  #believe .manifesto-copy { font-size: clamp(23px, 5.8vw, 31px); }
  /* one heading level, one size — the full-bleed screens' headlines
     included */
  .statement,
  .panel-copy .statement { font-size: 31px; line-height: 1.16; }
  /* an intro, though it carries the statement class */
  .statement.residence-intro { font-size: 20.5px; line-height: 1.28; }
}