/* ==========================================================================
   COHERENCE — FIRST FORM

   Two typefaces with clear roles.
   Anybody is kept for the name and for the small uppercase marks around the
   page: the wordmark, the indices, the labels.
   Outfit carries language: the titles and everything meant to be read.

   One ratio, φ ≈ 1.618, generates the type scale, the spacing scale and the
   measures every band is built on, so parts that look nothing alike still
   share an ancestry.

   The page has one axis. Everything sits on the true centre of the viewport,
   and the index floats over the left edge without displacing it.

   The page commits to paper, except for one dark passage in the middle.
   ========================================================================== */

/* THE SCREEN

   How tall a screen is, as far as this site is concerned. It is set once,
   in pixels, by main.js, and it is only ever set again when the width
   changes — a phone turned on its side, a window resized by hand.

   It is not asked again when a mobile browser hides or shows its own
   toolbar. That changes the height by some sixty pixels, and every section
   here is a screen tall: they would all grow at once, the page would get
   hundreds of pixels longer under the reader, and the scroll would land on
   different words than the ones they were reading. Held still, nothing
   moves.

   Without script it falls back to svh, the height with the toolbar showing,
   which is the same idea written in CSS. */
:root { --screen: 100svh; --phi: 1.618; --sp-1: 0.618rem; --sp-2: 1rem; --sp-3: 1.618rem; --sp-4: 2.618rem; --sp-5: 4.236rem; --sp-6: 6.854rem; --sp-7: 11.089rem; --t-label: 0.6875rem; --t-sm: 0.9375rem; --t-body: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); --t-md: clamp(1.25rem, 1.06rem + 0.82vw, 1.618rem); --t-lg: clamp(1.875rem, 1.32rem + 2.5vw, 3rem); --t-arc: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem); --t-xl: clamp(2.5rem, 1.5rem + 5.2vw, 5rem); --paper: #faf9f6; --ink: #16150e; --ink-72: rgba(22,21,14,.72); --ink-52: rgba(22,21,14,.52); --ink-38: rgba(22,21,14,.38); --ink-18: rgba(22,21,14,.18); --hair: rgba(22,21,14,.13); --terra: #bd5237; --slate: #6b89a6; --ochre: #b08825; --moss: #5b7a62; --c-creations: #d2381e; --c-guided: #2f45d6; --c-by: #806f0e; --c-design: #17743f; --c-and: #b31d5c; --c-coherence: #0d7484; --accent: var(--ink); --rail-w: 4.236rem; --measure: 34rem; --page-max: 66rem; --ease: cubic-bezier(.2,.7,.2,1); }

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

html { background: var(--paper); text-size-adjust: 100%; overflow-x: clip; }

/* Hidden means hidden. A class that sets display beats the browser's own
   rule for [hidden], and then something the page meant to keep out of sight
   is simply there — drawn, empty, in the way. This settles it once, for
   every element on the site. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference){
  html { scroll-behavior: smooth; }
}

body { margin: 0px; padding-left: 0px; background: var(--paper); color: var(--ink); font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--t-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }

::selection { background: rgba(189, 82, 55, 0.16); }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; border-radius: 2px; }

.sr-only, .skip { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }

.skip:focus { position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 200; width: auto; height: auto; margin: 0px; clip: auto; overflow: visible; padding: 0.6rem 0.9rem; background: var(--ink); color: var(--paper); font-family: Anybody, system-ui, sans-serif; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }


/* --------------------------------------------------------------------------
   THE INDEX

   Latent, reached, current. Every mark carries its colour from the first
   moment; what is gained by reading the page is weight, not colour. Over the
   dark passage they turn to paper, since none of the six voices survives on
   black.
   -------------------------------------------------------------------------- */
.rail { position: fixed; left: 0px; top: 0px; width: var(--rail-w); height: var(--screen); display: flex; align-items: center; justify-content: center; z-index: 60; }

/* On the cover the index stays out of the way. It comes in, slowly and from
   just off the edge, once the page moves on from the cover. */
.rail { transition: opacity 1.1s var(--ease), translate 1.1s var(--ease), visibility 0s linear 0s; }

.at-cover .rail { opacity: 0; translate: -14px 0px; visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease), translate .6s var(--ease), visibility 0s linear .6s; }

.rail-list { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: var(--sp-3); }

.rail-item { position: relative; display: grid; place-items: center; width: 1.618rem; height: 1.618rem; color: var(--accent); opacity: 0.42; text-decoration: none; transition: opacity .9s var(--ease),
    color .55s var(--ease),
    transform .9s var(--ease); }

.rail-item[data-state="reached"] { opacity: 1; }

.rail-item[data-state="current"] { opacity: 1; transform: scale(1.12); }

.rail-item:hover { opacity: 1; }

.rail-item[data-key="threshold"] { --accent: var(--c-creations); }

.rail-item[data-key="arc"] { --accent: var(--c-guided); }

.rail-item[data-key="claim"] { --accent: var(--c-design); }

.rail-item[data-key="community"] { --accent: var(--c-coherence); }

.rail-item[data-key="statement"] { --accent: var(--c-guided); }

.rail-item[data-key="process"] { --accent: var(--c-and); }

.rail-item[data-key="events"] { --accent: var(--c-coherence); }

.rail-item[data-key="practice"] { --accent: var(--c-by); }

.rail-item[data-key="state"] { --accent: var(--c-creations); }

.rail-item[data-key="invitation"] { --accent: var(--c-guided); }

.rail-glyph { display: block; width: 14px; height: 14px; }

.rail-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (prefers-reduced-motion: no-preference){
  .rail-item[data-key="threshold"][data-state="current"] .rail-glyph { animation: 7.2s ease-in-out 0s infinite normal none running breath; }
}

@keyframes breath { 
  0%, 100% { transform: scale(0.86); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

.rail-label { position: absolute; left: 100%; margin-left: 0.7rem; white-space: nowrap; font-family: Anybody, system-ui, sans-serif; font-weight: 600; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }

.rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   TOP NAV

   Closed it holds two things: a set of lines and one action. Contact widens
   it and the links become available without the page moving. The open state
   is reachable by click, touch and keyboard alike.
   -------------------------------------------------------------------------- */
/* Solid, not nearly so. Half-transparent, a line of the page showed through
   the nav as it passed under it, and two texts in the same place read as a
   smear rather than as one thing over another. */
.topnav { position: fixed; top: var(--sp-3); right: var(--sp-3); z-index: 90; display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.3rem 0.3rem 1.05rem; background: var(--paper); backdrop-filter: blur(11px) saturate(1.1); border: 1px solid var(--hair); border-radius: 999px; box-shadow: rgba(22, 21, 14, 0.07) 0px 10px 30px; transition: box-shadow .5s var(--ease), background .5s var(--ease); }

.topnav.is-open { background: var(--paper); box-shadow: rgba(22, 21, 14, 0.1) 0px 14px 42px; }

/* In a hand the screen is small enough that the nav is in the way of what
   it is standing on. Going down, it leaves; coming back up, it is there
   again before the thumb is. */
.topnav { transition: box-shadow .5s var(--ease), background .5s var(--ease), translate .45s var(--ease); }

.topnav.is-away { translate: 0px calc(-100% - var(--sp-3) - 12px); }

.topnav-toggle { appearance: none; border: 0px; background: none; padding: 0.5rem 0.35rem; margin: 0px; cursor: pointer; display: grid; place-items: center; color: var(--ink); border-radius: 999px; }

.bars { display: block; width: 17px; }

.bars i { display: block; height: 1.5px; background: currentcolor; border-radius: 1px; transition: width .45s var(--ease), transform .45s var(--ease); width: 100%; }

.bars i + i { margin-top: 4px; }

.topnav.is-open .bars i:nth-child(2) { width: 60%; }

.topnav-reveal { width: 0px; overflow: hidden; opacity: 0; visibility: hidden; transition: width .6s var(--ease),
    opacity .38s var(--ease),
    visibility 0s linear .6s; }

.topnav.is-open .topnav-reveal { width: var(--reveal-w, auto); opacity: 1; visibility: visible; transition: width .6s var(--ease),
    opacity .45s var(--ease) .08s,
    visibility 0s linear 0s; }

.topnav.is-measuring .topnav-reveal, .topnav.is-measuring .topnav-links li { transition: none; }

.topnav-inner { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); min-width: 0px; overflow: hidden; white-space: nowrap; }

.topnav-links { list-style: none; margin: 0px; padding: 0px; display: flex; align-items: center; gap: var(--sp-3); }

.lang-toggle { appearance: none; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 1px solid var(--hair); background: none; margin: 0px; padding: .3rem 0 .3rem var(--sp-2); cursor: pointer; display: flex; align-items: center; gap: 0.28rem; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.11em; color: var(--ink-38); }

.lang-code { color: var(--ink-38); transition: color .35s var(--ease); }

.lang-sep { color: var(--ink-18); }

html[lang="en"] .lang-code[data-lang="en"], html[lang="es"] .lang-code[data-lang="es"] { color: var(--ink); }

.lang-toggle:hover .lang-code { color: var(--ink-72); }

html[lang="en"] .lang-toggle:hover .lang-code[data-lang="es"], html[lang="es"] .lang-toggle:hover .lang-code[data-lang="en"] { color: var(--terra); }

.topnav-links li { transform: translateX(6px); transition: transform .5s var(--ease); }

.topnav.is-open .topnav-links li { transform: none; }

.topnav.is-open .topnav-links li:nth-child(2) { transition-delay: 0.05s; }

.topnav.is-open .topnav-links li:nth-child(3) { transition-delay: 0.1s; }

.topnav-links a { display: block; padding: 0.3rem 0.1rem; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-52); text-decoration: none; transition: color .3s var(--ease); }

.topnav-links a:hover { color: var(--ink); }

.topnav-cta { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0.72rem 1.35rem; background: var(--ink); color: var(--paper); border-radius: 999px; font-family: Anybody, system-ui, sans-serif; font-weight: 600; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background .35s var(--ease), transform .35s var(--ease); }

.topnav-cta:hover { background: var(--terra); }

.topnav-cta:active { transform: scale(0.98); }

.band-threshold .band-body, .arc-stage { container-type: inline-size; }


/* --------------------------------------------------------------------------
   THE THRESHOLD

   The mark is the one sovereign presence, sized from the column it sits in.
   Under it a sentence rises word by word, in reading order, as the name
   above it is set. When the last has settled, the pair
   rises and the sentence below comes into the space that opens.
   -------------------------------------------------------------------------- */
.hero-mark { margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 400; font-size: min(19.6cqi, 13.5rem); line-height: 0.92; letter-spacing: -0.028em; color: var(--ink); }

.hero-phrase { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.06em 0.4em; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: clamp(1.0625rem, 2.45vw, 1.75rem); line-height: 1.34; letter-spacing: -0.004em; }

.hero-phrase .w { display: inline-block; }

.hero-phrase .w:nth-child(1) { color: var(--c-creations); }

.hero-phrase .w:nth-child(2) { color: var(--c-guided); }

.hero-phrase .w:nth-child(3) { color: var(--c-by); }

.hero-phrase .w:nth-child(4) { color: var(--c-design); }

.hero-phrase .w:nth-child(5) { color: var(--c-and); }

.hero-phrase .w:nth-child(6) { color: var(--c-coherence); }

