/* ==========================================================================
   Braedyn Thompson — portfolio
   Design language: "Console chrome" (Nintendo.com 2001 analysis, see DESIGN-nintendo-2001.md)
   Cool periwinkle chassis + carbon command layer + warm color ONLY for wayfinding.
   ========================================================================== */

:root {
  /* brand & signal (warm = action only) */
  --red: #e60012;
  --signal: #f68d1f;
  --amber: #ecab37;
  --nav-gold: #e48600;

  /* chassis */
  --canvas: #7a8aba;
  --sky: #9fbee7;
  --lavender: #acace7;
  --ice: #c0d5e6;
  --periwinkle: #8ba1d4;
  --chrome-indigo: #3d4f97;
  --muted-indigo: #60619c;
  --platinum: #dedede;
  --surface: #ffffff;
  --carbon: #21242e;
  --hairline: #5a5f8c;

  /* text */
  --ink: #21242e;
  --ink-soft: #3d4f97;
  --on-dark: #ffffff;

  /* page tints */
  --teal: #206479;
  --games-red: #a7282b;

  /* chart (cool only) */
  --chart-ours: #3d4f97;
  --chart-mid: #8ba1d4;
  --chart-base: #b9c0d3;
  --chart-grid: #d5d9e4;

  /* type */
  --f-ui: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --f-display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --f-pixel: "Silkscreen", "VT323", monospace;
  --f-lcd: "VT323", "Silkscreen", monospace;

  /* radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* spacing */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-section: 48px;

  --chamfer: 14px;
  --shell: 2400px;
  --gutter: clamp(16px, 3vw, 64px);
  --gap: clamp(12px, 1.2vw, 24px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: clamp(14px, 0.3vw + 10px, 16px);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--canvas);
  /* brushed periwinkle metal */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #8898c8 0%, #7a8aba 260px, #7383b4 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--ink-soft); font-weight: 700; }
a:hover { color: var(--carbon); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: var(--amber); color: var(--carbon); padding: 8px 12px; font-weight: 700;
}
.skip:focus { left: 8px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- shared textures ---------- */
.halftone {
  background-color: var(--carbon);
  background-image: radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.3px);
  background-size: 4px 4px;
}
.chamfer {
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 18px 0 10px;
}
.mascot { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.avatar {
  flex: none; width: 56px; height: 56px;
  border: 2px solid var(--carbon); border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--chrome-indigo);
  image-rendering: pixelated;
}
.bubble {
  position: relative; background: var(--surface); color: var(--carbon);
  border: 2px solid var(--carbon); border-radius: var(--r-lg);
  padding: 8px 12px; font-family: var(--f-pixel); font-size: 11px; line-height: 1.35;
  margin-bottom: 18px;
}
.bubble::before, .bubble::after {
  content: ""; position: absolute; left: -12px; bottom: 8px;
  border: 7px solid transparent; border-right: 10px solid var(--carbon); border-left: 0;
}
.bubble::after { left: -8px; bottom: 9px; border-width: 6px 9px 6px 0; border-right-color: var(--surface); }
.bubble b { font-weight: 400; color: var(--chrome-indigo); }

.now {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--f-pixel); font-size: 10px; color: var(--carbon);
  margin-bottom: 18px; text-align: right;
}
.now-label { text-transform: uppercase; letter-spacing: .5px; color: var(--surface); text-shadow: 1px 1px 0 var(--chrome-indigo); }
.now-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lcd-chip {
  font-family: var(--f-lcd); font-size: 15px; line-height: 1; color: var(--sky);
  padding: 4px 7px 3px; border-radius: var(--r-xs); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.lcd-chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6fe08a; margin-right: 6px; vertical-align: 2px; box-shadow: 0 0 4px #6fe08a; }

/* ==========================================================================
   Dual navigation
   ========================================================================== */
.navbar {
  display: flex; align-items: center; gap: 14px;
  min-height: 40px; padding: 6px 10px;
  border-top: 1px solid #3a3f50; border-bottom: 2px solid #000;
}
.logo-pill {
  flex: none; display: inline-flex; align-items: center;
  background: var(--surface); color: var(--red); text-decoration: none;
  font-family: var(--f-display); font-size: 15px; letter-spacing: .5px;
  padding: 3px 14px 2px; border-radius: 9999px; border: 2px solid var(--red);
  box-shadow: 0 0 0 2px var(--surface);
  transform: skewX(-8deg);
}
.logo-pill span { display: inline-block; transform: skewX(8deg); }
.logo-pill:hover { color: var(--red); }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: block; padding: 6px 10px; text-decoration: none; white-space: nowrap;
  color: var(--nav-gold); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border-radius: var(--r-xs);
}
.nav-links a:hover { color: var(--amber); background: rgba(255,255,255,.06); }
.nav-links a[aria-current="page"] { color: var(--amber); box-shadow: inset 0 -2px 0 var(--amber); }
.nav-utility { margin-left: auto; display: flex; gap: 6px; flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #f5c25e 0%, var(--amber) 55%, #d99a28 100%);
  color: var(--carbon); text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--r-xs);
  border: 1px solid #8a5d10;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 #6b470b;
}
.chip:hover { background: var(--nav-gold); color: var(--carbon); }
.chip:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #6b470b; }

