/* ============================================================================
   CHIPREADY — Documents (letter · pitch deck · brief)
   Reuses the Silicon Foundry system. Slides use container-query units (cqw/cqh)
   so they render identically on screen and when printed to PDF.
   ========================================================================= */

:root {
  --void: #08090B; --void-2: #0B0D10; --surface: #101317; --surface-2: #161A20;
  --text: #ECEEF1; --text-dim: #9BA2AD; --text-faint: #5A626D; --text-ghost: #3A4049;
  --line: rgba(236,238,241,0.085); --line-strong: rgba(236,238,241,0.17);
  --ember: #FF6A2C; --ember-bright: #FF8A4C; --ember-deep: #C8481A;
  --f-sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
svg { display: block; }
b, strong { font-weight: 700; color: var(--text); }
em { font-style: normal; color: var(--ember); }

body {
  background: var(--void); color: var(--text); font-family: var(--f-sans);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.ember { color: var(--ember); }
.mono { font-family: var(--f-mono); }

/* make backgrounds + ink survive the PDF print path */
body, .slide, .page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* the engineered dot texture, as a static gradient (no canvas needed) */
.tex { background-image: radial-gradient(circle, rgba(255,106,44,0.13) 1px, transparent 1.4px); background-size: 34px 34px; }

/* ChipReady glyph ---------------------------------------------------------- */
.glyph { width: 1.7em; height: 1.7em; flex: none; }
.glyph .body { fill: none; stroke: var(--text); stroke-width: 1.5; }
.glyph .core { fill: var(--ember); }
.glyph .pin { stroke: var(--text-faint); stroke-width: 1.4; }
.wordmark { font-family: var(--f-sans); font-weight: 800; font-size: 1.05em; letter-spacing: -0.01em; }
.wordmark b { font-weight: 800; color: var(--ember); }

/* ============================================================================
   PITCH DECK — 16:9 slides sized in cqw/cqh
   ========================================================================= */
.deck { background: #000; }
.slide {
  position: relative; container-type: size; overflow: hidden;
  background: radial-gradient(120% 90% at 18% 0%, #14110d 0%, var(--void) 46%, #050608 100%);
  color: var(--text); display: flex; flex-direction: column;
}
.slide::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.6;
  background-image: radial-gradient(circle, rgba(255,106,44,0.12) 1px, transparent 1.5px); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(125% 95% at 16% -5%, #000 0%, transparent 58%);
  mask-image: radial-gradient(125% 95% at 16% -5%, #000 0%, transparent 58%); }
.slide .edge { position: absolute; inset: 3.2cqh 3cqw; border: 1px solid var(--line); pointer-events: none; z-index: 1; }
.slide .chrome { position: absolute; left: 3cqw; right: 3cqw; display: flex; justify-content: space-between;
  align-items: center; font-family: var(--f-mono); font-size: 1.15cqh; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-faint); }
.slide .chrome.top { top: 4.6cqh; }
.slide .chrome.bot { bottom: 4.6cqh; }
.slide .chrome .dot { color: var(--ember); }
.slide .body { flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 13cqh 9cqw 13cqh; gap: 3.2cqh; position: relative; z-index: 2; }

.kicker { font-family: var(--f-mono); font-size: 1.5cqh; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ember); display: flex; align-items: center; gap: 1.2cqw; }
.kicker .n { color: var(--text-faint); }
.slide h1 { font-family: var(--f-sans); font-weight: 800; font-size: 8.4cqh; line-height: 0.98;
  letter-spacing: -0.025em; max-width: 80%; }
.slide h1.sm { font-size: 6.6cqh; }
.slide h1.lg { font-size: 11cqh; max-width: 92%; }
.slide .lede { font-size: 2.7cqh; line-height: 1.45; color: var(--text-dim); max-width: 62%; font-weight: 400; }
.slide .lede b { color: var(--text); font-weight: 600; }

/* stat row */
.s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line);
  margin-top: 1cqh; }
.s-stats .st { padding: 3.4cqh 2.4cqw; border-right: 1px solid var(--line); }
.s-stats .st:last-child { border-right: 0; }
.s-stats .st .big { font-family: var(--f-sans); font-weight: 800; font-size: 6.6cqh; line-height: 1;
  letter-spacing: -0.03em; }
.s-stats .st .big .u { color: var(--ember); }
.s-stats .st .lbl { font-family: var(--f-mono); font-size: 1.25cqh; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 1.4cqh; line-height: 1.4; }

/* layered list (what we build) */
.layers { display: grid; gap: 1.6cqh; max-width: 86%; }
.layer { display: grid; grid-template-columns: 4.4cqw 1fr; gap: 2.2cqw; align-items: start;
  border-top: 1px solid var(--line); padding-top: 1.8cqh; }
.layer .ix { font-family: var(--f-mono); font-size: 2cqh; color: var(--ember); padding-top: 0.3cqh; }
.layer h3 { font-size: 2.9cqh; font-weight: 700; letter-spacing: -0.01em; }
.layer p { font-size: 1.95cqh; color: var(--text-dim); line-height: 1.4; margin-top: 0.5cqh; }

/* proof chips */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3cqh 3cqw; max-width: 88%; margin-top: 1cqh; }
.proof .pf { display: grid; grid-template-columns: auto 1fr; gap: 1.4cqw; font-size: 1.95cqh;
  color: var(--text-dim); line-height: 1.35; align-items: baseline; }
.proof .pf::before { content: "▟"; color: var(--ember); font-size: 1.5cqh; }
.proof .pf b { color: var(--text); }

/* ascent ladder */
.ladder { display: grid; gap: 0.7cqh; max-width: 70%; margin-top: 1cqh; }
.rung { display: grid; grid-template-columns: 5cqw 1fr; align-items: center; gap: 2cqw;
  border-left: 2px solid var(--line); padding: 0.5cqh 0 0.5cqh 2.4cqw; }
.rung .lvl { font-family: var(--f-mono); font-size: 1.4cqh; color: var(--text-faint); }
.rung .nm { font-size: 2.3cqh; font-weight: 600; }
.rung.on { border-left-color: var(--ember); }
.rung.on .nm { color: var(--ember); }

.s-foot { font-family: var(--f-mono); font-size: 1.5cqh; letter-spacing: 0.04em; color: var(--text-faint);
  border-top: 1px solid var(--line); padding-top: 2cqh; margin-top: 1cqh; }
.s-foot b { color: var(--ember); font-weight: 500; }

/* title + closing slides */
.slide.cover .body, .slide.close .body { justify-content: center; align-items: flex-start; gap: 4cqh; }
.cover .lockup, .close .lockup { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.4cqh; }
.cover h1 { font-size: 11.5cqh; line-height: 0.96; }
.cover .sub { font-family: var(--f-serif); font-style: italic; font-size: 3cqh; color: var(--text-dim); max-width: 70%; }

/* on screen: one slide per viewport, snap-scroll */
@media screen {
  .deck { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
  .slide { width: min(100vw, 177.7vh); height: min(56.25vw, 100vh); margin: 0 auto;
    scroll-snap-align: center; border-bottom: 1px solid #000; }
  .hint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-faint); background: rgba(8,9,11,0.7); padding: 7px 14px; border: 1px solid var(--line);
    border-radius: 100px; }
}
@media print { .hint { display: none; } }

/* ============================================================================
   LETTER + BRIEF — portrait document pages
   ========================================================================= */
.page { width: 8.5in; min-height: 11in; margin: 0 auto; background: var(--void); position: relative;
  padding: 0.85in 0.95in 0.8in; display: flex; flex-direction: column; }
@media screen { .page { margin: 24px auto; min-height: auto; box-shadow: 0 30px 90px rgba(0,0,0,0.6); outline: 1px solid var(--line); } }

.doc-head { display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 0.28in; margin-bottom: 0.4in; }
.doc-head .lockup { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.doc-head .tag { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); text-align: right; line-height: 1.7; }
.doc-head .tag .dot { color: var(--ember); }

/* letter body */
.letter-meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint);
  text-transform: uppercase; margin-bottom: 0.32in; }
