/* ============================================================
   Reliever — public site V1, base system
   Design system: Concept 102 "The Functional Standard".
   Ink on paper, hairline structure, type as the hero, prism as
   the only expressive register.

   This is the live site's base. styles.css is the same file as
   it stood on 2026-08-14 and is now frozen for the archived
   directions under a/, b/ and c/, which still load it. The
   components those pages use and this one does not (the drawn
   desktop and phone dashboards, the figure captions, the prism
   band, the early-access aside, the two-column form layout, the
   field surface, the ghost button, the ruled divider) are not
   carried here.

   Tokens carried verbatim from the homepage feature-tiles
   component and the 102 brand guidelines:
   Paper #FFFFFF · Ink #111111 · Ink Lift #1A1A1A ·
   Muted #6B6B6B · Line #E8E8E8 · Field #FAFAFA
   Host Grotesk only. No italic. No shadows. Radius 0.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --ink-lift:#1A1A1A;
  --muted:#6B6B6B;
  --line:#E8E8E8;
  --field:#FAFAFA;
  --nav-ground:rgba(255,255,255,.92);
  --hairline-on-ink:rgba(232,232,232,.20);
  --font:"Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
html,body{ overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  font-style:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* emphasis is weight, never slant */
em,i{ font-style:normal; font-weight:600; }
img{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; border-radius:0; }

/* ---------- Focus ---------- */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.r-ink :focus-visible{ outline-color:var(--paper); }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:16px; z-index:100;
  padding:12px 20px; background:var(--ink); color:var(--paper);
  text-decoration:none; font-weight:600; font-size:.875rem;
}
.skip-link:focus{ top:12px; }

/* ---------- Layout ---------- */
.container{ max-width:1120px; margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .container{ padding-inline:32px; } }

.section{ padding-block:80px 88px; }
@media (min-width:768px){ .section{ padding-block:96px 104px; } }
@media (min-width:1280px){ .section{ padding-block:128px 136px; } }

