/* ShurIQ Command Center deck. Dark ground, one accent, mono instrumentation.
   Black Flag investor narrative, ShurIQ x InvestorNarrative 001. 2026-07-29. */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-regular.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-v40-latin-italic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-display-v40-latin-700.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/playfair-display-v40-latin-700italic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/playfair-display-v40-latin-900.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-v19-latin-regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-v19-latin-italic.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-sans-3-v19-latin-600.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-3-v19-latin-700.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin-regular.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin-500.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin-700.ttf') format('truetype'); }

:root {
  /* Ground */
  --bg:        #0B0E13;   /* near-black, cold */
  --bg-raise:  #10141B;   /* raised panel */
  --bg-inset:  #070A0E;   /* inset well */
  --panel:     #10141B;
  --line:      rgba(214,222,234,0.10);
  --line-strong: rgba(214,222,234,0.22);

  /* Ink */
  --ink:       #E8ECF3;   /* primary text */
  --ink-soft:  #A9B2C0;   /* secondary */
  --ink-faint: #6C7686;   /* metadata */
  --ink-dim:   #454E5C;   /* disabled / grid */

  /* The one accent. Signal amber: live instruments, the thing to look at. */
  --accent:      #E3A93C;
  --accent-soft: rgba(227,169,60,0.12);
  --accent-line: rgba(227,169,60,0.38);

  /* Data semantics only (never decoration) */
  --up:   #4FA06A;
  --down: #C25B4E;
  --hold: #6C7686;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent-soft); color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ==================== pitch layer ==================== */
/* Black Flag pitch v3. Deck reading, report behaviour.
   One statement per section, one interactive chart, depth behind the click.
   Layers on top of deck.css. 2026-07-29. */

body { overflow-x: hidden; }

/* ---------- section rail ---------- */
.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 60;
}
.rail a {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-dim); transition: background .2s, transform .2s;
  display: block; text-decoration: none;
}
.rail a:hover, .rail a.on { background: var(--accent); transform: scale(1.5); }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- cover ---------- */
.cover {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 6vh 5vw; position: relative;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, rgba(227,169,60,0.075), transparent 68%),
    var(--bg);
}
.cover h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(3.1rem, 11vw, 9.5rem);
  line-height: 0.92; letter-spacing: -0.03em; color: var(--ink);
}
.cover .rule { width: 54px; height: 2px; background: var(--accent); margin: 3.2rem 0 1.4rem; }
.cover .mark {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.42em;
  color: var(--ink-faint); text-transform: uppercase;
}
.scroll-cue {
  position: absolute; bottom: 3.4vh; font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.3em; color: var(--ink-dim); text-transform: uppercase;
}

/* ---------- pitch section ---------- */
.pitch {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 11vh 5vw 9vh; max-width: 1500px; margin: 0 auto;
  border-top: 1px solid var(--line);
}
.pitch:first-of-type { border-top: none; }
.sec-num {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.34em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 1.5rem;
}
.statement {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.018em; max-width: 21ch;
  color: var(--ink); margin-bottom: 1.1rem;
}
.statement.wide { max-width: 30ch; }
.brand { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; }
.sub {
  font-size: clamp(0.98rem, 1.35vw, 1.2rem); color: var(--ink-soft);
  max-width: 54ch; line-height: 1.55;
}
.sub strong { color: var(--ink); font-weight: 600; }

/* ---------- chart + card ---------- */
.stage {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 30px; margin-top: 3.4rem; align-items: start;
}
@media (max-width: 1040px) { .stage { grid-template-columns: 1fr; gap: 20px; } }

.chart {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 5px; padding: 20px 20px 16px; position: relative;
}
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-label {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.26em;
  color: var(--ink-faint); text-transform: uppercase; margin-bottom: 14px;
}
.hint {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em;
  color: var(--ink-dim); text-transform: uppercase; margin-top: 13px;
}

