/*
  Bitcoin Panic. Baseline stylesheet.
  Dark and light theme variables (toggled by theme.php cookie).
  Cormorant Garamond for headlines, Inter for body, champagne gold accent.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
*/

:root {
  /* Near-black, very slightly cool. Reads like a terminal, not like a void. */
  --ink:        #08090a;
  --ink-2:      #0d0f11;
  --ink-3:      #121417;
  --ink-4:      #191c20;
  --cream:      #e9e7e2;
  --cream-2:    #d3d0c9;
  --cream-soft: rgba(233, 231, 226, 0.72);
  --muted:      #8b8880;
  --line:       rgba(233, 231, 226, 0.09);
  --line-2:     rgba(233, 231, 226, 0.17);
  /* The one warm signal colour. Everything decorative uses this. */
  --gold:       #e39440;
  --gold-2:     #f0ab5e;
  --gold-soft:  rgba(227, 148, 64, 0.16);
  --gold-line:  rgba(227, 148, 64, 0.38);
  /* Reserved. Green and red appear only on figures that describe price
     movement: never on buttons, links, borders or decoration. */
  --up:         #3fbf7f;
  --down:       #ef6a60;
  --down-soft:  rgba(239, 106, 96, 0.38);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --maxw:   1180px;
  --maxw-n: 800px;
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="light"] {
  --ink:        #f6f4ef;
  --ink-2:      #efece4;
  --ink-3:      #e7e3d9;
  --ink-4:      #dedace;
  --cream:      #14130f;
  --cream-2:    #2b2921;
  --cream-soft: rgba(20, 19, 15, 0.76);
  --muted:      #66625a;
  --line:       rgba(20, 19, 15, 0.10);
  --line-2:     rgba(20, 19, 15, 0.20);
  --gold:       #a25a10;
  --gold-2:     #7f4708;
  --gold-soft:  rgba(162, 90, 16, 0.12);
  --gold-line:  rgba(162, 90, 16, 0.34);
  --up:         #14795a;
  --down:       #b3382f;
  --down-soft:  rgba(179, 56, 47, 0.34);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
::selection { background: var(--gold); color: var(--ink); }

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 80px 32px;
}
.content { text-align: center; max-width: 640px; }
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.0;
  margin-bottom: 24px;
}
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--cream);
  margin-bottom: 24px;
}
.status {
  font-size: 0.9rem;
  color: var(--cream-soft);
}

