/* Note graphics v1 (Signal Mark, Oct 8 2026): hero block + typographic fallback card + note figures.
   APPEND to css/site.css (same file as the subscribe/X/figure chrome). Layout tokens only:
   --bg --bg-elev --ink --body --muted --rule --focus --link (+ --ds-mono from site.css).
   Blood #8B1E1E appears ONLY as --warn and is used by nothing in this file except the optional .ds-fig-warn tag. */
:root{--panel:#0b0b0b;--warn:#8b1e1e;
  --lane-geo:#d4a05c;--lane-solar:#d4bc5a;--lane-climate:#7cb8a0;--lane-neo:#f0f0f0;
  --lane-conflict:#c45048;--lane-fracture:#c4a070;--lane-ai:#8ab0bc}
[data-lane="geo"]{--lane:var(--lane-geo)}[data-lane="solar"]{--lane:var(--lane-solar)}
[data-lane="climate"]{--lane:var(--lane-climate)}[data-lane="neo"]{--lane:var(--lane-neo)}
[data-lane="conflict"]{--lane:var(--lane-conflict)}[data-lane="fracture"]{--lane:var(--lane-fracture)}
[data-lane="ai"]{--lane:var(--lane-ai)}

/* ---------- HERO (one per note, after .note-lede) ---------- */
.ds-hero{margin:0 0 1.5rem;padding:0}
.ds-hero-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-elev);border:1px solid var(--rule)}
.ds-hero-frame picture{display:block;width:100%;height:100%}
.ds-hero-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.ds-hero figcaption{margin:.5rem 0 0;display:flex;flex-direction:column;gap:.18rem}
.ds-hero-cap{font-size:.86rem;line-height:1.45;color:var(--body);max-width:40em}
/* credit line: mono, small, muted, links to the source page. Format: IMAGE: <Credit> · <license> */
.ds-credit{font-family:var(--ds-mono);font-size:.7rem;line-height:1.5;letter-spacing:.02em;color:var(--muted);overflow-wrap:anywhere}
.ds-credit a{color:var(--muted);text-decoration:underline 1px;text-underline-offset:.18em}
.ds-credit a:hover,.ds-credit a:focus-visible{color:var(--ink)}
.ds-credit a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:639px){
  .ds-hero{margin-inline:-1rem}                       /* full-bleed inside .wrap's 1rem gutter */
  .ds-hero-frame{aspect-ratio:4/3;border-inline:0}
  .ds-hero figcaption{padding-inline:1rem}
}

/* ---------- FALLBACK: typographic hero card (no licensed image exists) ---------- */
.ds-hero-card .ds-hero-frame{border-top:2px solid var(--lane,var(--rule));
  background:var(--bg-elev) repeating-linear-gradient(0deg,transparent 0 31px,#161616 31px 32px)}
.ds-card-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1rem,4vw,1.75rem)}
.ds-card-eyebrow{margin:0 0 auto;font-family:var(--ds-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ds-card-eyebrow::before{content:"";display:inline-block;width:3px;height:.85em;margin-right:.55em;vertical-align:-.1em;background:var(--lane,var(--muted))}
.ds-card-readout{margin:0;font-family:var(--ds-mono);font-weight:600;font-size:clamp(2.4rem,9vw,4.25rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ds-card-readout span{font-size:.38em;letter-spacing:.12em;color:var(--muted);margin-left:.35em}
.ds-card-sub{margin:.55rem 0 0;font-family:var(--ds-mono);font-size:.78rem;letter-spacing:.04em;color:var(--body)}

/* ---------- NOTE FIGURES (extend the built .ds-figure from site.css) ---------- */
.note-page .ds-figure{margin:1.4rem 0 1.9rem}
.ds-figure picture{display:block}
.note-page .ds-fig-source{font-family:var(--ds-mono);font-size:.7rem;letter-spacing:.02em;line-height:1.5}
.note-page .ds-figure .ds-fig-label::before{content:"";display:inline-block;width:3px;height:.85em;margin-right:.5em;vertical-align:-.1em;background:var(--lane,var(--muted))}
/* official product frame: NHC cone, SUVI, USGS ShakeMap … shown AS ISSUED, never cropped or recoloured */
.ds-figure--official .ds-fig-frame{display:flex;justify-content:center;padding:.75rem;background:var(--panel)}
.ds-figure--official .ds-fig-frame img{width:auto;max-width:100%;max-height:36rem;height:auto;background:#fff}
/* interactive point map (js/note-map.js) inside a figure */
.ds-figure--map .note-map{border:0;height:22rem}
@media (min-width:640px){.ds-figure--map .note-map{height:26rem}}
/* optional: a warning tag inside a caption. Blood is a fill with ink text (blood text fails contrast). */
.ds-fig-warn{display:inline-block;margin-right:.45em;padding:.05em .4em;background:var(--warn);color:var(--ink);font-family:var(--ds-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
/* wide data graphics (maps/charts made at 1600x900): break out of the 44rem note column to the right on desktop
   so 1600px-designed type renders at >=0.6 scale. Not for heroes or official-product frames. */
@media (min-width:1100px){.note-page .ds-figure--wide{width:min(62rem,calc(100vw - 4rem));max-width:none}}
/* key facts, mobile (template change for the backfill pack, Oct 8 2026): under 640px the box shows the first 6
   fact rows, the rest sit in a native <details> "All facts (N)". At 640px and up every row shows in one grid, as before
   (the <details> and its second <dl> collapse into the first grid; no summary). Emitted by notehtml_lib.cap_facts(). */
.note-facts-more>summary{cursor:pointer;list-style:none;margin-top:-1px;padding:.6rem .85rem;border:1px solid var(--rule);background:var(--bg-elev);font-family:var(--ds-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.note-facts-more>summary::-webkit-details-marker{display:none}
.note-facts-more>summary::after{content:" +";color:var(--muted)}
.note-facts-more[open]>summary::after{content:" \2212"}
.note-facts-more>dl{border-top:0}
@media (min-width:640px){
  .note-facts:has(>.note-facts-more){display:grid;grid-template-columns:repeat(auto-fill,minmax(10.25rem,1fr));border:1px solid var(--rule);background:var(--bg-card)}
  .note-facts:has(>.note-facts-more) dl,.note-facts-more,.note-facts-more::details-content{display:contents}
  .note-facts-more>summary{display:none}
}
.ds-hero-card .ds-hero-frame{aspect-ratio:auto;min-height:0}
.ds-hero-card .ds-card-inner{position:static;justify-content:flex-start;padding:clamp(1rem,4vw,1.5rem) clamp(1rem,4vw,1.75rem) clamp(1.1rem,4vw,1.6rem)}
.ds-hero-card .ds-card-eyebrow{margin:0 0 1.25rem}