/* ==========================================================================
   FONTS - self-hosted, no third-party request on the critical path.
   Both are VARIABLE fonts: one file each covers every weight, which matters
   because this stylesheet uses 520, 540, 560, 620 and 650. Static weights
   would snap those to 500/600/700 and quietly change the design.
   font-display: swap so text paints immediately in the fallback face.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

/* ==========================================================================
   CODERDUDE - design system
   One stylesheet, every page. Tokens first, then primitives, then blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces - near-black with a green cast, matching bg-001.webp */
  --bg-0: #07090c;
  --bg-1: #0b0f14;
  --bg-2: #10151b;

  /* Glass panels */
  --glass: rgba(10, 14, 18, 0.46);
  --glass-soft: rgba(10, 14, 18, 0.34);
  --glass-deep: rgba(4, 6, 9, 0.72);

  /* Accents.
     GOLD is the brand. MINT is system state (ok / live / shipping).
     TEAL is informational. AMBER is the games vertical. */
  --gold: #d9ae3c;
  --gold-bright: #efc75a;
  --gold-glow: rgba(217, 174, 60, 0.2);
  --gold-dim: rgba(217, 174, 60, 0.08);
  --gold-line: rgba(217, 174, 60, 0.28);

  --mint: #79ffcd;
  --mint-dim: rgba(121, 255, 205, 0.12);
  --mint-line: rgba(121, 255, 205, 0.26);

  --teal: #6bdcff;
  --teal-dim: rgba(107, 220, 255, 0.12);
  --teal-line: rgba(107, 220, 255, 0.26);

  --amber: #ffc578;
  --amber-line: rgba(255, 197, 120, 0.3);

  --violet: #c4a6ff;
  --violet-dim: rgba(196, 166, 255, 0.07);
  --violet-line: rgba(196, 166, 255, 0.28);

  /* Ink */
  --ink: #eef2f7;
  --ink-2: rgba(238, 242, 247, 0.72);
  --ink-3: rgba(238, 242, 247, 0.5);
  /* The faintest tone that is still text. 0.55 is the floor that clears AA
     (4.5:1) on every surface here - the old 0.32 came out at 2.62, which
     misses even the 3.0 large-text bar. */
  --ink-4: rgba(238, 242, 247, 0.55);
  /* Decoration only: unlit dots and similar, where contrast rules don't
     apply and 0.32 is what actually reads as "off". Never use for text. */
  --ink-faint: rgba(238, 242, 247, 0.32);

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.06);

  /* Type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Geometry - panels are softly rounded, controls are tighter.
     Deliberate middle ground between the 4px terminal look and the 18px glass look. */
  --r-panel: 12px;
  --r-control: 7px;
  --r-pill: 999px;

  /* Rhythm */
  --gap: 1.25rem;
  --shell: 1280px;
  --nav-h: 60px;

  /* Motion */
  --t-fast: 0.15s ease;
  --t: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-0);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold-dim); color: var(--gold-bright); }

/* Scrollbars inside panels */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 500;
  padding: 0.6rem 1.1rem;
  background: var(--bg-1);
  border: 1px solid var(--gold-line);
  border-radius: 0 0 var(--r-control) var(--r-control);
  font-size: 0.85rem;
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. BACKGROUND STACK
   -------------------------------------------------------------------------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.bg__image {
  background-image: url("../img/bg-001.webp");
  background-size: cover;
  background-position: center top;
  opacity: 0.85;
}

.bg__wash {
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(217, 174, 60, 0.13), transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(121, 255, 205, 0.07), transparent 55%),
    radial-gradient(ellipse 60% 40% at 12% 85%, rgba(217, 174, 60, 0.06), transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(7, 9, 12, 0.55) 60%, var(--bg-0) 100%);
}

.bg__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 28%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 85% 65% at 50% 28%, #000 10%, transparent 72%);
}

.bg__scan {
  background: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px
  );
  opacity: 0.5;
  mix-blend-mode: overlay;
}

#particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--hairline { border-top: 1px solid var(--line-soft); }
.stack { display: grid; gap: var(--gap); }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
.h3 { font-size: 1.15rem; font-weight: 620; line-height: 1.3; }

/* Headings break at sensible points instead of leaving one word stranded. */
.display, .h1, .h2, .h3 { text-wrap: balance; }

/* For headings that must hold one line once there is room for it. Released
   below the breakpoint so a phone wraps rather than overflowing. */
@media (min-width: 760px) { .keep-line { white-space: nowrap; } }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); max-width: 46ch; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.small { font-size: 0.86rem; }
.mono { font-family: var(--mono); }
.gold { color: var(--gold-bright); }
.mint { color: var(--mint); }
.prose p + p { margin-top: 0.9rem; }
.prose { max-width: 68ch; color: var(--ink-2); }

/* Section eyebrow - the little mono kicker above headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* --------------------------------------------------------------------------
   6. PANELS
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.panel--soft { background: var(--glass-soft); }
.panel--deep { background: var(--glass-deep); }

.panel--glow {
  border-color: var(--gold-line);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 48px rgba(217, 174, 60, 0.09),
    0 24px 70px rgba(0, 0, 0, 0.55);
}

/* Corner ticks - the bracket detail from the mockups */
.panel--ticks::before,
.panel--ticks::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-line);
  pointer-events: none;
}
.panel--ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r-panel) 0 0 0; }
.panel--ticks::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-panel) 0; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

.panel-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.panel-title svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.panel-title .weak { color: var(--ink-4); }

.panel-body { padding: 1.1rem; }
.panel-actions { display: flex; align-items: center; gap: 0.45rem; }

