/* ============================================================
   The Omythic Archetype Deck. Stage One.
   Built to Omythic v6.0 visual standards (Mythic Flare Era)
   ============================================================ */

:root {
  /* Omythic palette */
  --flare:       #FF526B;
  --charcoal:    #2B2D2F;
  --gold:        #D4AF37;
  --blush:       #FFE0E4;
  --cream:       #FAF8F3;
  --amber:       #B8860B;
  --sunset:      #FF5733;
  --violet:      #4A1942;
  --bg-deep:     #1a1a1c;
  --bg-mid:      #2B2D2F;

  /* Typography */
  --font-display: "Cinzel Decorative", serif;
  --font-label:   "Bebas Neue", "Arial Narrow", sans-serif;
  --font-ui:      "Work Sans", system-ui, sans-serif;
  --font-quote:   "Instrument Serif", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;

  --max: 1400px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rule: rgba(250, 248, 243, 0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body {
  background: linear-gradient(180deg, #1a1a1c 0%, #2B2D2F 50%, #1a1a1c 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Subtle analog noise overlay across the whole site */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>");
  background-size: 256px 256px;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   Scroll progress bar (Flare ↔ Gold shimmer)
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--flare), var(--gold), var(--flare));
  background-size: 200% auto;
  animation: progressShimmer 3s linear infinite;
  z-index: 100;
  opacity: 0.8;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   Background animation: ember particles + radial glow pulse
   ============================================================ */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--flare);
  opacity: 0;
  animation: particleFloat linear infinite;
  will-change: transform, opacity;
}
.particle.gold { background: var(--gold); }
.particle.cream { background: var(--cream); }

@keyframes particleFloat {
  0%   { transform: translateY(100vh) rotate(0deg);    opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-20px) rotate(720deg);  opacity: 0; }
}

.bg-glow {
  position: fixed;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.bg-glow::before,
.bg-glow::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform-origin: center;
}
.bg-glow::before {
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  background: radial-gradient(circle, rgba(255, 82, 107, 0.08) 0%, transparent 70%);
  animation: glowPulse 6s ease-in-out infinite alternate;
}
.bg-glow::after {
  width: 900px; height: 900px;
  margin: -450px 0 0 -450px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
  animation: glowPulseGold 8s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  0%   { transform: scale(1)    translate(0,0); opacity: 0.6; }
  50%  { transform: scale(1.15) translate(0,0); opacity: 1; }
  100% { transform: scale(0.9)  translate(0,0); opacity: 0.6; }
}
@keyframes glowPulseGold {
  0%   { transform: scale(0.9) translate(0,0); opacity: 0.4; }
  100% { transform: scale(1.1) translate(0,0); opacity: 0.8; }
}

/* Make sure content sits above the bg */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* ============================================================
   Header. Sticky on every page. Condenses on scroll.
   Hamburger drawer under 900px.
   ============================================================ */

/* Skip link for keyboard users. Visible only on focus. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--flare);
}

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 16, 20, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.0);
  transition:
    background 280ms var(--ease),
    border-color 280ms var(--ease),
    padding 240ms var(--ease);
}
.site-header.is-condensed {
  background: rgba(15, 16, 20, 0.88);
  border-bottom-color: rgba(212, 175, 55, 0.18);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 56px);
  max-width: var(--max);
  margin: 0 auto;
  transition: padding 240ms var(--ease);
}
.site-header.is-condensed .site-header-inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.brand-logo {
  height: 30px;
  width: auto;
  max-width: 180px;
  display: block;
  transition: height 240ms var(--ease);
}
.site-header.is-condensed .brand-logo {
  height: 24px;
}

.site-nav {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.78);
}
.site-nav a {
  position: relative;
  padding: 8px 0;
  transition: color 240ms var(--ease);
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--flare);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--flare); outline: none; }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] {
  color: var(--gold);
}
.site-nav a[aria-current="page"]::after {
  background: var(--gold);
  transform: scaleX(1);
}
.site-nav a.nav-cta {
  color: var(--flare);
}
.site-nav a.nav-cta::after {
  background: var(--gold);
}
.site-nav a.nav-cta[aria-current="page"] {
  color: var(--flare);
}
.site-nav a.nav-cta[aria-current="page"]::after {
  background: var(--gold);
  transform: scaleX(1);
}

/* Hamburger button. Hidden on desktop. */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--flare);
  background: rgba(255, 82, 107, 0.06);
  outline: none;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease), background 240ms var(--ease);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--flare);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--flare);
}

