/* ==========================================================================
   CULTURE ATLAS — DISCOVERY CANVAS v1.0
   page.css · layout only. Component appearance lives in components.css;
   raw values live in tokens.css.
   ========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--color-parchment); color:var(--color-text-on-parchment); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); font-weight:450; letter-spacing:-0.012em; margin:0; }
.mono{ font-family:var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; }
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--color-ochre); color:var(--color-parchment);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ===== site header — hidden until scroll, no fold. Appears once, stays. ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(27,36,48,0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-ink-line);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.site-header.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.site-header-inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }

.brand-lockup{display:flex; align-items:center; gap:10px;}
.brand-mark-wrap{ position:relative; width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-mark-wrap svg{width:100%; height:100%; overflow:visible;}
.brand-mark-wrap circle{ transition: r 0.35s var(--ease-out); }
.brand-word{ font-family:var(--font-logo); font-weight:700; font-size:15.5px; color:var(--color-text-on-ink); letter-spacing:-0.01em; white-space:nowrap; }

.header-actions{ display:flex; align-items:center; gap:8px; position:relative; }
.header-icon-btn{
  width:34px; height:34px; border-radius:var(--radius-pill);
  border:1px solid rgba(var(--tint-rgb),0.16); background:none; color:var(--color-text-on-ink-dim);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--t-base) var(--ease-soft); cursor:pointer;
}
.header-icon-btn:hover{ color:var(--color-text-on-ink); border-color:rgba(var(--tint-rgb),0.4); }

.nav-drawer{
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
  background:var(--color-ink); border:1px solid var(--color-ink-line);
  border-radius:var(--radius-sharp); box-shadow:var(--shadow-panel);
  padding:8px; opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.nav-drawer.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-drawer a{
  display:block; padding:10px 12px; font-family:var(--font-body); font-size:13.5px;
  color:var(--color-text-on-ink-dim); border-radius:2px; transition:all var(--t-fast);
}
.nav-drawer a:hover{ color:var(--color-text-on-ink); background:rgba(var(--tint-rgb),0.06); }

/* ===== the mark itself (SVG-level styling, shared by hero + header) ===== */
.tri-node{fill:var(--color-ochre-light);}
.tri-node-center{fill:var(--color-ochre);}
.tri-edge{stroke:var(--color-ochre); stroke-width:1.6; opacity:0.55; fill:none;}
.mark-ring-rotate{transform-box:fill-box; transform-origin:center; animation:markSpin var(--mark-ring-idle-spin) linear infinite;}
@keyframes markSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

/* ===================================================================
   PHASE 1 — CURIOSITY. Symbol -> wordmark -> tagline -> headline -> search.
   Slow, cinematic, deliberate — nothing urgent per the emotional brief.
   =================================================================== */
.hero{
  position:relative;
  background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(181,112,63,0.16), transparent 60%), var(--color-ink);
  color:var(--color-text-on-ink);
  padding: clamp(28px, 5vw, 48px) 24px clamp(48px, 7vw, 76px);
}

/* ---------------------------------------------------------------------
   LIGHT MODE — additive only. Default (no [data-theme="light"]) is
   completely unchanged from today's dark appearance; this only takes
   effect if that attribute is explicitly set somewhere (e.g. once the
   merged homepage or a future toggle applies it). Uses the parchment
   tokens that already existed in tokens.css but were never wired up
   to this section — not new colors, just finishing what was started.
   --------------------------------------------------------------------- */
[data-theme="light"] .hero{
  background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(181,112,63,0.1), transparent 60%), var(--color-parchment);
  color:var(--color-text-on-parchment);
}
[data-theme="light"] .hero-wordmark{ color:var(--color-text-on-parchment); }
[data-theme="light"] .hero-copy h1{ color:var(--color-text-on-parchment); }
[data-theme="light"] .search-box input{ color:var(--color-text-on-parchment); }
[data-theme="light"] .search-box{
  background:var(--color-parchment-dark);
  border-color:var(--color-paper-line);
}
[data-theme="light"] .chip{
  border-color:var(--color-paper-line);
  color:var(--color-text-on-parchment-dim);
  background:rgba(23,18,15,0.02);
}
[data-theme="light"] .chip:hover{
  border-color:var(--color-ochre);
  color:var(--color-text-on-parchment);
  background:rgba(181,112,63,0.1);
}

.mark-stage{ position:relative; width:100%; max-width:130px; aspect-ratio:1/1; margin:0 auto; }
.mark-stage svg{width:100%; height:100%; display:block; overflow:visible;}

.hero-wordmark{
  text-align:center; font-family:var(--font-logo); font-weight:700; font-size:22px;
  color:var(--color-text-on-ink); letter-spacing:-0.01em; margin-top:14px;
  opacity:0; animation: rise 1s var(--ease-out) forwards; animation-delay: 2.2s;
}

