/* ═══════════════════════════════════════════════════════════════════════════
   Space Race R2 — deck theme for the chris-portfolio design system.

   Loaded after deck.css. Token values mirror src/styles/theme.css in the site
   repo: light page = the site's light mode, dark band = its dark mode. Components
   read the site's own token names (--color-surface, --color-content, …); the
   dark band re-points those names at the dark-mode values, so one component
   works on either surface. Type is a fixed px scale — never viewport units.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Michroma'; font-weight:400; font-display:block; src:url('fonts/Michroma-Regular.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:300 700; font-display:block; src:url('fonts/SpaceGrotesk-Variable.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:400; font-display:block; src:url('fonts/SpaceMono-Regular.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-weight:700; font-display:block; src:url('fonts/SpaceMono-Bold.woff2') format('woff2'); }

:root {
  /* Engine tokens */
  --font:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --page:#F4F1E8;      --ink:#0A0E1A;        /* .is-page  = site light mode  */
  --band-deep:#0A0E1A; --ink-dark:#F4F1E8;   /* .slide    = site dark mode   */
  --band-alt:#0f1422;                        /* .is-alt   = dark surface-alt */
  --accent:#FF6B35;                          /* NASA orange */
  --highlight:#3DD6D0;                       /* instrument cyan */

  /* Site tokens — light mode (src/styles/theme.css :root) */
  --color-primary:#FF6B35; --color-primary-light:#f0c4ad;
  --color-secondary:#0E7A75; --color-secondary-light:#16a39d;
  --color-surface:#F4F1E8; --color-surface-alt:#ffffff; --color-surface-hover:#efeadd;
  --color-content:#0A0E1A; --color-content-light:#3d4236; --color-content-lighter:#6b6f5e;
  --color-outline:#D9D2BF; --color-outline-light:#e4ddca;
  --card-surface:#ffffff;
  --sun:#FF6B35; --orbit-line:#cfc7ae; --orbit-line-strong:#b7ae94;
  --grid-line:rgba(10,14,26,.08); --grid-size:90px; --star:rgba(10,14,26,.35);
  --venn-third:#5b5bd6;

  --font-heading:'Michroma', 'Space Grotesk', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, Menlo, monospace;
  --tracking-eyebrow:.16em; --tracking-label:.1em;
  --duration-orbit-1:44s; --duration-orbit-2:30s; --duration-orbit-3:18s;
  --duration-ping:2.6s; --duration-twinkle:5s;

  /* Type scale for the 1600×900 canvas */
  --fs-display:76px; --fs-h1:56px; --fs-h2:40px; --fs-h3:24px;
  --fs-lead:24px; --fs-body:19px; --fs-small:16px; --fs-mono:13px; --fs-tlm:11px;
}

