/* priam-cosmetics.com: the line. Tokens and roles are explained in DESIGN.md. */

/* French sets a narrow no-break space (U+202F) before ; : ! ? and inside « ». Most faces
   lack that glyph and Chrome then draws half a word space, which reads as none: "Fine" holds
   only U+202F, 1/8 em wide, and every stack starts with it (shared/fonts, tools/fine.py). */
@font-face { font-family: "Fine"; src: url("fonts/fine.woff2") format("woff2"); unicode-range: U+202F; font-display: swap; }

@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/hubot-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/fonts/hubot-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Arial, reshaped to Hubot Sans at normal width so the swap does not move a line */
@font-face {
  font-family: "Hubot fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 107.9%;
  descent-override: 31.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hubot wide fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 118%;
  ascent-override: 92.4%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}

:root {
  /* the night blue (#0a1a39, taken from iliona.net in Round 13; the canvas clears to the same
     colour), a softened night white for text (never pure white), a deeper blue for fields, and
     one pale blue-white accent (#b5d5f4, never for text; the scene shows the same value) */
  --ground: oklch(0.225 0.064 262);  /* #0a1a39 */
  --field: oklch(0.19 0.055 262);    /* #06122c */
  --ink: oklch(0.95 0.014 250);      /* #e8eff8 */
  --dim: oklch(0.8 0.03 255);        /* #b1bfd1 */
  --rule: oklch(0.8 0.03 255 / 0.24);
  --edge: oklch(0.6 0.045 258);      /* #70819b */
  --acc: oklch(0.86 0.055 248);      /* #b5d5f4 */
  --text: "Fine", "Hubot Sans", "Hubot fallback", Arial, sans-serif;
  --wide: "Fine", "Hubot Sans", "Hubot wide fallback", Arial, sans-serif;
  --safe: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gut: calc(max(24px, 5vw) + var(--safe));
  --hh: 104px;
  --top: env(safe-area-inset-top, 0px);
  --pin: calc(var(--hh) + var(--top));
  --strip: 72px;
  color-scheme: dark;
  background: var(--ground);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; hyphens: manual; }