.hero-copy{ position:relative; max-width:680px; margin:22px auto 0; text-align:center; }
.eyebrow{
  font-size:var(--fs-eyebrow); color:var(--color-ochre-light); margin-bottom:16px;
  font-family:var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase;
  opacity:0; animation: rise 0.9s var(--ease-out) forwards; animation-delay: 2.5s;
}
.hero-copy h1{
  font-size:var(--fs-h1); line-height:var(--lh-tight); color:var(--color-text-on-ink);
  opacity:0; animation: rise 1s var(--ease-out) forwards; animation-delay: 2.75s;
}
@keyframes rise{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

/* search + chips + toolbar — the quiet invitation, never urgent */
.canvas-controls{ max-width:640px; margin: var(--sp-4) auto 0; opacity:0; animation: rise 0.9s var(--ease-out) forwards; animation-delay: 3.05s; }
.canvas-controls .search-box{ max-width:100%; }
.chip-rail{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px;
  animation:heroContentReveal .3s ease-out .3s both; }
@keyframes heroContentReveal{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.canvas-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; min-height:34px; }
.toolbar-back{ display:none; align-items:center; gap:6px; font-size:var(--fs-label); color:var(--color-text-on-ink-dim); border-bottom:1px solid var(--color-ink-line); padding-bottom:2px; transition:color var(--t-fast);}
.toolbar-back:hover{color:var(--color-text-on-ink);}
.map-toggle-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid rgba(var(--tint-rgb),0.16); background:none; color:var(--color-text-on-ink-dim);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  transition: all var(--t-base) var(--ease-soft); cursor:pointer;
}
.map-toggle-btn svg{flex-shrink:0;}
.map-toggle-btn:hover{color:var(--color-text-on-ink); border-color:var(--color-ochre-light);}

/* ===================================================================
   PHASE 2 — DISCOVERY. The canvas that transforms.
   =================================================================== */
.canvas-wrap{ max-width:1100px; margin: 6px auto 0; scroll-margin-top:76px; }
.canvas{position:relative; min-height:120px; border-radius:var(--radius-sharp);}
.canvas-loading{display:flex; align-items:center; justify-content:center; min-height:260px;}
.loading-pulse{width:14px; height:14px; border-radius:50%; background:var(--color-ochre);
  animation:canvasPulse 1.6s ease-in-out infinite;}
@keyframes canvasPulse{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.3); }
}
.canvas.canvas-flash{ animation: canvasEmphasisFlash 0.9s var(--ease-out); }
@keyframes canvasEmphasisFlash{
  0%{ box-shadow: 0 0 0 0 rgba(181,112,63,0.32); }
  100%{ box-shadow: 0 0 0 18px rgba(181,112,63,0); }
}
.canvas-heading{ font-family:var(--font-body); font-style:italic; font-size:var(--fs-label); color:var(--color-ochre-light); text-align:center; margin-bottom:16px; }
.canvas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }

/* doorway cards (default resting state): reuse .ecard exactly, swap
   Follow for a text-link CTA — see canvas.js DOORWAYS + .card-cta */
.ecard .card-cta{ margin-top:13px; display:inline-block; }

/* entity layer — ONE unified shell: result info top-left, constellation
   index bottom-left, the mark at full size in the right column. The old
   composition was two separate 640px boxes stacked; on desktop that left
   a third of the stage unused and shrank the graph to an icon. */
.entity-layer{max-width:1040px; margin:0 auto;}
.reveal-trail{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:10.5px; color:var(--color-text-on-ink-dim); margin-bottom:16px; justify-content:center;}
.reveal-trail .dot{width:4px; height:4px; border-radius:50%; background:var(--color-ochre-light);}
.entity-shell{
  display:grid; grid-template-columns:minmax(320px,410px) 1fr; grid-template-rows:auto 1fr;
  grid-template-areas:"info graph" "index graph";
  border:1px solid rgba(var(--tint-rgb),0.18); background:rgba(var(--tint-rgb),0.045);
  border-radius:var(--radius-sharp); overflow:hidden; text-align:left;
}
.entity-shell.solo{grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"info"; max-width:640px; margin:0 auto;}
.es-info{grid-area:info; padding:var(--sp-3) var(--sp-3) var(--sp-2);}
.es-index{grid-area:index; padding:var(--sp-2) var(--sp-3) var(--sp-3); align-self:end;}
.es-index .panel-label{text-align:left; margin-bottom:8px;}
.es-graph{grid-area:graph; border-left:1px solid rgba(var(--tint-rgb),0.14);
  padding:var(--sp-3) var(--sp-2) var(--sp-2); display:flex; flex-direction:column;}
