/* ==========================================================================
   Sreeram K R — portfolio + infrastructure archive
   Shared theme & layout. Theme toggled via <html data-theme> + localStorage.
   Type system: Inter (text + display) / JetBrains Mono (code, labels),
   self-hosted latin subsets in /fonts.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subsets, OFL 1.1) ---------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --bg: #0b0f19;
  --bg-alt: #111827;
  --card: #1a2332;
  --card-hover: #1f2a3d;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --heading: #ffffff;
  --blue: #60a5fa;
  --green: #4ade80;
  --border: #1e293b;
  --radius: 12px;
  /* One vertical scale: 96px between sections, 24px from a heading to its content. */
  --space-section: 96px;
  --space-heading: 24px;
  --tag-bg: rgba(96, 165, 250, 0.08);
  --tag-border: rgba(96, 165, 250, 0.2);
  --diagram-bg: #1a2332;
  --shadow: rgba(0, 0, 0, 0.3);

  /* Signature accent pair (identity) */
  --acc-1: #60a5fa;
  --acc-2: #a78bfa;
  --grad: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  --grad-soft: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(167, 139, 250, 0.1));
  --grain-opacity: 0.028;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --card: #ffffff;
  --card-hover: #f1f5f9;
  --text: #1e293b;
  --text-dim: #64748b;
  --heading: #0f172a;
  --blue: #2563eb;
  --green: #16a34a;
  --border: #e2e8f0;
  --tag-bg: rgba(37, 99, 235, 0.06);
  --tag-border: rgba(37, 99, 235, 0.2);
  --diagram-bg: #f8fafc;
  --shadow: rgba(0, 0, 0, 0.08);
  --acc-1: #2563eb;
  --acc-2: #7c3aed;
  --grad: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  --grad-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(124, 58, 237, 0.05));
  --grain-opacity: 0.04;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1rem;
}

/* Film grain: inline SVG noise, ~3% opacity, zero paint cost after first frame.
   ponytail: tiny data-URI, not an image file — no extra request; upgrade path if
   grain becomes a hero focus: switch to a compressed .webp overlay. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--blue); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); }

/* Accessible focus rings for keyboard users */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible { border-radius: 50%; }

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
/* The home page carries a hero and a full-width diagram, so it uses the screen. */
.container--home { max-width: 1320px; }

/* Typography utilities */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02em;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.site-nav .brand-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.site-nav .links { display: flex; align-items: center; gap: 18px; }
.site-nav .links a {
  color: var(--text-dim); font-size: 0.92em; font-weight: 500;
  position: relative; padding: 2px 0;
}
.site-nav .links a:hover { color: var(--blue); text-decoration: none; }
.site-nav .links a[aria-current="page"] { color: var(--heading); }
.site-nav .links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; border-radius: 2px; background: var(--grad);
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 32px; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--acc-1) 0%, transparent 70%);
  opacity: 0.07;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -140px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--acc-2) 0%, transparent 70%);
  opacity: 0.05;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;   /* the terminal fills the copy column's height */
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.2fr 0.9fr; gap: 44px; }
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 600; color: var(--heading); margin: 0;
  letter-spacing: -0.03em; line-height: 1.06;
}
.hero .subtitle { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--blue); font-weight: 600; margin: 10px 0 18px; letter-spacing: -0.01em; font-family: var(--font-display); }
.hero-now {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 0.86em; color: var(--text-dim);
  margin: 0 0 18px;
}
.hero-now .now-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.14);
  transform: translateY(-1px);
}
.hero .tagline { font-size: clamp(0.98rem, 1.6vw, 1.06rem); color: var(--text-dim); max-width: min(100%, 80ch); line-height: 1.75; }