/* the six words rise in reading order, a breath apart, once the name is
   nearly set: the same gesture as the letters above them, only slower */
.hero-phrase .w:nth-child(1) { --delay: 0.75s; }

.hero-phrase .w:nth-child(2) { --delay: 0.84s; }

.hero-phrase .w:nth-child(3) { --delay: 0.93s; }

.hero-phrase .w:nth-child(4) { --delay: 1.02s; }

.hero-phrase .w:nth-child(5) { --delay: 1.11s; }

.hero-phrase .w:nth-child(6) { --delay: 1.2s; }

.js .hero-phrase .w { opacity: 0; transform: translateY(0.45em); filter: blur(4px); transition: opacity .9s var(--ease) var(--delay, 0s), transform 1.1s var(--ease) var(--delay, 0s), filter .9s var(--ease) var(--delay, 0s); }

.js .band-threshold.is-formed .hero-phrase .w { opacity: 1; transform: none; filter: blur(0px); }

@media (prefers-reduced-motion: reduce){
  .js .hero-mark, .js .hero-phrase .w { opacity: 1; transform: none; filter: none; transition: none; }
}

main { display: block; }

.band { max-width: var(--page-max); margin: 0px auto; padding: var(--sp-6) max(var(--sp-4), var(--rail-w)); text-align: center; scroll-margin-top: var(--sp-3); }

/* The words arrive from an offset, and an offset is width the page does not
   have. Each band that moves something holds its own edge, so no transform
   can ever widen the document under a phone. */
.band-threshold { min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; padding-top: var(--sp-6); padding-bottom: var(--sp-6); overflow: hidden; }

/* The hero spans the whole screen so its figures can, while what it says
   keeps the width it always had. */
.band.band-threshold { position: relative; max-width: none; }

.band-threshold > .band-body { position: relative; z-index: 1; width: 100%; max-width: calc(var(--page-max) - 2 * max(var(--sp-4), var(--rail-w))); margin-inline: auto; }

.band-body { min-width: 0px; }

/* The rise. The pair sits a little low while the sentence is assembling and
   comes up to its place once it has, which is also the moment the page goes
   on to what the rise was for. */
@media (prefers-reduced-motion: reduce){
  .js .band-threshold .hero-lead { opacity: 1; transform: none; filter: none; transition: none; }
}


/* --------------------------------------------------------------------------
   WHAT WE DO

   A spread, set in the same hand as the events. The words on one side and
   the room they are about on the other, and an outline in the section's
   colour printed a little off register.

   It arrives the way an event does: the photograph is uncovered from the
   side it faces, the words come in one after the other.
   While the page is read the picture drifts slower than its frame, and a
   pointer over the photograph looks through it.
   -------------------------------------------------------------------------- */
.band-statement { min-height: calc(var(--screen) * 0.78); display: flex; flex-direction: column; justify-content: center; }

/* phone and tablet: the words, then the room */
.st-row { --v: var(--c-guided); --p: 0; position: relative; display: grid; grid-template-columns: minmax(0px, 1fr); gap: var(--sp-5); width: 100%; text-align: left; }

.st-text { position: relative; z-index: 3; transform: translate3d(0px, calc(var(--p, 0) * -16px), 0px); }

.statement { margin: 0px; font-weight: 400; font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }

/* One whole gesture to a line, cut by hand rather than by the width of the
   screen, so the block keeps its shape in both languages. main.js splits
   each line into its words; they arrive in reading order, each rising out
   of the page in a voice of its own and settling into ink. The words the
   promise turns on keep their colour: authentic expression, both alike. */
.st-line { display: block; text-wrap: balance; }

.js .st-w { display: inline-block; --wd: calc(0.08s + var(--i, 0) * 0.055s); opacity: 0; transform: translateY(0.26em); filter: blur(5px); color: var(--vw, var(--ink)); transition: opacity .6s var(--ease) var(--wd), transform .8s var(--ease) var(--wd), filter .6s var(--ease) var(--wd), color .9s var(--ease) calc(var(--wd) + .45s); }

.js .statement.is-writing .st-w { opacity: 1; transform: none; filter: blur(0px); color: var(--ink); }

.js .statement.is-writing .st-w.is-lit { color: var(--c-creations); }

@media (prefers-reduced-motion: reduce){
  .js .st-w { opacity: 1; transform: none; filter: none; color: var(--ink); transition: none; }
  .js .st-w.is-lit { color: var(--c-creations); }
}

.st-shot { --off: 8px; --dir: -1; position: relative; margin: 0px; }

.st-crop { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: rgb(233, 230, 223); }

/* larger than its frame on every side, so it can drift and lean without an
   edge ever showing */
.st-img { position: absolute; top: -10%; left: -5%; width: 110%; height: 120%; max-width: none; object-fit: cover; transform: translate3d(calc(var(--lx, 0) * 1px), calc(var(--p) * -5% + var(--ly, 0) * 1px), 0px) scale(calc(1 + var(--hov, 0) * 0.05)); will-change: transform; }

.st-frame { position: absolute; inset: 0px; z-index: 2; border: 1.5px solid var(--v); border-radius: 4px; pointer-events: none; transform: translate3d(calc(var(--dir) * (var(--off) + var(--hov, 0) * 6px) - var(--lx, 0) * 0.8px), calc(var(--off) + var(--p) * 12px + var(--hov, 0) * 6px - var(--ly, 0) * 0.8px), 0px); }

/* computer: one piece on the true centre of the screen, twelve columns */
@media (min-width: 1025px){
  .band.band-statement { max-width: none; margin: 0px; padding: 0px; min-height: var(--screen); }
  .st-row { grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: var(--sp-3); row-gap: 0px; align-items: end; align-content: center; width: min(100% - 2 * var(--sp-5), 80rem); min-height: var(--screen); margin: 0px auto; }
  .st-text { grid-column: 1 / span 6; grid-row: 1; align-self: end; padding-bottom: 0.08em; container-type: inline-size; }
  .st-shot { --off: 14px; grid-column: 7 / span 6; grid-row: 1; margin: 0px; }
  .st-crop { aspect-ratio: 5 / 4; }
  .statement { font-size: min(2.9rem, 5.9cqi); }
}

/* arrival */
.js .st-crop { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }

.js .st-row.is-in .st-crop { clip-path: inset(0 0 0 0); }

.js .st-frame { opacity: 0; transition: opacity .8s var(--ease) .75s; }

.js .st-row.is-in .st-frame { opacity: 1; }

.js .st-text > * { opacity: 0; translate: 0px 22px; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }

.js .st-row.is-in .st-text > * { opacity: 1; translate: 0px 0px; }

.js .st-row.is-in .st-text > :nth-child(1) { transition-delay: .35s; }

.js .st-row.is-in .st-text > :nth-child(2) { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce){
  .js .st-crop, .js .st-frame, .js .st-text > * { opacity: 1; translate: none; clip-path: none; transition: none; }
}


/* --------------------------------------------------------------------------
   THE SEQUENCE

   Six states of one movement, read by scrolling rather than by paging. The
   stage is sticky, so descending moves the states through one fixed frame.
   Leaving and arriving are different gestures: a state withdraws upward and
   pales, the next comes toward the reader already at full ink.
   -------------------------------------------------------------------------- */
.band-arc { padding-top: 0px; padding-bottom: 0px; }

.js .band.band-arc > * { opacity: 1; transform: none; transition: none; }

.arc-step { margin: 0 auto var(--sp-6); }

.arc-step:last-child { margin-bottom: 0px; }

.arc-word { margin: 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: clamp(2rem, 9.4cqi, 7rem); line-height: 1; letter-spacing: -0.022em; text-transform: lowercase; color: var(--ink); }

.arc-text { margin: var(--sp-3) auto 0; max-width: 30rem; }

.arc-lead { margin: 0px auto; max-width: 30rem; font-size: var(--t-arc); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink); }

.arc-note { margin: var(--sp-2) auto 0; font-size: var(--t-arc); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink-52); }

@media (prefers-reduced-motion: no-preference){
  .js .arc-track { --step-vh: calc(var(--screen) * 1.28); --tail: .86; height: calc(var(--screen) + (5 + var(--tail)) * var(--step-vh)); position: relative; container-type: inline-size; }
  .js .arc-stage { position: sticky; top: 0px; height: var(--screen); display: grid; grid-template-columns: minmax(0px, 1fr); }
  .js .arc-field { grid-area: 1 / 1; place-self: stretch start; width: 100vw; margin-left: calc(50% - 50vw); }
  .js .arc-step { grid-area: 1 / 1; place-self: stretch; position: relative; margin: 0px; width: 100%; }
  .js .arc-word { position: absolute; left: 0px; right: 0px; bottom: calc(50% + 1.3rem - var(--drop, 0px)); margin: 0px; }
  .js .arc-text { position: absolute; left: 0px; right: 0px; top: calc(50% + 1.3rem); margin: 0px auto; }
  .js .arc-word, .js .arc-text { will-change: transform, opacity; transform-origin: 50% 50%; }
  .js .arc-step:not(:first-child) .arc-word, .js .arc-step:not(:first-child) .arc-text { opacity: 0; }
  .js .arc-word { color: rgba(22,21,14,var(--wash, 1)); }
  .js .arc-lead { color: rgba(22,21,14,var(--wash, 1)); }
  .js .arc-note { color: rgba(22,21,14,calc(var(--wash, 1) * .52)); }
}

@media (max-width: 900px){
  .js .arc-track { --step-vh: calc(var(--screen) * 1.28); }
}

.arc-field { position: relative; overflow: hidden; pointer-events: none; z-index: 0; }

.shape { position: absolute; left: var(--x); top: calc(var(--y) * 100%); width: calc(var(--w) * var(--fs, 1)); margin-left: calc(var(--w) * var(--fs, 1) / -2); will-change: transform; }

.shape svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference){
  .shape svg { animation: sway var(--dur, 28s) var(--dl, 0s) ease-in-out infinite alternate; }
  .shape.turn svg { animation: sway var(--dur, 28s) var(--dl, 0s) ease-in-out infinite alternate,
      turn var(--turn, 180s) var(--dl, 0s) linear infinite; }
  .shape.turn-back svg { animation-direction: alternate, reverse; }
}

@keyframes sway { 
  0% { transform: translate3d(0px, 0px, 0px) rotate(0deg); }
  100% { transform: translate3d(var(--dx, 6px), var(--dy, -7px), 0)
      rotate(var(--spin, 2deg)); }
}

