/* ==========================================================================
   JavaRubberDuck — "Clean Digest" theme
   Every colour, font, size and spacing value lives in the tokens below.
   Loaded after the Tailwind build, so pages not yet redesigned keep working.
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-muted: #F6F7F9;
  --color-text:          #121417;
  --color-text-soft:     #3D434C;
  --color-text-muted:    #5A616B;
  --color-border:        #E6E8EC;
  --color-border-strong: #D5D9DF;
  --color-link:          #1D4ED8;
  --color-link-hover:    #1E3A8A;
  --color-accent:        #1D4ED8;   /* play buttons, progress */
  --color-on-accent:     #FFFFFF;
  --color-brand:         #FFD23F;   /* duck yellow */
  --color-on-brand:      #121417;
  --color-inverse-bg:    #121417;   /* dark buttons, games card */
  --color-inverse-text:  #FFFFFF;
  --color-inverse-soft:  #C9CDD3;
  --color-inverse-panel: #1E2128;
  --color-inverse-line:  #2C3038;
  --color-terminal-ok:   #8FD9C9;
  --color-callout-bg:    #FFF6D6;
  --color-callout-line:  #EBDDA6;
  --shadow-card: 0 1px 2px rgba(18, 20, 23, 0.04), 0 8px 24px rgba(18, 20, 23, 0.05);

  /* ---- Category colour map: java / cloud / ai / podcast / other ---- */
  --cat-java-fg:    #9A4508;  --cat-java-bg:    #FDF0E1;
  --cat-cloud-fg:   #075985;  --cat-cloud-bg:   #E3F1FA;
  --cat-ai-fg:      #5B21B6;  --cat-ai-bg:      #EFE9FD;
  --cat-ai-ink:     #2E1065;
  --cat-podcast-fg: #115E59;  --cat-podcast-bg: #E1F3F0;
  --cat-other-fg:   #3D434C;  --cat-other-bg:   #EEF0F3;

  /* ---- Type ---- */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-2xs: 0.75rem;    /* 12 */
  --text-xs:  0.8125rem;  /* 13 */
  --text-sm:  0.875rem;   /* 14 */
  --text-md:  0.9375rem;  /* 15 */
  --text-base: 1rem;      /* 16 */
  --text-lg:  1.0625rem;  /* 17 */
  --text-xl:  1.125rem;   /* 18 */
  --text-2xl: 1.3125rem;  /* 21 */
  --text-3xl: 1.75rem;    /* 28 */
  --text-4xl: 1.875rem;   /* 30 */
  --text-hero-title: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);   /* 28 → 44 */
  --text-hero-mark:  clamp(2.375rem, 1.5rem + 3.4vw, 4rem);     /* 38 → 64 */
  --text-page-title: clamp(2rem, 1.4rem + 2.4vw, 3rem);         /* 32 → 48 */

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --tracking-display: -0.02em;
  --tracking-caps:     0.06em;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 1.75rem;  /* 28 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-14: 3.5rem;  /* 56 */
  --space-16: 4rem;    /* 64 */

  /* ---- Shape & layout ---- */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --tap: 44px;                 /* minimum touch target */
  --page-max: 1200px;
  --reading-max: 760px;
  --gutter: var(--space-6);
}

@media (max-width: 640px) {
  :root { --gutter: var(--space-4); }
}

/* Dark theme: the existing toggle sets html.dark */
html.dark {
  --color-bg:            #0F1114;
  --color-surface:       #16191E;
  --color-surface-muted: #13161A;
  --color-text:          #EEF0F3;
  --color-text-soft:     #C3C8CF;
  --color-text-muted:    #9AA1AB;
  --color-border:        #262A31;
  --color-border-strong: #353A42;
  --color-link:          #7EA6FF;
  --color-link-hover:    #A9C3FF;
  --color-accent:        #3B6CF0;
  --color-inverse-bg:    #EEF0F3;
  --color-inverse-text:  #121417;
  --color-callout-bg:    #2A2614;
  --color-callout-line:  #4A4226;
  --shadow-card: none;

  --cat-java-fg:    #F5B37A;  --cat-java-bg:    #33220F;
  --cat-cloud-fg:   #86C8EE;  --cat-cloud-bg:   #0E2633;
  --cat-ai-fg:      #C4B0F7;  --cat-ai-bg:      #231A3A;
  --cat-ai-ink:     #E6DCFF;
  --cat-podcast-fg: #8FD9C9;  --cat-podcast-bg: #0F2B28;
  --cat-other-fg:   #C3C8CF;  --cat-other-bg:   #22262C;
}