/* --------------------------------------------------------------------------
   7. BUTTONS & CONTROLS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.94rem;
  font-weight: 520;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.2); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-dim), transparent);
  box-shadow: 0 0 22px var(--gold-dim), inset 0 0 22px rgba(217, 174, 60, 0.06);
}
.btn--primary:hover {
  color: #fff2cf;
  border-color: var(--gold);
  box-shadow: 0 0 34px var(--gold-glow), inset 0 0 28px rgba(217, 174, 60, 0.1);
  transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); }

.btn--mint { color: var(--mint); border-color: var(--mint-line); background: var(--mint-dim); }
.btn--mint:hover { color: #b9ffe6; border-color: var(--mint); box-shadow: 0 0 28px var(--mint-dim); }

.btn--ghost { border-color: transparent; padding-inline: 0.4rem; color: var(--ink-3); }
.btn--ghost:hover { color: var(--ink); border-color: transparent; }

.btn--block { width: 100%; }
.btn--sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(10, 14, 18, 0.3);
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--t-fast);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--ink); border-color: var(--gold-line); box-shadow: 0 0 18px var(--gold-dim); }

.mini-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(10, 14, 18, 0.28);
  color: var(--ink-3);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.mini-btn:hover { color: var(--ink); border-color: var(--gold-line); }

.field {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: rgba(4, 6, 9, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field::placeholder { color: var(--ink-4); }
/* The border and ring are decoration. The indicator that actually has to
   clear 3:1 is the global :focus-visible outline, so this must not clear it. */
.field:focus { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-dim); }
textarea.field { min-height: 130px; resize: vertical; }

/* The form status is a live region, so it has to stay in the accessibility
   tree to be announced - toggling [hidden] off and writing the text in the
   same tick is not reliably picked up. It stays in the DOM and empty, and
   :empty is what keeps it from taking up space. */
[data-form-status]:empty { display: none; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
}

/* --------------------------------------------------------------------------
   8. TAGS, CHIPS, PILLS, DOTS
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
/* Accent aliases - data files name a colour, not a vertical, so adding a
   new product category never means touching this stylesheet. */
.tag--mint,   .tag--ai         { color: var(--mint);        border-color: var(--mint-line); }
.tag--gold,   .tag--automation { color: var(--gold-bright); border-color: var(--gold-line); }
.tag--amber,  .tag--games      { color: var(--amber);       border-color: var(--amber-line); }
.tag--teal,   .tag--infra      { color: var(--teal);        border-color: var(--teal-line); }
.tag--violet, .tag--content    { color: var(--violet);      border-color: var(--violet-line); }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(10, 14, 18, 0.3);
  font-size: 0.8rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--gold-line); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-active {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: var(--gold-dim);
  box-shadow: 0 0 18px var(--gold-dim);
}

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: rgba(10, 14, 18, 0.3);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.dot--mint  { background: var(--mint);  box-shadow: 0 0 10px rgba(121, 255, 205, 0.6); }
.dot--gold  { background: var(--gold);  box-shadow: 0 0 10px var(--gold-glow); }
.dot--teal  { background: var(--teal);  box-shadow: 0 0 10px rgba(107, 220, 255, 0.5); }
.dot--amber { background: var(--amber); box-shadow: 0 0 10px rgba(255, 197, 120, 0.5); }
.dot--idle  { background: var(--ink-faint); }

.dot--live { position: relative; }
.dot--live::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 99px; border: 1px solid currentColor;
  opacity: 0.45;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.5; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* --------------------------------------------------------------------------
   9. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(1rem, 4vw, 2rem);
  background: rgba(7, 9, 12, 0.72);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  display: flex; align-items: center; gap: 0.65rem;
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}
.brand svg { width: 22px; height: 22px; color: var(--gold); flex: none; }

.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-link {
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-control);
  font-size: 0.88rem;
  color: var(--ink-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.045); }
.nav-link[aria-current="page"] { color: var(--gold-bright); background: var(--gold-dim); }

.nav-right { display: flex; align-items: center; gap: 0.6rem; }

.nav-burger { display: none; }

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: clamp(600px, 92vh, 900px);
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem));
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.hero-title .accent {
  background: linear-gradient(100deg, var(--gold-bright), #fff3d0 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-meta {
  display: inline-grid;
  gap: 0.35rem;
  margin-block: 1.75rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.45);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
}
.hero-meta b { color: var(--ink-3); font-weight: 500; margin-right: 0.4rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.hero-proof div { display: grid; gap: 0.1rem; }
.hero-proof .n { font-family: var(--mono); font-size: 1.4rem; color: var(--gold-bright); line-height: 1; }
.hero-proof .k { font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   11. CONSOLE (hero right panel)
   -------------------------------------------------------------------------- */
.console { display: flex; flex-direction: column; }

/* ---- Signup block - sits at the top of the hero panel, no chrome above it.
   Deliberately NOT mono/terminal styled: it's the one thing on the page that
   has to read as a plain, trustworthy ask. */
.signup {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.signup-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.signup-row .field { flex: 1 1 auto; min-width: 0; }
.signup-row .btn { flex: 0 0 auto; padding-inline: 1.15rem; }

.signup-fine { line-height: 1.5; }

/* Honeypot - off-screen, not display:none, so bots still see and fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 420px) {
  .signup-row { flex-wrap: wrap; }
  .signup-row .btn { width: 100%; }
}

/* A signup dropped inside another panel, so it carries no chrome of its own. */
.signup--inline {
  padding: 0;
  border-bottom: 0;
  margin-top: 1.25rem;
  gap: 0.5rem;
}
.signup--inline .signup-row { margin-top: 0; }

/* ---- Ladder strip - the step up from newsletter to community.
   Violet-tinted so it reads as a different, higher-commitment offer than
   the gold primary above it. */
.ladder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--violet-dim);
  transition: background var(--t-fast);
}
.ladder:hover { background: rgba(196, 166, 255, 0.1); }
.ladder > span:first-child { display: grid; gap: 0.1rem; }
.ladder-k { font-size: 0.92rem; font-weight: 560; color: var(--ink); }
.ladder-go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex: none;
  font-size: 0.86rem;
  font-weight: 540;
  color: var(--violet);
  transition: gap var(--t-fast);
}
.ladder-go svg { width: 15px; height: 15px; }
.ladder:hover .ladder-go { gap: 0.65rem; }

