/* ============================================================
   go.games — styles.css
   Tokens live in tokens.css. This file is structure + aesthetics.
   ============================================================ */

/* ---------- Reset (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Base typography ---------- */
html {
  font-family: var(--font-body);
  font-size: 16px;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  min-height: 100vh;
  /* Subtle warm vignette */
  background-image:
    radial-gradient(ellipse at top, rgba(201, 180, 138, 0.03), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(20, 20, 18, 0.8), transparent 70%);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

code, pre { font-family: var(--font-mono); }

/* ---------- Layout shell ---------- */
.shell {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 720px) {
  .shell { padding-inline: var(--s-7); }
}

/* ---------- Top bar ---------- */
.topbar {
  border-bottom: 1px solid var(--border);
  padding-block: var(--s-4);
  background: rgba(15, 15, 14, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01";
}

.brand__dot { color: var(--accent); }

.crumb {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.crumb span { color: var(--text-soft); }

/* ---------- Pattern header ---------- */
.pattern-header {
  padding-block: var(--s-9) var(--s-7);
  border-bottom: 1px solid var(--border);
}

.pattern-header__kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
  font-weight: 500;
}

.pattern-header h1 {
  font-size: clamp(2.25rem, 6vw, var(--fs-3xl));
  font-variation-settings: "opsz" 120, "SOFT" 30;
  max-width: 18ch;
}

.pattern-header__tagline {
  margin-top: var(--s-5);
  color: var(--text-soft);
  font-size: var(--fs-md);
  max-width: 50ch;
  line-height: var(--lh-snug);
}

.pattern-header__tagline em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text);
  font-variation-settings: "opsz" 30, "SOFT" 100;
}

/* ---------- Section scaffold ---------- */
.section {
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--border);
}

.section:last-child { border-bottom: 0; }

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}

.section__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-5);
  font-variation-settings: "opsz" 60;
}

.prose {
  max-width: var(--prose-max);
  color: var(--text-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.prose p + p { margin-top: var(--s-4); }

.prose strong {
  color: var(--text);
  font-weight: 500;
}

.prose em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text);
  font-variation-settings: "opsz" 30;
}

/* ---------- Before / After comparison ---------- */
.compare {
  margin-top: var(--s-6);
}

.tabs {
  display: inline-flex;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-1);
  margin-bottom: var(--s-5);
}

.tab {
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.tab:hover { color: var(--text-soft); }

.tab[aria-selected="true"] {
  background: var(--elevated);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.tab__hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin-left: var(--s-2);
}

.tab[aria-selected="true"] .tab__hint { color: var(--accent-dim); }

/* Code panel */
.code-panel {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.code-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.code-panel__file {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.code-panel__file::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-dim);
  opacity: 0.6;
}

.code-panel__tag {
  font-size: 0.7rem;
  padding: 2px var(--s-2);
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.code-panel__tag--before {
  background: rgba(180, 120, 100, 0.12);
  color: #c89782;
}

.code-panel__tag--after {
  background: var(--accent-glow);
  color: var(--accent);
}

.code-panel pre {
  padding: var(--s-5);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.65;
  /* Taller on desktop so readers see most of a file in one go; less
     aggressive on narrow viewports where viewport height is scarce. */
  max-height: min(75vh, 54rem);
  overflow-y: auto;
}

@media (max-width: 720px) {
  .code-panel pre {
    max-height: 28rem;  /* shorter on mobile — scrolling the file wins over scrolling the page */
  }
}

.code-panel pre code { display: block; color: var(--text-soft); }

/* Scrollbar styling */
.code-panel pre::-webkit-scrollbar { width: 8px; height: 8px; }
.code-panel pre::-webkit-scrollbar-track { background: transparent; }
.code-panel pre::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* Hide all but active panel */
.code-panel[hidden] { display: none; }

/* File switcher within panel */
.file-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
}

.file-switcher__btn {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: var(--s-2) var(--s-3);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}

.file-switcher__btn:hover {
  color: var(--text-soft);
  background: var(--elevated);
}

.file-switcher__btn[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-glow);
}

