/* ==========================================================================
   Girly Game Dev — ebbyw.com v2
   Every value below comes from ux/girlygamedev/DESIGN-SYSTEM.md (tokens) and
   COMPONENTS.md (assembly). Golden reference: ux/girlygamedev/mockups.dc.html.
   Do not invent new colors, fonts, radii, or shadows — update the design docs
   first, then mirror the change here.
   ========================================================================== */

:root {
  /* §1 Color — base & surfaces */
  --bg: #FFF3F8;
  --surface: #FFFFFF;
  --hairline: #FFE0EC;
  --hairline-2: #FCE0EC;
  --faint: #FFFAFC;

  /* §1 Ink & text */
  --ink: #5A2A48;
  --body: #87687B;
  --body-article: #5F4557;
  --secondary: #9C5D83;
  --muted: #9E5C82;

  /* §1 Accents */
  --pink: #FF4291;            /* brand pink: fills, borders, icons, large display text */
  --pink-text: #DD005D;       /* pink as SMALL text — the brand pink is only 2.8:1 on the page bg */
  --on-pink: #2A1B2E;         /* text sitting ON a brand-pink fill (white is only 2.8:1) */
  --pink-tint: #FFF0F6;
  --pink-border: #FFD8E8;
  --pink-deep: #B5497E;
  --lavender: #9B7EF0;
  --lavender-tint: #F3EEFF;
  --lavender-border: #E4D8FF;
  --lavender-deep: #7757CF;
  --mint: #34D8AE;
  --mint-tint: #E7FBF4;
  --mint-border: #C9F2E5;
  --mint-deep: #188065;
  --yellow: #FFC24D;
  --orange: #FF9E5C;
  --award: #A46112;

  /* §1 supporting pink tints */
  --pink-soft: #FF9EC4;
  --pink-pale: #FFE3F0;
  --kicker: #CD307C;
  --outline-border: #F1CFDF;

  /* §1 gradients & shadows */
  --bubble: radial-gradient(circle at center, #FFE3F0, #F3E9FF);
  --sunset-bar: linear-gradient(90deg, #FFD36B, #FF9E5C 55%, #FF4291);
  --shadow-card: 0 16px 40px rgba(255, 120, 175, .14);
  --shadow-card-sm: 0 12px 30px rgba(255, 120, 175, .12);
  --shadow-polaroid: 0 12px 26px rgba(90, 42, 72, .22);
  --shadow-btn: 0 10px 26px rgba(255, 66, 145, .4);

  /* §2 Type */
  --f-display: 'Fredoka', sans-serif;
  --f-body: 'Space Grotesk', sans-serif;
  --f-mono: 'Space Mono', monospace;
}

/* Text fonts — self-hosted (DESIGN-SYSTEM §2). All four are OFL-licensed, so
   redistribution is permitted. These are the same `latin` subsets Google served;
   hosting them here removes a render-blocking third-party stylesheet and the
   fonts.gstatic.com round trip. A font is only downloaded when a page actually
   renders text in it — Space Mono (code blocks) and Press Start 2P (the 404
   numeral) cost nothing on pages that don't use them.
   To update: refetch from fonts.googleapis.com/css2 with a modern browser UA,
   take the `latin` @font-face src, and drop the .woff2 into fonts/. */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka.woff2?v=2.3.4') format('woff2');
  font-weight: 300 700; /* one variable file covers 500/600/700 */
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2?v=2.3.4') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono.woff2?v=2.3.4') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p.woff2?v=2.3.4') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Icons are inline <svg>, not an icon font (DESIGN-SYSTEM §2). The two Font
   Awesome woff2 files cost 139 KiB to draw ~10 glyphs; the outlines below are
   the same shapes, extracted from those fonts, at roughly 6 KiB of markup total.
   Class names are unchanged, so every `font-size` / `color` rule that targeted
   the old <span> still sizes and tints the icon:
     height:1em + width:auto  -> the icon scales with font-size, keeping aspect
     fill:currentColor        -> the icon takes the inherited text colour
   Where a rule pins an explicit width (.hobby .fs), the viewBox letterboxes and
   centres the glyph rather than stretching it. */
.fb, .fs {
  height: 1em; width: auto; fill: currentColor;
  display: inline-block; vertical-align: -.125em; flex-shrink: 0;
}

/* Base ------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: the ambient glow is wider than small viewports; hiding it on
   both html and body blocks sideways panning on touch devices. (Not `clip`:
   clip on one axis forces the other axis to clip too, breaking page scroll.) */
html, body {
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
}
/* height:auto is required alongside the width/height attributes on <img>: the
   attributes give the browser an aspect ratio to reserve space with (no layout
   shift), and this stops the literal height attribute from stretching images
   that CSS sizes by width. Rules that set an explicit height (.fp-cover img,
   .byline img, .author-card img) are more specific and still win. */
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
.pixel { image-rendering: pixelated; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Ambient sunset glow (§1) — off-canvas top, pointer-events none */
.glow {
  position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 320px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,160,90,.20), rgba(255,66,145,.10) 45%, transparent 72%);
}

/* Layout ------------------------------------------------------------------ */
.page { position: relative; max-width: 1180px; margin: 0 auto; }

/* Top bar (COMPONENTS §1) -------------------------------------------------- */
.topbar {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 40px; border-bottom: 1px solid var(--hairline-2);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img { width: 26px; }
.topbar .brand .wordmark { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.topbar .links {
  display: flex; align-items: center; gap: 28px;
  font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--secondary);
}
.topbar .links a:hover { color: var(--ink); }
.topbar .links a.active { color: var(--pink-text); }
.pill-online {
  display: inline-flex; align-items: center; gap: 7px; color: var(--ink);
  background: var(--surface); border: 1px solid #FFDCEA; padding: 6px 12px; border-radius: 20px;
  font-family: var(--f-display); font-weight: 500; font-size: 13px;
}
.pill-online .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(52,216,174,.8); }
.hamburger {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer;
  padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; align-items: center;
}
.hamburger span { width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; display: block; }

