/* ===== STAFF AUTH: hide body until JS confirms cookie ===== */
body { visibility: hidden; }
body.authed { visibility: visible; }

html { overflow-x: hidden; }

/* ===== BASE DARK THEME ===== */
:root {
  --bg:       #16181D;
  --bg2:      #1E2128;
  --bg3:      #252830;
  --line:     #353945;
  --line2:    #424859;
  --text:     #E8E4DC;
  --text2:    #A8A49C;
  --text3:    #6A6760;

  --accent:    #5A9A5A;
  --accent2:   #3D6B3D;
  --accent-bg: rgba(90,154,90,0.10);
  --accent-dim: rgba(90,154,90,0.05);

  --red:      #D94F4F;
  --red2:     #A83030;
  --red-bg:   rgba(217,79,79,0.10);
  --teal:     #3EB489;
  --teal2:    #1A7A56;
  --teal-bg:  rgba(62,180,137,0.10);
  --blue:     #5B8DD9;
  --blue2:    #1A4A8A;
  --blue-bg:  rgba(91,141,217,0.10);

  --r:  6px;
  --rl: 10px;
}

/* ===== GAME GENRE THEMES ===== */
/* Each theme overrides accent colors to match the game's mood */

/* STRATEGY — Deep amber/gold: cerebral, focused */
.theme-strategy {
  --bg: #1A1914; --bg2: #221F18; --bg3: #2A2620;
  --line: #3D3628; --line2: #4A4232;
  --accent: #C49A3C; --accent2: #8A6B1E;
  --accent-bg: rgba(196,154,60,0.12); --accent-dim: rgba(196,154,60,0.06);
  --teal: #A89040; --teal2: #6B5A1A; --teal-bg: rgba(168,144,64,0.10);
  --blue: #D4A84A; --blue2: #7A5A10; --blue-bg: rgba(212,168,74,0.10);
}

/* PARTY — Vibrant magenta/pink: energy, fun, loud */
.theme-party {
  --bg: #1C1420; --bg2: #241A28; --bg3: #2E2232;
  --line: #402E42; --line2: #503A52;
  --accent: #E05CA0; --accent2: #A03070;
  --accent-bg: rgba(224,92,160,0.12); --accent-dim: rgba(224,92,160,0.06);
  --teal: #E87CB0; --teal2: #B04878; --teal-bg: rgba(232,124,176,0.10);
  --blue: #D45090; --blue2: #902060; --blue-bg: rgba(212,80,144,0.10);
}

/* COOPERATIVE — Warm teal/green: teamwork, harmony */
.theme-cooperative {
  --bg: #121C1A; --bg2: #182422; --bg3: #1E2C2A;
  --line: #2E3E3A; --line2: #3A4E48;
  --accent: #3EB489; --accent2: #1A7A56;
  --accent-bg: rgba(62,180,137,0.12); --accent-dim: rgba(62,180,137,0.06);
  --teal: #4EC89A; --teal2: #208A60; --teal-bg: rgba(78,200,154,0.10);
  --blue: #38A878; --blue2: #106A46; --blue-bg: rgba(56,168,120,0.10);
}

/* NATURE — Forest green/olive: natural, earthy, organic */
.theme-nature {
  --bg: #151A12; --bg2: #1C2218; --bg3: #242A20;
  --line: #343C2A; --line2: #424A36;
  --accent: #6B9E3A; --accent2: #3E6B18;
  --accent-bg: rgba(107,158,58,0.12); --accent-dim: rgba(107,158,58,0.06);
  --teal: #7DB040; --teal2: #4A7A18; --teal-bg: rgba(125,176,64,0.10);
  --blue: #8AB84A; --blue2: #507A20; --blue-bg: rgba(138,184,74,0.10);
}

/* SCI-FI — Electric purple/violet: futuristic, cosmic */
.theme-scifi {
  --bg: #18141E; --bg2: #1E1A26; --bg3: #262230;
  --line: #36304A; --line2: #443C5A;
  --accent: #8B6CDB; --accent2: #5A3AA8;
  --accent-bg: rgba(139,108,219,0.12); --accent-dim: rgba(139,108,219,0.06);
  --teal: #9B7CE8; --teal2: #6A4AB8; --teal-bg: rgba(155,124,232,0.10);
  --blue: #7B5CCB; --blue2: #4A2A98; --blue-bg: rgba(123,92,203,0.10);
}

