/* ---------- Theme tokens ----------
   data-mode = dark | light (base surfaces)
   data-char = ironclad | silent | regent | necrobinder | defect (accent + dark tint)
   No data-char = default green. */
:root {
  color-scheme: dark;
  --accent: #4caf6e;
  --bg: #0c1110;
  --bg2: #141b18;
  --surface: #161f1b;
  --text: #ece6d6;
  --muted: #a9a491;
  --line: #2a3832;
  --gold: #f5c542;
  --ink: color-mix(in srgb, var(--accent) 70%, #fff);  /* accent readable as text */
  --glow: color-mix(in srgb, var(--accent) 65%, #fff);
  --tbh: 54px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --gutter: clamp(16px, 4vw, 48px);
}
:root[data-mode="light"] {
  color-scheme: light;
  --accent: #2f7d4a;
  --bg: #efe6d2;
  --bg2: #e7dcc3;
  --surface: #f8f2e4;
  --text: #2a251c;
  --muted: #6b6250;
  --line: #d6c7a5;
  --gold: #9a6a00;
  --ink: color-mix(in srgb, var(--accent) 80%, #000);
}
[data-char="ironclad"]    { --accent: #c8402f; }
[data-char="silent"]      { --accent: #7cc242; }
[data-char="regent"]      { --accent: #e8892e; }
[data-char="necrobinder"] { --accent: #d0609a; }
[data-char="defect"]      { --accent: #3aa3d8; }
:root[data-mode="dark"][data-char="ironclad"]    { --bg: #130c0b; --bg2: #1c1110; --surface: #211514; --line: #3d2421; }
:root[data-mode="dark"][data-char="silent"]      { --bg: #0c130b; --bg2: #121b10; --surface: #162114; --line: #2b3b25; }
:root[data-mode="dark"][data-char="regent"]      { --bg: #13100b; --bg2: #1b1510; --surface: #221b13; --line: #3d3022; }
:root[data-mode="dark"][data-char="necrobinder"] { --bg: #120c12; --bg2: #1a121a; --surface: #201620; --line: #3b2639; }
:root[data-mode="dark"][data-char="defect"]      { --bg: #0a1017; --bg2: #0f1821; --surface: #131f2a; --line: #233646; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tbh) + 12px); }
.reduced, .simple { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 85% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    radial-gradient(900px 800px at 5% 70%, color-mix(in srgb, #f5c542 6%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  transition: background-color .4s, color .4s;
  overflow-x: hidden;
}
/* Film-grain texture over the whole page (tiny inline SVG noise). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: var(--ink); }
h1, h2, h3 { line-height: 1.15; font-family: var(--serif); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding: .05em .35em; border-radius: 4px; background: #0006; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: .5em 1em; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
button { font: inherit; cursor: pointer; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; height: var(--tbh); z-index: 30;
  display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), 0 8px 24px #0004;
}
.topbar::after {           /* thin gold rule that fades out at both ends */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent) 30%, color-mix(in srgb, var(--gold) 55%, transparent) 70%, transparent);
}
.tb-name { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.05rem var(--serif); color: var(--text); text-decoration: none; white-space: nowrap; }
.tb-name .mono {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
  font: 800 .78rem var(--serif); letter-spacing: .02em; color: #1f1703;
  background: linear-gradient(#ffe39a, #e8b84a); box-shadow: inset 0 1px 0 #fff8, 0 2px 6px #0006;
}
.tb-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.tb-nav a { position: relative; padding: .3rem 0; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .9rem; transition: color .2s; }
.tb-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--gold); scale: 0 1; transition: scale .25s; }
.tb-nav a:hover { color: var(--text); }
.tb-nav a:hover::after { scale: 1 1; }
.tb-tools {           /* one segmented control instead of separate pills */
  display: flex; gap: 2px; padding: 3px; margin-left: .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.tb-tools button {
  padding: .32em .7em; font-size: .78rem; font-weight: 600; border-radius: 5px; white-space: nowrap;
  background: transparent; color: var(--muted); border: 0;
  transition: background-color .2s, color .2s;
}
.tb-tools button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.tb-tools button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 1100px) {
  .tb-nav { display: none; }
  .tb-tools { margin-left: auto; }
}
@media (max-width: 560px) {
  .tb-name { font-size: 0; gap: 0; }
  .tb-tools button { padding: .32em .5em; font-size: .72rem; }
}
/* ---------- Card (StS frame, colored by type like the game) ---------- */
.card {
  --w: 150px;
  --frame: #a3a8ad;               /* common: silver */
  --body1: #2f6e5b; --body2: #0c241d;  /* skill: teal-green */
  position: relative;
  flex: none;
  width: var(--w);
  aspect-ratio: 5 / 6.6;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--w) * .085) calc(var(--w) * .065) calc(var(--w) * .06);
  border-radius: calc(var(--w) * .075);
  border: 3px solid var(--frame);
  background:
    repeating-linear-gradient(135deg, #ffffff06 0 2px, transparent 2px 7px),
    radial-gradient(130% 80% at 50% 0%, var(--body1), var(--body2));
  box-shadow: inset 0 0 0 2px #0008, inset 0 0 22px #0006, 0 12px 26px #0009;
  color: #fff;
  font-size: calc(var(--w) * .074);
  line-height: 1.22;
  text-decoration: none;
  user-select: none;
  transition: translate .28s cubic-bezier(.2, .9, .3, 1.25), rotate .28s cubic-bezier(.2, .9, .3, 1.25),
              scale .28s cubic-bezier(.2, .9, .3, 1.25), transform .5s cubic-bezier(.2, .9, .3, 1.25),
              opacity .35s, box-shadow .2s, filter .2s;
}
.card.attack { --body1: #8f3428; --body2: #2a0b08; }
.card.skill { --body1: #2f6e5b; --body2: #0b231c; }
.card.power { --body1: #30589a; --body2: #0b1730; }
.card.uncommon { --frame: #7fc0e6; }
.card.rare { --frame: #e8b84a; }
.card .cost {
  position: absolute; top: -.75em; left: -.75em; z-index: 2;
  width: 2.5em; height: 2.5em; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1.2em var(--serif);
  background: radial-gradient(circle at 35% 30%, #fffb, transparent 38%),
              radial-gradient(circle, var(--accent), color-mix(in srgb, var(--accent) 35%, #000));
  border: 2px solid #000a;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
  text-shadow: 0 0 3px #000, 0 2px 0 #000;
  color: #fff;
}
.card .banner {
  position: relative; z-index: 1;
  display: block; width: 114%;
  margin: 0; padding: .32em .9em;
  font: 700 1.05em/1.15 var(--serif); text-align: center; color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--frame) 80%, #fff), color-mix(in srgb, var(--frame) 50%, #000));
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  text-shadow: 0 1px 0 #000c, 0 0 4px #000;
}
.card .art {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3; margin-top: -.15em;
  /* A lit window in the card's own color, so transparent logos sit in it naturally. */
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--body1) 55%, #fff) 0%, var(--body1) 48%, var(--body2) 100%);
  border: 2px solid #000a;
  box-shadow: inset 0 0 14px #0008;
  overflow: hidden;
}
.card .art b { font: 800 2.1em var(--serif); letter-spacing: .01em; text-shadow: 0 0 16px #ffffff55, 0 2px 0 #000; }
.card .art img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 4px 6px #0009); }
.card.attack .art { clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
.card.power .art { border-radius: 50% 50% 40% 40% / 38% 38% 26% 26%; }
.card .type {
  position: relative; z-index: 1; margin-top: -.6em;
  padding: .08em .75em; font: 600 .74em var(--sans); letter-spacing: .04em; border-radius: 4px;
  background: #1c1c1c; border: 1px solid #000; color: #ddd;
}
.card .desc { display: block; margin: .5em 0 0; text-align: center; font-weight: 500; color: #f3efe6; text-shadow: 0 1px 0 #000; }
.card em, .kw { color: #f5c542; font-style: normal; font-weight: 700; }
/* Rare shimmer sweep */
.card.rare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #fff3 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
}
.card.rare:hover::after { animation: sheen 0.9s ease-out; }
.card:hover, .card:focus-visible {
  box-shadow: 0 0 0 2px var(--glow), 0 0 26px 6px color-mix(in srgb, var(--glow) 55%, transparent), 0 18px 30px #000a;
  outline: none;
}

/* ---------- Hero: name on top, photo centered, cards floating around it ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--tbh) + 2.2rem) var(--gutter) 0; }
.hero::before {          /* simple and colorful: a few soft color pools, no image */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 440px at 50% 56%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(520px 400px at 14% 40%, #e8b84a24, transparent 70%),
    radial-gradient(520px 400px at 86% 36%, #3aa3d824, transparent 70%),
    radial-gradient(440px 340px at 22% 84%, #c8402f1c, transparent 70%),
    radial-gradient(440px 340px at 80% 82%, #8f5bd61f, transparent 70%);
}
.hero-head { position: relative; z-index: 2; text-align: center; }
.eyebrow { margin: 0 0 .4rem; font: 600 .82rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
/* Terminal-style "whoami" above the name */
.eyebrow.whoami {
  display: inline-flex; align-items: center; gap: .55em; margin-bottom: .8rem;
  padding: .35em .9em; border-radius: 8px;
  font: 500 clamp(.85rem, 1.4vw, 1rem) ui-monospace, 'Cascadia Code', Consolas, monospace;
  letter-spacing: 0; text-transform: none; color: var(--text);
  background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--line);
}
.whoami .prompt { color: var(--ink); }
.whoami .caret { width: .55em; height: 1.1em; background: var(--gold); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.name {
  margin: 0;
  font: 800 clamp(2.5rem, 6.6vw, 6.4rem)/.95 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.015em; text-transform: uppercase;
}
.name > span { white-space: nowrap; }
.name .g { font-weight: inherit; display: inline-block; transition: color .7s, text-shadow .7s, translate .7s cubic-bezier(.2, .9, .3, 1.4); }
.name.lit .g { color: #f5c542; text-shadow: 0 0 26px #f5c54299, 0 0 5px #f5c542aa; translate: 0 -.04em; }
[data-mode="light"] .name.lit .g { color: #b8860b; text-shadow: 0 0 18px #f5c54288; }
.name.lit .g:nth-of-type(2) { transition-delay: .35s; }
.name.lit .g:nth-of-type(3) { transition-delay: .7s; }
.tagline {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .55rem;
  margin: .9rem 0 0;
  font: italic 500 clamp(1.3rem, 2.4vw, 1.9rem)/1.2 var(--serif);
}
.tagline .grc { font-style: normal; font-weight: 800; letter-spacing: .1em; color: var(--gold); text-shadow: 0 0 18px #f5c54255; }
.tagline .amp { opacity: .6; }
.tagline .cloud { position: relative; isolation: isolate; }
.tagline .cloud::before, .tagline .cloud::after {      /* little clouds drifting behind the words */
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 26%, transparent), transparent);
  animation: puff 7s steps(28) infinite alternate;   /* ~4fps drift, stop-motion */
}
.tagline .cloud::before { width: 6em; height: 2.2em; left: -1em; top: -.4em; }
.tagline .cloud::after { width: 4.5em; height: 1.8em; right: -1.2em; top: .2em; animation-delay: -3.5s; }

.stage { position: relative; max-width: 1400px; height: 650px; margin: .8rem auto 0; }
.stage::before {         /* halo + ring behind the photo */
  content: ""; position: absolute; left: 50%; bottom: 30px; width: 540px; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 64%);
  border: 1px solid color-mix(in srgb, #f5c542 28%, transparent);
  box-shadow: 0 0 0 16px color-mix(in srgb, #f5c542 5%, transparent), 0 0 0 34px color-mix(in srgb, #f5c542 3%, transparent);
}
.hero-photo {
  position: absolute; z-index: 2; left: 50%; bottom: 0; translate: -50% 0;
  height: 620px; width: auto;
  filter: drop-shadow(0 22px 36px #0009);
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent);
}
.floaters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.floater {
  position: absolute; left: var(--x, 0); top: var(--y, 0); pointer-events: auto;
  display: block; color: inherit; text-decoration: none;
  animation: bob var(--dur, 5s) steps(22) var(--del, 0s) infinite alternate;   /* ~4–5fps, stop-motion */
}
.floater:hover, .floater:focus-visible { z-index: 8; animation-play-state: paused; outline: none; }
/* The floating logo itself */
.token { position: relative; display: grid; place-items: center; width: 88px; height: 88px; rotate: var(--r, 0deg); transition: scale .25s cubic-bezier(.2, .9, .3, 1.3), opacity .18s; }
.token img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px #000b) drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 22%, transparent)); }
.token img.rounded { border-radius: 22%; }
.token img.duo { position: absolute; width: 62%; height: 62%; right: -16%; bottom: -12%; }
/* Logos with dark ink (ISC2 CC, LSCS): a soft light glow behind them, no visible box. */
.token.halo img { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px #ffffff70) drop-shadow(0 10px 14px #000b); }
.token .soon { position: absolute; right: -14px; top: -8px; z-index: 1; }
.floater:hover .token { scale: 1.1; }
.token-label { display: none; }
/* Hover/focus: the logo flips into its full card, centered on the same spot */
.floater .card {
  --w: 158px;
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  opacity: 0; scale: .45; rotate: var(--r, 0deg); pointer-events: none;
  transition: opacity .18s, scale .28s cubic-bezier(.2, .9, .3, 1.3), rotate .28s;
}
.floater:hover .card, .floater:focus-visible .card { opacity: 1; scale: 1; rotate: 0deg; pointer-events: auto; filter: none; }
.floater:hover .token, .floater:focus-visible .token { opacity: 0; scale: .6; }

/* Coming-soon certs: real badge, dashed frame and a gold SOON tag so it never reads as earned. */
.card.target { border-style: dashed; }
.card.target .type { background: #3a2f12; color: #f5c542; border-color: #f5c54266; }
.card .art { position: relative; }
.card .art img.duo { position: absolute; width: 48%; height: 48%; right: 4%; bottom: 4%; }
.soon {
  display: inline-block; padding: .22em .6em; border-radius: 999px; rotate: 8deg;
  font: 800 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #241a03;
  background: linear-gradient(#ffe39a, #f0b92e); box-shadow: 0 3px 8px #0009, inset 0 1px 0 #fff8;
}
.card .art .soon { position: absolute; right: 5%; top: 6%; font-size: .62em; }
/* Small gold stat chip on picture art (2nd, Top 23%, 13 findings). */
.card .art .chip {
  position: absolute; right: 6%; top: 7%;
  padding: .08em .5em; border-radius: 999px;
  font: 800 .92em var(--serif); color: #f5c542; white-space: nowrap;
  background: #000c; border: 1px solid #f5c54288; box-shadow: 0 2px 6px #0008;
}

.hero-foot { position: relative; z-index: 2; max-width: 720px; margin: 2.2rem auto 0; text-align: center; }
p.intro { margin: 0 auto; max-width: 62ch; font-size: 1.05rem; line-height: 1.75; color: color-mix(in srgb, var(--text) 88%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.6rem; }
.hero-meta { margin: 1rem 0 0; font-size: .88rem; color: var(--muted); }

@media (max-width: 1000px) {
  .stage { height: auto; display: flex; flex-direction: column; align-items: center; }
  .stage::before { width: min(460px, 92vw); bottom: auto; top: 10px; }
  .hero-photo { position: relative; left: auto; bottom: auto; translate: none; height: auto; width: min(380px, 82vw); }
  /* No hover on touch: logos sit in a grid with a label, tap goes to the section. */
  .floaters { position: relative; inset: auto; width: 100%; max-width: 760px; margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); justify-items: center; gap: 1.6rem .4rem; }
  .floater { position: relative; left: auto; top: auto; translate: var(--dx, 0) var(--dy, 0); display: grid; justify-items: center; gap: .45rem; }
  .token { width: 72px; height: 72px; }
  .token-label { display: block; max-width: 110px; text-align: center; font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--muted); }
  .floater .card { display: none; }
  .floater:hover .token { opacity: 1; scale: 1.06; }
}
@media (max-width: 680px) {
  .floaters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hand: fully visible fan */
.hand-wrap { position: relative; max-width: 1400px; margin: 2.5rem auto 0; padding-bottom: 3rem; }
.pile {
  position: absolute; left: 8px; bottom: 3.6rem; z-index: 3;
  width: 58px; height: 78px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #ffffff10 0 5px, transparent 5px 10px), color-mix(in srgb, var(--accent) 35%, #111);
  border: 2px solid #a3a8ad;
  box-shadow: 3px 3px 0 #000a, 6px 6px 0 #0006;
}
.pile span {
  position: absolute; right: -10px; bottom: -10px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #111; border: 2px solid #f5c542; color: #fff; font-size: .8rem; font-weight: 700;
}
.hand { --hw: 150px; position: relative; height: calc(var(--hw) * 1.32 + 70px); }
.hand .card {
  --w: var(--hw);
  position: absolute; left: 50%; top: 40px;
  translate: calc(-50% + var(--x, 0px) + var(--push, 0px)) var(--y, 0px);
  rotate: var(--r, 0deg);
}
.hand .card:hover, .hand .card:focus-visible {
  translate: calc(-50% + var(--x, 0px)) -28px;
  rotate: 0deg; scale: 1.2; z-index: 10;
}
@media (max-width: 680px) {
  .pile { display: none; }
  /* Touch screens have no hover to lift a fanned card, so the hand becomes a grid. */
  .hand { height: auto; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: .9rem; padding-bottom: 4rem; }
  .hand .card { --w: 104px; position: relative; left: auto; top: auto; translate: none; rotate: 0deg; }
  .hand .card:hover, .hand .card:focus-visible { translate: 0 -6px; scale: 1.05; }
}

/* Embers */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.embers i {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: #ffcf8a; box-shadow: 0 0 8px 2px #ffb45588;
  opacity: 0; animation: ember steps(48) infinite;   /* duration set per ember in main.js */
}

/* ---------- Sections ---------- */
.sec { max-width: 1100px; margin: 0 auto; padding: 6rem var(--gutter) 2rem; }
.sec-wide { max-width: 1280px; }
.sec-head { text-align: center; margin-bottom: 3rem; }
.act { margin: 0; color: var(--ink); font: 600 .78rem var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.sec-head h2 {
  margin: .25em 0 0; outline: none;
  font: 800 clamp(2.4rem, 5.5vw, 3.6rem)/1.05 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.01em;
}
.sec-head h2::after {        /* ornament: line, diamond, line */
  content: ""; display: block; width: 180px; height: 12px; margin: .8rem auto 0;
  background:
    linear-gradient(45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 45%, transparent 45% 55%, var(--gold) 55%, transparent) center / 100% 1px no-repeat;
}
.entry { display: grid; grid-template-columns: auto 1fr; gap: 2.6rem; align-items: center; margin-bottom: 2.4rem; }
.entry > .card { --w: 190px; }
.entry > .card:hover { translate: 0 -8px; scale: 1.06; }
.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.7rem;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 10px 30px #0003;
}
.panel h3 { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 700; }
.panel .meta { margin: 0 0 .8rem; color: var(--muted); font-size: .92rem; }
.panel ul { margin: 0; padding-left: 1.2rem; }
.panel li + li { margin-top: .45rem; }
.panel li::marker { color: var(--ink); }
.panel strong { color: var(--ink); }
.logo-row { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.2rem; }
.logo-row img { height: 56px; width: auto; }
@media (max-width: 680px) {
  .entry { grid-template-columns: 1fr; justify-items: center; gap: 1.4rem; }
  .entry > .card { --w: 170px; }
}

/* AuditBridge heat map */
.heat { margin: 0; display: grid; justify-items: center; gap: .8rem; }
.heat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(260px, 66vw); aspect-ratio: 1; }
.heat-grid i { border-radius: 5px; box-shadow: inset 0 0 0 1px #0006, inset 0 6px 10px #ffffff1f; }
.heat-grid .l { background: #3f8f5a; }
.heat-grid .m { background: #d6b43c; }
.heat-grid .h { background: #e07b2e; }
.heat-grid .c { background: #c8402f; }
.heat figcaption { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #d8d1bd; }

/* DarkHole attack chain */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; width: 100%; max-width: 420px; counter-reset: s; font-size: .9rem; }
.chain li { counter-increment: s; display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem; background: #0000003d; border-left: 3px solid #e07b2e; border-radius: 4px; }
.chain li::before { content: counter(s); font-weight: 700; color: #f5c542; min-width: 1em; }
.chain b { color: #fff; }
.chain .root { justify-content: center; border-color: #ff6b57; background: #c8402f66; color: #ffd2cb; font: 700 1.05rem ui-monospace, Consolas, monospace; }
.chain .root::before { content: none; }

/* VoIP SIP ladder */
.ladder {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 0; width: 100%; max-width: 420px;
  font: .8rem ui-monospace, Consolas, monospace; color: #e8e2d0;
  background:
    linear-gradient(#ffffff2e, #ffffff2e) 10% 0 / 2px 100% no-repeat,
    linear-gradient(#ffffff2e, #ffffff2e) 90% 0 / 2px 100% no-repeat;
}
.ladder .who { font: 700 .95rem var(--serif); color: #f5c542; }
.ladder .who + .who { text-align: right; }
.ladder .msg { grid-column: 1 / -1; position: relative; margin: 0 10%; padding: .15rem 0; text-align: center; border-bottom: 2px solid #7fc0e6; }
/* Arrowheads: Tabler caret icons masked in the line's colour. */
.ladder .msg::after, .ladder .msg.both::before {
  position: absolute; bottom: calc(-.45rem - 1px); width: .9rem; height: .9rem; color: #7fc0e6; background: currentColor;
  -webkit-mask: url(img/icons/tb-caret-right-filled.svg) center / contain no-repeat; mask: url(img/icons/tb-caret-right-filled.svg) center / contain no-repeat;
}
.ladder .msg.r::after { content: ""; right: -.45rem; }
.ladder .msg.l::after, .ladder .msg.both::before {
  content: ""; left: -.45rem;
  -webkit-mask-image: url(img/icons/tb-caret-left-filled.svg); mask-image: url(img/icons/tb-caret-left-filled.svg);
}
.ladder .msg.both { border-color: #7cc242; }
.ladder .msg.both::before { color: #7cc242; }
.ladder .msg.both::after { content: ""; right: -.45rem; color: #7cc242; }

/* ---------- Stack: open rows of big logos under thin category rules (no boxes) ---------- */
.relics { display: grid; gap: 3rem; }
.relic-group h3 {
  margin: 0 0 1.6rem; padding-bottom: .7rem;
  font: 600 .78rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
}
.tiles { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.8rem .6rem; }
.tiles li {
  margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center; font-size: .95rem; font-weight: 600; line-height: 1.25;
  transition: translate .25s cubic-bezier(.2, .9, .3, 1.3);
}
.tiles li:hover { translate: 0 -6px; }
.tiles .ico, .tiles .logo { flex: none; width: 60px; height: 60px; transition: filter .25s; }
.tiles .ico {
  background: var(--c, var(--text));
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
}
.tiles .ico.tb { --c: var(--gold); }
.tiles .logo { object-fit: contain; }
.tiles .logo.wide { width: 84px; }
.tiles .logo.xwide { width: 128px; }
.tiles li:hover .ico, .tiles li:hover .logo { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c, #f5c542) 55%, transparent)); }
@media (max-width: 680px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem .4rem; }
  .tiles .ico, .tiles .logo { width: 48px; height: 48px; }
  .tiles li { font-size: .82rem; }
}
[data-mode="dark"] .logo.on-light, [data-mode="light"] .logo.on-dark { display: none; }

.rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; }
.sub-head { margin: 4rem 0 1.8rem; text-align: center; font: 600 .78rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.rewards.targets .card { --w: 180px; }
.rewards .card { --w: 210px; }
.rewards .card:hover { translate: 0 -12px; scale: 1.08; }
.card .verify {
  margin-top: auto; padding: .15em .75em; border-radius: 999px; font-size: .74em; font-weight: 700;
  color: #f5c542; border: 1px solid #f5c54288; background: #0006;
}
.rewards-more { text-align: center; margin: 2.4rem 0 0; }
@media (max-width: 680px) { .rewards .card { --w: 180px; } }

.contact { text-align: center; max-width: 680px; margin: 0 auto; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; margin-top: 1.2rem; }

.foot { text-align: center; color: var(--muted); font-size: .82rem; padding: 4rem var(--gutter) 6rem; }
.foot p { margin: .25rem 0; }

/* ---------- Plate buttons ---------- */
.plate {
  display: inline-block; padding: 0; border: 0; background: none;
  text-decoration: none; color: #fff;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 45%, transparent)) drop-shadow(0 4px 6px #000a);
  transition: filter .2s, translate .2s;
}
.plate span {
  display: block; padding: .62em 1.45em;
  font: 600 .98rem var(--sans); letter-spacing: .02em;
  text-shadow: 0 1px 0 #000;
  background: linear-gradient(color-mix(in srgb, var(--accent) 45%, #2b2b2b), color-mix(in srgb, var(--accent) 18%, #0f0f0f));
  border: 1.5px solid color-mix(in srgb, #f5c542 65%, #000);
  border-radius: 10px;
}
.plate:hover { filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 4px 6px #000a); translate: 0 -2px; }
.plate.arrow span { padding-right: 2.6em; border: 0; border-radius: 0; clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%, 5% 50%); }
.plate.back span { background: linear-gradient(#3a3a3a, #1a1a1a); }
.plate:disabled { opacity: .45; filter: none; cursor: not-allowed; }
.proceed { position: fixed; right: 16px; bottom: 16px; z-index: 25; animation: pulse 2.2s ease-in-out infinite; }
.proceed span { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
@media (max-width: 680px) { .proceed span { font-size: .92rem; padding: .5em 2.2em .5em 1.1em; } }

/* ---------- Overlays: loader + character select ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: none; place-items: center; align-content: center; gap: 1rem;
  padding: 16px; text-align: center;
  background: radial-gradient(900px 600px at 50% 40%, color-mix(in srgb, var(--accent) 22%, #000), #050505 75%);
  color: #ece6d6;
  overflow-y: auto;
}
.intro #loader { display: grid; }
#loader.out, #charselect.out { animation: fade-out .5s forwards; }
.shuffle { position: relative; width: 90px; height: 120px; margin-bottom: 1rem; }
.shuffle i {
  position: absolute; inset: 0; border-radius: 9px;
  border: 3px solid #e8b84a;
  background: repeating-linear-gradient(45deg, #ffffff12 0 6px, transparent 6px 12px), color-mix(in srgb, var(--accent) 40%, #111);
  box-shadow: 0 6px 14px #000a;
  animation: riffle 1.1s steps(3, end) infinite;
}
.shuffle i:nth-child(odd) { --dir: -1; }
.shuffle i:nth-child(even) { --dir: 1; }
.shuffle i:nth-child(2) { animation-delay: .08s; }
.shuffle i:nth-child(3) { animation-delay: .16s; }
.shuffle i:nth-child(4) { animation-delay: .24s; }
.shuffle i:nth-child(5) { animation-delay: .32s; }
.loader-title { margin: 0; font: 700 1.9rem var(--serif); letter-spacing: .04em; }
.loader-bar { width: min(320px, 80vw); height: 6px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f5c542); transform-origin: left; animation: load 2.2s ease-in-out forwards; }
.loader-tip { max-width: 440px; margin: .4rem 0 0; color: #bdb7a4; font-size: .95rem; }
.loader-tip b { color: #f5c542; }
.btn-ghost { margin-top: 1rem; background: none; border: 1px solid #ffffff33; color: #bdb7a4; padding: .4em 1.1em; border-radius: 999px; font-size: .85rem; }
.btn-ghost:hover { color: #fff; border-color: #fff8; }

#charselect:not([hidden]) { display: grid; }
#charselect h2 { margin: 0; font: 800 clamp(1.9rem, 5vw, 2.8rem) var(--serif); }
.cs-sub { margin: 0; color: #bdb7a4; }
.cs-detail { min-height: 6.5rem; max-width: 520px; }
.cs-detail h3 { margin: .5rem 0 .2rem; font-size: 2rem; color: var(--glow); }
.cs-detail p { margin: 0; color: #d8d2c0; }
.cs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.cs-pick {
  display: grid; justify-items: center; gap: .35rem;
  background: none; border: 0; color: #d8d2c0; padding: 0; font-weight: 600; font-size: .9rem;
  transition: scale .25s cubic-bezier(.2, .9, .3, 1.3), color .2s;
}
.cs-pick svg {
  width: 74px; height: 74px; padding: 16px; border-radius: 50%;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  background: radial-gradient(circle at 35% 30%, #fff5, transparent 45%), radial-gradient(circle, var(--c), color-mix(in srgb, var(--c) 30%, #000));
  border: 3px solid #0009;
  box-shadow: 0 0 0 2px #fff2;
  transition: box-shadow .2s;
}
.cs-pick:hover, .cs-pick:focus-visible { scale: 1.08; color: #fff; outline: none; }
.cs-pick[aria-pressed="true"] { scale: 1.15; color: #fff; }
.cs-pick[aria-pressed="true"] svg, .cs-pick:focus-visible svg { box-shadow: 0 0 0 3px #f5c542, 0 0 24px 6px var(--c); }
.cs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.2rem; }

/* ---------- Motion (only when .anim) ---------- */
.anim:not(.dealt) .hero-head, .anim:not(.dealt) .hero-photo, .anim:not(.dealt) .hero-foot, .anim:not(.dealt) .token, .anim:not(.dealt) .hand .card { opacity: 0; }
/* Entrances, exits and ambient loops run on one stop-motion clock, like cut paper shot frame by
   frame: "cut-in" holds each eased pose (steps(1) between keyframes) instead of tweening. Each use
   sets where the piece starts with --fx / --fy / --fr / --fs. Direct feedback (hover, presses,
   toggles, dialogs) stays smooth on purpose: choppy feedback reads as lag. */
.anim.dealt .hero-head { --fy: 26px; animation: cut-in .9s steps(1, end) backwards; }
.anim.dealt .hero-photo { --fy: 30px; --fr: 2deg; animation: cut-in 1.1s steps(1, end) .15s backwards; }
.anim.dealt .hero-foot { --fy: 26px; animation: cut-in .9s steps(1, end) .3s backwards; }
.anim.dealt .token, .anim.dealt .hand .card {
  --fx: -45vw; --fy: 30vh; --fr: -60deg; --fs: .3;
  animation: cut-in .7s steps(1, end) backwards; animation-delay: calc(600ms + var(--i, 0) * 70ms);
}
.anim .sec .card:not(.in) { opacity: 0; transform: translateY(40px) scale(.9) rotate(-2deg); }
.anim .sec .card.in { --fy: 40px; --fr: -3deg; --fs: .9; animation: cut-in .6s steps(1, end); }
.hand .card.playing { animation: play .75s steps(4, end) forwards !important; pointer-events: none; z-index: 20; }

@keyframes cut-in {
  0%   { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(var(--fs, 1)); }
  15%  { opacity: 1; transform: translate(calc(var(--fx, 0px) * .5), calc(var(--fy, 0px) * .5)) rotate(calc(var(--fr, 0deg) * .5)) scale(calc(1 + (var(--fs, 1) - 1) * .5)); }
  30%  { transform: translate(calc(var(--fx, 0px) * .22), calc(var(--fy, 0px) * .22)) rotate(calc(var(--fr, 0deg) * .22)) scale(calc(1 + (var(--fs, 1) - 1) * .22)); }
  45%  { transform: translate(calc(var(--fx, 0px) * .07), calc(var(--fy, 0px) * .07)) rotate(calc(var(--fr, 0deg) * .07)) scale(calc(1 + (var(--fs, 1) - 1) * .07)); }
  60%  { transform: translate(calc(var(--fx, 0px) * -.03), calc(var(--fy, 0px) * -.03)) rotate(calc(var(--fr, 0deg) * -.08)); }   /* settles past, like a piece pressed down */
  78%  { transform: rotate(calc(var(--fr, 0deg) * .03)); }
  100% { transform: none; }
}

@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(4px); } }   /* map dialog only */
@keyframes play {
  45% { transform: translateY(-60vh) scale(1.35); filter: brightness(1.3); opacity: 1; }
  to { transform: translateY(-70vh) scale(1.5); filter: brightness(2.5) blur(6px); opacity: 0; }
}
@keyframes sheen { to { background-position: 150% 0; } }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes puff { from { translate: -6px 0; scale: .95; opacity: .7; } to { translate: 8px -3px; scale: 1.08; opacity: 1; } }
@keyframes riffle {
  0%, 100% { transform: none; }
  35% { transform: translateX(calc(var(--dir) * 70px)) rotate(calc(var(--dir) * 14deg)); }
  65% { transform: translateX(calc(var(--dir) * 30px)) rotate(calc(var(--dir) * 6deg)) translateY(-6px); }
}
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
@keyframes pulse { 50% { filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(0 4px 6px #000a); } }
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 20px), -90vh); }
}

/* ---------- Paper cut-outs (img/paper/*.svg) ----------
   Card art and a few hero pieces are cut paper. They move like stop-motion: stepped frames, not
   smooth tweens. "place" drops a piece onto the card (its shadow tightens as it lands), "boil"
   jitters it on hover, and section headings are torn into view. All of it needs .anim. */
.card .art img.paper, .stop .node img.paper { filter: drop-shadow(1.5px 3px 1.5px #0b0805a6); }
.token img.paper { filter: drop-shadow(2px 4px 2px #0b0805b3) drop-shadow(0 12px 16px #0006); }
/* :where() keeps "place" weaker than the hover "boil" below, so hovering still boils a placed piece. */
:where(.anim.dealt .hand .card .art, .anim.dealt .token) img.paper {
  animation: paper-place .5s steps(6, jump-none) backwards;
  animation-delay: calc(1150ms + var(--i, 0) * 70ms);   /* as each card lands (see .anim.dealt .token) */
}
:where(.anim .sec .card.in .art, .anim .stop.in .node) img.paper { animation: paper-place .5s steps(6, jump-none) .25s backwards; }
.anim .card:hover .art img.paper, .anim .card:focus-visible .art img.paper,
.anim .floater:hover .token img.paper, .anim .stop:hover .node img.paper, .anim .map.compact .stop:hover .node img.paper {
  animation: paper-boil .36s steps(1) infinite;
}
@keyframes paper-place {
  from { transform: translate(-8px, -16px) rotate(-10deg) scale(1.2); filter: drop-shadow(9px 18px 7px #0b080555); opacity: 0; }
  20% { opacity: 1; }
}
@keyframes paper-boil {
  0% { transform: rotate(-2deg); }
  33% { transform: rotate(1.6deg) translate(1px, -1px); }
  66% { transform: rotate(-.6deg) translate(-1px, 1px); }
}
/* Masked rather than hidden, so the heading can still take focus. The mask is taller than the heading
   and ends 5% past its left edge, so the tilted paper strip and its shadow (paper.css) aren't clipped. */
.anim .sec-head h2 {
  -webkit-mask: url(img/paper/tear.svg) 5% 50% / 300% 160% no-repeat;
  mask: url(img/paper/tear.svg) 5% 50% / 300% 160% no-repeat;
}
.anim .sec-head:not(.in) h2 { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
.anim .sec-head.in h2 { animation: paper-tear .6s steps(7, jump-none) backwards; }
@keyframes paper-tear { from { -webkit-mask-position: 100% 50%; mask-position: 100% 50%; } }

/* ---------- Simple mode / reduced motion ---------- */
.simple .proceed, .reduced .proceed { animation: none; }
.simple .embers, .reduced .embers { display: none; }
.simple .floater { animation: none; }
.simple .tagline .cloud::before, .simple .tagline .cloud::after { animation: none; }
.simple .name .g, .reduced .name .g { color: #f5c542; }
.simple .hand { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; padding-bottom: 2rem; }
.simple .hand .card { position: relative; left: auto; top: auto; translate: none; rotate: 0deg; --w: 120px; }
.simple .hand .card:hover { translate: 0 -6px; scale: 1.05; }
.simple .pile { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tagline separators + AI Security accent */
.tagline .sep { width: 1px; height: .95em; align-self: center; background: color-mix(in srgb, var(--gold) 60%, transparent); }
.tagline .ai {
  background: linear-gradient(100deg, #9fd3ff, #c6a6ff 55%, #ffb7d9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-mode="light"] .tagline .ai { background-image: linear-gradient(100deg, #2b6cb0, #6b46c1 55%, #b83280); }

/* Primary (gold) buttons for CV / résumé downloads */
.plate.gold span { color: #241a03; text-shadow: none; background: linear-gradient(#ffe39a, #e8b84a); border-color: #b8860b; }
.plate.gold { filter: drop-shadow(0 0 10px #f5c54244) drop-shadow(0 4px 6px #000a); }
.plate.missing { opacity: .55; filter: none; cursor: not-allowed; }
.plate.missing span::after { content: " · soon"; font-weight: 500; }
.hero-actions.secondary { margin-top: .8rem; }
.contact-links + .contact-links { margin-top: .8rem; }

/* Center logos on the part of the art you can see (the type label covers the bottom edge). */
.card .art img:not(.duo) { width: 72%; height: 72%; translate: 0 -5%; }
.card.attack .art img:not(.duo) { translate: 0 -10%; }
@media (max-width: 1280px) and (min-width: 1001px) { .token { width: 74px; height: 74px; } }

/* ---------- Experience map (StS-style) ---------- */
.map { --ring: #5aa7dc; position: relative; max-width: 1000px; margin: 0 auto; padding: 1rem 0 0; list-style: none; }
.map::before {           /* the dotted path */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 2rem; width: 6px; translate: -50% 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--text) 40%, transparent) 2.2px, transparent 2.8px) 50% 0 / 6px 16px repeat-y;
}
.stop { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; margin-bottom: 3rem; }
.stop.event { --ring: #5aa7dc; }
.stop.elite { --ring: #e0573f; }
.stop.start { --ring: #e8b84a; }
.stop .node {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--surface) 80%, #fff 6%), var(--bg));
  border: 3px solid var(--ring);
  box-shadow: 0 0 0 7px var(--bg), 0 0 26px color-mix(in srgb, var(--ring) 45%, transparent);
}
.stop .node img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 4px 6px #0008); }
.stop .node img.rounded { border-radius: 18%; }
.stop .panel { grid-column: 3; grid-row: 1; margin-left: 1rem; }
.stop:nth-child(even) .panel { grid-column: 1; margin: 0 1rem 0 0; }
.stop .panel::before {   /* little connector from the path to the panel */
  content: ""; position: absolute; top: 50%; width: 1rem; height: 2px; background: var(--ring); opacity: .6;
}
.stop .panel { position: relative; }
.stop:nth-child(odd) .panel::before { left: -1rem; }
.stop:nth-child(even) .panel::before { right: -1rem; }
.node-type { margin: 0 0 .35rem; font: 700 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ring); }
.anim .stop:not(.in) { opacity: 0; transform: translateY(30px); }
.anim .stop.in { --fy: 30px; --fr: -1.5deg; animation: cut-in .6s steps(1, end); }
@media (max-width: 760px) {
  .map::before { left: 40px; }
  .stop { grid-template-columns: 80px 1fr; }
  .stop .node { grid-column: 1; width: 72px; height: 72px; }
  .stop .panel, .stop:nth-child(even) .panel { grid-column: 2; margin: 0 0 0 .8rem; }
  .stop .panel::before, .stop:nth-child(even) .panel::before { left: -.8rem; right: auto; width: .8rem; }
}

/* ---------- Field notes ---------- */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 1.4rem; }
.note {
  position: relative; padding: 1.4rem 1.6rem 1.2rem; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), var(--surface));
  border: 1px solid var(--line); box-shadow: 0 10px 30px #0003;
}
.note::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--gold); }
.note-meta { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.note h3 { margin: 0; font-size: 1.3rem; }
.note-lead { margin: .4rem 0 .8rem; color: color-mix(in srgb, var(--text) 85%, transparent); }
.note details { border-top: 1px solid var(--line); padding-top: .7rem; }
.note summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); list-style: none; }
.note summary::-webkit-details-marker { display: none; }
.note summary::after {   /* Tabler chevron: points right when closed, turns down when open */
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.15em; rotate: -90deg;
  background: currentColor; -webkit-mask: url(img/icons/tb-chevron-down.svg) center / contain no-repeat; mask: url(img/icons/tb-chevron-down.svg) center / contain no-repeat;
  transition: rotate .2s;
}
.note details[open] summary::after { rotate: 0deg; }
.note summary { align-items: center; }
.note details p, .note details ul { margin: .7rem 0 0; }
.note details ul { padding-left: 1.2rem; }
.note details li + li { margin-top: .35rem; }

/* ---------- Simple doc pages (privacy) ---------- */
.doc-page { max-width: 760px; }
.doc-page .sec-head h1 { margin: .25em 0 0; font: 800 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--serif); }
.doc-page .panel { margin-bottom: 1.2rem; }
.doc-page .panel h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.doc-page .panel p { margin: .5rem 0 0; }
.back { font-weight: 600; text-decoration: none; }
.doc-updated { color: var(--muted); font-size: .85rem; text-align: center; }
.foot a { color: var(--muted); }

/* Map panels: organization line, and stacked roles at one org (promotions) */
.stop .org { margin: -.1rem 0 .3rem; font-weight: 600; color: var(--ink); }
.role-step { position: relative; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--ring) 55%, transparent); }
.role-step + .role-step { margin-top: .9rem; }
.role-step::before { content: ""; position: absolute; left: -6px; top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ring); }
.role-step + .role-step::before { background: var(--bg); border: 2px solid var(--ring); }
.role-title { margin: 0; font: 700 1.05rem var(--serif); }
.role-step .meta { margin: .1rem 0 .4rem; }
.card .art img.rounded { border-radius: 14%; }

/* ---------- Projects: relic shelf with filters ---------- */
/* Tiles show the picture, title and one-line summary; pressing one opens it full width with the details. */
.shelf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.8rem; }
.shelf-filters button {
  padding: .4em 1em; font: 600 .85rem var(--sans); letter-spacing: .03em; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 4px;
  transition: background .2s, border-color .2s, color .2s;
}
.shelf-filters button span { margin-left: .4em; opacity: .55; font-weight: 500; }
.shelf-filters button:hover { border-color: color-mix(in srgb, #f5c542 60%, transparent); }
.shelf-filters button[aria-pressed="true"] { color: #241a03; background: linear-gradient(#ffe39a, #e8b84a); border-color: #b8860b; }
.shelf-filters button[aria-pressed="true"] span { opacity: .7; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; align-items: start; }
.prow {
  display: flex; flex-direction: column; gap: 1rem; padding: 1rem; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: 6px;
  transition: translate .25s, border-color .25s, box-shadow .25s;
}
.prow:hover, .prow:focus-within { translate: 0 -4px; border-color: color-mix(in srgb, #f5c542 55%, transparent); box-shadow: 0 12px 26px #0008; }
.prow-media {
  display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  padding: .8rem; border: 1px solid var(--line); border-radius: 4px;
  background: #0f1513;                      /* fixed dark so the diagrams read in light mode too */
}
.prow-media img { width: 100%; height: 100%; object-fit: contain; }
.prow-media img.illus { width: 62%; }
.prow-media .chain, .prow-media .ladder { max-width: 340px; }
.prow-media .heat-grid { width: min(170px, 52vw); }
.prow-kicker { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prow h3 { margin: 0; font-size: 1.3rem; }
.prow-sum { margin: .45rem 0 0; font-size: .98rem; }
.prow ul { margin: .8rem 0 0; padding-left: 1.15rem; color: color-mix(in srgb, var(--text) 85%, transparent); }
.prow li + li { margin-top: .4rem; }
.prow li::marker { color: var(--gold); }
.prow-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0 0; }
.prow-links a { font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.prow-links a:hover { border-bottom-color: var(--ink); }
.prow-more {
  align-self: flex-start; margin-top: .8rem; padding: .25em .7em; cursor: pointer;
  font: 600 .78rem var(--sans); color: #f5c542; background: #f5c5421a; border: 1px solid #f5c54266; border-radius: 4px;
}
.prow:not(.open) ul { display: none; }
.prow[hidden] { display: none; }
/* Opened: spans the whole shelf, picture on the left and details on the right. */
.prow.open { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 2rem; padding: 1.4rem; cursor: default; border-color: #f5c542aa; }
.prow.open h3 { font-size: 1.6rem; }
.prow.open ul { animation: unfold .35s ease-out; }
.anim .prow:not(.in) { opacity: 0; transform: translateY(24px); }
.anim .prow.in { --fy: 24px; --fr: -1deg; animation: cut-in .7s steps(1, end); }
@media (max-width: 820px) { .prow.open { grid-template-columns: 1fr; gap: 1rem; } }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* ---------- Experience: Map / Compact switch ---------- */
.view-toggle { display: flex; justify-content: center; gap: 2px; width: max-content; margin: -1.2rem auto 2.2rem; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.view-toggle button { padding: .35em 1em; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: .85rem; font-weight: 600; }
.view-toggle button[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Compact: same entries, as plain rows */
.map.compact { max-width: 820px; padding: 0; border-top: 1px solid var(--line); }
.map.compact::before, .map.compact .node-type, .map.compact .panel::before,
.map.compact ul, .map.compact .role-step::before { display: none; }
.map.compact .stop { grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.map.compact .stop .node { grid-column: 1; width: 40px; height: 40px; border-width: 2px; box-shadow: none; animation: none; }
.map.compact .stop .node img { width: 72%; height: 72%; filter: none; }
.map.compact .stop .panel, .map.compact .stop:nth-child(even) .panel {
  grid-column: 2; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline;
}
.map.compact .panel > h3 { grid-column: 1; font-size: 1.05rem; }
.map.compact .panel > .org { grid-column: 1; margin: .1rem 0 0; font-size: .9rem; }
.map.compact .panel > .meta { grid-column: 2; grid-row: 1; margin: 0; font-size: .85rem; white-space: nowrap; }
.map.compact .role-step { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 0; border: 0; margin-top: .25rem; }
.map.compact .role-step + .role-step { margin-top: .15rem; }
.map.compact .role-title { font: 500 .92rem var(--sans); color: color-mix(in srgb, var(--text) 85%, transparent); }
.map.compact .role-step .meta { margin: 0; font-size: .85rem; white-space: nowrap; }
@media (max-width: 560px) {
  .map.compact .stop .panel, .map.compact .role-step { grid-template-columns: 1fr; }
  .map.compact .panel > .meta { grid-column: 1; grid-row: auto; }
}

/* ---------- Less rounding: crisp corners read less "template" ---------- */
.panel, .note { border-radius: 6px; }
.plate span { border-radius: 4px; }
.eyebrow.whoami, .btn-ghost, .tb-name .mono { border-radius: 4px; }
.tb-tools { border-radius: 6px; }
.tb-tools button { border-radius: 3px; }

/* Experience group headings (Positions / Competitions) */
.map-head { margin: 2.6rem 0 1.4rem; }
.view-toggle + .map-head { margin-top: 0; }

/* Map nodes: just the logo, big, no ring. A soft fade of the page color sits behind it so the
   dotted path doesn't show through transparent logos (no visible circle edge). */
.stop .node {
  width: 128px; height: 128px; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(closest-side, var(--bg) 62%, transparent);
}
.stop .node img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px #000a); }
.stop .node img.rounded { border-radius: 16%; }
.stop .node img.ink { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px #ffffff70) drop-shadow(0 8px 14px #000a); }
.stop { grid-template-columns: 1fr 150px 1fr; }
@media (max-width: 760px) {
  .stop { grid-template-columns: 84px 1fr; }
  .stop .node { width: 84px; height: 84px; }
  .map::before { left: 42px; }
}
/* Compact keeps the descriptions, just tighter, with a smaller logo */
.map.compact .stop { grid-template-columns: 64px 1fr; gap: 1.2rem; padding: 1.2rem 0; }
.map.compact .stop .node { width: 64px; height: 64px; background: none; }
.map.compact ul { display: block; grid-column: 1 / -1; margin: .45rem 0 0; padding-left: 1.1rem; font-size: .92rem; color: color-mix(in srgb, var(--text) 82%, transparent); }
.map.compact li + li { margin-top: .25rem; }
.map.compact .role-step ul { margin-top: .3rem; }
.map.compact .stop .node img { width: 100%; height: 100%; }

/* ---------- Header (StS2-style): floor counter + map / settings icons ---------- */
.topbar { gap: 1rem; }
.tb-icons { display: flex; gap: .4rem; margin-left: auto; }
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line);
  color: var(--text); transition: border-color .2s, background-color .2s, translate .2s;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); translate: 0 -1px; }
.ic { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.floor {
  display: flex; align-items: baseline; gap: .45rem; margin: 0 0 0 .4rem;
  padding: .3rem .75rem; border-radius: 4px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: .82rem;
}
.floor-label { color: var(--muted); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
.floor b { font: 800 1.05rem var(--serif); color: var(--gold); }
.floor-name { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .tb-full { display: none; }
  .floor { margin-left: 0; }
}

/* Settings: a small panel under the gear, with on/off switches */
.settings {
  position: absolute; top: calc(100% + 8px); right: var(--gutter); width: 250px; padding: .9rem;
  border-radius: 6px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, #000); box-shadow: 0 16px 40px #0008;
}
.settings-title { margin: 0 0 .6rem; font: 700 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.settings .tb-tools { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; background: none; }
.settings .tb-tools button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: .55rem .6rem; border-radius: 4px; font-size: .9rem; font-weight: 500; color: var(--text); text-align: left; background: none;
}
.settings .tb-tools button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.settings .tb-tools button[aria-pressed="true"] { background: none; }
.settings .tb-tools button[aria-pressed]::after {       /* the switch */
  content: ""; flex: none; width: 32px; height: 18px; border-radius: 9px;
  background: radial-gradient(circle at 9px 50%, #fff 0 6px, transparent 6.5px), color-mix(in srgb, var(--text) 22%, transparent);
  transition: background .2s;
}
.settings .tb-tools button[aria-pressed="true"]::after {
  background: radial-gradient(circle at 23px 50%, #fff 0 6px, transparent 6.5px), var(--accent);
}

/* ---------- Map dialog: parchment, ink nodes on a dotted path ---------- */
.mapdlg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: #000b; backdrop-filter: blur(4px); }
.mapdlg[hidden] { display: none; }
.map-sheet {
  position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow: hidden auto;
  padding: 1.4rem 1.6rem 1.6rem; border-radius: 6px; color: #3b2f22;
  border: 2px solid #b79d6c;
  background:
    radial-gradient(ellipse at 50% 30%, #f6efdc, #e3d4b1 75%, #cdb98c);
  box-shadow: inset 0 0 50px #8a6d3a55, 0 30px 70px #000c;
  animation: rise .35s cubic-bezier(.2, .8, .2, 1);
}
.map-sheet h2 { margin: 0; text-align: center; font: 800 2rem var(--serif); color: #3b2f22; }
.map-sub { margin: .2rem 0 0; text-align: center; font-size: .85rem; color: #6b5a43; }
.map-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: none; color: #3b2f22; }
.map-close:hover { background: #3b2f2215; }
.map-area { position: relative; height: clamp(320px, calc(100svh - 190px), 600px); margin-top: .8rem; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines polyline { fill: none; stroke: #5a4630; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mnode {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; justify-items: center; gap: .15rem; color: #3b2f22; text-decoration: none;
  transition: scale .2s cubic-bezier(.2, .9, .3, 1.4), color .2s;
}
.mnode .ic { width: 38px; height: 38px; padding: 4px; border-radius: 50%; background-color: currentColor; background-clip: content-box; }
.mnode span { font: 700 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: #ecdfc2cc; padding: 0 .3em; border-radius: 2px; }
.mnode:hover, .mnode:focus-visible { scale: 1.15; color: #8b1e14; outline: none; }
.mnode.here::before {     /* hand-drawn ink circle around where you are, like the StS map */
  content: ""; position: absolute; left: 50%; top: 19px; width: 56px; height: 52px; translate: -50% -50%; rotate: -8deg;
  border: 2.5px solid #8b1e14; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
}

/* Map icons: game-icons silhouettes in dark ink, wobbled by the #ink SVG filter */
.mnode .ic { width: 48px; height: 48px; padding: 0; border-radius: 0; background-color: currentColor; background-clip: border-box; filter: url(#ink) drop-shadow(0 1px 0 #f6efdc); }
.mnode { color: #34281b; }
.mnode span { font-size: .66rem; }
.mnode.boss { color: #6d1a12; }
.mnode.boss .ic { width: 68px; height: 68px; }
.mnode.boss span { font-size: .74rem; color: #6d1a12; }
.mnode.here::before { top: 24px; width: 66px; height: 60px; }
.mnode.boss.here::before { top: 34px; width: 88px; height: 80px; }
/* Floor counter shows BOSS on the last floor */
.floor.boss .floor-label { display: none; }
.floor.boss b { color: #e0573f; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; }

/* ---------- Name hover effects ----------
   Monogram: flips like a card to show GRC, and the name slides to "GRC · Cloud · AI".
   Name text: a gold sheen sweeps across it and embers float up (spawned in main.js). */
.tb-name { position: relative; }
.tb-name .mono { width: 34px; height: 30px; padding: 0; background: none; box-shadow: none; perspective: 240px; }
.mono-card { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .9, .3, 1.3); }
.mono-front, .mono-back {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; backface-visibility: hidden;
  font: 800 .78rem var(--serif); color: #1f1703;
  background: linear-gradient(#ffe39a, #e8b84a); box-shadow: inset 0 1px 0 #fff8, 0 2px 6px #0006;
}
.mono-back { transform: rotateY(180deg); font-size: .6rem; letter-spacing: .05em; color: #f5c542; background: linear-gradient(#2e6b5a, #0f2a23); border: 1px solid #e8b84a; }
[data-fx~="flip"] .mono:hover .mono-card { transform: rotateY(180deg); }
.tb-full { display: inline-grid; }
.tb-real, .tb-alt { grid-area: 1 / 1; transition: translate .35s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.tb-alt { translate: 0 10px; opacity: 0; color: var(--gold); font: 700 .92rem var(--sans); letter-spacing: .04em; align-self: center; white-space: nowrap; }
[data-fx~="flip"]:has(.mono:hover) .tb-real { translate: 0 -10px; opacity: 0; }
[data-fx~="flip"]:has(.mono:hover) .tb-alt { translate: 0 0; opacity: 1; }
[data-fx~="shimmer"] .tb-real {
  background: linear-gradient(100deg, var(--text) 40%, #fff3c4 50%, var(--text) 60%) 120% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-mode="light"] [data-fx~="shimmer"] .tb-real { background-image: linear-gradient(100deg, var(--text) 40%, #c99a1e 50%, var(--text) 60%); }
[data-fx~="shimmer"] .tb-real:hover { animation: name-sheen .9s ease-out; }
.tb-real { position: relative; }
.name-ember {
  position: absolute; bottom: 30%; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
  background: #ffcf8a; box-shadow: 0 0 6px 2px #ffb45588;
  animation: name-ember 1.2s ease-out forwards;
}
@keyframes name-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes name-ember { from { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx, 0), -30px) scale(.6); } }

/* Big name hover: StS-style floating "damage numbers" (spawned in main.js) */
.name { position: relative; }
.dmg {
  position: absolute; top: 0; left: var(--x); z-index: 3; pointer-events: none; white-space: nowrap;
  font: 800 clamp(1.1rem, 2.2vw, 1.8rem)/1 var(--serif); letter-spacing: 0; text-transform: none;
  color: var(--c); -webkit-text-stroke: 5px #120d05; paint-order: stroke fill; text-shadow: 0 4px 0 #0009;
  opacity: 0; animation: dmg 1.3s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes dmg {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  14%  { opacity: 1; transform: translate(-50%, -8px) scale(1.3); }
  28%  { transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -80px) scale(.9); }
}

.icon-btn .ic { width: 24px; height: 24px; }
.icon-btn { color: #f0d79a; background: linear-gradient(#2a2418, #17130c); border-color: #6b5426; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0006; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: #ffe9b0; border-color: #e8b84a; background: linear-gradient(#3a301d, #1d170e); }
[data-mode="light"] .icon-btn { color: #4a3816; background: linear-gradient(#f6ecd2, #e6d6ad); border-color: #b79d6c; }
.floor {
  border: 0; border-radius: 0; padding: .32rem 1.1rem;
  background: linear-gradient(#2a2418, #17130c);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  box-shadow: inset 0 0 0 1px #6b5426;
}
.floor-label { color: #b9a77c; }
.floor-name { color: #f3ead2; }
[data-mode="light"] .floor { background: linear-gradient(#f6ecd2, #e6d6ad); }
[data-mode="light"] .floor-label { color: #7a6638; }
[data-mode="light"] .floor-name { color: #2a251c; }
/* ---------- Social links: brand-colored icon tiles ---------- */
/* Hover: small lift, a light sweep across the tile, and the other tiles dim. */
.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; padding-bottom: 1.6rem; }
.soc {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; cursor: pointer;
  color: #fff; border: 1.5px solid #ffffff2e; border-radius: 10px; box-shadow: 0 4px 8px #0008;
  background: linear-gradient(110deg, transparent 35%, #ffffff8c 50%, transparent 65%) 200% 0 / 250% 100% no-repeat, var(--b);
  transition: translate .25s, scale .25s, opacity .25s, box-shadow .25s, background-position 0s;
}
.soc .ic { width: 30px; height: 30px; transition: scale .25s; }
.soc:hover, .soc:focus-visible {
  translate: 0 -4px; box-shadow: 0 10px 16px #000a;
  background-position: -100% 0, 0 0;
  transition: translate .25s, scale .25s, box-shadow .25s, background-position .7s ease-out;
}
.soc:hover .ic, .soc:focus-visible .ic { scale: 1.1; }
.socials:hover .soc:not(:hover) { opacity: .55; scale: .94; }
.soc::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 4px;
  padding: .25em .6em; white-space: nowrap; font: 600 .78rem var(--sans); color: #f6e7b8;
  background: #141210; border: 1px solid color-mix(in srgb, #f5c542 55%, #000); border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; z-index: 5;
}
.soc:hover::after, .soc:focus-visible::after { opacity: 1; translate: -50% 0; }
.simple .soc, .reduced .soc { transition: none; }
@media (max-width: 600px) { .soc { width: 52px; height: 52px; } .soc .ic { width: 26px; height: 26px; } }

/* ---------- Experience logos: bigger, with a hover wobble ---------- */
.map.compact .stop { grid-template-columns: 120px 1fr; gap: 1.4rem; align-items: center; }
.map.compact .stop .node { width: 120px; height: 120px; }
@media (max-width: 600px) {
  .map.compact .stop { grid-template-columns: 84px 1fr; gap: 1rem; }
  .map.compact .stop .node { width: 84px; height: 84px; }
}
.stop .node img { transition: scale .25s, filter .25s; }
.stop:hover .node img, .map.compact .stop:hover .node img { scale: 1.1; animation: node-wobble .6s ease-out; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 60%, transparent)); }
@keyframes node-wobble {
  0% { rotate: 0deg; } 25% { rotate: -8deg; } 50% { rotate: 6deg; } 75% { rotate: -3deg; } 100% { rotate: 0deg; }
}
.simple .stop:hover .node img, .reduced .stop:hover .node img { animation: none; }
@media (prefers-reduced-motion: reduce) { .stop:hover .node img { animation: none; } }
/* ---------- Experience, map view: logos only, details pop up when a logo is pressed ---------- */
.map .node { cursor: pointer; }
.map .node:focus-visible { outline: 3px solid #f5c542; outline-offset: 6px; border-radius: 12px; }
.map:not(.compact) .stop .panel {
  opacity: 0; visibility: hidden; scale: .9; z-index: 5;
  transform-origin: left center;
  box-shadow: 0 18px 40px #000b, 0 0 0 1px color-mix(in srgb, var(--ring) 55%, transparent);
  transition: opacity .18s, scale .22s, visibility 0s .22s;
}
.map:not(.compact) .stop:nth-child(even) .panel { transform-origin: right center; }
.map:not(.compact) .stop.open .panel { opacity: 1; visibility: visible; scale: 1; transition: opacity .18s, scale .35s cubic-bezier(.2, 1.4, .4, 1); }
.map:not(.compact) .stop.open .node img { scale: 1.12; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ring) 70%, transparent)); }
.map:not(.compact) .stop { margin-bottom: 1.4rem; }
@media (max-width: 760px) { .map:not(.compact) .stop .panel, .map:not(.compact) .stop:nth-child(even) .panel { transform-origin: left center; } }

/* ---------- Experience, compact view: path tracer ---------- */
/* --fill is set by main.js to the centre of the logo the path has reached. */
.map.compact::before, .map.compact::after {
  content: ""; display: block; position: absolute; left: 59px; top: 60px; width: 3px; translate: none;
  background: var(--line); border-radius: 2px;
}
.map.compact::before { bottom: 60px; }
.map.compact::after { height: max(0px, calc(var(--fill, 60px) - 60px)); background: linear-gradient(#f5c542, #e8b84a); box-shadow: 0 0 10px #f5c54288; transition: height .45s cubic-bezier(.3, .8, .3, 1); }
.map.compact .stop { position: relative; z-index: 1; cursor: pointer; transition: opacity .35s; }
.map.compact .stop .node { background: var(--bg); border-radius: 14px; }
/* Folded rows keep everything a recruiter scans (role, org, dates, tags, timeline); only the bullets fold. */
.map.compact .stop:not(.open) .panel > ul { display: none; }
.map.compact .panel > h3 { margin: 0; font: 700 1.25rem/1.25 var(--serif); color: var(--text); }
.map.compact .panel > .org { color: var(--ink); font-weight: 600; }
.map.compact .panel > .meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.map.compact .stop .panel, .map.compact .stop:nth-child(even) .panel { padding-right: 2.8rem; }
.map.compact .stop .panel::after {
  /* Tabler plus / minus drawn in gold over the tinted badge (a mask would clip the badge too). */
  content: ""; position: absolute; right: .2rem; top: 50%; translate: 0 -50%;
  width: 1.6rem; height: 1.6rem; border-radius: 4px; border: 1px solid #f5c54266;
  --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c542' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background: var(--sign) center / 1rem no-repeat, #f5c5421a;
  transition: rotate .25s;
}
.map.compact .stop.open .panel::after {
  top: 1.1rem; translate: 0 0;
  --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c542' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.map.compact .stop:hover .panel::after { background: var(--sign) center / 1rem no-repeat, #f5c54233; }
.map.compact .stop.open .panel { animation: unfold .35s ease-out; }

@keyframes unfold { from { opacity: 0; translate: 0 -4px; } }
.map.compact .stop:not(.on):not(.seen):not(.open) { opacity: .65; }

.map.compact .stop.on .node img { scale: 1.08; filter: drop-shadow(0 0 16px #f5c542aa); }
.map.compact .stop.on .panel > h3 { color: #f5c542; }
@media (max-width: 600px) { .map.compact::before, .map.compact::after { left: 41px; top: 42px; } .map.compact::before { bottom: 42px; } }
.simple .map.compact::after, .reduced .map.compact::after { transition: none; }

/* Experience tags (what carries into GRC work) and the shared Sep 2024 – Oct 2026 timeline. */
.stop .tags { display: flex; flex-wrap: wrap; gap: .3rem; grid-column: 1 / -1; margin: .5rem 0 0; }
.stop .tags span { padding: .1em .5em; font-size: .76rem; font-weight: 500; color: color-mix(in srgb, var(--text) 85%, transparent); border: 1px solid var(--line); border-radius: 3px; }
.stop .span, .map .axis { --months: 25; }
.stop .span { position: relative; display: block; grid-column: 1 / -1; height: 6px; margin: .7rem 0 .1rem; border-radius: 3px;
  /* year ticks at Jan 2025 (month 4) and Jan 2026 (month 16) */
  background: linear-gradient(90deg, transparent calc(100% * 4 / 25 - 1px), var(--muted) 0 calc(100% * 4 / 25), transparent 0 calc(100% * 16 / 25 - 1px), var(--muted) 0 calc(100% * 16 / 25), transparent 0),
              color-mix(in srgb, var(--line) 55%, transparent); }
.stop .span i { position: absolute; top: 0; bottom: 0; left: calc(100% * var(--s) / var(--months)); width: calc(100% * (var(--e) - var(--s)) / var(--months) - 2px);
  border-radius: 3px; background: var(--ring); }
.stop .span i + i { background: color-mix(in srgb, var(--ring) 55%, transparent); left: calc(100% * var(--s) / var(--months) + 2px); }
.map .axis { display: none; }
.map.compact .axis { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 1.4rem; padding: .4rem 2.8rem .2rem 0; list-style: none; font-size: .72rem; color: var(--muted); }
.map.compact .axis span { grid-column: 2; grid-row: 1; justify-self: start; }
.map.compact .axis span:nth-child(2) { margin-left: calc(100% * 4 / 25); }
.map.compact .axis span:nth-child(3) { margin-left: calc(100% * 16 / 25); }
.map.compact:has(.axis)::before { bottom: calc(60px + 1.6rem); }
.map:not(.compact) .stop .span { display: none; }
@media (max-width: 600px) { .map.compact .axis { grid-template-columns: 84px 1fr; gap: 1rem; } }
.map-note { max-width: 60ch; margin: -.8rem auto 1.6rem; text-align: center; font-size: .92rem; color: var(--muted); }
.map-more { margin: .6rem 0 0; text-align: center; }

/* ---------- Certifications: IBM skill badges row ---------- */
.sub-note { margin: -.6rem auto 1.6rem; text-align: center; color: var(--muted); font-size: .92rem; }
.rewards.badges { gap: 1.6rem; margin-bottom: 2.6rem; }
.rewards.badges .card { --w: 170px; }
.rewards.badges .art img { border-radius: 4px; }

/* ---------- CTF writeups: flag spoilers (blurred until hovered or focused) ---------- */
.flag { font-family: ui-monospace, Consolas, monospace; font-size: .92em; padding: 0 .25em; border-radius: 3px; background: #f5c5421f; color: #f5c542; filter: blur(5px); transition: filter .2s; cursor: help; overflow-wrap: anywhere; }
.flag:hover, .flag:focus, .flag.shown { filter: none; outline: none; }

/* ---------- CTF writeups: card header row, pivot chain, colour-coded bullets ---------- */
.wu-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wu-lvl { padding: .15em .5em; font: 600 .68rem var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; }
.wu-len { margin-left: auto; font-size: .72rem; color: var(--muted); }


/* ---------- CTF writeup pages: article + sticky sidebar (like CTFtime) ---------- */
.wu-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.wu-hero { padding: 2rem 0 2.2rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #e0573f14, transparent); }
.wu-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--muted); }
.wu-crumbs a { color: var(--muted); text-decoration: none; }
.wu-crumbs a:hover { color: var(--text); text-decoration: underline; }
.wu-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.6rem 0 .5rem; font-size: .85rem; color: var(--muted); }
.wu-hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.wu-lede { max-width: 68ch; margin: .8rem 0 0; font-size: 1.12rem; color: color-mix(in srgb, var(--text) 85%, transparent); }
.wu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 3.2rem; align-items: start; padding-top: 2.6rem; padding-bottom: 4rem; }
.wu-article { min-width: 0; max-width: 840px; }
.wu-callout { margin: 0 0 2.4rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.wu-callout h2 { margin: 0 0 .4rem; font: 700 .74rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.wu-callout p { margin: 0; }
.wu-callout.key { border-color: #f5c54288; box-shadow: inset 4px 0 #f5c542; }
.wu-callout.key h2 { color: #f5c542; }
/* Steps hang off a vertical line, numbered like map floors. */
.wu-step { position: relative; margin-left: 1.2rem; padding: 0 0 2.6rem 3.4rem; border-left: 2px solid var(--line); scroll-margin-top: 90px; }
.wu-step:last-of-type { border-left-color: transparent; }
.wu-step h2 { margin: 0 0 .8rem; font-size: 1.35rem; line-height: 1.3; }
.wu-n {
  position: absolute; left: -1.25rem; top: -.25rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  font: 700 .95rem var(--sans); color: #241a03; background: linear-gradient(#ffe39a, #e8b84a); border-radius: 6px; box-shadow: 0 0 0 6px var(--bg);
}
.wu-step ul { margin: .4rem 0; padding-left: 1.1rem; }
.wu-step li + li { margin-top: .45rem; }
.wu-step ul ul { margin-top: .3rem; }
.wu-step li.think { list-style: none; margin-left: -1.1rem; padding: .45rem .8rem; border-left: 3px solid #7fc0e6; background: #7fc0e612; border-radius: 0 4px 4px 0; font-style: italic; }
.wu-step li.think b { font-style: normal; color: #7fc0e6; }
.wu-step li.dead { list-style: none; margin-left: -1.1rem; padding: .45rem .8rem; border-left: 3px solid #e0573f; background: #e0573f12; border-radius: 0 4px 4px 0; }
.wu-step li.dead b { color: #ff8f7a; }
.wu-step li.result b { color: #f5c542; }
.wu-step figure { margin: 1.3rem 0; }
.wu-step figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #0f1513; box-shadow: 0 14px 30px #0008; }
.wu-step figcaption { margin-top: .45rem; font-size: .82rem; color: var(--muted); }
.wu-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.wu-nav a { display: block; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--text); font-weight: 600; transition: border-color .2s, translate .2s; }
.wu-nav a:hover { border-color: #f5c542aa; translate: 0 -2px; }
.wu-nav small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); }
.wu-nav .next { text-align: right; }
/* Sidebar: facts table and the route. */
.wu-side { position: sticky; top: 84px; display: grid; gap: 1.4rem; }
.wu-facts { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 0; padding: 1rem 1.2rem; font-size: .88rem; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.wu-facts dt { padding-top: .15em; font: 700 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wu-facts dd { margin: 0; min-width: 0; }
.wu-tools-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.wu-tools-list li { padding: .1em .45em; font-size: .76rem; border: 1px solid var(--line); border-radius: 3px; }
.wu-facts .wu-flag small { display: block; margin-top: .25rem; font-size: .72rem; color: var(--muted); }
.wu-source { font-weight: 600; color: var(--gold); text-decoration: none; overflow-wrap: anywhere; }
.wu-source:hover { text-decoration: underline; }
.wu-route > p { margin: 0 0 .6rem; font: 700 .72rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.wu-route ol { position: relative; margin: 0; padding: 0; list-style: none; }
.wu-route ol::before, .wu-route ol::after { content: ""; position: absolute; left: 11px; top: 14px; width: 2px; }
.wu-route ol::before { bottom: 14px; background: repeating-linear-gradient(var(--line) 0 4px, transparent 4px 8px); }
.wu-route ol::after { height: calc((100% - 28px) * var(--progress, 0)); background: #e8b84a; transition: height .35s; }
.wu-route a { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; padding: .32rem 0; font-size: .86rem; line-height: 1.3; text-decoration: none; color: var(--muted); }
.wu-route a:hover { color: var(--text); }
.wu-route a b { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: .72rem; color: var(--muted); background: var(--bg); border: 2px solid var(--line); border-radius: 5px; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.wu-route a.seen b { border-color: #e8b84a; color: #e8b84a; }
.wu-route a.on { color: var(--text); font-weight: 600; }
.wu-route a.on b { color: #241a03; background: linear-gradient(#ffe39a, #e8b84a); border-color: #e8b84a; box-shadow: 0 0 0 4px #f5c54233; }
@media (max-width: 980px) {
  .wu-layout { grid-template-columns: 1fr; gap: 2rem; }
  .wu-side { position: static; order: -1; }
  .wu-route { display: none; }
}
@media (max-width: 600px) { .wu-step { margin-left: 1rem; padding-left: 2.2rem; } }
/* ---------- Torchlight: a soft warm glow behind the page that follows the mouse (main.js / wu.js set --mx, --my) ---------- */
:root { --mx: -1000px; --my: -1000px; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx) var(--my), #f5b14a1c, #f5b14a08 40%, transparent 70%);
}
:root[data-mode="light"] body::after { background: radial-gradient(460px circle at var(--mx) var(--my), #e8a03a22, transparent 70%); }
.simple body::after { display: none; }
@media (hover: none) { body::after { display: none; } }

/* ---------- Certifications: plain badge tiles for course badges and goals ---------- */
.btiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 220px)); justify-content: center; gap: 1rem; margin: 0 auto 2.8rem; }
.btile {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.1rem 1rem 1rem; text-align: center;
  text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); border-radius: 8px;
  transition: translate .2s, border-color .2s, box-shadow .2s;
}
a.btile:hover, a.btile:focus-visible { translate: 0 -3px; border-color: #f5c54299; box-shadow: 0 10px 22px #0007; }
.btile-img { display: flex; justify-content: center; align-items: center; gap: .3rem; height: 104px; margin-bottom: .45rem; }
.btile-img img { height: 100%; width: auto; max-width: 104px; object-fit: contain; border-radius: 4px; }
.btile-img img + img { height: 64%; }
.btile-name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.btile-sub { font-size: .8rem; color: var(--muted); }
.btile-link { margin-top: auto; padding-top: .5rem; font-size: .78rem; font-weight: 600; color: var(--gold); }
.btile.goal { border-style: dashed; }
.btile.goal .btile-img img { filter: saturate(.55) brightness(.85); }
.btile-soon { margin-top: auto; padding: .15em .7em; font: 800 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #241a03; background: linear-gradient(#ffe39a, #e8b84a); border-radius: 999px; }
.btile-sub { margin-bottom: .55rem; }

/* ---------- CTF writeups: category tag (writeup pages) ---------- */
.wu-cat { align-self: flex-start; padding: .15em .55em; font: 700 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #ffb4a6; background: #e0573f26; border-radius: 3px; }

/* ---------- CTF solves: one square per writeup, coloured by category ---------- */
.solves { max-width: 1000px; margin: 0 auto 3rem; }
.solve-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.solve-count { margin: 0; color: var(--muted); }
.solve-count b { font: 700 1.6rem "Fraunces", serif; color: var(--text); margin-right: .15em; }
.solve-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.solve-legend button { display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; font: 600 .8rem var(--sans); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 4px; }
.solve-legend button::before { content: ""; width: .7em; height: .7em; border-radius: 2px; background: var(--c); }
.solve-legend button span { color: var(--muted); font-weight: 500; }
.solve-legend button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.solve-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.solve-grid { display: grid; grid-template-columns: repeat(12, 30px); gap: 6px; }
.solve { width: 30px; height: 30px; border-radius: 5px; background: var(--c); box-shadow: inset 0 -3px 0 #0003; transition: scale .15s, opacity .2s, box-shadow .15s; }
a.solve:hover, a.solve:focus-visible, a.solve.on { scale: 1.18; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 14px var(--c); outline: none; z-index: 1; }
.solve.empty { background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: none; border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); }
.solve.dim { opacity: .18; }
.solve-info { min-height: 100%; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.solve-info h4 { margin: .1rem 0 .2rem; font: 700 1.3rem "Fraunces", serif; }
.solve-kicker { margin: 0; font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.solve-meta { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); }
.solve-info p:not([class]), .solve-trick { margin: 0 0 .8rem; }
.solve-read { font-weight: 600; color: var(--gold); text-decoration: none; }
.solve-read:hover { text-decoration: underline; }
.solve-repo { font-size: .85rem; }
@media (max-width: 760px) {
  .solve-body { grid-template-columns: 1fr; }
  .solve-grid { grid-template-columns: repeat(auto-fill, 30px); }
}
/* ---------- Writeups & Notes: two matching columns side by side ---------- */
.codex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; align-items: stretch; }
.codex-col {
  display: flex; flex-direction: column; min-width: 0; padding: 1.4rem 1.5rem 1.6rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 10px;
}
.codex-col > .sub-head { margin: 0 0 .3rem; text-align: left; }
.codex-col > .sub-note { margin: 0 0 1.2rem; text-align: left; }
/* Solves column: grid on top, the hovered solve underneath. */
.codex .solves { max-width: none; margin: 0; }
.codex .solve-body { grid-template-columns: 1fr; gap: 1.1rem; }
.codex .solve-grid { grid-template-columns: repeat(auto-fill, 30px); }
.codex .solve-info { min-height: 0; }
/* Notes column: one list, same card look as the solve panel. */
.codex .notes { grid-template-columns: 1fr; gap: .9rem; }
.codex .note { padding: 1rem 1.2rem 1rem 1.4rem; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); border-radius: 8px; }
.codex .note h3 { font-size: 1.1rem; }
.codex .note-lead { margin: .3rem 0 .6rem; font-size: .92rem; }
@media (max-width: 960px) { .codex { grid-template-columns: 1fr; } }

/* ---------- CTF solves: fuller column (squares fill the width, stats line, hardest-solves list) ---------- */
.codex .solve-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px; }
.codex .solve { width: auto; height: auto; aspect-ratio: 1; border-radius: 6px; }
.codex .solve-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
.codex .solve-count { font-size: .92rem; }
.codex .solve-count b { font-size: 1.35rem; }
.solve-ranked { margin-top: 1.2rem; }
.solve-ranked .solve-kicker { margin-bottom: .5rem; }
.solve-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.solve-list a {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .7rem;
  padding: .55rem .8rem; text-decoration: none; color: var(--text); font-size: .9rem;
  border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent);
  transition: border-color .2s, translate .2s;
}
.solve-list a:hover, .solve-list a:focus-visible { translate: 3px 0; border-color: color-mix(in srgb, var(--c) 60%, transparent); border-left-color: var(--c); }
.solve-rank { font: 700 .95rem "Fraunces", serif; color: var(--muted); }
.solve-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solve-row-cat { padding: .1em .5em; font: 700 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 3px; }
.solve-row-steps { font-size: .78rem; color: var(--muted); }
@media (max-width: 520px) { .solve-row-steps { display: none; } .solve-list a { grid-template-columns: 1.4rem minmax(0, 1fr) auto; } }

/* CTF solves: the info panel keeps one fixed height whatever solve it shows, so the list below never
   shifts under the cursor (a moving list re-triggers hover on another row and makes it flicker). */
.codex .solve-info { height: 13.2rem; display: flex; flex-direction: column; overflow: hidden; }
.codex .solve-info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex .solve-info p:not([class]), .codex .solve-trick { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.codex .solve-read { margin-top: auto; }

/* ---------- CTF writeup pages: reading comfort ---------- */
.wu-article { max-width: 760px; font-size: 1.04rem; line-height: 1.75; }
.wu-step li + li { margin-top: .6rem; }
.wu-step ul { margin: .6rem 0; }
.wu-step h2 { margin-bottom: 1rem; }
.wu-callout p { line-height: 1.7; }

/* ---------- CTF writeup pages: screenshot lightbox (wu.js) ---------- */
.wu-step figure a { cursor: zoom-in; }
.wu-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  padding: 3rem 1.5rem; background: #000d; cursor: zoom-out; animation: lb-in .18s ease-out;
}
.wu-lightbox[hidden] { display: none; }
.wu-lightbox img { max-width: min(1400px, 100%); max-height: calc(100vh - 8rem); object-fit: contain; border: 1px solid #ffffff2e; border-radius: 6px; box-shadow: 0 24px 60px #000; background: #0f1513; }
.wu-lightbox p { margin: 0; color: #e9e2cf; font-size: .9rem; text-align: center; }
.wu-lightbox-close { position: absolute; top: 1rem; right: 1.2rem; width: 2.4rem; height: 2.4rem; font-size: 1.6rem; line-height: 1; color: #fff; background: #ffffff1a; border: 1px solid #ffffff40; border-radius: 6px; cursor: pointer; }
.wu-lightbox-close:hover, .wu-lightbox-close:focus-visible { background: #ffffff33; }
@keyframes lb-in { from { opacity: 0; } }
.simple .wu-lightbox, .reduced .wu-lightbox { animation: none; }

/* ---------- Front-end polish pass (audit: overflow, tap targets, minimum text sizes) ---------- */
/* Header: the mobile "hide full name" rule was overridden by the later .tb-full rule, so on phones
   the header overflowed and pushed the settings button off-screen. Re-assert it after that rule. */
@media (max-width: 560px) {
  .tb-full { display: none; }
  .topbar { gap: .6rem; }
}
/* Stack: 10 columns at full width, so 10-item rows no longer leave one icon alone on a second row. */
@media (min-width: 761px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } }
/* Card text scales with card width; give the small cards a readable floor. */
@media (min-width: 681px) {
  .hand .card .desc, .floater .card .desc { font-size: max(12px, 1em); }
  .card .type { font-size: max(10px, .74em); }
}
.card .art .soon { font-size: max(9px, .62em); }
/* Small uppercase labels: nothing under 11.5px. */
.solve-row-cat, .btile-soon, .prow-kicker { font-size: max(11.5px, .72rem); }
/* Touch targets: at least 24px tall (WCAG 2.2 target size). */
.foot a { display: inline-block; padding: .3rem .15rem; }
.prow-more { min-height: 28px; }
.note summary { padding: .3rem 0; }
/* Character select on phones: 3 + 2 instead of 4 + 1 lonely pick. */
@media (max-width: 560px) { .cs-row { max-width: 340px; margin-inline: auto; } }

/* ---------- Touch adaptation (audit P1/P3) ---------- */
/* Phones: 6 bigger squares per row instead of 12 tiny ones, and only two rows of empty padding.
   ponytail: assumes solves come first in the grid; past 12 solves the last row may show no padding. */
@media (max-width: 680px) {
  .codex .solve-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .codex .solve.empty:nth-child(n+13) { display: none; }
}
/* Touch pointers: every small control at least 44px tall. */
@media (pointer: coarse) {
  .solve-legend button, .shelf-filters button, .view-toggle button, .prow-more, .prow-links a,
  .note summary, .solve-read, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .note summary { display: flex; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .solve-list a { min-height: 44px; }
}

/* ---------- Inline icons (Tabler, MIT) instead of Unicode arrows: 1em, text colour ---------- */
.ii { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ii-ext { -webkit-mask-image: url(img/icons/tb-arrow-up-right.svg); mask-image: url(img/icons/tb-arrow-up-right.svg); }
.ii-go { -webkit-mask-image: url(img/icons/tb-arrow-right.svg); mask-image: url(img/icons/tb-arrow-right.svg); }
.ii-back { -webkit-mask-image: url(img/icons/tb-arrow-left.svg); mask-image: url(img/icons/tb-arrow-left.svg); }
.ii-x { -webkit-mask-image: url(img/icons/tb-x.svg); mask-image: url(img/icons/tb-x.svg); }
a:hover .ii-ext, a:focus-visible .ii-ext { translate: 1px -1px; }
a:hover .ii-go, a:focus-visible .ii-go { translate: 2px 0; }
.ii-ext, .ii-go { transition: translate .2s; }
.wu-lightbox-close { display: grid; place-items: center; }