/* ==========================================================================
   AFTERGLOW TRACE — shared stylesheet
   "Editorial newspaper" design system. Pure typography, zero dependencies.
   Shared by index.html (landing) and deck/index.html (concept deck at /deck).
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --body:#3A3A3A;
  --muted:#6E6E6E;
  --hairline:#E2E2E2;
  --red:#C2160F;

  /* One family, two voices. Weight (not typeface) carries the display look. */
  --font-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --maxw:1120px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;              /* body never scrolls horizontally */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; }

/* Sharp corners everywhere — zero border-radius across the whole site */
a,button,input,.btn,.chip,.cell,.slide,table,td,th{ border-radius:0; }

/* ---- Layout -------------------------------------------------------------- */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.band{ padding:96px 0; }
#top{ padding-top:110px; padding-bottom:96px; }   /* hero breathes more */
@media (max-width:720px){
  .band{ padding:64px 0; }
  #top{ padding-top:76px; padding-bottom:56px; }
}

/* ---- Typography helpers -------------------------------------------------- */
.red{ color:var(--red); }

.mono{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  line-height:1.5;
}
.mono--red{ color:var(--red); }
.text-right{ text-align:right; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.03;
  letter-spacing:-0.5px;
  color:var(--ink);
  margin:0;
}

p{ margin:0 0 1em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

.hero-headline{ font-size:clamp(40px,6vw,72px); line-height:1.04; letter-spacing:-0.01em; }
/* Section headings: sentence case, softer weight — a heading voice, not a poster */
.band-headline{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.1;
  letter-spacing:-0.01em;
  text-transform:none;
  font-weight:800;
  margin:16px 0 24px;
}
.slide-headline{ font-size:clamp(22px,3.2vw,38px); letter-spacing:-0.6px; }

/* Stacked display lines — two-line headlines instead of period-joined sentences */
.hl{ display:block; }

.section-label{
  font-family:var(--font-body);
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--red);
  margin:0 0 16px;
}

/* Hero eyebrow — instant "who this is for". Reads as a real line, not dust. */
.eyebrow{
  font-family:var(--font-body);
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--body);
  max-width:none;            /* one line on desktop — never break "…studio legal" */
  margin:0 0 24px;
}

/* Hero intro paragraph */
.lead{
  font-size:19px;
  line-height:1.65;
  max-width:58ch;
  color:var(--body);
  margin:24px 0 0;
}
.lead--tight{ margin-top:14px; }
/* Hero input list — red square markers, print-flavored (matches deck pipeline nodes) */
.lead-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  max-width:58ch;
}
.lead-list li{
  position:relative;
  font-size:19px;
  line-height:1.5;
  color:var(--body);
  padding-left:22px;
  margin-bottom:8px;
}
.lead-list li:last-child{ margin-bottom:0; }
.lead-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:7px;
  height:7px;
  background:var(--red);
}

/* ---- Masthead ------------------------------------------------------------ */
.masthead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px 24px;
  flex-wrap:wrap;
  padding:22px 0 14px;
  border-bottom:3px solid var(--ink);
}
.masthead .mono{ margin:0; }

/* Deck masthead — CONFIDENTIAL stamp left, location right (mirrors the site) */
.masthead--deck{ justify-content:space-between; }

/* Right-side location stamp — SAME size/weight/colour as the hero eyebrow
   ("Built for productions…") so the masthead reads as one consistent system. */
.loc-stamp{
  font-family:var(--font-body);
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--body);
  white-space:nowrap;
}

/* ---- Brandmark (masthead logo) ------------------------------------------- */
/* One-line wordmark: AFTERGLOW (sunset colour blocks) + TRACE — one font, one
   size. The sunset goes from a warm orange sun (A) to near-dark violet night
   (W); blocks are light backings so the darkening letters stay legible.
   Warm throughout — no blue. */