/* Dark band — the site's dark-mode values, scoped to the slide. */
.slide:not(.is-page) {
  --color-secondary:#3DD6D0; --color-secondary-light:#3DD6D0;
  --color-surface:#0A0E1A; --color-surface-alt:#0f1422; --color-surface-hover:#141a2b;
  --color-content:#F4F1E8; --color-content-light:#c4cad8; --color-content-lighter:#9aa3b8;
  --color-outline:#1c2336; --color-outline-light:#16203a;
  --card-surface:transparent;
  --orbit-line:#232c44; --orbit-line-strong:#3a465f;
  --grid-line:rgba(244,241,232,.08); --star:rgba(244,241,232,.7);
  --venn-third:#8785f5;
}
.slide.is-alt { --color-surface:#0f1422; }

h1, h2, h3, p, figure, dl, dd { margin:0; }
h1, h2 { font-family:var(--font-heading); font-weight:400; letter-spacing:0; }
h1 { font-size:var(--fs-h1); line-height:1.16; }
h2 { font-size:var(--fs-h2); line-height:1.25; max-width:30ch; }
h3 { font-size:var(--fs-h3); line-height:1.3; font-weight:600; }
.display { font-size:var(--fs-display); line-height:1.12; text-transform:uppercase; }
.display span, h1 span, h2 span { color:var(--color-primary); }
.lead { font-size:var(--fs-lead); line-height:1.5; color:var(--color-content-light); max-width:34em; }
.body { font-size:var(--fs-body); line-height:1.6; color:var(--color-content-light); max-width:40em; }

/* ── Running head + caption ──────────────────────────────────────────────
   Head: section tag left, deck tag right. Caption: the one line that makes the
   slide read on its own when the deck is sent ahead. Both sit outside the
   flow, so they never push the layout around. */
.slide__head, .caption {
  position:absolute; left:80px; right:80px; z-index:5;
  font-family:var(--font-mono); letter-spacing:var(--tracking-label);
}
.slide__head {
  top:32px; display:flex; justify-content:space-between;
  font-size:var(--fs-tlm); text-transform:uppercase; color:var(--color-content-lighter);
}
.slide__head span:last-child { color:var(--color-secondary); }
/* Confidentiality mark, centred on the header line of every slide (cover and closing included).
   A pseudo-element, so no slide's markup has to carry it. */
.slide::before {
  content:'Confidential'; position:absolute; top:32px; left:0; right:0; z-index:5; text-align:center;
  font-family:var(--font-mono); font-size:var(--fs-tlm); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--color-content-lighter); pointer-events:none;
}
/* Indented past the slide number, which owns the bottom-left corner. */
.caption { top:831px; left:136px; font-size:var(--fs-mono); line-height:19.5px; color:var(--color-content-lighter); }
/* The slide number and the caption's first line share one line, 831px down (two caption lines
   end 30px above the bottom edge); a second caption line runs below the number. */
#slideno { top:831px; bottom:auto; line-height:19.5px; }

/* ── Telemetry type ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-primary);
}
.telemetry {
  font-family:var(--font-mono); font-size:14px; letter-spacing:var(--tracking-eyebrow);
  color:var(--color-secondary);
}

/* Blueprint grid backdrop — 90px cells, as on the site hero. */
.has-grid {
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
}

/* ── Readouts (Hero.astro .stat) ────────────────────────────────────────── */
.readouts { display:flex; gap:16px; }
.readout {
  border:1px solid var(--color-outline); border-radius:6px; background:var(--card-surface);
  padding:16px 24px; min-width:170px;
}
.readout dt { font-family:var(--font-mono); font-size:var(--fs-tlm); letter-spacing:.12em; color:var(--color-secondary); }
.readout .value { font-family:var(--font-heading); font-size:32px; color:var(--color-primary); margin-top:8px; }
.readout .label { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--color-content-lighter); margin-top:6px; max-width:24ch; }

/* ── Cards (Ventures.astro .card) ───────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:24px; width:100%; }
.card {
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--color-outline); border-radius:8px; background:var(--card-surface);
  padding:28px 28px 28px 32px;
  /* The rail reads --rail here, on the card: a var() inside --shadow-rail on :root
     would resolve there, where --rail is never set. */
  box-shadow:inset 3px 0 0 var(--rail, var(--color-secondary));
}
.card.is-orange { --rail:var(--color-primary); }
.card__meta, .card .card__meta { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-secondary); }
.card .card__title { font-family:var(--font-heading); font-size:21px; line-height:1.3; }
.card p, .card li { font-size:17px; line-height:1.55; color:var(--color-content-light); }
/* A card whose logo is its title. Logos are sized for equal visual area; the row sets
   --mark-h to its tallest, and logos sit on the bottom edge so text lines up across. */
.card__mark { height:var(--mark-h, 40px); display:flex; align-items:var(--mark-align, flex-end); margin-bottom:6px; }
.card__mark img { display:block; width:auto; max-width:100%; }
.card .card__url { margin-top:auto; padding-top:8px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--color-secondary); }
.card ul { margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:4px; }

/* ── Chapters: two places side by side, joined by a flight path ─────────
   Open on the page, no boxes. The place name is the loud element; entries share
   one anatomy: year | title + detail | logo. */
