/* ==================================================================
   Ryzome, the website.

   Built to the Claude Design file "Ryzome Site.dc.html" in the
   project "Site editing approach", which was itself synced from this
   repo at 08f31d51. The design canvas emits inline styles; this is
   the same result expressed in the tokens and classes the repo
   already used, so the file stays editable by hand.

   The design language is the app's. Ink on a photograph under a
   four-layer scrim, the one number that matters enormous in
   sandalwood with two hard offset shadows, everything else labelled
   in tracked mono. Tokens and scrim shapes come from ryzome-ios:
     Ryzome/Design/RyzomeTheme.swift   palette, and the dim / veil /
                                       pool shape of a scrim
     Ryzome/Design/RyzomeType.swift    Archivo and IBM Plex Mono

   This started life as a <style> block inside index.html. It moved
   out when the site grew past one page, so the six pages share one
   stylesheet rather than six copies of it. Everything above the
   "Beyond the one page" divider is that original block, unchanged,
   in its original order; the cascade below depends on that order, so
   add to the end rather than rearranging.
   ================================================================== */
:root {
  --field:    #04110A;  /* forestDeep, the deepest ground             */
  --card:     #0D1F16;  /* forestCard, the sheet's tint               */
  --ink:      #E9E4DC;  /* parchment, warm rather than white          */
  --hero:     #F9F1E5;  /* sandalwood, only ever the big figures      */
  --accent:   #31C3B5;  /* aquamarineBright, you and what is yours    */
  --amber:    #D28423;  /* Tideline's night accent                    */
  --hairline: #21362A;

  --ink-quiet: rgba(233, 228, 220, 0.58);
  --ink-faint: rgba(233, 228, 220, 0.28);

  --gutter: clamp(1.4rem, 5vw, 5rem);
  --measure: 1180px;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* FieldMetrics.sheetCorner */
  --corner: 28px;
}

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

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

body {
  font-family: var(--sans);
  background: var(--field);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

::selection { background: var(--accent); color: var(--field); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* Grain over the whole page, as the app grains every frame. */
.grain {
  position: fixed;
  inset: -60%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%,  2%); }
  40% { transform: translate( 2%, -2%); }
  60% { transform: translate(-2%, -3%); }
  80% { transform: translate( 3%,  2%); }
}

/* ------------------------------------------------------------------
   Type
   ------------------------------------------------------------------ */
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.label--faint { color: rgba(233, 228, 220, 0.44); }
.plate .label--faint { color: rgba(233, 228, 220, 0.58); }

h1, h2 { font-weight: 500; letter-spacing: -0.028em; line-height: 1.04; color: var(--hero); }

h1 { font-size: clamp(2.5rem, 5.4vw, 4.9rem); }
h2 { font-size: clamp(2rem, 5.2vw, 4.2rem); }

/* The two hard offset shadows from the app's hero figure, near and
   far, both cut from the deepest ground. */
.figure {
  display: block;
  font-weight: 600;
  color: var(--hero);
  letter-spacing: -0.045em;
  line-height: 0.82;
  text-shadow:
    0.055em 0.055em 0 rgba(4, 17, 10, 0.42),
    0.115em 0.115em 0 rgba(4, 17, 10, 0.20);
}

/* Tracked caps in the accent, exactly as the app sets the ordinal. */
.figure sup {
  font-size: 0.3em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: super;
  text-shadow: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(49, 195, 181, 0.42);
  border-radius: 100px;
  padding: 0.42rem 0.9rem;
}

/* ------------------------------------------------------------------
   Header. The wordmark, and the nav beside it.
   ------------------------------------------------------------------ */
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.2rem, 2.6vw, 2rem) var(--gutter);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink);
}

.wordmark:hover { color: var(--ink); }
.wordmark svg { width: 1.3em; height: 1.3em; display: block; }

/* ------------------------------------------------------------------
   A plate: ink over a photograph, or over the hero's gradient.

   Each plate carries its own --dim / --top / --bot / --pool, the
   four layers the app's Scrim renders, run heavier here because a
   web page puts far more copy over a picture than the app's screen.
   ------------------------------------------------------------------ */
.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 2;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter);
}

.plate--centred {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}

.plate--tall { min-height: min(94vh, 900px); }