/* Mobile nav overlay (DESIGN-SYSTEM §7) ------------------------------------ */
.nav-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: rgba(255, 243, 248, .98); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav-overlay.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-overlay a.navlink { font-family: var(--f-display); font-weight: 600; font-size: 28px; color: var(--ink); }
.nav-overlay a.navlink.active { color: var(--pink-text); }
.nav-overlay a.navlink.active::before { content: '✦ '; font-size: 20px; }
.nav-overlay .close {
  position: absolute; top: 18px; right: 18px; background: none; border: 0; cursor: pointer;
  font-size: 28px; color: var(--ink); min-width: 44px; min-height: 44px;
}
.nav-overlay .foot { position: absolute; bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.nav-overlay .foot .socials { display: flex; gap: 20px; font-size: 22px; color: #C58BAB; }
body.nav-locked { overflow: hidden; }

/* Buttons (COMPONENTS §2) --------------------------------------------------- */
.btn-primary {
  display: inline-block; font-family: var(--f-display); font-weight: 600; font-size: 16px;
  color: var(--on-pink); background: var(--pink); padding: 15px 30px; border-radius: 30px;
  box-shadow: var(--shadow-btn); transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-secondary {
  display: inline-block; font-family: var(--f-display); font-weight: 500; font-size: 15px;
  color: #8A4C6E; background: var(--surface); border: 1px solid var(--outline-border);
  padding: 14px 26px; border-radius: 30px; transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(255, 66, 145, .5); }

/* Hero (COMPONENTS §7) ------------------------------------------------------ */
.hero { position: relative; display: grid; grid-template-columns: 360px 1fr; gap: 48px; padding: 52px 40px; }
.hero .pitch { align-self: center; }
.kicker { font-family: var(--f-display); font-weight: 500; font-size: 14px; letter-spacing: .06em; color: var(--kicker); margin-bottom: 16px; }
.hero h1 { font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 1.04; letter-spacing: -.01em; color: var(--ink); margin-bottom: 22px; }
.hero h1 .accent { color: var(--pink); }
.hero .pitch p { font-size: 17px; line-height: 1.7; color: var(--body); max-width: 500px; margin-bottom: 32px; }
.hero .cta { display: flex; align-items: center; gap: 16px; }
.hero .cta .socials { display: flex; gap: 16px; margin-left: 6px; font-size: 19px; color: #C58BAB; }
.hero .cta .socials a:hover { color: var(--pink); }
.bio-short { display: none; }

/* Player card (COMPONENTS §6) ----------------------------------------------- */
.player-card {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 22px; padding: 30px; text-align: center; box-shadow: var(--shadow-card);
}
.player-card .eyebrow { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--kicker); }
.player-card .bow { position: absolute; top: -16px; left: 20px; font-size: 24px; }
.player-card .spark-l { position: absolute; top: 120px; left: -10px; font-size: 20px; color: var(--pink-soft); }
.bubble {
  position: relative; margin: 16px auto; width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bubble); border-radius: 50%;
}
.bubble img { position: relative; width: 108px; }
.bubble .s1 { position: absolute; top: 6px; left: 10px; font-size: 15px; color: var(--lavender); }
.bubble .s2 { position: absolute; bottom: 4px; right: -6px; font-size: 14px; color: var(--yellow); }
.player-card .name { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.player-card .role { font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--pink-text); margin-top: 4px; }

/* Polaroid (COMPONENTS §14) */
.polaroid {
  position: absolute; top: -22px; right: -26px; width: 104px;
  background: var(--surface); padding: 7px 7px 0; border-radius: 6px;
  box-shadow: var(--shadow-polaroid); transform: rotate(6deg);
}
.polaroid img { width: 100%; display: block; border-radius: 2px; }
.polaroid .caption { font-family: var(--f-display); font-weight: 500; font-size: 10px; color: var(--secondary); padding: 5px 2px 6px; }

/* Icon chips (COMPONENTS §3) */
.chips { display: flex; gap: 12px; justify-content: center; margin: 20px 0 4px; }
.chip { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chip.unity { background: var(--pink-tint); border: 1px solid var(--pink-border); }
.chip.unity img { width: 22px; height: 22px; display: block; }
.chip.apple { background: var(--lavender-tint); border: 1px solid var(--lavender-border); }
.chip.apple .fb { font-size: 21px; color: var(--lavender-deep); }
.chip.cpp { background: var(--mint-tint); border: 1px solid var(--mint-border); }
.chip.cpp span { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--mint-deep); }

/* Emoji stats (COMPONENTS §4) */
.stats { text-align: left; margin-top: 18px; border-top: 1px solid var(--hairline-2); padding-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-display); font-weight: 500; font-size: 18px; color: var(--body); }
.stat-row .meter { letter-spacing: 1px; }
.steam { font-family: var(--f-display); font-weight: 500; font-size: 18px; color: var(--body); }
.steam .label { display: flex; justify-content: space-between; margin-bottom: 5px; }
.steam .label .pct { color: var(--pink-text); }
.steam .track { height: 8px; background: var(--pink-pale); border-radius: 5px; overflow: hidden; }
.steam .fill { width: 31%; height: 100%; background: var(--sunset-bar); }

/* Now playing (COMPONENTS §5) */
.now-playing { margin-top: 18px; border-top: 1px solid var(--hairline-2); padding-top: 16px; display: flex; align-items: center; gap: 12px; text-align: left; }
.now-playing .tile { width: 44px; height: 44px; border-radius: 12px; background: var(--pink-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.now-playing .tile .fs { color: var(--pink); font-size: 20px; }
.now-playing .eyebrow { font-family: var(--f-display); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.now-playing .eyebrow .live { color: var(--mint); animation: blink 1.4s step-end infinite; }
.now-playing .game { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.now-playing .platform { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--secondary); margin-top: 1px; }
.now-playing .platform .fb { font-size: 15px; }

/* Section headers ---------------------------------------------------------- */
.section-head {
  position: relative; padding: 20px 40px 8px; display: flex; align-items: baseline;
  justify-content: space-between; border-top: 1px solid var(--hairline-2);
}
.section-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--ink); margin-top: 18px; }
.section-head .count { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--pink-text); }

/* Quest cards (COMPONENTS §8) ----------------------------------------------- */
/* featured fills the left column and spans the mini rows, so the three minis stack
   beside it instead of stretching to its height (rebalanced 2.10.4; the ≤1024 query
   overrides both the columns and the featured card's placement) */
.quests { position: relative; padding: 16px 40px 40px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: stretch; }
.quest-featured {
  grid-row: 1 / span 3;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-card-sm); display: flex; flex-direction: column;
}
/* whole-card links (featured/cleared quests) lift on hover */
a.quest-featured, a.project-card, a.quest-mini { transition: transform 150ms ease, box-shadow 150ms ease; }
a.quest-featured:hover, a.project-card:hover, a.quest-mini:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 120, 175, .2); }
.quest-featured .thumb { position: relative; }
.quest-featured .thumb img { width: 100%; display: block; }
.tag {
  font-family: var(--f-display); font-weight: 600; font-size: 11px;
  padding: 4px 11px; border-radius: 20px;
}
.tag.cleared { color: var(--mint-deep); background: var(--mint-tint); border: 1px solid var(--mint-border); }
.tag.progress { font-weight: 500; color: var(--lavender-deep); background: var(--lavender-tint); border: 1px solid var(--lavender-border); }
.tag.soon { font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--outline-border); }
.tag.on-thumb { position: absolute; top: 12px; left: 12px; }
.quest-featured .body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
/* shared card typography — .quest-featured (Home, 6a) and .project-card (Quests
   index, 7a) differ only in body padding and cover treatment */