.caret {
  display: inline-block;
  width: 8px; height: 1.05em;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

.console-list { padding: 0.9rem 1.1rem 1.1rem; }
.console-list-head {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}
.console-list-head .arrow { color: var(--teal); }

/* Rotation controls sit top-right of the list, opposite the prompt. */
.list-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.list-head-row .console-list-head { margin-bottom: 0; }

.rot-controls { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.rot-controls[hidden] { display: none; }
.rot-controls .mini-btn { width: 24px; height: 24px; }
.rot-controls .mini-btn svg { width: 12px; height: 12px; }
/* Paused is a held state, so it reads as on rather than as a hover. */
.rot-controls [aria-pressed="true"] {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: var(--gold-dim);
}

/* One dot per project, lit for the three on screen. Answers "where am I"
   without needing to watch the rotation. */
.rot-dots { display: flex; align-items: center; gap: 3px; padding-right: 0.15rem; }
.rot-dots i {
  width: 4px; height: 4px;
  border-radius: 99px;
  background: var(--ink-faint);
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.rot-dots i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }


/* Pause and play glyphs, drawn in CSS so they are centred by construction.
   The play triangle gets a nudge right because a triangle's visual mass sits
   toward its base, so a geometrically centred one reads as sitting left. */
.ico-pause, .ico-play {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ico-pause { gap: 3px; }
.ico-pause::before,
.ico-pause::after {
  content: "";
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
}
.ico-play::before {
  content: "";
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  transform: translateX(1.5px);
}

/* ---- Countdown ring around the pause button --------------------------- */
.rot-ring {
  /* Fixed box with the button centred by grid, and the SVG laid exactly over
     it. The previous version used inset:-4px plus calc(100% + 8px), which
     over-constrains an absolutely positioned box and left the ring and the
     glyph resolving against different reference boxes. */
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  flex: none;
}
.rot-ring > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.rot-ring .mini-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  grid-area: 1 / 1;
}
.rot-ring circle { fill: none; stroke-width: 2; }
.rot-ring__bg { stroke: rgba(255, 255, 255, 0.08); }
.rot-ring__fg {
  stroke: var(--gold);
  /* 2 * pi * r, r = 13 */
  stroke-dasharray: 81.68;
  stroke-dashoffset: 81.68;
}
.rot-ring.is-running .rot-ring__fg {
  animation: ring-fill var(--ring-dur, 10s) linear infinite;
}
.rot-ring.is-paused .rot-ring__fg { animation-play-state: paused; }
@keyframes ring-fill {
  from { stroke-dashoffset: 81.68; }
  to   { stroke-dashoffset: 0; }
}

/* ---- Diamond wipe ------------------------------------------------------
   A band of four small gold squares turned 45 degrees, sweeping left to
   right across the list. The content swaps behind the band, so the old set
   leaves and the new set arrives on the far side of the sweep. */
.rot-stage { position: relative; }

.wipe {
  position: absolute;
  left: -4px;
  right: -4px;
  /* top and height are set per row by JS, so the band sweeps one row only. */
  top: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.wipe.is-on { opacity: 1; }

.wipe-band {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-110px);
}
.wipe.is-on .wipe-band {
  animation: wipe-sweep var(--sweep-dur, 1800ms) cubic-bezier(0.42, 0, 0.58, 1);
}

.wipe-band i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px var(--gold-glow);
}
/* Trailing squares are fainter, so the band reads as moving. */
.wipe-band i:nth-child(1) { opacity: 0.35; }
.wipe-band i:nth-child(2) { opacity: 0.6; }
.wipe-band i:nth-child(3) { opacity: 0.85; }

@keyframes wipe-sweep {
  from { transform: translateX(-110px); }
  to   { transform: translateX(var(--sweep, 480px)); }
}

.build-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.42);
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
}
.build-row:hover { border-color: var(--gold-line); background: rgba(217, 174, 60, 0.05); transform: translateX(2px); }
.build-row.is-active { border-color: var(--gold-line); box-shadow: 0 0 18px var(--gold-dim); background: rgba(217, 174, 60, 0.06); }
.build-row h4 { font-size: 0.94rem; font-weight: 600; margin-bottom: 0.1rem; }
/* Two lines reserved, and never more than two, so every row is the same
   height. Without this a one-line tagline swapping for a two-line one
   resized the panel and shoved the whole page down. */
.build-row p {
  font-size: 0.76rem;
  color: var(--ink-3);
  line-height: 1.45;
  min-height: 2.9em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.build-row h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Reserve the row height up front too, in case a browser ignores the clamp. */
.build-row { min-height: 62px; align-items: center; }
.build-row .meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-4); }
.build-row .right { display: flex; align-items: center; gap: 0.4rem; flex: none; }

/* --------------------------------------------------------------------------
   12. BUILD LOOP (tabs + panel)
   -------------------------------------------------------------------------- */