.brandmark{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:9px;
  line-height:1;
  text-decoration:none;
}
.bm-word{ display:inline-flex; }
.bmc{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  line-height:1;
  padding:3px 1.5px;
  min-width:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bm-trace{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.12em;
  padding-left:.12em;
  color:var(--body);
}
.bm-a{ background:#F7DEB8; color:#B85410; }
.bm-f{ background:#F4D2AC; color:#B14A12; }
.bm-t{ background:#F0C6A6; color:#B23F1C; }
.bm-e{ background:#ECB9A4; color:#BC4030; }
.bm-r{ background:#E6AEB2; color:#A72F4E; }
.bm-g{ background:#DBA6C0; color:#872A63; }
.bm-l{ background:#CDA4CB; color:#632676; }
.bm-o{ background:#C0A2CE; color:#431E5E; }
.bm-w{ background:#B49CC9; color:#2A1540; }

/* Hero-size brandmark — the logo as the deck title slide's headline */
.brandmark--hero{ gap:16px; }
.brandmark--hero .bmc{ font-size:clamp(40px,8vw,84px); padding:8px 5px; min-width:.6em; }
.brandmark--hero .bm-trace{ font-size:clamp(40px,8vw,84px); }

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  letter-spacing:0;
  padding:16px 30px;
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background .15s, color .15s, border-color .15s;
}
.btn:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* Secondary action = plain underlined text link, no box */
.btn--ghost{
  display:inline-block;
  background:transparent;
  color:var(--ink);
  border:0;
  padding:16px 2px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.btn--ghost:hover{ background:transparent; color:var(--red); border-color:transparent; }

.btn-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }

/* ---- Chips --------------------------------------------------------------- */
.chip{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
}
.chip--red{ color:var(--red); }

.chip-row{ display:flex; gap:8px 20px; flex-wrap:wrap; }

/* ---- Boxed grids — hairline-topped cells, separated by generous gaps ----- */
.boxgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:44px 40px;
  margin-top:24px;
}
.boxgrid > .cell{
  border-top:1px solid var(--hairline);
  padding:20px 0 0;
}
.cell-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  text-transform:none;
  letter-spacing:0;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 8px;
}
.cell-label{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--red);
  margin:0 0 10px;
}
.cell-body{ font-size:16px; line-height:1.6; max-width:none; }
.cell-body-sm{ font-size:16px; line-height:1.6; max-width:none; }

/* Four-knocks ask line — sentence case, readable */
.ask{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.4;
  text-transform:none;
  color:var(--ink);
  margin:14px 0 10px;
  max-width:none;
}

/* Flow steps (asset -> audit) */
.step-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
  color:var(--red);
  line-height:1;
}
.step-name{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
  margin:8px 0 6px;
}
.step-body{ font-size:16px; line-height:1.6; max-width:none; }

/* Standards strip (label voice, under a grid) */
.strip{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  line-height:1.9;
  margin-top:24px;
}
/* Footer law-dates line — full container width (the fine-print drumbeat) */
.strip--wide{ max-width:none; }

/* Footer legal framework — the law dates as a quiet column, no links */
.legal-framework{ margin-top:28px; }
.legal-framework__label{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--red);
  margin:0 0 4px;
}
.legal-list{ list-style:none; margin:0; padding:0; max-width:none; }
.legal-list li{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  line-height:1.5;
  padding:9px 0;
  border-top:1px solid var(--hairline);
}
/* Each law links to its original document — plain by default, lights up red on hover */
.legal-list a{ color:inherit; text-decoration:none; transition:color .12s; }
.legal-list a:hover,.legal-list a:focus-visible{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }

/* Closing / note lines */
.closing-line{
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.5;
  color:var(--ink);
  margin-top:32px;
  max-width:62ch;
}
.slide-note{
  font-size:16px;
  line-height:1.6;
  color:var(--body);
  margin-top:20px;
  max-width:760px;
}
.slide-sub{
  font-size:16px;
  line-height:1.6;
  color:var(--body);
  margin:0 0 20px;
  max-width:640px;
}
/* Quiet source citations (deck) — fine-print voice, never louder than notes */
.src-note{
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin-top:14px;
  max-width:760px;
}
.src-note a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.src-note a:hover{ color:var(--red); }

/* ---- Report table -------------------------------------------------------- */
.table-wrap{ overflow-x:auto; }
.rpt{
  border-collapse:collapse;
  width:100%;
  min-width:720px;
}
.rpt th{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  font-weight:600;
  padding:0 16px 10px 0;
  border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}
.rpt td{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--body);
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--hairline);
  vertical-align:top;
}
.rpt tr:last-child td{ border-bottom:0; }
/* td-qualified: colors must out-rank the `.rpt td` base rule or they silently gray out */
.rpt td.status-flag{ color:var(--red); font-weight:700; }
.rpt td.status-ok{ color:var(--ink); font-weight:700; }
.rpt td.reviewer-open{ color:var(--muted); }

.table-caption-top{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  text-align:left;
  margin:0 0 14px;
}
.table-caption-bottom{
  font-size:16px;
  line-height:1.6;
  color:var(--body);
  margin-top:16px;
  max-width:62ch;
}
/* Report totals line — bigger than a caption, flagged count in red */
.table-summary{
  font-size:19px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
  margin:18px 0 0;
}

/* ---- Row list (dividers) ------------------------------------------------- */
.rowlist .row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
}
.rowlist .row:first-child{ padding-top:4px; }
.rowlist .row:last-child{ border-bottom:0; }
.row-date{
  flex:0 0 130px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  line-height:1.6;
}
.row-date--red{ color:var(--red); }
.row-text{ flex:1 1 260px; font-size:16px; line-height:1.6; max-width:none; }

/* Numbered rows (anatomy of a frame) */
.numrow{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
}
.numrow:last-child{ border-bottom:0; }
.numrow .num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
  color:var(--red);
  line-height:1;
  flex:0 0 auto;
}
.numrow .num-text{ flex:1 1 220px; font-size:16px; line-height:1.5; max-width:none; }
.numrow .chip{ margin-left:auto; }

