/* ==========================================================================
   L92-V1 — design system
   Palette is James's own: black base, CRT red primary, cyan/green/magenta
   as secondary channels (taken from the site's existing colour memory).
   Type: IBM Plex Mono, subset to latin, self-hosted.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.08949f72.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-700-normal.4f84d86c.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-italic.0840095f.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  /* surface */
  --bg:        #050506;
  --bg-soft:   #0a0a0d;
  --bg-raise:  #101014;

  /* glass */
  --glass:       rgba(255, 255, 255, 0.035);
  --glass-2:     rgba(255, 255, 255, 0.06);
  --glass-line:  rgba(255, 255, 255, 0.09);
  --glass-line-2:rgba(255, 255, 255, 0.16);

  /* text */
  --fg:        #f2f2f4;
  --fg-dim:    #a2a2ad;
  --fg-faint:  #6a6a76;

  /* accent channels */
  --red:       #ff2233;
  --red-bright:#ff4d5e;
  --red-deep:  #8f0f1c;
  --cyan:      #00fff5;
  --green:     #00ff41;
  --magenta:   #ff06b5;

  /* semantic */
  --accent:      var(--red);
  --accent-soft: rgba(255, 34, 51, 0.14);
  --accent-line: rgba(255, 34, 51, 0.35);

  /* geometry */
  --maxw: 1180px;
  --readw: 780px;
  --radius: 14px;
  --radius-sm: 9px;

  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.4, .64, 1);

  --shadow-lift: 0 18px 50px -18px rgba(0, 0, 0, 0.9);
  --glow-red: 0 0 0 1px var(--accent-line), 0 12px 40px -14px rgba(255, 34, 51, .45);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--red); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--green); }

::selection { background: var(--red); color: #fff; }

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

/* ---------- ambient background ---------- */
/* Two fixed layers: a faint CRT scanline wash, and a slow red bloom that
   drifts. Both are pointer-events:none and sit under everything. */
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}
.bg-scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.014) 0px,
    rgba(255, 255, 255, 0.014) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: .55;
}
.bg-bloom {
  background:
    radial-gradient(60vw 46vw at 12% -8%, rgba(255, 34, 51, .16), transparent 62%),
    radial-gradient(52vw 40vw at 92% 6%, rgba(0, 255, 245, .07), transparent 60%),
    radial-gradient(70vw 55vw at 50% 108%, rgba(255, 6, 181, .07), transparent 62%);
  animation: bloomDrift 34s var(--ease) infinite alternate;
}
@keyframes bloomDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.2%, 0) scale(1.06); }
}

/* vignette so the edges fall away */
.bg-vig {
  background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 42%, rgba(0,0,0,.72) 100%);
}

/* ---------- layout ---------- */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--narrow { max-width: var(--readw); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--magenta), var(--cyan));
  z-index: 200;
  box-shadow: 0 0 12px rgba(255, 34, 51, .8);
  transition: width .08s linear;
}

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 150;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: linear-gradient(to bottom, rgba(5,5,6,.88), rgba(5,5,6,.62));
  border-bottom: 1px solid var(--glass-line);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.masthead::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: .8;
}
.masthead.is-stuck {
  border-bottom-color: var(--glass-line-2);
  background: linear-gradient(to bottom, rgba(5,5,6,.96), rgba(5,5,6,.82));
}

.masthead__inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 66px;
}

/* --- brand --- */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--fg); flex: 0 0 auto;
}
.brand:hover { color: var(--fg); }
.brand__mark {
  width: 38px; height: 38px; border-radius: 8px;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--glass-line), 0 6px 18px -8px rgba(0,0,0,.9);
  transition: transform .35s var(--ease-out-back), box-shadow .3s var(--ease);
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand:hover .brand__mark {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 26px -10px rgba(255,34,51,.6);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase;
}
.brand__tag {
  font-size: 10.5px; color: var(--fg-faint); letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- nav --- */
/* ---------------------------------------------------------------------------
   NAV STATE
   ---------------------------------------------------------------------------
   The nav is rendered by the SERVER with the viewer's state already known, so
   the first paint is correct and there is no flicker as the client fills it in.

   The `hidden` attribute in the markup is the belt; these rules are the braces.
   Two reasons they exist rather than relying on `hidden` alone:

     - an explicit `display` rule on .nav__link would otherwise override the
       browser's default [hidden] styling, and the item would appear when it
       should not. The state class is what decides, in one place.
     - a page served from a cache, or whose state was stale, still resolves to
       the signed-out shape rather than showing a link to a page that gates.

   `state-in` is set by build.py on <html>, per request, from the session.
   `state-out` is the explicit signed-out case, so a cached page is unambiguous
   rather than merely lacking the signed-in class.                                */
.nav__link[data-nav-members],
.nav__link[data-nav-staff] { display: none; }

html.state-in .nav__link[data-nav-members] { display: inline-block; }
html.state-in.staff .nav__link[data-nav-staff] { display: inline-block; }

/* The account button's label is server-rendered too, so it does not flip from
   "Sign in" to a username after load. */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.nav__link {
  position: relative;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg-dim);
  border-radius: 7px;
  letter-spacing: .02em;
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
  box-shadow: 0 0 8px var(--red);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* --- search trigger --- */
.search-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: 10px;
  padding: 8px 12px 8px 11px;
  font: inherit; font-size: 12.5px; color: var(--fg-dim);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
}
.search-trigger:hover {
  color: var(--fg);
  border-color: var(--accent-line);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(255,34,51,.07);
}
.search-trigger svg { width: 14px; height: 14px; flex: 0 0 auto; }
.search-trigger kbd {
  font: inherit; font-size: 10.5px;
  padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-line);
  color: var(--fg-faint);
}