.r-paper{ background:var(--paper); }
.r-ink{
  background-color:var(--ink);
  background-image:radial-gradient(120% 90% at 30% 20%, #1A1A1A 0%, #111111 65%);
  color:var(--paper);
}
.r-ink .caption,.r-ink .sec-sub{ color:var(--line); }

/* ---------- Type scale ---------- */
.display-1{
  font-size:clamp(2.5rem, 1.35rem + 5.1vw, 5rem);
  font-weight:800; line-height:.96;
  letter-spacing:-.03em; text-transform:uppercase;
  text-wrap:balance;
}
.display-2{
  font-size:clamp(1.875rem, 1.35rem + 2.6vw, 3.125rem);
  font-weight:700; line-height:1.04;
  letter-spacing:-.02em; text-transform:uppercase;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  font-weight:400; line-height:1.55; letter-spacing:-.005em;
  max-width:60ch;
}
.body{ font-size:1rem; line-height:1.6; }
.caption{ font-size:.8125rem; line-height:1.5; color:var(--muted); }
.label{
  font-size:.75rem; font-weight:600; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase;
}
.muted{ color:var(--muted); }
/* 56ch in Host Grotesk measures 68 to 75 real characters per
   line. The CSS ch unit is the width of "0", which overstates a
   proportional face by roughly a quarter. */
.prose p{ max-width:56ch; }
.prose p + p{ margin-top:1.25rem; }

/* ---------- Section header (from the tiles component) ---------- */
.sec-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 18px;
}
.sec-title{
  font-size:clamp(28px, 4.4vw, 46px);
  font-weight:600; letter-spacing:-.02em; line-height:1.08;
  margin:0 0 14px; max-width:18ch; text-wrap:balance;
}
.sec-sub{
  font-size:clamp(16px, 1.9vw, 19px);
  color:var(--muted); margin:0; max-width:52ch;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px;
  font-size:.875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background .16s ease, color .16s ease;
}
.btn:hover{ background:var(--ink-lift); }
.btn .arrow{ display:inline-block; transition:transform .16s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

.r-ink .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.r-ink .btn:hover{ background:var(--line); }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.875rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding:12px 2px; color:inherit;
  border-bottom:1px solid var(--ink);
}
.text-link:hover{ color:var(--muted); border-bottom-color:var(--muted); }
.text-link .arrow{ display:inline-block; transition:transform .16s ease; }
.text-link:hover .arrow{ transform:translateX(4px); }
.r-ink .text-link{ border-bottom-color:var(--paper); }
.r-ink .text-link:hover{ color:var(--line); border-bottom-color:var(--line); }

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:36px; }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)){
  .site-nav{ background:var(--nav-ground); backdrop-filter:blur(10px); }
}
.site-nav .container{
  min-height:64px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.nav-home{
  display:inline-flex; align-items:center;
  min-height:44px; padding:8px 6px; margin-left:-6px;
}
.nav-home img{ height:26px; width:auto; }
.nav-home .mark-paper{ display:none; }
@media (max-width:400px){ .nav-home img{ height:22px; } }

.nav-links{ display:flex; align-items:center; gap:clamp(14px, 3vw, 28px); }
/* 44px minimum target height: the underline still sits on the text,
   the hit area extends above and below it. */
.nav-links a{
  font-size:.8125rem; font-weight:500; color:var(--ink);
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 2px;
}
.nav-links a:hover{
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
}
.nav-links a[aria-current="page"],
.nav-links a[aria-current="true"]{
  font-weight:600; text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:2px;
}

/* ---------- Hero ---------- */
.hero{ padding-block:72px 24px; }
@media (min-width:768px){ .hero{ padding-block:112px 32px; } }
@media (min-width:1280px){ .hero{ padding-block:144px 40px; } }

.hero h1{ margin-bottom:28px; max-width:14ch; }
.hero .purpose{
  font-size:clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  line-height:1.5; letter-spacing:-.01em;
  color:var(--ink-lift); max-width:46ch; font-weight:400;
}

/* ---------- Prism (the one expressive register) ----------
   Served from the 2560w master. The earlier 1600w and 1200w
   files had been resampled twice and went soft under a
   full-bleed placement on any retina screen. */
.prism-sign{
  background:#000; overflow:hidden;
  height:clamp(280px, 32vw, 480px);
}
.prism-sign img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* ---------- Cluster head (from the tiles component) ---------- */
.cluster{ margin-top:72px; }
.cluster-head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--ink);
}
.cluster-num{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.cluster-name{
  font-size:15px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; margin:0;
}

/* ---------- Tile grid (component, verbatim) ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
@media (max-width:820px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid{ grid-template-columns:1fr; } }

.tile{
  appearance:none; -webkit-appearance:none;
  text-align:left; font-family:inherit;
  background:var(--paper); color:var(--ink);
  border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 24px 22px; min-height:186px;
  cursor:pointer; display:flex; flex-direction:column;
  position:relative; transition:background .16s ease;
}
.tile:hover,.tile:focus-visible{ background:var(--field); }
.tile:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

.tile-title{
  font-size:18px; font-weight:600; letter-spacing:-.01em;
  line-height:1.2; margin:0 0 10px;
}
.tile-teaser{ font-size:14.5px; color:var(--muted); line-height:1.45; margin:0; }
.tile-cue{
  margin-top:auto; padding-top:18px;
  font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px;
}
.tile-cue .arrow{ display:inline-block; transition:transform .16s ease; }
.tile:hover .tile-cue,.tile:focus-visible .tile-cue{ color:var(--ink); }
.tile:hover .tile-cue .arrow,.tile:focus-visible .tile-cue .arrow{ transform:translateX(4px); }

/* ---------- Detail modal (component, verbatim behaviour) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(17,17,17,.42);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:60;
}
.overlay.open{ display:flex; }
.dialog{
  background:var(--paper); border:1px solid var(--ink);
  max-width:560px; width:100%; padding:40px 40px 36px; position:relative;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}
.dialog-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
.dialog-title{
  font-size:26px; font-weight:600; letter-spacing:-.02em;
  line-height:1.14; margin:0 0 16px; padding-right:36px;
}
.dialog-body{ font-size:16.5px; line-height:1.6; color:var(--ink-lift); margin:0; }
.dialog-close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.dialog-close:hover{ background:var(--field); }
.dialog-close:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:520px){ .dialog{ padding:32px 24px 28px; } }

/* ---------- Page head (About / Early Access) ---------- */
.page-head{ padding-block:56px 8px; }
@media (min-width:768px){ .page-head{ padding-block:88px 16px; } }
.page-head h1{ margin-bottom:20px; }
/* a full sentence as the page title stays in sentence case;
   the uppercase display register is kept for short statements */
.page-head h1.sec-title{ max-width:24ch; margin-bottom:18px; }
.page-head + .section{ padding-top:40px; }
@media (min-width:1280px){ .page-head + .section{ padding-top:56px; } }

/* ---------- Article sections ---------- */
.article-block{ margin-top:64px; }
.article-block:first-of-type{ margin-top:0; }
.article-block .body{ color:var(--ink-lift); }

/* ---------- Form ---------- */
.field{ margin-bottom:24px; }
.field label{
  display:block; font-size:.8125rem; font-weight:600;
  letter-spacing:.02em; margin-bottom:8px;
}
.field .req{ color:var(--muted); font-weight:400; }
.field .hint{ font-size:.8125rem; color:var(--muted); margin-top:6px; }

.field input,
.field select,
.field textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--field); color:var(--ink);
  border:1px solid var(--line);
  font-size:1rem; line-height:1.5;
  transition:border-color .16s ease, background .16s ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{
  background:var(--paper); border-color:var(--ink);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--ink); outline-offset:-1px;
}
.field .error{
  display:none; font-size:.8125rem; font-weight:600;
  margin-top:8px; padding-left:14px; border-left:2px solid var(--ink);
}
.field.is-invalid .error{ display:block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-color:var(--ink); background:var(--paper); }