.plate-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--focus, 60%);
  /* TextureMotion.photoDrift, and photoDriftScale */
  animation: photoDrift 40s ease-in-out infinite alternate;
}

@keyframes photoDrift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.05); }
}

.plate-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 44%, rgba(4, 17, 10, var(--pool, 0.48)), transparent 74%),
    linear-gradient(to bottom, rgba(4, 17, 10, var(--top, 0.62)) 0%, transparent 48%),
    linear-gradient(to top,    rgba(4, 17, 10, var(--bot, 0.76)) 0%, transparent 54%),
    rgba(4, 17, 10, var(--dim, 0.50));
}

.plate-body { position: relative; z-index: 2; max-width: var(--measure); margin: 0 auto; width: 100%; }

/* Ink over a photograph is never the quiet cut. */
.plate .lede, .plate .prose p { color: var(--ink); }

/* ------------------------------------------------------------------
   Hero. No photograph: a teal-to-amber gradient with a streaked
   texture over it, which reads as water or long exposure rather than
   as a place, and leaves the one photograph in the hero to the phone.
   ------------------------------------------------------------------ */
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 78% 78%, rgba(210, 132, 35, 0.20), transparent 62%),
    radial-gradient(70% 55% at 20% 12%, rgba(49, 195, 181, 0.14), transparent 66%),
    linear-gradient(168deg, #072229 0%, #061A1E 46%, #04120F 100%);
}

/* A high x-frequency, low y-frequency turbulence, so the noise pulls
   into horizontal streaks instead of even grain. */
.hero-streak {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.014' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 50% 46%, rgba(4, 17, 10, 0.34), transparent 76%),
    linear-gradient(to bottom, rgba(4, 17, 10, 0.30) 0%, transparent 34%),
    linear-gradient(to top,    rgba(4, 17, 10, 0.42) 0%, transparent 40%);
}

