/* ===================================================================
   Digital Futurist — Homepage redesign (Concept 3: The Timeline)
   Dark-mode-first, with a light theme. Tokens ported verbatim from the
   Claude Design file (Digital Futurist - Timeline.dc.html).
   Scoped under .df-home so nothing leaks to inner pages.
   =================================================================== */

:root {
  --df-bg:#0e0f12; --df-panel:#14161b; --df-border:#20232a; --df-text:#e9e8e4;
  --df-text2:#c7cad0; --df-muted:#8b8f98; --df-muted2:#9da2ab; --df-dim:#5b6068;
  --df-accent:#5fd0a8; --df-accent-glow:rgba(95,208,168,.28); --df-axis:#3a4048;
  --df-line:#2a2e36; --df-node-ring:#6b7280; --df-chip-border:#2e333c;
  --df-pill-bg:#10211a; --df-pill-border:#1e3a30; --df-sel-bg:#1b1e24; --df-sel-border:#2f5f4d;
  --df-img-bg:#1c1f25; --df-img-hatch:rgba(255,255,255,.035);
}
:root[data-theme="light"] {
  --df-bg:#e8e1d3; --df-panel:#ffffff; --df-border:#e2e3dd; --df-text:#15181d;
  --df-text2:#2c3138; --df-muted:#5f656d; --df-muted2:#6b7178; --df-dim:#9aa0a8;
  --df-accent:#0f9468; --df-accent-glow:rgba(15,148,104,.22); --df-axis:#c2c5bd;
  --df-line:#e2e3dd; --df-node-ring:#b3b9c0; --df-chip-border:#d7d9d2;
  --df-pill-bg:#e6f5ee; --df-pill-border:#bfe6d5; --df-sel-bg:#f0faf5; --df-sel-border:#7fd0ac;
  --df-img-bg:#edefe9; --df-img-hatch:rgba(0,0,0,.04);
}

/* reset (this template bypasses the theme header/footer) */
.df-home *, .df-home *::before, .df-home *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
/* theme-aware root so there's no white flash/gap and plugin-injected
   elements (e.g. the cookie banner) inherit the palette */
html { background:var(--df-bg); color:var(--df-text); font-family:'Space Grotesk', system-ui, sans-serif; transition:background .35s ease, color .35s ease; }
.df-home a { color:inherit; text-decoration:none; }
.df-home img { max-width:100%; display:block; }

.df-home {
  min-height:100vh;
  background:var(--df-bg);
  color:var(--df-text);
  font-family:'Space Grotesk', system-ui, sans-serif;
  transition:background .35s ease, color .35s ease;
  -webkit-font-smoothing:antialiased;
}
.df-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
.df-shell { max-width:1200px; margin:0 auto; }

/* ---- top nav ---- */
.df-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 44px; border-bottom:1px solid var(--df-border); gap:20px;
}
.df-brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.df-brand .df-diamond { color:var(--df-accent); }
.df-navlinks { display:flex; align-items:center; gap:26px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-muted); }
.df-navlinks a:hover { color:var(--df-text); }
.df-navlinks a[aria-current="page"] { color:var(--df-text); }
.df-toggle {
  display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-text);
  background:var(--df-panel); border:1px solid var(--df-chip-border); border-radius:999px;
  padding:6px 13px; cursor:pointer; transition:background .35s ease, border-color .35s ease;
}
.df-toggle:hover { border-color:var(--df-accent); }
.df-toggle .df-toggle-icon { font-size:13px; }

/* ---- hero ---- */
.df-hero { padding:54px 44px 30px; text-align:center; }
.df-pill {
  display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--df-accent);
  border:1px solid var(--df-pill-border); background:var(--df-pill-bg); border-radius:999px;
  padding:6px 14px; margin-bottom:26px;
}
.df-pill .df-blip { width:6px; height:6px; border-radius:50%; background:var(--df-accent); box-shadow:0 0 8px var(--df-accent); }
.df-hero h1 { font-weight:700; font-size:74px; line-height:.98; margin:0 auto; letter-spacing:-.03em; max-width:900px; }
.df-hero-sub { font-size:17px; line-height:1.55; color:var(--df-muted2); max-width:620px; margin:22px auto 0; text-wrap:pretty; }

/* ---- timeline centerpiece ---- */
.df-timeline {
  margin:18px 44px 8px; background:var(--df-panel); border:1px solid var(--df-border);
  border-radius:6px; padding:30px 34px 26px; transition:background .35s ease, border-color .35s ease;
}
.df-timeline-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.df-timeline-head .df-label { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); }
.df-timeline-head .df-hint { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); }