.es-graph .panel-label{margin-bottom:2px; font-size:15px; color:var(--color-text-on-ink); letter-spacing:.01em;}
.entity-top{border:1px solid rgba(var(--tint-rgb),0.18); background:rgba(var(--tint-rgb),0.045); border-radius:var(--radius-sharp); padding: var(--sp-3); text-align:left;}
.reveal-type{font-size:10px; color:var(--color-ochre-light); margin-bottom:8px; font-family:var(--font-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase;}
.reveal-title{font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); color:var(--color-text-on-ink); margin-bottom:8px;}
.reveal-desc{font-size:var(--fs-body); color:var(--color-text-on-ink-dim); line-height:var(--lh-loose); margin-bottom:6px;}
.reveal-facts{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px; }
.reveal-fact{ font-size:13px; color:var(--color-text-on-ink-dim); }
.reveal-fact b{ color:var(--color-ochre-light); }
.reveal-fact b.soon{ color:#4fd07a; }
.reveal-actions{ display:flex; align-items:center; gap:12px; margin-top:13px; }
.reveal-actions .follow-btn{ margin-top:0; }
.view-profile-btn{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em;
  padding:8px 15px; border-radius:6px; background:var(--color-ochre); color:#fff;
  text-decoration:none; display:inline-block; }
.view-profile-btn:hover{ background:var(--color-ochre-light); }
.again-link{display:inline-block; margin-top:12px; font-size:var(--fs-label); color:var(--color-ochre-light); border-bottom:1px solid rgba(212,147,79,0.35); transition:opacity var(--t-fast);}
.again-link:hover{opacity:0.7;}

/* connected-through-culture graph — lives inside .entity-shell now */
.panel-label{font-size:var(--fs-eyebrow); color:var(--color-ochre-light); margin-bottom:12px; text-align:center; font-style:italic; font-family:var(--font-body);}
/* aspect-ratio matches the svg viewBox (480/440) so the holder box and the
   painted svg can never diverge. Belt-and-braces alongside the in-svg hit
   targets: this also keeps the HTML labels (still percentage-positioned)
   aligned with the nodes they name. min-height is retained as a floor for
   browsers that ignore aspect-ratio inside a flex column. */
.connected-canvas-holder{position:relative; flex:1; min-height:440px; aspect-ratio:480/440;}
.connected-canvas-holder svg{width:100%; height:100%; display:block;}
/* pointer-events:none is load-bearing, not cosmetic. These labels are
   absolutely-positioned HTML divs appended to the holder AFTER the svg, so
   they paint on top of it. Their box is up to 118px wide and two lines tall,
   and in compact (mobile) mode the orbit tightens from R=130 to R=106 —
   so a label's bounding box overlaps the node it names. Without this rule
   the label silently swallows the tap and the glowing node reads as
   unclickable on phones while working fine on desktop. The labels carry no
   interaction of their own; the in-svg .connected-hit circles own all input. */
.connected-node-label{position:absolute; max-width:118px; font-size:12px; line-height:1.32; pointer-events:none;}
.connected-node-label.self{color:var(--color-text-on-ink); font-weight:600; font-size:13.5px;}
.connected-node-label.self .wl-type{color:var(--color-ochre-light);}
.connected-node-label .wl-type{font-size:9.5px;}

/* the invitation line — this is the engagement trigger, styled as an
   invitation under the mark, not a footnote at the bottom of a list */
.thread-invite{margin:0 auto 8px; max-width:440px; text-align:center;
  font-family:var(--font-body); font-style:italic; font-size:14px; line-height:1.5;
  color:var(--color-ochre-light); animation:inviteBreathe 4.2s var(--ease-soft) infinite;}
.thread-invite::before{content:"✦"; font-style:normal; margin-right:8px;}
@keyframes inviteBreathe{0%,100%{opacity:.72} 50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .thread-invite{animation:none} }

/* Hit targets are now transparent <circle> elements inside the svg, in
   viewBox coordinates — see the note in renderConnectedGraph(). They inherit
   the svg's transform, so they cannot drift away from the node they target
   the way the old absolutely-positioned HTML buttons did. */
.connected-hit{cursor:pointer; outline:none;}
.connected-hit:focus-visible{outline:2px solid var(--color-ochre-light); outline-offset:2px;}
.connected-row:focus-visible{outline:2px solid var(--color-ochre-light); outline-offset:-2px;}

/* ?debug=graph — makes the invisible hit targets visible so a tester can
   see at a glance whether a clickable region sits on top of the node it
   targets. Inert unless the flag set data-graph-debug on the svg. */
svg[data-graph-debug] .connected-hit{
  fill:rgba(64,224,208,0.16);
  stroke:rgba(64,224,208,0.9);
  stroke-width:1;
  stroke-dasharray:3 3;
}
.connected-hint{font-size:12px; color:var(--color-text-on-ink-dim); font-style:italic; margin-top:14px;}
@media (max-width:860px){
  .entity-shell{grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"info" "graph" "index";}
  .es-graph{border-left:none; border-top:1px solid rgba(var(--tint-rgb),0.14); padding:var(--sp-2);}
  .connected-canvas-holder{min-height:380px;}
}

/* the continuous "breathing" glow — lit graph nodes (and the center hub)
   use this so they read as alive, not a one-time entrance effect that's
   easy to miss once it's settled */
.graph-glow{ transform-box:fill-box; transform-origin:center; animation:graphGlowPulse 2.6s ease-in-out infinite; }
@keyframes graphGlowPulse{ 0%,100%{ opacity:0.18; transform:scale(1);} 50%{ opacity:0.4; transform:scale(1.5);} }

.connected-list{ display:flex; flex-direction:column; gap:0; margin-top:2px; }
.connected-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(var(--tint-rgb),0.1); cursor:pointer; transition:opacity var(--t-fast); }
.connected-row:last-child{border-bottom:none;}
.connected-row:not(.self):hover{opacity:0.7;}
.connected-row.self{cursor:default;}
.connected-row-type{ font-size:10px; color:var(--color-ochre-light); flex-shrink:0; width:74px; letter-spacing:.06em; }
.connected-row-title{ font-size:13px; color:var(--color-text-on-ink); font-family:var(--font-body); }
.connected-row.self .connected-row-title{ color:var(--color-text-on-ink-dim); font-style:italic; }
.connected-row.self .connected-row-type{ color:var(--color-ochre); }