.subnav {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, #b5cdee, var(--sky));
  border-bottom: 2px solid var(--chrome-indigo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: 6px 12px; color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border-right: 1px solid rgba(61,79,151,.35);
}
.subnav a:hover { background: rgba(255,255,255,.45); }
.subnav a[aria-current="page"] { background: var(--surface); color: var(--chrome-indigo); }
.subnav .group { flex: none; padding: 6px 10px; font-family: var(--f-pixel); font-size: 10px; color: var(--chrome-indigo); background: rgba(61,79,151,.12); border-right: 1px solid rgba(61,79,151,.35); display: flex; align-items: center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-wrap { margin-top: var(--gap); filter: drop-shadow(0 3px 0 var(--chrome-indigo)); }
.hero {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 56px) clamp(20px, 3vw, 56px); min-height: clamp(280px, 26vw, 460px);
  color: var(--surface);
  background-color: var(--lavender);
  border-radius: var(--r-md);
}
.hero::after { /* top edge highlight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hero-eyebrow {
  display: inline-block; font-family: var(--f-pixel); font-size: 11px; letter-spacing: .5px;
  background: var(--carbon); color: var(--sky); padding: 4px 8px; border-radius: var(--r-xs); margin-bottom: 14px;
}
.display {
  font-family: var(--f-display); font-weight: 900; line-height: .98; letter-spacing: 0;
  font-size: clamp(34px, 5vw, 128px); margin: 0;
  color: var(--surface);
  -webkit-text-stroke: 2px var(--carbon); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--carbon);
  transform: skewX(-6deg); transform-origin: left bottom;
}
.display.sm { font-size: clamp(28px, 4.6vw, 44px); }
.tagline {
  font-size: 16px; font-weight: 700; line-height: 1.35; margin: 18px 0 0;
  color: var(--surface); text-shadow: 1px 1px 0 rgba(0,0,0,.55);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-xs);
  background: rgba(33,36,46,.82); color: var(--surface);
  border: 1px solid rgba(0,0,0,.6);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.go {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--surface); text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.go:hover { color: var(--surface); }
.go .disc, .disc {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb764, var(--signal) 60%, #c86a0c);
  border: 1px solid #8c4a06; box-shadow: 0 2px 0 #6e3a04;
  display: inline-grid; place-items: center;
}
.disc::before { content: ""; width: 6px; height: 6px; border: solid var(--surface); border-width: 2px 2px 0 0; transform: translateX(-1px) rotate(45deg); }

/* hero field tints / textures */
.field-lavender { background-color: var(--lavender);
  background-image: radial-gradient(circle at 80% 30%, rgba(255,255,255,.45), transparent 45%),
    repeating-linear-gradient(135deg, rgba(61,79,151,.10) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #b9b9ef, #9393d6); }
.field-teal { background-color: var(--teal);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2378d3e6' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M0 20h30l10 10h40M60 0v20l10 10v30h50M10 120V80l20-20h20M90 120V90l-10-10H60M120 40h-20l-10 10'/%3E%3C/g%3E%3Cg fill='%2378d3e6' fill-opacity='.35'%3E%3Ccircle cx='80' cy='30' r='3'/%3E%3Ccircle cx='50' cy='60' r='3'/%3E%3Ccircle cx='60' cy='80' r='3'/%3E%3Ccircle cx='100' cy='40' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 75% 40%, rgba(120,211,230,.35), transparent 50%),
    linear-gradient(160deg, #2a7f97, #164a5b); }
.field-red { background-color: var(--games-red);
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 3px, transparent 3px 22px),
    radial-gradient(ellipse at 80% 50%, rgba(255,160,120,.35), transparent 55%),
    linear-gradient(160deg, #c13a3d, #7c1c1f); }
.field-ice { background-color: var(--ice);
  background-image: radial-gradient(circle at 78% 35%, rgba(255,255,255,.6), transparent 45%),
    repeating-linear-gradient(0deg, rgba(61,79,151,.10) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(61,79,151,.10) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #a9c4e3, #7f9fcc); }
.field-indigo { background-color: var(--muted-indigo);
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px),
    radial-gradient(circle at 80% 30%, rgba(159,190,231,.45), transparent 50%),
    linear-gradient(160deg, #6f70b0, #3d4f97);
  background-size: 6px 6px, auto, auto; }
.field-carbon { background-color: var(--carbon);
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px),
    radial-gradient(circle at 78% 40%, rgba(122,138,186,.45), transparent 55%);
  background-size: 4px 4px, auto; }

.hero-art { position: relative; }
.hero-art .screen {
  background: var(--carbon); border: 2px solid #000; border-radius: var(--r-md); padding: 10px;
  box-shadow: inset 0 0 0 2px #3a3f50, 4px 4px 0 rgba(0,0,0,.35);
}
.hero-art .screen svg { width: 100%; height: auto; }

/* ==========================================================================
   Body layout
   ========================================================================== */
main { padding: var(--gap) 0 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 420px); gap: var(--gap); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.rail { position: sticky; top: 12px; }

/* ---------- plate / panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--chrome-indigo);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 0 var(--chrome-indigo);
  overflow: hidden;
}
.panel.platinum { background: var(--platinum); }
.panel.raised { background: var(--periwinkle); }

.label-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin: 0;
  background: linear-gradient(180deg, #b3c0e6 0%, #9aabd8 100%);
  border-bottom: 1px solid var(--chrome-indigo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  color: var(--carbon);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1.1;
}
.label-bar.dark { background: none; color: var(--sky); border-bottom-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.label-bar .num { margin-left: auto; font-family: var(--f-pixel); font-weight: 400; color: var(--chrome-indigo); }
.label-bar.dark .num { color: var(--canvas); }
.glyph {
  flex: none; width: 11px; height: 11px;
  background:
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 0 0 / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 4px 0 / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 8px 0 / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 0 4px / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 4px 4px / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 8px 4px / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 0 8px / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 4px 8px / 3px 3px,
    linear-gradient(var(--chrome-indigo), var(--chrome-indigo)) 8px 8px / 3px 3px;
  background-repeat: no-repeat;
}
.label-bar.dark .glyph { filter: brightness(2.4); }

.panel-body { padding: 16px; }
.panel-body.tight { padding: 12px; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }

.prose p { margin: 0 0 12px; }
.prose h3 {
  margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.prose h3::after { content: ""; flex: 1; border-top: 1px dotted var(--muted-indigo); }
.prose ul { margin: 0 0 12px; padding-left: 18px; }
.prose li { margin: 0 0 6px; }
.prose li::marker { color: var(--chrome-indigo); }
.prose strong { color: var(--carbon); }
.prose code, code {
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
  background: #eef0f6; border: 1px solid #cfd4e2; border-radius: var(--r-xs); padding: 0 4px;
}
.lede { font-size: 15px; font-weight: 700; color: var(--carbon); }
.dotted { border: 0; border-top: 1px dotted var(--muted-indigo); margin: 16px 0; }
.note {
  font-size: 12px; color: var(--ink-soft); background: #f1f3f9; border-left: 3px solid var(--chrome-indigo);
  padding: 8px 10px; margin: 12px 0; border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* ---------- bullets as "news rows" ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  background: var(--platinum); border-radius: var(--r-sm); padding: 10px;
  border: 1px solid #c7c9d3; box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--ink);
}
a.row { text-decoration: none; font-weight: 400; align-items: center; }
a.row:hover { background: var(--surface); }
.row-ico {
  width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center;
  font-family: var(--f-pixel); font-size: 10px; color: var(--sky); border: 1px solid #000;
}
.row-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.3; }
.row-sub { display: block; font-size: 12px; color: #4a4f63; margin-top: 2px; line-height: 1.45; }
.row-meta { font-family: var(--f-pixel); font-size: 10px; color: var(--muted-indigo); white-space: nowrap; }
.arrow-chip {
  flex: none; width: 20px; height: 20px; border-radius: var(--r-xs);
  background: linear-gradient(180deg, #ffa64a, var(--signal)); border: 1px solid #a65508;
  box-shadow: 0 1px 0 #6e3a04; display: grid; place-items: center; align-self: center;
}
.arrow-chip::before { content: ""; width: 5px; height: 5px; border: solid #fff; border-width: 2px 2px 0 0; transform: translateX(-1px) rotate(45deg); }

.bullet-rows .row { grid-template-columns: auto minmax(0, 1fr); background: #f4f5f9; }
.bullet-rows .row-ico { background: var(--chrome-indigo); color: var(--surface); border-color: #1f2a5c; }
.bullet-rows p { margin: 0; font-size: 13.5px; }

/* ---------- LCD stat readouts ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.stat {
  border: 1px solid #000; border-radius: var(--r-sm); padding: 10px 12px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 var(--chrome-indigo);
}
.stat .v { display: block; font-family: var(--f-lcd); font-size: 38px; line-height: .9; color: var(--sky); text-shadow: 0 0 6px rgba(159,190,231,.35); }
.stat .v small { font-size: 20px; color: var(--canvas); }
.stat .k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--surface); margin-top: 6px; line-height: 1.25; }
.stat .b { display: block; font-family: var(--f-pixel); font-size: 9px; color: var(--canvas); margin-top: 4px; line-height: 1.3; }

/* ---------- figures ---------- */
figure { margin: 0; }
.fig { border: 1px solid #c7c9d3; border-radius: var(--r-sm); background: #f7f8fb; overflow: hidden; }
.fig-body { padding: 12px; }
.fig-body svg { width: 100%; height: auto; max-width: 980px; margin-inline: auto; }
.fig figcaption, .slot figcaption {
  font-size: 11.5px; line-height: 1.45; color: #4a4f63; padding: 8px 12px; border-top: 1px dotted var(--muted-indigo); background: var(--surface);
}
.fig figcaption b, .slot figcaption b { color: var(--ink-soft); text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; margin-right: 4px; }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.diagram {
  display: block; position: relative; background: #f1e6fb; border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); overflow: hidden;
}
.diagram img { width: 100%; height: auto; }
.diagram.scroll { max-height: 760px; overflow-y: auto; }
.diagram-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px; background: var(--surface); border-top: 1px dotted var(--muted-indigo); }

/* ---------- image slots (drop a file at data-src and it appears) ---------- */
.slot { border: 1px solid #000; border-radius: var(--r-sm); overflow: hidden; background: var(--carbon); }
.slot .frame { position: relative; aspect-ratio: var(--ratio, 16 / 9); background: var(--carbon); }
.slot .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.slot.contain .frame img { object-fit: contain; }
.slot .placeholder {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px;
  background-color: #2a2e3b;
  background-image: radial-gradient(rgba(159,190,231,.12) 1px, transparent 1.3px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px);
  background-size: 4px 4px, auto;
  color: var(--sky);
}
.slot.is-empty .placeholder { display: flex; }
.slot.is-empty .frame img { display: none; }
.placeholder .ph-badge { font-family: var(--f-pixel); font-size: 10px; background: var(--amber); color: var(--carbon); padding: 3px 6px; border-radius: var(--r-xs); }
.placeholder .ph-title { font-size: 13px; font-weight: 700; color: var(--surface); text-transform: uppercase; letter-spacing: .5px; }
.placeholder .ph-file { font-family: var(--f-lcd); font-size: 16px; color: var(--sky); }
.placeholder .ph-hint { font-size: 11px; color: var(--canvas); max-width: 46ch; }

/* ---------- flow diagrams (HTML) ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.flow-step {
  flex: 1 1 120px; min-width: 120px; position: relative;
  background: var(--surface); border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm);
  padding: 10px 10px 9px; margin: 0 18px 10px 0;
  box-shadow: 0 2px 0 var(--chrome-indigo);
}
.flow-step:last-child { margin-right: 0; }
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; right: -15px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border: solid var(--chrome-indigo); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.flow-step .n { font-family: var(--f-pixel); font-size: 9px; color: var(--muted-indigo); display: block; }
.flow-step .t { display: block; font-size: 12px; font-weight: 700; color: var(--carbon); text-transform: uppercase; letter-spacing: .4px; line-height: 1.2; margin: 2px 0 4px; }
.flow-step .d { display: block; font-size: 11.5px; color: #4a4f63; line-height: 1.4; }
.flow-step.hot { background: #eef1fb; border-color: var(--carbon); }
.flow.dark .flow-step { background: #2c3040; border-color: #000; box-shadow: 0 2px 0 #000; }
.flow.dark .flow-step .t { color: var(--surface); }
.flow.dark .flow-step .d { color: var(--sky); }
.flow.dark .flow-step:not(:last-child)::after { border-color: var(--sky); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); }
table.data th {
  background: var(--sky); color: var(--carbon); text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 7px 10px; border-bottom: 1px solid var(--hairline);
}
table.data td { padding: 7px 10px; border-bottom: 1px solid #e3e5ec; vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .win { font-weight: 700; color: var(--chrome-indigo); }

/* ---------- formula / code plates ---------- */
.formula {
  font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.6;
  color: var(--sky); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid #000; overflow-x: auto; white-space: pre-wrap;
}
.formula .c { color: var(--canvas); }
.formula .k { color: #fff; font-weight: 700; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--gap); }
.tile {
  background: var(--periwinkle); border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--chrome-indigo);
}
.tile .t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--carbon); }
.tile .d { display: block; font-size: 12px; color: #1d2340; margin-top: 4px; line-height: 1.4; }

/* ==========================================================================
   Right rail
   ========================================================================== */
.rail-btns { display: flex; flex-direction: column; gap: 4px; }
.rail-btn {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--surface); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 10px 12px; min-height: 40px;
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.rail-btn:hover { color: var(--amber); }
.rail-btn .ico { flex: none; width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--amber); color: var(--carbon); display: grid; place-items: center; font-family: var(--f-pixel); font-size: 9px; }
.rail-btn .arrow-chip { margin-left: auto; }

.info-box { background: var(--surface); border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 2px 0 var(--chrome-indigo); }
.info-tab {
  display: block; background: linear-gradient(180deg, #f5c25e, var(--amber)); color: var(--carbon);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 10px;
  border-bottom: 1px solid #8a5d10;
}
.info-body { padding: 12px; font-size: 12.5px; line-height: 1.5; }
.info-body p { margin: 0 0 8px; }
.info-body p:last-child { margin: 0; }

.spec { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.spec li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--muted-indigo); }
.spec li:last-child { border-bottom: 0; }
.spec .k { color: #4a4f63; }
.spec .v { font-weight: 700; color: var(--carbon); text-align: right; }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; align-items: center; gap: 8px; padding: 7px 0; text-decoration: none; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  border-bottom: 1px dotted var(--muted-indigo);
}
.toc li:last-child a { border-bottom: 0; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-pixel); font-weight: 400; font-size: 10px; color: var(--muted-indigo); width: 18px; }
.toc a:hover { color: var(--carbon); }

.stack-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.stack-chips span {
  font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: var(--r-xs);
  background: #eef0f6; color: var(--ink-soft); border: 1px solid #c3c9dc;
}

/* ==========================================================================
   Home-specific
   ========================================================================== */
.featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.feat {
  display: flex; flex-direction: column; text-decoration: none; color: var(--surface); font-weight: 400;
  border: 1px solid #000; border-radius: var(--r-sm); overflow: hidden; padding: 3px;
  box-shadow: 0 2px 0 var(--chrome-indigo);
}
.feat:hover { color: var(--surface); }
.feat:hover .feat-thumb { filter: saturate(1.15) brightness(1.04); }
.feat-thumb { aspect-ratio: 16 / 10; border-radius: 2px; overflow: hidden; position: relative; display: grid; place-items: center; }
.feat-thumb .display { font-size: 24px; -webkit-text-stroke: 1.5px var(--carbon); text-shadow: 3px 3px 0 var(--carbon); text-align: center; padding: 0 6px; transform: skewX(-6deg); }
.feat-cap { padding: 8px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.feat-cap .u { font-family: var(--f-pixel); font-size: 10px; color: var(--sky); }
.feat-cap .s { font-size: 12px; color: #dfe4f2; line-height: 1.4; }
.feat-cap .go-line { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--amber); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; border-left: 2px dotted var(--muted-indigo); }
.timeline li { position: relative; padding: 0 0 12px 26px; font-size: 12.5px; }
.timeline li::before { content: ""; position: absolute; left: 1px; top: 5px; width: 10px; height: 10px; background: var(--chrome-indigo); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--chrome-indigo); }
.timeline .when { font-family: var(--f-pixel); font-size: 10px; color: var(--muted-indigo); display: block; }

/* ==========================================================================
   Pager + footer
   ========================================================================== */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager a {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-decoration: none;
  color: var(--surface); border: 1px solid #000; border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--chrome-indigo);
}
.pager a:hover { color: var(--amber); }
.pager .dir { font-family: var(--f-pixel); font-size: 10px; color: var(--canvas); }
.pager .t { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.pager a.next { text-align: right; align-items: flex-end; }

.footer-wrap { margin-top: calc(var(--gap) * 1.5); margin-bottom: calc(var(--gap) * 1.5); filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.footer {
  padding: 20px 24px; color: var(--sky); font-size: 11px; line-height: 1.5;
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.footer a { color: var(--sky); }
.footer a:hover { color: var(--surface); }
.footer .links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--amber); color: var(--carbon); border: 1px solid #8a5d10; border-radius: var(--r-xs);
  padding: 5px 8px; font-family: var(--f-pixel); font-size: 9px; line-height: 1.1; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.badge strong { font-family: var(--f-ui); font-size: 11px; font-weight: 900; letter-spacing: .5px; }

/* ==========================================================================
   Responsive (modern port of a fixed-canvas design)
   ========================================================================== */
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 28px 20px 24px; }
  .featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --chamfer: 10px; }
  .masthead { flex-direction: column; align-items: stretch; gap: 0; }
  .now { align-items: flex-start; text-align: left; margin-bottom: 10px; }
  .now-chips { justify-content: flex-start; }
  .bubble { margin-bottom: 10px; }
  .navbar { flex-wrap: wrap; gap: 8px; }
  .nav-links { order: 3; width: 100%; }
  .nav-links a { padding: 12px 10px; }
  .chip { padding: 10px 12px; }
  .featured, .fig-pair, .pager { grid-template-columns: minmax(0, 1fr); }
  .flow { flex-direction: column; }
  .flow-step { margin: 0 0 18px 0; }
  .flow-step:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -15px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .footer { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: auto minmax(0, 1fr); }
  .row .row-meta { grid-column: 2; }
  .row .arrow-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { animation: none !important; }
}

/* decorative seismograph trace on SeismicSoCal hero */
@keyframes trace { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
.anim-trace { stroke-dasharray: 1200; animation: trace 4s ease-out forwards; }

/* ==========================================================================
   Wide screens: use the extra width instead of centering a narrow column
   ========================================================================== */
@media (min-width: 1400px) {
  .panel-body { padding: 20px 24px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
  .tagline { font-size: 18px; }
  .stat .v { font-size: 46px; }
  .featured .feat-thumb .display { font-size: 32px; }
}
@media (min-width: 1700px) {
  .fig-pair.wide3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 2000px) {
  body { font-size: 17px; }
  .tagline { font-size: 22px; }
  .hero-eyebrow, .tag { font-size: 13px; }
  .hero-art .screen { max-width: 820px; margin-left: auto; }
}

/* ==========================================================================
   Avatar bounce (masthead)
   ========================================================================== */
.avatar-link { flex: none; display: block; border-radius: var(--r-sm); }
@keyframes avatar-bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(0) scale(1.08, .9); }
  45%  { transform: translateY(-14px) scale(.95, 1.06); }
  65%  { transform: translateY(0) scale(1.06, .93); }
  80%  { transform: translateY(-4px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.avatar { transform-origin: 50% 100%; }
/* masthead mascot wears the Cal cap; the wrap moves as one piece on hover */
.avatar-wrap { position: relative; display: block; transform-origin: 50% 100%; }
.avatar-wrap .tip-acc.hat { width: 46px; top: -19px; }
.bubble a { color: var(--chrome-indigo); text-decoration: none; font-weight: 400; }
.bubble a:hover { color: var(--carbon); text-decoration: underline; }

/* Kigumi hero field: pale sky with a halftone wash */
.field-sky { background-color: var(--sky);
  background-image: radial-gradient(rgba(61,79,151,.16) 1px, transparent 1.4px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(160deg, #a9c6ec, #6f8fcf);
  background-size: 5px 5px, auto, auto; }

/* ==========================================================================
   Roles I'm targeting (home)
   ========================================================================== */
.roles-intro { margin: 0 0 14px; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.role {
  display: flex; flex-direction: column; background: var(--platinum);
  border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 var(--chrome-indigo);
}
.role-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #000; }
.role-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--surface); }
.role-ico {
  flex: none; min-width: 30px; height: 22px; padding: 0 5px; display: grid; place-items: center;
  font-family: var(--f-pixel); font-size: 10px; color: var(--carbon);
  background: var(--sky); border: 1px solid #000; border-radius: var(--r-xs);
}
.role-pitch { margin: 0; padding: 10px 12px 4px; font-size: 13px; font-weight: 700; color: var(--carbon); }
.proofs { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 12px; }
.proof-label { font-family: var(--f-pixel); font-size: 9px; color: var(--muted-indigo); text-transform: uppercase; }
.proof {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; background: var(--surface); border: 1px solid #c7c9d3; border-radius: var(--r-xs);
  text-decoration: none; font-weight: 400; color: var(--ink);
}
.proof:hover { border-color: var(--chrome-indigo); background: #f4f6fc; }
.proof-where { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.proof-what { display: block; font-size: 11.5px; line-height: 1.35; color: #4a4f63; }


/* ==========================================================================
   Overflow safety: long words (e.g. HISTGRADIENTBOOSTING) wrap inside their box
   ========================================================================== */
.tile, .stat, .row, .role, .proof, .flow-step, .feat-cap, .info-body, .spec li, .stack-chips span { min-width: 0; }
.tile .t, .tile .d, .stat .k, .stat .b, .row-title, .row-sub, .flow-step .t, .flow-step .d,
.proof-where, .proof-what, .role-head h3, .spec .v, .info-tab, .label-bar, .placeholder .ph-file {
  overflow-wrap: anywhere; hyphens: auto;
}
.tile { container-type: inline-size; }
.tile .t { font-size: clamp(10px, 6.2cqi, 12.5px); }
.stat { container-type: inline-size; }
.stat .v { font-size: clamp(28px, 22cqi, 52px); }

/* ==========================================================================
   Motion. Everything here is opt-in via the .js class and off for reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* scroll reveal */
  .js .reveal { opacity: 0; transform: translateY(18px); }
  .js .reveal.in {
    opacity: 1; transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0ms);
  }

  /* hero entrance */
  @keyframes hero-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes title-pop {
    0% { opacity: 0; transform: skewX(-6deg) translateY(16px) scale(.94); }
    60% { opacity: 1; transform: skewX(-6deg) translateY(-3px) scale(1.02); }
    100% { opacity: 1; transform: skewX(-6deg); }
  }
  .js .hero-wrap { animation: hero-in .8s ease both; }
  .js .hero .display { animation: title-pop 1s .15s cubic-bezier(.2, .8, .2, 1) both; }
  .js .hero .tagline, .js .hero .hero-meta, .js .hero .hero-cta { animation: hero-in .8s both; }
  .js .hero .tagline { animation-delay: .35s; }
  .js .hero .hero-meta { animation-delay: .45s; }
  .js .hero .hero-cta { animation-delay: .55s; }
  .js .hero-art .screen { animation: hero-in 1s .3s both; }

  /* chart marks grow when their figure scrolls into view */
  .js svg .bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
  .js svg .vbar { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
  .js svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .fig.in svg .bar, .js .fig.in svg .vbar { transform: none; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  .js .fig.in svg .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s ease-out; }
  .js .hero-art svg .vbar { transform: none; animation: vbar-in 1.2s .6s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes vbar-in { from { transform: scaleY(0); } to { transform: none; } }

  /* hover: plates lift like pressed-out plastic */
  .tile, .feat, .role, .stat, .fig, .slot, .proof, .row, .rail-btn, .pager a, .chip, .flow-step {
    transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
  }
  .tile:hover, .role:hover, .flow-step:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 5px 0 var(--chrome-indigo); }
  .feat:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--chrome-indigo); }
  .stat:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 var(--chrome-indigo); }
  .stat:hover .v { text-shadow: 0 0 12px rgba(159,190,231,.7); }
  .fig:hover, .slot:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(61,79,151,.35); }
  .proof:hover, a.row:hover { transform: translateX(3px); }
  .rail-btn:hover { transform: translateX(3px); }
  .pager a:hover { transform: translateY(-2px); }
  .arrow-chip, .disc { transition: transform .25s ease; }
  a:hover > .arrow-chip, a:hover .go-line .arrow-chip, .go:hover .disc { transform: translateX(3px); }
}

/* ==========================================================================
   Mascot tips: the masthead mascot points (white glove, index finger) at key info
   ========================================================================== */
.tip { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 6px; max-width: 100%; }
.tip-mascot {
  flex: none; display: block; width: 44px; height: 44px; cursor: pointer; outline-offset: 3px;
  border: 2px solid var(--carbon); border-radius: var(--r-sm); background: var(--surface);
  box-shadow: 3px 3px 0 var(--chrome-indigo);
}
.tip-avatar { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tip-bubble {
  position: relative; margin: 0 0 8px; min-width: 0;
  background: var(--surface); color: var(--carbon);
  border: 2px solid var(--carbon); border-radius: var(--r-lg);
  padding: 7px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.35;
  box-shadow: 2px 2px 0 rgba(61,79,151,.35);
}
.tip-bubble::before, .tip-bubble::after {
  content: ""; position: absolute; left: -12px; bottom: 7px;
  border: 7px solid transparent; border-right: 10px solid var(--carbon); border-left: 0;
}
.tip-bubble::after { left: -8px; bottom: 8px; border-width: 6px 9px 6px 0; border-right-color: var(--surface); }
/* pointer props: the wrap sets direction, .tip-spin does one-off tricks (site.js), the svg idles */
.tip-hand-wrap { flex: none; display: block; width: 48px; height: 36px; align-self: flex-end; }
.tip-hand-wrap.hand.down { transform: rotate(90deg); margin: 0 0 -14px -4px; }
.tip-hand-wrap.hand.up { transform: rotate(-90deg); margin: 0 -2px 26px; }
/* scholar: magnifying glass */
.tip-hand-wrap.scholar { width: 40px; height: 40px; }
.tip-hand-wrap.scholar.down { margin: 0 0 -10px -2px; }
.tip-hand-wrap.scholar.up { transform: scaleY(-1); margin: 0 0 18px; }
/* explorer: compass, the needle points at the target */
.tip-hand-wrap.explorer { width: 40px; height: 40px; --dir: 180deg; }
.tip-hand-wrap.explorer.up { --dir: 0deg; margin-bottom: 14px; }
.tip-compass .needle { transform-box: view-box; transform-origin: 20px 20px; transform: rotate(var(--dir)); }
/* wizard: wand angled at the target */
.tip-hand-wrap.wizard { width: 90px; height: 26px; }
.tip-hand-wrap.wizard.down { transform: rotate(38deg); transform-origin: 0 50%; margin: 0 -34px 46px -4px; }
.tip-hand-wrap.wizard.up { transform: rotate(-44deg); transform-origin: 0 50%; margin: 0 -28px 4px -2px; }
/* arcade: LOOK sign on a post */
.tip-hand-wrap.arcade { width: 50px; height: 52px; }
.tip-hand-wrap.arcade.down { margin-bottom: -6px; }
/* detective: flashlight with a beam */
.tip-hand-wrap.detective { width: 72px; height: 26px; }
.tip-hand-wrap.detective.down { transform: rotate(52deg); transform-origin: 0 50%; margin: 0 -40px 38px -6px; }
.tip-hand-wrap.detective.up { transform: rotate(-56deg); transform-origin: 0 50%; margin: 0 -36px 0 -4px; }
/* builder: crane lowering a hook (above only) */
.tip-hand-wrap.builder { width: 64px; height: 71px; margin-bottom: -22px; }
/* pirate: telescoping spyglass */
.tip-hand-wrap.pirate { width: 62px; height: 16px; }
.tip-hand-wrap.pirate.down { transform: rotate(58deg); transform-origin: 0 50%; margin: 0 -30px 34px -4px; }
.tip-hand-wrap.pirate.up { transform: rotate(-60deg); transform-origin: 0 50%; margin: 0 -26px 2px -2px; }
/* berkeley: Cal pennant */
.tip-hand-wrap.berkeley { width: 66px; height: 39px; }
.tip-hand-wrap.berkeley.down { transform: rotate(90deg); margin: 0 -10px -14px -12px; }
.tip-hand-wrap.berkeley.up { transform: rotate(-90deg); margin: 0 -10px 24px -10px; }
.tip-spin { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.tip-prop { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(2px 2px 0 rgba(61,79,151,.45)); }

/* fairy: butterfly flits toward the target (no rotation; --fy flips it for "up") */
.tip-hand-wrap.fairy { width: 46px; height: 39px; --fy: 1; }
.tip-hand-wrap.fairy.down { margin: 0 0 -6px 0; }
.tip-hand-wrap.fairy.up { --fy: -1; margin-bottom: 24px; }
/* dj: record + sound waves */
.tip-hand-wrap.dj { width: 66px; height: 37px; }
.tip-hand-wrap.dj.down { transform: rotate(90deg); margin: 0 -12px -16px -12px; }
.tip-hand-wrap.dj.up { transform: rotate(-90deg); margin: 0 -12px 28px -12px; }
/* referee: striped sleeve pointing, with a pop-up check */
.tip-hand-wrap.referee { width: 66px; height: 30px; }
.tip-hand-wrap.referee.down { transform: rotate(90deg); margin: 0 -16px -18px -18px; }
.tip-hand-wrap.referee.up { transform: rotate(-90deg); margin: 0 -16px 32px -16px; }
/* soldier: binoculars */
.tip-hand-wrap.soldier { width: 50px; height: 26px; }
.tip-hand-wrap.soldier.down { transform: rotate(62deg); transform-origin: 0 50%; margin: 0 -22px 34px -4px; }
.tip-hand-wrap.soldier.up { transform: rotate(-62deg); transform-origin: 0 50%; margin: 0 -20px 0 -2px; }
/* gamer: controller (per-direction artwork, no rotation) */
.tip-hand-wrap.gamer { width: 66px; height: 58px; }
.tip-hand-wrap.gamer.down { margin-bottom: -20px; }
.tip-hand-wrap.gamer.up { margin-bottom: 10px; }
/* gardener: watering can tipping toward the target (above only) */
.tip-hand-wrap.gardener { width: 72px; height: 53px; transform: rotate(22deg); transform-origin: 20% 60%; margin: 0 -8px -10px 0; }

/* accessories worn on the mascot tile */
.tip-mascot { position: relative; }
.tip-acc { position: absolute; pointer-events: none; height: auto; max-width: none; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.25)); }
.tip-acc.hat { left: 50%; top: -14px; width: 36px; transform: translateX(-50%) rotate(-8deg); }
.tip-acc.hat.tall { top: -26px; width: 34px; }
/* headphones span the tile: the cups sit centred on its left and right edges */
.tip-acc.phones { left: -7px; top: -11px; width: 58px; }
.tip-acc.wings { left: -20px; top: -8px; width: 84px; filter: drop-shadow(1px 1px 0 rgba(61,79,151,.35)); }
.tip-acc.crown-flowers { top: -9px; width: 34px; transform: translateX(-50%) rotate(-4deg); }
.tip.above:has(.tip-acc) { margin-top: 30px; }
.tip.above:has(.tip-acc.tall) { margin-top: 40px; }

/* side overlay: the mascot sits on the target's lower corner and points up into it */
.tip-anchor { position: relative; margin-bottom: 64px; }
.tip-anchor.right > .fig figcaption, .tip-anchor.right > .slot figcaption { padding-right: 76px; }
.tip-anchor.left > .fig figcaption, .tip-anchor.left > .slot figcaption { padding-left: 76px; }
.tip.side { position: absolute; bottom: -50px; margin: 0; z-index: 3; align-items: flex-end; gap: 4px; pointer-events: none; }
.tip.side .tip-mascot, .tip.side .tip-bubble { pointer-events: auto; }
.tip.side.right { right: -10px; }
.tip.side.left { left: -10px; }
.tip.side .tip-bubble { max-width: 320px; margin-bottom: 4px; }
.tip.side.right .tip-bubble::before { left: auto; right: -12px; border-right: 0; border-left: 10px solid var(--carbon); }
.tip.side.right .tip-bubble::after { left: auto; right: -8px; border-width: 6px 0 6px 9px; border-right-color: transparent; border-left-color: var(--surface); }

/* role cards: résumé shortcut */
.role-cv {
  margin-left: auto; flex: none; text-decoration: none;
  font-family: var(--f-pixel); font-size: 10px; font-weight: 400; color: var(--carbon);
  background: var(--amber); border: 1px solid #8a5d10; border-radius: var(--r-xs); padding: 3px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.role-cv:hover { background: var(--nav-gold); color: var(--carbon); }

@media (prefers-reduced-motion: no-preference) {
  /* idle loops (always on): the glove taps toward the target, the lens scans */
  @keyframes hand-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  @keyframes lens-scan {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(5px, -3px) rotate(6deg); }
    50% { transform: translate(0, -6px) rotate(0); }
    75% { transform: translate(-5px, -3px) rotate(-6deg); }
  }
  .tip-hand { animation: hand-point 1.6s ease-in-out infinite; }
  .tip-lens { animation: lens-scan 3.2s ease-in-out infinite; }

  /* explorer: the needle swings, then settles on the target */
  @keyframes needle-seek {
    0% { transform: rotate(calc(var(--dir) - 70deg)); } 25% { transform: rotate(calc(var(--dir) + 40deg)); }
    45% { transform: rotate(calc(var(--dir) - 18deg)); } 60% { transform: rotate(calc(var(--dir) + 7deg)); }
    72%, 100% { transform: rotate(var(--dir)); } }
  .tip-compass .needle { animation: needle-seek 4s ease-in-out infinite; }
  /* wizard: the wand taps and its sparkles twinkle */
  @keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.15); } }
  .tip-wand { animation: hand-point 1.5s ease-in-out infinite; }
  .tip-wand .sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 1.2s ease-in-out infinite; }
  .tip-wand .s2 { animation-delay: .4s; }
  .tip-wand .s3 { animation-delay: .8s; }
  @keyframes wand-glow { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
  .tip-wand .glow, .tip-wand .tipstar { transform-box: fill-box; transform-origin: center; animation: wand-glow 1.8s ease-in-out infinite; }
  /* arcade: the sign sways on its post */
  @keyframes sign-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  .tip-sign { transform-origin: 50% 100%; animation: sign-sway 2.2s ease-in-out infinite; }
  /* detective: the beam flickers and sweeps */
  @keyframes beam-flicker { 0%, 100% { opacity: .55; } 40% { opacity: .9; } 46% { opacity: .5; } 52% { opacity: .85; } }
  @keyframes flash-sweep { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
  .tip-flash { transform-origin: 0 50%; animation: flash-sweep 3s ease-in-out infinite; }
  .tip-flash .beam { animation: beam-flicker 2.4s linear infinite; }
  /* builder: the hook bobs on its cable */
  @keyframes hook-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
  @keyframes cable-stretch { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.19); } }
  .tip-crane .hook { animation: hook-bob 2s ease-in-out infinite; }
  .tip-crane .cable { transform-box: fill-box; transform-origin: 50% 0; animation: cable-stretch 2s ease-in-out infinite; }
  /* pirate: the spyglass extends and retracts */
  @keyframes seg2-out { 0%, 100% { transform: translateX(-10px); } 45%, 70% { transform: translateX(0); } }
  @keyframes seg3-out { 0%, 100% { transform: translateX(-24px); } 45%, 70% { transform: translateX(0); } }
  @keyframes glint { 0%, 55%, 100% { opacity: 0; } 62% { opacity: 1; } }
  .tip-spy .seg2 { animation: seg2-out 3s ease-in-out infinite; }
  .tip-spy .seg3 { animation: seg3-out 3s ease-in-out infinite; }
  .tip-spy .glint { animation: glint 3s ease-in-out infinite; }
  /* berkeley: the pennant flutters */
  @keyframes flutter { 0%, 100% { transform: skewY(0) scaleX(1); } 25% { transform: skewY(6deg) scaleX(.96); } 75% { transform: skewY(-6deg) scaleX(.98); } }
  .tip-pennant .flag { transform-box: fill-box; transform-origin: 0 50%; animation: flutter 1.6s ease-in-out infinite; }

  /* fairy: wings flap; the butterfly flits toward the target and back */
  @keyframes wing-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
  @keyframes flit {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(5px, calc(var(--fy) * 8px)) rotate(8deg); }
    50% { transform: translate(-2px, calc(var(--fy) * 15px)) rotate(-6deg); }
    75% { transform: translate(-5px, calc(var(--fy) * 6px)) rotate(4deg); } }
  .tip-butterfly { animation: flit 3.4s ease-in-out infinite; }
  .tip-butterfly .wl { transform-box: view-box; transform-origin: 20px 18px; animation: wing-flap .32s ease-in-out infinite; }
  .tip-butterfly .wr { transform-box: view-box; transform-origin: 20px 18px; animation: wing-flap .32s ease-in-out infinite; }
  /* dj: the record spins, sound waves pulse outward */
  @keyframes record-spin { to { transform: rotate(360deg); } }
  @keyframes wave-pulse { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
  .tip-vinyl .disc { transform-box: view-box; transform-origin: 17px 17px; animation: record-spin 2.2s linear infinite; }
  .tip-vinyl .w1, .tip-vinyl .w2, .tip-vinyl .w3 { animation: wave-pulse 1.2s ease-in-out infinite; }
  .tip-vinyl .w2 { animation-delay: .2s; }
  .tip-vinyl .w3 { animation-delay: .4s; }
  /* referee: points, and a check pops up now and then */
  @keyframes check-pop { 0%, 55%, 100% { transform: scale(0); } 65% { transform: scale(1.25); } 75%, 92% { transform: scale(1); } }
  .tip-refarm { animation: hand-point 1.6s ease-in-out infinite; }
  .tip-refarm .check { transform-box: fill-box; transform-origin: center; animation: check-pop 3.6s ease-in-out infinite; }
  /* soldier: binoculars scan, the lens glints */
  @keyframes binos-scan { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
  .tip-binos { transform-origin: 0 50%; animation: binos-scan 3.2s ease-in-out infinite; }
  .tip-binos .glint { animation: glint 3.2s ease-in-out infinite; }
  /* gamer: the lit D-pad arrow and the beam blink */
  @keyframes pad-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes beam-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  .tip-pad .lit { animation: pad-blink 1s steps(2, jump-none) infinite; }
  .tip-pad .beam { animation: pad-blink 1s steps(2, jump-none) infinite; }
  .tip-hand-wrap.gamer.down .tip-pad { animation: beam-bob 1.4s ease-in-out infinite; }
  /* gardener: drops fall from the spout */
  @keyframes drip-fall { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
  .tip-can .drip { animation: drip-fall 1.2s ease-in infinite; }
  .tip-can .d2 { animation-delay: .4s; }
  .tip-can .d3 { animation-delay: .8s; }

  /* pointer tricks: site.js plays one at random every few seconds on each .tip-spin */
  @keyframes t-spin { to { transform: rotate(360deg); } }
  @keyframes t-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }
  @keyframes t-boop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.9); } }
  @keyframes t-flip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
  @keyframes t-double-tap { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(10px); } 40%, 80% { transform: translateX(0); } }
  .trick-spin { animation: t-spin .9s cubic-bezier(.5, 0, .3, 1); }
  .trick-wiggle { animation: t-wiggle .9s ease-in-out; }
  .trick-boop { animation: t-boop .7s ease-in-out; }
  .trick-flip { animation: t-flip .8s ease-in-out; }
  .trick-double-tap { animation: t-double-tap .9s ease-in-out; }
  @keyframes t-blink { 0%, 100% { opacity: 1; } 20%, 60% { opacity: .15; } 40%, 80% { opacity: 1; } }
  .trick-blink { animation: t-blink .9s steps(1, end); }

  /* mascot moves: hovering (or focusing) the mascot plays one of these at random, never the same twice in a row */
  @keyframes m-hop-flip {
    0% { transform: translateY(0) rotateY(0) scale(1); } 25% { transform: translateY(2px) scale(1.08, .9); }
    55% { transform: translateY(-16px) rotateY(180deg) scale(.96, 1.05); } 80% { transform: translateY(0) rotateY(360deg) scale(1.05, .95); }
    100% { transform: translateY(0) rotateY(360deg) scale(1); } }
  @keyframes m-bounce {
    0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: scale(1.08, .9); } 45% { transform: translateY(-14px) scale(.95, 1.06); }
    65% { transform: translateY(0) scale(1.06, .93); } 80% { transform: translateY(-4px); } }
  @keyframes m-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); }
    45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
  @keyframes m-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.85); } 100% { transform: rotate(360deg) scale(1); } }
  @keyframes m-squish { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.3, .65); } 55% { transform: scale(.85, 1.2); } 75% { transform: scale(1.08, .94); } }
  @keyframes m-peek { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(12px) scaleY(.6); } 60% { transform: translateY(-10px) scaleY(1.1); } }
  @keyframes m-tilt-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-12deg) translateX(-3px); } 40%, 80% { transform: rotate(12deg) translateX(3px); } }
  @keyframes m-jelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(.85, 1.15); } 50% { transform: scale(1.15, .85); } 75% { transform: scale(.95, 1.05); } }
  .tip-mascot, .avatar, .avatar-wrap { transform-origin: 50% 100%; }