.hero .plate-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero .label { display: block; margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem); }
.hero h1 { max-width: 17ch; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.hero h1 em { font-style: normal; color: var(--accent); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.45;
  max-width: 42ch;
  color: var(--ink);
}

.lede strong { font-weight: 500; color: var(--hero); }

.hero-foot {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   The hero device.

   Deliberately far larger than the space it sits in: the slot is a
   window and the phone runs out of the bottom of the hero, cropped
   by the plate's overflow. So the slot sets how much you see and the
   device sets how big it reads, independently.

   Built rather than screenshotted, because every capture in the app
   repo carries the same sample state: fifth of five, and a goal-days
   chip reading 8/7 that Scoring cannot produce, since goal days cap
   at seven. The parts are the app's own, so it stays honest, and the
   numbers agree with the leaderboard in 02.
   ------------------------------------------------------------------ */
.phone-slot { position: relative; align-self: stretch; min-height: min(58vh, 600px); }

.device {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: min(112vh, 1150px);
  aspect-ratio: 1206 / 2622;
  /* content-box so the bezel padding sits outside the screen's ratio,
     which is how the design measures it. */
  box-sizing: content-box;
  padding: 1.15%;
  /* Brushed titanium: light catches the rails at an angle. */
  background: linear-gradient(100deg,
    #0A0C0D 0%, #1E2224 6%, #2B3033 12%, #14171A 30%,
    #0C0F10 55%, #23282B 82%, #15191B 94%, #08090A 100%);
  border-radius: 10.5% / 4.9%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

/* Silent switch, the two volume keys, and the side button opposite. */
.device-key {
  position: absolute;
  width: 1.1%;
  background: linear-gradient(180deg, #22272A, #0C0E10);
}

.device-key--l { left: -1.4%; border-radius: 2px 0 0 2px; }
.device-key--r { right: -1.4%; border-radius: 0 2px 2px 0; }

.device-key--mute { top: 15.5%; height: 4.4%; }
.device-key--up   { top: 22.5%; height: 7.6%; }
.device-key--down { top: 31.5%; height: 7.6%; }
.device-key--side { top: 26%;   height: 11.5%; }

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 9.6% / 4.4%;
  background: #000;
  box-shadow: inset 0 0 0 1.5px #06090B;
  /* Everything inside is sized from the screen's own width, so the
     whole interface scales as one from the device's height alone. */
  container-type: inline-size;
}

.device-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.device-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(48% 40% at 50% 46%, rgba(4, 17, 10, 0.40), transparent 76%),
    linear-gradient(to bottom, rgba(4, 17, 10, 0.48) 0%, transparent 32%),
    linear-gradient(to top,    rgba(4, 17, 10, 0.66) 0%, transparent 50%),
    rgba(4, 17, 10, 0.40);
}

.device-ui {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 7cqw 6cqw 0;
  /* Tideline at night is the one place the app accents in amber. */
  --accent: var(--amber);
}

.device-island {
  width: 30cqw;
  height: 8.2cqw;
  border-radius: 100px;
  background: #000;
  margin: -3cqw auto 5.5cqw;
}

.device-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; }

.d-label {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 3.4cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.d-sub {
  display: block;
  margin-top: 1.6cqw;
  font-family: var(--mono);
  font-size: 2.8cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 228, 220, 0.62);
}

.d-avatar {
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  border: 1px solid rgba(233, 228, 220, 0.4);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 2.8cqw;
  color: var(--ink);
}

.d-week { display: flex; gap: 1.1cqw; margin-top: 3.4cqw; }
.d-week i { flex: 1; height: 0.8cqw; border-radius: 2px; background: rgba(233, 228, 220, 0.16); }
.d-week i.on { background: rgba(210, 132, 35, 0.75); }

/* The app sets the figure about a third of the way down the screen. */
.d-hero { margin-top: 21cqw; }
.d-hero .figure { font-size: 40cqw; }

.d-caption {
  margin-top: 3.4cqw;
  font-size: 3.4cqw;
  line-height: 1.35;
  color: var(--hero);
}

/* Sits on the brightest strip of the photograph, so it takes a
   backing rather than relying on the scrim alone. */
.d-chip {
  display: inline-flex;
  margin-top: 4cqw;
  font-family: var(--mono);
  font-size: 2.8cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8A34A;
  background: rgba(4, 17, 10, 0.46);
  border: 1px solid rgba(210, 132, 35, 0.6);
  border-radius: 100px;
  padding: 1.4cqw 3cqw;
}

/* The detail sheet, peeking as it does in the app. */
.d-sheet {
  margin-top: auto;
  margin-inline: -6cqw;
  background: rgba(4, 17, 10, 0.82);
  border-top: 1px solid rgba(233, 228, 220, 0.1);
  border-radius: 7cqw 7cqw 0 0;
  padding: 4.5cqw 6cqw 9cqw;
}

.d-grab {
  width: 12cqw;
  height: 0.8cqw;
  border-radius: 100px;
  background: rgba(233, 228, 220, 0.28);
  margin: 0 auto 3.4cqw;
}

.d-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.d-sheet .d-label { font-size: 3cqw; color: rgba(233, 228, 220, 0.72); }

.d-chevron {
  width: 3cqw;
  height: 3cqw;
  border-right: 1px solid rgba(233, 228, 220, 0.5);
  border-top: 1px solid rgba(233, 228, 220, 0.5);
  transform: rotate(-45deg);
  flex: none;
}

/* ------------------------------------------------------------------
   A band: the dark sheet surface between the plates
   ------------------------------------------------------------------ */
.band {
  position: relative;
  z-index: 2;
  background: var(--field);
  border-top: 1px solid var(--hairline);
  padding: clamp(4rem, 11vh, 8rem) var(--gutter);
}

.band-in { max-width: var(--measure); margin: 0 auto; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.prose .label { display: block; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.prose .label--index { color: var(--accent); }
.prose h2 { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); max-width: 22ch; }

.prose p {
  color: var(--ink-quiet);
  font-size: clamp(1.03rem, 1.4vw, 1.2rem);
  max-width: 54ch;
}

.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------
   A sheet: the app's detail sheet, borrowed as a card
   ------------------------------------------------------------------ */
.sheet {
  background: linear-gradient(163deg, rgba(13, 31, 22, 0.95), rgba(4, 17, 10, 0.75));
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
}

/* 01 A figure with nothing riding on it. */
.dead .figure {
  font-size: clamp(3.6rem, 9vw, 6.4rem);
  color: var(--ink-faint);
  text-shadow: 0.05em 0.05em 0 rgba(4, 17, 10, 0.5);
  margin: 1.1rem 0 1.2rem;
}

.dead .rule-off { height: 1px; background: var(--hairline); margin: 1.4rem 0 1.1rem; }

/* 02 The leaderboard, which is the accountability made visible. */
.board > .label { display: block; margin-bottom: 1.5rem; }

.board-row {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  gap: 0.3rem 0.85rem;
  align-items: center;
  padding: 0.55rem 0;
}

.board-row .place { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); }
.board-row .who   { font-size: 0.98rem; color: var(--ink); }
.board-row .val   { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-quiet); letter-spacing: 0.04em; }

.board-row .bar {
  grid-column: 2 / -1;
  height: 3px;
  border-radius: 3px;
  background: rgba(233, 228, 220, 0.13);
  overflow: hidden;
}

.board-row .bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: rgba(233, 228, 220, 0.34);
  transform-origin: left center;
  transform: scaleX(0);
  /* TextureMotion.rise */
  transition: transform 0.7s cubic-bezier(0.2, 1.1, 0.3, 1) var(--bd, 0s);
}