/* --- burger --- */
.burger {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--fg); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 19.5px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: 96px 0 64px; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 26px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 22px;
}
.hero h1 .slash { color: var(--red); }

.lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--fg-dim);
  max-width: 62ch;
  margin: 0 0 34px;
}

/* glitch text — layered pseudo-elements, chromatic split on hover */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.glitch::before { color: var(--cyan);  transform: translate(-2px, 0); }
.glitch::after  { color: var(--magenta); transform: translate(2px, 0); }
.glitch:hover::before { opacity: .85; animation: glitchA 2.4s steps(2, end) infinite; }
.glitch:hover::after  { opacity: .85; animation: glitchB 2.9s steps(2, end) infinite; }
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  93% { transform: translate(-5px, -2px); clip-path: inset(12% 0 62% 0); }
  95% { transform: translate(3px, 1px);   clip-path: inset(58% 0 18% 0); }
  97% { transform: translate(-3px, 2px);  clip-path: inset(30% 0 44% 0); }
}
@keyframes glitchB {
  0%, 90%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(5px, 2px);  clip-path: inset(66% 0 10% 0); }
  94% { transform: translate(-3px, -1px); clip-path: inset(20% 0 54% 0); }
  96% { transform: translate(3px, -2px);  clip-path: inset(44% 0 32% 0); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  background: var(--glass);
  border: 1px solid var(--glass-line-2);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .22s var(--ease);
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}
.btn:hover {
  color: var(--fg);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--glow-red);
}
.btn:hover::before { transform: translateX(120%); }
.btn--primary {
  background: linear-gradient(180deg, rgba(255,34,51,.22), rgba(255,34,51,.1));
  border-color: var(--accent-line);
  color: #fff;
}
.btn--primary:hover { border-color: var(--red-bright); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- section header ---------- */
.section { padding: 58px 0; }
.section__head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-line);
}
.section__head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  margin: 0; font-weight: 700; letter-spacing: -.01em;
}
.section__head .count {
  font-size: 12px; color: var(--fg-faint); letter-spacing: .1em;
  margin-left: auto; text-transform: uppercase;
}

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.card::before {
  /* red edge light that wipes in on hover */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  background: var(--glass-2);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255,34,51,.14);
}
.card:hover::before { transform: scaleX(1); }

.card__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 14px;
}
.card__meta .sep { color: var(--accent); }
.card__meta .tag {
  padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--glass-line-2);
  background: rgba(255,255,255,.03);
}

.card h3 {
  font-size: 1.2rem; margin: 0 0 10px; line-height: 1.3; font-weight: 700;
}
.card h3 a { color: var(--fg); }
.card h3 a:hover { color: var(--fg); }
.card:hover h3 a { color: var(--red-bright); }
.card p {
  margin: 0 0 18px; color: var(--fg-dim); font-size: 14px; line-height: 1.65;
}
.card .card__foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-faint);
}
.card .card__foot .arrow { transition: transform .28s var(--ease); color: var(--accent); }
.card:hover .card__foot .arrow { transform: translateX(5px); }

/* whole-card click target */
.card__link { position: absolute; inset: 0; z-index: 2; }

/* --- card with thumbnail --- */
.card--media { padding: 0; }
.card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-line);
  background: var(--bg-raise);
}
.card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.05) brightness(.82);
  transition: transform .6s var(--ease), filter .5s var(--ease);
}
.card:hover .card__thumb img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.1) brightness(.95);
}
.card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,6,.9), transparent 65%);
}
.card--media .card__body { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }

/* ---------- guide prose ---------- */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px;
  align-items: start;
  padding-bottom: 40px;
}

.prose { max-width: var(--readw); font-size: 16.5px; }
.prose > * { max-width: 100%; }

.prose h2 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  margin: 58px 0 18px;
  padding-top: 22px;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  scroll-margin-top: 92px;
}
.prose h2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.prose h2 .num {
  color: var(--fg-faint);
  font-weight: 400;
  font-size: .68em;
  margin-right: 12px;
  letter-spacing: .06em;
}

.prose h3 {
  font-size: 1.08rem;
  margin: 34px 0 12px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .01em;
  scroll-margin-top: 92px;
}

.prose p { margin: 0 0 18px; color: var(--fg-dim); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose em { color: var(--fg); font-style: italic; }

.prose ul, .prose ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  counter-reset: li;
}
.prose li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--fg-dim);
}
.prose ul > li::before {
  content: '';
  position: absolute; left: 8px; top: .72em;
  width: 7px; height: 7px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: all .25s var(--ease);
}
.prose li:hover::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.prose ol > li::before {
  counter-increment: li;
  content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: 12px; color: var(--accent); font-weight: 700;
  letter-spacing: .04em;
}

.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-line);
  color: var(--cyan);
  word-break: break-word;
}
.prose pre {
  margin: 0 0 22px;
  padding: 18px 20px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--glass-line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--fg); }