p { text-wrap: pretty; }
html[lang="fr"] p:not(.lead, .sub) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 8px; top: -120px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--ground); text-decoration: none; }
.skip:focus { top: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the canvas ─────────────────────────────────────────────────────────── */
#line { display: none; }
.gl #line { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; z-index: 0; visibility: hidden; }
.gl.live #line { visibility: visible; }
.gl.still #line { position: absolute; height: 100svh; }
/* still: room for the machine under the text, even on a small phone */
.gl.still .intro { margin-bottom: 200px; }
.lost #line { visibility: hidden; }

/* ── the header ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--pin);
  padding: var(--top) var(--gut) 0;
  background: var(--ground);
}
/* the wordmark: a two-line lockup, set in caps (no text-transform). PRIAM in the widest cut,
   tracked so it runs exactly as wide as the condensed line under it; everything is in em of
   one size, so the lockup scales as one piece: cap height 24 px from 1024 px, 16.4 px on a
   phone, where the second line keeps 11.2 px (BRIEF §0.4, measured: see DESIGN.md) */
.mark {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.2em;
  font: 700 clamp(1.40625rem, 0.83rem + 1.92vw, 2.0625rem)/1 var(--wide);
  text-decoration: none;
  padding-block: 12px; margin-block: -12px;
}
.mark span { display: block; white-space: nowrap; }
.mark span:first-child { font-stretch: 125%; letter-spacing: 0.356em; margin-right: -0.356em; }
.mark span:last-child { font-size: 0.68em; font-weight: 500; font-stretch: 75%; letter-spacing: 0.02em; margin-right: -0.02em; }
.top nav ul { display: flex; gap: clamp(18px, 2.4vw, 32px); list-style: none; }
.top nav a { font-weight: 500; font-size: 0.9375rem; text-decoration: none; padding-block: 12px; margin-block: -12px; display: inline-block; }
.top nav a:hover, .top nav a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
.top nav a[hreflang] { view-transition-name: lang; }

/* ── the first screen ───────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 1;
  min-height: calc(100vh - var(--pin));
  min-height: calc(100svh - var(--pin));
  display: flex; flex-direction: column;
  padding-inline: var(--gut);
}
.intro { padding-block: clamp(20px, 4.5svh, 56px) 0; max-width: 72rem; }
h1 {
  font: 400 clamp(1.75rem, 0.95rem + 2.75vw, 3.5rem)/1.06 var(--wide);
  font-stretch: 125%;
  letter-spacing: -0.012em;
  max-width: 21em;
}
/* the subline: the whole line in six words, in the condensed cut of the wordmark's second line */
.sub { margin-top: 0.45em; font: 500 clamp(1.1875rem, 0.9rem + 1.05vw, 1.875rem)/1.15 var(--wide); font-stretch: 75%; letter-spacing: 0.01em; color: var(--dim); }
.lead { margin-top: 0.85em; max-width: 34em; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.45; }
.also { margin-top: 0.7em; max-width: 44em; font-size: 0.9375rem; color: var(--dim); }
html[lang] p.also { hyphens: manual; -webkit-hyphens: manual; }
/* once the title reaches the header, the hero's text steps aside for the first station */
.run .intro { transition: opacity 0.3s ease; }
.run.past .intro { opacity: 0; }
.plan { display: block; flex: 1 1 auto; width: 100%; min-height: 200px; max-height: 62svh; margin-block: 28px 12px; }
.gl .plan { display: none; }
.lost .plan { display: block; }
.plan path { fill: var(--ground); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plan .k path { fill: var(--field); }
.plan .d path { fill: var(--dim); }

/* the strip under the line: the stations */
.strip { margin-top: auto; padding-block: 14px 18px; }
.rail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2.4vw, 36px); }
.rail a {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  min-height: 44px; padding-block: 10px;
  text-decoration: none; color: var(--dim);
}
.rail .n { font: 300 1.375rem/1 var(--wide); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.rail .w { font-size: 0.875rem; font-weight: 500; line-height: 1.2; }
.rail a:hover, .rail [aria-current] { color: var(--ink); }
.rail [aria-current] .n { color: var(--ink); text-decoration: underline 3px var(--acc); text-underline-offset: 6px; text-decoration-skip-ink: none; }
/* the pause control: one round icon in the hero's bottom-right corner, held in the same corner
   of the screen while the line runs (main.js hides it, .rest, while words would sit under it) */
.pause {
  position: absolute; z-index: 3;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink); background: color-mix(in oklab, var(--ground) 84%, transparent);
  border: 1px solid var(--edge); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pause svg { width: 20px; height: 20px; fill: currentColor; }
.pause[aria-pressed="true"] .i-pause, .pause:not([aria-pressed="true"]) .i-play { display: none; }
.pause:hover { border-color: var(--ink); }
.pause[hidden], html:not(.run) .pause { display: none; }

/* ── the stations ───────────────────────────────────────────────────────── */
.station, .finale { position: relative; z-index: 1; padding-inline: var(--gut); scroll-margin-top: var(--pin); }
.copy { max-width: 46rem; padding-block: 28px 8px; }
.station h2, .finale h2 { font: 500 clamp(1.5rem, 1rem + 1.35vw, 2.25rem)/1.12 var(--wide); font-stretch: 125%; letter-spacing: -0.01em; }
.station h2 { display: flex; align-items: baseline; gap: 0.5em; }
.station h2 .n { font-weight: 300; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 0.9em; }
.copy p { margin-top: 0.55em; max-width: 36em; }
.station .copy p { margin-left: calc(1.4em + 0.5em); }
.parts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 0.875rem; font-weight: 500; color: var(--dim); }
.station .parts { margin-left: calc(1.4em + 0.5em); }
.parts li { display: inline-flex; align-items: center; gap: 8px; }
.parts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.station:not(:last-of-type) { padding-bottom: 12px; }
html[lang] .finale p { hyphens: manual; -webkit-hyphens: manual; }
.finale { padding-bottom: 48px; }

/* ── running: the page is the line ──────────────────────────────────────── */
/* the strip and the pause control are fixed inside the hero, so the hero stacks over the stations:
   both stay tappable at every station, not only on the first screen; the ground of the end (.tail)
   slides over them */