.letter-body { font-size: 11.3px; line-height: 1.72; color: #C9CDD4; }
.letter-body p { margin-bottom: 0.14in; }
.letter-body .recip { color: var(--text); margin-bottom: 0.3in; }
.letter-body .recip b { display: block; font-size: 13px; }
.letter-body h4 { font-family: var(--f-sans); font-weight: 700; color: var(--text); font-size: 12px;
  letter-spacing: 0.01em; margin: 0.22in 0 0.06in; }
.letter-body .sign { margin-top: 0.3in; color: var(--text); }
.letter-body .sign b { font-size: 13px; }
.letter-body .lead-in { font-size: 12.5px; color: var(--text); }

/* brief layout */
.brief .b-hero h1 { font-family: var(--f-sans); font-weight: 800; font-size: 30px; line-height: 1.02;
  letter-spacing: -0.02em; margin-bottom: 9px; }
.brief .b-hero .sub { font-size: 12px; color: var(--text-dim); max-width: 92%; line-height: 1.55; }
.brief .b-stats { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line);
  margin: 0.3in 0; }
.brief .b-stats .st { padding: 13px 14px; border-right: 1px solid var(--line); }
.brief .b-stats .st:last-child { border-right: 0; }
.brief .b-stats .big { font-weight: 800; font-size: 23px; letter-spacing: -0.02em; line-height: 1; }
.brief .b-stats .big .u { color: var(--ember); }
.brief .b-stats .lbl { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 7px; line-height: 1.4; }
.brief .cols { columns: 2; column-gap: 0.34in; }
.brief h3 { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); margin: 0 0 6px; break-after: avoid; }
.brief .blk { break-inside: avoid; margin-bottom: 0.2in; }
.brief .blk p { font-size: 10.5px; line-height: 1.6; color: #C2C6CE; }
.brief .blk p + p { margin-top: 6px; }
.brief ul.tick { margin-top: 4px; }
.brief ul.tick li { font-size: 10px; line-height: 1.5; color: #C2C6CE; padding-left: 15px; position: relative;
  margin-bottom: 4px; list-style: none; }
.brief ul.tick li::before { content: "▟"; position: absolute; left: 0; color: var(--ember); font-size: 8px; top: 1px; }
.brief ul.tick li b { color: var(--text); }

/* brief — platform stack (the 5 layers) */
.brief .b-platform { margin: 0.22in 0 0.26in; break-inside: avoid; }
.brief .stack { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 9px 0; }
.brief .ly { background: var(--void-2); padding: 7px 12px; display: grid; grid-template-columns: 20px 1.05fr 2.2fr; gap: 11px; align-items: baseline; }
.brief .ly .n { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.08em; color: var(--accent, #FF6A2C); }
.brief .ly b { font-size: 10px; color: var(--text); letter-spacing: -0.01em; }
.brief .ly span { font-size: 8.8px; line-height: 1.4; color: var(--text-dim); }
.brief .plat-note { font-size: 9.5px; line-height: 1.55; color: var(--text-dim); margin-top: 8px; }
.brief .plat-note b { color: var(--text); }

.ask-band { border: 1px solid var(--line-strong); background:
  linear-gradient(120deg, rgba(255,106,44,0.08), transparent 60%); padding: 16px 18px; margin: 0.1in 0 0.26in;
  break-inside: avoid; }
.ask-band .k { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember); }
.ask-band .amt { font-weight: 800; font-size: 27px; letter-spacing: -0.02em; margin: 5px 0 7px; }
.ask-band p { font-size: 10px; line-height: 1.55; color: var(--text-dim); }

.doc-foot { margin-top: auto; padding-top: 0.22in; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono);
  font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-faint); }
.doc-foot a { color: var(--ember); }
.doc-foot .cur { display: inline-block; width: 0.5em; height: 0.95em; background: var(--ember);
  margin-left: 0.4em; vertical-align: -0.12em; }

/* ============================================================================
   PRINT — one slide per page (exact 16:9); clean document pages
   ========================================================================= */
@media print {
  html, body { background: var(--void); }
  .deck { height: auto; overflow: visible; background: var(--void); }
  .slide { width: 13.333in; height: 7.5in; margin: 0; page-break-after: always; break-after: page; }
  .slide:last-child { page-break-after: avoid; break-after: auto; }
  .page { margin: 0; box-shadow: none; outline: none; }
  .hint { display: none; }
}