/* The games card stays dark in both themes */
.feature--game {
  --color-inverse-bg:   #121417;
  --color-inverse-text: #FFFFFF;
}

/* Category modifiers: any element with .cat--{key} gets --cat-fg / --cat-bg */
.cat--java    { --cat-fg: var(--cat-java-fg);    --cat-bg: var(--cat-java-bg); }
.cat--cloud   { --cat-fg: var(--cat-cloud-fg);   --cat-bg: var(--cat-cloud-bg); }
.cat--ai      { --cat-fg: var(--cat-ai-fg);      --cat-bg: var(--cat-ai-bg); }
.cat--podcast { --cat-fg: var(--cat-podcast-fg); --cat-bg: var(--cat-podcast-bg); }
.cat--other   { --cat-fg: var(--cat-other-fg);   --cat-bg: var(--cat-other-bg); }

/* ---- Reset (small; replaces the Tailwind preflight) ----------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* :where() keeps these at zero specificity so any component class wins */
:where(.site) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, pre, dl, dd) { margin: 0; }
:where(.site) :where(img, video) { max-width: 100%; height: auto; }
:where(.site) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.site) table { border-collapse: collapse; }
.breadcrumb li { list-style: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Base ---------------------------------------------------------------- */

body.site {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; }

/* Zero-specificity link defaults so Tailwind utilities on pages that are not
   redesigned yet (article bodies, games) still win. */
:where(.site) a { color: var(--color-link); text-decoration: none; }
:where(.site) a:where(:hover) { color: var(--color-link-hover); text-decoration: underline; }
.site h1, .site h2, .site h3, .site p { text-wrap: pretty; }
.site button { font-family: inherit; cursor: pointer; }
.site :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--reading { max-width: var(--reading-max); }

/* Components set display:flex etc., which would otherwise beat the hidden attribute */
.site [hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Headline links: text colour, blue on hover */
.site a.hl { color: var(--color-text); }
.site a.hl:hover { color: var(--color-link); text-decoration: none; }
/* Quiet nav links */
.site a.nl { color: var(--color-text-soft); }
.site a.nl:hover { color: var(--color-text); text-decoration: none; }

.icon { width: 18px; height: 18px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.site a.btn { color: var(--color-text); text-decoration: none; }
.site a.btn:hover { border-color: var(--color-text-muted); }
.btn--dark, .site a.btn--dark {
  background: var(--color-inverse-bg);
  border-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}
.site a.btn--dark:hover { color: var(--color-inverse-text); opacity: 0.9; }
.btn--brand, .site a.btn--brand {
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: var(--text-md);
  font-weight: 700;
}
.site a.btn--brand:hover { color: var(--color-on-brand); filter: brightness(1.05); }
.btn--icon { width: var(--tap); padding: 0; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--dashed { border-style: dashed; color: var(--color-text-muted); }

.play-btn {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site a.play-btn:hover { color: var(--color-on-accent); filter: brightness(1.1); }
.play-btn--lg { width: 64px; height: 64px; }
.play-btn svg { width: 24px; height: 24px; }

/* ---- Category pill & series label ---------------------------------------- */

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cat-fg, var(--cat-other-fg));
  background: var(--cat-bg, var(--cat-other-bg));
}
.series {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-soft);
}
.series--cat { color: var(--cat-fg, var(--color-text-soft)); font-size: var(--text-xs); }
.tagline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}
.site a.brand { color: var(--color-text); }
.site a.brand:hover { text-decoration: none; }
.brand__logo { width: 34px; height: 34px; flex: none; }
.brand__soft { font-weight: 500; color: var(--color-text-muted); }

.site-nav { display: flex; gap: var(--space-7); font-size: var(--text-md); font-weight: 500; }
.site-nav a[aria-current="page"],
.site .site-nav a.is-active {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.theme-toggle__sun { display: none; }
html.dark .theme-toggle__sun { display: block; }
html.dark .theme-toggle__moon { display: none; }
.menu-btn { display: none; }

/* Phone: nav becomes a scrolling chip row under the bar */
.chip-nav { display: none; }
.mobile-menu { border-top: 1px solid var(--color-border); padding-block: var(--space-3); }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-2);
  font-weight: 500;
}