.loop-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.5rem;
}
.loop-tab {
  position: relative;
  padding: 0.6rem 1rem;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.94rem;
  cursor: pointer;
  transition: color var(--t-fast);
}
.loop-tab::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--t);
}
.loop-tab:hover { color: var(--ink-2); }
.loop-tab.is-active { color: var(--ink); }
.loop-tab.is-active::after { transform: scaleX(1); box-shadow: 0 0 12px var(--gold-glow); }
.loop-tab .num { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); margin-right: 0.4rem; }
.loop-tab.is-active .num { color: var(--gold); }

.loop-pane { display: none; }
.loop-pane.is-active { display: grid; animation: fade-up 0.35s var(--t); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.loop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  text-align: left;
}
.loop-points { display: grid; gap: 0.7rem; margin-top: 1.25rem; }
.loop-points li { display: flex; gap: 0.65rem; color: var(--ink-2); font-size: 0.94rem; }
.loop-points li::before { content: "▸"; color: var(--gold); flex: none; }

.loop-artifact {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.55);
  overflow: hidden;
}
.loop-artifact .cap {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.loop-artifact pre {
  margin: 0; padding: 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--ink-2);
  overflow-x: auto;
}

/* ---- Method (How I Work) -----------------------------------------------
   Two phases, three steps each. Deliberately not tabs: nothing is hidden, so
   nothing needs clicking. */
.method-phase + .method-phase { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.method-phase-title {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.method-phase-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.method-step { padding: 1.25rem; display: grid; gap: 0.35rem; align-content: start; }
.method-n {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.method-step h4 { margin-top: 0.1rem; }

/* The line that closes How I Work. Runs the full width of the section so it
   lines up with the grid above it rather than sitting in a narrow column.
   Nudged up a size, because full-width text at 0.86rem gives punishingly long
   lines on a wide monitor. */
.method-note {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-3);
}

/* Nav link for the section currently on screen. Kept as a class so real page
   links keep aria-current to themselves. */
.nav-link.is-section {
  color: var(--gold-bright);
  background: var(--gold-dim);
}
.nav-link.is-dimmed[aria-current="page"] {
  color: var(--ink-3);
  background: transparent;
}

/* --------------------------------------------------------------------------
   13. CARD GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-line);
  box-shadow: 0 0 34px var(--gold-dim), 0 18px 46px rgba(0, 0, 0, 0.45);
}
.card__texture {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: 0.16;
  transition: opacity var(--t);
}
.card:hover .card__texture { opacity: 0.26; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card h3 { font-size: 1.12rem; font-weight: 620; }
.card p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; }

/* The plain-language line. Deliberately the largest text in the card, so a
   reader who stops after one sentence still understands what the thing is. */
.card__tagline {
  font-size: 1rem !important;
  color: var(--ink) !important;
  font-weight: 500;
  line-height: 1.45 !important;
}
.card p:not(.card__tagline) { color: var(--ink-3); font-size: 0.86rem; }

.card--more {
  justify-content: center;
  align-items: flex-start;
  border-style: dashed;
  gap: 0.6rem;
}
.card--more:hover { transform: none; box-shadow: none; border-color: var(--line); }

.card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-4);
}
.card__go { color: var(--gold); display: inline-flex; align-items: center; gap: 0.3rem; transition: gap var(--t-fast); }
.card:hover .card__go { gap: 0.55rem; }

/* Feature card - the wide "spotlight" variant */
.card--feature { grid-column: span 2; }
@media (max-width: 720px) { .card--feature { grid-column: auto; } }

/* --------------------------------------------------------------------------
   14. WORKSPACE (project detail, Builder Mode)
   -------------------------------------------------------------------------- */
.workspace {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px;
  gap: 0.85rem;
  align-items: stretch;
  min-height: 640px;
}
.workspace > .panel { display: flex; flex-direction: column; overflow: hidden; }

.tree { padding: 0.6rem; gap: 1rem; display: grid; align-content: start; }
.tree-group-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 0.4rem 0.5rem;
}
.tree-item {
  display: flex; align-items: center; gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
}
.tree-item:hover { background: rgba(255, 255, 255, 0.04); }
.tree-item.is-active {
  background: var(--gold-dim);
  border-color: var(--gold-line);
  color: var(--ink);
}

.editor-tabs {
  display: flex; gap: 0.35rem;
  padding: 0.6rem 0.6rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.editor-tabs::-webkit-scrollbar { display: none; }
.etab {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-bottom: 0;
  border-radius: var(--r-control) var(--r-control) 0 0;
  background: rgba(4, 6, 9, 0.35);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.etab:hover { color: var(--ink-2); }
.etab.is-active { background: var(--gold-dim); border-color: var(--gold-line); color: var(--gold-bright); }

.editor-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  border-block: 1px solid var(--line-soft);
  font-size: 0.78rem;
}
.crumbs { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-3); font-family: var(--mono); font-size: 0.74rem; }
.crumbs .sep { color: var(--ink-4); }
.crumbs .strong { color: var(--ink); }

.codewrap { display: flex; flex: 1; min-height: 240px; overflow: hidden; }
.gutter {
  flex: none;
  padding: 0.85rem 0.6rem;
  border-right: 1px solid var(--line-soft);
  background: rgba(4, 6, 9, 0.3);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--ink-4);
  text-align: right;
  user-select: none;
}
.code {
  flex: 1;
  margin: 0; padding: 0.85rem 1rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink-2);
  tab-size: 2;
}
.code .kw { color: var(--mint); }
.code .ty { color: var(--teal); }
.code .fn { color: var(--gold-bright); }
.code .st { color: var(--amber); }
.code .cm { color: var(--ink-4); font-style: italic; }