.form-row{ display:grid; grid-template-columns:1fr; gap:0 20px; }
@media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } }

.form-status{
  display:none; margin-top:28px;
  border:1px solid var(--ink); padding:20px 22px;
  font-size:.9375rem; line-height:1.55;
  scroll-margin-top:96px;
}
.form-status.is-shown{ display:block; }
.form-status .form-status-title{
  display:block; font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.form-status a{ font-weight:600; }

.form-submit{ margin-top:32px; }
.form-submit .btn{ width:100%; }
@media (min-width:560px){ .form-submit .btn{ width:auto; min-width:240px; } }

/* ---------- Closing CTA ---------- */
.cta{ padding-block:88px 96px; }
@media (min-width:1280px){ .cta{ padding-block:128px 136px; } }
.cta h2{ max-width:16ch; margin-bottom:20px; }
.cta .lede{ color:var(--line); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-block:48px 40px; }
.footer-grid{
  display:flex; flex-wrap:wrap; gap:32px 48px;
  align-items:flex-start; justify-content:space-between;
}
.footer-brand img{ height:28px; width:auto; }
.footer-flag{ margin-top:16px; font-size:.9375rem; font-weight:600; }
.footer-links{ display:flex; flex-wrap:wrap; gap:0 28px; margin-top:-10px; }
.footer-links a{
  font-size:.8125rem; font-weight:500; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.footer-links a:hover{ text-decoration:underline; text-underline-offset:5px; }
.footer-legal{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--muted);
}

/* Reduced motion: the arrows stop travelling and nothing slides.
   Colour and background state changes are kept and simply land
   instantly, so hover, focus and error feedback all still read. */
@media (prefers-reduced-motion: reduce){
  .btn .arrow,.text-link .arrow,.tile-cue .arrow{ transition:none !important; }
  .btn:hover .arrow,.text-link:hover .arrow,
  .tile:hover .tile-cue .arrow,.tile:focus-visible .tile-cue .arrow{ transform:none !important; }
  *{ animation:none !important; transition-duration:.01ms !important; }
}