@media (max-width: 860px) {
  .site-header__bar { padding-block: var(--space-2); gap: var(--space-3); }
  .brand { font-size: var(--text-xl); gap: var(--space-2); }
  .brand__logo { width: 30px; height: 30px; }
  .site-nav, .site-header__subscribe { display: none; }
  .menu-btn { display: inline-flex; }
  .chip-nav {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--gutter);
    overflow-x: auto;
    border-top: 1px solid var(--color-border);
    scrollbar-width: none;
  }
}

.chip, .site a.chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-soft);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.chip[aria-current="page"], .chip[aria-pressed="true"],
.site a.chip[aria-current="page"] {
  background: var(--color-inverse-bg);
  border-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}
.site a.chip:hover { text-decoration: none; border-color: var(--color-text-muted); }
.chip--lg { height: var(--tap); padding: 0 18px; }

/* ---- Home: this week ----------------------------------------------------- */

.week { padding-block: var(--space-12) var(--space-8); }
.week__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-7);
}
.week__tagline { margin: 0; font-size: var(--text-md); color: var(--color-text-muted); }
.week__grid { display: flex; flex-wrap: wrap; gap: var(--space-12); }

.lead { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.lead__mark, .site a.lead__mark {
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8);
  border-radius: 18px;
  background: var(--cat-bg);
  color: var(--cat-ink, var(--cat-fg));
  text-decoration: none;
}
.cat--ai .lead__mark { --cat-ink: var(--cat-ai-ink); }
.site a.lead__mark:hover { text-decoration: none; filter: saturate(1.15); color: var(--cat-ink, var(--cat-fg)); }
.lead__mark-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--cat-fg);
}
.lead__mark-title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero-mark);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.lead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.also { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }
.also__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.also__item {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.also__item h3 { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 600; }

@media (max-width: 640px) {
  .week { padding-block: var(--space-5) var(--space-2); }
  .week__grid { gap: var(--space-8); }
  .lead { gap: 14px; }
  .lead__mark, .site a.lead__mark { aspect-ratio: auto; height: 196px; padding: var(--space-5); border-radius: var(--radius-lg); }
  .also__item { padding-block: var(--space-4); gap: 6px; }
  .also__item h3 { font-size: var(--text-lg); line-height: 1.4; }
}

/* ---- Article list (home + archives) -------------------------------------- */

.articles { padding-block: var(--space-8) var(--space-12); }
.articles__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.post-row[hidden] { display: none; }
.post-row__day, .post-row__read { padding-top: 3px; white-space: nowrap; }
.post-row__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.post-row__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.post-row__excerpt { margin: 0; color: var(--color-text-soft); font-size: var(--text-md); line-height: var(--leading-body); }

.empty-note {
  margin: 0;
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.empty-note[hidden] { display: none; }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.pager__links { display: flex; gap: var(--space-2); }
.site .pager a.btn { color: var(--color-link); font-size: var(--text-md); }

@media (max-width: 640px) {
  .articles { padding-block: var(--space-5) var(--space-8); }
  .section-title { font-size: var(--text-2xl); }
  .post-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-4); padding-block: var(--space-4); }
  .post-row__day { grid-row: 1; grid-column: 1; padding: 0; }
  .post-row__read { grid-row: 1; grid-column: 2; padding: 0; }
  .post-row__body { grid-column: 1 / -1; }
  .post-row__title { font-size: var(--text-lg); line-height: 1.4; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters .chip--lg { height: 40px; }
}

/* ---- Feature band: podcast + game ---------------------------------------- */

.features {
  background: var(--color-surface-muted);
  border-block: 1px solid var(--color-border);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: var(--space-6);
  padding-block: var(--space-14);
}
.feature {
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.feature__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cat-podcast-fg);
}
.feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.feature__text { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text-soft); }
.feature__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.feature__now { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; }
.feature__now strong { font-size: var(--text-md); }
.feature__more { font-size: var(--text-md); font-weight: 600; }

