/* ═══════════════════════════════════════════════════════════
   ROG SHAFI — shared design language (Oct 2026 refresh)
   Quiet gallery: light neutral ground, one sans (Archivo) with
   its width axis doing the display work, small tracked caps for
   wayfinding, rounded video tiles, no rules or cards elsewhere.
   Used by every public page; admin shares the same tokens.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Paper surfaces — a cool-leaning off-white, not cream */
  --paper: #f3f2ee;
  --paper-2: #e6e5df;
  --ink: #17171a;
  --ink-2: #2e2e32;
  --muted: #7d7c78;
  --dim: #a7a6a1;
  --line: #dedcd5;
  --line-mid: #c9c7c0;

  /* Ink (dark) surfaces — lightbox, post heroes */
  --d-bg: #111112;
  --d-text: #f1f0ec;
  --d-muted: rgba(241, 240, 236, 0.6);
  --d-dim: rgba(241, 240, 236, 0.36);
  --d-line: rgba(241, 240, 236, 0.16);

  /* Signal */
  --rec: #c73e1d;
  --ok: #3d6b43;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --radius: 10px;
  --gutter: clamp(1rem, 2.2vw, 2rem);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 15px;
}
body.on-ink { background: var(--d-bg); color: var(--d-text); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: var(--ink); color: var(--paper); }
body.on-ink ::selection { background: var(--d-text); color: var(--d-bg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.on-ink :focus-visible { outline-color: var(--d-text); }

/* ── Type ────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-variation-settings: "wdth" 98;
}

/* Small tracked caps — wayfinding and metadata */
.tc {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  font-variation-settings: "wdth" 96;
}
.tc b { font-weight: 500; color: var(--muted); }

/* Section header row */
.rule-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

/* REC dot — live/active signal */
.rec-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rec);
  vertical-align: 2px;
  margin-right: 0.55rem;
}
@media (prefers-reduced-motion: no-preference) {
  .rec-dot.pulse { animation: rec-pulse 2.2s ease-in-out infinite; }
  @keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* ── Fixed three-point nav: links left · wordmark centre · links right ──
   blend-difference so it reads on paper and on dark post heroes. */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  padding: 0 var(--gutter);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.site-nav a { pointer-events: all; }
.site-nav .wordmark {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  text-align: center;
  line-height: 1;
  opacity: 0.95;
  transition: opacity 0.3s var(--ease);
}
.site-nav .wordmark:hover { opacity: 1; }
.site-nav .links { display: flex; gap: 1.75rem; align-items: center; }
.site-nav .links-r { justify-content: flex-end; }
.site-nav .links a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 96;
  opacity: 0.6;
  transition: opacity 0.3s var(--ease);
}
.site-nav .links a:hover,
.site-nav .links a.active { opacity: 1; }
@media (max-width: 640px) {
  .site-nav { height: 56px; }
  .site-nav .links { gap: 1rem; }
  .site-nav .links a { font-size: 0.62rem; letter-spacing: 0.1em; }
  .site-nav .wordmark { font-size: 0.82rem; }
}

/* ── Buttons & inputs ────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.7rem 0.1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-mid);
  color: inherit;
  transition: border-color 0.25s;
  border-radius: 0;
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-bottom-color: var(--ink); }
.on-ink .input { border-bottom-color: var(--d-line); }
.on-ink .input::placeholder { color: var(--d-dim); }
.on-ink .input:focus { border-bottom-color: var(--d-text); }

/* ── Credit footer (journal, kit, list pages) ────────────── */

.credits {
  padding: 3.5rem var(--gutter) 2.5rem;
  text-align: center;
}
.credits .credit-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.credits .credit-links a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.credits .credit-links a:hover { color: var(--ink); }
.credits .colophon {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.on-ink .credits .credit-links a { color: var(--d-muted); }
.on-ink .credits .credit-links a:hover { color: var(--d-text); }
.on-ink .credits .colophon { color: var(--d-dim); }

/* ── Reveal on scroll ────────────────────────────────────── */

.fade-up { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ── Scroll cue ──────────────────────────────────────────── */

.scroll-cue {
  position: absolute;
  bottom: 1.75rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.35;
}
.scroll-cue svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cue-bob 2.6s ease-in-out infinite; }
  @keyframes cue-bob {
    0%, 100% { opacity: 0.2; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.5; transform: translateX(-50%) translateY(5px); }
  }
}