/* OCEAN — Deep blue/aqua: water, depth, maritime */
.theme-ocean {
  --bg: #10181E; --bg2: #162026; --bg3: #1C282E;
  --line: #2A3A42; --line2: #364A54;
  --accent: #3A9AB0; --accent2: #1A6A80;
  --accent-bg: rgba(58,154,176,0.12); --accent-dim: rgba(58,154,176,0.06);
  --teal: #4AAAC0; --teal2: #2A7A90; --teal-bg: rgba(74,170,192,0.10);
  --blue: #2A8AA0; --blue2: #0A5A70; --blue-bg: rgba(42,138,160,0.10);
}

/* RACING — Hot red/orange: speed, adrenaline, velocity */
.theme-racing {
  --bg: #1E1412; --bg2: #261A16; --bg3: #30201C;
  --line: #44302A; --line2: #543C34;
  --accent: #E85030; --accent2: #B02010;
  --accent-bg: rgba(232,80,48,0.12); --accent-dim: rgba(232,80,48,0.06);
  --teal: #F06838; --teal2: #C03818; --teal-bg: rgba(240,104,56,0.10);
  --blue: #D84020; --blue2: #A01000; --blue-bg: rgba(216,64,32,0.10);
}

/* MEDIEVAL — Rich burgundy/maroon: castles, kingdoms, history */
.theme-medieval {
  --bg: #1C1412; --bg2: #241A16; --bg3: #2E221E;
  --line: #40302A; --line2: #503E36;
  --accent: #A8503A; --accent2: #703020;
  --accent-bg: rgba(168,80,58,0.12); --accent-dim: rgba(168,80,58,0.06);
  --teal: #B86040; --teal2: #804028; --teal-bg: rgba(184,96,64,0.10);
  --blue: #984030; --blue2: #602010; --blue-bg: rgba(152,64,48,0.10);
}

/* FANTASY — Mystic violet/indigo: magic, enchantment */
.theme-fantasy {
  --bg: #1A141E; --bg2: #221A26; --bg3: #2A2230;
  --line: #3C3048; --line2: #4A3C58;
  --accent: #9B59B6; --accent2: #6A2A8A;
  --accent-bg: rgba(155,89,182,0.12); --accent-dim: rgba(155,89,182,0.06);
  --teal: #AB69C6; --teal2: #7A3A9A; --teal-bg: rgba(171,105,198,0.10);
  --blue: #8B49A6; --blue2: #5A1A7A; --blue-bg: rgba(139,73,166,0.10);
}

/* ANCIENT — Sandstone/terracotta: civilizations, monuments */
.theme-ancient {
  --bg: #1C1610; --bg2: #241C16; --bg3: #2E241E;
  --line: #42342A; --line2: #524236;
  --accent: #C47840; --accent2: #8A5020;
  --accent-bg: rgba(196,120,64,0.12); --accent-dim: rgba(196,120,64,0.06);
  --teal: #D48850; --teal2: #9A6030; --teal-bg: rgba(212,136,80,0.10);
  --blue: #B46830; --blue2: #7A4010; --blue-bg: rgba(180,104,48,0.10);
}

/* TRADE — Rich gold/copper: wealth, markets, exchange */
.theme-trade {
  --bg: #1C1A10; --bg2: #242216; --bg3: #2E2A1E;
  --line: #423C28; --line2: #524A34;
  --accent: #D4A030; --accent2: #9A7010;
  --accent-bg: rgba(212,160,48,0.12); --accent-dim: rgba(212,160,48,0.06);
  --teal: #E4B040; --teal2: #AA8020; --teal-bg: rgba(228,176,64,0.10);
  --blue: #C49020; --blue2: #8A6000; --blue-bg: rgba(196,144,32,0.10);
}

/* ART — Soft rose/coral: creative, colorful, expressive */
.theme-art {
  --bg: #1E1418; --bg2: #261A20; --bg3: #30222A;
  --line: #44303A; --line2: #543E4A;
  --accent: #D87090; --accent2: #A04060;
  --accent-bg: rgba(216,112,144,0.12); --accent-dim: rgba(216,112,144,0.06);
  --teal: #E880A0; --teal2: #B05070; --teal-bg: rgba(232,128,160,0.10);
  --blue: #C86080; --blue2: #903050; --blue-bg: rgba(200,96,128,0.10);
}

