/* Concept 12 · Sorted
   Paper-white hero → carbon engine room → paper → carbon call.
   Headings: C10's Geologica settings, untouched (58/640/-.02em/SHRP 50 · 46/640/-.015em/SHRP 50). */

@property --lr { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --paper: #F3F4F2;
  --paper-2: #E8EAE6;
  --paper-3: #DCDFDA;
  --white: #FFFFFF;
  --ink: #0B0C0B;
  --ink-2: #4B4F4B;
  --ink-3: #868B85;
  --line-l: rgba(11, 12, 11, .09);

  --carbon: #0A0B0A;
  --c2: #111311;
  --c3: #181A18;
  --c4: #222522;
  --bone: #EDEEE9;
  --bone-2: #A6AAA3;
  --bone-3: #6C716A;
  --line-d: rgba(237, 238, 233, .09);

  --f: 'Geologica', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gx: max(20px, 5vw);
  --hdr: 64px;
  --foot-h: 196px;
  --out: cubic-bezier(.16, 1, .3, 1);
  --in: cubic-bezier(.55, 0, .75, .2);
  --io: cubic-bezier(.65, 0, .35, 1);

  /* theme-switched */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: var(--line-l);
  color-scheme: light;

  /* one focus accent, only inside illustrative UI (switchable while prototyping) */
  --acc: #5CE0CE; --acc-on: #0B0C0B; --acc-soft: rgba(92, 224, 206, .16); --acc-glow: rgba(92, 224, 206, .45); --acc-line: rgba(92, 224, 206, .55);
  --acc-l: #5CE0CE; --acc-l-on: #0B0C0B; --acc-l-soft: rgba(92, 224, 206, .22);
}
@media (min-width: 1000px) { :root { --gx: 6vw; } } /* desktop: a little more air at the sides (86px at 1440) */

:root[data-accent="violet"] { --acc: #9A8CFF; --acc-soft: rgba(154, 140, 255, .16); --acc-glow: rgba(154, 140, 255, .45); --acc-line: rgba(154, 140, 255, .55); --acc-l: #9A8CFF; --acc-l-soft: rgba(154, 140, 255, .22); }
:root[data-accent="none"] { --acc: #EDEEE9; --acc-soft: rgba(237, 238, 233, .14); --acc-glow: rgba(237, 238, 233, .35); --acc-line: rgba(237, 238, 233, .4); --acc-l: #0B0C0B; --acc-l-on: #FFFFFF; --acc-l-soft: rgba(11, 12, 11, .1); }
[data-theme="dark"] {
  --bg: var(--carbon);
  --fg: var(--bone);
  --fg-2: var(--bone-2);
  --fg-3: var(--bone-3);
  --line: var(--line-d);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-weight: 400; font-size: 17px; line-height: 1.55;
  font-variation-settings: 'SHRP' 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* ---------- type (C10, locked) ---------- */
.h1 { font-size: clamp(38px, 4.05vw, 58px); font-weight: 640; line-height: 1.04; letter-spacing: -.02em; font-variation-settings: 'SHRP' 50; text-wrap: balance; max-width: 22ch; }
.h2 { font-size: clamp(31px, 3.2vw, 46px); font-weight: 640; line-height: 1.08; letter-spacing: -.015em; font-variation-settings: 'SHRP' 50; text-wrap: balance; }
.eyebrow, .kicker { font-family: var(--m); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.kicker { display: flex; align-items: center; gap: 10px; }
.kicker span { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--fg); letter-spacing: .04em; }
.lede { font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.ic { width: 18px; height: 18px; }

/* Skip link (as on the app pages): first Tab stop */
.skip { position: fixed; left: 16px; top: -60px; z-index: 90; background: #EDEEE9; color: #0A0B0A; padding: 10px 14px; border-radius: 10px; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }