/* FALCON — shared styles for /learn/ and /log/ content pages.
 *
 * These pages are deliberately PLAIN STATIC HTML. They do not load dc-runtime,
 * vendor-react or app-index. index.html is fragile precisely because it is
 * hydrated; there is no reason to inherit that risk on pages that are just text.
 * Anything here renders with no JavaScript at all, which also means crawlers and
 * ad reviewers see the full page on first fetch.
 *
 * Fonts are the same self-hosted files the rest of the site uses — latin subset
 * only, since that is all this content needs.
 */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/f-cbee7234.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/f-2c9bacf0.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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/f-c11adc91.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}

:root{
  --bg:#0B0B0D; --fg:#E8EAED; --gold:#F0B90B; --gold-hi:#FFD24A;
  --muted:#9AA0A6; --card:#141417; --line:#26262B;
  --green:#4ec36f; --red:#e06666;

  /* --dim was #5F6368, matching the homepage. On this background that is 3.25:1 —
     under the 4.5:1 WCAG AA needs for body text, and it was being used for the
     breadcrumbs, the footer AND the legal disclaimer. A disclaimer that fails
     contrast is a weaker disclaimer, so this is a compliance fix as much as an
     accessibility one. #7E848A is 5.20:1 on the page background and 4.86:1 on
     cards, so it passes in both places it appears. */
  --dim:#7E848A;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.75;
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-hi)}

/* Lighthouse flags "links rely on color to be distinguishable" — colour alone is not
   an accessible affordance, and it fails for anyone with a colour vision deficiency.
   Underline links inside running prose and list text, where they sit among words.
   Navigation, cards and the CTA button are excluded: those are unambiguous by
   position and shape, and underlining them looks broken. */
p a, li a, .disc a{text-decoration:underline}
.mast, .crumb a, .rel a, .invite .go, .foot > a{text-decoration:none}

.wrap{max-width:760px;margin:0 auto;padding:44px 24px 72px}

/* masthead ---------------------------------------------------------------- */
.mast{display:flex;gap:10px;align-items:center;color:var(--gold);font-weight:600;
  letter-spacing:4px;text-decoration:none;font-size:15px;width:fit-content}
.crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;
  color:var(--dim);margin:26px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* type -------------------------------------------------------------------- */
h1{font-size:clamp(28px,4.4vw,42px);line-height:1.14;margin:14px 0 14px;
  font-weight:700;letter-spacing:-1px}
h2{font-size:clamp(21px,2.6vw,27px);line-height:1.25;margin:52px 0 12px;
  font-weight:600;letter-spacing:-.4px}
h3{font-size:18px;margin:32px 0 8px;font-weight:600}
p{margin:0 0 18px}
.standfirst{font-size:19px;color:var(--muted);margin:0 0 6px}
.meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;
  color:var(--dim);margin:0 0 30px;text-transform:uppercase}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 9px}
strong{color:#fff}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* tables ------------------------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 22px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th{background:#1b1b1f;color:var(--muted);font-weight:500;text-align:left;
  padding:10px 14px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase}
.tbl td{padding:10px 14px;border-top:1px solid #222;vertical-align:top}
.tbl td.num{font-family:'IBM Plex Mono',monospace}
.pos{color:var(--green)}.neg{color:var(--red)}

/* callout ----------------------------------------------------------------- */
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:18px 20px;margin:0 0 24px}
.note p:last-child{margin:0}
.note.warn{border-left-color:var(--red)}

/* the invitation. Deliberately a component with a `variant` per page rather
   than one identical block everywhere — repeating the same CTA verbatim across
   every page is one of the tells that reads as a doorway network. */
.invite{border-top:1px solid var(--line);margin-top:52px;padding-top:26px}
.invite p{color:var(--muted)}
.invite .go{display:inline-block;background:var(--gold);color:#0B0B0D;font-weight:600;
  text-decoration:none;padding:11px 20px;border-radius:9px;margin-top:6px}
.invite .go:hover{background:var(--gold-hi);color:#0B0B0D}

/* related ----------------------------------------------------------------- */
.rel{margin:44px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;text-decoration:none;color:var(--fg)}
.rel a:hover{border-color:#3a3a41}
.rel b{display:block;color:var(--gold);font-weight:600;margin-bottom:2px}
.rel span{color:var(--muted);font-size:14px}

/* footer ------------------------------------------------------------------ */
.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--dim);font-size:13px}
.foot a{color:var(--muted)}
/* The disclaimer gets --muted (7.45:1), not --dim. It is the one piece of small text
   that has to be legible on principle — burying the risk warning in the lowest-contrast
   colour on the page would undercut the whole point of publishing it. */
.disc{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:14px}