/* FOOD — Warm orange/spice: appetizing, lively, tasty */
.theme-food {
  --bg: #1E1610; --bg2: #261C14; --bg3: #30241C;
  --line: #44342A; --line2: #544236;
  --accent: #E88030; --accent2: #B05010;
  --accent-bg: rgba(232,128,48,0.12); --accent-dim: rgba(232,128,48,0.06);
  --teal: #F09038; --teal2: #C06018; --teal-bg: rgba(240,144,56,0.10);
  --blue: #D87020; --blue2: #A04000; --blue-bg: rgba(216,112,32,0.10);
}

/* HORROR — Blood red/crimson: dark, tense, spooky */
.theme-horror {
  --bg: #1A1010; --bg2: #221414; --bg3: #2C1A1A;
  --line: #402424; --line2: #502E2E;
  --accent: #C03030; --accent2: #801010;
  --accent-bg: rgba(192,48,48,0.12); --accent-dim: rgba(192,48,48,0.06);
  --teal: #D04040; --teal2: #901818; --teal-bg: rgba(208,64,64,0.10);
  --blue: #B02020; --blue2: #700000; --blue-bg: rgba(176,32,32,0.10);
}

/* MYSTERY — Muted indigo/slate: suspense, clues, secrets */
.theme-mystery {
  --bg: #141620; --bg2: #1A1E28; --bg3: #222632;
  --line: #303848; --line2: #3E485A;
  --accent: #5B70A0; --accent2: #3A4A70;
  --accent-bg: rgba(91,112,160,0.12); --accent-dim: rgba(91,112,160,0.06);
  --teal: #6B80B0; --teal2: #4A5A80; --teal-bg: rgba(107,128,176,0.10);
  --blue: #4B6090; --blue2: #2A3A60; --blue-bg: rgba(75,96,144,0.10);
}

/* ABSTRACT — Cool grey/silver: clean, minimal, geometric */
.theme-abstract {
  --bg: #161718; --bg2: #1E1F22; --bg3: #26282C;
  --line: #383A40; --line2: #484A52;
  --accent: #8090A0; --accent2: #506070;
  --accent-bg: rgba(128,144,160,0.12); --accent-dim: rgba(128,144,160,0.06);
  --teal: #90A0B0; --teal2: #607080; --teal-bg: rgba(144,160,176,0.10);
  --blue: #708090; --blue2: #405060; --blue-bg: rgba(112,128,144,0.10);
}

/* CARD GAME — Emerald/jade: classic card table feel */
.theme-cardgame {
  --bg: #101C16; --bg2: #16241E; --bg3: #1E2C26;
  --line: #2C3E34; --line2: #3A4E44;
  --accent: #40A070; --accent2: #207040;
  --accent-bg: rgba(64,160,112,0.12); --accent-dim: rgba(64,160,112,0.06);
  --teal: #50B080; --teal2: #308050; --teal-bg: rgba(80,176,128,0.10);
  --blue: #309060; --blue2: #106030; --blue-bg: rgba(48,144,96,0.10);
}

/* DEXTERITY — Bright cyan/turquoise: playful, physical, active */
.theme-dexterity {
  --bg: #101A1E; --bg2: #142226; --bg3: #1C2A30;
  --line: #2A3C42; --line2: #384C54;
  --accent: #20B8C8; --accent2: #0888A0;
  --accent-bg: rgba(32,184,200,0.12); --accent-dim: rgba(32,184,200,0.06);
  --teal: #30C8D8; --teal2: #1898B0; --teal-bg: rgba(48,200,216,0.10);
  --blue: #10A8B8; --blue2: #087890; --blue-bg: rgba(16,168,184,0.10);
}

/* KIDS — Bright cheerful yellow/lime: fun, safe, playful */
.theme-kids {
  --bg: #1C1A12; --bg2: #242218; --bg3: #2E2A20;
  --line: #423C2A; --line2: #524C38;
  --accent: #E8B830; --accent2: #B08810;
  --accent-bg: rgba(232,184,48,0.12); --accent-dim: rgba(232,184,48,0.06);
  --teal: #F0C840; --teal2: #C09820; --teal-bg: rgba(240,200,64,0.10);
  --blue: #D8A820; --blue2: #A07800; --blue-bg: rgba(216,168,32,0.10);
}