/* masthead mascot wears the Cal cap; the wrap moves as one piece on hover */
.avatar-wrap { position: relative; display: block; transform-origin: 50% 100%; }
.avatar-wrap .tip-acc.hat { width: 46px; top: -19px; }
  .move-hop-flip { animation: m-hop-flip 1.1s cubic-bezier(.3, .7, .4, 1); }
  .move-bounce { animation: m-bounce 1.2s cubic-bezier(.3, .7, .4, 1); }
  .move-shake { animation: m-shake .8s ease-in-out; }
  .move-spin { animation: m-spin 1s cubic-bezier(.5, 0, .3, 1); transform-origin: 50% 50%; }
  .move-squish { animation: m-squish .9s ease-in-out; }
  .move-peek { animation: m-peek 1s ease-in-out; }
  .move-tilt-wave { animation: m-tilt-wave 1.1s ease-in-out; }
  .move-jelly { animation: m-jelly .8s ease-in-out; }

  @keyframes bubble-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }
  .tip:hover .tip-bubble { animation: bubble-wiggle .5s ease-in-out 2; }

  /* tips pop in when they scroll into view */
  .js .tip.reveal { opacity: 0; transform: translateY(10px) scale(.96); }
  .js .tip.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
}

@media (max-width: 640px) {
  .tip-mascot { width: 36px; height: 36px; }
  .tip-hand-wrap.hand { width: 34px; height: 26px; }
  .tip-hand-wrap.scholar, .tip-hand-wrap.explorer { width: 32px; height: 32px; }
  .tip-acc.hat { width: 30px; top: -12px; }
  .tip-acc.phones { width: 48px; left: -6px; top: -9px; }
  .tip-acc.wings { width: 62px; left: -13px; top: -5px; }
  .tip.side .tip-bubble { max-width: 190px; font-size: 11.5px; }
  .tip.side.right { right: -6px; }
  .tip.side.left { left: -6px; }
}

