/* ============================================================
   SPECTRA — INSTITUTIONAL BRIEFING
   A print-ready market intelligence document.
   Restraint · hierarchy · institutional credibility.
   ============================================================ */

:root, [data-theme="light"] {
  --paper:    #F4EFE5;
  --paper-2:  #EDE6D7;
  --card:     #FBF8F1;
  --card-2:   #F0E9DA;
  --ink:      #1A1714;
  --ink-2:    #3A3530;
  --mute:     #6B655B;
  --mute-2:   #8A8479;
  --faint:    #B3AC9F;
  --rule:     rgba(26,23,20,0.14);
  --rule-2:   rgba(26,23,20,0.24);
  --rule-soft:rgba(26,23,20,0.07);
  --gold:     #9C7B36;
  --gold-2:   #B69149;
  --gold-soft:rgba(156,123,54,0.10);
  --green:    #3E7D52;
  --green-soft:rgba(62,125,82,0.12);
  --amber:    #B07A2E;
  --amber-soft:rgba(176,122,46,0.12);
  --ember:    #B23B1F;
  --ember-soft:rgba(178,59,31,0.10);
  --blue:     #3E6386;
  --grain-op: 0.10;
}
[data-theme="dark"] {
  --paper:    #0B0A09;
  --paper-2:  #121110;
  --card:     #16140F;
  --card-2:   #1D1A15;
  --ink:      #F4EFE5;
  --ink-2:    #DCD5C7;
  --mute:     #948D80;
  --mute-2:   #6B645A;
  --faint:    #4A453D;
  --rule:     #29251F;
  --rule-2:   #3A352F;
  --rule-soft:rgba(244,239,229,0.06);
  --gold:     #C9A961;
  --gold-2:   #E0C690;
  --gold-soft:rgba(201,169,97,0.12);
  --green:    #82C18A;
  --green-soft:rgba(130,193,138,0.12);
  --amber:    #D6A24B;
  --amber-soft:rgba(214,162,75,0.12);
  --ember:    #D9663F;
  --ember-soft:rgba(217,102,63,0.12);
  --blue:     #86A9CC;
  --grain-op: 0.5;
}

:root {
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --docw: 920px;
}

* , *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  font-size: 16px; line-height: 1.6; transition: background .4s, color .4s;
  font-feature-settings: "ss01" 1, "tnum" 1;
}
::selection { background: var(--gold); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font-family:inherit; cursor:pointer; }
canvas, svg { display:block; }

body::after {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.46 0 0 0 0 0.4 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:var(--grain-op); mix-blend-mode:multiply;
}
[data-theme="dark"] body::after { mix-blend-mode:overlay; }

.doc { max-width: var(--docw); margin: 0 auto; padding: 0 clamp(20px,5vw,40px); position:relative; z-index:2; }