/* TRAIN — Steel blue/railway: locomotives, routes */
.theme-train {
  --bg: #12161E; --bg2: #181E26; --bg3: #20262E;
  --line: #303A46; --line2: #3E4A58;
  --accent: #4A80B8; --accent2: #2A5088;
  --accent-bg: rgba(74,128,184,0.12); --accent-dim: rgba(74,128,184,0.06);
  --teal: #5A90C8; --teal2: #3A6098; --teal-bg: rgba(90,144,200,0.10);
  --blue: #3A70A8; --blue2: #1A4078; --blue-bg: rgba(58,112,168,0.10);
}

/* CITY — Urban blue-grey/concrete: buildings, architecture */
.theme-city {
  --bg: #14161A; --bg2: #1A1E24; --bg3: #22262C;
  --line: #323840; --line2: #424A52;
  --accent: #6888A8; --accent2: #385878;
  --accent-bg: rgba(104,136,168,0.12); --accent-dim: rgba(104,136,168,0.06);
  --teal: #7898B8; --teal2: #486888; --teal-bg: rgba(120,152,184,0.10);
  --blue: #587898; --blue2: #284868; --blue-bg: rgba(88,120,152,0.10);
}

/* FARM — Earthy brown/olive: harvest, agriculture */
.theme-farm {
  --bg: #1A1812; --bg2: #222018; --bg3: #2A2820;
  --line: #3C382A; --line2: #4C4838;
  --accent: #8A7A40; --accent2: #5A4A18;
  --accent-bg: rgba(138,122,64,0.12); --accent-dim: rgba(138,122,64,0.06);
  --teal: #9A8A50; --teal2: #6A5A28; --teal-bg: rgba(154,138,80,0.10);
  --blue: #7A6A30; --blue2: #4A3A08; --blue-bg: rgba(122,106,48,0.10);
}

/* DICE — Bright lime/yellow-green: luck, chance, roll */
.theme-dice {
  --bg: #161A12; --bg2: #1E2218; --bg3: #262C20;
  --line: #363E2A; --line2: #464E38;
  --accent: #A0C040; --accent2: #709018;
  --accent-bg: rgba(160,192,64,0.12); --accent-dim: rgba(160,192,64,0.06);
  --teal: #B0D050; --teal2: #80A028; --teal-bg: rgba(176,208,80,0.10);
  --blue: #90B030; --blue2: #608008; --blue-bg: rgba(144,176,48,0.10);
}

/* ESPIONAGE — Dark teal/cold: secrets, undercover, shadows */
.theme-espionage {
  --bg: #10181A; --bg2: #162022; --bg3: #1E282A;
  --line: #2C3A3C; --line2: #3A4A4C;
  --accent: #408080; --accent2: #185050;
  --accent-bg: rgba(64,128,128,0.12); --accent-dim: rgba(64,128,128,0.06);
  --teal: #509090; --teal2: #286060; --teal-bg: rgba(80,144,144,0.10);
  --blue: #307070; --blue2: #084040; --blue-bg: rgba(48,112,112,0.10);
}

/* WAR — Military olive/khaki: combat, tactical */
.theme-war {
  --bg: #181A12; --bg2: #202218; --bg3: #282A20;
  --line: #3A3C2A; --line2: #4A4C38;
  --accent: #88903A; --accent2: #586018;
  --accent-bg: rgba(136,144,58,0.12); --accent-dim: rgba(136,144,58,0.06);
  --teal: #98A04A; --teal2: #687028; --teal-bg: rgba(152,160,74,0.10);
  --blue: #788030; --blue2: #485008; --blue-bg: rgba(120,128,48,0.10);
}

/* TRAVEL — Warm sand/sunset: adventure, journey, exploration */
.theme-travel {
  --bg: #1C1610; --bg2: #241E16; --bg3: #2E261E;
  --line: #42362A; --line2: #524638;
  --accent: #D08848; --accent2: #985828;
  --accent-bg: rgba(208,136,72,0.12); --accent-dim: rgba(208,136,72,0.06);
  --teal: #E09858; --teal2: #A86838; --teal-bg: rgba(224,152,88,0.10);
  --blue: #C07838; --blue2: #884818; --blue-bg: rgba(192,120,56,0.10);
}

/* STEAMPUNK — Copper/bronze: gears, Victorian, brass */
.theme-steampunk {
  --bg: #1A1610; --bg2: #221E16; --bg3: #2C261E;
  --line: #40342A; --line2: #504236;
  --accent: #B87830; --accent2: #804A10;
  --accent-bg: rgba(184,120,48,0.12); --accent-dim: rgba(184,120,48,0.06);
  --teal: #C88840; --teal2: #905A20; --teal-bg: rgba(200,136,64,0.10);
  --blue: #A86820; --blue2: #703A00; --blue-bg: rgba(168,104,32,0.10);
}

/* PUZZLE — Cool cyan/sky: logic, patterns, clarity */
.theme-puzzle {
  --bg: #121820; --bg2: #182028; --bg3: #202830;
  --line: #303A48; --line2: #3E4A58;
  --accent: #5090C0; --accent2: #286090;
  --accent-bg: rgba(80,144,192,0.12); --accent-dim: rgba(80,144,192,0.06);
  --teal: #60A0D0; --teal2: #3870A0; --teal-bg: rgba(96,160,208,0.10);
  --blue: #4080B0; --blue2: #185080; --blue-bg: rgba(64,128,176,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: .5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-l, .topbar-r {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text2);
}
.topbar-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}

.hero {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 2rem 1.4rem 1.6rem;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 9vw, 3.8rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.hero-bgg {
  margin-top: .25rem;
  margin-bottom: .5rem;
}
.hero-bgg a {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--text3);
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s;
}
.hero-bgg a:hover {
  opacity: 1;
  color: var(--accent);
}
.hero-sub {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text3);
  margin-bottom: 1.3rem;
  line-height: 1.5;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border: 1px solid var(--line2);
  color: var(--text2);
  border-radius: 3px;
}
.tag.accent { border-color: var(--accent2); color: var(--accent); background: var(--accent-dim); }
.tag.red    { border-color: var(--red2);    color: var(--red);    background: var(--red-bg); }
.tag.teal   { border-color: var(--teal2);   color: var(--teal);   background: var(--teal-bg); }
.tag.blue   { border-color: var(--blue2);   color: var(--blue);   background: var(--blue-bg); }

.nav {
  background: var(--bg2);
  border-bottom: 2px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 200;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-inner { display: flex; max-width: 1200px; margin: 0 auto; }
.nb {
  flex-shrink: 0;
  padding: .75rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
.nb:hover  { color: var(--text); }
.nb.active { color: var(--accent); border-bottom-color: var(--accent); }

.content { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.25rem 5rem; }
.tab { display: none; }
.tab.active { display: block; }

.sec {
  font-family: 'DM Serif Display', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .7rem;
  letter-spacing: -.01em;
}
.sn {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  color: var(--text3);
  font-weight: 400;
}
.sub {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.4rem 0 .65rem;
}
.sub.red  { color: var(--red); }
.sub.teal { color: var(--teal); }
p { margin-bottom: .5rem; color: var(--text2); font-size: .93rem; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--accent); }

/* ── Responsive Grid ── */
.rg { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }

.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
}
.card.accent { border-left: 3px solid var(--accent); }
.card.red    { border-left: 3px solid var(--red); }
.card.teal   { border-left: 3px solid var(--teal); }
.card.blue   { border-left: 3px solid var(--blue); }

.callout {
  border-radius: var(--r);
  padding: .85rem 1.1rem;
  margin-bottom: .85rem;
  font-size: .9rem;
  line-height: 1.65;
}
.callout .lbl {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}
.callout p { margin: 0; }
.c-accent { background: var(--accent-bg); border: 1px solid var(--accent2); color: var(--text2); }
.c-accent .lbl { color: var(--accent); }
.c-red    { background: var(--red-bg);    border: 1px solid var(--red2);    color: var(--text2); }
.c-red    .lbl { color: var(--red); }
.c-teal   { background: var(--teal-bg);   border: 1px solid var(--teal2);   color: var(--text2); }
.c-teal   .lbl { color: var(--teal); }
.c-blue   { background: var(--blue-bg);   border: 1px solid var(--blue2);   color: var(--text2); }
.c-blue   .lbl { color: var(--blue); }
.c-dim    { background: var(--bg3);       border: 1px solid var(--line);    color: var(--text2); }
.c-dim    .lbl { color: var(--text3); }

.pitch {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem 1.2rem 2.2rem;
  margin-bottom: 1rem;
  position: relative;
}
.pitch::before {
  content: '\201C';
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem;
  color: var(--accent2);
  position: absolute;
  top: -.2rem; left: .8rem;
  line-height: 1;
  opacity: .7;
}
.pitch p {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

.it { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .88rem; }
.it tr { border-bottom: 1px solid var(--line); }
.it tr:last-child { border-bottom: none; }
.it .l {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg3);
  padding: 9px 12px;
  width: 36%;
  vertical-align: top;
  padding-top: 10px;
}
.it .v { background: var(--bg2); padding: 9px 12px; color: var(--text2); }

.dt { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .87rem; }
.dt th {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--bg3);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.dt td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text2); }
.dt tr:last-child td { border-bottom: none; }
.dt tr:nth-child(even) td { background: var(--bg3); }
.dt .step { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; color: var(--accent); white-space: nowrap; padding-top: 11px; }
.dt .name { font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; }

.nl { list-style: none; counter-reset: s; }
.nl li {
  counter-increment: s;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: var(--text2);
}
.nl li:last-child { border-bottom: none; }
.nl li::before {
  content: counter(s);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  background: var(--accent);
  color: var(--bg);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.bl { list-style: none; padding: 0; margin: 0 0 1rem; }
.bl li {
  display: block;
  position: relative;
  padding: .45rem 0 .45rem 1.4rem;
  font-size: .9rem;
  color: var(--text2);
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
.bl li:last-child { border-bottom: none; }
.bl li::before {
  content: '▸';
  color: var(--accent);
  font-size: .7rem;
  position: absolute;
  left: .15rem;
  top: .72rem;
}
.bl li strong { color: var(--text); margin-right: .15rem; }

.gallery-slot { margin-bottom: 1rem; }

.photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.photo-strip::-webkit-scrollbar { height: 4px; }
.photo-strip::-webkit-scrollbar-track { background: transparent; }
.photo-strip::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

.photo-thumb { position: relative; flex-shrink: 0; }
.photo-thumb img {
  height: 120px;
  width: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  cursor: pointer;
  display: block;
  transition: border-color .15s;
}
.photo-thumb img:hover { border-color: var(--accent); }
.remove-photo {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.photo-thumb:hover .remove-photo { opacity: 1; }

.svg-diagram {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 6px;
}
.svg-diagram svg { display: block; width: 100%; }
.svg-caption {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 10px;
  border-top: 1px solid var(--line);
}

.add-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  border: 1px dashed var(--line2);
  border-radius: var(--r);
  padding: 5px 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  background: none;
  margin-bottom: .6rem;
}
.add-photo-btn:hover { color: var(--accent); border-color: var(--accent); }

#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 999;
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: var(--r);
  object-fit: contain;
}
#lightbox .lb-nav {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  font-size: 1.4rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
#lightbox .lb-nav:hover { border-color: rgba(255,255,255,.5); }
#lightbox .lb-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  font-size: .85rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph {
  background: var(--bg3);
  border: 1px dashed var(--line2);
  border-radius: var(--r);
  padding: 1.5rem 1rem;
  text-align: center;
  margin-bottom: .85rem;
}
.ph-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text3);
  display: block;
  margin-bottom: 4px;
}
.ph-hint { font-size: .78rem; color: var(--line2); }

.score-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .87rem; }
.score-table th {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--bg3);
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  color: var(--text3);
}
.score-table td { padding: 9px 12px; border: 1px solid var(--line); color: var(--text2); background: var(--bg2); }
.score-table tr:nth-child(even) td { background: var(--bg3); }
.score-table .source { font-weight: 600; color: var(--text); }
.score-table .points { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600; color: var(--accent); text-align: center; white-space: nowrap; }
.score-table .notes  { font-size: .82rem; color: var(--text3); font-style: italic; }