.card {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 5px; padding: 22px 24px; min-height: 260px;
  transition: border-color .18s ease;
}
.card.hot { border-color: var(--accent-line); }
.card-rest {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--ink-dim); text-transform: uppercase; line-height: 2;
}
.card-eyebrow {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.26em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 11px;
}
.card h3 {
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem;
  line-height: 1.22; color: var(--ink); margin-bottom: 11px;
}
.card p { font-size: 0.9rem; line-height: 1.68; color: var(--ink-soft); margin-bottom: 11px; }
.card p:last-child { margin-bottom: 0; }
.card p strong { color: var(--ink); font-weight: 600; }
.card .metric {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 13px 0; margin: 4px 0 13px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.card .metric div { display: flex; flex-direction: column; gap: 3px; }
.card .metric .v {
  font-family: var(--mono); font-size: 1.16rem; font-weight: 500; color: var(--accent);
}
.card .metric .k {
  font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.18em;
  color: var(--ink-faint); text-transform: uppercase;
}
.card .tag {
  display: inline-block; font-family: var(--mono); font-size: 0.53rem;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  color: var(--ink-faint); margin: 0 5px 5px 0;
}
.card .tag.live { color: var(--accent); border-color: var(--accent-line); }
.card .tag.next { color: var(--ink-faint); }

/* ---------- chart primitives ---------- */
.node-hit { cursor: pointer; }
.n-fill { fill: var(--bg-inset); stroke: var(--line-strong); stroke-width: 1.2px; transition: stroke .16s, fill .16s; }
.node-hit:hover .n-fill, .node-hit.sel .n-fill { stroke: var(--accent); fill: var(--accent-soft); }
.n-label { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-soft); pointer-events: none; }
/* a label that is itself the click target has to take pointer events back */
.n-label.node-hit { pointer-events: all; cursor: pointer; }
.n-label.node-hit:hover, .n-label.node-hit.sel { fill: var(--accent); }
.node-hit:hover .n-label, .node-hit.sel .n-label { fill: var(--ink); }
.n-mono { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint); pointer-events: none; letter-spacing: .1em; }
.edge { stroke: var(--line-strong); fill: none; }
.edge.hot { stroke: var(--accent-line); }
.axis line, .axis path { stroke: var(--ink-dim); shape-rendering: crispEdges; }
.axis text { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint); }
.grid line { stroke: var(--line); shape-rendering: crispEdges; }
.bar { transition: fill .16s; cursor: pointer; }
.bar-bg { fill: var(--bg-inset); }
.ours { fill: var(--accent); }
.theirs { fill: var(--ink-dim); }
.bar:hover, .bar.sel { fill: var(--accent); }
.series-ours { stroke: var(--accent); stroke-width: 2.2px; fill: none; }
.series-theirs { stroke: var(--ink-dim); stroke-width: 1.6px; fill: none; stroke-dasharray: 4 3; }
.spark-dot { fill: var(--accent); }
.zero-line { stroke: var(--down); stroke-dasharray: 3 3; stroke-width: 1px; }

/* ---------- closing ---------- */
.close {
  min-height: 92vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border-top: 1px solid var(--line); padding: 8vh 5vw;
}
.close h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 7.5rem); line-height: 0.94;
  letter-spacing: -0.03em; color: var(--ink);
}
.close .mark {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.44em;
  color: var(--accent); text-transform: uppercase; margin-top: 2.8rem;
}
footer {
  padding: 26px 5vw 40px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
  color: var(--ink-dim); text-transform: uppercase; text-align: center; line-height: 2.1;
}

.curve-hit { cursor: pointer; }

/* ---------- dossier toggles ---------- */
.dossier { margin-top: 3rem; max-width: 110ch; }
.dossier details { border-top: 1px solid var(--line); padding: 0.85rem 0; }
.dossier summary {
  cursor: pointer; font-family: var(--serif); font-weight: 600;
  font-size: 1.02rem; color: var(--ink);
}
.dossier summary:hover { color: var(--accent); }
.dossier p {
  font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6;
  max-width: 82ch; margin: 0.8rem 0;
}
.dossier .tbl { overflow-x: auto; margin: 1rem 0; }
.dossier table { border-collapse: collapse; font-size: 0.78rem; min-width: 640px; }
.dossier th, .dossier td {
  border: 1px solid var(--line); padding: 6px 10px; text-align: left;
  vertical-align: top; color: var(--ink-soft); line-height: 1.45;
}
.dossier th {
  color: var(--ink); font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- three views: mode bar ---------- */
.modebar {
  position: fixed; top: 14px; right: 18px; z-index: 60;
  display: flex; gap: 6px;
}
.modebar button {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 10px; cursor: pointer;
}
.modebar button:hover { color: var(--ink); border-color: var(--line-strong); }
.modebar button.on { color: var(--accent); border-color: var(--accent); }

/* ---------- ambient: one section per screen, deck-like ---------- */
html:has(body.mode-ambient) { scroll-snap-type: y proximity; }
body.mode-ambient .pitch, body.mode-ambient .close, body.mode-ambient .cover {
  scroll-snap-align: start; min-height: 100vh;
}

/* ---------- viewports: every section as a card ---------- */
.vp-grid {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: var(--bg, #0D0C0A); padding: 72px 5vw 60px;
}
.vp-grid-head { max-width: 1500px; margin: 0 auto 26px; }
.vp-grid-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
.vp-grid-sub {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 6px;
}
.vp-grid-cards {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.vp-card {
  text-align: left; background: transparent; border: 1px solid var(--line);
  border-radius: 4px; padding: 16px; cursor: pointer; color: inherit;
}
.vp-card:hover { border-color: var(--accent); }
.vp-card-num {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.vp-card-title {
  font-family: var(--serif); font-weight: 600; font-size: 1rem;
  line-height: 1.25; color: var(--ink);
}
.vp-card-mini { margin-top: 12px; pointer-events: none; opacity: 0.85; }
.vp-card-mini svg { width: 100%; height: auto; display: block; }

/* ---------- per-section prose expander ---------- */
.sub-more { margin-top: 0.7rem; max-width: 54ch; }
.sub-more summary {
  cursor: pointer; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.sub-more summary:hover { color: var(--ink); }
.sub-more p { margin-top: 0.8rem; }

/* ---------- suite strip inside the viewports grid ---------- */
.vp-suite { margin-bottom: 6px; }
.vp-suite-card { display: block; text-decoration: none; border-color: rgba(214,222,234,0.22); }
.vp-suite-card:hover { border-color: var(--accent); }
.vp-suite-card .vp-card-title { font-size: 0.95rem; }