.prose hr {
  border: 0; height: 1px; margin: 44px 0;
  background: linear-gradient(90deg, transparent, var(--glass-line-2) 20%, var(--glass-line-2) 80%, transparent);
}

/* --- figures / screenshots --- */
.figure {
  margin: 30px 0;
  position: relative;
}
.figure__frame {
  position: relative;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raise);
  box-shadow: 0 22px 60px -26px rgba(0,0,0,.95);
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.figure__frame::after {
  /* glass sheen across the top */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.075), transparent 42%);
  pointer-events: none;
}
.figure:hover .figure__frame {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,1), 0 0 0 1px rgba(255,34,51,.16);
}
.figure__frame img { width: 100%; }
.figure figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--fg-faint);
  padding-left: 14px;
  border-left: 1px solid var(--accent-line);
  line-height: 1.55;
}
.figure--wide { margin-left: -30px; margin-right: -30px; }
@media (max-width: 900px) { .figure--wide { margin-left: 0; margin-right: 0; } }

/* --- callouts --- */
.callout {
  position: relative;
  margin: 26px 0;
  padding: 20px 22px 20px 24px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.callout__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
  margin-bottom: 10px;
}
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: 15px; }

.callout--tip    { border-left-color: var(--green); }
.callout--tip .callout__label { color: var(--green); }
.callout--warn   { border-left-color: #ffb020; background: rgba(255,176,32,.045); }
.callout--warn .callout__label { color: #ffb020; }
.callout--note   { border-left-color: var(--cyan); }
.callout--note .callout__label { color: var(--cyan); }

/* --- video embed --- */
.embed {
  position: relative;
  margin: 30px 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.embed:hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px rgba(255,34,51,.16); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- data table --- */
.table-wrap {
  margin: 26px 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  overflow-x: auto;
  background: var(--glass);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}
table.data th, table.data td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--glass-line);
  vertical-align: top;
}
table.data th {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 700;
  background: rgba(255,255,255,.028);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .2s var(--ease); }
table.data tbody tr:hover { background: rgba(255,34,51,.055); }
table.data td:first-child { color: var(--fg); font-weight: 700; white-space: nowrap; }
table.data td:last-child { color: var(--fg-dim); }

/* ---------- table of contents ---------- */
.toc {
  position: sticky;
  top: 92px;
  font-size: 13px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-right: 6px;
}
.toc__title {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 14px; font-weight: 700;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--fg-faint);
  border-left: 1px solid var(--glass-line);
  line-height: 1.45;
  transition: all .2s var(--ease);
}
.toc a:hover {
  color: var(--fg);
  border-left-color: var(--accent-line);
  padding-left: 18px;
}
.toc a.is-active {
  color: var(--red-bright);
  border-left-color: var(--accent);
  box-shadow: -1px 0 0 var(--accent);
}
.toc__scroll {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--glass-line);
}
.toc__scroll a { border-left: 0; padding-left: 0; color: var(--fg-faint); }
.toc__scroll a:hover { padding-left: 0; color: var(--fg); }

/* mobile TOC — collapsible details */
.toc-mobile {
  display: none;
  margin: 24px 0 32px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: var(--glass);
  overflow: hidden;
}
.toc-mobile summary {
  padding: 14px 18px;
  cursor: pointer;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); font-weight: 700;
  list-style: none;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after {
  content: '+'; float: right; color: var(--accent); font-size: 16px; line-height: 1;
}
.toc-mobile[open] summary::after { content: '\2212'; }
.toc-mobile ol { list-style: none; margin: 0; padding: 0 18px 16px; }
.toc-mobile a { display: block; padding: 6px 0; color: var(--fg-dim); font-size: 13.5px; }

/* ---------- guide header ---------- */
.guide-head { padding: 70px 0 12px; }
.guide-head h1 {
  font-size: clamp(1.85rem, 5vw, 3.1rem);
  line-height: 1.08; margin: 14px 0 18px; font-weight: 700; letter-spacing: -.02em;
}
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: 12px; color: var(--fg-faint);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--glass-line);
  letter-spacing: .05em;
}
.guide-meta .ver {
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--accent-line);
  color: var(--red-bright);
  background: var(--accent-soft);
  font-size: 11px; font-weight: 700;
}
.guide-meta .sep { color: var(--glass-line-2); }

.hero-shot {
  margin: 34px 0 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.hero-shot img { width: 100%; }
.hero-shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,6,.75), transparent 55%);
  pointer-events: none;
}