.feature--game {
  background: var(--color-inverse-bg);
  border-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}
.feature--game .feature__kicker { color: var(--color-brand); }
.feature--game .feature__title { font-size: 2.125rem; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
.feature--game .feature__text, .feature--game .meta { color: var(--color-inverse-soft); }
.feature--game .feature__foot { justify-content: space-between; }
.terminal {
  margin: 0;
  padding: var(--space-4) 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-inverse-line);
  background: var(--color-inverse-panel);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-inverse-soft);
  white-space: pre-wrap;
}
.terminal__prompt { color: var(--color-brand); }
.terminal__dollar { color: var(--color-terminal-ok); }
.terminal__cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: var(--space-1);
  vertical-align: -3px;
  background: var(--color-brand);
}

@media (max-width: 640px) {
  .features__grid { padding-block: var(--space-6); gap: var(--space-3); }
  .feature { padding: var(--space-5); gap: var(--space-3); border-radius: var(--radius-lg); }
  .feature__title { font-size: var(--text-2xl); line-height: 1.2; }
  .feature--game .feature__title { font-size: 1.625rem; }
  .play-btn { width: 48px; height: 48px; }
  .play-btn svg { width: 20px; height: 20px; }
}

/* ---- Page header (archives) ---------------------------------------------- */

.page-head { padding-block: var(--space-12) var(--space-6); border-bottom: 1px solid var(--color-border); }
.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.page-head__lede {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
}
.archive { display: flex; gap: var(--space-10); align-items: flex-start; padding-block: var(--space-8) var(--space-12); }
.archive__main { flex: 1; min-width: 0; }
.archive__intro { margin-bottom: var(--space-8); }
.archive__aside { flex: 0 0 240px; position: sticky; top: 96px; }
.archive__aside ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.archive__aside a { display: block; padding: 6px 0; font-size: var(--text-sm); line-height: 1.4; }
.archive__aside a[aria-current="page"] { color: var(--color-text); font-weight: 600; }
@media (max-width: 1024px) { .archive__aside { display: none; } }

/* ---- Podcast episode ----------------------------------------------------- */

.episode { display: flex; flex-direction: column; gap: var(--space-7); padding-block: var(--space-12) var(--space-6); }
.breadcrumb { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb ol { display: contents; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); }
.episode__head { display: flex; flex-direction: column; gap: 18px; }
.episode__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.episode__lede { margin: 0; font-size: 1.25rem; line-height: var(--leading-body); color: var(--color-text-soft); }

.player {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.player__native { width: 100%; }
.player__ui { display: flex; align-items: center; gap: var(--space-5); }
.player__ui[hidden] { display: none; }
.player__track { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.player__label { font-size: var(--text-base); font-weight: 600; }
.player__times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-muted); }
.player__seek {
  --p: 0%;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-accent) var(--p), var(--color-border) var(--p));
}
.player__seek::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); }
.player__seek::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--color-accent); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 0;
}
.player__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); border: 0; }
.player__links { display: flex; flex-wrap: wrap; gap: 10px; }
.play-btn .icon-pause { display: none; }
.play-btn[aria-pressed="true"] .icon-play { display: none; }
.play-btn[aria-pressed="true"] .icon-pause { display: block; }

.note {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.note .icon { margin-top: 1px; }

.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.chapters { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.chapter {
  width: 100%;
  min-height: var(--tap);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  text-align: left;
  font-size: var(--text-lg);
  line-height: 1.5;
  font-weight: 500;
}
.chapter:hover .chapter__title, .chapter[aria-current="true"] .chapter__title { color: var(--color-link); }
.chapter[aria-current="true"] .chapter__time { color: var(--color-link); }


.callout {
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-callout-bg);
}
.callout h2 { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.callout p { margin: 0; font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text-soft); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copy-row code {
  flex: 1 1 260px;
  min-width: 0;
  height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-callout-line);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow-x: auto;
  white-space: nowrap;
}

.sources { padding-block: var(--space-12) var(--space-14); display: flex; flex-direction: column; gap: var(--space-5); }
.sources__title { margin: 0; font-family: var(--font-display); font-size: var(--space-6); font-weight: 700; }
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}
.card {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card h3 { margin: 0; font-size: var(--text-xl); line-height: 1.4; font-weight: 600; }

@media (max-width: 640px) {
  .episode { padding-block: var(--space-6) var(--space-4); gap: var(--space-6); }
  .episode__lede { font-size: var(--text-xl); }
  .player { padding: var(--space-4); }
  .player__ui { gap: var(--space-4); }
  .block-title { font-size: var(--text-2xl); }
  .callout { padding: var(--space-5); }
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-12); }
.features + .site-footer, .site-main:has(> .features:last-child) + .site-footer { margin-top: 0; border-top: 0; }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-12);
  padding-block: var(--space-14) var(--space-10);
}
.site-footer__about { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.site-footer__about p { margin: 0; font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text-soft); }
.site-footer__about .quote { font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.site-footer__col h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--text-md); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-10);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.site-footer__bottom a { color: inherit; }