@keyframes turn { 
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

.shape { --boost: 0; }

.shape .f-terra { fill: rgba(210,56,30,calc(.72 + var(--boost) * .1)); }

.shape .f-blue { fill: rgba(47,69,214,calc(.66 + var(--boost) * .12)); }

.shape .f-ochre { fill: rgba(128,111,14,calc(.72 + var(--boost) * .1)); }

.shape .f-green { fill: rgba(23,116,63,calc(.68 + var(--boost) * .12)); }

.shape .f-magenta { fill: rgba(179,29,92,calc(.66 + var(--boost) * .12)); }

.shape .s-terra, .shape .s-blue, .shape .s-ochre, .shape .s-green, .shape .s-teal, .shape .s-magenta { fill: none; stroke-width: calc(1.6 + var(--boost) * .35); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.shape .s-terra { stroke: rgba(210,56,30,calc(.55 + var(--boost) * .13)); }

.shape .s-blue { stroke: rgba(47,69,214,calc(.5 + var(--boost) * .15)); }

.shape .s-ochre { stroke: rgba(128,111,14,calc(.6 + var(--boost) * .12)); }

.shape .s-green { stroke: rgba(23,116,63,calc(.5 + var(--boost) * .15)); }

.shape .s-teal { stroke: rgba(13,116,132,calc(.55 + var(--boost) * .13)); }

.shape .s-magenta { stroke: rgba(179,29,92,calc(.5 + var(--boost) * .15)); }

.field-spiral { position: absolute; left: 80%; top: 27%; width: min(30vmin, 272px); aspect-ratio: 1 / 1; margin: 0px; transform: translate(-50%, -50%); will-change: transform; }

.field-spiral svg { width: 100%; height: 100%; overflow: visible; }

.field-spiral { --boost: 0; }

.field-spiral path { fill: none; stroke: rgba(13,116,132,calc(.26 + var(--boost) * .12)); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

@media (min-width: 901px){
  .shape { left: max(var(--x), calc(var(--rail-w) + var(--w) / 2 + 20px)); }
}

@media (max-width: 900px){
  .arc-field { --fs: .66; }
  .shape-inner { display: none; }
  .field-spiral { left: 76%; top: 23%; width: min(46vmin, 200px); }
}

.js .arc-field .shape { top: 0px; }

@media (prefers-reduced-motion: reduce){
  .js .arc-field .shape { top: calc(var(--y) * 100%); }
  .shape { transform: none !important; }
  .field-spiral { transform: translate(-50%, -50%) !important; }
}


/* --------------------------------------------------------------------------
   HOW A CREATION FINDS ITS FORM

   A spread that holds still while it is read, in the same hand as the
   events and the statement. The frame stays in the middle of the screen
   and the section's scroll is its clock.

   On one side, six figures in the six voices. They are the same figures in
   every state; what changes is how they stand to each other. Loose, then
   joined by lines, then aligned on a circle, and at last settled along the
   spiral as it draws itself. They move continuously with the scroll, so
   the passage between two states is itself something to watch.

   On the other side, the words of the state they are in, one at a time,
   each arriving from just below as the one before it yields. The state's
   number is printed large across the seam in that state's colour, and the
   outline behind the figures takes the same colour.

   Without script, and for anyone who asked for less motion, the four
   states stand one under the other and the figures rest in their last,
   settled form.
   -------------------------------------------------------------------------- */
.band-process { padding-block: 0px; }

.proc-track { position: relative; }

.proc-stage { --v: var(--c-creations); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: var(--sp-6); }

.proc-stage[data-at="1"] { --v: var(--c-guided); }

.proc-stage[data-at="2"] { --v: var(--c-design); }

.proc-stage[data-at="3"] { --v: var(--c-coherence); }

/* phone and tablet: the figures, then the words */
.proc-grid { display: grid; grid-template-columns: minmax(0px, 1fr); align-items: center; gap: var(--sp-4); width: 100%; max-width: 40rem; margin: 0px auto; text-align: left; }

.proc-art { position: relative; width: min(calc(var(--screen) * 0.3), 14rem); aspect-ratio: 1 / 1; margin: 0px; }

.proc-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }

.proc-svg .o { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; }

.proc-svg .s { fill: var(--c); }

/* each figure keeps breathing on its own clock while the scroll moves it */
.proc-svg .pn > * { transform-box: fill-box; transform-origin: 50% 50%; animation: sky-sway 13s ease-in-out infinite alternate; }

.proc-svg .pn:nth-child(2) > * { animation-duration: 16s; animation-delay: -5s; }

.proc-svg .pn:nth-child(3) > * { animation-duration: 11s; animation-delay: -3s; }

.proc-svg .pn:nth-child(4) > * { animation-duration: 15s; animation-delay: -8s; }

.proc-svg .pn:nth-child(5) > * { animation-duration: 12s; animation-delay: -2s; }

.proc-svg .pn:nth-child(6) > * { animation-duration: 17s; animation-delay: -6s; }

.proc-svg .pl { stroke: var(--ink-38); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; }

.proc-spiral { fill: none; stroke: var(--v); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; transition: stroke .8s var(--ease); }

/* the number of the state, printed across the seam */
.proc-num { position: absolute; left: calc(100% - 0.6em); bottom: -0.14em; z-index: 2; display: grid; margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 700; font-size: clamp(4.5rem, 19vw, 7rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--v); mix-blend-mode: multiply; pointer-events: none; }

.proc-num span { grid-area: 1 / 1; opacity: 0; translate: 0px 30px; transition: opacity .6s var(--ease), translate .9s var(--ease), color .8s var(--ease); }

.proc-num span[data-on] { opacity: 1; translate: 0px 0px; }

/* the words */
.proc-copy { position: relative; z-index: 3; min-width: 0px; }

.proc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.proc-ticks { list-style: none; margin: var(--sp-2) 0 0; padding: 0px; display: flex; gap: 0.4rem; }

.proc-ticks li { width: 2.2rem; height: 2px; background: var(--ink-18); transition: background .6s var(--ease); }

.proc-ticks li[data-reached] { background: var(--v); }

.proc-text { position: relative; margin: var(--sp-4) 0 0; width: 100%; }

.proc-state { margin-block: var(--sp-5); }

.proc-title { margin: 0px; font-weight: 500; font-size: var(--t-lg); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }

.proc-desc { margin: var(--sp-3) 0 0; max-width: 34rem; font-size: clamp(1.125rem, 1.04rem + 0.42vw, 1.4rem); line-height: 1.5; letter-spacing: -0.004em; color: var(--ink-72); }

/* the way to the thinking sits under each sentence, close to it. When the
   states are read one at a time only the current one shows it; when they
   are all on the page at once, only the last one does */
.proc-more { margin: var(--sp-3) 0 0; }

.proc-state:not(:last-child) .proc-more { display: none; }

.proc-more a { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); text-decoration: none; border-bottom: 1px solid var(--ink-18); padding-bottom: 3px; transition: color .3s var(--ease), border-color .3s var(--ease); }

.proc-more a::after { content: " \2192"; }

.proc-more a:hover { color: var(--ink); border-color: var(--ink-52); }

/* The only controls left on the page are the ones in the events row, which
   borrow this. */
.proc-nav { appearance: none; width: 3.5rem; height: 3.5rem; padding: 0px; border: 1px solid var(--ink-18); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .45s var(--ease),
    border-color .45s var(--ease),
    color .45s var(--ease),
    opacity .45s var(--ease); }

.proc-nav svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.proc-nav:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* The band reveal would put a transform on the track, and a transform is a
   containing block: the frame would stop holding. It arrives plainly. */
.js .band.band-process > * { opacity: 1; transform: none; transition: none; }

/* computer: one piece on the true centre of the screen, twelve columns */
@media (min-width: 1025px){
  .band.band-process { max-width: none; margin: 0px; padding-inline: 0px; }
  .proc-grid { max-width: none; width: min(100% - 2 * var(--sp-5), 80rem); grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: var(--sp-3); row-gap: 0px; }
  /* The drawing carries its own margin inside its box: its ink begins a
     ninth of the way in. It is pulled back part of that way, so the ink
     leans toward the middle of the screen without leaving its column. The
     big numeral belongs to the drawing and travels with it. */
  .proc-art { grid-column: 1 / span 5; grid-row: 1; width: min(calc(var(--screen) * 0.62), 100%); justify-self: start; transform: translateX(-4%); }
  .proc-num { font-size: clamp(8rem, 13vw, 13rem); left: calc(100% - 0.55em); bottom: -0.12em; }
  .proc-copy { grid-column: 7 / span 6; grid-row: 1; }
}

@media (max-width: 900px){
  .proc-nav { width: 3.125rem; height: 3.125rem; }
}

@media (prefers-reduced-motion: no-preference){
  /* the read of the section: one screen to hold the frame, and the rest is
     what is spent moving through the four */
  .js .proc-track { height: calc(var(--screen) * 3.4); }
  .js .proc-stage { position: sticky; top: 0px; height: var(--screen); padding-block: 0px calc(var(--screen) * 0.07); }
  .js .proc-text { display: grid; }
  .js .proc-state { grid-area: 1 / 1; margin-block: 0px; opacity: 0; visibility: hidden; transform: translate3d(0px, 10px, 0px); transition: opacity .55s var(--ease), transform .7s var(--ease); }
  .js .proc-state[data-current] { opacity: 1; visibility: visible; transform: none; }
  .js .proc-state .proc-more { display: block; }
}

/* phone: the drawing, its number and the words, all on one centre line */
@media (max-width: 640px){
  .proc-copy { text-align: center; }
  .proc-art { margin-inline: auto; }
  .proc-ticks { justify-content: center; }
  .proc-desc { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce){
  .proc-svg .pn > * { animation: none; }
  .proc-num, .proc-ticks { display: none; }
}


/* --------------------------------------------------------------------------
   A CONVICTION

   One claim, set large and cut by hand into three lines, with a frieze
   running through it: twenty-four marks across the page, all the same
   small point, among which figures appear as the claim is read. main.js
   only says how far the reader has come; everything else is here.
   -------------------------------------------------------------------------- */
.band-claim { padding-block: 0px; }

/* the reader is held here while the figures appear: the track is what is
   scrolled through, the stage is what stays */
.cl-track { position: relative; }

.cl-stage { display: flex; align-items: center; min-height: var(--screen); }

.js .cl-track { height: calc(var(--screen) * 2.1); }

.js .cl-stage { position: sticky; top: 0px; height: var(--screen); }

/* a sticky stage cannot live inside anything that moves */
.js .band.band-claim > * { opacity: 1; transform: none; transition: none; }

.cl-row { width: 100%; text-align: left; container-type: inline-size; }

.claim { margin: 0px; font-weight: 400; font-size: min(4.2rem, 6.2cqi); line-height: 1.04; letter-spacing: -0.032em; color: var(--ink); }

.cl-line { display: block; text-wrap: balance; }

/* the two words the claim is about, in the voice of design */
.cl-lit { color: var(--c-design); }

.cl-field { display: flex; align-items: center; justify-content: space-between; width: 100%; height: clamp(2.6rem, 8vh, 4.4rem); margin: 0.12em 0px 0.06em; }

.cl-mark { position: relative; display: block; flex: 0 0 auto; width: var(--d); height: var(--d); transform: translateY(var(--y, 0px)); }

.cl-a, .cl-b { position: absolute; inset: 0px; display: block; }

.cl-a { background: var(--ink-18); border-radius: 50%; transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }

/* a figure grows out of the point it replaces */
.cl-b { background: var(--c); border-radius: 50%; opacity: 0; transform: scale(0.3); transform-origin: 50% 50%; transition: opacity 1.3s var(--ease), transform 1.6s cubic-bezier(.2, .8, .2, 1); }

.cl-mark[data-shape="diamond"] .cl-b { border-radius: 0px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.cl-mark[data-shape="triangle"] .cl-b { border-radius: 0px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }

.cl-mark[data-shape="ring"] .cl-b { background: none; border: 2px solid var(--c); }

.cl-mark.is-design .cl-a { opacity: 0; transform: scale(0.25); }

.cl-mark.is-design .cl-b { opacity: 1; transform: scale(calc(var(--b, 14px) / var(--d))); }

/* once it is there, it breathes, each on its own clock */
.cl-mark.is-design .cl-b { animation: cl-breath 9s ease-in-out calc(var(--k, 0) * 620ms) infinite; }

@keyframes cl-breath {
  0%, 100% { scale: 1; }
  50% { scale: 1.07; }
}

/* the claim arrives line by line, the frieze with it */
.js .cl-row > .claim > * { opacity: 0; translate: 0px 22px; transition: opacity 1.4s var(--ease), translate 1.8s var(--ease); }

.js .band-claim.is-visible .cl-row > .claim > * { opacity: 1; translate: 0px 0px; }

.js .band-claim.is-visible .cl-field { transition-delay: .35s; }

.js .band-claim.is-visible .cl-line:nth-of-type(2) { transition-delay: .7s; }

.js .band-claim.is-visible .cl-line:nth-of-type(3) { transition-delay: 1s; }

@media (max-width: 900px){
  .js .cl-track { height: calc(var(--screen) * 1.75); }
  .cl-mark.is-far { display: none; }
  .claim { font-size: clamp(1.75rem, 8.4cqi, 4.2rem); }
}

@media (prefers-reduced-motion: reduce){
  .js .cl-track { height: auto; }
  .js .cl-stage { position: static; height: auto; }
  .js .cl-row > .claim > * { opacity: 1; translate: none; transition: none; }
  .cl-mark.is-design .cl-b { animation: none; }
  .cl-a, .cl-b { transition: none; }
}

/* --------------------------------------------------------------------------
   IN RELATION

   The one dark passage, set in the same hand as the rest of the page.

   A label and a title hold still in a sticky frame while the row of
   photographs travels under them, so a vertical scroll is read as
   horizontal movement. Each photograph carries an outline in its own colour
   printed a little off register. A photograph is uncovered
   as it comes onto the screen, drifts inside its frame as the row carries
   it across, and a pointer over it looks through it. The count in the
   corner follows the photograph nearest the middle, and a line under the
   row fills as the row is read.

   On black the six voices are lifted toward paper, or they would sink.
   -------------------------------------------------------------------------- */
/* THE DARK PASSAGE — the ground under both dark sections, and the one
   light that crosses the seam between them so there is no line there. The
   light is a zero-height sticky layer: it takes no room, stays with the
   screen, and its fields are clipped to the passage. */
.dark-pass { --deep: #121210; --ev-wash: color-mix(in srgb, var(--c-guided) 32%, transparent); position: relative; background: var(--deep); overflow: clip; }

.dark-wash { position: sticky; top: 0px; z-index: 0; height: 0px; opacity: var(--pass, 1); pointer-events: none; }

.dark-wash i { position: absolute; display: block; border-radius: 50%; will-change: transform; }

.dark-wash i:first-child { left: 56%; top: calc(var(--screen) * 0.46); width: min(165vw, 130rem); height: min(calc(var(--screen) * 1.6), 105rem); translate: -50% -50%; background: radial-gradient(closest-side, var(--ev-wash), transparent 72%); animation: ev-drift 34s ease-in-out infinite alternate, ev-breathe 11s ease-in-out infinite; }

.dark-wash i:last-child { left: 26%; top: calc(var(--screen) * 0.7); width: min(120vw, 92rem); height: min(calc(var(--screen) * 1.2), 78rem); translate: -50% -50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-guided) 15%, transparent), transparent 70%); animation: ev-drift 46s ease-in-out infinite alternate-reverse, ev-breathe 15s ease-in-out -5s infinite; }

.band.band-community { --deep: #121210; --lit: #f4f2ec; --lit-52: rgba(244,242,236,.52); --lit-28: rgba(244,242,236,.28); --lit-14: rgba(244,242,236,.14); max-width: none; margin: 0px; padding: 0px; background: none; color: var(--lit); text-align: left; }

.js .band.band-community > * { opacity: 1; transform: none; transition: none; }

.comm-track { position: relative; height: calc(var(--screen) * 2.2); }

.comm-stage { position: sticky; top: 0px; height: var(--screen); display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-rows: auto auto auto; align-content: center; gap: var(--sp-5); overflow: hidden; }

.comm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); width: min(100% - 2 * var(--sp-5), 80rem); margin: 0px auto; }