/* ---------- search overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(3,3,4,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.overlay.is-open { display: flex; animation: fadeIn .18s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.search-panel {
  width: 100%; max-width: 660px;
  background: rgba(12,12,15,.96);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,1), 0 0 0 1px rgba(255,34,51,.1);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: panelIn .26s var(--ease-out-back);
}
@keyframes panelIn {
  from { transform: translateY(-14px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.search-panel__input {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--glass-line);
}
.search-panel__input svg { width: 18px; height: 18px; color: var(--fg-faint); flex: 0 0 auto; }
.search-panel__input input {
  flex: 1;
  background: none; border: 0; outline: none;
  font: inherit; font-size: 16px; color: var(--fg);
}
.search-panel__input input::placeholder { color: var(--fg-faint); }
.search-panel__input kbd {
  font: inherit; font-size: 10.5px; color: var(--fg-faint);
  padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.05);
}
.search-results { overflow-y: auto; padding: 8px; }
.search-results__empty {
  padding: 34px 20px; text-align: center; color: var(--fg-faint); font-size: 14px;
}
.result {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all .15s var(--ease);
  cursor: pointer;
}
.result:hover, .result.is-selected {
  background: rgba(255,34,51,.07);
  border-color: var(--accent-line);
}
.result__title {
  font-size: 14.5px; color: var(--fg); font-weight: 700; margin-bottom: 4px;
}
.result__title mark { background: none; color: var(--red-bright); }
.result__snippet {
  font-size: 12.8px; color: var(--fg-faint); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.result__snippet mark { background: none; color: var(--red-bright); }
.result__where {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 6px;
}
.result__where .k { color: var(--accent); }

.search-hint {
  padding: 12px 20px;
  border-top: 1px solid var(--glass-line);
  font-size: 11px; color: var(--fg-faint);
  display: flex; gap: 18px; flex-wrap: wrap;
  letter-spacing: .04em;
}
.search-hint span { display: inline-flex; align-items: center; gap: 6px; }
.search-hint kbd {
  font: inherit; font-size: 10px; padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--glass-line); background: rgba(255,255,255,.05);
}

/* ---------- footer ---------- */
.footer {
  margin-top: 70px;
  border-top: 1px solid var(--glass-line);
  background: linear-gradient(to bottom, rgba(5,5,6,.4), rgba(5,5,6,.9));
  position: relative; z-index: 1;
}
.footer__inner {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  padding: 34px 0;
  font-size: 13px; color: var(--fg-faint);
}
.footer__brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--fg-dim);
}
.footer__brand img { width: 26px; height: 26px; border-radius: 6px; }
.footer__links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.footer__links a { color: var(--fg-faint); }
.footer__links a:hover { color: var(--red); }
.footer__note {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--glass-line);
  font-size: 11.5px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  color: #4a4a55;
}

/* ---------- 404 ---------- */
.notfound {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 0;
}
.notfound .big {
  font-size: clamp(4rem, 18vw, 11rem);
  font-weight: 700; line-height: .9; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-line);
  margin: 0 0 10px;
}

/* ---------- reveal & entrance animations ---------- */
/* Elements are only hidden once JS has armed the observer (`html.reveal-armed`),
   so a JS failure or a blocked script can never leave the page blank. */
.reveal {
  --rv-x: 0px;
  --rv-y: 26px;
  --rv-s: 1;
  --rv-blur: 0px;
  --rv-delay: 0s;
}

.reveal-armed .reveal {
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0) scale(var(--rv-s));
  filter: blur(var(--rv-blur));
  transition:
    opacity .8s var(--ease) var(--rv-delay),
    transform .8s var(--ease) var(--rv-delay),
    filter .8s var(--ease) var(--rv-delay);
  will-change: opacity, transform;
}

.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  will-change: auto;
}

/* direction / character variants */
.reveal[data-reveal="left"]  { --rv-x: -36px; --rv-y: 0; }
.reveal[data-reveal="right"] { --rv-x:  36px; --rv-y: 0; }
.reveal[data-reveal="scale"] { --rv-y: 16px; --rv-s: .96; }
.reveal[data-reveal="fade"]  { --rv-y: 0; }
.reveal[data-reveal="blur"]  { --rv-y: 14px; --rv-blur: 10px; }

/* body copy moves less than furniture — subtle, so long pages stay readable */
.reveal[data-reveal="text"]  { --rv-y: 14px; }
.reveal[data-reveal="head"]  { --rv-y: 18px; }

/* explicit stagger tokens (used where JS doesn't assign one) */
.reveal[data-delay="1"] { --rv-delay: .07s; }
.reveal[data-delay="2"] { --rv-delay: .14s; }
.reveal[data-delay="3"] { --rv-delay: .21s; }
.reveal[data-delay="4"] { --rv-delay: .28s; }
.reveal[data-delay="5"] { --rv-delay: .35s; }
.reveal[data-delay="6"] { --rv-delay: .42s; }