/* ---------- Syntax highlighting (GDScript) ---------- */
.tok-keyword   { color: var(--code-keyword); }
.tok-type      { color: var(--code-type); }
.tok-string    { color: var(--code-string); }
.tok-number    { color: var(--code-number); }
.tok-comment   { color: var(--code-comment); font-style: italic; }
.tok-decorator { color: var(--code-decorator); }
.tok-function  { color: var(--code-function); }
.tok-operator  { color: var(--code-operator); }

/* ============================================================
   Emotion cards — stage 1 of section 01.
   Three cards, progressive reveal, single "Next" button.
   Clean editorial feel: warm-grey surface, Fraunces display
   type, accent-color glow on the active card.
   ============================================================ */

.cards {
  margin: var(--s-7) 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: center;
}

.cards__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  width: 100%;
  max-width: 44rem;
}

@media (max-width: 560px) {
  .cards__row {
    gap: var(--s-3);
  }
}

.cards__card {
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: var(--s-4) var(--s-3);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Hidden by default — revealed class fades them in one at a time */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.cards__card--revealed {
  opacity: 0.55;
  transform: translateY(0);
}

.cards__card--active {
  opacity: 1;
  background: var(--elevated);
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 0 24px var(--accent-glow);
}

.cards__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-variation-settings: "opsz" 60, "SOFT" 30;
  letter-spacing: 0.02em;
  color: var(--text);
  text-align: center;
  text-transform: lowercase;
}

.cards__card--active .cards__name {
  color: var(--accent);
}

/* Narration below the cards */
.cards__narration {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-soft);
  text-align: center;
  max-width: 40rem;
  min-height: 3.5rem;
  transition: opacity var(--dur-base) var(--ease);
}

.cards__narration--fading {
  opacity: 0;
}

/* Next / Replay button */
.cards__controls {
  display: flex;
  justify-content: center;
}

.cards__next {
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  background: var(--elevated);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  letter-spacing: 0.02em;
}

.cards__next:hover,
.cards__next:focus-visible {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

/* ============================================================
   Code cards — stage 4 of section 01.
   Three read-only cards showing simplified real GDScript.
   Three-up grid on desktop, stacked on mobile. Matches the
   editorial aesthetic from the emotion cards above.
   ============================================================ */

.code-cards__intro {
  margin-top: var(--s-9);
  text-align: center;
}

.code-cards__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-variation-settings: "opsz" 60, "SOFT" 30;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--s-3);
  font-weight: 400;
}

.code-cards__lede {
  max-width: 44rem;
  margin: 0 auto var(--s-6);
  text-align: center;
  color: var(--text-soft);
  font-size: var(--fs-base);
}

.code-cards__note {
  color: var(--accent);
}

.code-cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-6);
}

@media (min-width: 920px) {
  .code-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.code-card {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease);
}

.code-card:hover {
  border-color: var(--border-strong);
}

.code-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.code-card__file {
  color: var(--accent);
  font-weight: 500;
}

.code-card__tag {
  font-size: 0.65rem;
  padding: 2px var(--s-2);
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.code-card__code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-soft);
  padding: var(--s-4);
  margin: 0;
  overflow-x: auto;
  flex: 1;
  white-space: pre;
  min-height: 0;
}

.code-card__code::-webkit-scrollbar { height: 6px; }
.code-card__code::-webkit-scrollbar-track { background: transparent; }
.code-card__code::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.code-card__caption {
  padding: var(--s-3) var(--s-4) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--surface-solid);
}


/* ============================================================
   Intro scene — "calm, frustrated, happy"
   A person cycling through emotional states, with a pseudo-code
   debugger panel on the right showing the same transitions.
   Rendered in two columns on desktop, stacked on mobile.
   ============================================================ */

