/* ==========================================================================
   Ahaan Singhania — brand stylesheet
   Locked 2026-08-25. Palette and type both verified against the artwork,
   not derived. Full reasoning in ../decks/BRAND-SPEC.md.

   Use:  <link rel="stylesheet" href="brand.css">
   Fonts load from ./fonts/ — keep that folder next to this file.
   For a self-contained single file, use brand-inline.css instead.

   The faces below are STATIC INSTANCES, not the variable fonts. That is
   deliberate: Chromium cannot embed a variable font when printing to PDF —
   it drops it silently and falls back to Segoe UI, even when the font is
   inlined as a data URI. Static cuts embed correctly and give real vector
   text. Regenerate them with make-static.py if you ever need another weight.
   ========================================================================== */

@font-face{font-family:"Unbounded";font-style:normal;font-weight:200;font-display:block;src:url("fonts/Unbounded-200.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300;font-display:block;src:url("fonts/Unbounded-300.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:block;src:url("fonts/Unbounded-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:block;src:url("fonts/Inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:block;src:url("fonts/Inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:block;src:url("fonts/Inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:block;src:url("fonts/Inter-700.woff2") format("woff2")}

:root{
  /* ---- ground ------------------------------------------------------ */
  --ink:#0b0d10;          /* every dark surface */
  --card:#10141a;         /* cards, panels */
  --raised:#171c23;       /* one step up */
  --paper:#eceef1;        /* light ground, and text on dark */

  /* ---- red ramp — all pinned to hue 358°, matching the wordmark ----- */
  --maroon:#570003;       /* 357.9° — gradient anchors only */
  --signal:#d10007;       /* 358.0° — THE brand red. Floods, rails, rules */
  --hot:#f50008;          /* 358.0° — display type, fills, arrows (4.5:1 on ink) */
  --lite:#ff6b7c;         /* 353.1° — small type on dark ONLY (7.1:1 on ink) */

  /* ---- neutrals ----------------------------------------------------- */
  --slate:#4c535b;        /* dividers */
  --grey:#c5c7cc;         /* body copy on dark (11.5:1) */
  --grey2:#8d939c;        /* secondary copy, repeated UI labels */

  /* ---- type --------------------------------------------------------- */
  --display:"Unbounded","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;

  /* ---- motif -------------------------------------------------------- */
  --cut:20px;             /* the chamfer, taken from the A */
  --measure:74ch;         /* running text never wider than this */
}

/* ==========================================================================
   THE THREE RULES THAT MATTER

   1. WEIGHT CEILING. Unbounded never goes above 400. The wordmark is a thin
      monoline; heavier weights read industrial and stop looking like the
      brand. 200 for large display, 300 for headings and UI, 400 for small
      uppercase labels. That is the whole range.

   2. TRACKING IS NOT OPTIONAL. Unbounded runs wide. Large display needs
      -.05em, headings -.045em, or it sprawls. Small uppercase labels go the
      other way, +.2em to +.26em. Tight on the big, open on the small — that
      opposition is what reads as elegant rather than merely thin.

   3. RED LITE IS FOR ACCENTS, NOT LABELS. sRGB cannot make a light,
      saturated red, so --lite is necessarily low-saturation. Put it on every
      repeated label and the whole page goes pink. Repeated UI labels take
      --grey2; --lite is for genuine emphasis.
   ========================================================================== */

body{
  margin:0;
  background:var(--ink);
  color:var(--grey);
  font-family:var(--body);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.eyebrow{font-family:var(--display);color:var(--paper);margin:0}
h1{font-size:clamp(2.05rem,5.4vw,3.35rem);font-weight:200;letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
h2{font-size:1.24rem;font-weight:300;letter-spacing:-.045em;text-wrap:balance}
h3{font-size:1.06rem;font-weight:300;letter-spacing:-.045em;text-wrap:balance}
h4{font-size:.62rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--lite)}
.eyebrow{font-size:.6rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--lite)}

p{margin:0;max-width:var(--measure)}
strong{color:var(--paper);font-weight:600}
a{color:var(--lite)}
a:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* ---- motif 1: the striation + red bloom.  Cover and closer ONLY.
   It loses all its impact if it appears on every surface. ---------------- */
.striate{
  position:absolute;inset:0;pointer-events:none;opacity:.62;
  background:
    radial-gradient(58% 130% at 22% 52%, rgba(245,0,8,.5), transparent 62%),
    radial-gradient(46% 110% at 76% 30%, rgba(209,0,7,.34), transparent 66%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 2px, rgba(0,0,0,0) 2px 5px);
}

/* ---- motif 2: the angular cut.  Cards and panels, never text. --------- */
.cut{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.card{
  background:var(--card);border:1px solid #1c222b;padding:24px 26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.card--rail{position:relative}
.card--rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal)}

/* ---- motif 3: the triangle tick, the same 45° cut as a list marker ---- */
.tick{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.tick li{position:relative;padding-left:20px;max-width:var(--measure)}
.tick li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
  background:var(--hot);clip-path:polygon(0 0,100% 0,0 100%);
}

/* ---- data ------------------------------------------------------------- */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid #1c222b;vertical-align:baseline}
th{font-family:var(--display);font-size:.6rem;font-weight:400;letter-spacing:.2em;
   text-transform:uppercase;color:var(--grey2);border-bottom-color:#2a323d}
.num{font-variant-numeric:tabular-nums}

/* ---- print: flips to the Paper ground, keeps the red -------------------
   PDF export works normally because the faces above are static instances.
   Chromium's page.pdf() embeds them as real vector text. It would silently
   drop the VARIABLE originals. See BRAND-SPEC.md § Build. ---------------- */
@page{size:A4 portrait;margin:11mm}
@media print{
  :root{
    --ink:#fff;--card:#fff;--raised:#fff;--paper:#0b0d10;
    --grey:#22262c;--grey2:#5c626b;--slate:#8a9098;
    --lite:#8e0d18;--hot:#c20006;--signal:#d10007;
  }
  body{font-size:9.6pt;line-height:1.4}
  .striate{display:none}
}