.chapters { display:grid; grid-template-columns:1fr 72px 1fr; width:100%; }
.chapter { display:flex; flex-direction:column; }
.chapter__years { font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; color:var(--color-secondary); }
.chapter__place { font-family:var(--font-heading); font-size:44px; line-height:1.15; margin-top:6px; }
.chapter__lede { font-size:20px; color:var(--color-content-light); margin-top:4px; }
.entries { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.entry { display:grid; grid-template-columns:76px 1fr auto; column-gap:18px; align-items:start; }
.entry__year { font-family:var(--font-mono); font-size:14px; line-height:1.6; color:var(--color-secondary); }
.entries--logos .entry { grid-template-columns:76px 1fr 166px; }
.entries--logos .entry__text { max-width:none; }
/* No single-word last lines. */
.entry__text, .chapter__also { text-wrap:pretty; }
.entry__title { font-size:19px; font-weight:600; line-height:1.35; }
.entry__text { font-size:16px; line-height:1.5; color:var(--color-content-light); margin-top:2px; max-width:46ch; }
.entry__logo { display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:3px; padding-left:34px; }
.entry__logo img { display:block; height:auto; }
.entry__logo--pair { gap:12px; }
.entry__logo--pair img { width:132px; }
.chapter__also { margin-top:22px; padding-left:94px; font-size:15px; line-height:1.5; color:var(--color-content-lighter); max-width:52ch; }
/* Dashed teal path with an orange marker, as on the journey map. */
.chapters__path { position:relative; }
.chapters__path::before { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:1.5px dashed var(--color-secondary); opacity:.55; }
.chapters__path span { position:absolute; top:62px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--color-primary); }

/* Label / value pairs beside a lead paragraph. */
.facts { margin:0; display:flex; flex-direction:column; gap:18px; min-width:300px; }
.facts dt { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-secondary); }
.facts dd { margin:6px 0 0; font-size:19px; line-height:1.45; color:var(--color-content); }

/* ── Flow: one thing leading to the next (Sardinia slide) ───────────────── */
.flow { display:flex; align-items:stretch; gap:18px; }
.flow .card { padding:20px 24px 18px 28px; gap:10px; }
/* Role, dates and description on their own lines (Work row). */
.card .card__role { font-size:17px; font-weight:600; line-height:1.35; color:var(--color-content); }
.card .card__dates { font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--color-secondary); margin-top:-4px; }
.flow__arrow { align-self:center; font-family:var(--font-mono); font-size:22px; color:var(--color-primary); }

/* ── Images ─────────────────────────────────────────────────────────────── */
.frame { border-radius:8px; overflow:hidden; border:1px solid var(--color-outline); background:var(--color-surface-hover); }
.frame img, .shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.fig { display:flex; flex-direction:column; gap:10px; }
.fig figcaption, .shot figcaption {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-content-lighter);
}

.duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.shots { display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:24px; width:100%; }
.shot { display:flex; flex-direction:column; gap:10px; }
.shot .frame, .shot .slot { aspect-ratio:var(--ar, 16/10); }

/* Browser chrome (BdtToolsCover.astro), static. */
.browser { border-radius:10px; overflow:hidden; border:1px solid var(--color-outline); background:var(--card-surface); box-shadow:0 24px 60px rgba(10,14,26,.18); }
.browser__bar { height:34px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom:1px solid var(--color-outline); background:var(--color-surface-hover); }
.browser__bar i { width:10px; height:10px; border-radius:50%; background:var(--color-outline); }
.browser__url { margin-left:12px; font-family:var(--font-mono); font-size:11px; color:var(--color-content-lighter); }
.browser img { display:block; width:100%; height:auto; }

