/* Direction 3 — Modern Editorial Dark
   Deep nocturnal palette. Avatars glow against dark background.
   Sans display, serif body. Quiet luxury, technical confidence.
*/

/* ─── Motion guardrails ──────────────────────────────────────────────
   Motion is part of this site's identity, not its feedback layer.
   Read this before adding an animation. If your change doesn't fit,
   either use a transition (UI feedback) or don't add motion at all.

   1. Ambient only. Animations express identity (pulses, halos, drifts).
      Never use animation for hover/click/state feedback — that's what
      transitions are for.

   2. Two eases, share them. Ambient loops: ease-in-out, 4–6s+ period.
      UI transitions: ~200ms, snappy. Don't invent new timings ad-hoc.

   3. Per-page budget: max 2 ambient animations visible at once.
      Wordmark pulse counts as one. Audit before adding a third.

   4. Don't animate running text. Glow/halo around text is OK; opacity
      on body copy is not. Display fragments (the wordmark "on") get
      a pass because they're identity, not content.

   5. Respect prefers-reduced-motion: reduce. Every @keyframes block
      must have a paired @media (prefers-reduced-motion: reduce) rule
      that disables it. No exceptions.

   6. Compositor-only properties: opacity, transform, filter, text-shadow.
      Don't animate width, height, top/left, background-size, or
      box-shadow size — they trigger layout/paint and stutter.
*/


.d3 {
  --bg: #0f1014;
  --bg-card: #161821;
  --bg-elev: #1c1f2a;
  --rule: rgba(255,255,255,0.08);
  --rule-bright: rgba(255,255,255,0.16);
  --text: #e8e6df;
  --text-soft: #a8a59a;
  --text-faint: #85837a;
  --accent: oklch(78% 0.12 70);   /* warm amber glow */
  --accent-deep: oklch(58% 0.15 35);
  --link: oklch(76% 0.07 160);

  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-feature-settings: "ss01";
}

.d3-serif { font-family: 'Source Serif 4', 'Newsreader', Georgia, serif; }
.d3-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Subtle stars / paper-grain */
.d3::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,220,160,0.04) 0%, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(160,180,255,0.03) 0%, transparent 40%);
}