.term-panel { border-top: 1px solid var(--line-soft); background: rgba(4, 6, 9, 0.4); }
.term-tabs {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
}
.ttab {
  padding: 0.32rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.74rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.ttab.is-active { color: var(--mint); background: var(--mint-dim); border-color: var(--mint-line); }
.term-meta { margin-left: auto; display: flex; gap: 0.4rem; }
.term-body {
  height: 168px;
  padding: 0.75rem 0.95rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.term-body[data-pane] { display: none; }
.term-body[data-pane].is-active { display: block; }

/* Editor code panes share the same show/hide contract */
.code-pane { display: none; flex: 1; min-width: 0; }
.code-pane.is-active { display: flex; }
.term-body .p { color: var(--teal); }
.term-body .ok { color: var(--mint); }
.term-body .warn { color: var(--amber); }

/* Right rail */
.rail-tabs { display: flex; gap: 0.35rem; padding: 0.6rem; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.rtab {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.3);
  color: var(--ink-3);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.rtab.is-active { color: var(--gold-bright); border-color: var(--gold-line); background: var(--gold-dim); }

.rail-body { padding: 1rem; overflow-y: auto; flex: 1; }
.rail-pane { display: none; }
.rail-pane.is-active { display: grid; gap: 0.9rem; animation: fade-up 0.3s var(--t); }

.kv {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.35);
  overflow: hidden;
}
.kv-row { display: flex; gap: 0.85rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--line-soft); font-size: 0.82rem; }
.kv-row:first-child { border-top: 0; }
.kv-k { flex: none; width: 88px; color: var(--ink-4); font-family: var(--mono); font-size: 0.72rem; padding-top: 0.15rem; }
.kv-v { color: var(--ink-2); }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.flow .node {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(10, 14, 18, 0.45);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-2);
  box-shadow: 0 0 16px rgba(121, 255, 205, 0.05);
}
.flow .arrow { color: var(--gold); }

.list-check { display: grid; gap: 0.6rem; }
.list-check li { display: flex; gap: 0.6rem; font-size: 0.88rem; color: var(--ink-2); }
.list-check li::before { content: "✓"; color: var(--mint); flex: none; }

/* --------------------------------------------------------------------------
   17. COMMAND PALETTE
   -------------------------------------------------------------------------- */
.palette {
  position: fixed; inset: 0;
  z-index: 300;
  display: none;
  padding-top: 12vh;
  background: rgba(3, 4, 6, 0.7);
  backdrop-filter: blur(4px);
}
.palette.is-open { display: block; animation: fade-up 0.2s var(--t); }
.palette-box {
  width: min(560px, calc(100vw - 2rem));
  margin-inline: auto;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-panel);
  background: rgba(9, 12, 16, 0.97);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 60px var(--gold-dim);
  overflow: hidden;
}
.palette-input {
  width: 100%;
  padding: 1rem 1.15rem;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.92rem;
}
/* Inset, because the global outline sits 3px outside and would collide with
   the box edge. Still 2px of gold-bright, so it clears 3:1 either way. */
.palette-input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.palette-list { max-height: 320px; overflow-y: auto; padding: 0.45rem; }
.palette-item {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.palette-item .k { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-4); margin-left: auto; }
.palette-item:hover, .palette-item.is-sel { background: var(--gold-dim); border-color: var(--gold-line); color: var(--ink); }
.palette-empty { padding: 1.25rem; text-align: center; color: var(--ink-4); font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   18. CTA BAND & FOOTER
   -------------------------------------------------------------------------- */
.cta-band {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  justify-items: center;
}

.footer {
  border-top: 1px solid var(--line-soft);
  background: rgba(4, 6, 9, 0.55);
  backdrop-filter: blur(10px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(120px, 1fr));
  gap: 2rem;
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.footer h5 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.75rem;
}
.footer ul { display: grid; gap: 0.45rem; }
.footer a { font-size: 0.88rem; color: var(--ink-2); transition: color var(--t-fast); }
.footer a:hover { color: var(--gold-bright); }
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--ink-4);
}
.footer-bar .status { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.74rem; }

/* Legal row. Sits between the copyright and the status, and wraps onto its
   own line before either of those do. */
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.footer-legal a { font-size: 0.8rem; color: var(--ink-2); }
.footer-legal a:hover { color: var(--gold-bright); }
.footer-legal a[aria-current="page"] { color: var(--gold-bright); }


/* The turn line in the hero lede - the promise after the list of what. */
.lede-turn { display: inline-block; margin-top: 0.5rem; color: var(--ink); font-weight: 500; }

/* Footer with the builds column removed. */
.footer-grid--3 { grid-template-columns: 1.6fr repeat(2, minmax(130px, 1fr)); }
@media (max-width: 1024px) { .footer-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer-grid--3 { grid-template-columns: 1fr; } }


/* ---- Builds toolbar: filters left, sort + layout + count right ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.5rem;
}
.toolbar .filters { padding-bottom: 0; }
.toolbar-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.field--sm {
  width: auto;
  padding: 0.42rem 0.7rem;
  font-size: 0.82rem;
  border-radius: var(--r-control);
}

.viewswitch {
  display: flex; gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.4);
}
.viewswitch .mini-btn { border-color: transparent; background: transparent; width: 26px; height: 24px; }
.viewswitch .mini-btn svg { width: 14px; height: 14px; }
.viewswitch [aria-pressed="true"] {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: var(--gold-dim);
}

/* ---- Builds table ------------------------------------------------------
   Same data as the cards, denser. Scrolls in its own box so the page body
   never scrolls sideways. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--glass-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tablewrap[hidden] { display: none; }

.btable { width: 100%; border-collapse: collapse; min-width: 720px; }
.btable th, .btable td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.87rem;
  vertical-align: top;
}
.btable thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  white-space: nowrap;
}
.btable tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.btable tbody th a:hover { color: var(--gold-bright); }
.btable td { color: var(--ink-2); }
.btable tbody tr:hover { background: rgba(217, 174, 60, 0.045); }
.btable .nowrap { white-space: nowrap; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }

@media (max-width: 640px) {
  .toolbar { gap: 0.75rem; }
  .toolbar-right { width: 100%; justify-content: space-between; }
}


/* ---- Product pages -----------------------------------------------------
   Deliberately not a marketing page. Each product gets its own domain and
   its own full site; this is the build story plus a door to that site. */