/* the progress bar gets a glow pulse as it fills */
.progress { transition: width .1s linear, box-shadow .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .bg-bloom { animation: none; }
  .eyebrow .dot { animation: none; }
  .glitch:hover::before, .glitch:hover::after { animation: none; opacity: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .toc-mobile { display: block; }
}

@media (max-width: 820px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 52px 0 38px; }
  .section { padding: 38px 0; }

  /* --- mobile nav sheet --- */
  .nav {
    position: fixed;
    top: var(--masthead-h, 66px); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 18px 18px;
    background: rgba(8,8,10,.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s var(--ease), opacity .22s var(--ease), visibility .22s;
    max-height: calc(100vh - var(--masthead-h, 66px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 149;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link { padding: 15px 12px; font-size: 15px; border-bottom: 1px solid var(--glass-line); }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--red-bright); }
  .search-trigger { margin: 14px 0 0; justify-content: center; padding: 13px 16px; font-size: 14px; }
  .burger { display: block; }

  /* --- typography scaled for small screens --- */
  .hero h1 { font-size: clamp(1.85rem, 9vw, 2.6rem); line-height: 1.08; }
  .lede { font-size: 15px; }
  .section__head { flex-wrap: wrap; gap: 8px; }
  .section__head .count { margin-left: 0; }
  .btn { padding: 13px 18px; font-size: 13px; }
  .btn-row { gap: 10px; }

  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 20px; }
  .card--media .card__body { padding: 18px 20px 20px; }

  .guide-list { gap: 16px; }
  .guide-head { padding: 38px 0 6px; }
  .guide-head h1 { font-size: clamp(1.55rem, 8vw, 2.1rem); }
  .guide-meta { font-size: 11px; gap: 8px 14px; padding-bottom: 20px; }
  .hero-shot { margin-top: 22px; }

  .prose { font-size: 16px; line-height: 1.72; }
  .prose h2 { font-size: 1.25rem; margin-top: 44px; padding-top: 18px; }
  .prose h2 .num { display: block; margin: 0 0 6px; font-size: .6em; }
  .prose h3 { font-size: 1.02rem; }
  .prose ul > li, .prose ol > li { padding-left: 26px; }
  .prose pre { font-size: 12.5px; padding: 15px 16px; }

  /* figures break out slightly, so screenshots stay legible on a phone */
  .figure--wide { margin-left: -18px; margin-right: -18px; }
  .figure { margin: 24px 0; }
  .embed { aspect-ratio: 16 / 9; }

  .table-wrap { margin: 20px 0; border-radius: var(--radius-sm); }
  table.data { min-width: 460px; font-size: 13px; }
  table.data th, table.data td { padding: 11px 14px; }

  .callout { padding: 16px 18px; }
  .callout p { font-size: 14.5px; }

  .footer__inner { padding: 26px 0; gap: 16px; font-size: 12.5px; }
  .footer__links { margin-left: 0; gap: 16px; }
  .footer__note { justify-content: flex-start; font-size: 11px; }

  .search-panel { max-height: 78vh; }
  .search-panel__input { padding: 15px 16px; font-size: 15px; }
  .search-hint { display: none; }

  /* tap targets: nothing interactive under ~44px */
  .nav__link, .btn, .search-trigger, .result, .toc-mobile summary { min-height: 44px; }
  .result { padding: 14px 14px; }
  .toc-mobile summary { display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 15px; }
  .brand__tag { display: none; }
  .search-trigger .label { display: none; }
  .search-trigger kbd { display: none; }
  .search-trigger { width: 46px; padding: 0; }
  .hero h1 { font-size: clamp(1.7rem, 10vw, 2.3rem); }
  .eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 18px; }
  .guide-row__body { padding: 18px 18px 20px; }
  .guide-row h3 { font-size: 1.08rem; }
  .guide-row p { font-size: 14px; }
  .card h3 { font-size: 1.08rem; }
  .prose { font-size: 15.5px; }
  .prose h2 { font-size: 1.18rem; }
  .notfound .big { -webkit-text-stroke-width: 1px; }
}

/* very small / old phones */
@media (max-width: 360px) {
  .wrap { padding: 0 12px; }
  .hero h1 { font-size: 1.55rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(2, 2, 3, .93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.lightbox.is-open { display: flex; animation: fadeIn .2s var(--ease); }
.lightbox.is-closing { animation: fadeOut .18s var(--ease) forwards; }
@keyframes fadeOut { to { opacity: 0; } }

.lightbox__stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 1);
  background: var(--bg-raise);
  cursor: zoom-out;
  animation: lbIn .28s var(--ease-out-back);
}
.lightbox.is-zoomed { overflow: auto; display: block; padding: 70px 20px 20px; }
.lightbox.is-zoomed .lightbox__stage { max-width: none; max-height: none; }
.lightbox.is-zoomed .lightbox__img {
  max-height: none;
  max-width: none;
  cursor: zoom-in;
  margin: 0 auto;
}
@keyframes lbIn {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.lightbox__caption {
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
  max-width: 68ch;
  line-height: 1.6;
  padding: 0 12px;
}
.lightbox__count {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* controls sit at the viewport edges, clear of the image itself */
.lightbox__btn {
  position: fixed;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(20,20,24,.75);
  border: 1px solid var(--glass-line-2);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), opacity .2s var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 401;
  opacity: 0;              /* faded in by JS once the mouse moves */
}
.lightbox__btn.is-visible { opacity: 1; }
.lightbox__btn:hover, .lightbox__btn:focus-visible {
  background: rgba(255,34,51,.22);
  border-color: var(--accent);
  transform: scale(1.08);
  opacity: 1;
}
.lightbox__btn svg { width: 18px; height: 18px; }

.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev  { left: 18px;  top: 50%; margin-top: -23px; }
.lightbox__next  { right: 18px; top: 50%; margin-top: -23px; }
.lightbox__prev:hover { transform: translateX(-2px) scale(1.06); }
.lightbox__next:hover { transform: translateX(2px) scale(1.06); }

@media (max-width: 700px) {
  .lightbox { padding: 56px 12px 16px; }
  .lightbox__img { max-height: 70vh; }
  .lightbox__btn {
    width: 42px; height: 42px;
    opacity: 1;                       /* no hover on touch — always shown */
    background: rgba(20,20,24,.85);
  }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__prev  { left: 8px;  margin-top: -21px; }
  .lightbox__next  { right: 8px; margin-top: -21px; }
  .lightbox__caption { font-size: 12px; }
}

/* figures become obviously clickable */
.figure__frame[data-zoom] { cursor: zoom-in; }
.figure__frame[data-zoom]::before {
  content: '';
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(5,5,6,.72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f4' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5M11 8v6M8 11h6'/></svg>") center / 18px no-repeat;
  border: 1px solid var(--glass-line-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  z-index: 3;
}
.figure__frame[data-zoom]:hover::before { opacity: 1; }

/* ---------- guides list ---------- */
.guide-list { display: flex; flex-direction: column; gap: 20px; }

.guide-row {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  align-items: center;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), background .35s var(--ease);
}
.guide-row:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--glass-2);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255,34,51,.14);
}
.guide-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--red), var(--magenta), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
  z-index: 3;
}
.guide-row:hover::before { transform: scaleY(1); }