.fi { border-bottom: 1px solid var(--line); }
.fi:first-child { border-top: 1px solid var(--line); }
.fq {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .85rem 0;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text2);
  user-select: none;
  transition: color .15s;
}
.fq:hover { color: var(--text); }
.fi.open .fq { color: var(--accent); }
.fa-arr { color: var(--text3); font-size: .65rem; flex-shrink: 0; transition: transform .2s; }
.fi.open .fa-arr { transform: rotate(180deg); color: var(--accent); }
.fa { display: none; padding: 0 0 .9rem 1rem; font-size: .87rem; color: var(--text3); line-height: 1.7; border-left: 2px solid var(--accent2); }
.fi.open .fa { display: block; }

.cl { list-style: none; padding: 0; margin: .25rem 0 1rem; }
.cl li {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .55rem .6rem;
  margin: 0 -.6rem;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  cursor: pointer;
  user-select: none;
  color: var(--text2);
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.cl li:last-child { border-bottom: none; }
.cl li:hover { background: var(--bg2); }
.cl li:hover .cb { border-color: var(--teal); }

.cb {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line2);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;            /* hide the ✓ until checked */
  background: transparent;
  transition: all .15s;
}
.cl li.done .cb {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;                   /* now show the ✓ in white */
}
.cl li.done { color: var(--text3); text-decoration: line-through; }
.cl li.done:hover { background: var(--bg2); }

/* ===== READABILITY SPACING (TAB CONTENT) ===== */
.tab h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 1.8rem;
  margin-bottom: 0.65rem;
  letter-spacing: -.01em;
}
.tab h3:first-child,
.tab .sec + h3,
.tab .sub + h3 { margin-top: 0.4rem; }
.tab p { margin-bottom: 0.85rem; }

/* Bare lists (not themed .bl / .nl / .cl) */
.tab ul:not(.bl):not(.nl):not(.cl),
.tab ol:not(.nl) {
  margin: 0.5rem 0 1.2rem 1.4rem;
  padding: 0;
}
.tab ul:not(.bl):not(.nl):not(.cl) > li,
.tab ol:not(.nl) > li {
  margin-bottom: 0.45rem;
  line-height: 1.65;
  color: var(--text2);
  font-size: 0.93rem;
}
/* Nested lists inside <li> */
.tab ul:not(.bl):not(.nl):not(.cl) ul,
.tab ol:not(.nl) ul,
.tab ol:not(.nl) ol {
  margin: 0.3rem 0 0.3rem 1.2rem;
}

/* Better gap after themed lists */
.tab .bl,
.tab .nl { margin-bottom: 1rem; }

/* Space between consecutive cards */
.tab .card + .card { margin-top: 0.15rem; }

/* Space after callouts */
.tab .callout + .callout { margin-top: 0.25rem; }
.tab .callout + h3,
.tab .callout + .sub { margin-top: 1.4rem; }

/* Ensure sub-headings after paragraphs breathe */
.tab p + .sub,
.tab ul + .sub,
.tab ol + .sub,
.tab .card + .sub { margin-top: 1.6rem; }

/* Space before gallery slots */
.tab .gallery-slot { margin-top: 1.2rem; }

.footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.4rem 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.footer span {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
}

/* ── Tablet adjustments ── */
@media (max-width: 640px) {
  body { font-size: 18px; line-height: 1.65; }   /* mobile lift — desktop stays 17px */
  .nb { padding: .6rem .8rem; font-size: 13px; }
  .content { padding: 1.2rem 1rem 4rem; }
  .photo-thumb img { height: 90px; }
  .it .l { width: 40%; font-size: 12px; padding: 7px 8px; }
  .it .v { padding: 7px 8px; font-size: 15px; }
  .dt th { font-size: 11px; padding: 6px 8px; }
  .dt td { padding: 8px 8px; font-size: 14px; }
  .score-table { font-size: 14px; }
}
/* ── Small mobile ── */
@media (max-width: 440px) {
  body { font-size: 17px; }
  .rg { grid-template-columns: 1fr; }
  .content { padding: 1rem .75rem 3rem; }
  .photo-thumb img { height: 72px; }
  .it, .dt, .score-table { font-size: 14px; }
  .it .l { width: 100%; display: block; }
  .it .v { display: block; }
}
.back-link {
  color: var(--text2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.back-link:hover { color: var(--accent); }
.back-arrow {
  font-size: 14px;
  line-height: 1;
}
.topbar-logo {
  height: 18px;
  vertical-align: middle;
}