@media (max-width: 640px) {
  .site-footer__top { padding-block: var(--space-7) var(--space-5); gap: var(--space-6); }
  .site-footer__cols { gap: var(--space-8); }
  .site-footer__col ul { gap: var(--space-1); }
  .site-footer__col a { display: inline-flex; min-height: 36px; align-items: center; }
}

/* ==========================================================================
   Article pages (single), plain pages (default), 404
   ========================================================================== */

.page { padding-block: var(--space-12) var(--space-6); }
.page__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--space-8); }
.page__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.page__lede { margin: 0; font-size: 1.25rem; line-height: var(--leading-body); color: var(--color-text-soft); }

.article {
  display: grid;
  grid-template-columns: minmax(0, var(--reading-max)) 240px;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-12) var(--space-6);
}
.article__main { min-width: 0; }
.article__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--space-10); }
.article__aside { position: sticky; top: 96px; align-self: start; }
@media (max-width: 1100px) {
  .article { grid-template-columns: minmax(0, 1fr); max-width: var(--reading-max); }
  .article__aside { display: none; }
}
@media (max-width: 640px) {
  .page, .article { padding-block: var(--space-6) var(--space-4); }
  .page__lede { font-size: var(--text-xl); }
  .article__head { margin-bottom: var(--space-7); }
}

/* Table of contents (eleventy-plugin-toc output) */
.toc .eyebrow { margin-bottom: var(--space-3); }
.toc__menu ul, .toc__menu ol { list-style: none; margin: 0; padding: 0; }
.toc__menu li li { padding-left: var(--space-3); }
.toc__menu a {
  display: block;
  padding: 5px 0 5px var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.site .toc__menu a { color: var(--color-text-muted); }
.site .toc__menu a:hover { color: var(--color-text); text-decoration: none; }
.site .toc__menu a[aria-current="true"] { color: var(--color-text); border-left-color: var(--color-brand); font-weight: 600; }

/* Long-form text rendered from markdown */
.article-body {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-soft);
  overflow-wrap: break-word;
}
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body ul, .article-body ol,
.article-body blockquote, .article-body pre, .article-body table,
.article-body figure { margin: 0 0 var(--space-5); }
.article-body h2, .article-body h3, .article-body h4 {
  margin: var(--space-10) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.015em;
  line-height: 1.2;
  scroll-margin-top: 96px;
}
.article-body h2 { font-size: var(--text-3xl); }
.article-body h3 { font-size: 1.375rem; }
.article-body h4 { font-size: var(--text-xl); }
.article-body strong { color: var(--color-text); font-weight: 600; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-block: var(--space-2); }
.article-body li::marker { color: var(--color-text-muted); }
.article-body a { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-10) 0; }
.article-body img, .article-body video { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article-body blockquote {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-callout-bg);
  color: var(--color-text);
}
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--color-text);
}
.article-body pre {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  overflow-x: auto;
}
.article-body pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.article-body table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--text-md); }
.article-body th, .article-body td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.article-body th { color: var(--color-text); font-weight: 600; }
.article-body .video-wrapper { position: relative; aspect-ratio: 16 / 9; margin-bottom: var(--space-5); }
.article-body .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }
.article-body .half { max-width: 50%; }

