/* ===== @font-face: self-hosted fonts (matches main /style.css) ===== */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; src:url('/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; src:url('/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; src:url('/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; src:url('/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; src:url('/fonts/jost-v20-latin-300.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; src:url('/fonts/jost-v20-latin-regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; src:url('/fonts/jost-v20-latin-500.woff2') format('woff2'); font-display:swap; }

/* Metric-adjusted fallbacks (eliminates CLS on font swap) — matches main /style.css */
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  font-style: normal;
  font-weight: 300 600;
  src: local('Georgia');
  size-adjust: 90.20%;
  ascent-override: 102.43%;
  descent-override: 31.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  font-style: italic;
  font-weight: 300 600;
  src: local('Georgia Italic'), local('Georgia');
  size-adjust: 90.20%;
  ascent-override: 102.43%;
  descent-override: 31.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Jost Fallback';
  font-style: normal;
  font-weight: 300 500;
  src: local('Arial');
  size-adjust: 97.72%;
  ascent-override: 109.49%;
  descent-override: 38.37%;
  line-gap-override: 0%;
}

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

:root {
  /* Photon Fusion tokens */
  --ink:#0d1f3c; --paper:#f2f5f9; --cream:#e4eaf5;
  --gold:#1e40af; --gold-light:#2563eb; --gold-dim:rgba(30,64,175,0.09);
  --muted:#506880; --line:rgba(30,64,175,0.14); --text-body:#1a2d48;
  --serif:'Cormorant Garamond','Cormorant Garamond Fallback',Georgia,'Times New Roman',serif;
  --sans:'Jost','Jost Fallback','Helvetica Neue',Arial,sans-serif;

  /* Diagram stage (dark) */
  --stage:#0b1830; --stage-edge:rgba(120,160,220,0.18);
  --on-stage:#e8eefb; --on-stage-dim:rgba(232,238,251,0.55);

  /* Prose legibility tokens — body copy size/weight/measure (matches main /style.css) */
  --prose-size:    1.05rem;
  --prose-size-sm: 0.95rem;
  --prose-weight:  400;
  --prose-measure: 44rem;
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.6; overflow-x:hidden; }
::selection { background:var(--gold); color:var(--paper); }
a { color:inherit; }

h1,h2,h3 { font-family:var(--serif); font-weight:300; }
h1 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.12; }
h1 em { font-style:italic; color:var(--gold-light); }

.section-label {
  font-size:0.75rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem; display:flex; align-items:center; gap:1rem;
}
.section-label::before { content:''; width:28px; height:1px; background:var(--gold); flex-shrink:0; }

/* ── NAV ── */
header[role="banner"] {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 3rem;
  background:rgba(242,245,249,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-logo {
  font-family:var(--serif); font-weight:400; font-size:1.15rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); text-decoration:none;
}
.nav-back {
  font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem;
  transition:color 0.3s;
}
.nav-back::before { content:'\2190'; transition:transform 0.3s; }
.nav-back:hover { color:var(--gold); }
.nav-back:hover::before { transform:translateX(-4px); }

/* ── INTRO ── */
main { padding-top:6rem; }
.intro { padding:4rem 3rem 2.5rem; max-width:1180px; margin:0 auto; }
.intro h1 { max-width:820px; }
.intro h1 em { white-space:nowrap; }
.intro p {
  margin-top:1.8rem; max-width:var(--prose-measure); font-size:var(--prose-size);
  font-weight:var(--prose-weight); line-height:1.75; color:var(--muted);
}
.breadcrumb {
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.5rem;
}
.breadcrumb a { color:var(--muted); text-decoration:none; transition:color 0.3s; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color:var(--gold); }
.breadcrumb span[aria-hidden="true"] { margin:0 0.6rem; color:var(--line); }
.breadcrumb [aria-current="page"] { color:var(--gold); }

/* ── STAGE ── */
.stage-wrap { padding:0 3rem 1rem; max-width:1180px; margin:0 auto; }
.stage {
  position:relative; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(45,80,150,0.30), transparent 60%),
    radial-gradient(110% 80% at 12% 92%, rgba(40,70,130,0.22), transparent 60%),
    linear-gradient(160deg,#10213f 0%,#0a1730 55%,#081226 100%);
  box-shadow:0 30px 70px -30px rgba(5,15,40,0.55), inset 0 0 0 1px var(--stage-edge);
  padding:1.6rem 1.6rem 1.2rem;
}
/* faint dot-grid texture for depth */
.stage::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:radial-gradient(rgba(140,175,235,0.10) 1px, transparent 1px);
  background-size:26px 26px; mask-image:radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 85%);
}