.footer {
  border-top: 1px solid var(--line);
  padding: 40px 32px;
  text-align: center;
  color: var(--cream-soft);
}
.footer__brand {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: 6px;
}
.footer__copy {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.footer__credit {
  font-size: 0.72rem;
  color: var(--muted);
}
.footer__credit a {
  color: var(--cream-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.footer__credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ============================================================
   Bitcoin Panic site stylesheet.
   Composed from the Vibedsites luxury-dark motif: same structural craft
   (whitespace rhythm, serif display, scroll-coupled reveals, considered
   detail), with the champagne accent re-themed to a warm amber signal and a
   monospaced face for anything carrying a number.
   Everything below extends the token block above. No raw hexes: colours come
   from the variables, and green/red are used only on price movement.
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
============================================================ */

html, body { height: auto; min-height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
*::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; display: block; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
ul, ol { list-style: none; }
a { transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }

html, body, .section, .nav, .footer {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}

/* The nav, hero and closing panel are always-dark moments: the ticker is a lit
   instrument and should read that way in either theme. */
[data-theme="light"] .nav,
[data-theme="light"] .hero,
[data-theme="light"] .section--closing,
[data-theme="light"] .footer {
  --ink:        #08090a;
  --ink-2:      #0d0f11;
  --ink-3:      #121417;
  --ink-4:      #191c20;
  --cream:      #e9e7e2;
  --cream-2:    #d3d0c9;
  --cream-soft: rgba(233, 231, 226, 0.72);
  --muted:      #8b8880;
  --line:       rgba(233, 231, 226, 0.09);
  --line-2:     rgba(233, 231, 226, 0.17);
  --gold:       #e39440;
  --gold-2:     #f0ab5e;
  --gold-soft:  rgba(227, 148, 64, 0.16);
  --gold-line:  rgba(227, 148, 64, 0.38);
  --up:         #3fbf7f;
  --down:       #ef6a60;
  --down-soft:  rgba(239, 106, 96, 0.38);
  background-color: var(--ink);
  color: var(--cream);
}

/* Visible focus on everything reachable by keyboard. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.skip-link:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: var(--maxw-n); }
.section { padding: 120px 0; position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section__head { max-width: 720px; margin: 0 0 64px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--gold); }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.lead {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.72;
  color: var(--cream-soft);
  max-width: 62ch;
  margin-top: 20px;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--num { display: flex; align-items: center; gap: 12px; }
.eyebrow__num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--gold); }
.eyebrow__rule { display: block; width: 26px; height: 1px; background: var(--gold-line); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn--solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--solid:hover { background: var(--gold-2); border-color: var(--gold-2); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--small { padding: 11px 20px; font-size: 0.72rem; }
.btn--full { width: 100%; }
.btn__out { font-size: 0.9em; opacity: 0.75; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(8, 9, 10, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 11px 0;
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 32px; }
.nav__logo { display: flex; align-items: baseline; gap: 9px; line-height: 1; }
.nav__logo-mark { font-family: var(--serif); font-size: 1.3rem; color: var(--gold); }
.nav__logo-word {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; color: var(--cream-soft); }
.nav__links a:hover { color: var(--gold); }
.nav__tail { display: flex; align-items: center; gap: 14px; }
.nav__quote {
  display: none;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  color: var(--cream);
}
.nav.is-scrolled .nav__quote { display: inline-flex; }
.nav__quote-label { color: var(--muted); font-size: 0.64rem; letter-spacing: 0.12em; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--cream-soft);
  padding: 0;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); transform: rotate(15deg); }
.theme-toggle svg { width: 15px; height: 15px; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle__sun  { display: none; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 22px; height: 1px; background: var(--cream); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
  background: var(--ink);
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(233,231,226,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,231,226,0.035) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  width: 100%;
}
.hero__headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--cream);
  margin: 0 0 28px;
}
.hero__headline em { color: var(--gold); font-style: italic; }
.hero__sub {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.72;
  color: var(--cream-soft);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  display: flex; justify-content: center;
  padding-top: 8px;
  z-index: 3;
  transition: opacity 0.5s var(--ease);
}
.hero__scroll span { width: 1px; height: 6px; background: var(--gold); animation: scrollPulse 2.2s infinite var(--ease); }
.is-scrolled-past-hero .hero__scroll { opacity: 0; }
@keyframes scrollPulse {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* ---------- Ticker: the live price instrument ---------- */
.ticker {
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink-2) 100%);
  padding: 30px 32px 26px;
  position: relative;
}
.ticker::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
}
.ticker__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ticker__pair { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; color: var(--cream-soft); }
.ticker__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px var(--gold); animation: tickerPulse 3.2s infinite var(--ease); }
.ticker__status[data-state="stale"] .ticker__dot,
.ticker__status[data-state="offline"] .ticker__dot { background: var(--muted); box-shadow: none; animation: none; }
@keyframes tickerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.ticker__price {
  font-family: var(--mono);
  font-size: clamp(2.4rem, 5.2vw, 3.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  margin: 24px 0 4px;
  word-break: break-word;
}
.ticker__pricenote { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 26px; }
.ticker__changes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.ticker__change { padding: 18px 14px 4px 0; border-right: 1px solid var(--line); }
.ticker__change:last-child { border-right: 0; }
.ticker__change dt {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.ticker__change dd {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cream-2);
}
/* The only green and red on the site: figures that describe price movement. */
[data-dir="up"]   { color: var(--up); }
[data-dir="down"] { color: var(--down); }
[data-dir="flat"], [data-dir="none"] { color: var(--cream-2); }

.ticker__foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--muted);
}
.ticker__foot a { color: var(--cream-soft); border-bottom: 1px solid var(--line-2); }
.ticker__foot a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Panic meter ---------- */
.section--meter { background: var(--ink-2); }
.meter { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: center; }
.meter__gauge { position: relative; }
.meter__gauge svg { width: 100%; height: auto; overflow: visible; }
.meter__arc-bg { stroke: var(--line-2); }
.meter__arc-fill { stroke: var(--gold); transition: stroke-dasharray 1.1s var(--ease); }
.meter__tick { stroke: var(--line-2); }
.meter__needle {
  transform-origin: 100px 100px;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter__needle line { stroke: var(--cream); }
.meter__needle circle { fill: var(--gold); }
.meter__scale {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.meter__reading {
  text-align: center;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--cream-soft);
}
.meter__verdict h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 22px;
}
.meter__body { font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.75; color: var(--cream-soft); max-width: 58ch; }
.meter__body + .meter__body { margin-top: 16px; }
.meter__note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}
.meter__note a { color: var(--cream-soft); border-bottom: 1px solid var(--line-2); }
.meter__note a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Crash timeline ---------- */
.crashes { border-top: 1px solid var(--line-2); }
.crash {
  display: grid;
  grid-template-columns: 190px 110px 1fr;
  gap: 26px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
.crash:hover { background: rgba(233, 231, 226, 0.02); }
.crash__when {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.crash__pct {
  font-family: var(--mono);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--down);
  text-align: right;
}
.crash__track { position: relative; }
.crash__bar {
  height: 10px;
  background: linear-gradient(to right, var(--down-soft), var(--down));
  transform-origin: left center;
  transform: scaleX(var(--w, 1));
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.crash__note { margin-top: 9px; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.crashes__foot { margin-top: 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.crashes__foot p { font-size: 0.88rem; color: var(--cream-soft); max-width: 52ch; }

/* ---------- Obituaries ---------- */
.section--obits { background: var(--ink-2); }
.obits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.obit {
  background: var(--ink);
  padding: 42px 34px 34px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease);
}
.obit:hover { background: var(--ink-3); }
.obit__mark { font-family: var(--serif); font-size: 2.6rem; line-height: 0.6; color: var(--gold); margin-bottom: 20px; }
.obit__claim {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.35;
  color: var(--cream);
  margin-bottom: 22px;
  flex: 1;
}
.obit__price {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gold);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-bottom: 12px;
}
.obit__src { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.7; }
.obit__src a { color: var(--cream-soft); border-bottom: 1px solid var(--line-2); }
.obit__src a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.obits__foot {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--cream-2);
  max-width: 60ch;
}

/* ---------- Exchange and platform cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.card__plate {
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  padding: 24px 34px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--ink-4) 0%, var(--ink-3) 100%);
  position: relative;
  overflow: hidden;
}
.card__plate::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-line), transparent);
  opacity: 0.5;
}
/* Exchanges we have no logo file for are set in type. We don't invent logos. */
.card__wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-align: center;
}
.card__est {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Where a real brand logo exists, it sits on a light plate so the brand
   colours stay true instead of being filtered or inverted. */
.card__plate--mark { background: #f6f5f2; padding: 26px 40px; }
.card__plate--mark::after { display: none; }
.card__plate--mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 6px;
}
.card__kicker {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.card__text { font-size: 0.94rem; color: var(--cream-soft); flex: 1; }
.card__facts {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  display: grid;
  gap: 6px;
}
.card__facts div { display: flex; justify-content: space-between; gap: 14px; }
.card__facts span { color: var(--cream-2); text-align: right; }
.card__cta { margin-top: 24px; }

/* ---------- Diversify ---------- */
.section--diversify { background: var(--ink-2); }
.hedge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.hedge__panel { background: var(--ink); padding: 46px 40px 42px; display: flex; flex-direction: column; }
.hedge__figure {
  margin: 0 0 26px;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hedge__figure img { max-height: 132px; width: auto; object-fit: contain; }
.hedge__marks { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 26px; height: 132px; align-items: center; }
.hedge__mark {
  background: #f6f5f2;
  padding: 16px 22px;
  display: grid;
  place-items: center;
  min-width: 150px;
  height: 68px;
}
.hedge__mark img { max-height: 30px; width: auto; }
.hedge__panel h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.12;
  color: var(--cream);
  margin-bottom: 14px;
}
.hedge__panel p { font-size: 0.96rem; color: var(--cream-soft); margin-bottom: 14px; }
.hedge__panel p:last-of-type { flex: 1; }
.hedge__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.disclaimer {
  margin-top: 40px;
  padding: 22px 26px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--cream);
}
.disclaimer strong { font-weight: 600; }

/* ---------- Article teasers ---------- */
.reads { border-top: 1px solid var(--line-2); }
.read {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.read:hover { background: rgba(233, 231, 226, 0.02); padding-left: 10px; }
.read__date { font-family: var(--mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--muted); }
.read__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 8px;
  transition: color 0.3s var(--ease);
}
.read:hover .read__title { color: var(--gold); }
.read__excerpt { font-size: 0.9rem; color: var(--cream-soft); max-width: 62ch; }
.read__arrow { color: var(--gold); font-size: 1.1rem; }

/* ---------- Closing panel ---------- */
.section--closing { background: var(--ink); text-align: center; padding: 130px 0; position: relative; overflow: hidden; }
.section--closing .hero__glow { top: auto; bottom: -55%; opacity: 0.7; }
.section--closing .container { position: relative; z-index: 2; }
.closing__line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 26px;
}
.closing__line em { color: var(--gold); font-style: italic; }
.closing__sub { font-size: 1.02rem; color: var(--cream-soft); max-width: 54ch; margin: 0 auto 38px; }
.closing__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
.notice {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--muted);
  text-align: left;
}
.notice p + p { margin-top: 12px; }
.notice strong { color: var(--cream-2); font-weight: 600; }

