/* ============================================================================
   Engram — shared styles for the /engram route.
   Extracted 2026-07-26 from five hand-copied <style> blocks that had already
   drifted (line-height 1.6 vs 1.7, prefers-reduced-motion on 2 of 5 pages,
   .lede margins three different ways).

   Page-specific rules stay in each page's own <style> block. Rules that apply
   to all four document pages are scoped under `body.doc`; the landing page is
   `body.landing`, so neither can leak into the other.
   ========================================================================= */

/* ---- Typefaces ----------------------------------------------------------
   Self-hosted, same-origin, zero third-party requests. These are byte-for-byte
   the faces the app bundles (app/assets/fonts/, converted TTF -> woff2), so the
   site and the product are set in literally the same type — and a page that
   claims "no trackers, nothing leaves your device" no longer hands the visitor's
   IP to Google before first paint on the way to saying it.

   The app's subsets omit U+2192 (→) and U+2713 (✓). So does Google's `latin`
   subset — verified against the live fonts.googleapis.com CSS on 2026-07-26,
   which covers U+2191 and U+2193 but not U+2192. Both glyphs already fell back
   to a system face and still do; nothing regressed.

   NOTE: Newsreader-Italic is NEW. The old Google request asked for weights
   400;500;600 and no italic at all, so every italic on the route — the hero
   tagline, the device caption, the FAQ ledes — was a browser-synthesised
   oblique. They are now a real drawn italic.

   Licences ship alongside in assets/fonts/ (SIL OFL requires it).            */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/engram/assets/fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/engram/assets/fonts/newsreader-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/engram/assets/fonts/newsreader-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/engram/assets/fonts/newsreader-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/engram/assets/fonts/hanken-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/engram/assets/fonts/hanken-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/engram/assets/fonts/hanken-600.woff2') format('woff2');
}

:root {
  /* Palette re-synced to the app's EngramTokens (app/lib/core/theme/tokens.dart)
     so the site and the product are literally one design.
       --bg, --accent      already matched exactly.
       --surface           was #1F1A14, now the app's #211D18.
       --accent-soft       adopted from the app (segmented-control track).
     DELIBERATE DIVERGENCE: --ink and --muted stay brighter than the app's
     #ECE6DC / #9A9082. This is a marketing page read on a phone in daylight,
     where the app's muted (5.90:1) costs real legibility for no brand gain;
     ours is 8.44:1. Do not "fix" this to match the app. */
  --bg: #16130F;
  --bg-deep: #120D08;
  --lamp: #3A2C1E;
  --surface: #211D18;
  --accent-soft: #2C2519;
  --ink: #F4ECDD;
  --muted: #B8AE9C;
  --accent: #E2964A;

  /* Two border weights, deliberately.
     --hairline (1.35:1) is decoration: dividers, badges, the mark's edge. It is
     below WCAG 1.4.11 and that is fine, because nothing depends on seeing it.
     --edge (3.06:1) is for anything that IS a control or a container the user
     must perceive as bounded — ghost buttons, cards, tiers, accordion rows,
     section bands. The quiet aesthetic is intentional; this is the narrow set
     of places where quiet was costing the user something. */
  --hairline: rgba(244, 236, 221, 0.12);
  --edge: rgba(244, 236, 221, 0.34);

  /* A second register for irreversible actions, so a delete warning cannot look
     like an ordinary amber aside. */
  --danger: #E8896B;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Reset & base ------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* The landing page runs tighter — bigger type, more display setting. */
body.landing { line-height: 1.6; }

::selection { background: rgba(226, 150, 74, 0.32); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
code { font-family: Consolas, 'Cascadia Mono', Menlo, monospace; font-size: 0.88em; color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }

/* ---- Links --------------------------------------------------------------
   Inline links are underlined. Accent-on-muted is only 1.10:1 in luminance, so
   colour alone cannot carry link identity — the underline does, and the colour
   becomes reinforcement. The underline is dialled back to 45% accent so it
   reads as a fine rule rather than a browser default.
   Chrome that already supplies its own affordance (nav, footer, buttons, the
   brand lockup, jump links) opts out below.                                 */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(226, 150, 74, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: var(--accent); opacity: 0.85; }

nav a,
footer a,
.brand a,
.btn,
.dl-links a,
.pagenav a,
.ver-line a { text-decoration: none; }

/* ---- Brand lockup (every page) ------------------------------------------ */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.mark {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--lamp), var(--bg-deep));
  border-radius: 8px; border: 1px solid var(--hairline);
}
.brand a { color: var(--ink); font-family: var(--serif); font-weight: 500; }
.rule {
  width: 3.5rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 10px;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--accent); color: var(--bg-deep); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(226, 150, 74, 0.25); opacity: 1; }
/* --edge, not --hairline: with no fill, the border is the ONLY thing saying
   "this is a control". At 1.35:1 it wasn't saying it. */
.btn-ghost { border: 1px solid var(--edge); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); opacity: 1; }

/* ---- Callouts (privacy, delete-data) ------------------------------------ */
.callout {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; color: var(--ink);
}
/* Irreversible actions read in a different register from marketing asides. */
.callout.danger { border-left-color: var(--danger); }

/* ---- Document pages (faq, privacy, delete-data, releases) ---------------- */
.doc .wrap { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.6rem 4rem; }
.doc .brand { margin-bottom: 2.5rem; }
.doc .mark { font-size: 1.4rem; width: 1.8rem; height: 1.8rem; }
.doc .brand a { font-size: 1.25rem; }
.doc h1 { font-family: var(--serif); font-weight: 600; font-size: 2.3rem; letter-spacing: -0.01em; }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 2.4rem 0 0.7rem; }
.doc .eff { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; }
.doc .rule { margin: 1.4rem 0 2rem; }
.doc .lede { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-bottom: 1.4rem; }
.doc p { color: var(--muted); margin-bottom: 1rem; }
.doc ul, .doc ol { color: var(--muted); margin: 0 0 1rem 1.4rem; }
.doc li { margin-bottom: 0.5rem; }
.doc footer {
  border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 1.5rem;
  color: var(--muted); font-size: 0.85rem;
}

/* ---- Motion ------------------------------------------------------------- */
/* Was present on 2 of 5 pages before the extraction; now it covers all five. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}