/* Mobile drawer */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* IMPORTANT: backdrop-filter on .site-header creates a containing block
     for fixed-positioned descendants. That traps the drawer inside the
     header's box and clips it to the header height. Remove the filter on
     mobile so the fixed drawer is positioned against the viewport. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 16, 20, 0.96);
  }
  .site-header.is-condensed {
    background: rgba(15, 16, 20, 0.98);
  }

  .site-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(92vw, 380px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 28px 32px;
    background: linear-gradient(180deg, #15161a 0%, #0d0d10 100%);
    border-left: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: -24px 0 48px -20px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    z-index: 90;
    overflow-y: auto;
  }
  .site-nav.is-open {
    transform: translateX(0);
  }
  .site-nav a {
    display: block;
    padding: 18px 6px;
    font-size: 15px;
    letter-spacing: 0.22em;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  }
  .site-nav a::after {
    display: none;
  }
  .site-nav a[aria-current="page"] {
    color: var(--gold);
  }
  .site-nav a:last-child {
    border-bottom: none;
  }

  /* Backdrop while drawer is open */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 80;
    animation: nav-backdrop-fade 240ms var(--ease);
  }
  body.nav-open { overflow: hidden; }
  @keyframes nav-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header-inner,
  .brand-logo,
  .site-nav,
  .nav-toggle-bar { transition: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 64px);
  text-align: center;
}
.eyebrow {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 28px;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 8vw, 80px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 28px;
  color: var(--cream);
  overflow-wrap: break-word;
  hyphens: auto;
  /* Gilded Flare gradient text on the title */
  background: linear-gradient(135deg, #FF526B, #D4AF37);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(250, 248, 243, 0.78);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================
   Deck
   ============================================================ */
.deck-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 120px);
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 1100px) { .deck-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .deck-grid { grid-template-columns: repeat(2, 1fr); } }
/* Single-column under 560px so each card spans full width.
   This makes cqi (% of card width) actually large enough to read on phones. */
@media (max-width: 560px)  {
  .deck-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }
}

/* ----- Individual card ----- */
.card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  container-type: inline-size;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 720ms var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: hover) {
  .card:hover .card-inner { transform: rotateY(180deg); }
}
.card.is-flipped .card-inner { transform: rotateY(180deg); }
.card:focus-visible .card-inner { transform: rotateY(180deg); }
.card:focus-visible {
  box-shadow: 0 0 0 2px var(--flare);
  border-radius: 6px;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -18px rgba(0, 0, 0, 0.85),
    0 4px 12px -4px rgba(0, 0, 0, 0.6);
  transition: box-shadow 360ms var(--ease);
}

.card-face--front { background: #f3e9d3; }
.card-face--front img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Back. Omythic dark editorial. */
/* Standardized layout: numeral / name / tagline / rule / essence / shadow / CTA */
/* Two-section build (Voice now lives on the archetype page in The Bestiary). */
/* Type scaled up for mobile readability. Every back is identical structure. */
.card-face--back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 82, 107, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(212, 175, 55, 0.06), transparent 60%),
    linear-gradient(180deg, #1f2022 0%, #15161a 100%);
  color: var(--cream);
  padding: 6.5cqi 6.5cqi 5.5cqi;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.card-face--back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 3px;
  pointer-events: none;
}

.card-back-numeral {
  font-family: var(--font-label);
  /* clamp() with viewport floor so labels stay legible even when the
     container query unit drops below a usable size on small screens. */
  font-size: clamp(11px, 3.6cqi, 14px);
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 1.4cqi;
  line-height: 1;
}
.card-back-name {
  font-family: var(--font-display);
  font-weight: 700;
  /* Sized so THE PATHBREAKER (longest, 15 chars) fits one line inside the
     inner content box (card width minus 2x 6.5cqi padding). Measured at
     several breakpoints; 7.0cqi with a 19px floor is the safe upper bound. */
  font-size: clamp(19px, 7.0cqi, 34px);
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: var(--cream);
  margin: 0;
  padding: 0.4cqi 0 0.3cqi;
  white-space: nowrap;
  overflow: visible;
  background: linear-gradient(135deg, #FF526B, #D4AF37);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-back-tagline {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(14px, 5.3cqi, 21px);
  line-height: 1.28;
  color: rgba(250, 248, 243, 0.94);
  margin: 2.0cqi 0 0;
}
.card-back-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
  margin: 3.6cqi 0 3.0cqi;
}
.card-back-section {
  font-family: var(--font-body);
  font-size: clamp(13px, 4.8cqi, 18px);
  line-height: 1.45;
  color: rgba(250, 248, 243, 0.92);
  margin: 0 0 3.4cqi;
}
.card-back-section:last-of-type {
  margin-bottom: 0;
}
.card-back-section strong {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: clamp(11px, 3.4cqi, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--flare);
  display: block;
  margin-bottom: 1.4cqi;
}
.card-back-cta {
  margin-top: auto; /* push to bottom of flex column */
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: clamp(12px, 3.6cqi, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 3.4cqi 0 0;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms var(--ease);
}
.card-back-cta:hover { color: var(--flare); }
.card-back-cta:focus-visible { outline: none; color: var(--flare); }

@media (hover: hover) {
  .card:hover .card-face {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 28px 60px -20px rgba(0, 0, 0, 0.9),
      0 8px 18px -6px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 82, 107, 0.30);
  }
}