/* Step flow (the cost) — hairline cells, sequence carried by the copy */
.arrowflow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:44px 40px;
}
.arrowflow .step-cell{
  border-top:1px solid var(--hairline);
  padding:20px 0 0;
}
.arrowflow .step-cell--red .cell-title{ color:var(--red); }

/* ---- Slides (deck) — rev-2: hairline-topped sections, no boxes ----------- */
.deck{ padding:40px 0 8px; }

.slide{
  border-top:1px solid var(--hairline);
  padding:56px 0 0;
  margin-bottom:88px;
}
.slide:first-child{ border-top:0; padding-top:24px; }
.slide-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--red);
  margin:0 0 18px;
}

/* Poster wall (THE RECEIPTS) — typographic one-sheets, no artwork */
.poster-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  margin-top:28px;
}
.poster{ margin:0; }
.poster-art{
  aspect-ratio:2/3;
  border:1px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
}
.poster-title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:-0.5px;
  color:var(--ink);
  font-size:clamp(20px,2.4vw,30px);
}
.poster figcaption{ padding-top:14px; }
.poster figcaption .cell-body-sm{ margin-top:8px; }

/* Pipeline (HOW IT WORKS) — one continuous line, red station nodes */
.pipeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px 0;
  margin-top:28px;
}
.pipeline .pipe-step{
  position:relative;
  border-top:1px solid var(--hairline);
  padding:24px 32px 0 0;
}
.pipeline .pipe-step::before{
  content:"";
  position:absolute;
  top:-5px;
  left:0;
  width:9px;
  height:9px;
  background:var(--red);
}

.giant{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.94;
  letter-spacing:-1.5px;
  color:var(--ink);
  font-size:clamp(44px,11vw,120px);
  margin:14px 0 0;
}
.subline{
  font-family:var(--font-display);
  font-weight:900;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:-0.3px;
  line-height:1.15;
  color:var(--ink);
  margin:16px 0 16px;
  max-width:640px;
}
.cell-name{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  text-transform:none;
  letter-spacing:0;
  line-height:1.3;
  color:var(--ink);
  margin:10px 0 6px;
}

/* Deck grids where a label/head wraps to two lines in some cells: reserve two
   lines so all bodies keep a shared baseline (opt-in per grid, so grids with
   only single-line heads aren't given a needless gap). */
.boxgrid--align .cell-label{ min-height:3em; }
.boxgrid--align .cell-title{ min-height:2.6em; }

/* ---- Investor deck: market-size stat numbers (TAM / SAM / SOM) ------------ */
.stat-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(32px,4.4vw,54px);
  line-height:1;
  letter-spacing:-1px;
  color:var(--ink);
  margin:0 0 12px;
}
.stat-num--red{ color:var(--red); }

/* Placeholder slots for what Vitaly must supply (names, bios, raise amount).
   Deliberately red so they can't be handed to a VC unfilled. */
.slot{ color:var(--red); font-weight:700; }

@media (max-width:640px){
  .slide{ padding-top:40px; margin-bottom:64px; }
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--hairline);
  margin-top:16px;
  padding:24px 0 40px;
}
.foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px 24px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.foot-left{ display:flex; gap:12px 20px; flex-wrap:wrap; align-items:center; }
.foot-row a{ color:var(--muted); text-decoration:none; }
.foot-row a:hover{ color:var(--red); }
.foot-link{ color:var(--muted); }

/* ---- Generic link default ------------------------------------------------ */
a{ color:var(--red); }

/* Hero caption */
.hero-caption{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  text-align:left;
  margin-top:36px;
}