/* After the article */
.after { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.author {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.author__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.author__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.author__name { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.author__bio { margin: 0; font-size: var(--text-md); color: var(--color-text-soft); }
.author__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 10px; }
.share .eyebrow { margin-right: var(--space-2); }
.comments { margin-top: var(--space-4); }
.related { padding-block: var(--space-10) var(--space-14); display: flex; flex-direction: column; gap: var(--space-5); }

@media (max-width: 640px) {
  .author { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
}

.notfound { padding-block: var(--space-16); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.notfound__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Archive feature cards, podcast index, games
   ========================================================================== */

.feature-grid {
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
}
.feature-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.feature-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--color-surface-muted); }
.feature-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.feature-card__title { margin: 0; font-size: var(--text-xl); line-height: 1.35; font-weight: 600; }
.feature-card__text { margin: 0; font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text-soft); }

/* Podcast index */
.subscribe-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block: var(--space-6) var(--space-10); }
.episodes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.ep-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
}
.ep-card__title { margin: 0; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ep-card__text { margin: 0; font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-text-soft); }
.ep-card .player__ui { gap: var(--space-4); }
.ep-card details { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.ep-card summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-soft);
}
.ep-card .chapter { font-size: var(--text-md); padding: 10px 0; }
@media (max-width: 640px) { .ep-card { padding: var(--space-4); } }

/* Games index */
.game-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-6);
}
.game-card {
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--game-bg);
  color: var(--game-text);
}
.game-card__kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-brand); font-size: var(--text-sm); font-weight: 600; }
.game-card__title { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 700; }
.game-card__text { margin: 0; color: var(--game-soft); line-height: var(--leading-body); }
.game-card .meta { color: var(--game-soft); }
.game-card .btn--brand { align-self: flex-start; margin-top: auto; }
.game-card--soon { background: var(--color-surface-muted); color: var(--color-text); border: 1px dashed var(--color-border-strong); }
.game-card--soon .game-card__kicker, .game-card--soon .game-card__text, .game-card--soon .meta { color: var(--color-text-muted); }
.level-pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

/* ==========================================================================
   Maven Quest (the game page). Terminal colours are tokens too.
   ========================================================================== */

:root {
  --game-bg:        #121417;
  --game-panel:     #1E2128;
  --game-line:      #2C3038;
  --game-text:      #FFFFFF;
  --game-soft:      #C9CDD3;
  --game-muted:     #8B929C;
  --term-bg:        #0D0F12;
  --term-line:      #1F2329;
  --term-green:     #4ADE80;
  --term-input:     #86EFAC;
  --term-output:    #D1FAE5;
  --term-error:     #F87171;
  --term-system:    #FFD23F;
  --term-placeholder: #3A5A47;
  --color-code-bg:   #121417;
  --color-code-text: #E4E7EB;
}