.run .hero { z-index: 2; }
.run .strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 max(12px, env(safe-area-inset-bottom)); margin: 0; height: var(--strip); display: flex; flex-direction: column; justify-content: flex-end; }
.run .rail ol { display: block; position: relative; height: 44px; }
.run .rail li { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.run .rail li::before { content: ""; position: absolute; left: 50%; top: -7px; width: 1px; height: 7px; background: var(--rule); }
.run .rail li.clip::before { display: none; }
.run .rail li.edge .w { position: absolute; visibility: hidden; }
.run .pause { position: fixed; transition: opacity 0.25s, visibility 0.25s; }
.run:not(.live) .strip, .run:not(.live) .pause { visibility: hidden; }
.run.at-end .strip, .covered .strip { visibility: hidden; }
.covered .pause, .pause.rest { visibility: hidden; opacity: 0; }

.run .station { height: calc(20svh + var(--span) * 16svh); padding-bottom: 0; }
/* the warehouse and the shipping get as much of the scroll as the making */
.run [data-station="1"] { --span: 3; }
.run [data-station="2"] { --span: 6; }
.run [data-station="3"] { --span: 4.5; }
.run [data-station="4"] { --span: 5; }
.run [data-station="5"] { --span: 4; }
.run .finale { height: 225svh; padding-bottom: 0; }   /* the scroll that plays the truck out: about the stations' 16svh per unit of J, then a hold on the door (main.js) */
.run .station > .copy, .run .finale > .copy { position: sticky; top: var(--pin); }
/* live: one caption at a time, held under the header while its stage runs */
.run.live .station > .copy, .run.live .finale > .copy { position: fixed; top: var(--pin); left: var(--gut); right: var(--gut); opacity: 0; pointer-events: none; }
.run.live .station.on > .copy, .run.live .finale.on > .copy { opacity: 1; pointer-events: auto; }
/* the fades only once the captions sit in place (main.js adds .armed a frame after .live), so nothing flashes on load */
.run.live.armed .station > .copy, .run.live.armed .finale > .copy { transition: opacity 0.2s; }
.run.live.armed .station.on > .copy, .run.live.armed .finale.on > .copy { transition: opacity 0.3s 0.12s; }
/* the last caption scrolls away with the page as Contact arrives */
.run.live .finale > .copy { position: sticky; }

/* ── the end: a sheet of the ground slides over the line ────────────────── */
.tail {
  position: relative; z-index: 4;
  background: var(--ground);
  padding: clamp(40px, 6svh, 96px) var(--gut) 8px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
}
/* after the line: what PRIAM buys, and how the supply chain is run, on the ground, above Contact */
.deep h2 { font: 500 clamp(1.5rem, 1rem + 1.35vw, 2.25rem)/1.12 var(--wide); font-stretch: 125%; letter-spacing: -0.01em; }
.deep p { margin-top: 0.9em; max-width: 34em; }
.facts { list-style: none; margin-top: 18px; max-width: 36em; }
.facts li { position: relative; padding-left: 20px; text-wrap: pretty; }
.facts li + li { margin-top: 0.5em; }
.facts li::before { content: ""; position: absolute; left: 1px; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
/* milestones: across both columns, the year in the stations' light wide numerals over a pale blue tick */
.steps { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--rule); }
.steps ol { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(32px, 4vw, 64px); }
.steps time { display: block; font: 300 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.1 var(--wide); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.steps time::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; background: var(--acc); }
.steps p { margin-top: 12px; max-width: 26em; text-wrap: pretty; }
.steps p span { display: block; margin-top: 0.4em; color: var(--dim); }
.tail .reach { grid-column: 1; }
.tail .reach, .tail .about { padding-top: 32px; border-top: 1px solid var(--rule); }
.reach h2 { font: 500 clamp(1.5rem, 1rem + 1.35vw, 2.25rem)/1.12 var(--wide); font-stretch: 125%; }
.reach p { margin-top: 0.6em; font-size: 1.1875rem; }
.about p + p { margin-top: 0.8em; }
.about .id { font-size: 0.875rem; color: var(--dim); }
footer {
  position: relative; z-index: 4;
  background: var(--ground);
  --family-ink: var(--ink);
  --family-dim: var(--dim);
  --family-line: var(--rule);
  --family-ground: var(--ground);
  padding: 8px var(--gut) max(16px, env(safe-area-inset-bottom));
}

/* ── the legal page and the 404 ─────────────────────────────────────────── */
.doc { position: relative; z-index: 1; padding: clamp(32px, 7svh, 72px) var(--gut) 72px; max-width: calc(46rem + 2 * var(--gut)); }
.doc h1 { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); }
.doc h2 { font: 500 1.3125rem/1.25 var(--wide); font-stretch: 125%; margin-top: 2.2em; }
.doc p, .doc dl { margin-top: 0.7em; }
.doc dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; }
.doc dt { color: var(--dim); }
.doc dd { margin: 0; }
.doc .nw { white-space: nowrap; }
.doc .updated { margin-top: 2.2em; color: var(--dim); }
.doc .back { margin-top: 3em; }

/* ── widths ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tail { grid-template-columns: minmax(0, 1fr); }
  .tail .about { border-top: 0; padding-top: 0; }
  .steps ol { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 699px) {
  :root { --hh: 72px; }
  body { font-size: 1rem; }
  .top nav ul { gap: 16px; }
  .copy { padding-top: 20px; }
  .station .copy p, .station .parts { margin-left: 0; }
  .rail .n { font-size: 1.25rem; }
  .doc dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc dd + dt { margin-top: 8px; }
}

@media (max-width: 399px) {
  :root { --gut: calc(20px + var(--safe)); }
}
@media (max-width: 379px) {
  .top nav ul { gap: 12px; }
}
/* a phone, or a phone on its side: the rail's words and numbers would be too small to tap and
   crowd the drawing, so the running line keeps only its captions (the rail stays in flow when
   nothing moves) */