/* ---------- Footer (lock-in partial) ---------- */
.footer { padding: 56px 32px 46px; background: var(--ink); border-top: 1px solid var(--line-2); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__brand { font-size: 1.35rem; margin-bottom: 8px; }
.footer__copy { color: var(--muted); margin-bottom: 12px; }
.footer__legal { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; font-size: 0.78rem; }
.footer__legal a { color: var(--cream-soft); }
.footer__legal a:hover { color: var(--gold); }
.footer__legal span { color: var(--muted); }
.footer__credit { max-width: 700px; margin: 0 auto; }

/* ---------- Sub-page chrome ---------- */
.page-head { padding: 165px 0 0; background: var(--ink); }
.page-head__back {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 34px;
}
.page-head__back:hover { color: var(--gold); }
.page-head__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 20px;
}
.page-head__lead {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.72;
  color: var(--cream-soft);
  max-width: 62ch;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-2);
}

/* ---------- Long-form article ---------- */
.article-page { background: var(--ink); padding: 150px 0 110px; min-height: 80vh; }
.article { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.article__head { margin-bottom: 50px; }
.article__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 32px;
}
.article__meta a { color: var(--muted); }
.article__meta a:hover { color: var(--gold); }
.article__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 20px;
}
.article__excerpt {
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--cream-soft);
  margin: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-2);
}
.article__body { font-size: 1rem; line-height: 1.78; color: var(--cream-soft); }
.article__body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  color: var(--cream);
  margin: 58px 0 20px;
}
.article__body h2:first-child { margin-top: 0; }
.article__body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 38px 0 12px;
}
.article__body p { margin: 0 0 20px; }
.article__body strong { color: var(--cream); font-weight: 600; }
.article__body em { font-family: var(--serif); font-style: italic; color: var(--cream); font-size: 1.06em; }
.article__body ul, .article__body ol { margin: 8px 0 26px; padding: 0; counter-reset: article-ol; }
.article__body li { position: relative; padding-left: 30px; margin: 0 0 10px; line-height: 1.68; }
.article__body ul > li::before {
  content: '';
  position: absolute; left: 2px; top: 0.72em;
  width: 9px; height: 1px;
  background: var(--gold);
}
.article__body ol > li { counter-increment: article-ol; }
.article__body ol > li::before {
  content: counter(article-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--gold);
  line-height: 2.2;
}
.article__body a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.article__body a:hover { border-bottom-color: var(--gold); }
.article__body blockquote {
  margin: 28px 0 32px;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  font-size: 1.18rem; line-height: 1.55;
  color: var(--cream);
}
.article__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 26px;
}
.article__lead em { color: var(--gold); font-size: 1em; }
.article__kicker {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--cream-2);
}
.article__takeaways {
  margin: 30px 0 34px;
  padding: 26px 28px;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
}
.article__takeaways h3 { margin-top: 0; }
.article__takeaways ul { margin-bottom: 0; }
.article__takeaways li:last-child { margin-bottom: 0; }
.article__next {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  font-size: 0.9rem;
  color: var(--muted);
}
.article__next a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }

/* ---------- Blog index ---------- */
.blog-index { background: var(--ink); padding: 160px 0 110px; min-height: 80vh; }
.blog-index__inner { max-width: 860px; margin: 0 auto; padding: 0 32px; }
.blog-index__back {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 34px;
}
.blog-index__back:hover { color: var(--gold); }
.blog-index__head { padding-bottom: 30px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.blog-index__head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin-bottom: 14px;
}
.blog-index__sub { color: var(--cream-soft); max-width: 58ch; }
.blog-index__item { border-bottom: 1px solid var(--line); }
.blog-index__item a { display: block; padding: 28px 4px; transition: padding-left 0.35s var(--ease); }
.blog-index__item a:hover { padding-left: 12px; }
.blog-index__date {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 9px;
}
.blog-index__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 8px;
  transition: color 0.3s var(--ease);
}
.blog-index__item a:hover .blog-index__title { color: var(--gold); }
.blog-index__excerpt { font-size: 0.92rem; color: var(--cream-soft); max-width: 62ch; }
.blog-index__empty { color: var(--muted); }

/* ---------- Legal pages ---------- */
.legal { background: var(--ink); padding: 160px 0 110px; min-height: 80vh; max-width: none; margin: 0; }
.legal__container { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.legal__back {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 42px;
}
.legal__back:hover { color: var(--gold); }
.legal h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--cream);
  margin: 0 0 14px;
}
.legal__meta {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  margin: 0 0 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-2);
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--cream);
  margin: 50px 0 16px;
}
.legal h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 32px 0 12px;
}
.legal p, .legal li { color: var(--cream-soft); line-height: 1.75; opacity: 1; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 6px 0 22px; padding: 0; }
.legal li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.legal li::before {
  content: '';
  position: absolute; left: 0; top: 0.72em;
  width: 9px; height: 1px;
  background: var(--gold);
}
.legal a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.legal a:hover { border-bottom-color: var(--gold); }
.legal strong { color: var(--cream); font-weight: 600; }
.legal .legal__note, .legal .legal__promo {
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--ink-2);
  padding: 22px 26px;
  margin: 32px 0;
  font-size: 0.9rem;
  opacity: 1;
}
.legal .legal__note p:last-child, .legal .legal__promo p:last-child { margin-bottom: 0; }
.legal .legal__promo { border-left: 2px solid var(--gold); }