.further-section{ margin-top: var(--sp-4); max-width:1040px; margin-left:auto; margin-right:auto; }
.further-intro{ font-size:13px; font-style:italic; color:var(--color-text-on-ink-dim); text-align:center; margin-bottom: var(--sp-3); }
.further-section .connected-list{ max-height:340px; overflow-y:auto; padding-right:4px; }
.further-group-label{ font-size:9.5px; color:var(--color-ochre); margin:14px 0 4px; }
.further-group-label:first-child{ margin-top:0; }

/* map layer (Leaflet) */
.leaflet-map-el{ height:420px; border-radius:var(--radius-sharp); overflow:hidden; border:1px solid rgba(var(--tint-rgb),0.18); filter:sepia(0.06) saturate(0.92) contrast(0.98); }
.leaflet-container{background:var(--color-parchment-dark) !important; font-family:var(--font-body) !important;}
.leaflet-control-zoom a{color:var(--color-text-on-parchment) !important;}
.leaflet-tooltip{font-family:var(--font-body) !important; font-size:12px !important;}
.atlas-pin-dot{ display:block; width:12px; height:12px; border-radius:50%; background:var(--color-ochre); border:2px solid var(--color-parchment); box-shadow:0 2px 6px rgba(0,0,0,0.35); }

/* ---- map type filter chips ---- */
.map-filter-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
.map-filter-chip{ font-size:11.5px; }

/* ---- Leaflet popup, restyled to match the design system instead of
   the default white chrome ---- */
/* Scoped to .map-popup-wrap (the className canvas.js assigns when binding
   the popup) rather than bare .leaflet-popup-* selectors. Two reasons,
   both real problems that were hitting this:
   1. Leaflet's own leaflet.css is loaded AFTER page.css on the homepage,
      so its default .leaflet-popup-content-wrapper{background:white}
      beat our var(--color-ink) at equal specificity. Scoping raises us
      to 0,2,0 so we win no matter the load order.
   2. The homepage has a second, separate map whose popups are styled
      cream via .atlas-popup — unscoped rules here leaked onto it. */