/* Terminal card (hero visual anchor) */
.terminal {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 50px var(--shadow);
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1.75;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-alt) 60%, var(--card));
}
.terminal-bar .t-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-bar .t-dot:nth-child(1) { background: #f87171; }
.terminal-bar .t-dot:nth-child(2) { background: #fbbf24; }
.terminal-bar .t-dot:nth-child(3) { background: #34d399; }
.terminal-bar .t-title {
  margin-left: auto; color: var(--text-dim); font-size: 0.78em; letter-spacing: 0.02em;
}
.terminal-body { padding: 14px 16px 16px; }
.terminal-body .t-line { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.terminal-body .t-line.t-dim { color: var(--text-dim); }
.terminal-body .t-line.t-ok { color: var(--green); }
.terminal-body .t-prompt { color: var(--acc-1); font-weight: 600; }
.t-caret {
  display: inline-block; width: 8px; height: 15px;
  margin-left: 2px; vertical-align: -2px;
  background: var(--acc-1);
  animation: caret 1.1s steps(2, start) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Stats strip — proof, mono numerals */
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.stat {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--grad-soft), transparent);
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.stat:hover { border-color: color-mix(in srgb, var(--acc-1) 45%, var(--border)); background: var(--card-hover); }
.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.tag {
  display: inline-block; background: var(--tag-bg); border: 1px solid var(--tag-border);
  border-radius: 4px; padding: 4px 10px; font-size: 0.78em; font-weight: 500;
  color: var(--blue); font-family: var(--font-mono);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tag:hover { border-color: var(--acc-1); transform: translateY(-1px); }

/* Links + buttons */
.links-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.links-bar a { color: var(--text-dim); font-size: 0.92em; font-weight: 500; }
.links-bar a:hover { color: var(--blue); text-decoration: none; }
.links-bar .sep { color: var(--border); font-size: 0.85em; user-select: none; }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 8px 16px; font-size: 0.88em; font-weight: 600;
  font-family: var(--font-sans);
  transition: all 0.25s;
  cursor: pointer;
}
.btn-primary {
  background: var(--grad);
  color: #ffffff !important;
  border: 1px solid transparent;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--acc-1) 35%, transparent);
  text-decoration: none;
  filter: brightness(1.08);
}
.btn-ghost {
  background: transparent;
  color: var(--text-dim) !important;
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--heading) !important;
  border-color: color-mix(in srgb, var(--acc-1) 55%, var(--border));
  transform: translateY(-1px);
  text-decoration: none;
}
.copy-email {
  background: none; border: none; color: var(--text-dim);
  font-size: 0.85em; font-family: var(--font-sans); font-weight: 500;
  cursor: pointer; padding: 4px 2px; transition: color 0.2s ease;
}
.copy-email:hover { color: var(--blue); }
.copy-email.copied { color: var(--green); }

/* Sections */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 1.7rem);
  font-weight: 600; color: var(--heading);
  margin: var(--space-section) 0 var(--space-heading);
  display: flex; align-items: center; gap: 14px;
  letter-spacing: -0.02em;
}
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--acc-1), color-mix(in srgb, var(--acc-2) 25%, transparent));
  opacity: 0.7;
}
.section-sub { color: var(--text-dim); font-size: clamp(0.9rem, 1.5vw, 0.97rem); margin: 0 0 var(--space-heading); line-height: 1.7; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px;
  width: 2px; background: var(--border);
}
.timeline li {
  position: relative;
  padding: 0 0 14px 30px;
  transition: background 0.2s ease;
}
.timeline li:hover {
  background: color-mix(in srgb, var(--card) 65%, transparent);
  border-radius: var(--radius);
}
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--border);
  transition: box-shadow 0.2s ease;
}
.timeline li:hover::before { box-shadow: 0 0 0 2px var(--acc-1); }
.timeline li.status-live::before {
  box-shadow: 0 0 0 2px var(--acc-1), 0 0 14px color-mix(in srgb, var(--acc-1) 55%, transparent);
  background: var(--grad);
}
.timeline .tl-num {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 500;
  color: var(--text-dim);
  margin-right: 10px;
  letter-spacing: 0.02em;
}
.timeline .tl-title { font-weight: 600; color: var(--heading); font-family: var(--font-display); transition: color 0.2s ease; }
.timeline li:hover .tl-title { color: var(--acc-1); }
.timeline .tl-gist { color: var(--text-dim); font-size: 0.9em; margin-top: 2px; }
.timeline .tl-status {
  display: inline-block; font-size: 0.68em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle;
}
.tl-status.live { background: rgba(74, 222, 128, 0.12); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.25); }
.tl-status.historical { background: rgba(148, 163, 184, 0.12); color: var(--text-dim); border: 1px solid var(--border); }