/* The thumbnail is a self-contained 16:9 tile, vertically centred.
   A full-height column would force a portrait box, and object-fit:cover then
   crops most of a landscape screenshot away. Matching the tile to the source
   aspect means nothing is ever cut off. */
.guide-row__thumb {
  position: relative;
  margin: 24px 0 24px 24px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-raise);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  transition: border-color .35s var(--ease);
}
.guide-row:hover .guide-row__thumb { border-color: var(--glass-line-2); }
.guide-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.4) contrast(1.05) brightness(.8);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.guide-row:hover .guide-row__thumb img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.1) brightness(.95);
}
.guide-row__thumb--placeholder {
  display: grid; place-items: center;
  background: linear-gradient(140deg, #0d0d10, #08080a);
}
.guide-row__thumb--placeholder span {
  font-size: 2.6rem; color: var(--accent); opacity: .45; letter-spacing: .1em;
}

.guide-row__body {
  padding: 26px 30px;
  display: flex; flex-direction: column;
  align-self: stretch;
  justify-content: center;
  min-width: 0;
}
.guide-row__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 12px;
}
.guide-row__meta .tag {
  padding: 2px 9px; border-radius: 100px;
  border: 1px solid var(--glass-line-2);
  background: rgba(255,255,255,.03);
}
.guide-row__meta .ver {
  color: var(--red-bright);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.guide-row__meta .sep { color: var(--glass-line-2); }

.guide-row h3 {
  font-size: 1.3rem; margin: 0 0 10px; font-weight: 700;
  line-height: 1.28; letter-spacing: -.01em;
}
.guide-row h3 a { color: var(--fg); }
.guide-row:hover h3 a { color: var(--red-bright); }
.guide-row p {
  margin: 0 0 16px; color: var(--fg-dim); font-size: 14.5px; line-height: 1.65;
  max-width: 70ch;
}
.guide-row__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.guide-row__tags span {
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--glass-line);
  color: var(--fg-faint);
  letter-spacing: .04em;
}
.guide-row__foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-faint);
}
.guide-row__foot .arrow { color: var(--accent); transition: transform .28s var(--ease); }
.guide-row:hover .guide-row__foot .arrow { transform: translateX(5px); }
.guide-row__link { position: absolute; inset: 0; z-index: 2; }

@media (max-width: 860px) {
  .guide-row { grid-template-columns: 1fr; align-items: stretch; }
  .guide-row__thumb {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--glass-line);
    border-radius: 0;
    aspect-ratio: 16 / 9;
  }
  .guide-row__body { padding: 22px 22px 24px; justify-content: flex-start; }
  .guide-row h3 { font-size: 1.15rem; }
}

/* ==========================================================================
   ACCOUNTS AND COMMENTS

   Additive only. Nothing here changes the existing site if the API is absent
   — the modal stays hidden and the comment block stays a heading with an
   empty state.
   ========================================================================== */

.btn--ghost {
  background: transparent;
  border-color: var(--glass-line-2);
}
.btn--ghost:hover { background: var(--glass-2); }

.btn--quiet {
  background: transparent;
  border-color: var(--glass-line);
  color: var(--fg-dim);
  font-weight: 400;
}
.btn--quiet:hover { color: var(--fg); border-color: var(--glass-line-2); box-shadow: none; }

.btn[disabled] { opacity: .6; cursor: default; transform: none; }
.btn[disabled]:hover { transform: none; box-shadow: none; border-color: var(--glass-line-2); }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.linkish:hover { color: var(--red-bright); }

