/* =========================================================
   CAL HARLEY DESIGN SYSTEM — foundations
   Aged parchment + candlelight. Arcane editorial typography.
   ========================================================= */

/* ---------- WEBFONTS (Google) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=La+Belle+Aurore&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;600;700&family=Kalam:wght@400;700&family=IM+Fell+DW+Pica:ital@0;1&display=swap');

/* ---------- TOKENS ---------- */
:root {
  /* Aged parchment surfaces */
  --paper:        #e8dcc8;  /* primary background */
  --paper-2:      #ddd0b8;  /* secondary surface, nav scroll */
  --paper-deep:   #cfc2a6;  /* borders, recessed areas */

  /* Ink — warm purple-black, never pure */
  --ink:          #110e1a;  /* primary body text */
  --ink-2:        #1a1626;
  --ink-soft:     #2a2438;  /* secondary body */
  --ink-dim:      #6b6080;  /* captions, metadata */
  --muted:        #8a7e9a;

  /* Night — deep blue-violet, never pure black */
  --night:        #0a0812;  /* dark section primary */
  --night-2:      #12101e;  /* dark surface */
  --night-3:      #1c1830;  /* dark cards */
  --night-text:   #e4d9c0;  /* text on dark */
  --night-dim:    #8a829e;  /* muted on dark */

  /* Accents */
  --candlelight:    #c9982a;  /* primary gold — dots, borders, CTA */
  --candlelight-2:  #daa830;  /* gold on dark, em text */
  --candlelight-d:  #7b5a22;  /* deep gold, em text on light */
  --arcane:         #7b4fbf;  /* depth violet — gradients, rare highlights */
  --ember:          #c96a2a;  /* warm orange — particles, warnings */
  --moonstone:      #5a8aaf;  /* cool counterpoint, very sparse */

  /* Semantic accent aliases (default = candlelight) */
  --accent:    var(--candlelight);
  --accent-2:  var(--candlelight-2);
  --accent-d:  var(--candlelight-d);

  /* Rules */
  --rule:       rgba(26, 22, 38, 0.18);
  --rule-soft:  rgba(26, 22, 38, 0.10);
  --rule-dark:  rgba(228, 217, 192, 0.18);

  /* Font stacks */
  --serif:    'IM Fell', 'IM Fell DW Pica', 'EB Garamond', Georgia, serif;
  --sans:     'Inter', 'Söhne', -apple-system, system-ui, sans-serif;
  --hand:     'La Belle Aurore', 'Caveat', cursive;     /* primary handwriting */
  --hand-alt: 'Kalam', 'Caveat', cursive;               /* heavier hand */
  --mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-display:  clamp(56px, 9vw, 132px);  /* hero h1 */
  --fs-h1:       clamp(32px, 4.8vw, 64px); /* section-h */
  --fs-h2:       clamp(24px, 3vw, 36px);   /* video block, sub-section */
  --fs-h3:       22px;
  --fs-lead:     20px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    11px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 72px;
  --sp-8: 120px;  /* section vertical rhythm on light */
  --sp-9: 160px;  /* section vertical rhythm on dark */

  /* Containers */
  --maxw: 1280px;
  --maxw-text: 720px;
  --maxw-narrow: 780px;

  /* Grain (signature texture) */
  --grain-opacity: 0.32;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .25s;
  --dur-base: .35s;
  --dur-slow: .9s;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these classes instead of restating font-family/size.
   ========================================================= */

/* Hero h1 — display serif, big + small line */
.t-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.t-display em { font-style: italic; color: var(--accent-d); }

/* Section headlines */
.t-h1, h1.t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}
.t-h1 em { font-style: italic; color: var(--accent-d); }

.t-h2, h2.t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--ink);
}

.t-h3, h3.t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}

/* Lead — serif italic intros, marginalia-adjacent */
.t-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Body */
.t-body, p.t {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
}
.t-body em { color: var(--accent-d); font-style: italic; }

/* Body sans (UI, secondary copy) */
.t-body-sans {
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Eyebrow / micro label — Inter caps, tracked */
.t-eyebrow, .t-micro {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-d);
}

/* Mono — dates, IDs, code-like labels */
.t-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Handwriting — marginalia, signatures */
.t-hand {
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-dim);
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  font-variant-ligatures: none;
}

/* Pull quote */
.t-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

/* Attribution caps */
.t-attrib {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-dim);
}