/* ---------- floating controls (screen only) ---------- */
.toolbar { position:fixed; top:18px; right:18px; z-index:40; display:flex; gap:10px; }
.tb-btn {
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:20px;
  border:1px solid var(--rule-2); background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(12px); color:var(--ink); font-size:13px; font-weight:500; transition:all .2s;
}
.tb-btn:hover { border-color:var(--gold); color:var(--gold); }
.tb-btn svg { width:16px; height:16px; }
.tb-icon { width:40px; padding:0; justify-content:center; }
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; }
[data-theme="dark"] .theme-toggle .sun { display:block; } [data-theme="dark"] .theme-toggle .moon { display:none; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.mh { padding: clamp(40px,7vw,72px) 0 0; }
.mh-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:2px solid var(--ink); flex-wrap:wrap; }
.mh-brand { display:flex; align-items:baseline; gap:12px; }
.mh-brand .wm { font-family:var(--sans); font-weight:600; font-size:20px; letter-spacing:.24em; color:var(--ink); }
.mh-brand .wm .dot { color:var(--gold); }
.mh-brand .sub { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.mh-edition { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); text-align:right; }
.mh-edition b { color:var(--ink-2); font-weight:500; }
.mh-title { font-family:var(--display); font-weight:400; font-size:clamp(30px,4.6vw,52px); line-height:1.02; letter-spacing:-.025em; margin: clamp(22px,3vw,32px) 0 16px; }
.mh-title em { font-style:italic; color:var(--gold); }
.mh-meta { display:flex; gap:clamp(16px,3vw,30px); flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--mute); padding-bottom:24px; }
.mh-meta span { display:flex; align-items:center; gap:8px; }
.mh-meta b { color:var(--ink-2); font-weight:500; }
.mh-meta .pip { width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* signature sky band */
.sky-band { position:relative; height: clamp(150px,22vw,230px); border-radius:14px; overflow:hidden; margin: 8px 0 0;
  background: radial-gradient(ellipse 90% 130% at 50% 18%, #1b1812, #0a0908); border:1px solid var(--rule); }
.sky-band canvas { width:100%; height:100%; }
.sky-band .cap { position:absolute; left:0; right:0; bottom:0; padding:18px 22px 16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  background:linear-gradient(transparent, rgba(10,9,8,0.86) 70%); pointer-events:none; }
.sky-band .tagline { font-family:var(--display); font-style:italic; font-size:clamp(14px,1.6vw,18px); line-height:1.15; color:#F4EFE5; white-space:nowrap; }
.sky-band .legend { display:flex; gap:14px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#948D80; }
.sky-band .legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.sec { padding: clamp(34px,5vw,52px) 0; border-bottom:1px solid var(--rule); }
.sec-num { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.sec-num .n { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--gold); letter-spacing:.1em; }
.sec-num .t { font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.sec-num .line { flex:1; height:1px; background:var(--rule); align-self:center; }

/* chips */
.chip { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; padding:5px 11px; border-radius:6px; border:1px solid var(--rule-2); text-transform:uppercase; }
.chip .d { width:7px; height:7px; border-radius:50%; }
.chip.good { color:var(--green); background:var(--green-soft); border-color:transparent; }
.chip.warn { color:var(--amber); background:var(--amber-soft); border-color:transparent; }
.chip.risk { color:var(--ember); background:var(--ember-soft); border-color:transparent; }
.chip.gold { color:var(--gold); background:var(--gold-soft); border-color:transparent; }
.chip.neut { color:var(--mute); background:var(--rule-soft); border-color:transparent; }

/* ============================================================
   1 · EXECUTIVE SUMMARY
   ============================================================ */
.exec-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.exec-chips .ec { display:flex; flex-direction:column; gap:6px; border:1px solid var(--rule); border-radius:10px; padding:12px 16px; min-width:140px; background:var(--card); }
.exec-chips .ec .k { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); }
.exec-chips .ec .v { font-family:var(--display); font-weight:500; font-size:22px; line-height:1; }
.exec-chips .ec .v.good { color:var(--green); } .exec-chips .ec .v.warn { color:var(--amber); } .exec-chips .ec .v.gold { color:var(--gold); }
.exec-lead p { font-size:clamp(17px,1.7vw,19.5px); line-height:1.66; color:var(--ink-2); margin-bottom:16px; }
.exec-lead p:first-child { font-size:clamp(19px,2vw,23px); line-height:1.5; color:var(--ink); }
.exec-lead p:first-child::first-letter { font-family:var(--display); font-weight:500; float:left; font-size:62px; line-height:.72; padding:8px 12px 0 0; color:var(--gold); }
.exec-lead p:last-child { margin-bottom:0; }

/* ============================================================
   2 · MARKET REGIME
   ============================================================ */
.regime-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:22px; }
.gauge { border:1px solid var(--rule); border-radius:12px; padding:22px 24px; background:var(--card); }
.gauge .gh { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.gauge .gname { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); }
.gauge .gstate { font-family:var(--display); font-weight:500; font-size:22px; line-height:1; }
.gauge .gstate.good { color:var(--green); } .gauge .gstate.warn { color:var(--amber); } .gauge .gstate.gold { color:var(--gold); }
.gauge .gbar { height:6px; border-radius:999px; background:var(--paper-2); overflow:hidden; margin-bottom:12px; }
.gauge .gfill { height:100%; border-radius:999px; width:0; transition:width 1.1s var(--ease); }
.gauge .gfill.good { background:linear-gradient(90deg,var(--green),#7bbf8e); }
.gauge .gfill.warn { background:linear-gradient(90deg,var(--amber),#d6a24b); }
.gauge .gfill.gold { background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.gauge .gdetail { font-size:13px; color:var(--mute); line-height:1.5; }
.regime-note { font-size:15px; line-height:1.66; color:var(--ink-2); border-left:2px solid var(--gold); padding-left:18px; margin-bottom:14px; }
.regime-trans { font-family:var(--mono); font-size:12px; color:var(--mute); display:flex; align-items:center; gap:9px; }
.regime-trans .ok { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green-soft); }

/* ============================================================
   3 · INSTITUTIONAL THEMES
   ============================================================ */
.theme { padding:24px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr; gap:14px; }
.theme:first-child { border-top:none; padding-top:0; }
.theme-h { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.theme-h .tt { font-family:var(--display); font-weight:500; font-size:clamp(20px,2.3vw,26px); line-height:1.12; letter-spacing:-.01em; }
.theme-h .tn { font-family:var(--mono); font-size:13px; color:var(--faint); font-weight:500; }
.theme-body { font-size:16px; line-height:1.62; color:var(--ink-2); max-width:64ch; }
.theme-ev { display:flex; flex-direction:column; gap:8px; }
.ev-row { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; padding:9px 14px; background:var(--card-2); border-radius:8px; }
.ev-row .eng { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; color:var(--gold); white-space:nowrap; }
.ev-row .stat { font-size:13.5px; color:var(--ink-2); }

/* ============================================================
   4 · ASSET CLASS BREAKDOWN
   ============================================================ */
.atable { border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.atable .ahead, .atable .arow { display:grid; grid-template-columns:1.1fr 1fr 1.1fr 0.9fr 2fr; gap:14px; align-items:center; padding:16px 20px; }
.atable .ahead { background:var(--card-2); }
.atable .ahead span { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); }
.atable .arow { border-top:1px solid var(--rule); }
.atable .arow .acls { font-family:var(--display); font-weight:500; font-size:19px; }
.atable .arow .areg { font-size:13.5px; color:var(--ink-2); }
.atable .aflow { display:flex; align-items:center; gap:10px; }
.atable .aflow .ftrack { flex:1; height:5px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.atable .aflow .ffill { height:100%; border-radius:999px; }
.atable .aflow .ffill.pos { background:var(--green); } .atable .aflow .ffill.neu { background:var(--mute-2); }
.atable .aflow .flbl { font-family:var(--mono); font-size:11px; color:var(--mute); white-space:nowrap; }
.atable .aread { font-size:13px; color:var(--mute); line-height:1.5; }

/* ============================================================
   5 · RISK RADAR
   ============================================================ */
.radar-list { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.radar-item { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:16px 20px; border:1px solid var(--rule); border-radius:10px; background:var(--card); }
.radar-item > div { display:flex; flex-direction:column; gap:6px; }
.radar-item .rtype { font-family:var(--sans); font-weight:600; font-size:14.5px; }
.radar-item .robs { font-size:13.5px; color:var(--mute); line-height:1.5; }
.radar-item .reng { font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.04em; }
.radar-outlook { border:1px solid var(--rule-2); border-radius:12px; padding:22px 24px; background:var(--gold-soft); }
.radar-outlook .ol { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.radar-outlook p { font-size:15.5px; line-height:1.6; color:var(--ink-2); }

/* ============================================================
   6 · CAPITAL FLOW (diverging bars)
   ============================================================ */
.flow-state { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.flow-state .fs-v { font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,34px); color:var(--green); letter-spacing:-.01em; }
.flow-state .fs-d { font-size:15px; color:var(--mute); max-width:48ch; }
.flowchart { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.fc-row { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; }
.fc-name { font-size:14px; color:var(--ink-2); text-align:right; }
.fc-bar { position:relative; height:26px; background:linear-gradient(90deg, var(--rule-soft) 0%, transparent 50%, var(--rule-soft) 100%); border-radius:5px; }
.fc-bar .zero { position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:var(--rule-2); }
.fc-fill { position:absolute; top:4px; bottom:4px; border-radius:4px; transition:width 1s var(--ease), left 1s var(--ease); }
.fc-fill.pos { background:linear-gradient(90deg, var(--green), #7bbf8e); left:50%; width:0; }
.fc-fill.neg { background:linear-gradient(90deg, #e0a89f, var(--ember)); right:50%; width:0; }
.fc-val { position:absolute; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11.5px; font-weight:500; }
.fc-fill.pos .fc-val { left:calc(100% + 8px); color:var(--green); }
.fc-fill.neg .fc-val { right:calc(100% + 8px); color:var(--ember); }
.flow-notable { display:flex; flex-direction:column; gap:10px; }
.flow-notable .fn { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.flow-notable .fn .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); margin-top:8px; }

/* ============================================================
   7 · PORTFOLIO IMPLICATIONS
   ============================================================ */
.impl-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.impl { border:1px solid var(--rule); border-radius:12px; padding:22px 24px; background:var(--card); }
.impl .ih { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.impl p { font-size:14.5px; line-height:1.62; color:var(--ink-2); }

/* ============================================================
   8 · TRACK RECORD
   ============================================================ */
.track-sum { display:flex; align-items:center; gap:clamp(20px,4vw,44px); flex-wrap:wrap; margin-bottom:24px; padding:20px 24px; border:1px solid var(--rule); border-radius:12px; background:var(--card); }
.track-sum .ts { display:flex; flex-direction:column; gap:5px; }
.track-sum .ts .v { font-family:var(--display); font-weight:500; font-size:32px; line-height:1; color:var(--ink); }
.track-sum .ts .v.gold { color:var(--gold); }
.track-sum .ts .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2); }
.track-sum .ts-note { font-size:13px; color:var(--mute); margin-left:auto; max-width:30ch; line-height:1.5; }
.ledger { width:100%; border-collapse:collapse; font-size:13.5px; }
.ledger th { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule-2); font-weight:500; }
.ledger td { padding:14px; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:top; }
.ledger td.date { font-family:var(--mono); color:var(--mute); white-space:nowrap; }
.ledger td.eng { font-family:var(--mono); font-size:11.5px; color:var(--gold); white-space:nowrap; }
.ledger .st { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; }
.ledger .st.ok { color:var(--green); } .ledger .st.no { color:var(--mute); }
.ledger .st .d { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================================================
   FOOTER / DISCLAIMER
   ============================================================ */
.doc-foot { padding: clamp(32px,5vw,48px) 0 clamp(48px,7vw,72px); }
.disclaimer { font-size:12px; line-height:1.6; color:var(--mute); border-top:2px solid var(--ink); padding-top:20px; }
.disclaimer b { color:var(--ink-2); font-weight:500; }
.foot-mark { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.foot-mark .wm { color:var(--mute); font-weight:600; letter-spacing:.22em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:680px) {
  .regime-grid { grid-template-columns:repeat(3,1fr); }
  .theme { grid-template-columns:1.2fr 1fr; }
  .theme-h { grid-column:1 / -1; }
  .impl-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px) {
  .atable .ahead { display:none; }
  .atable .arow { grid-template-columns:1fr 1fr; row-gap:10px; }
  .atable .aread { grid-column:1 / -1; }
  .radar-item { grid-template-columns:1fr; gap:8px; }
  .fc-row { grid-template-columns:96px 1fr; }
  .fc-name { font-size:12.5px; }
  .ledger .hide-sm { display:none; }
  .mh-meta { gap:12px 18px; }
}

/* reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* ============================================================
   PRINT  (the PDF)
   ============================================================ */
@page { size: A4 portrait; margin: 16mm 15mm; }
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --paper:#fff; --paper-2:#f3f0e9; --card:#fff; --card-2:#f6f3ec;
    --ink:#1a1714; --ink-2:#2a2520; --mute:#5a554d; --mute-2:#6b655b; --faint:#8a8479;
    --rule:rgba(0,0,0,0.18); --rule-2:rgba(0,0,0,0.30); --rule-soft:rgba(0,0,0,0.06);
    --grain-op:0; --gold:#8a6c2e;
  }
  html, body { background:#fff !important; }
  body::after { display:none; }
  .toolbar, .hero-scrollcue { display:none !important; }
  .doc { max-width:none; padding:0; }
  .reveal { opacity:1 !important; transform:none !important; }
  .sky-band { break-inside:avoid; height:150px; box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .sec { break-inside:avoid; padding:18px 0; }
  .theme, .radar-item, .impl, .gauge, .exec-chips .ec { break-inside:avoid; }
  .ledger tr { break-inside:avoid; }
  .mh { padding-top:0; }
  .sec-num .t, .mh-meta, .mh-edition { color:#5a554d; }
  a { color:inherit; }
  /* ensure bar fills print at final width via inline style */
  .gfill, .ffill, .fc-fill { transition:none !important; }
}