/* ---------- account button in the masthead ---------- */
.account-btn {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  background: var(--glass);
  border: 1px solid var(--glass-line-2);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis;
  transition: all .2s var(--ease);
}
.account-btn:hover { border-color: var(--accent); color: #fff; box-shadow: var(--glow-red); }
/* The account button's label.
   ONE mechanism: the span. The server and the client both write the username
   into it, and nothing else renders text on this element.

   This used to be two mechanisms — the span for signed-out, and
   `::after { content: attr(data-account-name) }` for signed-in. That is what
   produced "echoecho": account.js did `btn.textContent = username`, which
   destroys the span AND leaves a bare text node, while the ::after rule kept
   rendering the attribute beside it. Both painted.

   With the span as the only carrier there is nothing to double up. The failure
   mode of a stray `textContent` assignment is now a correct single label rather
   than two of them, which is the difference between a bug that shows and one
   that does not. */
.account-btn__default { display: inline; }


.account-btn.is-in {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: #fff;
}

/* ---------- modal ---------- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3, 3, 5, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: auth-fade .2s var(--ease);
}
.auth-overlay[hidden] { display: none; }

@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.auth-modal {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 34px 30px 24px;
  background: linear-gradient(180deg, var(--bg-raise), var(--bg-soft));
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), var(--glow-red);
  animation: auth-rise .28s var(--ease);
}

.auth-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--fg-faint);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.auth-close:hover { color: var(--fg); border-color: var(--glass-line-2); }
.auth-close svg { width: 15px; height: 15px; }

.auth-brand { margin-bottom: 22px; }
.auth-brand__eyebrow {
  display: block;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 8px;
}
.auth-title {
  margin: 0;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.01em;
}

.auth-lede {
  margin: 0 0 20px;
  font-size: 14px; line-height: 1.65;
  color: var(--fg-dim);
}
.auth-lede strong { color: var(--fg); word-break: break-all; }

/* ---------- form fields ---------- */
.auth-form { display: block; }
.auth-form[hidden] { display: none; }

.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 7px;
}
.field__opt {
  font-weight: 400; letter-spacing: 0;
  text-transform: none;
  color: var(--fg-faint);
  opacity: .75;
}
.field__wrap { display: block; position: relative; }

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 14px;
  color: var(--fg);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input[aria-invalid="true"] { border-color: var(--red-bright); }

.field__wrap input { padding-right: 62px; }

.field__peek {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  font: inherit; font-size: 11px; letter-spacing: .06em;
  color: var(--fg-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.field__peek:hover { color: var(--fg); border-color: var(--glass-line-2); }

.field__hint {
  display: block;
  margin-top: 7px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--fg-faint);
}
.field__hint--count { text-align: right; }
.field__code {
  text-align: center;
  font-size: 22px !important;
  letter-spacing: .34em;
  padding-left: 22px !important;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- strength meter ---------- */
.pw-meter { display: block; margin-top: 9px; }
.pw-meter__bar {
  display: block; height: 3px;
  background: var(--glass-line);
  border-radius: 2px;
  overflow: hidden;
}
.pw-meter__fill {
  display: block; height: 100%; width: 0;
  background: var(--fg-faint);
  border-radius: 2px;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.pw-meter__fill[data-level="1"] { background: var(--red); }
.pw-meter__fill[data-level="2"] { background: #ff8c1a; }
.pw-meter__fill[data-level="3"] { background: #d8d800; }
.pw-meter__fill[data-level="4"] { background: var(--green); }
.pw-meter__label {
  display: block;
  margin-top: 5px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- live password-match indicator ---------- */
.pw-match {
  display: block;
  min-height: 1.1em;          /* reserve the line so the form does not jump */
  transition: color .2s var(--ease);
}
.pw-match.is-ok { color: var(--green); }
.pw-match.is-bad { color: var(--red-bright); }

/* a leading marker so the state reads without relying on colour alone */
.pw-match.is-ok::before  { content: '✓ '; }
.pw-match.is-bad::before { content: '× '; }

/* ==========================================================================
   TWO-FACTOR
   ========================================================================== */

/* ---------- the QR code ---------- */
.mfa-qr {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
  padding: 12px;
  background: #ffffff;         /* white plate behind the code, regardless of theme */
  border-radius: var(--radius-sm);
  line-height: 0;              /* kill the inline-block gap under the svg */
}
.mfa-qr svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

/* ---------- the manual key ---------- */
.mfa-manual {
  margin-bottom: 18px;
  font-size: 12.5px;
}
.mfa-manual summary {
  cursor: pointer;
  color: var(--fg-dim);
  padding: 6px 0;
}
.mfa-manual summary:hover { color: var(--fg); }
.mfa-manual .field__hint { margin: 4px 0 8px; }

.mfa-secret {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-align: center;
  word-break: break-all;
  color: var(--fg);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius-sm);
  user-select: all;            /* one click selects the whole key */
}

/* recovery codes are longer than six digits, so they need a wider field */
.field__code--wide {
  font-size: 17px !important;
  letter-spacing: .12em !important;
  padding-left: 14px !important;
}

/* ---------- recovery codes list ---------- */
.mfa-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
  padding: 16px;
  list-style: none;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius-sm);
}
.mfa-codes li {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--fg);
  padding: 3px 0;
  user-select: all;
}

.mfa-codes__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.mfa-codes__actions .btn { flex: 1; justify-content: center; }

@media (max-width: 620px) {
  .mfa-codes { grid-template-columns: 1fr; }
  .mfa-qr svg { max-width: 190px; }
}

/* ---------- transient page notice ---------- */
.site-notice {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  z-index: 300;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-raise);
  border: 1px solid var(--glass-line-2);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.site-notice.is-in { opacity: 1; transform: translate(-50%, 0); }

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

/* ---------- messages ---------- */
.auth-msg {
  display: none;
  margin-bottom: 18px;
  padding: 11px 14px;
  font-size: 13px; line-height: 1.55;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--glass-line-2);
  background: var(--glass);
  color: var(--fg-dim);
}
.auth-msg.is-shown { display: block; }
.auth-msg.is-error {
  border-left-color: var(--red);
  background: var(--accent-soft);
  color: var(--fg);
}
.auth-msg.is-info {
  border-left-color: var(--green);
  background: rgba(0, 255, 65, .07);
  color: var(--fg);
}

.auth-alt {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
}
.auth-alt--dim { color: var(--fg-faint); font-size: 12px; }

.auth-foot {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--glass-line);
  font-size: 11.5px; line-height: 1.6;
  color: var(--fg-faint);
  text-align: center;
}