.mq-head { background: var(--game-bg); color: var(--game-text); }
.mq-head__inner { padding-block: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.mq-head .breadcrumb { color: var(--game-muted); }
.site .mq-head .breadcrumb a { color: var(--game-soft); }
.mq-head__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
.mq-head__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-page-title); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.mq-head__lede { margin: 0; max-width: 60ch; color: var(--game-soft); line-height: var(--leading-body); }
.mq-status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.mq-status__nums { display: flex; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
#mq-level-badge { color: var(--color-brand); }
#mq-xp { color: var(--term-green); }
.mq-status__links { display: flex; gap: var(--space-4); font-size: var(--text-xs); }
.site .mq-status__links a { color: var(--game-muted); }
.site .mq-status__links a:hover { color: var(--game-text); }
#mq-key-form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.mq-key-row { display: flex; gap: var(--space-2); }
#mq-key-input {
  width: 8rem;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--game-line);
  background: var(--game-panel);
  color: var(--game-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
#mq-key-input:focus { outline: 2px solid var(--color-brand); outline-offset: 0; }
#mq-key-submit { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
#mq-key-msg { font-family: var(--font-mono); font-size: var(--text-2xs); }
.mq-key-error { color: var(--term-error); }
.mq-key-ok    { color: var(--term-green); }

#mq-progress { display: flex; gap: var(--space-1); }
.mq-seg { flex: 1; height: 6px; border-radius: var(--radius-pill); transition: background 0.3s; }
.mq-seg-done   { background: var(--term-green); }
.mq-seg-active { background: var(--color-brand); }
.mq-seg-locked { background: var(--game-line); }

.mq-main { padding-block: var(--space-6) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
#mq-cmd-card { border-radius: var(--radius-lg); border: 1px solid var(--game-line); background: var(--game-bg); color: var(--game-soft); overflow: hidden; }
.mq-cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--game-line); }
.mq-cmd-head__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--game-text); }
.mq-cmd-head__title .icon { color: var(--color-brand); }
.mq-cmd-head__hint { font-size: var(--text-2xs); color: var(--game-muted); font-weight: 400; }
#mq-cmd-toggle { min-height: 36px; border: 0; background: none; color: var(--game-soft); font-family: var(--font-mono); font-size: var(--text-xs); }
#mq-cmd-toggle:hover { color: var(--color-brand); }
#mq-cmd-body { padding: var(--space-3) var(--space-4); }
.mq-card-collapsed #mq-cmd-body { display: none; }
.mq-cmd-row { display: flex; align-items: baseline; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--game-line); }
.mq-cmd-row:last-child { border-bottom: 0; }
.mq-cmd-code {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: 6px;
  border: 1px solid rgba(255, 210, 63, 0.3);
  background: rgba(255, 210, 63, 0.1);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.mq-cmd-desc { font-size: var(--text-sm); color: var(--game-soft); }

.mq-play { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); }
@media (max-width: 860px) { .mq-play { grid-template-columns: minmax(0, 1fr); } }
.mq-story { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-surface); }
#mq-level-title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
#mq-narrative { margin-bottom: var(--space-6); font-size: var(--text-md); line-height: 1.7; color: var(--color-text-soft); }
.mq-quote {
  display: block;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-callout-bg);
  color: var(--color-text);
  font-style: italic;
}
#mq-hint-btn { display: none; } /* maven-quest.js shows it with an inline display */

.mq-term-wrap { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
#mq-terminal {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--term-line);
  background: var(--term-bg);
  cursor: text;
}
.mq-term-bar { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--term-line); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--game-muted); }
.mq-term-bar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--game-line); }
.mq-term-bar__name { margin-left: var(--space-2); }
#mq-output { flex: 1; overflow-y: auto; padding: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--term-green); }
.mq-line-input  { color: var(--term-input); }
.mq-line-output { color: var(--term-output); white-space: pre; }
.mq-line-error  { color: var(--term-error); }
.mq-line-system { color: var(--term-system); font-style: italic; }
.mq-input-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--term-line); }
.mq-prompt { color: var(--term-green); font-family: var(--font-mono); font-size: var(--text-xs); user-select: none; }
#mq-input {
  flex: 1;
  min-height: 36px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--term-green);
  caret-color: var(--term-green);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
#mq-input::placeholder { color: var(--term-placeholder); }
#mq-input:disabled { opacity: 0.4; cursor: not-allowed; }
.mq-term-help { margin: 0; text-align: right; font-size: var(--text-2xs); color: var(--color-text-muted); }

.mq-hidden { display: none !important; }
#mq-success, #mq-complete {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  background: var(--term-bg);
  color: var(--game-text);
}
.mq-overlay__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; }
.mq-overlay__title--win { color: var(--color-brand); }
.mq-overlay__xp { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--term-green); }
.mq-overlay__text { color: var(--game-soft); font-size: var(--text-sm); }
.mq-overlay__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
#mq-success-key {
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 210, 63, 0.3);
  background: rgba(255, 210, 63, 0.08);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.mq-overlay__icon { width: 48px; height: 48px; color: var(--term-green); }
.mq-overlay__icon--win { color: var(--color-brand); }
.archive__intro-label { margin-bottom: var(--space-4); }

/* Header links: full 44px touch targets */
.brand { min-height: var(--tap); }
.site-nav { align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); }

.page__foot { margin-top: var(--space-8); font-size: var(--text-md); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .page-head { padding-block: var(--space-6) var(--space-5); }
  .page-head__lede { font-size: var(--text-lg); }
  .archive { padding-block: var(--space-6) var(--space-8); }
  /* Featured cards: text only on phones so the article list stays close */
  .feature-card__img { display: none; }
  .feature-grid { gap: var(--space-3); margin-bottom: var(--space-8); }
  .feature-card__body { padding: var(--space-4); }
}