/* real image figures (charts and screenshots supplied as files) */
.fig-img { display: block; width: 100%; height: auto; border-radius: 2px; background: #fff; }
/* keep room for a side overlay even when its figure is the last thing in a panel */
.panel-body > .tip-anchor:last-child { margin-bottom: 64px; }
.fig-body .fig-img { margin-inline: auto; }
.fig-img.phone { width: auto; max-height: 720px; }
.tip.above + .table-wrap, .tip.above + .fig, .tip.above + .stats { margin-top: 20px; }

/* ==========================================================================
   Research steps (CBU "How I approach research")
   ========================================================================== */
.steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.step {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--chrome-indigo); border-radius: var(--r-sm); padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 var(--chrome-indigo);
}
.step-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #000; border-radius: var(--r-xs);
  font-family: var(--f-lcd); font-size: 22px; color: var(--sky); }
.step-body { min-width: 0; }
.step h4 { margin: 2px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.step-what { margin: 0 0 6px !important; font-weight: 700; color: var(--carbon); font-size: 13px; }
.step-eg { margin: 0; padding-left: 16px; font-size: 12.5px; color: #3a3f52; }
.step-eg li { margin: 0 0 4px; }
.step-eg li::marker { color: var(--chrome-indigo); }
.steps-loop { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 !important; font-size: 12px; font-weight: 700;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }
.steps-loop .disc { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .step { transition: transform .25s ease, box-shadow .25s ease; }
  .step:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 var(--chrome-indigo); }
}

/* ==========================================================================
   Mascot conversations: characters trade short messages, revealed one by one (site.js)
   ========================================================================== */
.chat {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  margin: 22px 0 18px; padding: 24px 16px 14px;
  background: #f1f3f9; border: 1px dashed var(--muted-indigo); border-radius: var(--r-md);
}
.msg { display: flex; align-items: flex-end; gap: 12px; max-width: min(100%, 680px); }
.msg.right { flex-direction: row-reverse; align-self: flex-end; }
.msg .tip-mascot { margin-top: 18px; }
.msg-bubble {
  position: relative; margin: 0 0 6px !important; min-width: 0;
  background: var(--surface); color: var(--carbon);
  border: 2px solid var(--carbon); border-radius: var(--r-lg);
  padding: 8px 12px; font-size: 13px; font-weight: 700; line-height: 1.4;
  box-shadow: 2px 2px 0 rgba(61,79,151,.35);
}
.msg-bubble::before, .msg-bubble::after { content: ""; position: absolute; bottom: 8px; border: 7px solid transparent; }
.msg.left .msg-bubble::before { left: -12px; border-right: 10px solid var(--carbon); border-left: 0; }
.msg.left .msg-bubble::after { left: -8px; bottom: 9px; border-width: 6px 9px 6px 0; border-right-color: var(--surface); }
.msg.right .msg-bubble { background: #e9eefb; }
.msg.right .msg-bubble::before { right: -12px; border-left: 10px solid var(--carbon); border-right: 0; }
.msg.right .msg-bubble::after { right: -8px; bottom: 9px; border-width: 6px 0 6px 9px; border-left-color: #e9eefb; }
.chat-replay {
  position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-pixel); font-size: 10px; color: var(--muted-indigo); padding: 4px 6px; border-radius: var(--r-xs);
}
.chat-replay:hover { color: var(--carbon); background: rgba(61,79,151,.1); }
.typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-indigo); display: block; }

/* messages start hidden only when the script is running; without JS everything shows */
.js .chat.armed .msg { opacity: 0; transform: translateY(8px); }
.js .chat.armed .msg.shown { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.chat:not(.armed) .chat-replay { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
  .typing i { animation: typing-dot 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; }
  .typing i:nth-child(3) { animation-delay: .3s; }
}
@media (max-width: 640px) {
  .chat { padding: 22px 10px 12px; }
  .msg-bubble { font-size: 12px; }
}