/* Masthead */
.d3-masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: rgba(15,16,20,0.85);
  backdrop-filter: blur(12px);
}
.d3-wordmark {
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
  font-size: 22px;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
  text-decoration: none;
  background: none;
  padding-bottom: 0;
}
.d3-wordmark:hover { background: none; color: var(--accent); }
.d3-wordmark .d3-wordmark-dot { align-self: center; }
.d3-wordmark-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
/* "on" — slow ambient pulse, like a quietly breathing on-air sign */
.d3-wordmark-on {
  font-style: italic;
  font-weight: 400;
  color: oklch(78% 0.12 70 / 0.82);
  letter-spacing: 0.02em;
  margin: 0 2px;
  animation: d3-pulse-on 5.2s ease-in-out infinite;
}
@keyframes d3-pulse-on {
  0%, 100% { opacity: 0.72; text-shadow: 0 0 4px oklch(78% 0.12 70 / 0.18); }
  50%      { opacity: 1;    text-shadow: 0 0 11px oklch(78% 0.12 70 / 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .d3-wordmark-on { animation: none; }
}
/* Legacy <em> rule kept for any markup that still uses it */
.d3-wordmark em {
  font-style: italic;
  color: inherit;
}
.d3-nav {
  display: flex; gap: 26px;
  align-items: center;
  font-size: 13px;
  color: var(--text-soft);
}
.d3-nav a { color: inherit; text-decoration: none; transition: color .15s; }
.d3-nav a:hover { color: var(--text); }
/* Visual divider between content channels (Latest / personas) and meta
   pages (Spec sheet / Field manual). Mono accent slash, low opacity so it
   reads as separator-not-link. */
.d3-nav-sep {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  opacity: 0.55;
  user-select: none;
  margin: 0 -8px;
}

/* Hero */
.d3-hero {
  padding: 80px 56px 56px;
  max-width: 880px; margin: 0 auto;
  text-align: center;
  position: relative;
}
.d3-persona-halo {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 28px;
  background-size: cover; background-position: center;
  position: relative;
}
/* Glow lives on a separate layer so its opacity can pulse independently
   of the avatar's stable border ring. Reserved for primary persona avatars
   (page hero, one per page). Secondary uses get the static halo only. */
.d3-persona-halo::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 3px var(--rule-bright),
    0 0 60px 0 var(--accent),
    0 0 120px -10px var(--accent);
  animation: d3-halo-pulse 5.7s ease-in-out infinite;
  z-index: -1;
}
/* Shared identity pulse: also used by .d3a-hero-portrait::before. */
@keyframes d3-halo-pulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
.d3-persona-halo::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px dashed var(--rule);
}
@media (prefers-reduced-motion: reduce) {
  .d3-persona-halo::before { animation: none; }
}
.d3-persona-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.d3-title {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.d3-dek {
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 640px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.d3-meta {
  display: inline-flex; gap: 18px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.d3-meta-dot { width: 3px; height: 3px; background: var(--text-faint); border-radius: 50%; }

/* Persona ribbon */
.d3-personas {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  background: var(--bg-card);
}
.d3-persona-cell {
  flex: 1;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.d3-persona-cell:last-child { border-right: none; }
.d3-persona-cell:hover { background: var(--bg-elev); }
.d3-persona-cell.active { background: var(--bg-elev); }
.d3-persona-cell.active::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.d3-persona-img {
  width: 38px; height: 38px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 1px solid var(--rule-bright);
  flex-shrink: 0;
}
.d3-persona-text { min-width: 0; }
.d3-persona-text-name {
  font-family: 'Source Serif 4', serif;
  font-size: 15px;
  line-height: 1.15;
  color: var(--text);
}
.d3-persona-text-tag {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  margin-top: 3px;
}

/* Article */
.d3-article {
  max-width: 660px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  font-family: 'Source Serif 4', 'Newsreader', serif;
  font-size: 19px;
  line-height: 1.65;
}
.d3-article p { margin: 0 0 1.1em; text-wrap: pretty; color: var(--text); }
.d3-article p:first-of-type { font-size: 22px; line-height: 1.5; color: var(--text); }
.d3-article h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3em 0 0.6em;
}
.d3-article em { color: var(--text); font-style: italic; }
.d3-article a,
.d3a-intro a,
.d3a-spec a,
.d3a-colophon a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }

.d3-pull {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.3;
  color: var(--text);
  margin: 36px -32px;
  padding: 8px 32px;
  border-left: 2px solid var(--accent);
  text-wrap: balance;
}

/* Accordion */
.d3-acc {
  margin: 28px 0;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
}
.d3-acc summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  user-select: none;
}
.d3-acc summary::-webkit-details-marker { display: none; }
.d3-acc-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-deep);
  padding: 3px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.d3-acc-summary {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  font-size: 14.5px;
}
.d3-acc-chev {
  color: var(--text-faint);
  transition: transform .2s;
}
.d3-acc[open] .d3-acc-chev { transform: rotate(90deg); }
.d3-acc[open] summary { border-bottom: 1px solid var(--rule); }
.d3-acc-body {
  padding: 18px 22px 22px;
  color: var(--text-soft);
}
.d3-acc-body p { margin: 0 0 0.8em; }
.d3-acc-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}
.d3-acc-body pre {
  background: #0a0b0e;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 12px 0;
  color: var(--text);
}
.d3-acc-body pre .c { color: #5a6470; font-style: italic; }
.d3-acc-body pre .k { color: oklch(72% 0.13 30); }
.d3-acc-body pre .s { color: oklch(72% 0.10 140); }

.d3-foot {
  max-width: 660px; margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.d3-foot a { color: var(--text); text-decoration: none; }
.d3-foot a:hover { color: var(--accent); }

/* Jargon tooltip — inline term with dotted underline + hover/focus card */
.d3-term {
  position: relative;
  display: inline;
  color: inherit;
  border-bottom: 1px dotted oklch(78% 0.12 70 / 0.55);
  cursor: help;
  outline: none;
}
.d3-term:hover,
.d3-term:focus-visible {
  border-bottom-color: var(--accent);
}
.d3-term:focus-visible {
  border-radius: 2px;
  box-shadow: 0 0 0 2px oklch(78% 0.12 70 / 0.35);
}
.d3-term::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--rule-bright);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 20;
}
.d3-term:hover::after,
.d3-term:focus-visible::after,
.d3-term.is-open::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .d3-term::after { transition: none; }
}

/* ---------- Responsive ---------- */

/* Stop runaway children (tooltip pseudo-elements, slightly oversized cards on
   home/about) from making the whole page scroll horizontally. Applied to <html>
   because that's the viewport scroll element; `clip` preserves the masthead's
   `position: sticky` context where `hidden` would break it. */
html, body { overflow-x: clip; }

/* Tablet: tighten masthead/hero padding before things start crowding */
@media (max-width: 1000px) {
  .d3-masthead { padding: 18px 28px; }
  .d3-hero { padding: 64px 28px 44px; }
  .d3-title { font-size: 52px; }
}

/* Mobile: stack masthead, scroll-strip the nav and persona ribbon */
@media (max-width: 700px) {
  .d3-masthead {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .d3-wordmark { justify-content: flex-start; font-size: 19px; }

  .d3-nav {
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px 4px;
    white-space: nowrap;
  }
  .d3-nav::-webkit-scrollbar { display: none; }
  .d3-nav a { flex-shrink: 0; }
  .d3-nav-sep { margin: 0 -4px; }

  .d3-hero { padding: 44px 20px 32px; }
  .d3-persona-halo { width: 96px; height: 96px; margin-bottom: 20px; }
  .d3-title { font-size: 38px; line-height: 1.08; margin-bottom: 18px; }
  .d3-dek { font-size: 17px; margin-bottom: 24px; }
  .d3-meta { gap: 12px; flex-wrap: wrap; justify-content: center; }

  .d3-personas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .d3-personas::-webkit-scrollbar { display: none; }
  .d3-persona-cell {
    flex: 0 0 auto;
    min-width: 64vw;
    scroll-snap-align: start;
    padding: 14px 16px;
  }

  .d3-article { padding: 36px 20px 56px; font-size: 18px; }
  .d3-article p:first-of-type { font-size: 20px; }

  .d3-foot {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 32px 20px 56px;
  }

  /* Tooltip — cap width to viewport so terms near the right edge don't render
     off-screen (body overflow-x: clip would hide them otherwise). */
  .d3-term::after {
    max-width: min(280px, calc(100vw - 40px));
  }
}