/* ---------- Motion. All of it switches off under prefers-reduced-motion. ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.07s);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

[data-split].reveal { opacity: 1 !important; transform: none !important; }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.word-inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--w, 0) * 0.05s);
  will-change: transform;
}
[data-split].is-in .word-inner { transform: none; opacity: 1; }

/* Crash bars grow from zero once the timeline scrolls into view. */
.crashes .crash__bar { transform: scaleX(0); }
.crashes.is-in .crash__bar { transform: scaleX(var(--w, 1)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-stagger] > *, .word-inner { opacity: 1 !important; transform: none !important; }
  .crashes .crash__bar, .crashes.is-in .crash__bar { transform: scaleX(var(--w, 1)) !important; }
  .meter__needle { transition: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { min-height: auto; padding: 120px 0 70px; }
  .meter { grid-template-columns: 1fr; gap: 40px; }
  .meter__gauge { max-width: 320px; margin: 0 auto; }
  .obits, .cards { grid-template-columns: repeat(2, 1fr); }
  .hedge { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 84px 0; }
  .container { padding: 0 22px; }
  .nav__links { display: none; }
  .nav__quote, .nav.is-scrolled .nav__quote { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { gap: 16px; }
  .nav__tail { margin-left: auto; }
  .nav.is-mobile-open .nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink);
    padding: 26px 22px;
    border-bottom: 1px solid var(--line-2);
    gap: 18px;
    margin-left: 0;
  }
  .obits, .cards { grid-template-columns: 1fr; }
  .ticker { padding: 24px 22px 22px; }
  .crash { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 22px 0; }
  .crash__pct { grid-column: 2; grid-row: 1; }
  .crash__track { grid-column: 1 / -1; }
  .read { grid-template-columns: 1fr; gap: 8px; }
  .read__arrow { display: none; }
  .hedge__panel { padding: 36px 26px 34px; }
  .hedge__figure, .hedge__marks { height: auto; }
  .article-page, .blog-index, .legal { padding-top: 120px; }
  .article { padding: 0 22px; }
  .legal__container, .blog-index__inner { padding: 0 22px; }
  .page-head { padding-top: 130px; }
  .footer { padding: 44px 22px 40px; }
}