.quest-featured h3, .project-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); }
.quest-featured p, .project-card p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 8px 0; }
.quest-featured .award, .project-card .award { color: var(--award); font-weight: 600; }
.quest-featured .foot, .project-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.quest-featured .meta, .project-card .meta { font-family: var(--f-display); font-weight: 500; font-size: 12px; color: var(--muted); }
.quest-featured .view, .project-card .view { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--pink-text); }
.quest-mini {
  background: var(--faint); border: 1.5px dashed #F3CADD; border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
a.quest-mini { text-decoration: none; }
.quest-mini .emoji { font-size: 22px; line-height: 1; }
/* mini thumb (added 2.10.1) — a quest-mini may lead with a small screenshot instead
   of its emoji, in the same rounded hairline frame the big covers use */
.quest-mini .mini-thumb { border-radius: 10px; overflow: hidden; border: 1px solid var(--hairline); }
.quest-mini .mini-thumb img { width: 100%; height: 120px; object-fit: cover; object-position: top; display: block; }
.quest-mini h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; color: #8A4C6E; margin-top: auto; }
.quest-mini p { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--secondary); }
.quest-mini .tag { align-self: flex-start; margin-top: 4px; }
.sparkle { position: absolute; pointer-events: none; }

/* Run history (COMPONENTS §9) + Off the clock -------------------------------- */
.two-col { position: relative; padding: 20px 40px 44px; border-top: 1px solid var(--hairline-2); display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; }
.two-col h2 { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 18px 0 6px; }
.run-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.run-row:last-child { border-bottom: 0; }
.run-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot.pink { background: var(--pink); } .dot.lavender { background: var(--lavender); }
.dot.yellow { background: var(--yellow); } .dot.mint { background: var(--mint); }
.run-row .what { flex: 1; }
.run-row .who { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.run-row .role { color: var(--body); font-size: 13px; }
.run-row .years { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }
.hobbies { display: flex; flex-direction: column; gap: 12px; }
.hobby { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; }
.hobby .fs { font-size: 18px; width: 22px; text-align: center; }
.hobby span:last-child { font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--ink); }

/* Footer -------------------------------------------------------------------- */
.footer { position: relative; padding: 22px 40px; border-top: 1px solid var(--hairline-2); display: flex; justify-content: space-between; align-items: center; }
.footer { flex-wrap: wrap; gap: 8px 18px; }
.footer .copy { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }
.footer .play { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--pink-text); }
/* Contact lives here — it has no top-nav item. margin-left:auto pushes it and
   everything after it into one right-hand cluster, so it doesn't sit marooned
   in the middle of the bar. */
.footer .contact-link { margin-left: auto; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--secondary); }
.footer .contact-link:hover { color: var(--pink-text); }

/* Page header (7a / 7b / 5b) ------------------------------------------------ */
.page-head { position: relative; padding: 44px 40px 8px; }
.page-head .kicker { margin-bottom: 12px; }
.page-head h1 { font-family: var(--f-display); font-weight: 700; font-size: 52px; color: var(--ink); line-height: 1.02; }
.page-head h1 .emoji { font-size: 30px; }
.page-head .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head .lede { font-size: 16px; line-height: 1.6; color: var(--body); max-width: 460px; }
.page-head .role-line { font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--pink-text); margin-top: 6px; }