/* ---------- Archive layout: content + sticky phase rail ---------- */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
/* Grid items default to min-width:auto, which lets a wide diagram blow the
   column past the viewport on narrow screens. min-width:0 keeps the column
   inside the page and lets .diagram-container scroll instead. */
.archive-content { min-width: 0; }

/* Wide archive layout: cards wide enough for legible diagrams, while the prose
   keeps a comfortable measure (a wide card must not mean 100-character lines).
   Archive page only. */
@media (min-width: 1000px) {
  /* Fully fluid: the archive fills the browser width with proportional gutters.
     Prose keeps its 640px measure; the diagrams use whatever is left. */
  .container--wide {
    max-width: none;
    padding-left: clamp(24px, 3vw, 64px);
    padding-right: clamp(24px, 3vw, 64px);
  }
}
.archive-entry > h3,
.archive-entry > p,
.archive-entry .archive-block { max-width: min(100%, 80ch); }
@media (min-width: 1000px) {
  .archive-layout { grid-template-columns: 190px minmax(0, 1fr); }
}
.phase-rail {
  display: none;
  position: sticky;
  top: 96px;
  align-self: start;
  border-left: 1px solid var(--border);
  padding-left: 4px;
}
@media (min-width: 1000px) { .phase-rail { display: block; } }
.phase-rail a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.phase-rail a:hover { color: var(--blue); text-decoration: none; }
.phase-rail a .pr-num { color: color-mix(in srgb, var(--text-dim) 55%, transparent); }
.phase-rail a.active { color: var(--heading); border-left-color: var(--acc-1); }
.phase-rail a.active .pr-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Archive entries */
/* Sticky nav is 58px tall; keep anchor targets clear of it. */
.archive-entry {
  scroll-margin-top: 72px;
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px 30px;
  margin: 20px 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s ease;
}
.archive-entry:hover {
  border-color: color-mix(in srgb, var(--acc-1) 55%, var(--border));
  box-shadow: 0 14px 40px var(--shadow);
  transform: translateY(-3px);
}
.archive-entry::after {
  content: attr(data-phase);
  position: absolute; right: -16px; bottom: -34px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 7.5rem;
  line-height: 1;
  color: var(--acc-1);
  opacity: 0.045;
  pointer-events: none;
}
.archive-entry > * { position: relative; z-index: 1; }
.archive-entry h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.4vw, 1.3rem); font-weight: 600; color: var(--heading); letter-spacing: -0.02em; }
.archive-entry .archive-tagline { font-size: 0.92em; color: var(--blue); font-weight: 600; margin: 0 0 16px; }
.archive-entry .archive-meta { font-size: 0.82em; color: var(--text-dim); margin: 0 0 16px; font-family: var(--font-mono); }
.archive-entry .archive-block { margin-top: 18px; }
.archive-entry .archive-block h4 {
  margin: 0 0 6px; font-size: 0.78em; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-dim); font-family: var(--font-sans);
}
.archive-entry .archive-block h4::before { content: "› "; color: var(--acc-1); }
.archive-entry .archive-block p { font-size: clamp(0.95rem, 0.28vw + 0.86rem, 1.18rem); color: var(--text-dim); line-height: 1.7; margin: 0; }
.archive-entry .archive-block ul { padding-left: 20px; margin: 6px 0 0; }
.archive-entry .archive-block li { font-size: clamp(0.92rem, 0.26vw + 0.84rem, 1.12rem); color: var(--text-dim); margin-bottom: 6px; line-height: 1.6; }
.archive-entry .archive-block code { font-size: 0.9em; background: rgba(255, 255, 255, 0.04); padding: 1px 5px; border-radius: 3px; }