/* ============================================================
   Sections (System, Stack, Future)
   ============================================================ */
.system-section,
.stack-section,
.future-section {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}

.section-label {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 20px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 48px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 36px;
  color: var(--cream);
  overflow-wrap: break-word;
  hyphens: auto;
}
.section-title-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.15;
  margin: 0 0 28px;
  color: var(--cream);
  overflow-wrap: break-word;
  hyphens: auto;
}

.prose p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(250, 248, 243, 0.82);
  margin: 0 0 18px;
  max-width: 64ch;
}
.prose em {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--gold);
}

/* The Stack. Three columns. */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin: 0 0 40px;
}
@media (max-width: 780px) {
  .stack-grid { grid-template-columns: 1fr; }
}
.stack-cell {
  padding: 28px 24px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 82, 107, 0.04), rgba(0,0,0,0.18));
}
.stack-label {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.stack-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.85);
  margin: 0;
}
.stack-body em {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--flare);
}

/* Future-section CTA */
.future-cta-row { margin: 28px 0 40px; }
.future-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 4px;
  background: linear-gradient(135deg, #FF526B, #D4AF37);
  color: #1a1a1c;
  box-shadow: 0 12px 28px -14px rgba(255, 82, 107, 0.7);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.future-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -16px rgba(255, 82, 107, 0.8);
}
.future-list--coming li { opacity: 0.75; }

/* Future / What's Next */
.future-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.future-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.82);
  padding: 18px 22px;
  border-left: 2px solid var(--flare);
  background: rgba(255, 82, 107, 0.04);
  border-radius: 0 4px 4px 0;
}
.future-list strong {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
  margin-right: 8px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 32px clamp(20px, 4vw, 56px);
  text-align: center;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.40);
}
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 10px; }
.site-footer .footer-contact {
  letter-spacing: 0.18em;
  color: rgba(250, 248, 243, 0.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.site-footer .footer-contact a {
  color: rgba(250, 248, 243, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 243, 0.20);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.site-footer .footer-contact a[href^="tel:"] { white-space: nowrap; }
.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible {
  color: var(--ember);
  border-color: var(--ember);
}
.site-footer .footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.site-footer .footer-contact .footer-vanity {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(250, 248, 243, 0.20);
  border-radius: 999px;
  font-size: 0.78em;
  letter-spacing: 0.22em;
  color: rgba(250, 248, 243, 0.55);
  vertical-align: middle;
  white-space: nowrap;
}
.site-footer .footer-contact span[aria-hidden] {
  display: inline-block;
  opacity: 0.4;
}
@media (max-width: 560px) {
  .site-footer .footer-contact span[aria-hidden] { display: none; }
  .site-footer .footer-contact { gap: 10px 16px; }
}
.site-footer .footer-meta {
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: rgba(250, 248, 243, 0.32);
}
.site-footer .footer-meta a {
  color: rgba(250, 248, 243, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 243, 0.14);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.site-footer .footer-meta a:hover,
.site-footer .footer-meta a:focus-visible {
  color: var(--ember);
  border-color: var(--ember);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .card-inner,
  .site-nav a::after,
  .scroll-progress,
  .bg-glow::before,
  .bg-glow::after,
  .particle { animation: none !important; transition: none !important; }
}

/* ============================================================
   Home "Keep Going" link list
   Mirrors .longform-next-list pattern from longform.css.
   Used on index.html to point readers into the rest of the site.
   ============================================================ */
.home-next {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 120px);
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}
.home-next .section-title {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.home-next-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-next-list li { margin: 0; }
.home-next-list a {
  display: block;
  padding: 18px 22px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 6px;
  color: rgba(250, 248, 243, 0.85);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-decoration: none;
  transition:
    border-color 240ms var(--ease),
    background 240ms var(--ease),
    color 240ms var(--ease),
    transform 240ms var(--ease);
}
.home-next-list a:hover {
  border-color: var(--flare);
  background: rgba(255, 82, 107, 0.04);
  color: var(--cream);
  transform: translateY(-1px);
}
.home-next-list strong {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  margin-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .home-next-list a { transition: none; }
}