.build-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.build-story {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* A placeholder that briefs the shot instead of being a grey box. */
.media-frame { margin: 0; }
.media-frame__slot {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  aspect-ratio: 16 / 10;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-panel);
  background: rgba(4, 6, 9, 0.4);
}
.media-frame__kind {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.media-frame__kind svg { width: 15px; height: 15px; }
.media-frame__brief {
  font-size: 0.86rem;
  color: var(--ink-3);
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.5;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}

/* A CTA with nowhere to go yet. Reads as pending rather than broken. */
.btn--waiting {
  color: var(--ink-4);
  border-style: dashed;
  cursor: default;
}
.btn--waiting:hover { color: var(--ink-4); border-color: var(--line); }

@media (max-width: 900px) {
  .build-head, .build-story { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.page-head .h1 { max-width: 22ch; }
.page-head .lede { margin-top: 1rem; max-width: 60ch; }

/* Filter bar */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding-bottom: 1.5rem;
}
.filters .spacer { margin-left: auto; }
.count { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-4); }

/* Coming soon */
.coming {
  display: grid; place-items: center; align-content: center;
  gap: 1.25rem;
  min-height: 100vh;
  text-align: center;
  padding: calc(var(--nav-h) + 2rem) 1rem 3rem;
}
.coming .display { max-width: 18ch; }
.coming .rule {
  width: 96px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 14px var(--gold-glow);
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .workspace > .panel:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 640px; }
  .console { max-width: 520px; }
  .loop-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; }
  .workspace > .panel:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  :root { --nav-h: 56px; --gap: 1rem; }
  .hero-proof { gap: 1.1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .loop-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .loop-tabs::-webkit-scrollbar { display: none; }
  .loop-tab { white-space: nowrap; }
}

/* Mobile nav drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  display: none;
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem;
  background: rgba(7, 9, 12, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.drawer.is-open { display: grid; gap: 0.25rem; animation: fade-up 0.2s var(--t); }
.drawer a {
  padding: 0.7rem 0.5rem;
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-size: 0.98rem;
}
.drawer a:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.drawer a[aria-current="page"] { color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   21. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #particles { display: none; }
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--t), transform 0.6s var(--t); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* --------------------------------------------------------------------------
   22. LEGAL PAGES (privacy, terms, accessibility)

   Long-form documents rather than marketing pages, so they undo a few of the
   global resets: list bullets are back, and links are underlined instead of
   relying on colour alone (WCAG 1.4.1 - colour is not the only cue).
   -------------------------------------------------------------------------- */
.legal { max-width: 74ch; color: var(--ink-2); font-size: 0.95rem; line-height: 1.75; }
.legal > section + section { margin-top: clamp(2rem, 4vw, 2.75rem); }

.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.legal h3 {
  font-size: 1rem;
  color: var(--ink);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal p + p, .legal ul + p, .legal p + ul, .legal ul + h3 { margin-top: 0.9rem; }

.legal ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.legal ul ul { margin-top: 0.45rem; list-style: circle; }
.legal li::marker { color: var(--gold); }

.legal a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }

.legal strong { color: var(--ink); font-weight: 600; }
.legal .updated { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }

/* Definition-style rows, used for the local-storage keys and the rights list. */
.legal dl { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.legal dt { color: var(--ink); font-family: var(--mono); font-size: 0.8rem; }
.legal dd { margin-top: 0.25rem; }

/* Contents box at the top of each document. */
.toc { padding: 1.15rem 1.3rem; }
.toc ul { list-style: none; padding-left: 0; gap: 0.4rem; }
.toc a { color: var(--ink-2); text-decoration: none; font-size: 0.88rem; }
.toc a:hover { color: var(--gold-bright); text-decoration: underline; }
.toc li::marker { content: none; }

/* Unresolved before launch. Deliberately loud: a placeholder that ships is
   worse than no page at all, so these are meant to be impossible to miss. */
.todo {
  display: inline;
  padding: 0.05em 0.35em;
  border-bottom: 2px dotted var(--amber);
  background: rgba(255, 197, 120, 0.1);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 0.85em;
  font-style: normal;
}

/* ==========================================================================
   23. THE OFFER AND THE VOTE
   Added when the site stopped selling consultation and started selling the
   bundle. Everything here reuses the existing panel/field/btn primitives -
   these are layout rules only, no new colours and no new type scale.
   ========================================================================== */

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

/* The offer and the signup sit side by side above the legal bar. The footer
   used to be a copyright line and three links; this is what catches someone
   who read the whole page and never hit a call to action.

   On the home page and on /bundle the offer is suppressed - both already end
   on it - and footer-top--solo lets the signup keep its own column width
   rather than stretching across the empty half. */
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.9rem;
  border-top: 1px solid var(--line-soft);
}
.footer-top--solo { grid-template-columns: minmax(0, 34rem); }

.footer-offer .h3 { color: var(--ink-1); }
.footer-offer .small { max-width: 46ch; }

/* --- Card action -------------------------------------------------------- */