.stage-head {
  position:relative; z-index:2; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:0.4rem; padding:0 0.4rem;
}
.stage-label {
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--on-stage-dim);
}
.btn-flow {
  font-family:var(--sans); font-size:0.7rem; font-weight:400;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--on-stage);
  background:rgba(120,160,220,0.10); border:1px solid var(--stage-edge);
  padding:0.6rem 1.3rem; border-radius:40px; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.6rem;
  transition:background 0.3s, border-color 0.3s, color 0.3s;
}
.btn-flow:hover, .btn-flow:focus-visible {
  background:rgba(120,160,220,0.20); border-color:rgba(150,185,240,0.5); outline:none;
}
.btn-flow .dot { width:6px; height:6px; border-radius:50%; background:#6aa6ff; box-shadow:0 0 8px #6aa6ff; }
.btn-flow.playing .dot { animation:pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.7);opacity:0.5;} }

.flowmap-scroll { position:relative; z-index:1; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.flowmap { display:block; width:100%; min-width:680px; height:auto; }

/* ── SVG node / edge interaction states ── */
.node { cursor:pointer; }
.node-shape { transition:filter 0.35s ease, opacity 0.35s ease; }
.node-label { font-family:var(--sans); font-weight:500; fill:#fff; letter-spacing:0.04em; }
.node-label.vert { letter-spacing:0.16em; }

.domain { font-family:var(--serif); font-style:italic; font-size:18px; fill:var(--on-stage); }
.domain-arrow { fill:var(--on-stage-dim); }
.bracket { fill:none; stroke-width:1.6; opacity:0.75; }
.bracket.ordered { stroke:#6aa6ff; }
.bracket.disordered { stroke:#ff7a8a; }

.terrain-text { font-family:var(--serif); fill:var(--on-stage); }
.terrain-text .lead { font-style:italic; }

.edge-base { fill:none; stroke-width:2.4; opacity:0.42; }
.edge-flow { fill:none; stroke-width:2.6; stroke-linecap:round; opacity:0.85; }

/* continuous flow (direction = path direction) */
@media (prefers-reduced-motion: no-preference) {
  .edge-flow {
    stroke-dasharray:14 22;
    animation:flow 2.4s linear infinite;
  }
  .edge.is-lit .edge-flow { animation-duration:0.9s; }
}
@keyframes flow { to { stroke-dashoffset:-72; } }

/* dim everything except the focused node + its connections */
.flowmap.dim .node:not(.is-active):not(.is-lit) .node-shape,
.flowmap.dim .node:not(.is-active):not(.is-lit) .node-label,
.flowmap.dim .ungrouped:not(.is-lit) { opacity:0.22; }
.flowmap.dim .edge:not(.is-lit) { opacity:0.12; }
.flowmap .edge { transition:opacity 0.35s ease; }
.flowmap .ungrouped { transition:opacity 0.35s ease; }

.node.is-active .node-shape { filter:drop-shadow(0 0 14px rgba(150,190,255,0.55)) brightness(1.08); }
.node.is-lit   .node-shape { filter:drop-shadow(0 0 9px rgba(150,190,255,0.35)); }
.edge.is-lit .edge-base { opacity:0.5; }
.edge.is-lit .edge-flow { opacity:1; stroke-width:3.2; }

/* ── CAPTION ── */
.caption {
  max-width:1180px; margin:1.4rem auto 0; padding:0 3rem;
  min-height:120px;
}
.caption-inner {
  display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:2.5rem;
  align-items:start; border-top:1px solid var(--line); padding-top:1.8rem;
  transition:opacity 0.25s ease;
}
.caption-name {
  font-family:var(--serif); font-size:1.5rem; line-height:1.2; color:var(--ink);
}
.caption-name .tag {
  display:block; font-family:var(--sans); font-size:0.68rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem;
}
.caption-body { font-size:var(--prose-size); font-weight:var(--prose-weight); line-height:1.75; color:var(--text-body); max-width:620px; }
.caption-body em { font-style:italic; color:var(--gold-light); }

/* ── LEGEND ── */
.legend {
  max-width:1180px; margin:2.5rem auto 0; padding:0 3rem;
  display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; align-items:center;
}
.legend-item { display:flex; align-items:center; gap:0.65rem; font-size:0.78rem; letter-spacing:0.04em; color:var(--muted); }
.legend-swatch { width:26px; height:4px; border-radius:3px; flex-shrink:0; }
.legend-swatch.flow    { background:#8ea6c8; }
.legend-swatch.trigger { background:#ff7a8a; }
.legend-swatch.return  { background:#6aa6ff; }

.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;
}

/* ── BREAKDOWN (static, crawlable duplicate of the interactive captions) ── */
.breakdown { max-width:1180px; margin:3.5rem auto 0; padding:0 3rem; }
.breakdown-heading { font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:0.6rem; }
.breakdown-intro { color:var(--muted); font-size:var(--prose-size); font-weight:var(--prose-weight); line-height:1.75; max-width:var(--prose-measure); margin-bottom:2rem; }
.breakdown-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem; }
.breakdown-grid article { border-top:3px solid var(--line); padding-top:1rem; }
.breakdown-tag {
  display:block; font-family:var(--sans); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.4rem;
}
.breakdown-name { display:block; font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin-bottom:0.5rem; }
.breakdown-grid p { font-size:var(--prose-size-sm); font-weight:var(--prose-weight); line-height:1.7; color:var(--text-body); }
.breakdown-grid p em { font-style:italic; color:var(--gold-light); }
.breakdown-grid p a { color:var(--gold-light); text-decoration:underline; text-underline-offset:2px; }
article.acc-event      { border-top-color:#d98a1f; }
article.acc-unexpected { border-top-color:#c01e3c; }
article.acc-expected   { border-top-color:#0a7d57; }
article.acc-distiller  { border-top-color:#1b46c4; }
article.acc-bda        { border-top-color:#6322c4; }
article.acc-ipb        { border-top-color:#a01bb8; }
article.acc-wardley    { border-top-color:#0a8aa6; }
article.acc-terrain    { border-top-color:#5b6b82; }
@media (max-width:700px){ .breakdown-grid{ grid-template-columns:1fr; } }

/* ── SOURCE ESSAY ── */
.essay { max-width:1180px; margin:3.5rem auto 0; padding:2.8rem 3rem 0; border-top:1px solid var(--line); }
.essay-eyebrow { display:block; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.essay-link { font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.25; color:var(--ink); text-decoration:none; display:inline-flex; align-items:baseline; gap:0.6rem; max-width:760px; transition:color 0.3s; }
.essay-link:hover, .essay-link:focus-visible { color:var(--gold-light); outline:none; }
.essay-arrow { font-family:var(--sans); font-size:0.9em; display:inline-block; transition:transform 0.3s; }
.essay-link:hover .essay-arrow, .essay-link:focus-visible .essay-arrow { transform:translateX(6px); }
.essay-dek { margin-top:0.9rem; font-size:var(--prose-size-sm); font-weight:var(--prose-weight); line-height:1.7; color:var(--muted); max-width:620px; }
@media (max-width:900px){ .essay{ padding-left:1.5rem; padding-right:1.5rem; } }

/* ── FOOTER ── */
footer {
  margin-top:5rem; background:var(--ink); border-top:1px solid rgba(96,165,250,0.15);
  padding:3rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-logo { font-family:var(--serif); font-size:1rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper); }
footer p { font-size:0.78rem; color:rgba(242,245,249,0.5); letter-spacing:0.08em; }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a { font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(242,245,249,0.55); text-decoration:none; transition:color 0.3s; }
.footer-links a:hover, .footer-links a:focus-visible { color:#60a5fa; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  header[role="banner"] { padding:1.1rem 1.5rem; }
  main { padding-top:5rem; }
  .intro, .stage-wrap, .caption, .legend, .breakdown { padding-left:1.5rem; padding-right:1.5rem; }
  .stage { padding:1.1rem 0.9rem 0.8rem; }
  .caption-inner { grid-template-columns:1fr; gap:0.8rem; }
  footer { flex-direction:column; text-align:center; padding:2rem 1.5rem; }
  .footer-links { justify-content:center; flex-wrap:wrap; gap:0.5rem 1.2rem; }
}