.intro {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

@media (min-width: 760px) {
  .intro {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Figure panel (left) ---------- */
.intro__figure-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 22rem;
}

.intro__stage {
  display: grid;
  place-items: center;
  width: 14rem;
  height: 14rem;
  position: relative;
}

.intro__figure {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Backdrop circle that shifts color per state */
.intro__backdrop {
  fill: var(--state-bg, #3a3a3a);
  opacity: 0.35;
  transition: fill var(--dur-slow) var(--ease), r var(--dur-base) var(--ease);
}

.intro__face {
  fill: var(--state-face, #c5b89a);
  transition: fill var(--dur-slow) var(--ease);
}

/* Eyes are paths so we can morph shape per state */
.intro__eye {
  fill: none;
  stroke: #1a1a19;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: d var(--dur-base) var(--ease);
}

.intro__mouth {
  fill: none;
  stroke: #1a1a19;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: d var(--dur-base) var(--ease);
}

/* State-specific color variables, set on the figure panel */
.intro__figure-panel[data-state="calm"] {
  --state-bg: #7a8a6e;
  --state-face: #cfc5a8;
}

.intro__figure-panel[data-state="frustrated"] {
  --state-bg: #9a5e4a;
  --state-face: #d2a88e;
}

.intro__figure-panel[data-state="happy"] {
  --state-bg: #c19a4e;
  --state-face: #e8ceab;
}

/* Pulse animation fires on every transition */
.intro__figure-panel--pulse .intro__backdrop {
  animation: intro-pulse var(--dur-slow) var(--ease-out);
}

@keyframes intro-pulse {
  0%   { opacity: 0.35; r: 42; }
  40%  { opacity: 0.65; r: 48; }
  100% { opacity: 0.35; r: 42; }
}

/* ---------- State label ---------- */
.intro__label {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: lowercase;
  font-variation-settings: "opsz" 40, "SOFT" 40;
  transition: color var(--dur-slow) var(--ease);
}

.intro__figure-panel[data-state="calm"]      .intro__label { color: #b3c09d; }
.intro__figure-panel[data-state="frustrated"] .intro__label { color: #d5997e; }
.intro__figure-panel[data-state="happy"]     .intro__label { color: #e8c687; }

/* ---------- Trigger buttons ---------- */
.intro__triggers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  min-height: 2.5rem;
}

.intro__trigger {
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.intro__trigger:hover,
.intro__trigger:focus-visible {
  background: var(--bg);
  border-color: var(--accent-dim);
  color: var(--text);
  outline: none;
}

.intro__trigger--firing {
  transform: scale(0.95);
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Code panel (right) ---------- */
.intro__code-panel {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
}

.intro__code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.intro__code-file {
  color: var(--accent);
  font-weight: 500;
}

.intro__code-tag {
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro__code {
  padding: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-soft);
  position: relative;
  flex: 1;
}

.intro__line {
  display: flex;
  padding: 0 var(--s-4);
  white-space: pre;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.intro__line-num {
  display: inline-block;
  width: 2ch;
  margin-right: var(--s-3);
  text-align: right;
  color: var(--text-faint);
  user-select: none;
  font-size: 0.8em;
}

.intro__line-text { flex: 1; }

.intro__highlight {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--accent-glow);
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    height var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
  z-index: 2;
}

.intro__highlight--active { opacity: 1; }

.intro__highlight--fire {
  background: var(--accent);
  opacity: 0.35;
  border-color: var(--accent);
}


/* ---------- When to reach for / callout cards ---------- */
.guidance {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

@media (min-width: 720px) {
  .guidance { grid-template-columns: 1fr 1fr; }
}

.guidance__card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
}

.guidance__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-variation-settings: "opsz" 30;
  margin-bottom: var(--s-3);
  color: var(--text);
}

.guidance__card--pos { border-top: 2px solid var(--accent); }
.guidance__card--neg { border-top: 2px solid var(--text-faint); }

.guidance__card ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.guidance__card li {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  padding-left: var(--s-4);
  position: relative;
}

.guidance__card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

/* ---------- Related patterns ---------- */
.related {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (min-width: 720px) {
  .related { grid-template-columns: repeat(3, 1fr); }
}

.related__item {
  display: block;
  padding: var(--s-5);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--dur-base) var(--ease);
}

.related__item:hover {
  border-color: var(--accent-dim);
  background: var(--elevated);
  transform: translateY(-2px);
}

.related__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.related__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
  font-variation-settings: "opsz" 30;
  margin-bottom: var(--s-2);
}

.related__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* ---------- Footer ---------- */
.foot {
  padding-block: var(--s-7);
  text-align: center;
}

.foot p {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

/* ---------- Loading state ---------- */
.loading {
  display: inline-block;
  width: 100%;
  padding: var(--s-5);
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ---------- Motion: page-load ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pattern-header > * {
  animation: riseIn var(--dur-slow) var(--ease-out) both;
}
.pattern-header > *:nth-child(1) { animation-delay: 0ms; }
.pattern-header > *:nth-child(2) { animation-delay: 80ms; }
.pattern-header > *:nth-child(3) { animation-delay: 160ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* ============================================================
   Doc references — inline links, Further Reading, attribution
   ============================================================ */

/* ---------- Inline doc links ---------- */
/* Used anywhere in prose and in-code comments. Subtle underline, small
   external-link glyph. Matches accent color to signal "goes
   outside the site." */

.doc-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-dim);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  white-space: nowrap;         /* don't split "RefCounted↗" across lines */
}

.doc-link:hover,
.doc-link:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.doc-link__glyph {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  vertical-align: 0.05em;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.doc-link:hover .doc-link__glyph,
.doc-link:focus-visible .doc-link__glyph {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Doc link inside a <code> span — re-style to blend */
.doc-link code {
  color: inherit;
  background: transparent;
  padding: 0;
}

/* ---------- Further Reading block ---------- */

.further-reading .section__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 30;
}

.fr {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}

@media (min-width: 720px) {
  .fr {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.fr__group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

.fr__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.fr__link {
  display: block;
  padding: var(--s-3) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}

.fr__link:hover,
.fr__link:focus-visible {
  border-bottom-color: var(--border-strong);
}

.fr__label {
  display: block;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  margin-bottom: var(--s-1);
  position: relative;
}

/* Subtle external-link chevron after label */
.fr__label::after {
  content: "↗";
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 400;
  margin-left: var(--s-2);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display: inline-block;
}

.fr__link:hover .fr__label::after,
.fr__link:focus-visible .fr__label::after {
  opacity: 1;
  transform: translate(1px, -1px);
}

.fr__desc {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

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

.foot__attribution {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-family: var(--font-body);
  letter-spacing: 0;
}

.foot__attribution .doc-link {
  font-size: inherit;
  color: var(--text-muted);
  border-bottom-color: var(--border-strong);
}

.foot__attribution .doc-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ============================================================
   Demo video — section 03
   A video container that gracefully handles "no src yet" by
   showing a placeholder. When the video is dropped in later,
   JS swaps data-video-src onto the src attribute and the
   placeholder hides.
   ============================================================ */

.demo-video {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.demo-video__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: block;
  /* Hidden until src is populated — placeholder shows instead. */
}

.demo-video__player[src] + .demo-video__placeholder {
  display: none;
}

.demo-video__player:not([src]) {
  display: none;
}

.demo-video__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-solid);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6);
  text-align: center;
}

.demo-video__placeholder-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-muted);
  font-variation-settings: "opsz" 60, "SOFT" 30;
  margin: 0;
}

.demo-video__placeholder-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin: 0;
}

.demo-video__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
}