.board.in .board-row .bar span { transform: scaleX(1); }

.board-row.you .who { color: var(--accent); font-weight: 500; }
.board-row.you .val { color: var(--accent); }
.board-row.you .bar span { background: var(--accent); opacity: 0.85; }

.board-foot { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }

/* ------------------------------------------------------------------
   Card rows, for 03 and 04
   ------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.6rem, 3.4vw, 3rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
}

.card { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }

/* 03 names the thing measured above the metric itself. */
.card .eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(233, 228, 220, 0.44);
  margin-bottom: 0.9rem;
}

.card .metric {
  display: block;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--hero);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-bottom: 0.7rem;
}

/* 04 leads on the accent label instead. */
.card h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.card p { color: var(--ink-quiet); font-size: 1rem; max-width: 32ch; }

/* ------------------------------------------------------------------
   Close and footer
   ------------------------------------------------------------------ */
.close { text-align: center; }
.close .plate-body { max-width: 40rem; }
.close h2 { margin: 0 auto clamp(1.2rem, 2.4vw, 1.8rem); max-width: 20ch; }
.close p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink); margin: 0 auto clamp(1.8rem, 3.5vw, 2.4rem); max-width: 34ch; }

footer {
  position: relative;
  z-index: 2;
  background: var(--field);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: clamp(1.4rem, 2.6vw, 2rem) var(--gutter);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

footer a { color: var(--ink-quiet); transition: color 0.25s ease; }

/* ------------------------------------------------------------------
   Reveal, once, the first time a thing is seen
   ------------------------------------------------------------------ */
.rise { opacity: 0; transform: translateY(22px); }

.rise.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

/* ==================================================================
   Beyond the one page

   Everything below arrived with the About / Product / Contact /
   Privacy / Terms pages. It adds to the language above rather than
   restating it: the nav that the header always wanted, a masthead
   for a page that has no photograph to lead with, and a document
   scale for prose that runs to sections rather than to one line.
   ================================================================== */

/* ------------------------------------------------------------------
   Nav, beside the wordmark. Mono caps at the footer's size, so the
   two ends of the page are set in the same voice.
   ------------------------------------------------------------------ */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav a { color: var(--ink-quiet); transition: color 0.25s ease; }
.nav a:hover { color: var(--accent); }

/* The page you are on, held at full ink rather than marked. */
.nav a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------------
   Masthead: how a page opens when it has no photograph.

   The header is absolutely positioned, so the padding here is what
   keeps the nav clear of the first line. The wash is the hero's own
   gradient run much quieter, teal off the top left and amber off the
   top right, so an interior page still reads as this site.
   ------------------------------------------------------------------ */
.masthead {
  position: relative;
  z-index: 2;
  background: var(--field);
  padding: clamp(8rem, 19vh, 12rem) var(--gutter) clamp(3rem, 6vh, 4.5rem);
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 16% 4%, rgba(49, 195, 181, 0.10), transparent 64%),
    radial-gradient(60% 50% at 90% 0%, rgba(210, 132, 35, 0.07), transparent 60%);
}

.masthead-in {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
}

.masthead .label { display: block; margin-bottom: clamp(1rem, 2vw, 1.5rem); color: var(--accent); }
.masthead h1 { max-width: 24ch; margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }

/* A band's own top padding assumes a plate above it. Straight after a
   masthead it doubles up, so the first section after one sits closer. */