.comm-head-copy { min-width: 0px; }

/* one line on a computer, in both languages */
.comm-title { margin: 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: clamp(1.9rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--lit); white-space: nowrap; }

/* the title is carried by the same current as the row: its words drift
   apart as the row travels, each at its own rate */
.comm-w { display: inline-block; translate: calc(var(--read, 0) * var(--f, 0) * -30px) 0px; }

/* the row starts on the same edge as the title above it */
.comm-rail { display: flex; align-items: flex-start; gap: clamp(1.4rem, 2.4vw, 2.6rem); padding-inline: max(var(--sp-5), calc((100% - 80rem) / 2)); will-change: transform; }

.comm-shot { --v: var(--c-creations); --ch: min(calc(var(--screen) * 0.44), 25rem); --off: 10px; position: relative; flex: 0 0 auto; margin: 0px; }

.comm-shot[data-voice="guided"] { --v: var(--c-guided); }

.comm-shot[data-voice="by"] { --v: var(--c-by); }

.comm-shot[data-voice="design"] { --v: var(--c-design); }

.comm-shot[data-voice="and"] { --v: var(--c-and); }

.comm-shot[data-voice="coherence"] { --v: var(--c-coherence); }

.comm-crop { position: relative; display: block; height: var(--ch); overflow: hidden; border-radius: 4px; background: rgb(26, 26, 23); }

/* a little larger than its frame, so it can drift and lean without an edge
   ever showing */
.comm-crop img { display: block; width: auto; height: 100%; transform: translate3d(calc(var(--px, 0) * -4% + var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px), 0px) scale(calc(1.1 + var(--hov, 0) * 0.04)); will-change: transform; }

.comm-frame { position: absolute; left: 0px; top: 0px; right: 0px; z-index: 2; height: var(--ch); border: 1.5px solid color-mix(in srgb, var(--v) 70%, #f4f2ec); border-radius: 4px; pointer-events: none; transform: translate3d(calc(var(--off) + var(--hov, 0) * 6px - var(--lx, 0) * 0.8px), calc(var(--off) + var(--hov, 0) * 6px - var(--ly, 0) * 0.8px), 0px); }

.comm-progress { width: min(100% - 2 * var(--sp-5), 80rem); height: 1px; margin: 0px auto; background: var(--lit-14); overflow: hidden; }

.comm-progress span { display: block; height: 100%; background: var(--lit-52); transform: scaleX(var(--read, 0)); transform-origin: 0% 50%; }

/* arrival */
.js .comm-head > * { opacity: 0; translate: 0px 22px; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }

.js .comm-head.is-in > * { opacity: 1; translate: 0px 0px; }

.js .comm-crop { clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }

.js .comm-shot.is-in .comm-crop { clip-path: inset(0 0 0 0); }

.js .comm-frame { opacity: 0; transition: opacity .8s var(--ease) .7s; }

.js .comm-shot.is-in .comm-frame { opacity: 1; }

/* the photographs already on the screen when the section opens are simply
   there; only the ones that arrive with the scroll are uncovered */
.js .comm-shot.is-open .comm-crop { clip-path: none; transition: none; }

.js .comm-shot.is-open .comm-frame { opacity: 1; transition: none; }

/* A mark standing over the dark passage lifts its own voice toward paper:
   it keeps its colour and stays legible. This is asked of each mark on its
   own, so while the passage is coming up the index is half one thing and
   half the other, exactly as it looks. */
.rail-item[data-on="dark"] { color: color-mix(in srgb, var(--accent) 42%, #f4f2ec); opacity: 0.38; }

.rail-item[data-on="dark"][data-state="reached"], .rail-item[data-on="dark"][data-state="current"], .rail-item[data-on="dark"]:hover { opacity: 1; }

.rail-item[data-on="dark"] .rail-label { color: rgba(244, 242, 236, 0.62); }

@media (max-width: 900px){
  .comm-track { height: calc(var(--screen) * 2); }
  .comm-stage { gap: var(--sp-4); }
  .comm-head { width: calc(100% - 2 * var(--sp-3)); }
  .comm-rail { gap: 1rem; padding-inline: var(--sp-3); }
  .comm-shot { --ch: min(calc(var(--screen) * 0.4), 20rem); --off: 7px; }
  .comm-progress { width: calc(100% - 2 * var(--sp-3)); }
}

/* A photograph wider than the screen can never be seen whole. On a phone the
   frame is capped to most of the width and the image fills it instead. */
@media (max-width: 600px){
  .comm-title { white-space: normal; }
  .comm-crop { max-width: 82vw; }
  .comm-crop img { width: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce){
  .comm-track { height: auto; }
  .comm-stage { position: static; height: auto; padding-block: var(--sp-6); }
  .comm-rail { overflow-x: auto; transform: none !important; }
  .js .comm-head > *, .js .comm-crop, .js .comm-frame { opacity: 1; translate: none; clip-path: none; transition: none; }
  .comm-crop img { transform: none; }
}


/* --------------------------------------------------------------------------
   THE COLLAGE

   One screen, and the photographs laid out in it as they would be on a
   table: different sizes, none of them square to the edge, an empty pocket
   where the arrangement wanted one. The words have the top to themselves —
   nothing is ever placed over them.

   Each photograph has a place of its own on a grid that fills exactly what
   is left of the screen, so nothing is cropped by the fold and nothing has
   to be scrolled to. The photographs themselves are cropped instead, which
   is what a collage does.

   As the section is read they drift at their own rates, a few pixels each,
   moving against one another without leaving their places.
   -------------------------------------------------------------------------- */
.coll-wrap { display: flex; flex-direction: column; gap: var(--sp-4); height: var(--screen); min-height: 34rem; width: min(100% - 2 * var(--sp-5), 80rem); margin: 0px auto; padding-block: var(--sp-5); }

.coll-say { flex: 0 0 auto; }

/* the same size as the title of the gatherings, so the two dark sections
   speak at one volume */
.coll-say .comm-title { font-size: clamp(2.1rem, 4.6vw, 4.2rem); }

/* what is left of the screen, and the places inside it */
.coll { flex: 1 1 0px; min-height: 0px; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); grid-template-rows: repeat(2, minmax(0px, 1fr)); gap: clamp(0.7rem, 1.4vw, 1.4rem); }

/* four of the same size, and the tall one standing beside them */
.coll-shot:nth-of-type(1) { grid-area: 1 / 1 / 2 / 5; }

.coll-shot:nth-of-type(2) { grid-area: 1 / 5 / 2 / 9; }

.coll-shot:nth-of-type(4) { grid-area: 2 / 1 / 3 / 5; }

.coll-shot:nth-of-type(5) { grid-area: 2 / 5 / 3 / 9; }

.coll-shot:nth-of-type(3) { grid-area: 1 / 9 / 3 / 13; }

.coll-shot { position: relative; min-width: 0px; min-height: 0px; margin: 0px; rotate: var(--tilt, 0deg); translate: 0px calc(var(--comm-read, 0) * var(--f, 0) * -9px); }

.js .coll-shot { transition: rotate .7s var(--ease), scale .7s var(--ease); }

.js .coll-shot:hover { rotate: 0deg; scale: 1.015; z-index: 2; }

.coll-crop { position: relative; z-index: 1; display: block; height: 100%; overflow: hidden; border-radius: 4px; background: rgb(26, 26, 23); }

/* the photograph gives way to its place, not the other way round */
.coll-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the same outline printed off register as on the posters, in each
   photograph's own voice */
.coll-frame { position: absolute; inset: 0px; z-index: 0; border: 1px solid color-mix(in srgb, var(--v, var(--c-creations)) 62%, #f4f2ec); border-radius: 4px; translate: 9px 9px; pointer-events: none; }

.coll-shot[data-voice="creations"] { --v: var(--c-creations); }

.coll-shot[data-voice="guided"] { --v: var(--c-guided); }

.coll-shot[data-voice="by"] { --v: var(--c-by); }

.coll-shot[data-voice="design"] { --v: var(--c-design); }

.coll-shot[data-voice="and"] { --v: var(--c-and); }

.coll-shot[data-voice="coherence"] { --v: var(--c-coherence); }

/* each one is uncovered as it arrives, one after another */
.js .coll-shot .coll-crop { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }

.js .coll-shot .coll-frame { opacity: 0; transition: opacity .9s var(--ease) .5s; }

.js .coll-shot.is-here .coll-crop { clip-path: inset(0 0 0 0); }

.js .coll-shot.is-here .coll-frame { opacity: 1; }

/* on a tablet the same arrangement, a little tighter */
@media (max-width: 1024px){
  .coll-wrap { width: calc(100% - 2 * var(--sp-4)); }
  .coll { gap: clamp(0.6rem, 1.6vw, 1.2rem); }
}

/* in a hand the four keep their square and the tall one lies under them,
   across both */
@media (max-width: 600px){
  .coll-wrap { width: calc(100% - 2 * var(--sp-3)); gap: var(--sp-3); padding-block: var(--sp-4); }
  .coll { grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: 1fr 1fr 1.35fr; gap: 0.6rem; }
  .coll-shot:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
  .coll-shot:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
  .coll-shot:nth-of-type(4) { grid-area: 2 / 1 / 3 / 2; }
  .coll-shot:nth-of-type(5) { grid-area: 2 / 2 / 3 / 3; }
  .coll-shot:nth-of-type(3) { grid-area: 3 / 1 / 4 / 3; }
  .coll-frame { translate: 6px 6px; }
}

@media (prefers-reduced-motion: reduce){
  .coll-shot { translate: none; rotate: none; }
  .js .coll-shot .coll-crop, .js .coll-shot .coll-frame { clip-path: none; opacity: 1; transition: none; }
}


/* --------------------------------------------------------------------------
   WHERE WE MEET NEXT

   The second half of the dark passage, and the same events as the events
   page, drawn from the same list. The words hold one side of the spread
   and the programme the other: a line for each gathering, its day printed
   in its own colour, its name, and who it is with. A line is a way in — it
   opens that gathering where tickets are kept.
   -------------------------------------------------------------------------- */
/* the wash behind the poster is a colour that changes from one gathering
   to the next, so it has to be able to travel between two colours */
@property --ev-wash {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0);
}

.band.band-events { --deep: #121210; --lit: #f4f2ec; --lit-72: rgba(244,242,236,.72); --lit-52: rgba(244,242,236,.52); --lit-28: rgba(244,242,236,.28); --lit-14: rgba(244,242,236,.14); max-width: none; margin: 0px; padding: 0px; background: none; color: var(--lit); text-align: left; }

/* The band reveal would put a transform on the scroll, and a transform is a
   containing block: the frame would stop holding. It arrives plainly. */
.js .band.band-events > * { opacity: 1; transform: none; transition: none; }

/* one screen, the words above and the programme under them */
.ev-spread { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); min-height: var(--screen); padding-block: var(--sp-5); padding-inline: max(var(--sp-4), calc((100% - 80rem) / 2)); }

@keyframes ev-breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes ev-drift {
  0% { transform: translate3d(-9%, -6%, 0) scale(1); }
  50% { transform: translate3d(4%, 7%, 0) scale(1.14); }
  100% { transform: translate3d(10%, -4%, 0) scale(1.06); }
}

.ev-spread > * { position: relative; z-index: 1; }

.ev-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); width: 100%; }

/* the spread: the words on one side, the programme on the other, and air
   between them wide enough to be a margin */
@media (min-width: 1025px){
  .ev-spread { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); align-content: center; align-items: center; column-gap: var(--sp-4); }
  .ev-head { grid-column: 1 / span 5; grid-row: 1; }
  .ev-stage { grid-column: 7 / span 6; grid-row: 1; }
  .ev-noscript { grid-column: 1 / -1; }
}

.ev-title { margin: 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--lit); text-wrap: balance; }

.ev-note { margin: var(--sp-1) 0 var(--sp-2); max-width: 40rem; font-size: var(--t-arc); line-height: 1.45; letter-spacing: -0.004em; color: var(--lit-72); }

/* Reached for, the six voices run through the letters while a plain line is
   drawn under them, left to right. The colour belongs to the letters; the
   line only follows. */
.ev-all { flex: 0 0 auto; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lit); text-decoration: none; padding-bottom: 4px; background: linear-gradient(var(--lit), var(--lit)) 0% 100% / 0% 1.5px no-repeat, linear-gradient(var(--lit-28), var(--lit-28)) 0% 100% / 100% 1px no-repeat; transition: background-size .65s var(--ease); }