/* ON DARK — flip ink → night */
.on-night .t-h1, .on-night .t-h2, .on-night .t-h3, .on-night .t-display { color: var(--night-text); }
.on-night .t-h1 em, .on-night .t-display em { color: var(--accent-2); }
.on-night .t-body, .on-night .t-lead { color: rgba(228,217,192,0.85); }
.on-night .t-body em { color: var(--accent-2); }
.on-night .t-eyebrow { color: var(--accent-2); }
.on-night .t-mono, .on-night .t-attrib, .on-night .t-hand { color: var(--night-dim); }

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   SIGNATURE TEXTURES
   ========================================================= */

/* Film grain — apply to <body> or surface as a ::before/fixed overlay */
.grain {
  position: fixed; inset: -20% -20% -20% -20%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.06  0 0 0 0 0.14  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Paper texture — radial purple wash + organic noise */
.paper-tex {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(180,168,200,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(100,60,140,0.06) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.1  0 0 0 0 0.18  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}

/* Night texture — candlelight + arcane radial washes */
.night-tex {
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(201,152,42,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(100,80,150,.08) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  color: var(--night-text);
}

/* =========================================================
   ACCENT THEMES — swap candlelight for ember / arcane / moonstone
   Add data-accent="ember|arcane|moonstone" to any container
   ========================================================= */
[data-accent="candlelight"] { --accent: #c9982a; --accent-2: #daa830; --accent-d: #7b5a22; }
[data-accent="arcane"]      { --accent: #7b4fbf; --accent-2: #9468d4; --accent-d: #5a3a8e; }
[data-accent="ember"]       { --accent: #c96a2a; --accent-2: #d98040; --accent-d: #8a4a16; }
[data-accent="moonstone"]   { --accent: #5a8aaf; --accent-2: #6fa0c4; --accent-d: #3e5e78; }

/* =========================================================
   PRIMARY CTA — bordered candlelight rectangle with embers
   Markup:
     <a class="cta-primary" href="#">
       <span>Open a reading</span>
       <span class="arrow">→</span>
       <span class="ember-field" aria-hidden="true">
         <span class="ember-dot"></span> ×6
       </span>
     </a>
   ========================================================= */
.cta-primary {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--accent);
  color: var(--paper);
  padding: 20px 32px;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.4s var(--ease-in-out);
  overflow: visible;
}
.cta-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent), var(--ember), var(--accent));
  z-index: -1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201,152,42,0.4), 0 8px 40px rgba(201,152,42,0.2);
}
.cta-primary:hover::after { opacity: 1; }
.cta-primary > span,
.cta-primary .arrow { position: relative; z-index: 1; }
.cta-primary > span:first-child { white-space: nowrap; }
.cta-primary .arrow { font-family: var(--serif); font-size: 18px; transition: transform .35s; }
.cta-primary:hover .arrow { transform: translateX(6px); }

.cta-primary .ember-field {
  position: absolute;
  /* Extends 80px above the button — that's the rise corridor. The field
     stops at the button top so embers spawn at top and float up. */
  inset: -80px -10px auto;
  height: 80px;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cta-primary:hover .ember-field { opacity: 1; }
.cta-primary .ember-dot {
  position: absolute;
  bottom: 0;          /* Spawn at the bottom of the field = button top */
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #f5d87a, var(--accent), transparent);
  box-shadow: 0 0 6px 2px rgba(201,152,42,0.55);
  animation: ember-rise 2.4s ease-out infinite;
}
.cta-primary .ember-dot:nth-child(1) { left: 10%; animation-delay: 0s;   }
.cta-primary .ember-dot:nth-child(2) { left: 28%; animation-delay: .35s; width: 3px; height: 3px; }
.cta-primary .ember-dot:nth-child(3) { left: 50%; animation-delay: .8s;  width: 5px; height: 5px; }
.cta-primary .ember-dot:nth-child(4) { left: 68%; animation-delay: .5s;  }
.cta-primary .ember-dot:nth-child(5) { left: 86%; animation-delay: 1.2s; width: 3px; height: 3px; }
.cta-primary .ember-dot:nth-child(6) { left: 38%; animation-delay: 1.7s; width: 2px; height: 2px; }

@keyframes ember-rise {
  0%   { opacity: 0; transform: translateY(4px) scale(.5); }
  10%  { opacity: 1; transform: translateY(0)   scale(1); }
  70%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-80px) translateX(14px) scale(.2); }
}

/* "Dark variant" CTA — gold on night */
.on-night .cta-primary,
.cta-primary.on-night { color: #0a0812; }

/* =========================================================
   MOTION LIBRARY — ported from site test
   All keyframes available globally; opt in via class.
   ========================================================= */

/* Headline underline — used on hero "Three hours" emphasis */
.underline { position: relative; display: inline-block; }
.underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.02em;
  height: 0.06em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: under 1.1s cubic-bezier(.6,0,.2,1) 0.8s forwards;
}
@keyframes under { to { transform: scaleX(1); } }

/* Reveal-on-scroll. JS opt-in via html.js-ready */
.reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s var(--ease-out); }
html.js-ready .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
.reveal.in { opacity: 1 !important; transform: translateY(0) !important; }
html.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Pulse — small status dot */
.pulse-dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* Rune-ring system — apply to absolutely-positioned container
   <div class="rune-ring rune-ring--lg"></div>
   <div class="rune-ring rune-ring--md rune-ring--arcane"></div>
