/* Stock — public pages.
   Tokens are the Console direction from 2point0/DESIGN.md. Light and dark are
   both first-class and follow the device; there is no toggle here because
   there is no rail to put one in.

   One deliberate departure from DESIGN.md: body type is 16px rather than the
   app's 13px. Those sizes are tuned for dense screens a person scans. These
   pages are prose someone reads, so the scale steps up and the measure is
   capped near 68 characters. Families, neutrals, radii, rules and the spacing
   scale are unchanged. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jbmono-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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;
}

:root {
  --ground: #FFFFFF;
  --surface: #FFFFFF;
  --frame: #F2F4F8;
  --recessed: #E9ECF2;
  --ink: #17171A;
  --ink-2: #56544F;
  --ink-3: #8E8A82;
  --rule: #E6E8EC;
  --rule-strong: #CFD3DA;
  --plum: #6A3E75;

  /* Ground and surface are the same white, so a raised thing takes its edge
     from a shadow rather than from a fill one step off. */
  --shadow-raised:
    0 0 0 1px rgb(23 23 26 / 0.04),
    0 1px 2px rgb(23 23 26 / 0.04),
    0 12px 32px -8px rgb(23 23 26 / 0.08);

  --step-1: 4px;
  --step-2: 8px;
  --step-3: 12px;
  --step-4: 16px;
  --step-6: 24px;
  --step-12: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #16171A;
    --surface: #1D1E22;
    --frame: #0A0B0D;
    --recessed: #101216;
    --ink: #F3F1ED;
    --ink-2: #A8A49D;
    --ink-3: #706C66;
    --rule: #2A2C33;
    --rule-strong: #3B3D46;
    --plum: #C193CE;

    /* On dark, layered depth is invisible, so it collapses to one light ring. */
    --shadow-raised: 0 0 0 1px rgb(243 241 237 / 0.08);
  }
}

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

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

body {
  margin: 0;
  background: var(--frame);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1;
  -webkit-font-smoothing: antialiased;
}

/* The shell: the work sits in a surface card inset and lifted off the frame. */
.sheet {
  max-width: 760px;
  margin: 40px auto;
  padding: 56px 64px 48px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--step-3);
}

h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--step-4);
  text-wrap: balance;
}

/* One fact, not two. The line under the title carries the job and stops. */
.lede {
  font-size: 19px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
  text-wrap: balance;
}

h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: var(--step-12) 0 var(--step-3);
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin: var(--step-6) 0 var(--step-2);
}

p { margin: 0 0 var(--step-3); max-width: 68ch; color: var(--ink-2); }
p.plain { color: var(--ink); }

/* A card must earn its box. Sections are separated by hairline rules and
   alignment, not by boxes. */
section + section { border-top: 1px solid var(--rule); }
section > h2:first-child { margin-top: var(--step-12); }

ul { margin: 0 0 var(--step-3); padding-left: 20px; max-width: 68ch; color: var(--ink-2); }
li { margin-bottom: var(--step-2); }
li > strong { color: var(--ink); font-weight: 550; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover { color: var(--plum); text-decoration-color: var(--plum); }
a:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  text-decoration: none;
}

code, .mono, time {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

/* A recessed track pressed into the surface, for the one block that is a
   standing instruction rather than prose. */
.recessed {
  background: var(--recessed);
  border-radius: 8px;
  padding: var(--step-4) var(--step-6);
  margin: var(--step-4) 0;
}
.recessed p:last-child { margin-bottom: 0; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--step-6);
  margin: var(--step-6) 0 0;
}
.fact .label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--step-2);
}
.fact .value { font-size: 15px; color: var(--ink); margin: 0; }

footer {
  margin-top: var(--step-12);
  padding-top: var(--step-4);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
}
footer p { color: var(--ink-3); font-size: 13px; margin-bottom: var(--step-1); }

.toc { margin-bottom: 0; }

@media (max-width: 680px) {
  .sheet {
    margin: 0;
    padding: 40px 24px 32px;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
  body { background: var(--surface); }
  h1 { font-size: 27px; }
  .lede { font-size: 17px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}