.ev-all::after { content: " \2192"; }

.ev-all:hover, .ev-all:focus-visible { background-size: 100% 1.5px, 100% 1px; }

.ev-stage { width: 100%; }

/* the programme */
.ev-track { display: flex; flex-direction: column; width: 100%; margin: 0px; padding: 0px; list-style: none; }

.ev-item { --v: var(--c-creations); }

.ev-item[data-voice="guided"] { --v: var(--c-guided); }

.ev-item[data-voice="by"] { --v: var(--c-by); }

.ev-item[data-voice="design"] { --v: var(--c-design); }

.ev-item[data-voice="and"] { --v: var(--c-and); }

.ev-item[data-voice="coherence"] { --v: var(--c-coherence); }

/* a line: the day, what it is, and the way in */
.ev-line { display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1); border-radius: 4px; color: var(--lit); text-decoration: none; }

.js .ev-line { transition: background-color .45s var(--ease), translate .5s var(--ease); }

.js a.ev-line:hover { background-color: color-mix(in srgb, var(--v) 10%, transparent); translate: 0.35rem 0px; }

/* the day, printed in the gathering's own colour */
.ev-day { display: grid; justify-items: center; gap: 0.1rem; min-width: 3.2rem; font-family: Anybody, system-ui, sans-serif; line-height: 0.88; color: color-mix(in srgb, var(--v) 78%, #f4f2ec); }

.ev-day b { font-weight: 700; font-size: clamp(1.9rem, 2.5vw, 2.6rem); letter-spacing: -0.045em; }

.ev-day i { font-style: normal; font-weight: 600; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--lit-52); }

.ev-item[data-state="soon"] .ev-day b { font-size: clamp(0.9rem, 1.1vw, 1.05rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.ev-of { min-width: 0px; }

.ev-name { display: block; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: clamp(1.1rem, 1.55vw, 1.55rem); line-height: 1.16; letter-spacing: -0.022em; text-wrap: balance; }

/* the name is underlined by the hand that reaches for it */
.ev-name-line { background-image: linear-gradient(color-mix(in srgb, var(--v) 78%, #f4f2ec), color-mix(in srgb, var(--v) 78%, #f4f2ec)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; }

.js a.ev-line:hover .ev-name-line { background-size: 100% 1.5px; }

.js .ev-name-line { transition: background-size .55s var(--ease); }

.ev-when { display: block; margin-top: 0.45rem; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lit-52); }

.ev-with { display: block; margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.4; color: var(--lit-72); }

.ev-noscript { width: 100%; }

.ev-noscript a { color: var(--lit); }

/* arrival: the words first, then the programme, line after line */
.js .ev-head > * { opacity: 0; translate: 0px 22px; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }

.js .band-events.is-in .ev-head > * { opacity: 1; translate: 0px 0px; }

.js .band-events.is-in .ev-head > :nth-child(2) { transition-delay: .14s; }

.js .band-events.is-in .ev-head > :nth-child(3) { transition-delay: .28s; }

.js .ev-item { opacity: 0; translate: 0px 14px; transition: opacity .8s var(--ease), translate .9s var(--ease); }

.js .band-events.is-in .ev-item { opacity: 1; translate: 0px 0px; }

.js .band-events.is-in .ev-item:nth-child(1) { transition-delay: .3s; }

.js .band-events.is-in .ev-item:nth-child(2) { transition-delay: .46s; }

.js .band-events.is-in .ev-item:nth-child(3) { transition-delay: .58s; }

@media (max-width: 1024px){
  .ev-note { max-width: 44rem; }
  .ev-stage { margin-top: var(--sp-4); }
}

@media (max-width: 900px){
  .ev-spread { gap: var(--sp-4); padding-inline: var(--sp-3); }
}

/* on a phone the line breaks in two: the day over the name, and the way in
   at the end of it */
@media (max-width: 600px){
  .ev-spread { min-height: 0px; gap: var(--sp-3); padding-block: var(--sp-5); }
  .ev-head { gap: var(--sp-2); }
  .ev-note { margin-block: 0px; }
  .ev-stage { margin-top: var(--sp-2); }
  .ev-line { grid-template-columns: auto minmax(0px, 1fr); gap: var(--sp-2); padding-block: var(--sp-2); }
  .ev-day { min-width: 2.4rem; }
  .ev-day b { font-size: 1.55rem; }
  .ev-when { margin-top: 0.3rem; }
  .js a.ev-line:hover { translate: none; background-color: transparent; }
}

@media (prefers-reduced-motion: reduce){
  .dark-wash i { animation: none; }
  .js .ev-head > *, .js .ev-item { opacity: 1; translate: none; transition: none; }
}


/* --------------------------------------------------------------------------
   THE COVER

   The hero laid out like the cover of a printed piece, in the hand of the
   rest of the page. The name is never touched: everything here happens
   around it.

   The name and its sentence never leave the centre of the cover: as the
   page is read they only fade, and a pointer near the six words moves them
   aside, only a few pixels and only so fast.
   -------------------------------------------------------------------------- */
/* depth: the name and its sentence stay centred and only fade */
.band-threshold .hero-lead { opacity: calc(1 - var(--hero-scroll, 0) / var(--hero-vh, 900) * 1.1); }

/* presence: a word moves aside for a pointer near it */
.hero-phrase .w { translate: calc(var(--wx, 0) * 1px) calc(var(--wy, 0) * 1px); }

/* --------------------------------------------------------------------------
   THE NAME

   The name, alive, wherever it is set: the hero, the head of the events,
   the foot of every page. At rest it is the name exactly as it always is.
   What is alive is around it.

   Its letters are set one after another when it arrives: with the sentence
   on the hero, with the masthead on the events, and when the foot comes
   into view. They make room for a pointer that comes near, in proportion to
   their size and never faster than a slow drift. And a pointer over the name
   sends the six voices through it once, letter by letter, before it returns
   to ink. main.js does the moving; this only says how it looks.
   -------------------------------------------------------------------------- */
.name-word { display: inline-block; white-space: nowrap; }

.name-l { display: inline-block; translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px); transition: color .35s var(--ease); }

.js [data-live-name] .name-l { opacity: 0; transform: translateY(0.4em); filter: blur(4px); transition: color .35s var(--ease), opacity .7s var(--ease) calc(var(--i, 0) * 55ms + .2s), transform 1s var(--ease) calc(var(--i, 0) * 55ms + .2s), filter .7s var(--ease) calc(var(--i, 0) * 55ms + .2s); }

.js .band-threshold.is-formed [data-live-name] .name-l, .js .xp-head.is-on [data-live-name] .name-l, .js [data-live-name].is-set .name-l { opacity: 1; transform: none; filter: blur(0px); }

@media (prefers-reduced-motion: reduce){
  .js [data-live-name] .name-l { opacity: 1; transform: none; filter: none; transition: none; }
}


/* --------------------------------------------------------------------------
   THE SKY

   The six voices loose around a first screen: the hero of the landing and
   the masthead of the events. Each figure sways on its own clock and falls
   away at its own rate as the page is read, so the first scroll already has
   depth. The rate lives on the figure; main.js only reports the scroll.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   THE FIELD

   Presences: points that field.js lets wander through a section, around its
   words. None of them has a place. The cover holds one and so does the
   events masthead, and whoever reads keeps the same seat across both.
   -------------------------------------------------------------------------- */
.field { position: absolute; inset: 0px; z-index: 0; pointer-events: none; }

.pres { position: absolute; left: 0px; top: 0px; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--c); opacity: 0; will-change: transform, opacity; }

.pres[data-voice="quiet"] { --c: var(--ink-38); }

/* the thread between two presences while they meet */
.ties { position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; }

.ties line { stroke: var(--ink-38); stroke-width: 1; stroke-linecap: round; opacity: 0; }

/* whoever reads: an outline first, a colour once they have stayed */
.pres.is-you { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-72); transition: background 2.6s var(--ease), box-shadow 2.6s var(--ease); }

.pres.is-you.is-known { background: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }

@media (prefers-reduced-motion: reduce){
  .pres.is-you { transition: none; }
}

.sky { position: absolute; inset: 0px; z-index: 0; pointer-events: none; }

.sky-fig { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * var(--fs, 1)); height: auto; overflow: visible; transform: translate3d(-50%, calc(var(--sky-scroll, 0) * var(--f) * -1px), 0px); }

.sky-fig > * { transform-box: fill-box; transform-origin: 50% 50%; animation: sky-sway var(--dur, 14s) var(--dl, 0s) ease-in-out infinite alternate; }

@keyframes sky-sway {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: translate(6px, -9px) rotate(8deg); }
}