@media (max-width: 699px), (max-height: 519px) {
  .run .strip { display: none; }
}
/* a phone on its side: the header scrolls away and the captions sit at the top, so the drawing
   keeps the height it needs */
@media (max-height: 519px) {
  :root { --hh: 64px; --pin: 0px; }
  .top { position: relative; min-height: calc(var(--hh) + var(--top)); }
  .hero { min-height: calc(100vh - var(--hh) - var(--top)); min-height: calc(100svh - var(--hh) - var(--top)); }
  .mark { font-size: 1.40625rem; }
  .intro { padding-top: 16px; }
  h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); }
  .lead { margin-top: 0.6em; }
  .copy { padding-block: 14px 0; }
  .copy p { max-width: 50em; margin-top: 0.4em; }
  .parts { margin-top: 8px; }
  .station h2, .finale h2 { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); }
}

/* ── modes ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.22s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media (prefers-contrast: more) {
  :root { --dim: var(--ink); --rule: var(--ink); --edge: var(--ink); }
  a { text-decoration-color: currentColor; }
}
@media (forced-colors: active) {
  #line, .gl #line, .pause { display: none !important; }
  .plan, .gl .plan { display: block; }
  .plan path, .plan .k path, .plan .d path { fill: Canvas; stroke: CanvasText; }
  .parts li::before, .facts li::before, .steps time::after { background: CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
  .rail [aria-current] .n { color: Highlight; }
  .tail { border-top-color: CanvasText; }
}
@media print {
  :root { --ground: #fff; --field: #fff; --ink: #0a1a39; --dim: #4a5a74; --rule: #a3afc0; color-scheme: light; }
  :root, body { background: #fff; color: #0a1a39; }
  #line, .pause, .skip, .rail, .top nav, .reach-form { display: none !important; }
  .plan, .gl .plan { display: block !important; max-height: 40vh; }
  .top { position: static; background: #fff; }
  .hero, .run .station, .run .finale { min-height: 0; height: auto; }
  .run .station > .copy, .run .finale > .copy,
  .run.live .station > .copy, .run.live .finale > .copy { position: static; opacity: 1 !important; transition: none; }
  .run .strip { position: static; }
  .tail, footer { background: #fff; border-color: #0a1a39; --family-ground: #fff; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  h2 { break-after: avoid; }
}

/* legal and 404 */
.miss .gap { display: block; width: min(100%, 400px); height: auto; margin-top: 48px; }
.gap .belt { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gap .box { fill: var(--field); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gap .none { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
footer.bare { padding: 32px var(--gut) 48px; font-size: 0.875rem; color: var(--dim); }
footer.bare p { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ── the contact page ───────────────────────────────────────────────────── */
.reachout { max-width: calc(64rem + 2 * var(--gut)); }
.lede { max-width: 34em; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem); line-height: 1.45; }
.reach-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 88px); margin-top: 40px; align-items: start; }
.reach-form form { position: relative; display: grid; gap: 18px; }
.reach-form p { margin: 0; }
.reach-form label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 500; color: var(--dim); }
.reach-form input, .reach-form textarea {
  display: block; width: 100%; padding: 11px 12px;
  font: inherit; color: var(--ink); background: var(--field);
  border: 1px solid var(--edge); border-radius: 3px;
}
.reach-form textarea { resize: vertical; min-height: 9em; }
.reach-form input:focus-visible, .reach-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.contact-trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.contact-note { font-size: 0.875rem; color: var(--dim); max-width: 36em; }
.reach-form button {
  justify-self: start; min-height: 44px; padding: 0 22px;
  font: 500 0.9375rem/1 var(--text); color: var(--ground); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 3px; cursor: pointer;
}
.reach-form button:hover { background: var(--dim); border-color: var(--dim); }
.reach-form button:disabled { opacity: 0.6; cursor: progress; }
.contact-status { min-height: 1.55em; font-weight: 500; }
.contact-status:empty { min-height: 0; }
.reach-side { padding-top: 4px; }
.reach-side h2 { margin-top: 0; font-size: 1.1875rem; }
.reach-side p { margin-top: 0.5em; }
@media (max-width: 860px) {
  .reach-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .reach-form input, .reach-form textarea, .reach-form button { border: 1px solid CanvasText; }
}