/* Filter chips (COMPONENTS §11 / 7a) ---------------------------------------- */
.filters { position: relative; padding: 22px 40px 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-filter { font-family: var(--f-display); font-weight: 500; font-size: 14px; color: #8A4C6E; background: var(--surface); border: 1px solid var(--outline-border); padding: 8px 18px; border-radius: 22px; cursor: pointer; }
.chip-filter.active { font-weight: 600; color: var(--on-pink); background: var(--pink); border: 0; padding: 9px 18px; }

/* Empty filter state (5b / 7a) — shown when a category has no entries yet */
.filter-empty {
  position: relative; padding: 30px 40px 60px; text-align: center;
  font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--muted);
}
.filter-empty[hidden] { display: none; }
.filter-empty button {
  font: inherit; color: var(--pink-text); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline;
}
.filter-empty button:hover { color: var(--pink-deep); }

/* Category chips (5b / 7a cards) */
.cat-chip { font-family: var(--f-display); font-weight: 500; font-size: 11px; padding: 3px 10px; border-radius: 14px; }
.cat-chip.lavender { color: var(--lavender-deep); background: var(--lavender-tint); border: 1px solid var(--lavender-border); }
.cat-chip.mint { color: var(--mint-deep); background: var(--mint-tint); border: 1px solid var(--mint-border); }
.cat-chip.pink { color: var(--pink-deep); background: var(--pink-tint); border: 1px solid var(--pink-border); }

/* Project cards (7a) --------------------------------------------------------- */
.projects { position: relative; padding: 16px 40px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.project-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card-sm); display: flex; flex-direction: column; }
.project-card .cover { position: relative; }
.project-card .cover img { width: 100%; display: block; }
.cover-tile { height: 150px; display: flex; align-items: center; justify-content: center; }
.cover-tile .emoji { font-size: 44px; }
.cover-tile.graveyard { background: radial-gradient(circle at 30% 30%, #FFE3F0, #F3E9FF); }
.cover-tile.hoyo { background: radial-gradient(circle at 30% 30%, #FFF0DE, #FFE3F0); }
.project-card .body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.project-card .pc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.project-card .year { font-family: var(--f-display); font-weight: 500; font-size: 12px; color: var(--muted); }
/* h3/p/.award/.foot/.meta/.view come from the shared card rules (see .quest-featured) */
.project-card .view.soon { color: var(--muted); }

/* Quest detail (6b) ----------------------------------------------------------- */
.back-link { font-family: var(--f-display); font-weight: 500; font-size: 14px; color: var(--secondary); }
.back-link:hover { color: var(--ink); }
/* detail pages keep the standard top bar; the "back to" link sits under it */
.back-bar { position: relative; padding: 18px 40px 0; }
.back-bar .back-link { display: inline-flex; align-items: center; min-height: 32px; }
/* the back bar already supplies the gap under the header */
.back-bar ~ main .article-head, .back-bar ~ main .qd-head { padding-top: 24px; }
.qd-head { position: relative; padding: 44px 40px 20px; max-width: 820px; }
.qd-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.qd-tags .year { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }
.qd-head h1 { font-family: var(--f-display); font-weight: 700; font-size: 52px; color: var(--ink); line-height: 1.05; }
.qd-head .lede { font-size: 17px; line-height: 1.6; color: var(--body); margin-top: 12px; }
.meta-cards { position: relative; padding: 8px 40px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.meta-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; }
.meta-card .lbl { font-family: var(--f-display); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kicker); }
.meta-card .val { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 3px; }
.meta-card.award-card { background: #FFF6E6; border-color: #FBE6BE; }
.meta-card.award-card .lbl { color: var(--award); }
.qd-hero { position: relative; padding: 8px 40px; }
.rounded-img { border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); }
.rounded-img img { width: 100%; display: block; }
.qd-body { position: relative; max-width: 680px; padding: 28px 40px 8px; font-size: 17px; line-height: 1.75; color: var(--body-article); }
.qd-body p { margin-bottom: 20px; }
.qd-body h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 14px 0 12px; }
.qd-list { list-style: none; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.qd-list li { display: flex; gap: 12px; align-items: flex-start; }
.qd-list .h { font-weight: 700; }
.qd-list .h.pink { color: var(--pink); } .qd-list .h.lavender { color: var(--lavender); } .qd-list .h.mint { color: var(--mint); }
.trailer { position: relative; max-width: 720px; padding: 8px 40px; }
.trailer .frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); position: relative; padding-bottom: 52%; height: 0; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer .cap { font-family: var(--f-display); font-weight: 500; font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.store-links { position: relative; padding: 24px 40px 40px; display: flex; gap: 14px; }
.store-links .btn-primary, .store-links .btn-secondary { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.footer .next { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--pink-text); }

/* Résumé (7b) ------------------------------------------------------------------ */
.dl-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--on-pink); background: var(--pink); padding: 9px 18px; border-radius: 22px; box-shadow: var(--shadow-btn); transition: transform 150ms ease; }
.dl-btn:hover { transform: translateY(-1px); }
.dl-btn.block { display: none; }
.res-body { position: relative; padding: 28px 40px 40px; display: grid; grid-template-columns: 1.4fr .85fr; gap: 44px; align-items: start; }
.res-body h2 { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.res-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline-2); }
.res-row:last-child { border-bottom: 0; }
.res-row .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.res-row .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.res-row .who { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.res-row .years { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }
.res-row .role-line { font-family: var(--f-display); font-weight: 500; font-size: 14px; margin: 2px 0 8px; }
.res-row .role-line.pink { color: var(--pink-text); } .res-row .role-line.lavender { color: var(--lavender-deep); } .res-row .role-line.amber { color: var(--award); }
.res-row p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }
.side-col { display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px; box-shadow: 0 12px 30px rgba(255,120,175,.1); }
.side-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 14px; }
.loadout { display: flex; flex-direction: column; gap: 12px; }
.bar .lbl { display: flex; justify-content: space-between; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--body); margin-bottom: 5px; }
.bar .lv.lavender { color: var(--lavender-deep); } .bar .lv.pink { color: var(--pink-text); } .bar .lv.mint { color: var(--mint-deep); }
.bar .track { height: 8px; border-radius: 5px; overflow: hidden; }
.bar .track.lavender { background: #F0EAFF; } .bar .track.pink { background: var(--pink-pale); } .bar .track.mint { background: #DFF7EF; }
.bar .fill { height: 100%; }
.bar .fill.lavender { background: linear-gradient(90deg, #B79BFF, #9B7EF0); }
.bar .fill.pink { background: var(--sunset-bar); }
.bar .fill.mint { background: linear-gradient(90deg, #7CE6C6, #34D8AE); }
.edu-list { display: flex; flex-direction: column; gap: 12px; }
.edu-list .deg { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.edu-list .school { font-size: 13px; color: var(--body); }
.footer .socials { display: flex; gap: 16px; font-size: 17px; color: #C58BAB; }
.footer .socials a:hover { color: var(--pink); }

/* Contact (7c) ------------------------------------------------------------------ */
.contact-hero { position: relative; padding: 44px 40px 20px; text-align: center; }
.contact-hero .big-bubble { margin: 0 auto 18px; width: 96px; height: 96px; border-radius: 50%; background: var(--bubble); display: flex; align-items: center; justify-content: center; }
.contact-hero .big-bubble .fs { font-size: 36px; color: var(--pink); }
.contact-hero h1 { font-family: var(--f-display); font-weight: 700; font-size: 44px; color: var(--ink); line-height: 1.04; }
.contact-hero p { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 440px; margin: 12px auto 0; }
.contact-cards { position: relative; padding: 8px 40px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; }
.email-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(255,120,175,.1); }
.email-card .tile { width: 42px; height: 42px; border-radius: 12px; background: var(--pink-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.email-card .tile .fs { color: var(--pink); font-size: 18px; }
.email-card .lbl { font-family: var(--f-display); font-weight: 500; font-size: 12px; color: var(--muted); }
.email-card .val { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.email-card .copy-btn { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--pink-text); background: none; border: 0; cursor: pointer; padding: 8px; }
.mini-cards { display: flex; gap: 12px; }
.mini-card { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; transition: transform 150ms ease; }
.mini-card:hover { transform: translateY(-1px); }
.mini-card .fb { font-size: 20px; }
.mini-card .fb.gh { color: var(--lavender-deep); } .mini-card .fb.li { color: var(--mint-deep); }
.mini-card span:last-child { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.glow.contact { background: radial-gradient(ellipse at center, rgba(52,216,174,.16), rgba(255,66,145,.08) 50%, transparent 74%); }

/* Save Points index (5b / COMPONENTS §11) ----------------------------------------- */
.featured-post { position: relative; padding: 6px 40px 20px; }
.fp-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.fp-cover { position: relative; min-height: 280px; }
.fp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-body { padding: 30px 30px 30px 4px; align-self: center; }
.fp-body h2 { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--ink); margin: 14px 0 10px; line-height: 1.15; }
.fp-body p { font-size: 15px; line-height: 1.6; color: var(--body); margin-bottom: 16px; }
.post-status { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }
.post-grid { position: relative; padding: 10px 40px 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 16px; box-shadow: var(--shadow-card-sm); }
.post-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--ink); margin: 10px 0 6px; }
.post-card p { font-size: 14px; color: var(--body); line-height: 1.55; }
.post-card .post-status { font-size: 12px; margin-top: 10px; }
/* image treatments (COMPONENTS §14) */
.sticker-frame { background: var(--surface); border: 5px solid #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(90,42,72,.16); transform: rotate(-2deg); overflow: hidden; margin: 6px 6px 18px; }
.placeholder-tile { background: repeating-linear-gradient(135deg, #FFE3F0 0 14px, #F7ECFF 14px 28px); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
.placeholder-tile span { font-family: var(--f-mono); font-size: 11px; color: #C58BAB; }
.polaroid-frame { background: #fff; padding: 8px 8px 0; border-radius: 5px; box-shadow: 0 8px 20px rgba(90,42,72,.16); transform: rotate(2deg); margin: 6px 12px 18px; }
.polaroid-frame img { width: 100%; display: block; }
.polaroid-frame .cap { font-family: var(--f-display); font-weight: 500; font-size: 11px; color: var(--secondary); text-align: center; padding: 6px 0 8px; }
.pastel-tile { border-radius: 12px; overflow: hidden; margin: 6px 6px 18px; background: linear-gradient(135deg, #FFD1E6, #D9C6FF); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; position: relative; }
.pastel-tile .emoji { font-size: 44px; }
.glow.save-points { left: auto; right: -40px; transform: none; width: 520px; background: radial-gradient(ellipse at center, rgba(255,150,80,.16), rgba(255,66,145,.10) 50%, transparent 72%); }

/* Blog post (5c / COMPONENTS §12) ------------------------------------------------- */
.article-head { position: relative; max-width: 720px; margin: 0 auto; padding: 48px 40px 8px; }
.cat-chip.post { display: inline-block; font-weight: 600; font-size: 12px; letter-spacing: .06em; padding: 5px 13px; border-radius: 20px; }
.article-head h1 { font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1.12; color: var(--ink); margin: 16px 0 12px; }
.byline { display: flex; align-items: center; gap: 12px; margin: 20px 0 28px; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(90,42,72,.18); }
.byline .who { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.byline .when { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); }

.article-hero { position: relative; max-width: 820px; margin: 0 auto; }
.article-hero .frame { border-radius: 18px; overflow: hidden; margin: 0 20px; }
.article-hero .frame img { width: 100%; display: block; }
.article-hero .pastel-tile { margin: 0 20px; border-radius: 18px; aspect-ratio: 16/6; }
.article-hero .pastel-tile .emoji { font-size: 64px; }
/* video embed (COMPONENTS §16) — same framed box as .trailer, but usable in a post
   hero or body. aspect-ratio (not .trailer's padding-bottom hack) because this box
   carries side margins: a percentage padding would resolve against the parent's
   full width and letterbox the player. */
.video-embed { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 16 / 9; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-hero .video-embed { margin: 0 20px; }
.article .video-embed { border-radius: 16px; }
/* side padding matches the frame's margin so the caption never runs to the edge */
.article-hero .cap { font-family: var(--f-display); font-weight: 500; font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; padding: 0 20px; }

.article { position: relative; max-width: 640px; margin: 0 auto; padding: 36px 40px 20px; font-size: 17px; line-height: 1.75; color: var(--body-article); }
.article p { margin-bottom: 20px; }
.article h2 { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 28px 0 12px; }
.article a { color: var(--pink-text); font-weight: 500; }
.article a:hover { text-decoration: underline; }
.pull-quote { border-left: 3px solid var(--pink); padding: 6px 0 6px 20px; margin: 8px 0 28px; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--ink); }
.article figure { margin: 8px 0 28px; }
/* polaroid inline in an article — kept small so it punctuates rather than dominates */
.article .polaroid-frame { width: 280px; max-width: 78%; margin: 0 auto; }
.article .polaroid-frame img { border-radius: 2px; }
.article .polaroid-frame .cap { font-size: 12px; }
.article figure .sticker-frame { margin: 0 auto; border-width: 6px; border-radius: 14px; box-shadow: 0 10px 26px rgba(90,42,72,.16); transform: rotate(-1.5deg); }
.article figcaption { font-family: var(--f-display); font-weight: 500; font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px; }
/* wide polaroid — a landscape shot at full body width, with the deep bottom lip a
   polaroid actually has and the caption sitting *in* the lip like a written label.
   The 280px cap above is for the small punctuating polaroid; this one overrides it. */
.article figure.polaroid-frame.wide { width: auto; max-width: 100%; padding: 12px 12px 0; border-radius: 6px; margin: 8px auto 30px; transform: rotate(-1deg); box-shadow: 0 12px 28px rgba(90,42,72,.18); }
.article figure.polaroid-frame.wide figcaption { color: var(--secondary); margin-top: 0; padding: 15px 10px 20px; }
/* a polaroid can also frame a .video-embed: the player becomes the print, so it loses the
   rounded hairline box and takes the print's 2px corners. .roomy adds breathing room below
   a print when the next paragraph would otherwise crowd the lip. */
.article figure.polaroid-frame.wide .video-embed { border-radius: 2px; border: 0; }
.article figure.polaroid-frame.wide.roomy { margin-bottom: 48px; }
/* self-hosted clip (added 2.8.0) — a short mp4 sits in the same frames as an image.
   No third-party player, so it doesn't count against the one-embed rule. height:auto
   matters: without it the height attribute letterboxes the clip inside its frame. */
.article figure .sticker-frame video { width: 100%; height: auto; display: block; }
.polaroid-frame video { width: 100%; height: auto; display: block; border-radius: 2px; }
/* per-figure tilt (added 2.8.0) — media leans a random touch either way; some sit level */
/* The same tilt set applies to index-card thumbnails (.post-card .sticker-frame), so a grid
   of cards can lean left, right and level instead of every sticker rotating the same way. */
.article figure.polaroid-frame.wide.tilt-0, .article figure .sticker-frame.tilt-0, .post-card .sticker-frame.tilt-0 { transform: none; }
.article figure.polaroid-frame.wide.tilt-l1, .article figure .sticker-frame.tilt-l1, .post-card .sticker-frame.tilt-l1 { transform: rotate(-0.9deg); }
.article figure.polaroid-frame.wide.tilt-l2, .article figure .sticker-frame.tilt-l2, .post-card .sticker-frame.tilt-l2 { transform: rotate(-1.8deg); }
.article figure.polaroid-frame.wide.tilt-r1, .article figure .sticker-frame.tilt-r1, .post-card .sticker-frame.tilt-r1 { transform: rotate(0.8deg); }
.article figure.polaroid-frame.wide.tilt-r2, .article figure .sticker-frame.tilt-r2, .post-card .sticker-frame.tilt-r2 { transform: rotate(1.7deg); }
/* itch.io widget (added 2.8.0) — the store card for a post's own game. itch serves
   it at a fixed 552×167; it centres and clips gracefully rather than scaling. */
.itch-embed { display: flex; justify-content: center; margin: 8px 0 28px; }
.itch-embed iframe { border: 0; max-width: 100%; }
/* image zoom (COMPONENTS §17). ggd.js wraps img[data-zoom] in .zoom-trigger at runtime,
   so with JS off the image is simply an image — nothing to click and nothing broken. */
.zoom-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: zoom-in; }
.zoom-trigger:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 26px; background: rgba(42, 27, 46, .88); cursor: zoom-out; }
/* .lightbox is display:flex, so [hidden] needs an explicit override to stay hidden */
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); cursor: default; }
/* fixed, not absolute: on a phone .lightbox is the scroll container, and an absolutely
   positioned close button scrolls away with the image when you pan sideways */
.lightbox .close { position: fixed; top: 14px; right: 16px; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; background: rgba(42, 27, 46, .78); color: #fff; font-size: 17px; cursor: pointer; }
.lightbox .close:hover { background: rgba(42, 27, 46, .92); }
.lightbox .close:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
/* On a phone, fitting the image to the viewport would make it *smaller* than it is in
   the body. Fit it to the height instead and let it overflow sideways. This drops out of
   flex on purpose: a centred flex item that overflows puts its left edge before the
   scroll origin, permanently out of reach. Auto margins on a *block* can't go negative,
   so the image centres when it fits and overflows only to the right when it doesn't. */
@media (max-width: 640px) {
  .lightbox { display: block; overflow: auto; padding: 14px; }
  .lightbox img { display: block; margin: 0 auto; max-width: none; max-height: calc(100vh - 28px); }
}
/* code block: dark plum + pastel syntax (§1). Spans are hand-marked:
   .c comment · .k keyword · .fn function · .str string */
.code { background: #2E1B29; border-radius: 14px; padding: 20px 22px; margin-bottom: 28px; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; color: #EAD9E5; overflow-wrap: anywhere; }
.code .c { color: #C58BAB; }
.code .k { color: #FF8FBF; }
.code .fn { color: var(--lavender); }
.code .str { color: #FFD86B; }

/* the author card is the whole foot — no share row, no counters (CONTENT-MODEL § Reactions) */
.article-foot { position: relative; max-width: 640px; margin: 0 auto; padding: 16px 40px 24px; }
.author-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-card-sm); }
.author-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-card .who { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.author-card p { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 2px; }

/* post cards become links once posts exist (5b) */
a.post-card, a.fp-card { display: block; transition: transform 150ms ease, box-shadow 150ms ease; }
a.fp-card { display: grid; }
a.post-card:hover, a.fp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* 404 (7c dark) -------------------------------------------------------------------- */
body.err-page { background: #2A1B2E; color: #FFE6F1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 40px; }
.err-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 260px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,66,145,.28), transparent 70%); }
.err-page .sprite { width: 64px; animation: floaty 3s ease-in-out infinite; }
.err-code { font-family: 'Press Start 2P', monospace; font-size: 56px; color: var(--pink); margin: 20px 0 6px; text-shadow: 0 0 24px rgba(255,66,145,.5); }
.err-page h1 { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: #fff; margin-bottom: 10px; }
.err-page p { font-size: 15px; line-height: 1.7; color: #C9A9BE; max-width: 380px; margin: 0 auto 24px; }
.err-page .btn-primary { color: #2A1B2E; font-size: 15px; }
.err-page .s { position: absolute; }

/* ==========================================================================
   Responsive (DESIGN-SYSTEM §7): desktop ≥1025 / tablet 641–1024 / mobile ≤640
   ========================================================================== */

@media (max-width: 1024px) {
  .topbar, .hero, .section-head, .quests, .two-col, .footer,
  .page-head, .filters, .projects, .qd-head, .meta-cards, .qd-hero, .qd-body,
  .trailer, .store-links, .res-body, .contact-hero, .contact-cards,
  .featured-post, .post-grid, .article-head, .article, .article-foot, .back-bar { padding-left: 28px; padding-right: 28px; }
  .projects, .post-grid { grid-template-columns: 1fr 1fr; }
  .res-body { grid-template-columns: 1fr; gap: 12px; }
  .fp-card { grid-template-columns: 1fr; gap: 0; }
  .fp-cover { min-height: 0; }
  .fp-body { padding: 24px; }
  /* single column — player card stacks ABOVE the hero pitch */
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 44px; }
  .hero .player-card { max-width: 440px; margin: 0 auto; width: 100%; }
  .hero .pitch { max-width: 640px; margin: 0 auto; }
  .quests { grid-template-columns: 1fr 1fr; }
  .quest-featured { grid-column: 1 / -1; grid-row: auto; }
  .two-col { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 640px) {
  .topbar, .hero, .section-head, .quests, .two-col, .footer,
  .page-head, .filters, .projects, .qd-head, .meta-cards, .qd-hero, .qd-body,
  .trailer, .store-links, .res-body, .contact-hero, .contact-cards,
  .featured-post, .post-grid, .article-head, .article, .article-foot, .back-bar { padding-left: 20px; padding-right: 20px; }

  /* blog post (5c mobile) */
  .article-head { padding-top: 22px; }
  .article-head h1 { font-size: 30px; line-height: 1.15; margin: 12px 0 14px; }
  .cat-chip.post { font-size: 11px; padding: 4px 11px; border-radius: 14px; }
  .byline { gap: 10px; margin: 0 0 4px; }
  .byline img { width: 38px; height: 38px; }
  .byline .who { font-size: 14px; }
  .byline .when { font-size: 12px; }
  .article-hero { margin-top: 18px; }
  .article-hero .frame, .article-hero .pastel-tile, .article-hero .video-embed { margin: 0 16px; border-radius: 16px; }
  .article-hero .cap { padding: 0 16px; }
  .article-hero .pastel-tile { aspect-ratio: 16/9; }
  .article-hero .pastel-tile .emoji { font-size: 54px; }
  .article { padding-top: 22px; padding-bottom: 4px; font-size: 15px; line-height: 1.7; }
  .article p { margin-bottom: 16px; }
  .article h2 { font-size: 20px; margin: 22px 0 10px; }
  .pull-quote { padding: 4px 0 4px 16px; margin: 6px 0 20px; font-size: 18px; line-height: 1.35; }
  /* itch serves a compact square card when its viewport is narrow — give it the
     official 208×167 size on phones instead of squeezing the wide layout */
  .itch-embed iframe { width: 208px; height: 167px; }
  .code { padding: 16px; border-radius: 12px; font-size: 12px; margin-bottom: 18px; }
  .author-card { gap: 12px; padding: 16px; }
  .author-card img { width: 52px; height: 52px; }
  .author-card .who { font-size: 15px; }
  .author-card p { font-size: 13px; }

  /* page headers */
  .filter-empty { padding: 22px 20px 44px; font-size: 14px; }
  .page-head { padding-top: 22px; }
  .page-head h1 { font-size: 34px; }
  .page-head h1 .emoji { font-size: 24px; }
  .page-head .lede { font-size: 14px; }
  .chip-filter { font-size: 12px; padding: 6px 14px; border-radius: 18px; }
  .chip-filter.active { padding: 6px 14px; }

  /* projects / posts stack */
  .projects, .post-grid { grid-template-columns: 1fr; gap: 14px; }
  .quest-featured h3, .project-card h3 { font-size: 19px; }
  .quest-featured p, .project-card p { font-size: 13px; margin: 6px 0; }
  .quest-featured .body, .project-card .body { padding: 16px; }
  .cover-tile { height: 110px; }
  .cover-tile .emoji { font-size: 34px; }

  /* quest detail */
  .qd-head { padding-top: 22px; }
  .qd-head h1 { font-size: 36px; }
  .qd-head .lede { font-size: 14px; margin-top: 8px; }
  .meta-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .meta-card { border-radius: 14px; padding: 12px 14px; }
  .meta-card .lbl { font-size: 10px; }
  .meta-card .val { font-size: 14px; }
  .meta-card.award-card, .meta-card.role-card { grid-column: 1 / -1; }
  .qd-body { font-size: 15px; line-height: 1.7; }
  .store-links { flex-direction: column; padding-top: 0; }
  .store-links .btn-primary, .store-links .btn-secondary { justify-content: center; }

  /* résumé: Download PDF moves from the top bar to a block button under the
     header (7b mobile mock) */
  .topbar .dl-btn { display: none; }
  .dl-btn.block { display: flex; justify-content: center; padding: 12px; border-radius: 24px; margin: 4px 20px 0; }
  .res-row { gap: 12px; padding: 12px 0; }
  .res-row .dot { width: 9px; height: 9px; }
  .res-row .who { font-size: 14px; }
  .res-row .years { font-size: 11px; }
  .res-row .role-line { font-size: 12px; margin: 0; }
  .res-row p { display: none; }

  /* contact */
  .contact-hero { padding-top: 28px; }
  .contact-hero .big-bubble { width: 80px; height: 80px; margin-bottom: 14px; }
  .contact-hero .big-bubble .fs { font-size: 30px; }
  .contact-hero h1 { font-size: 32px; }
  .contact-hero p { font-size: 14px; margin-top: 10px; }

  /* 404 */
  .err-code { font-size: 44px; }
  .err-page h1 { font-size: 24px; }
  .topbar { padding-top: 14px; padding-bottom: 14px; }
  .topbar .brand img { width: 22px; }
  .topbar .brand .wordmark { font-size: 16px; }
  .topbar .links { display: none; }
  .topbar .pill-online { display: none; }
  .hamburger { display: flex; }

  /* profile compact (6a mobile): card chrome dissolves onto the page bg,
     stats sub-block becomes its own white card */
  .hero { padding-top: 22px; gap: 0; text-align: center; }
  .player-card { background: transparent; border: 0; box-shadow: none; padding: 0 0 16px; max-width: none; }
  /* hide only the card's own "Player 1" eyebrow — Now Playing keeps its label */
  .player-card > .eyebrow, .player-card .bow, .player-card .spark-l { display: none; }
  .polaroid { top: -4px; right: 8px; width: 86px; }
  .bubble { width: 130px; height: 130px; margin-top: 0; }
  .bubble img { width: 94px; }
  .bubble .s1 { display: none; }
  .bubble .s2 { top: 2px; right: 8px; bottom: auto; font-size: 14px; color: var(--pink-soft); }
  .bio-full { display: none; }
  .bio-short { display: inline; }
  .player-card .name { font-size: 22px; margin-top: 8px; }
  .player-card .role { font-size: 13px; }
  .chips { gap: 10px; margin: 14px 0 4px; }
  .chip { width: 40px; height: 40px; }
  .chip.apple .fb { font-size: 19px; }
  .chip.cpp span { font-size: 12px; }
  .chip.unity img { width: 20px; height: 20px; }
  .stats { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px; gap: 9px; box-shadow: 0 10px 24px rgba(255,120,175,.1); }
  .stat-row, .steam { font-size: 13px; }
  .stat-row.sleep { display: none; }
  .now-playing { margin-top: 3px; border-top: 1px solid var(--hairline-2); padding-top: 12px; }
  .now-playing .tile { width: 42px; height: 42px; }
  .now-playing .eyebrow { font-size: 11px; }
  .now-playing .game { font-size: 17px; }
  .now-playing .platform { font-size: 13px; }
  .stats-wrap { padding: 4px 0 16px; }

  .hero .pitch { padding: 6px 0 22px; }
  .hero h1 { font-size: 32px; line-height: 1.06; }
  .hero .pitch p { font-size: 14px; line-height: 1.6; margin: 12px auto 18px; }
  .hero .cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .cta .btn-primary { display: block; padding: 14px; }
  .hero .cta .btn-secondary { display: block; padding: 13px; text-align: center; }
  .hero .cta .socials { display: none; }

  .section-head h2 { font-size: 19px; }
  .section-head .count { font-weight: 500; font-size: 11px; color: var(--muted); }
  .quests { grid-template-columns: 1fr; padding-top: 12px; padding-bottom: 24px; }
  .quest-mini, .quests .sparkle { display: none; }
  /* card typography shrink lives with .projects above (shared with .project-card) */
  .tag.on-thumb { top: 10px; left: 10px; font-size: 10px; padding: 3px 9px; border-radius: 14px; }

  .two-col { padding-top: 0; padding-bottom: 22px; }
  .two-col h2 { font-size: 19px; margin-top: 16px; }
  .off-clock { display: none; }
  .run-row { gap: 12px; padding: 12px 0; }
  .run-row .dot { width: 9px; height: 9px; }
  .run-row .who { font-size: 14px; }
  .run-row .role, .run-row.edu { display: none; }
  .run-row .years { font-size: 12px; }

  .footer { padding-top: 8px; padding-bottom: 8px; }
  .footer .copy, .footer .play, .footer .contact-link { font-size: 10px; }
  /* Contact is a real link — give it a 44px target (§7) without growing the bar */
  .footer .contact-link { display: inline-flex; align-items: center; min-height: 44px; }
}