.map-popup-wrap .leaflet-popup-content-wrapper{ background:var(--color-ink); border-radius:var(--radius-sharp); box-shadow:var(--shadow-panel); }
.map-popup-wrap .leaflet-popup-tip{ background:var(--color-ink); }
.map-popup-wrap .leaflet-popup-content{ margin:0; width:auto !important; }
.map-popup-wrap .leaflet-popup-close-button{ color:var(--color-text-on-popup-dim) !important; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{ background:rgba(181,112,63,0.35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div{ background:var(--color-ochre); color:var(--color-parchment); }

/* ---- branded entity card, shown inside the popup ---- */
.map-entity-card{ padding:16px; width:208px; text-align:center; }
.map-entity-card svg{ width:30px; height:30px; display:block; margin:0 auto 10px; }
.map-entity-type{ font-size:9.5px; color:var(--color-ochre-light); margin-bottom:8px; }
.map-entity-title{ font-family:var(--font-display); font-size:16px; color:var(--color-text-on-popup); margin-bottom:8px; line-height:1.25; }
.map-entity-desc{ font-size:11.5px; color:var(--color-text-on-popup-dim); line-height:1.5; margin-bottom:14px; }
.map-entity-actions{ display:flex; flex-direction:column; gap:6px; }
.map-entity-btn{
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  border:1px solid rgba(var(--tint-rgb-on-popup),0.2); background:none; color:var(--color-text-on-popup-dim);
  padding:8px 10px; border-radius:var(--radius-pill); cursor:pointer; transition:all var(--t-base) var(--ease-soft);
}
.map-entity-btn:hover{ color:var(--color-text-on-popup); border-color:var(--color-ochre-light); }
.map-entity-btn.primary{ background:var(--color-ochre); border-color:var(--color-ochre); color:var(--color-parchment); }
.map-entity-btn.primary:hover{ background:var(--color-ochre-light); border-color:var(--color-ochre-light); }
.map-entity-btn.quiet{ border-color:transparent; }
.map-entity-btn.quiet:hover{ border-color:rgba(var(--tint-rgb-on-popup),0.2); }

/* ===================================================================
   TRANSITION ZONE — Phase 2 -> Phase 3
   =================================================================== */
.transition-zone{
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-parchment) 100%);
  padding: var(--sp-4) 24px; text-align:center;
}
.transition-zone span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  color:var(--color-text-on-parchment-dim); opacity:0.7;
}

/* ===================================================================
   PHASE 3 — EDITORIAL HOMEPAGE (Act II)
   =================================================================== */
.editorial{background:var(--color-parchment);}
.editorial-section{ max-width:1120px; margin:0 auto; padding: var(--sp-5) 24px; }
.editorial-section + .editorial-section{ padding-top:0; }
.editorial-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: var(--sp-3); flex-wrap:wrap; }
.editorial-head .eyebrow-static{ font-family:var(--font-mono); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--color-ochre); margin-bottom:10px; }
.editorial-head h2{ font-size:var(--fs-h2); }
.editorial-note{ font-size:var(--fs-body-sm); color:var(--color-text-on-parchment-dim); font-style:italic; max-width:280px; line-height:1.6; }

.spotlight-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px; }
.story-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.hscroll{ display:flex; gap:14px; overflow-x:auto; padding:4px 4px 10px; }
.hscroll::-webkit-scrollbar{height:3px;}
.hscroll::-webkit-scrollbar-thumb{background:var(--color-paper-line-strong);}

footer{ padding: var(--sp-4) 24px var(--sp-3); text-align:center; font-size:12px; line-height:1.7; background:var(--color-ink); color:var(--color-text-on-ink-dim); }
footer a{color:var(--color-ochre-light); border-bottom:1px solid rgba(212,147,79,0.35); transition:opacity var(--t-fast);}
footer a:hover{opacity:0.75;}

/* ===================================================================
   MOBILE — composed intentionally, not a collapsed desktop
   =================================================================== */
@media (max-width:760px){
  .brand-word{font-size:14px;}
  .canvas-grid{grid-template-columns:1fr 1fr;}
  .chip-rail{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:4px; }
  .chip-rail::-webkit-scrollbar{display:none;}
  .chip{flex-shrink:0;}
  .spotlight-grid{ grid-template-columns:1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .editorial-section{ padding: var(--sp-4) 18px; }
  .seasonal-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .leaflet-map-el{ height:340px; }
  .nav-drawer{ min-width:180px; }
}
@media (max-width:520px){
  .canvas-grid{grid-template-columns:1fr;}
  .editorial-section{padding-left:0; padding-right:0;}
  .editorial-section .editorial-head, .editorial-section .editorial-note{padding-left:18px; padding-right:18px;}
  .spotlight-grid, .story-grid{gap:1px;}
  .entity-top{padding: var(--sp-2);}
  .es-info{padding: var(--sp-2);}
  .es-index{padding: 0 var(--sp-2) var(--sp-2);}
  .connected-canvas-holder{min-height:330px;}
  .connected-node-label{max-width:96px; font-size:11px;}
  .thread-invite{font-size:13px;}
  .leaflet-map-el{ height:300px; }
  .header-actions{gap:6px;}
}


/* ============================================================
   SWIPE CARDS v3 — Did You Know + Culture Quiz
   Class prefix: sw-   (no collision with existing styles)
   ============================================================ */
.sw-header{
  display:flex;align-items:baseline;justify-content:space-between;
  max-width:540px;margin:0 auto 12px;
}
.sw-header .canvas-heading{margin:0;}
.sw-counter{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--color-text-on-parchment-dim);white-space:nowrap;
}
[data-theme="dark"] .sw-counter{color:var(--color-text-on-ink-dim);}