/* ---------- account panel ---------- */
.account-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.account-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-line-2);
}
.account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-info strong { font-size: 15px; color: var(--fg); }
.account-real { font-size: 13px; color: var(--fg-dim); }
.account-since { font-size: 11px; color: var(--fg-faint); letter-spacing: .04em; }

.account-avatar--ph {
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--red-bright);
  font-size: 20px; font-weight: 700;
}

/* ---------- photo upload ---------- */
.account-upload { display: inline-flex; margin-bottom: 8px; }
.account-upload .btn { pointer-events: none; }   /* the label is the target */
.account-upload.is-busy { opacity: .6; }
.account-upload input[type="file"]:focus-visible + .btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.account-upload__status {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-faint);
  min-height: 1em;
}
.account-upload__status.is-ok { color: var(--green); }
.account-upload__status.is-error { color: var(--red-bright); }

html.no-scroll, html.no-scroll body { overflow: hidden; }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments {
  /* Sits inside .wrap like every other section, so the container supplies the
     horizontal gutter. Only vertical rhythm is set here — adding horizontal
     padding would double up on the wrap's and pull the block out of alignment
     with the article above it. */
  margin: 64px 0 0;
  padding-top: 38px;
  border-top: 1px solid var(--glass-line);
}

.comments__head { margin-bottom: 26px; }
.comments__title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 6px;
  font-size: 1.28rem;
  letter-spacing: -.01em;
}
.comments__count {
  font-size: .88rem;
  font-weight: 400;
  color: var(--fg-faint);
}
.comments__sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-faint);
}

.comments__gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 22px;
  margin-bottom: 26px;
  background: var(--glass);
  border: 1px dashed var(--glass-line-2);
  border-radius: var(--radius);
}
.comments__gate[hidden] { display: none; }
.comments__gate p { margin: 0; font-size: 14px; color: var(--fg-dim); }

.comments__form {
  margin-bottom: 34px;
  padding: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
}
.comments__form[hidden] { display: none; }

.comments__who {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--fg-dim);
}
.comments__me {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-line-2);
}
.comments__actions { display: flex; justify-content: flex-end; }

/* ---------- comment list ---------- */
.comments__list { display: flex; flex-direction: column; gap: 4px; }

.comments__empty {
  margin: 0;
  padding: 22px 0;
  font-size: 14px;
  color: var(--fg-faint);
}

.comment {
  padding: 18px 0;
  border-bottom: 1px solid var(--glass-line);
}
.comment:last-child { border-bottom: 0; }

.comment__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.comment__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-line-2);
  flex: none;
}
.comment__avatar--ph {
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--red-bright);
  font-size: 13px; font-weight: 700;
}
.comment__who {
  font-size: 13.5px; font-weight: 700;
  color: var(--fg);
}
.comment__when {
  font-size: 11.5px;
  color: var(--fg-faint);
  letter-spacing: .03em;
}
.comment__body {
  font-size: 14px; line-height: 1.7;
  color: var(--fg-dim);
  white-space: pre-wrap;      /* honour the author's line breaks */
  overflow-wrap: anywhere;    /* a long unbroken string cannot blow the layout */
}
.comment__del {
  margin-top: 8px;
  padding: 0;
  font: inherit; font-size: 11.5px;
  color: var(--fg-faint);
  background: none; border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.comment__del:hover { color: var(--red-bright); }

/* ---------- comment actions (edit / delete) ---------- */
.comment__actions {
  display: flex; gap: 14px;
  margin-top: 8px;
}
.comment__act {
  padding: 0;
  font: inherit; font-size: 11.5px;
  color: var(--fg-faint);
  background: none; border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.comment__act:hover { color: var(--fg); }
.comment__act--danger:hover { color: var(--red-bright); }
.comment__act[disabled] { opacity: .5; cursor: default; }

/* the "edited" marker, shown only when a comment has actually been changed */
.comment__edited {
  font-size: 11px;
  font-style: italic;
  color: var(--fg-faint);
}

/* the in-place edit form */
.comment__edit {
  margin-top: 10px;
}
.comment__edit textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.55;
  color: var(--fg);
  background: var(--glass);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--radius);
  resize: vertical;
}
.comment__edit textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comment__editrow {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
.comment__edithint {
  flex: 1;
  font-size: 12px;
  color: var(--fg-faint);
}

@media (max-width: 620px) {
  .auth-modal { padding: 28px 20px 20px; }
  .comments__gate { flex-direction: column; align-items: flex-start; }
  .comments__gate p { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-overlay, .auth-modal { animation: none; }
}

/* print — a guide someone actually prints out should stay readable */
@media print {
  .bg-fx, .masthead, .toc, .toc-mobile, .progress, .footer, .comments,
  .overlay, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #222; }
  .prose h2, .prose h3 { color: #000; }
  .figure__frame, .embed { border-color: #ccc; box-shadow: none; }
  .figure__frame[data-zoom]::before { display: none; }
  a { color: #000; text-decoration: underline; }
}