/* Brand board: one wide tile over two. Tiles crop to fill. */
.brand-board { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.brand-board .frame { aspect-ratio:2/1; }
.brand-board .brand-board__wide { grid-column:span 2; aspect-ratio:16/9; }
.brand-board__mark { display:grid; place-items:center; background:#000; }
.brand-board .brand-board__mark img { width:62%; height:auto; filter:invert(1); }

/* Website showcase: two browsers side by side at one fixed height; captures crop from the top. */
.site-grid { display:grid; grid-template-columns:860px 1fr; gap:24px; height:560px; }
.site-grid .browser { display:flex; flex-direction:column; min-height:0; }
.site-grid .browser img { flex:1; height:0; min-height:0; object-fit:cover; object-position:top; }

/* Photo mosaic: a 4×3 grid; the lead photo spans 2×2. Tiles crop to fill. */
.mosaic { display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 190px); gap:12px; width:100%; }
.mosaic .frame img { object-position:center; }

/* Poster row: portrait prints at one shared height, never cropped. */
.posters { display:flex; gap:24px; align-items:flex-start; }
.posters img { display:block; height:500px; width:auto; border-radius:4px; }
.posters .fig { width:min-content; }
.posters figcaption { max-width:none; }

/* ── Live demo: an app in a phone, with labelled callouts ───────────────
   The app renders at its own 390×844 and is scaled by --s; the static screenshot sits under it
   until the app answers. Callouts are placed in canvas px to match their line coordinates. */
.demo-phone { position:absolute; width:calc(390px * var(--s)); height:calc(844px * var(--s)); padding:10px;
  border-radius:38px; background:#000; box-shadow:0 0 0 2px #232c44, 0 30px 80px rgba(0,0,0,.55); }
.demo-phone > img, .demo-phone > iframe { position:absolute; left:10px; top:10px; width:390px; height:844px;
  border:0; border-radius:36px; background:#000; transform:scale(var(--s)); transform-origin:top left; object-fit:cover; }
.demo-phone > iframe { opacity:0; transition:opacity .3s; }
.is-live .demo-phone > iframe { opacity:1; }
/* Only true when the app is live; the static fallback has nothing to tap. */
.demo-hint { position:absolute; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.08em; color:var(--color-content-lighter); opacity:0; transition:opacity .3s; }
.is-live .demo-hint { opacity:1; }
.callouts { position:absolute; inset:0; pointer-events:none; transition:opacity .3s; }
.slide--demo[data-active] .callouts { animation:calloutsIn .5s ease-out 1.9s both; }  /* after the app's launcher */
.slide--demo.is-touched .callouts { opacity:0; animation:none; }
@keyframes calloutsIn { from { opacity:0; } to { opacity:1; } }
.callout-lines { position:absolute; inset:0; width:1600px; height:900px; }
.callout-lines line { stroke:var(--color-primary); stroke-width:1.5; }
.callout-lines circle { fill:var(--color-primary); }
.callout { position:absolute; width:340px; font-size:17px; line-height:1.45; color:var(--color-content-light); }
.callout b { display:block; font-family:var(--font-heading); font-weight:400; font-size:17px; color:var(--color-content); margin-bottom:4px; }
.callout--left { left:258px; text-align:right; }
.callout--right { left:1002px; }
/* Taps belong to the app on this slide, so the click-to-advance zones stand down;
   keys, the clicker and the HUD still navigate. */
body:has(#canvas > .slide--demo[data-active]) #navzones { pointer-events:none; }
#overview .thumb .callouts { animation:none !important; opacity:1 !important; }
@media print { .callouts { animation:none !important; opacity:1 !important; } }

/* Phone frame for portrait app captures. */
.phone { width:260px; aspect-ratio:780/1688; border-radius:36px; padding:26px 10px 12px; background:#0A0E1A; box-shadow:0 24px 60px rgba(10,14,26,.3); }
.phone img, .phone .slot { width:100%; height:100%; border-radius:12px 12px 24px 24px; object-fit:cover; object-position:top; display:block; }

/* Placeholder for an asset Chris still has to supply. It prints the path the
   file is expected at; swap the slot for an <img> once the file is there. */
.slot {
  display:grid; place-items:center; padding:20px; text-align:center;
  border:1.5px dashed var(--color-content-lighter); border-radius:8px;
  font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--color-content-lighter);
  background:repeating-linear-gradient(135deg, transparent 0 12px, var(--grid-line) 12px 13px);
}

/* ── Quote (Riffs) ──────────────────────────────────────────────────────── */
.quote { font-size:44px; line-height:1.3; font-weight:500; max-width:26ch; }
.quote::before { content:'“'; color:var(--color-primary); }
.quote::after { content:'”'; color:var(--color-primary); }

/* ── Hero orbit (Hero.astro) — held to the right of the cover ───────────── */
.orbit { position:absolute; top:0; right:0; width:1600px; height:auto; pointer-events:none; }
.orbit .sun { fill:var(--sun); }
.orbit .orbit-line { fill:none; stroke:var(--orbit-line); stroke-width:1.2; }
.orbit .orbit-line.strong { stroke:var(--orbit-line-strong); }
.orbit .anchor { fill:var(--color-secondary); }
.orbit .planet { offset-rotate:0deg; animation:orbit var(--dur, 30s) linear infinite; stroke:var(--color-surface); stroke-width:3px; paint-order:stroke; }
.orbit .planet-1 { fill:var(--color-secondary); --dur:var(--duration-orbit-1); }
.orbit .planet-2 { fill:var(--color-primary); --dur:var(--duration-orbit-2); }
.orbit .planet-3 { fill:var(--color-content); --dur:var(--duration-orbit-3); }
.orbit .star { fill:var(--star); animation:twinkle var(--d, 5s) ease-in-out var(--delay, 0s) infinite; }
@keyframes orbit { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes twinkle { 0%, 100% { opacity:.15; } 50% { opacity:.85; } }

/* ── Journey map (JourneyMap.astro) ─────────────────────────────────────── */
.map-svg { display:block; width:100%; height:auto; }
.map-svg .land { fill:var(--color-surface-hover); stroke:var(--color-outline); stroke-width:.4; vector-effect:non-scaling-stroke; }
.map-svg .link { fill:none; stroke:var(--color-secondary); stroke-width:1.5; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; opacity:.7; }
.map-svg .dot { fill:var(--color-primary); }
.map-svg .current .dot { fill:var(--color-secondary); }
.map-svg .halo { fill:none; stroke:var(--color-secondary); stroke-width:1.5; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; animation:ping var(--duration-ping) ease-out infinite; }
.map-svg .label { font-family:var(--font-mono); font-size:7px; letter-spacing:.08em; fill:var(--color-content); text-anchor:middle; }
@keyframes ping { 0% { transform:scale(.5); opacity:.8; } 70%, 100% { transform:scale(1.6); opacity:0; } }

.legend { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.legend p:nth-child(1) { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--color-secondary); }
.legend p:nth-child(2) { font-family:var(--font-heading); font-size:20px; margin-top:10px; }
.legend p:nth-child(3) { font-family:var(--font-mono); font-size:13px; margin-top:4px; color:var(--color-content-light); }
.legend .current p:nth-child(2) { color:var(--color-secondary); }

/* ── Skill Venn (SkillVenn.astro) ───────────────────────────────────────── */
.venn-svg { display:block; height:640px; width:auto; }
.venn-svg .lobe { fill-opacity:.18; stroke-width:1.6; vector-effect:non-scaling-stroke; }
.venn-svg .design { fill:var(--color-primary); stroke:var(--color-primary); }
.venn-svg .engineering { fill:var(--color-secondary-light); stroke:var(--color-secondary-light); }
.venn-svg .business { fill:var(--venn-third); stroke:var(--venn-third); }
.venn-svg text { font-family:var(--font-mono); text-anchor:middle; }
.venn-svg .disc-name { font-size:8.5px; font-weight:700; letter-spacing:.03em; fill:var(--color-content); }
.venn-svg .sub { font-size:7px; letter-spacing:.02em; fill:var(--color-content-light); }
.venn-svg .overlap { font-size:6.5px; letter-spacing:.06em; fill:var(--color-content); }
.venn-svg .core-fill { fill:var(--color-primary); }
.venn-svg .core { font-size:8px; font-weight:700; letter-spacing:.04em; fill:#0A0E1A; }

/* ── Ambient motion: stopped in overview thumbnails, print and reduced motion,
   the way the engine pins [data-anim]. */
#overview .thumb .planet, #overview .thumb .star, #overview .thumb .halo { animation:none !important; }
@media (prefers-reduced-motion: reduce) {
  .orbit .planet, .orbit .star, .map-svg .halo { animation:none; }
}
@media print {
  .orbit .planet, .orbit .star, .map-svg .halo { animation:none !important; }
}