*/
.rune-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(201,152,42,0.28);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(201,152,42,0.06);
  transform: translate(-50%, -50%);
  animation: ring-spin 120s linear infinite, ring-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
.rune-ring--lg { width: min(90vw, 700px); height: min(90vw, 700px); }
.rune-ring--md { width: min(70vw, 540px); height: min(70vw, 540px); animation: ring-spin 90s linear infinite reverse, ring-pulse-2 8s ease-in-out infinite; border-color: rgba(123,79,191,0.24); box-shadow: 0 0 25px rgba(123,79,191,0.05); }
.rune-ring--sm { width: min(50vw, 380px); height: min(50vw, 380px); animation: ring-spin 60s linear infinite, ring-pulse 5s ease-in-out infinite; }
.rune-ring--xl { width: min(110vw, 880px); height: min(110vw, 880px); animation: ring-spin 200s linear infinite; border-color: rgba(228,217,192,0.10); }
.rune-ring--arcane { border-color: rgba(123,79,191,0.30); }

/* INK variant — for paper surfaces. Faded-ink lines as a manuscript
   watermark behind editorial content. */
.rune-ring--ink {
  border-color: rgba(26,22,38,0.16);
  box-shadow: 0 0 30px rgba(26,22,38,0.04);
  animation: ring-spin 120s linear infinite, ring-pulse-ink 7s ease-in-out infinite;
}
.rune-ring--ember-ink {
  border-color: rgba(201,106,42,0.20);
  box-shadow: 0 0 25px rgba(201,106,42,0.05);
  animation: ring-spin 90s linear infinite reverse, ring-pulse-ember 9s ease-in-out infinite;
}
.rune-ring--candlelight-ink {
  border-color: rgba(123,90,34,0.22);
  box-shadow: 0 0 25px rgba(201,152,42,0.06);
}
.rune-ring__glyphs--ink {
  color: rgba(26,22,38,0.14);
}
.rune-ring__glyphs {
  /* child element — sets the rotating glyph band */
  position: absolute;
  inset: -12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 2em;
  color: rgba(201,152,42,0.20);
  animation: ring-counter 120s linear infinite;
}
/* Match the site test exactly — keyframe target omits the translate,
   creating the subtle drift/orbit that makes the rotation visible. */
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-counter { to { transform: rotate(-360deg); } }
@keyframes ring-pulse {
  0%, 100% { border-color: rgba(201,152,42,0.28); box-shadow: 0 0 30px rgba(201,152,42,0.06); }
  50%      { border-color: rgba(201,152,42,0.48); box-shadow: 0 0 40px rgba(201,152,42,0.14); }
}
@keyframes ring-pulse-2 {
  0%, 100% { border-color: rgba(123,79,191,0.24); box-shadow: 0 0 25px rgba(123,79,191,0.05); }
  50%      { border-color: rgba(123,79,191,0.40); box-shadow: 0 0 35px rgba(123,79,191,0.12); }
}
@keyframes ring-pulse-ink {
  0%, 100% { border-color: rgba(26,22,38,0.16); box-shadow: 0 0 30px rgba(26,22,38,0.04); }
  50%      { border-color: rgba(26,22,38,0.28); box-shadow: 0 0 40px rgba(26,22,38,0.08); }
}
@keyframes ring-pulse-ember {
  0%, 100% { border-color: rgba(201,106,42,0.20); box-shadow: 0 0 25px rgba(201,106,42,0.05); }
  50%      { border-color: rgba(201,106,42,0.36); box-shadow: 0 0 35px rgba(201,106,42,0.10); }
}