.sky-fig .o { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.72; }

.sky-fig .s { fill: var(--c); opacity: 0.78; }

/* On the hero the figures surface together with the name, never ahead of
   it: both start from the same moment, the diamond with the first letter,
   the others one after another while the word is being set. Each opens from
   its own centre, rises a little and comes into focus, as if the page were
   developing; the small terracotta point closes the arrival. */
.js .band-threshold > .sky { opacity: 1; transform: none; transition: none; }

.js .band-threshold .sky-fig { opacity: 0; translate: 0px 2.2rem; scale: 0.72; filter: blur(8px); clip-path: circle(0% at 50% 50%); transition: opacity 1.4s var(--ease) var(--emerge, 0s), translate 2.2s cubic-bezier(.16, .84, .24, 1) var(--emerge, 0s), scale 2.2s cubic-bezier(.16, .84, .24, 1) var(--emerge, 0s), filter 1.8s var(--ease) var(--emerge, 0s), clip-path 1.9s cubic-bezier(.16, .84, .24, 1) var(--emerge, 0s); }

.js .band-threshold.is-formed .sky-fig { opacity: 1; translate: 0px 0px; scale: 1; filter: blur(0px); clip-path: circle(150% at 50% 50%); }

.band-threshold .sky-fig:nth-child(1) { --emerge: 0.58s; }

.band-threshold .sky-fig:nth-child(2) { --emerge: 1.38s; }

.band-threshold .sky-fig:nth-child(3) { --emerge: 0.2s; }

.band-threshold .sky-fig:nth-child(4) { --emerge: 0.73s; }

.band-threshold .sky-fig:nth-child(5) { --emerge: 0.4s; }

.band-threshold .sky-fig:nth-child(6) { --emerge: 0.88s; }

.band-threshold .sky-fig:nth-child(7) { --emerge: 1.03s; }

.band-threshold .sky-fig:nth-child(8) { --emerge: 1.18s; }

/* The name breathes: a slow pulse of 7.2 seconds, the same one the index
   already breathes with, taken letter by letter so it travels through the
   word. No letter grows by more than a few percent. */
.band-threshold [data-live-name] .name-l { transform-origin: 50% 100%; animation: name-breath 7.2s ease-in-out calc(3.6s + var(--i, 0) * 90ms) infinite; }

@keyframes name-breath {
  0%, 100% { scale: 1; }
  50% { scale: 1.03; }
}

@media (prefers-reduced-motion: reduce){
  .band-threshold [data-live-name] .name-l { animation: none; }
}

@media (max-width: 900px){
  .sky { --fs: .6; }
  .sky-fig.is-far { display: none; }
}

@media (prefers-reduced-motion: reduce){
  .sky-fig > * { animation: none; }
  .js .band-threshold .sky-fig { opacity: 1; translate: none; scale: none; filter: none; clip-path: none; transition: none; }
}


/* --------------------------------------------------------------------------
   FOOT

   Two sides held together in the middle of the page. On the left, the ways
   through the site, in four short columns without titles, set close, each
   underlined in its own voice. On the right, the practice itself: its name, the conviction it
   would defend anywhere, and the one way to hear from it again. Under
   everything, without asking to be noticed, where it was made.
   -------------------------------------------------------------------------- */
/* No rule above it: the foot is where the page settles, not a drawer
   bolted to the bottom of it. */
.page-foot { position: relative; margin: 0px; padding: var(--sp-6) 0px var(--sp-3); text-align: left; }

.ft-inner { width: min(100% - 2 * var(--sp-5), 80rem); margin: 0px auto; display: grid; grid-template-columns: auto minmax(16rem, 24rem); justify-content: center; align-items: start; column-gap: clamp(2.2rem, 6vw, 6.854rem); container-type: inline-size; }

/* the right side: the practice */
.ft-brand { grid-column: 2; grid-row: 1; order: 2; }

.ft-mark { display: inline-block; margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 400; font-size: 1.15rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }

.ft-claim { margin: var(--sp-3) 0px 0px; font-weight: 300; font-size: clamp(0.92rem, 1.2cqi, 1.08rem); line-height: 1.34; letter-spacing: -0.008em; color: var(--ink-72); }

.ft-line { display: block; }

.ft-lit { color: var(--c-design); }

.ft-form { position: relative; display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0px 0px; }

.ft-input { flex: 1 1 auto; min-width: 0px; padding: 0.55rem 0px; border: 0px; border-bottom: 1px solid var(--ink-18); border-radius: 0px; background: transparent; font: inherit; font-size: 0.9375rem; color: var(--ink); outline: none; transition: border-color .4s var(--ease); }

.ft-input::placeholder { color: var(--ink-38); }

.ft-input:focus { border-color: var(--ink); }

.ft-form.is-wrong .ft-input { border-color: var(--c-creations); }

/* the button fills with the voice of design from the left, and says thanks
   once the address has been given */
.ft-go { position: relative; isolation: isolate; overflow: hidden; display: grid; flex: 0 0 auto; padding: 0.7rem 1.1rem; border: 1px solid var(--ink-18); border-radius: 999px; background: none; cursor: pointer; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); transition: color .45s var(--ease), border-color .45s var(--ease); }

.ft-go::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: var(--c-design); transform: scaleX(0); transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }

.ft-go:not(:disabled):hover, .ft-go:focus-visible, .ft-form.is-sent .ft-go { color: var(--paper); border-color: var(--c-design); }

.ft-go:not(:disabled):hover::before, .ft-go:focus-visible::before, .ft-form.is-sent .ft-go::before { transform: scaleX(1); }

/* until there is an address it is only an outline, and does not answer */
.ft-go:disabled { cursor: default; color: var(--ink-38); border-color: var(--ink-18); }

.ft-form.is-sent .ft-go:disabled { color: var(--paper); border-color: var(--c-design); }

.ft-go-a, .ft-go-b { grid-area: 1 / 1; text-align: center; transition: opacity .35s var(--ease), translate .5s var(--ease); }

.ft-go-b { opacity: 0; translate: 0px 0.6em; }

.ft-form.is-sent .ft-go-a { opacity: 0; translate: 0px -0.6em; }

.ft-form.is-sent .ft-go-b { opacity: 1; translate: 0px 0px; }

/* the left side: the ways through */
.ft-nav { grid-column: 1; grid-row: 1; order: 1; display: grid; grid-template-columns: repeat(4, auto); column-gap: clamp(1.3rem, 3vw, 4.236rem); row-gap: var(--sp-3); }

.ft-col ul { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 0.1rem; }

.ft-col li { font-size: var(--t-sm); font-weight: 300; line-height: 1.34; }

/* each link is underlined in its column's voice as it is approached */
.ft-col a { font-size: var(--t-sm); font-weight: 300; color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--v), var(--v)); background-repeat: no-repeat; background-position: 0% 100%; background-size: 0% 1.5px; padding-bottom: 2px; transition: background-size .45s var(--ease), color .3s var(--ease); }

.ft-col a:hover, .ft-col a:focus-visible { background-size: 100% 1.5px; }

/* under everything, without asking to be noticed */
.ft-love { grid-column: 1 / -1; grid-row: 2; order: 3; margin: var(--sp-6) 0px 0px; font-size: 0.8125rem; text-align: center; color: var(--ink-38); }

/* it arrives in the order it is read */
.js .ft-inner > * { opacity: 0; translate: 0px 22px; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }

.js .page-foot.is-in .ft-inner > * { opacity: 1; translate: 0px 0px; }

.js .page-foot.is-in .ft-brand { transition-delay: .15s; }

.js .page-foot.is-in .ft-love { transition-delay: .3s; }

/* THE WAVE — the name's own gesture, lent to any word that asks for it.
   The letters stand on their own so each can take a voice and lift as it
   arrives; main.js decides when, and puts them out again. */
.wave-word { display: inline-block; }

.wave-l { display: inline-block; transition: color .3s var(--ease), translate .35s var(--ease); }

/* THE LIGHTS — reaching for one of these lines lights it in the six
   voices, a word at a time, and leaving it puts it out the same way. The
   line at the foot answers only over its words; a link, anywhere on it. */
.lights { display: inline-block; }

.js .lights-w { transition: color .5s var(--ease) calc(var(--i, 0) * 55ms); }

.js .lights:hover .lights-w, .js a[data-lights]:hover .lights-w, .js a[data-lights]:focus-visible .lights-w { color: var(--vw); }