.df-axis-wrap { position:relative; height:236px; margin-top:8px; }
.df-axis { position:absolute; left:0; right:0; top:118px; height:2px;
  background:linear-gradient(90deg,var(--df-border),var(--df-axis) 12%,var(--df-axis) 88%,var(--df-border)); }
.df-tick { position:absolute; top:128px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--df-dim); transform:translateX(-50%); }

/* faint dot for every real entry (density) */
.df-dot { position:absolute; top:118px; width:5px; height:5px; border-radius:50%;
  background:var(--df-node-ring); opacity:.42; transform:translate(-50%,-50%); }

/* labeled milestone node */
.df-node { position:absolute; top:118px; }
.df-node .df-node-dot { position:absolute; top:0; left:0; transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%; background:var(--df-bg); border:2px solid var(--df-node-ring);
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
.df-node .df-node-dot:hover { border-color:var(--df-accent); box-shadow:0 0 10px var(--df-accent-glow); }
.df-node .df-node-conn { position:absolute; width:1px; background:var(--df-line); left:0; }
.df-node .df-node-label { position:absolute; transform:translateX(-50%); text-align:center; width:150px; left:0; }
.df-node .df-node-year { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--df-accent); margin-bottom:3px; }
.df-node .df-node-title { font-size:12.5px; line-height:1.2; color:var(--df-text2); }
.df-node.is-above .df-node-conn { top:-48px; height:48px; }
.df-node.is-above .df-node-label { top:-64px; }
.df-node.is-below .df-node-conn { top:0; height:38px; }
.df-node.is-below .df-node-label { top:42px; }

/* selected node + popover */
.df-node.is-selected .df-node-dot { width:17px; height:17px; background:var(--df-accent);
  border:none; box-shadow:0 0 0 5px var(--df-accent-glow), 0 0 16px var(--df-accent-glow); }
.df-popover { position:absolute; top:54px; left:0; transform:translateX(-50%); width:248px;
  background:var(--df-sel-bg); border:1px solid var(--df-sel-border); border-radius:6px; padding:13px 15px;
  transition:background .35s ease, border-color .35s ease; }
.df-popover .df-pop-year { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-accent); margin-bottom:6px; }
.df-popover .df-pop-title { font-size:15px; font-weight:600; line-height:1.2; margin-bottom:5px; }
.df-popover .df-pop-desc { font-size:12.5px; line-height:1.45; color:var(--df-muted2); }

/* ---- lower split ---- */
.df-split { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; padding:30px 44px 40px; }
.df-entries .df-label { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); margin-bottom:6px; }
.df-entry { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--df-border); }
.df-entry:last-child { border-bottom:none; }
.df-entry:hover .df-entry-title { color:var(--df-accent); }
.df-entry-l { display:flex; gap:18px; align-items:baseline; }
.df-entry-year { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--df-accent); width:38px; flex:none; }
.df-entry-title { font-size:15.5px; transition:color .2s ease; }
.df-entry-arrow { color:var(--df-dim); }

.df-bio { background:var(--df-panel); border:1px solid var(--df-border); border-radius:6px; padding:22px; transition:background .35s ease, border-color .35s ease; }
.df-bio-portrait { aspect-ratio:5/4; background:var(--df-img-bg);
  background-image:repeating-linear-gradient(45deg,var(--df-img-hatch) 0 11px,transparent 11px 22px);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--df-line); border-radius:4px; margin-bottom:16px; overflow:hidden; }
.df-bio-portrait span { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); }
.df-bio-portrait img { width:100%; height:100%; object-fit:cover; }
.df-bio-text { font-size:15px; line-height:1.55; color:var(--df-text2); text-wrap:pretty; }
.df-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.df-tag { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--df-muted2); border:1px solid var(--df-line); border-radius:999px; padding:4px 11px; }

/* ---- footer ---- */
.df-foot { padding:16px 44px; border-top:1px solid var(--df-border); font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- responsive ---- */
@media (max-width:900px) {
  .df-nav { padding:16px 20px; flex-wrap:wrap; }
  .df-navlinks { gap:16px; font-size:10px; }
  .df-hero { padding:40px 20px 24px; }
  .df-hero h1 { font-size:44px; }
  .df-timeline { margin:18px 20px 8px; overflow-x:auto; }
  .df-axis-wrap { min-width:760px; }
  .df-split { grid-template-columns:1fr; padding:26px 20px 34px; }
  .df-foot { padding:16px 20px; }
}