.sw-stack{
  position:relative;max-width:540px;margin:0 auto;
  min-height:300px;
}
.sw-card{
  border-radius:14px;
  border:1px solid var(--color-paper-line-strong);
  background:var(--color-parchment);
}
[data-theme="dark"] .sw-card{background:var(--color-ink-soft);border-color:var(--color-ink-line);}

/* peek card sits behind */
.sw-card.sw-peek{
  position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:93%;height:calc(100% + 10px);min-height:280px;
  box-shadow:0 2px 12px -6px rgba(0,0,0,.1);
  z-index:0;pointer-events:none;
}

/* main card */
.sw-card.sw-main{
  position:relative;z-index:1;
  padding:26px 24px 20px;
  min-height:270px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 10px 36px -14px rgba(0,0,0,.2),0 2px 8px -4px rgba(0,0,0,.1);
  transition:transform .24s var(--ease-out),opacity .24s var(--ease-out);
  will-change:transform;user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.sw-card.sw-main:active{cursor:grabbing;}
[data-theme="dark"] .sw-card.sw-main{
  box-shadow:0 10px 36px -14px rgba(0,0,0,.55),0 2px 8px -4px rgba(0,0,0,.25);
}
.sw-card.sw-exit-r{transform:translateX(130%) rotate(14deg)!important;opacity:0!important;}
.sw-card.sw-exit-l{transform:translateX(-130%) rotate(-14deg)!important;opacity:0!important;}

/* eyebrow type label */
.sw-eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);color:var(--color-ochre);
}
/* entity name (fact cards) */
.sw-title{
  font-family:var(--font-display);font-size:clamp(18px,3vw,24px);
  font-weight:450;color:var(--color-text-on-parchment);line-height:1.2;
}
[data-theme="dark"] .sw-title{color:var(--color-text-on-ink);}
/* fact text */
.sw-body{
  font-family:var(--font-body);font-size:var(--fs-body);
  line-height:1.68;color:var(--color-text-on-parchment);flex:1;
}
[data-theme="dark"] .sw-body{color:var(--color-text-on-ink);}

/* three-label guide row */
.sw-guide{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--color-paper-line);
  gap:8px;
}
/* clickable swipe buttons — look like labels, act like actions */
.sw-guide-btn{
  flex:1;padding:7px 10px;border-radius:8px;
  border:1px solid transparent;background:transparent;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.sw-guide-btn.sw-guide-l{
  color:var(--color-text-on-parchment-dim);text-align:left;
}
.sw-guide-btn.sw-guide-r{
  color:var(--color-ochre);text-align:right;
}
.sw-guide-btn.sw-guide-l:hover{
  background:rgba(42,33,24,.06);border-color:var(--color-paper-line);
}
.sw-guide-btn.sw-guide-r:hover{
  background:rgba(181,112,63,.08);border-color:var(--color-ochre);
}
[data-theme="dark"] .sw-guide-btn.sw-guide-l{color:var(--color-text-on-ink-dim);}
[data-theme="dark"] .sw-guide-btn.sw-guide-l:hover{background:rgba(244,236,216,.05);}
[data-theme="dark"] .sw-guide-btn.sw-guide-r:hover{background:rgba(181,112,63,.12);}
.sw-guide-c{
  color:var(--color-text-on-parchment-dim);
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
}
/* "swipe or tap" centrepiece gets the ochre brand colour */
.sw-guide-hint{
  color:var(--color-ochre) !important;
  font-weight:600;
}
[data-theme="dark"] .sw-guide-c{color:var(--color-text-on-ink-dim);}

/* mid-drag label that appears on the card surface */
.sw-inline-label{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);
  opacity:0;transition:opacity .12s;pointer-events:none;font-weight:600;
}
.sw-lbl-l{opacity:1;background:rgba(42,33,24,.08);color:var(--color-text-on-parchment-dim);}
.sw-lbl-r{opacity:1;background:rgba(181,112,63,.15);color:var(--color-ochre);}
[data-theme="dark"] .sw-lbl-l{background:rgba(244,236,216,.08);color:var(--color-text-on-ink-dim);}
[data-theme="dark"] .sw-lbl-r{background:rgba(181,112,63,.2);color:var(--color-ochre-light);}