/* An obtainable build says what you get; everything else still says "learn
   more". Weight, not colour, carries the difference - the row already has a
   status dot doing colour work next to it. */
.card__go--action { color: var(--gold-bright); font-weight: 600; }

/* --- The workshop vote -------------------------------------------------- */

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.85rem;
}

.vote-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.vote-item:hover { border-color: var(--gold-line); }

/* The whole card is the label, so the checkbox only has to be reachable and
   visible - :has() moves the card state, and the outline below keeps the
   focus indicator on the card rather than on a 16px box in its corner. */
.vote-item:has(.vote-check:checked) {
  border-color: var(--gold-line);
  background: var(--gold-dim);
}
.vote-item:has(.vote-check:focus-visible) {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.vote-check {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--gold);
}

.vote-body { display: grid; gap: 0.3rem; min-width: 0; }
.vote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.vote-name { font-weight: 600; color: var(--ink-1); }

/* Relative bar, not a percentage of anything real. It exists to make the
   leader obvious at a glance; the count underneath carries the actual number
   so the bar never has to be read as data on its own. */
.vote-meter {
  display: block;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.vote-meter__fill { display: block; height: 100%; background: var(--gold); }
.vote-count { font-family: var(--mono); font-size: 0.72rem; }

.vote-submit {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}

@media (prefers-reduced-motion: reduce) {
  .vote-item { transition: none; }
}

/* The bundle's scope rule, one sentence per line and never constrained to a
   reading column - on /bundle it is the offer itself, not body copy. */
.rule-line {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-2);
}
.rule-line span { display: block; }

/* ==========================================================================
   24. ACCOUNTS, COURSES AND THE PLAYER
   Layout only. Every colour, control and panel is borrowed from the sections
   above, so an auth page looks like the rest of the site rather than like a
   framework's starter kit.
   ========================================================================== */

/* --- Auth --------------------------------------------------------------- */

.auth-shell { max-width: 30rem; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.auth-card { padding: clamp(1.3rem, 3vw, 1.9rem); }
.auth-alt { margin-top: 1.15rem; text-align: center; }

.auth-errors {
  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--amber);
  border-radius: var(--r-control);
  background: rgba(255, 197, 120, 0.08);
}
.auth-errors ul { list-style: none; padding: 0; display: grid; gap: 0.25rem; color: var(--ink-2); }

.check-row { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.check-row input { width: 1rem; height: 1rem; accent-color: var(--gold); }

/* --- The player --------------------------------------------------------- */

.learn { padding-block: clamp(1.25rem, 3vw, 2rem); }

.learn-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
.learn-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); }
.learn-back svg { width: 1.05rem; height: 1.05rem; }
.learn-back:hover { color: var(--gold-bright); }
.learn-meta { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-4); }
.learn-points { color: var(--gold); }
.learn-streak { color: var(--amber); }

.learn-progress {
  height: 3px; margin-top: 0.9rem; border-radius: 999px;
  background: var(--line-soft); overflow: hidden;
}
.learn-progress span {
  display: block; height: 100%; background: var(--gold);
  transition: width var(--t-med, 260ms) ease;
}

/* Video left, words right; stacked on a phone, where the video wants the
   whole width because it is vertical. */
.learn-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: start;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 860px) { .learn-stage { grid-template-columns: 1fr; } }

.learn-video {
  border: 1px solid var(--line);
  border-radius: var(--r-panel, 14px);
  background: #000;
  overflow: hidden;
}
/* 9:16, because the format is vertical and letterboxing it would waste the
   only advantage the format has on a phone. */
.learn-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }

.learn-blurb { margin-top: 0.9rem; }

/* Reserves its own height so awarding points does not shove the buttons down
   the page mid-tap. */
.learn-reward {
  min-height: 1.6rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--gold-bright);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}
.learn-reward.is-on { opacity: 1; }

.learn-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }

.learn-list { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.learn-list summary { cursor: pointer; }
.learn-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }

.learn-step {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: none; color: var(--ink-2); text-align: left; font: inherit; cursor: pointer;
}
button.learn-step:hover { border-color: var(--gold-line); color: var(--ink-1); }
.learn-step.is-current { border-color: var(--gold-line); background: var(--gold-dim); color: var(--ink-1); }
.learn-step.is-done { color: var(--ink-4); }
.learn-step-n { flex: none; font-size: 0.72rem; color: var(--ink-4); }
.learn-tick { margin-left: auto; color: var(--mint); }

/* --- Admin -------------------------------------------------------------- */

.admin-step { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; }
.admin-step-tools { display: flex; gap: 0.3rem; margin-left: auto; }
.admin-step-tools .mini-btn[disabled] { opacity: 0.3; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .learn-progress span, .learn-reward { transition: none; }
}

/* ==========================================================================
   25. THE BLOG
   ========================================================================== */

.post-list { display: grid; gap: 0.85rem; }

.post-row { padding: 0; transition: border-color var(--t-fast); }
.post-row:hover { border-color: var(--gold-line); }
.post-row__link { display: grid; gap: 0.4rem; padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.post-row__link h2,
.post-row__link h3 { color: var(--ink-1); }
.post-row:hover .card__go { gap: 0.55rem; }

/* A measure, not a column: long-form wants ~70 characters a line and the
   shell is far wider than that. */
.post-body { max-width: 72ch; }
.post-body h2 { margin-top: 2.2rem; }
.post-body h3 { margin-top: 1.6rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-control); }
.post-body pre {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.6);
  font-size: 0.84rem;
}
.post-body code { font-family: var(--mono); font-size: 0.88em; }
.post-body blockquote {
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold-line);
  color: var(--ink-3);
}