.js .is-dark a[data-lights]:hover .lights-w, .js .is-dark a[data-lights]:focus-visible .lights-w { color: color-mix(in srgb, var(--vw) 46%, #f4f2ec); }

/* tablet: the practice above, the ways through in one row under it, all
   centred */
@media (max-width: 1024px){
  .page-foot { padding: var(--sp-5) 0px var(--sp-2); }
  .ft-inner { width: calc(100% - 2 * var(--sp-3)); display: flex; flex-direction: column; align-items: center; text-align: center; }
  .ft-brand { order: 1; width: min(24rem, 100%); }
  .ft-claim { font-size: clamp(1rem, 2.4cqi, 1.25rem); }
  .ft-nav { order: 2; grid-template-columns: repeat(4, auto); column-gap: var(--sp-5); margin-top: var(--sp-5); }
  .ft-love { margin-top: var(--sp-5); }
}

/* phone: the links in two columns, and the form centred, a narrower field
   over its button */
@media (max-width: 640px){
  .ft-claim { font-size: clamp(1rem, 4.8cqi, 1.25rem); }
  .ft-nav { width: 100%; grid-template-columns: minmax(0px, 1fr); row-gap: var(--sp-3); justify-items: start; text-align: left; }
  .ft-form { flex-direction: column; align-items: center; gap: var(--sp-2); }
  .ft-input { flex: 0 0 auto; width: min(15rem, 100%); text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .js .ft-inner > * { opacity: 1; translate: none; transition: none; }
}

.js .band > * { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }

.js .band.is-visible > * { opacity: 1; transform: none; }

.js .band.is-visible .band-body { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce){
  .js .band > * { opacity: 1; transform: none; transition: none; }
  .rail-item { transition: none; }
}

/* The index is an instrument for a pointer and a wide screen. On a tablet or
   a phone it is a second navigation standing next to the one in the corner,
   and two are one too many, so below the desktop it is not there. The marks
   are still in the document for anyone who listens to the page rather than
   looks at it; they are simply not drawn, and they take no room. */
@media (max-width: 1024px){
  :root { --rail-w: 0rem; }
  .rail { display: none; }
}

@media (max-width: 900px){
  body { padding-left: 0px; }
  /* The menu that opens below is wider than the two marks above it, so the
     pill grows when it opens. Anchored to the right, that growth used to
     drag the lines and the way in sideways with it. Ranged to the end, the
     pill grows leftward and the two marks never leave the corner. */
  .topnav { flex-wrap: wrap; justify-content: flex-end; gap: 0px; border-radius: 1.5rem; padding: 0.35rem 0.35rem 0.35rem 0.95rem; max-width: calc(100vw - (2 * var(--sp-3))); }
  /* The menu keeps a place in the row while it is closed, and the gap
     between items was being spent on a box of no width — which is what
     pushed the way in eight pixels off the corner. The space between the
     two marks is theirs now, not the row's. */
  .topnav-toggle { order: 1; margin-right: 0.5rem; }
  .topnav-cta { order: 2; }
  /* A break of no height, so the panel can never share the row with the two
     marks. Growing from nothing it used to be narrow enough to fit beside
     them for the first part of every opening, and the way in was pushed off
     the row and slid sideways before snapping back. */
  .topnav::after { content: ""; order: 3; flex: 0 0 100%; height: 0px; }
  .topnav-reveal { order: 4; flex-basis: auto; width: 0px; height: 0px; transition: height .5s var(--ease),
      opacity .3s var(--ease),
      visibility 0s linear .5s; }
  .topnav.is-open .topnav-reveal { width: 100%; height: var(--reveal-h, auto); transition: height .5s var(--ease),
      opacity .42s var(--ease) .08s,
      visibility 0s linear 0s; }
  .topnav-inner { flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 0.9rem 0px 0.8rem; width: 0px; min-width: 100%; }
  .topnav-links { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .lang-toggle { border-left: 0px; border-top: 1px solid var(--hair); padding: 0.8rem 0.2rem 0.2rem; }
  .topnav-links li { transform: translateY(-4px); }
  .topnav.is-open .topnav-links li { transform: none; }
  .topnav-links a { padding: 0.5rem 0.2rem; }
  .band { padding: var(--sp-5) var(--sp-3); }
  .band-threshold { min-height: var(--screen); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .band-statement { min-height: var(--screen); justify-content: center; }
  .st-row { gap: var(--sp-3); }
}



/* --------------------------------------------------------------------------
   THE LOST PAGE

   One screen of paper. The number in three of the voices, its middle only
   an outline — a place where something could be and is not yet — and under
   it one sentence and the ways back. The field from the cover moves around
   all of it, and the reader is one of the presences in it.
   -------------------------------------------------------------------------- */
/* exactly one screen, whatever the screen: everything in it is sized
   against the height as well as the width */
.lost { position: relative; height: var(--screen); min-height: 22rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(4.5rem, calc(var(--screen) * 0.11), 6.854rem) var(--sp-4) clamp(1.5rem, calc(var(--screen) * 0.05), 4.236rem); text-align: center; overflow: hidden; }

.lost > :not(.field) { position: relative; z-index: 1; }

.lost-mark { margin: 0px 0px clamp(1rem, calc(var(--screen) * 0.04), 2.618rem); font-family: Anybody, system-ui, sans-serif; font-weight: 400; font-size: 1.15rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }

.lost-num { margin: 0px; display: flex; gap: 0.02em; font-family: Anybody, system-ui, sans-serif; font-weight: 700; font-size: min(24vw, calc(var(--screen) * 0.28), 17rem); line-height: 0.82; letter-spacing: -0.05em; }

.lost-num span:nth-child(1) { color: var(--c-and); }

/* the middle is left open */
.lost-num span:nth-child(2) { color: transparent; -webkit-text-stroke: clamp(1.5px, 0.22vw, 2.5px) var(--c-guided); }

.lost-num span:nth-child(3) { color: var(--c-coherence); }

.lost-title { margin: clamp(1.2rem, calc(var(--screen) * 0.05), 4.236rem) 0px 0px; max-width: 20ch; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: min(var(--t-lg), calc(var(--screen) * 0.054)); line-height: 1.1; letter-spacing: -0.026em; color: var(--ink); text-wrap: balance; }

.lost-line { margin: clamp(0.5rem, calc(var(--screen) * 0.018), 1rem) 0px 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 300; font-size: var(--t-md); line-height: 1.4; color: var(--ink-52); }

.lost-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: clamp(1.2rem, calc(var(--screen) * 0.05), 4.236rem); }

/* the ways back are pills like the way to an event on Luma: reached for,
   each fills with its own voice from the left */
.lost-way { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; padding: 0.95rem 1.5rem; border: 1px solid var(--ink-18); border-radius: 999px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .45s var(--ease), border-color .45s var(--ease); }

.lost-way::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: var(--v, var(--ink)); transform: scaleX(0); transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }

.lost-way:hover, .lost-way:focus-visible { color: var(--paper); border-color: var(--v, var(--ink)); }

.lost-way:hover::before, .lost-way:focus-visible::before { transform: scaleX(1); }

/* arrival: the name, then the number figure by figure, then the words */
.js .lost > :not(.field) { opacity: 0; translate: 0px 18px; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }

.js .lost-num span { display: inline-block; opacity: 0; translate: 0px 0.12em; transition: opacity .9s var(--ease), translate 1.2s cubic-bezier(.16, .84, .24, 1); }

.js .lost.is-on > :not(.field), .js .lost.is-on .lost-num span { opacity: 1; translate: 0px 0px; }

.js .lost.is-on .lost-num span:nth-child(2) { transition-delay: .12s; }

.js .lost.is-on .lost-num span:nth-child(3) { transition-delay: .24s; }

.js .lost.is-on > .lost-title { transition-delay: .5s; }

.js .lost.is-on > .lost-line { transition-delay: .66s; }

.js .lost.is-on > .lost-ways { transition-delay: .82s; }

@media (max-width: 600px){
  .lost { padding-inline: var(--sp-3); }
  .lost-num { font-size: min(36vw, calc(var(--screen) * 0.24)); }
  .lost-title { max-width: 16ch; }
}

@media (prefers-reduced-motion: reduce){
  .js .lost > :not(.field), .js .lost-num span { opacity: 1; translate: none; transition: none; }
}

/* --------------------------------------------------------------------------
   THE DOCUMENTS

   Privacy and terms. A page to be read, not designed at: one column at a
   comfortable measure, the same type as everything else, and nothing
   between the reader and the sentence.
   -------------------------------------------------------------------------- */
.doc { width: min(100% - 2 * var(--sp-4), 44rem); margin: 0px auto; padding: var(--sp-7) 0px var(--sp-6); text-align: left; }

.doc-kicker { margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-52); }

.doc-title { margin: var(--sp-2) 0px 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: var(--t-lg); line-height: 1.06; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }

.doc-lede { margin: var(--sp-3) 0px 0px; max-width: 34rem; font-size: var(--t-md); font-weight: 300; line-height: 1.4; letter-spacing: -0.006em; color: var(--ink-72); }

.doc-when { margin: var(--sp-3) 0px 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-38); }

.doc h2 { margin: var(--sp-5) 0px 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

.doc p, .doc li { font-size: var(--t-body); font-weight: 300; line-height: 1.62; color: var(--ink-72); }

.doc h2 + p { margin-top: var(--sp-2); }

.doc ul { margin: var(--sp-2) 0px 0px; padding-left: 1.1rem; }

.doc li { margin-top: 0.5rem; }

.doc li b { font-weight: 500; color: var(--ink); }

.doc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-18); transition: border-color .3s var(--ease); }

.doc a:hover { border-color: var(--ink); }

.doc-ways { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hair); }

.doc-back { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink-18); padding-bottom: 3px; }

@media (max-width: 600px){
  .doc { padding-top: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   BEFORE THE FORM

   Four short things between signing in and the application. A form asked
   quietly: the labels are small, the fields are lines, and the way on only
   lights up once every answer is there. The field of presences moves
   behind it, as it does on the cover.
   -------------------------------------------------------------------------- */
.ob { position: relative; min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; width: min(100% - 2 * var(--sp-4), 34rem); margin: 0px auto; padding: var(--sp-7) 0px var(--sp-6); text-align: left; overflow: clip; }

.ob > :not(.field) { position: relative; z-index: 1; }

.ob-who { margin: 0px 0px var(--sp-3); font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-52); }

.ob-who b { font-weight: 500; color: var(--ink); }

.ob-title { margin: 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: var(--t-lg); line-height: 1.06; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }

.ob-lede { margin: var(--sp-3) 0px 0px; max-width: 30rem; font-size: var(--t-body); font-weight: 300; line-height: 1.55; color: var(--ink-72); }

.ob-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }

.ob-row { display: grid; grid-template-columns: 7rem minmax(0px, 1fr); gap: var(--sp-4); }

.ob-field { display: grid; gap: 0.35rem; min-width: 0px; }

.ob-label { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-52); }

.ob-input { width: 100%; padding: 0.5rem 0px; border: 0px; border-bottom: 1px solid var(--ink-18); border-radius: 0px; background: transparent; font: inherit; font-size: var(--t-body); font-weight: 300; color: var(--ink); outline: none; transition: border-color .4s var(--ease); }

.ob-input::placeholder { color: var(--ink-38); }

.ob-input:focus { border-color: var(--ink); }

/* a field that has been answered keeps a hairline in its own voice */
.ob-field:nth-child(1) .ob-input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--c-creations) 62%, transparent); }

.ob-row .ob-field:nth-child(1) .ob-input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--c-guided) 62%, transparent); }

.ob-row .ob-field:nth-child(2) .ob-input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--c-design) 62%, transparent); }

.ob-form > .ob-field:last-of-type .ob-input:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--c-and) 62%, transparent); }