.masthead + .band { padding-top: clamp(2.4rem, 5.5vh, 3.6rem); }

/* ------------------------------------------------------------------
   A document: prose that runs to sections.

   The bands' h2 is display scale, sized to be the only thing on a
   screen. A policy has twenty of them, so the document sets its own
   ramp and its own measure, and h3 drops out of mono into language.
   ------------------------------------------------------------------ */
.doc { max-width: 70ch; }

.doc h2 {
  font-size: clamp(1.32rem, 2.1vw, 1.6rem);
  line-height: 1.22;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem;
}

.doc > h2:first-child { margin-top: 0; }

.doc h3 {
  font-family: var(--sans);
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 1.9rem 0 0.6rem;
}

.doc p, .doc li { color: var(--ink-quiet); font-size: 1.02rem; }

/* A paragraph needs its leading gap whatever precedes it. p + p is the
   common case, but a policy runs list-then-paragraph constantly, and
   without these two the paragraph sits on the last bullet. */
.doc p + p,
.doc ul + p,
.doc .note + p { margin-top: 1rem; }
.doc strong { color: var(--ink); font-weight: 500; }
.doc a { color: var(--accent); }
.doc a:hover { text-decoration: underline; }

/* The middle dot the site already separates phrases with, borrowed as
   the only list mark it has. */
.doc ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.doc li { position: relative; padding-left: 1.15rem; }
.doc li + li { margin-top: 0.6rem; }

.doc li::before {
  content: "·";
  position: absolute;
  left: 0.1rem;
  color: var(--accent);
  opacity: 0.7;
  font-weight: 600;
}

/* The effective date and the entity, under the title of a policy. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3rem);
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--hairline);
}

/* A pulled-out paragraph, for the one thing in a policy that a
   reader must not miss. */
.doc .note {
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid rgba(49, 195, 181, 0.42);
  background: rgba(13, 31, 22, 0.6);
  border-radius: 0 10px 10px 0;
}

.doc .note p { color: var(--ink); }

/* ------------------------------------------------------------------
   Contact: an address is the point, so it is set at lede size.
   ------------------------------------------------------------------ */
.reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2rem);
}

.reach .label { display: block; margin-bottom: 1rem; }

.reach .addr {
  display: block;
  font-style: normal;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--hero);
}

.reach a.addr { color: var(--accent); overflow-wrap: anywhere; }
.reach a.addr:hover { text-decoration: underline; }
.reach .addr + p { margin-top: 0.9rem; color: var(--ink-quiet); font-size: 0.98rem; }

/* ------------------------------------------------------------------
   Footer nav. Every route the site has, so no page is a dead end.
   ------------------------------------------------------------------ */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
}

.foot-nav a:hover { color: var(--accent); }

/* ------------------------------------------------------------------
   Narrow
   ------------------------------------------------------------------ */
@media (max-width: 940px) {
  .split, .hero .plate-body { grid-template-columns: 1fr; }
  .hero .plate-body { gap: clamp(2.4rem, 7vw, 3.4rem); }
  .plate--tall { min-height: 0; }

  /* The slot stops stretching and becomes an explicit window, with
     the phone still oversized inside it and cropped at the fold. */
  .phone-slot {
    position: static;
    min-height: 0;
    height: min(52vh, 460px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .device {
    position: relative;
    left: auto;
    transform: none;
    flex: none;
    height: min(78vh, 690px);
  }

  /* One column of copy spans the whole frame, including whatever
     bright band the scrim's pool was shaped around, so every plate
     takes an extra flat dim. Each plate's own --dim is inline and an
     inline custom property cannot be overridden from a media query,
     hence a separate layer rather than a bigger number. */
  .plate-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 17, 10, 0.22);
  }
}

@media (max-width: 620px) {
  .plate { padding-top: clamp(6rem, 14vh, 8rem); }

  /* Four items plus the wordmark do not fit a phone, and the
     wordmark is already the way home, so Home is the one that goes.
     Tracking comes in with it, since tracking is what costs width. */
  .nav { gap: 0.95rem; font-size: 0.64rem; letter-spacing: 0.08em; }
  .nav .nav-home { display: none; }

  header { gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .board-row .bar span { transform: scaleX(1); }
  .plate-photo { transform: scale(1.02); }
}