/* ---------- Obituary card internals + small corrections ---------- */
[hidden] { display: none !important; }

.obit__label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.obit__figure {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 22px;
}
.obit__claim {
  flex: none;
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--gold-line);
  margin-bottom: 22px;
}
.obit__mark { display: block; margin-bottom: 4px; font-size: 1.8rem; line-height: 0.5; }
.obit__src { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }

/* The needle rotates about the gauge centre in viewBox coordinates. */
.meter__needle { transform-box: view-box; transform-origin: 100px 100px; }

/* Card plate wordmark stack. */
.card__wordmark { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* Inline code used in the privacy policy (cookie and hostname names). */
.legal code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  color: var(--cream-2);
}

/* ---------- No-JavaScript fallback ----------
   The reveal, stagger, word-split and crash-bar rules above start from a
   hidden or zero state and rely on JavaScript adding .is-in. If scripting is
   off, that never happens, so everything below forces the finished state.
   site-header.php adds .js to <html> before any of these sections is parsed. */
html:not(.js) .reveal,
html:not(.js) [data-stagger] > *,
html:not(.js) .word-inner {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .crashes .crash__bar { transform: scaleX(var(--w, 1)) !important; }
html:not(.js) .nav__quote { display: inline-flex; }

/* Read next: internal links at the foot of a page. */
.read-next { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 66ch; border-top: 1px solid var(--line); padding-top: clamp(20px, 3vw, 30px); }
.read-next h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-1, #8a8a8f); margin-bottom: 14px; }
.read-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.read-next li { line-height: 1.6; }
.read-next a { color: var(--gold); border-bottom: 1px solid var(--line); }
.read-next a:hover { border-bottom-color: var(--gold); }