/* --- The editor --------------------------------------------------------- */

.label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.post-input { line-height: 1.6; resize: vertical; min-height: 26rem; }

/* Same height as the textarea it replaces, so toggling preview does not make
   the page jump under the cursor. */
.post-preview {
  min-height: 26rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.35);
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .post-row { transition: none; }
}

/* The worked example under the bundle's scope rule. Sits between the rule and
   the two columns, so it reads as the explanation rather than a third column. */
.rule-detail {
  padding: clamp(1.25rem, 3vw, 1.8rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.rule-detail .kv-v b { color: var(--ink-1); font-weight: 600; }
.rule-detail .prose { max-width: 68ch; color: var(--ink-3); }

/* ==========================================================================
   26. FAQ
   Native <details> - keyboard accessible, findable by the browser's own
   find-in-page once open, and functional with scripting off.
   ========================================================================== */

.faq-group { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.faq-group__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.9rem;
}

.faq-items { display: grid; gap: 0.5rem; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: rgba(4, 6, 9, 0.35);
  transition: border-color var(--t-fast);
}
.faq-item:hover { border-color: var(--gold-line); }
.faq-item[open] { border-color: var(--gold-line); background: var(--gold-dim); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  color: var(--ink-1);
  font-weight: 500;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* The focus ring goes on the whole row, because summary is the control. */
.faq-item summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -2px;
  border-radius: var(--r-control);
}

.faq-item summary svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ink-4);
  transition: transform var(--t-fast);
}
.faq-item[open] summary svg { transform: rotate(180deg); }

.faq-item p {
  padding: 0 1.1rem 1.05rem;
  max-width: 72ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary svg { transition: none; }
}

/* Dot legend on /builds. Sits under both views, not inside the table one. */
.build-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1.75rem;
}
.build-legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Answers run the shell width rather than a reading column. Opt-in, because
   72ch is the right measure for a long answer and the wrong one for a short
   answer sitting alone in a much wider panel. */
.faq-group--wide .faq-item p { max-width: none; }

/* Social links in the footer bar.

   Black and gold in both states rather than one: gold on black at rest, and
   the same two colours swapped on hover. Inverting is a stronger signal than
   brightening, and it costs no third colour. */
.footer-social { display: flex; align-items: center; gap: 0.5rem; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: #07090c;
  color: var(--gold);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold-bright);
  color: #07090c;
}
.footer-social a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.footer-social svg { width: 1.02rem; height: 1.02rem; display: block; }

@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } }

/* ==========================================================================
   27. CONSENT
   Deliberately not a modal. A banner that blocks the page teaches people to
   click whichever button makes it go away, which is the opposite of consent.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: clamp(0.9rem, 2vw, 1.15rem);
  border-top: 1px solid var(--gold-line);
  background: var(--glass-deep);
  backdrop-filter: blur(14px);
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  max-width: var(--shell, 1180px);
  margin-inline: auto;
}

.consent-copy {
  font-size: 0.86rem;
  color: var(--ink-2);
  max-width: 74ch;
  margin: 0;
}
.consent-copy strong { color: var(--ink-1); font-weight: 600; }

/* Equal weight on purpose. Refusing must not be the harder button - one
   click either way, and neither is styled to be the obvious one. */
.consent-actions { display: flex; gap: 0.5rem; flex: none; }
.consent-actions .btn { min-width: 8.5rem; justify-content: center; }

/* The second, optional yes: full width under the question, unticked. */
.consent-extra {
  flex: 1 1 100%;
  order: 1;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 74ch;
}
.consent-extra input { margin-top: 0.15rem; inline-size: 1rem; block-size: 1rem; accent-color: var(--gold); flex: none; }
.consent-extra + .consent-actions { order: 2; }

@media (max-width: 560px) {
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; min-width: 0; }
}

/* Sign in sits with the nav links rather than the buttons, so the primary
   action stays the only button in the bar. */
.nav-signin { margin-right: 0.35rem; white-space: nowrap; }
@media (max-width: 900px) { .nav-signin { display: none; } }

/* ============================================================================
   The signed-in account menu
   ----------------------------------------------------------------------------
   Built on <details>, so it opens, closes and takes focus without JavaScript.
   site.js only closes it on an outside click, which is polish - if that never
   runs the menu still works.
   ========================================================================== */

.acct { position: relative; }

/* The default disclosure triangle is wrong next to an icon, and Safari needs
   the -webkit- rule as well as list-style. */
.acct > summary { list-style: none; cursor: pointer; }
.acct > summary::-webkit-details-marker { display: none; }

.acct__button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: transparent;
}

.acct__button svg { width: 18px; height: 18px; }
.acct > summary:hover .acct__button,
.acct[open] > summary .acct__button { color: var(--gold-bright); border-color: var(--gold-line); }
.acct > summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 99px; }

.acct__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 13rem;
  display: grid;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.acct__who {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0.3rem;
}

.acct__menu a,
.acct__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.acct__menu a:hover,
.acct__menu button:hover { background: var(--line-soft); color: var(--ink); }

/* Signing out is the one destructive thing in here, so it is set apart rather
   than sitting flush against "Billing" where a slip costs you your session. */
.acct__menu form { border-top: 1px solid var(--line-soft); margin-top: 0.3rem; padding-top: 0.3rem; }
.acct__menu form button { color: var(--ink-3); }

/* The drawer's sign out is a button in a list of links; make it look like one. */
.drawer-signout {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
}

/* Divider in the member nav: what is theirs, then the rest of the site. */
.nav-rule {
  width: 1px;
  align-self: stretch;
  margin-inline: 0.35rem;
  background: var(--line);
}