.diagram-container--home { margin-top: var(--space-section); }
.diagram-container {
  background: var(--diagram-bg);
  border-radius: var(--radius);
  padding: 10px;
  margin: 16px 0 0;
  border: 1px solid var(--border);
  overflow-x: auto;
  position: relative;
}
/* When the frame actually scrolls (set by site.js), show a right-edge fade so
   the hidden part is discoverable instead of silently cut off. */
.diagram-container.is-scrollable::after {
  content: "";
  position: sticky;
  right: 0;
  float: right;
  width: 28px;
  height: 100%;
  margin-left: -28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--diagram-bg));
}
.diagram-container > figcaption {
  margin: 10px 2px 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.diagram-container.is-scrollable {
  -webkit-mask-image: none;
  scrollbar-width: thin;
}

/* ---------- Archify diagram embeds ----------
   Each phase ships a self-contained viewer under /diagrams, embedded with
   ?embed=1 so the title bar, toolbar, zoom bar and summary cards stay out of
   the page. Every frame carries its diagram's own aspect ratio inline, so the
   figure scales with the column and nothing scrolls inside it. */
.diagram-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* fallback; each diagram overrides it */
  border: 0;
  border-radius: 8px;
  background: var(--diagram-bg);
}


/* Footer */
.footer-status {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono); font-size: 0.82em; color: var(--text-dim);
  margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--border);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 16px 0 0; font-size: 0.85em; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--blue); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  display: inline-block;
  box-shadow: 0 0 10px color-mix(in srgb, var(--green) 60%, transparent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Theme toggle */
.theme-toggle {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: 50%;
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); font-size: 1.1em;
  transition: all 0.25s; box-shadow: 0 2px 8px var(--shadow);
  backdrop-filter: blur(8px);
}
.theme-toggle:hover { border-color: var(--acc-1); transform: scale(1.1) rotate(12deg); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle span { position: absolute; transition: opacity 0.25s ease, transform 0.25s ease; }
.theme-toggle .icon-light { opacity: 0; transform: rotate(-60deg); }
.theme-toggle .icon-dark { opacity: 1; transform: rotate(0deg); }
[data-theme="light"] .theme-toggle .icon-light { opacity: 1; transform: rotate(0deg); }
[data-theme="light"] .theme-toggle .icon-dark { opacity: 0; transform: rotate(60deg); }

/* Scroll reveal (transform-only, reduced-motion-safe). Content is never hidden: opacity stays 1.
   Under prefers-reduced-motion the transform is disabled so elements render in place immediately. */
.js-reveal {
  transform: translateY(14px);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms);
}
.js-reveal.is-visible { transform: none; }
@media (max-width: 768px) {
  .hero .subtitle { font-size: 1.05rem; }
  .links-bar .sep { display: none; }
  .timeline li:hover { background: none; }
}
@media (max-width: 640px) {
  .site-nav { padding: 12px 0; }
  .site-nav .links { gap: 12px; }
  .site-nav .links a { font-size: 0.9em; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
}

/* ---------- Layout helpers (replaced inline style attributes) ---------- */
/* Reveal stagger: was an inline --delay on each element. */
.timeline > li:nth-child(1),
.archive-content > .archive-entry:nth-child(1) { --delay: 0ms; }
.timeline > li:nth-child(2),
.archive-content > .archive-entry:nth-child(2) { --delay: 60ms; }
.timeline > li:nth-child(3),
.archive-content > .archive-entry:nth-child(3) { --delay: 120ms; }
.timeline > li:nth-child(4),
.archive-content > .archive-entry:nth-child(4) { --delay: 180ms; }
.timeline > li:nth-child(5),
.archive-content > .archive-entry:nth-child(5) { --delay: 240ms; }
.timeline > li:nth-child(6),
.archive-content > .archive-entry:nth-child(6) { --delay: 300ms; }

.hero--compact { padding-top: 32px; }
.measure { max-width: 720px; }
.timeline + .links-bar { margin-top: 8px; }
.archive-content > .links-bar { margin-top: 16px; }

/* ---------- Reduced motion (single consolidated block) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .t-caret { animation: none; opacity: 0.8; }
  .status-dot { animation: none; }
  .js-reveal { transform: none; transition: none; }
}