.ob-form.is-wrong .ob-input:invalid { border-color: var(--c-creations); }

.ob-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); }

/* the same pill as the way to an event, filling from the left */
.ob-go { position: relative; isolation: isolate; overflow: hidden; display: grid; padding: 0.95rem 1.6rem; border: 1px solid var(--ink-18); border-radius: 999px; background: none; cursor: pointer; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); transition: color .45s var(--ease), border-color .45s var(--ease); }

.ob-go::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: var(--v, var(--ink)); transform: scaleX(0); transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }

.ob-go:not(:disabled):hover, .ob-go:focus-visible, .ob-form.is-kept .ob-go { color: var(--paper); border-color: var(--v, var(--ink)); }

.ob-go:not(:disabled):hover::before, .ob-go:focus-visible::before, .ob-form.is-kept .ob-go::before { transform: scaleX(1); }

.ob-go:disabled { cursor: default; color: var(--ink-38); border-color: var(--ink-18); }

.ob-go-a, .ob-go-b { grid-area: 1 / 1; text-align: center; transition: opacity .35s var(--ease), translate .5s var(--ease); }

.ob-go-b { opacity: 0; translate: 0px 0.6em; }

.ob-form.is-kept .ob-go-a { opacity: 0; translate: 0px -0.6em; }

.ob-form.is-kept .ob-go-b { opacity: 1; translate: 0px 0px; }

.ob-note { margin: 0px; font-size: var(--t-sm); font-weight: 300; line-height: 1.4; color: var(--ink-52); }

.ob-note a { color: var(--ink-72); text-decoration: none; border-bottom: 1px solid var(--ink-18); }

.ob-note a:hover { border-color: var(--ink); }

@media (max-width: 600px){
  .ob { padding-top: var(--sp-6); }
  .ob-row { grid-template-columns: 5.5rem minmax(0px, 1fr); gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   THE DOOR

   Where applying begins: one button on an otherwise empty screen, with the
   field of presences behind it. Nothing is shown until the session is
   known, so nobody is offered a door they have already come through.
   -------------------------------------------------------------------------- */
.door { position: relative; min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; width: min(100% - 2 * var(--sp-4), 30rem); margin: 0px auto; padding: var(--sp-7) 0px var(--sp-6); text-align: left; overflow: clip; }

.door-in { position: relative; z-index: 1; }

.js .door-in { opacity: 0; translate: 0px 14px; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }

.js .door.is-ready .door-in { opacity: 1; translate: 0px 0px; }

.door-kicker { margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-52); }

.door-title { margin: var(--sp-2) 0px 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: var(--t-lg); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); }

.door-lede { margin: var(--sp-3) 0px 0px; font-size: var(--t-body); font-weight: 300; line-height: 1.55; color: var(--ink-72); }

/* the same pill as everywhere else, with Google's mark kept as Google draws it */
.door-go { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--sp-4); padding: 0.95rem 1.5rem; border: 1px solid var(--ink-18); border-radius: 999px; background: none; cursor: pointer; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); transition: color .45s var(--ease), border-color .45s var(--ease); }

.door-go::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: var(--v, var(--ink)); transform: scaleX(0); transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }

.door-go:not(:disabled):hover, .door-go:focus-visible { color: var(--paper); border-color: var(--v, var(--ink)); }

.door-go:not(:disabled):hover::before, .door-go:focus-visible::before { transform: scaleX(1); }

.door-go:disabled { cursor: default; color: var(--ink-38); border-color: var(--ink-18); }

.door-g { display: flex; padding: 0.28rem; border-radius: 50%; background: var(--paper); }

.door-g svg { display: block; }

.door-say { margin: var(--sp-2) 0px 0px; min-height: 1.2em; font-family: Anybody, system-ui, sans-serif; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); }

/* the notice at /enter: the way to write, and the way back */
/* the address is part of the sentence, not a button beside it */
.soon-mail { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-18); transition: border-color .3s var(--ease); }

.soon-mail:hover { border-color: var(--ink); }

/* and the way back stands on its own, in the middle */
.soon-ways { display: flex; justify-content: center; margin-top: var(--sp-5); }

.soon-back { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); text-decoration: none; transition: color .35s var(--ease); }

.soon-back:hover { color: var(--ink); }

.door-note { margin: var(--sp-4) 0px 0px; font-size: var(--t-sm); font-weight: 300; line-height: 1.45; color: var(--ink-52); }

.door-note a { color: var(--ink-72); text-decoration: none; border-bottom: 1px solid var(--ink-18); }

.door-note a:hover { border-color: var(--ink); }

/* the way out, beside the name of whoever is in */
.ob-out { margin-left: 0.5rem; padding: 0px 0px 2px; border: 0px; border-bottom: 1px solid var(--ink-18); background: none; cursor: pointer; font-family: inherit; font-weight: 500; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-52); transition: color .3s var(--ease), border-color .3s var(--ease); }

.ob-out:hover { color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .js .door-in { opacity: 1; translate: none; transition: none; }
}

/* --------------------------------------------------------------------------
   WHOEVER IS HERE

   A small circle in the corner of the nav, drawn only when there is a
   session. It opens onto the name, the address, the account and the way
   out. Signed out it is not on the page at all.
   -------------------------------------------------------------------------- */
.topnav-you { position: relative; display: flex; }

.you-face { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0px; border: 1px solid var(--hair); border-radius: 50%; background: var(--paper); cursor: pointer; overflow: hidden; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: 0.8125rem; color: var(--ink-72); transition: border-color .3s var(--ease); }

.you-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

.you-face:hover, .you-face[aria-expanded="true"] { border-color: var(--ink); }

/* the menu hangs from the circle, at the edge of the page */
.you-menu { position: absolute; top: calc(100% + 0.5rem); right: 0px; z-index: 40; display: grid; gap: 0.15rem; min-width: 13rem; padding: var(--sp-2); border: 1px solid var(--hair); border-radius: 8px; background: var(--paper); box-shadow: 0 14px 40px rgba(22, 21, 14, .09); text-align: left; }

.you-name { margin: 0px; font-size: var(--t-sm); line-height: 1.2; color: var(--ink); }

.you-mail { margin: 0px 0px 0.45rem; font-family: Anybody, system-ui, sans-serif; font-size: 0.6875rem; letter-spacing: 0.06em; line-height: 1.3; word-break: break-all; color: var(--ink-38); }

.you-way { display: block; width: 100%; padding: 0.42rem 0.5rem; margin: 0px -0.5rem; border: 0px; border-radius: 5px; background: none; cursor: pointer; text-align: left; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }

.you-way:hover, .you-way:focus-visible { background-color: color-mix(in srgb, var(--ink) 6%, transparent); }

.you-out { color: var(--ink-52); }

.you-out:hover { color: var(--c-creations); }

@media (max-width: 600px){
  .you-menu { right: auto; left: 0px; }
}

/* --------------------------------------------------------------------------
   YOUR ACCOUNT

   Where a person stands between arrivals. Three blocks, in the order that
   matters: who they are, what they have sent, and the way out.
   -------------------------------------------------------------------------- */
.acc { width: min(100% - 2 * var(--sp-4), 40rem); margin: 0px auto; padding: var(--sp-7) 0px var(--sp-6); text-align: left; }

.acc-kicker { margin: 0px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-52); }

.acc-title { margin: var(--sp-2) 0px 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: var(--t-lg); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); }

.acc-mail { margin: 0.4rem 0px 0px; font-family: Anybody, system-ui, sans-serif; font-size: var(--t-label); letter-spacing: 0.1em; color: var(--ink-38); }

.acc-block { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hair); }

.acc-h { margin: 0px; font-family: Outfit, system-ui, sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

/* the four answers, given back */
.acc-facts { display: grid; grid-template-columns: 11rem minmax(0px, 1fr); gap: 0.5rem var(--sp-3); margin: var(--sp-3) 0px 0px; }

.acc-facts dt { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); }

.acc-facts dd { margin: 0px; font-size: var(--t-body); font-weight: 300; color: var(--ink); }

.acc-way { display: inline-block; margin-top: var(--sp-3); font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-18); padding-bottom: 3px; transition: border-color .3s var(--ease); }

.acc-way:hover { border-color: var(--ink); }

/* what has been sent, in the order it was written */
.acc-list { display: grid; gap: 0px; margin: var(--sp-3) 0px 0px; padding: 0px; list-style: none; }

.acc-app { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0px; border-bottom: 1px solid var(--hair); }

.acc-app:first-child { border-top: 1px solid var(--hair); }

.acc-state { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-coherence); }

.acc-app[data-state="draft"] .acc-state { color: var(--c-by); }

.acc-when { flex: 1 1 auto; font-size: var(--t-sm); font-weight: 300; color: var(--ink-52); }

.acc-app-go { font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-18); padding-bottom: 2px; }

.acc-app-go:hover { border-color: var(--ink); }

.acc-none { margin: var(--sp-3) 0px 0px; font-size: var(--t-body); font-weight: 300; color: var(--ink-52); }

/* the same pill as every other way on */
.acc-go { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; margin-top: var(--sp-4); padding: 0.95rem 1.6rem; border: 1px solid var(--ink-18); border-radius: 999px; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .45s var(--ease), border-color .45s var(--ease); }

.acc-go::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: var(--v, var(--ink)); transform: scaleX(0); transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }

.acc-go:hover, .acc-go:focus-visible { color: var(--paper); border-color: var(--v, var(--ink)); }

.acc-go:hover::before, .acc-go:focus-visible::before { transform: scaleX(1); }

.acc-go[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }

.acc-out { margin-top: var(--sp-6); padding: 0px 0px 3px; border: 0px; border-bottom: 1px solid var(--ink-18); background: none; cursor: pointer; font-family: Anybody, system-ui, sans-serif; font-weight: 500; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-52); transition: color .3s var(--ease), border-color .3s var(--ease); }

.acc-out:hover { color: var(--c-creations); border-color: var(--c-creations); }

@media (max-width: 600px){
  .acc { padding-top: var(--sp-6); }
  .acc-facts { grid-template-columns: minmax(0px, 1fr); gap: 0.1rem; }
  .acc-facts dd { margin-bottom: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   THE PLATFORM

   Behind the door the site stops being a site. The nav that floats over the
   pages out there does not come in here: there is nothing left to be sold
   to someone who already arrived. What remains is a plain line at the top —
   the mark, the language, and whoever is here — and under it, room.
   -------------------------------------------------------------------------- */
/* the height of that line, known to the pages under it so they can fill
   exactly what is left of the screen */
:root { --plat-h: 4.4rem; }

.plat { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--plat-h); width: min(100% - 2 * var(--sp-4), 74rem); margin: 0px auto; }

.plat-mark { font-family: Anybody, system-ui, sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }

.plat-side { display: flex; align-items: center; gap: var(--sp-3); }

/* out here it had a hairline to lean on; alone it needs none */
.plat-lang { border-left: 0px; padding-left: 0px; }

/* the pages themselves begin right under the line, not below a floating bar */
.plat ~ .door, .plat ~ .ob { min-height: calc(var(--screen) - var(--plat-h, 4.4rem)); padding-top: var(--sp-5); }

.plat ~ .acc { padding-top: var(--sp-5); }

@media (max-width: 600px){
  :root { --plat-h: 3.6rem; }
  .plat { width: calc(100% - 2 * var(--sp-3)); }
}