/* quiz question */
.sw-question{
  font-family:var(--font-body);font-size:var(--fs-body-lg);font-weight:600;
  color:var(--color-text-on-parchment);line-height:1.45;
}
[data-theme="dark"] .sw-question{color:var(--color-text-on-ink);}
/* quiz options */
.sw-opts{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.sw-opt{
  text-align:left;padding:11px 16px;border-radius:8px;
  border:1px solid var(--color-paper-line);background:transparent;
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  color:var(--color-text-on-parchment);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast);
}
[data-theme="dark"] .sw-opt{border-color:var(--color-ink-line);color:var(--color-text-on-ink);}
.sw-opt:hover:not(:disabled){background:rgba(181,112,63,.06);border-color:var(--color-ochre);}
.sw-opt-ok{background:#e5f5ec!important;border-color:#3a9a60!important;color:#1a4d2d!important;font-weight:600;}
.sw-opt-no{background:#fdecea!important;border-color:#c94040!important;color:#7a1c1c!important;}
[data-theme="dark"] .sw-opt-ok{background:#1b3d2a!important;border-color:#4db377!important;color:#8de8b0!important;}
[data-theme="dark"] .sw-opt-no{background:#3d1b1b!important;border-color:#c94040!important;color:#e8947f!important;}
/* quiz explanation */
.sw-expl{
  font-family:var(--font-body);font-size:var(--fs-body-sm);line-height:1.6;
  color:var(--color-text-on-parchment-dim);
  border-left:2px solid var(--color-ochre);padding-left:12px;
  animation:swFadeUp .2s var(--ease-out);
}
[data-theme="dark"] .sw-expl{color:var(--color-text-on-ink-dim);}

/* action strip — appears below the stack */
.sw-action-strip{
  max-width:540px;margin:12px auto 0;
  text-align:center;
  animation:swFadeUp .22s var(--ease-out);
}
.sw-explore-btn{
  display:inline-block;padding:10px 28px;
  border-radius:var(--radius-pill);border:none;
  background:var(--color-ochre);color:var(--color-parchment);
  font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:600;
  cursor:pointer;transition:background var(--t-fast);
  /* entire button surface is the click target — no pointer-events gap */
  position:relative;
}
.sw-explore-btn::after{
  content:" \2192";
  font-size:var(--fs-body-sm);
}
.sw-explore-btn:hover{background:var(--color-ochre-light);}

/* done screen */
.sw-done{
  text-align:center;padding:48px 20px;
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .sw-done{color:var(--color-text-on-ink-dim);}
.sw-done-icon{font-size:28px;color:var(--color-ochre);margin-bottom:12px;}
.sw-restart{
  margin-top:14px;padding:9px 22px;border-radius:var(--radius-pill);
  border:1px solid var(--color-ochre);background:transparent;
  color:var(--color-ochre);font-family:var(--font-body);
  font-size:var(--fs-body-sm);cursor:pointer;
}
@keyframes swFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   CULTURAL CONNECTIONS v3
   ============================================================ */
.conn-wrap{max-width:600px;margin:0 auto;}
.conn-selrow{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;}
.conn-box{
  flex:1;background:var(--color-parchment-dark);
  border:1px solid var(--color-paper-line-strong);
  border-radius:10px;padding:14px 16px;
}
[data-theme="dark"] .conn-box{background:var(--color-ink-soft);border-color:var(--color-ink-line);}
.conn-lbl{font-size:var(--fs-eyebrow);color:var(--color-ochre);margin-bottom:5px;}
.conn-name{
  font-family:var(--font-display);font-size:var(--fs-card-title);
  font-weight:450;color:var(--color-text-on-parchment);
  line-height:1.25;margin-bottom:2px;
}
[data-theme="dark"] .conn-name{color:var(--color-text-on-ink);}
.conn-type{
  font-size:var(--fs-eyebrow);
  color:var(--color-text-on-parchment-dim);margin-bottom:10px;
}
[data-theme="dark"] .conn-type{color:var(--color-text-on-ink-dim);}
.conn-reroll{
  font-size:12.5px;color:var(--color-ochre);
  border:none;background:none;cursor:pointer;padding:0;
  font-family:var(--font-body);
}
.conn-arrow{
  padding-top:28px;font-size:20px;flex-shrink:0;
  color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .conn-arrow{color:var(--color-text-on-ink-dim);}
.conn-result{
  min-height:60px;
  animation:swFadeUp .22s var(--ease-out);
}
.conn-path{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:10px;
}
.conn-node{
  display:flex;flex-direction:column;
  min-width:88px;max-width:165px;
  background:var(--color-parchment-dark);
  border:1px solid var(--color-paper-line);
  border-radius:8px;padding:9px 12px;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast);
}
[data-theme="dark"] .conn-node{background:var(--color-ink-soft);border-color:var(--color-ink-line);}
.conn-node:first-child,.conn-node:last-child{border-color:var(--color-ochre);}
.conn-node:hover{background:rgba(181,112,63,.07);border-color:var(--color-ochre);}
.conn-node-type{font-size:var(--fs-eyebrow);color:var(--color-ochre);margin-bottom:3px;}
.conn-node-name{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  color:var(--color-text-on-parchment);line-height:1.3;
}
[data-theme="dark"] .conn-node-name{color:var(--color-text-on-ink);}
.conn-hop{color:var(--color-text-on-parchment-dim);font-size:16px;}
[data-theme="dark"] .conn-hop{color:var(--color-text-on-ink-dim);}
.conn-degrees{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--color-text-on-parchment-dim);margin-top:4px;
}
[data-theme="dark"] .conn-degrees{color:var(--color-text-on-ink-dim);}
.conn-none{
  padding:24px;text-align:center;font-size:var(--fs-body-sm);
  font-family:var(--font-body);color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .conn-none{color:var(--color-text-on-ink-dim);}
.conn-none-sub{
  margin-top:8px;font-size:10px;font-family:var(--font-mono);
  letter-spacing:.05em;text-transform:uppercase;
}
.conn-empty{
  text-align:center;padding:40px;font-size:var(--fs-body-sm);
  font-family:var(--font-body);color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .conn-empty{color:var(--color-text-on-ink-dim);}

@media(max-width:520px){
  .conn-selrow{flex-direction:column;}
  .conn-arrow{display:none;}
  .sw-card.sw-main{padding:20px 16px;}
  .sw-guide{font-size:9px;}
}

/* ============================================================
   SCRATCH TO REVEAL — chip 3
   Class prefix: sc2-   (no collision with existing sw- or conn-)
   ============================================================ */
/* desktop constraint: scratch elements match swipe card width */
.sc2-outer{
  max-width:560px;margin:0 auto;
}
.sc2-clue{
  background:var(--color-parchment-dark);
  border:1px solid var(--color-paper-line-strong);
  border-radius:14px;padding:20px 22px 18px;
  margin-bottom:14px;
}
[data-theme="dark"] .sc2-clue{
  background:var(--color-ink-soft);border-color:var(--color-ink-line);
}
.sc2-eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);color:var(--color-ochre);
  margin-bottom:8px;
}
.sc2-clue-title{
  font-family:var(--font-body);font-size:var(--fs-body-lg);font-weight:600;
  color:var(--color-text-on-parchment);line-height:1.4;margin-bottom:14px;
}
[data-theme="dark"] .sc2-clue-title{color:var(--color-text-on-ink);}
.sc2-clues{display:flex;flex-direction:column;gap:8px;}
.sc2-clue-row{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  color:var(--color-text-on-parchment);
}
[data-theme="dark"] .sc2-clue-row{color:var(--color-text-on-ink);}
.sc2-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-ochre);flex-shrink:0;
}

/* scratch wrapper — positions answer layer + canvas overlay */
.sc2-wrap{
  position:relative;border-radius:14px;overflow:hidden;
  cursor:crosshair;touch-action:none;
}

/* answer layer — always rendered, revealed by erasing the overlay */
.sc2-answer{
  background:var(--color-ink);
  padding:26px 24px 22px;min-height:190px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  border-radius:14px;
}
.sc2-ans-eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);
  color:rgba(244,236,216,0.5);
}
.sc2-ans-title{
  font-family:var(--font-display);
  font-size:clamp(22px,4vw,30px);font-weight:450;
  color:var(--color-text-on-ink);line-height:1.2;
}
.sc2-ans-desc{
  font-family:var(--font-body);font-size:var(--fs-body-sm);line-height:1.65;
  color:var(--color-text-on-ink-dim);
}
.sc2-ans-cta{
  display:block;align-self:stretch;padding:11px 22px;
  border-radius:var(--radius-pill);border:none;
  background:var(--color-ochre);color:var(--color-parchment);
  font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:600;
  cursor:pointer;transition:background var(--t-fast);margin-top:8px;
  text-align:center;text-decoration:none;
}
.sc2-ans-cta:hover{background:var(--color-ochre-light);color:var(--color-parchment);}

/* success ring flash on full reveal */
.sc2-ring{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  border:2px solid var(--color-ochre);opacity:0;
}
.sc2-ring-show{
  animation:sc2Ring 1.1s var(--ease-out) forwards;
}
@keyframes sc2Ring{0%{opacity:1}100%{opacity:0}}

/* scratch overlay canvas */
.sc2-canvas{
  position:absolute;inset:0;border-radius:14px;
  cursor:crosshair;touch-action:none;display:block;
}

/* status text */
.sc2-status{
  text-align:center;margin-top:10px;
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .sc2-status{color:var(--color-text-on-ink-dim);}

/* nav row */
.sc2-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;
}
.sc2-nav-btn{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  border:1px solid rgba(181,112,63,.4);background:transparent;
  color:var(--color-ochre);padding:7px 14px;border-radius:var(--radius-pill);
  cursor:pointer;transition:all var(--t-fast);
}
.sc2-nav-btn:hover{background:rgba(181,112,63,.08);border-color:var(--color-ochre);}
.sc2-ctr{
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono);
  color:var(--color-text-on-parchment-dim);
}
[data-theme="dark"] .sc2-ctr{color:var(--color-text-on-ink-dim);}