/* Hero ember field — drifts upward across the full hero
   <div class="ember-bg-field"><span class="ember-bg"></span> ×16</div>
*/
.ember-bg-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember-bg {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #f5d87a, var(--accent), transparent);
  box-shadow: 0 0 6px 2px rgba(201,152,42,0.4);
  animation: ember-drift 10s ease-out infinite;
  opacity: 0;
}
.ember-bg:nth-child(1)  { left: 55%; bottom: 15%; animation-delay: 0s;   animation-duration: 10s; }
.ember-bg:nth-child(2)  { left: 65%; bottom: 35%; animation-delay: 2s;   animation-duration: 8s;  width: 3px; height: 3px; }
.ember-bg:nth-child(3)  { left: 75%; bottom: 10%; animation-delay: 4s;   animation-duration: 12s; }
.ember-bg:nth-child(4)  { left: 50%; bottom: 25%; animation-delay: 1s;   animation-duration: 9s;  width: 3px; height: 3px; }
.ember-bg:nth-child(5)  { left: 80%; bottom: 45%; animation-delay: 3s;   animation-duration: 11s; }
.ember-bg:nth-child(6)  { left: 60%; bottom: 50%; animation-delay: 5s;   animation-duration: 7s;  width: 5px; height: 5px; }
.ember-bg:nth-child(7)  { left: 70%; bottom: 5%;  animation-delay: 6s;   animation-duration: 13s; }
.ember-bg:nth-child(8)  { left: 45%; bottom: 60%; animation-delay: 7s;   animation-duration: 10s; width: 3px; height: 3px; }
.ember-bg:nth-child(9)  { left: 25%; bottom: 20%; animation-delay: 1.5s; animation-duration: 11s; width: 3px; height: 3px; }
.ember-bg:nth-child(10) { left: 35%; bottom: 40%; animation-delay: 3.5s; animation-duration: 9s; }
.ember-bg:nth-child(11) { left: 15%; bottom: 55%; animation-delay: 5.5s; animation-duration: 12s; width: 3px; height: 3px; }
.ember-bg:nth-child(12) { left: 85%; bottom: 30%; animation-delay: 0.5s; animation-duration: 10s; width: 5px; height: 5px; }
.ember-bg:nth-child(13) { left: 20%; bottom: 8%;  animation-delay: 4.5s; animation-duration: 14s; }
.ember-bg:nth-child(14) { left: 40%; bottom: 70%; animation-delay: 8s;   animation-duration: 9s;  width: 3px; height: 3px; }
.ember-bg:nth-child(15) { left: 90%; bottom: 15%; animation-delay: 6.5s; animation-duration: 11s; }
.ember-bg:nth-child(16) { left: 30%; bottom: 50%; animation-delay: 9s;   animation-duration: 13s; width: 5px; height: 5px; }

/* INK variant — warm sepia specks for paper backgrounds */
.ember-bg--ink {
  background: radial-gradient(circle, rgba(201,106,42,0.85), rgba(123,90,34,0.6), transparent);
  box-shadow: 0 0 5px 1px rgba(201,106,42,0.25);
}
@keyframes ember-drift {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
  10%  { opacity: 0.8; }
  40%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-100vh) translateX(30px) scale(0); }
}

/* Card candle — radial glow expands on hover, hairline gold sweep appears
   <div class="card-candle">
     <div class="card-candle__rune">☽</div>
     <h3 class="card-candle__title">…</h3>
     <p class="card-candle__body">…</p>
   </div>
*/
.card-candle { position: relative; background: var(--night-2); border: 1px solid rgba(201,152,42,0.06); padding: 48px 36px; overflow: hidden; transition: all 0.6s ease; }
.card-candle::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(201,152,42,0.08), transparent 70%); transition: all 0.8s ease; pointer-events: none; }
.card-candle::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity 0.6s ease; }
.card-candle:hover::before { width: 300px; height: 300px; background: radial-gradient(circle, rgba(201,152,42,0.15), rgba(123,79,191,0.04) 50%, transparent 70%); }
.card-candle:hover::after { opacity: 0.4; }
.card-candle:hover { border-color: rgba(201,152,42,0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: translateY(-4px); }
.card-candle__rune { font-family: var(--serif); font-size: 24px; color: var(--accent); opacity: 0.3; margin-bottom: 20px; transition: all 0.6s ease; }
.card-candle:hover .card-candle__rune { opacity: 0.8; text-shadow: 0 0 15px rgba(201,152,42,0.5); }
.card-candle__title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--night-text); line-height: 1.25; margin-bottom: 14px; position: relative; z-index: 1; }
.card-candle__title em { font-style: italic; color: var(--accent-2); }
.card-candle__body { font-family: var(--serif); font-size: 14px; line-height: 1.7; color: rgba(228,217,192,0.7); position: relative; z-index: 1; }

/* Reduced-motion / throttled override */
@media (prefers-reduced-motion: reduce) {
  .rune-ring, .rune-ring__glyphs, .ember-bg, .cta-primary .ember-dot,
  .pulse-dot, .underline::after { animation: none !important; }
  .ember-bg { opacity: .5; }
}
html.no-anim .rune-ring,
html.no-anim .rune-ring__glyphs,
html.no-anim .ember-bg,
html.no-anim .cta-primary .ember-dot { animation: none !important; }