/* Shared blog stylesheet: the five style blocks every post carried inline,
   concatenated in their original order. Linked from all 48 posts with a
   ?v= version string (see CLAUDE.md, cache busting). */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-sans-roman.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-sans-roman.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/dm-sans-roman.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/dm-sans-roman.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-roman.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --cream: #F5EFE6;
  --cream-deep: #E8DFD1;
  --cream-soft: #EFE7DA;
  --stone: #D9C5A6;
  --ink: #1A1612;
  --ink-soft: #4A3F33;
  --ink-faint: #7A6B57;
  --rule: #D4C9B8;

  --ember: #AB5618;
  --ember-deep: #773613;
  --ember-bright: #F5A65B;

  --teal: #2D5F5D;
  --teal-deep: #1D4F4B;

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
}

/* ============================================
   RESET + BASE
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* Shared grain texture (used in dark sections) */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25' /%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}


/* ============================================
   ANNOUNCEMENT BANNER
   ============================================ */
.announce-bar {
  display: block;
  background: #C47352;
  color: var(--cream);
  padding: 12px 24px;
  text-align: center;
  transition: background 0.2s ease;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(75, 30, 12, 0.35);
}
.announce-bar:hover { background: #B2613F; }
.announce-bar__inner {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 14px;
  max-width: 1100px;
}
.announce-bar__headline {
  font-family: var(--font-display); font-variation-settings: 'opsz' 14;
  font-style: italic; font-weight: 400;
  font-size: clamp(14px, 1.1vw, 15.5px);
  letter-spacing: -0.005em;
  color: rgba(245, 239, 230, 0.95);
}
.announce-bar__link {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(14px, 1vw, 14.5px);
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(245, 239, 230, 0.95);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.announce-bar__link em { font-style: italic; font-weight: 500; }
.announce-bar__arrow { display: inline-block; transition: transform 0.2s ease; }
.announce-bar:hover .announce-bar__arrow { transform: translateX(3px); }
.announce-bar:hover .announce-bar__link { text-decoration-color: var(--ember-bright); color: var(--ember-bright); }
@media (max-width: 640px) { .announce-bar { padding: 10px 16px; } }


/* Stars across the full page (slight fade only at the warm horizon) */
.page__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0,0,0,0.55) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0,0,0,0.55) 100%);
}
.page__sky span {
  position: absolute;
  background: radial-gradient(circle, #FFE8D6 30%, rgba(255, 220, 200, 0.5) 55%, transparent 75%);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  animation: page-twinkle 4s ease-in-out infinite;
}
/* Only every third star twinkles. The sky is unchanged — same stars, same
   places — but the page runs a third of the animations, which is the
   difference between smooth and stuttery scrolling on a phone. */
.page__sky span:not(:nth-child(3n)) { animation: none; }
@keyframes page-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  20% { opacity: 0.9; transform: scale(1.2); }
  45% { opacity: 0.32; transform: scale(0.8); }
  70% { opacity: 0.95; transform: scale(1.18); }
}

/* Warm horizon glow at the bottom */
.page__glow {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  height: 520px;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 165, 90, 0.32) 0%, rgba(200, 100, 50, 0.16) 30%, transparent 65%);
  filter: blur(28px);
  z-index: 1;
  pointer-events: none;
}

/* Subtle amber wash near the horizon */
.page__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(245, 166, 91, 0.06) 75%, rgba(255, 200, 130, 0.10) 100%);
}

/* Drifting embers (keep behavior, refine visuals) */
.page__embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.page__embers span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--ember-bright);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(245, 166, 91, 0.85);
  opacity: 0;
  animation: ember-drift 14s ease-out infinite;
}
.page__embers span.is-sm { width: 2px; height: 2px; box-shadow: 0 0 4px rgba(245, 166, 91, 0.65); }
.page__embers span.is-warm { background: var(--ember); box-shadow: 0 0 5px rgba(210, 105, 30, 0.7); }
@keyframes ember-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  18% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-22px, -260px) scale(0.4); }
}


/* ============================================
   ARTICLE — hero, bridging artwork, body
   ============================================ */
.article-hero {
  background: linear-gradient(180deg,
      #4A3563 0%,
      #5A3A60 30%,
      #6E4256 60%,
      #92583C 85%,
      #AC6E44 100%);
  color: var(--cream);
  padding: clamp(52px, 6.5vw, 84px) 24px 250px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.article-hero__inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 3; }
.article-hero__crumb {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.95);
  margin-bottom: 26px;
  transition: color 0.2s ease;
}
a.article-hero__crumb:hover { color: var(--ember-bright); }
.article-hero__crumb .sep { margin: 0 10px; opacity: 0.5; }
.article-hero__title {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 400;
  font-size: clamp(33px, 4.8vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin: 0 auto;
  max-width: 18em;
}
.article-hero__title em { font-style: italic; color: var(--ember-bright); }
.article-hero__byline {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(245, 239, 230, 0.96);
  margin-top: 22px;
}
.article-hero__byline .dot { margin: 0 9px; opacity: 0.5; }

/* Artwork bridges the night sky into the cream page */
.article-figure {
  max-width: 880px;
  margin: -200px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 4;
}
.article-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(245, 166, 91, 0.28);
  box-shadow:
    0 34px 90px -34px rgba(31, 14, 46, 0.6),
    0 14px 44px -18px rgba(210, 105, 30, 0.28);
}

.article-body {
  max-width: 680px;
  margin: 60px auto 0;
  padding: 0 24px;
}
.article-body p {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.article-body > p:first-of-type {
  font-size: 21.5px;
  line-height: 1.62;
  color: var(--ink);
}
.article-body strong { font-weight: 500; color: var(--ink); }
.article-body a {
  color: var(--ember-deep);
  text-decoration: underline;
  text-decoration-color: rgba(210, 105, 30, 0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.article-body a:hover { color: var(--ember); text-decoration-color: var(--ember); }
.article-body h2 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 54px 0 18px;
}
.article-body h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36;
  font-weight: 500;
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--ink);
  margin: 34px 0 10px;
}
.article-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
  margin: 58px 0;
}

/* Support line callout */
.article-callout {
  max-width: 680px;
  margin: 64px auto 0;
  padding: 0 24px;
}
.article-callout__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #1F0E2E 0%, #3D1228 70%, #5D2018 100%);
  border: 1px solid rgba(245, 166, 91, 0.22);
  border-radius: 18px;
  padding: clamp(30px, 4vw, 42px);
  color: var(--cream);
  text-align: center;
}
.article-callout__eyebrow {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-bright);
  margin-bottom: 14px;
}
.article-callout__headline {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.article-callout__headline em { font-style: italic; color: var(--ember-bright); }
.article-callout__body {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(245, 239, 230, 0.82);
  max-width: 460px;
  margin: 0 auto 24px;
}
.article-callout__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.article-callout__cta {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.article-callout__cta--primary { background: var(--ember); color: var(--cream); }
.article-callout__cta--primary:hover { background: var(--ember-deep); }
.article-callout__cta--ghost {
  border: 1px solid rgba(245, 239, 230, 0.35);
  color: var(--cream);
}
.article-callout__cta--ghost:hover { border-color: var(--ember-bright); color: var(--ember-bright); }
.article-callout__hours {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(245, 239, 230, 0.6);
  margin-top: 18px;
}

/* Prev/next */
.article-pagination {
  max-width: 680px;
  margin: 70px auto 0;
  padding: 28px 24px 120px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.article-pagination a {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--ember-deep);
  transition: color 0.15s ease;
}
.article-pagination a:hover { color: var(--ember); }
.article-pagination .label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.article-pagination > a:last-child { text-align: right; }

@media (max-width: 640px) {
  .article-hero { padding-bottom: 180px; }
  .article-figure { margin-top: -140px; padding: 0 16px; }
  .article-body, .article-callout, .article-pagination { padding-left: 20px; padding-right: 20px; }
}


.article-body ul, .article-body ol {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 14;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin: 0 0 24px 26px;
}
.article-body li { margin-bottom: 12px; padding-left: 6px; }
.article-body ul { list-style: disc; }
.article-body ul li::marker, .article-body ol li::marker { color: var(--ember); }
.article-body ol { list-style: decimal; }
.article-body ol li::marker { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.article-body blockquote {
  border-left: 2px solid var(--ember);
  margin: 0 0 24px;
  padding: 4px 0 4px 22px;
}
.article-body blockquote p {
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0;
}
.article-inline { margin: 36px 0; }
.article-inline img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 0.5px solid var(--rule);
}

/* ============================================
   FOOTER - dark, with starfield
   ============================================ */
.footer {
  background: #2A2438;
  color: var(--cream);
  padding: clamp(72px, 9vw, 96px) 24px 32px;
  position: relative;
  overflow: hidden;
}
.footer__stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.footer__stars span {
  position: absolute;
  background: radial-gradient(circle, #fff 30%, rgba(255,255,255,0.5) 55%, transparent 75%);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  animation: twinkle 3.9s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  20% { opacity: 1; transform: scale(1.3); }
  45% { opacity: 0.35; transform: scale(0.8); }
  70% { opacity: 1; transform: scale(1.25); }
}
.footer__inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
}

.footer__newsletter {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(245, 239, 230, 0.12);
  margin-bottom: clamp(48px, 6vw, 72px);
  align-items: start;
}
@media (min-width: 800px) { .footer__newsletter { grid-template-columns: 1fr 1fr; gap: 80px; } }
.footer__newsletter-text { display: grid; gap: 14px; }
.footer__newsletter-headline {
  font-family: var(--font-display); font-variation-settings: 'opsz' 144;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: -0.025em; line-height: 1.05;
}
.footer__newsletter-headline { color: var(--ember-bright); }
.footer__newsletter-body {
  font-family: var(--font-display); font-variation-settings: 'opsz' 14;
  font-weight: 300; font-size: 17px; line-height: 1.55;
  color: #fff;
}
.footer__newsletter-form {
  display: flex; gap: 10px; padding: 6px;
  background: rgba(245, 239, 230, 0.06);
  border: 1px solid rgba(245, 239, 230, 0.14);
  border-radius: 999px;
  transition: border-color 0.15s ease;
}
.footer__newsletter-form:focus-within { border-color: rgba(245, 239, 230, 0.95); }
.footer__newsletter-form input {
  flex: 1; padding: 14px 20px; border: none;
  background: transparent; color: var(--cream);
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-size: 15px; letter-spacing: -0.005em; outline: none;
}
.footer__newsletter-form input::placeholder { color: #fff; }
.footer__newsletter-form button {
  background: var(--ember); color: var(--cream);
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  transition: background 0.2s ease;
}
.footer__newsletter-form button:hover { background: var(--ember-deep); }

.footer__sitemap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px;
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(245, 239, 230, 0.12);
  margin-bottom: clamp(32px, 4vw, 48px);
}
@media (min-width: 700px) { .footer__sitemap { grid-template-columns: repeat(4, 1fr); } }
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__col-head {
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ember-bright); margin-bottom: 4px;
}
.footer__col a {
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-size: 14px; font-weight: 400; letter-spacing: -0.005em;
  color: #fff;
  transition: color 0.15s ease;
}
.footer__col a:hover { color: var(--cream); }
/* Follow us: a second group in the Support us column. Icons take the link
   colour (and each page's own hover) through currentColor; each link is a
   44px target, pulled left so the first glyph lines up with the text above. */
.footer__col-head--follow { margin-top: 16px; }
.footer__social { display: flex; gap: 4px; margin: -8px 0 0 -12px; }
.footer__col .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; }
.footer__col .footer__social a:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

.footer__contact {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(245, 239, 230, 0.12);
  margin-bottom: clamp(24px, 3vw, 32px);
  align-items: center;
}
@media (min-width: 800px) { .footer__contact { grid-template-columns: auto 1fr; gap: 40px; } }
.footer__logo {
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-weight: 500; font-size: 19px; letter-spacing: -0.015em;
  color: var(--cream);
  display: flex; align-items: center; gap: 8px;
}
.footer__logo::before { content: ''; width: 20px; height: 20px; background-color: var(--ember-bright); -webkit-mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; }
.footer__contact-items {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--font-display); font-variation-settings: 'opsz' 60;
  font-size: 14px; letter-spacing: -0.005em;
  color: rgba(245, 239, 230, 0.95);
}
.footer__contact-items a { color: var(--cream); }
.footer__contact-items a:hover { color: var(--ember-bright); }
.footer__contact-items em { font-style: normal; color: rgba(245, 239, 230, 0.95); }
.footer__contact-items { min-width: 0; }
.footer__contact-items span { white-space: nowrap; }
.footer__contact-items a { overflow-wrap: anywhere; }
@media (max-width: 620px) { .footer__contact-items { flex-direction: column; gap: 10px; } .footer__contact-items span { white-space: normal; } }

.footer__safety {
  padding: 18px 20px;
  border: 1px dashed rgba(245, 239, 230, 0.2);
  border-radius: 8px;
  margin-bottom: clamp(24px, 3vw, 32px);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.65;
  color: rgba(245, 239, 230, 0.95);
}
.footer__safety strong { font-weight: 600; color: rgba(245, 239, 230, 0.95); }
.footer__safety a {
  color: var(--ember-bright);
  text-decoration: underline;
  text-decoration-color: rgba(245, 166, 91, 0.4);
}

.footer__legal {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 12px 24px;
  font-family: var(--font-sans); font-size: 14px;
  color: rgba(245, 239, 230, 0.95);
}
.footer__legal a { color: var(--cream, #F5EFE6); text-decoration: underline; text-decoration-color: rgba(245, 239, 230, 0.45); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
.footer__legal a:hover { color: var(--cream, #F5EFE6); text-decoration-color: var(--cream, #F5EFE6); }
.footer__legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal-trademark { font-size: 14px; color: rgba(245, 239, 230, 0.95); text-align: center; }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .page__sky span,
  .page__embers span,
  .page__flame,
  .tab.is-active::before,
  .footer__stars span { animation: none; }
  .page__embers span { opacity: 0.25; }
  .pane.is-active .fcard,
  .pane.is-active > .subsection,
  .pane.is-active > .more { animation: none; }
}

/* === Standard primary nav (matches all pages) === */
.hero__nav { position: sticky; top: 0; z-index: 14; padding: 14px clamp(24px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; background: #000; border-bottom: 1px solid rgba(245, 239, 230, 0.08); }
@media (max-width: 640px) { .hero__nav { padding: 10px 16px; } }
.hero__logo { font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60; font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: #F5EFE6; display: flex; align-items: center; gap: 8px; line-height: 1.02; text-decoration: none; }
.hero__logo-text { display: inline-block; }
.hero__logo-mark { width: 35px; height: 35px; display: block; background-color: #F5A65B; -webkit-mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; }
.hero__nav-links { display: flex; align-items: center; gap: 28px; font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60; font-size: 16.1px; font-weight: 500; letter-spacing: -0.005em; color: #fff; }
.hero__nav-links > a { color: #fff; transition: color 0.15s ease; text-decoration: none; }
.hero__nav-links > a:hover { color: var(--ember-bright); }
.hero__nav-cta { background: #AB5618; color: #F5EFE6 !important; padding: 9px 18px; border-radius: 999px; font-family: var(--font-sans, 'DM Sans', sans-serif); font-size: 14px; font-weight: 600; transition: background 0.2s ease; }
.hero__nav-cta:hover { background: #773613; }
.hero__nav-item { position: relative; padding-bottom: 14px; margin-bottom: -14px; }
.hero__nav-item > a { display: inline-flex; align-items: center; gap: 5px; color: #fff; transition: color 0.15s ease; cursor: pointer; text-decoration: none; }
.hero__nav-item > a:hover { color: var(--ember-bright); }
.hero__nav-chevron { font-size: 9px; opacity: 0.65; transition: transform 0.25s ease, opacity 0.2s ease; display: inline-block; }
.hero__nav-item:hover > a .hero__nav-chevron,
.hero__nav-item:focus-within > a .hero__nav-chevron { transform: rotate(180deg); opacity: 1; }
.hero__nav-dropdown {
  position: absolute; top: 100%; left: -8px; min-width: 200px;
  display: flex; flex-direction: column;
  background: rgba(20, 8, 12, 0.96);
  border: 1px solid rgba(245, 239, 230, 0.10);
  border-radius: 10px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  z-index: 30;
}
.hero__nav-item:hover > .hero__nav-dropdown,
.hero__nav-item:focus-within > .hero__nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0s;
}
.hero__nav-dropdown a {
  font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60;
  font-weight: 500; font-size: 15.5px; letter-spacing: -0.005em;
  color: #fff;
  padding: 8px 14px; border-radius: 6px; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.hero__nav-dropdown a:hover { color: #F5EFE6; background: rgba(245, 166, 91, 0.08); }
@media (max-width: 720px) { .hero__nav-links > a:not(.hero__nav-cta), .hero__nav-item { display: none; } }

.hero__nav { position: sticky; top: 0; z-index: 14; padding: 14px clamp(24px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; background: #000; border-bottom: 1px solid rgba(245, 239, 230, 0.08); }
@media (max-width: 640px) { .hero__nav { padding: 10px 16px; } }
.hero__logo { font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60; font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: #F5EFE6; display: flex; align-items: center; gap: 8px; line-height: 1.02; text-decoration: none; }
.hero__logo-text { display: inline-block; }
.hero__logo-mark { width: 35px; height: 35px; display: block; background-color: #F5A65B; -webkit-mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; mask: url('/logo-fireside_project-icon-white-RGB%20(1).svg') center / contain no-repeat; }
.hero__nav-links { display: flex; align-items: center; gap: 28px; font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60; font-size: 16.1px; font-weight: 500; letter-spacing: -0.005em; color: #fff; }
.hero__nav-links > a { color: #fff; transition: color 0.15s ease; text-decoration: none; }
.hero__nav-links > a:hover { color: var(--ember-bright); }
.hero__nav-cta { background: #AB5618; color: #F5EFE6 !important; padding: 9px 18px; border-radius: 999px; font-family: var(--font-sans, 'DM Sans', sans-serif); font-size: 14px; font-weight: 600; transition: background 0.2s ease; }
.hero__nav-cta:hover { background: #773613; }
.hero__nav-item { position: relative; padding-bottom: 14px; margin-bottom: -14px; }
.hero__nav-item > a { display: inline-flex; align-items: center; gap: 5px; color: #fff; transition: color 0.15s ease; cursor: pointer; text-decoration: none; }
.hero__nav-item > a:hover { color: var(--ember-bright); }
.hero__nav-chevron { font-size: 9px; opacity: 0.65; transition: transform 0.25s ease, opacity 0.2s ease; display: inline-block; }
.hero__nav-item:hover > a .hero__nav-chevron,
.hero__nav-item:focus-within > a .hero__nav-chevron { transform: rotate(180deg); opacity: 1; }
.hero__nav-dropdown {
  position: absolute; top: 100%; left: -8px; min-width: 200px;
  display: flex; flex-direction: column;
  background: rgba(20, 8, 12, 0.96);
  border: 1px solid rgba(245, 239, 230, 0.10);
  border-radius: 10px; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  z-index: 30;
}
.hero__nav-item:hover > .hero__nav-dropdown,
.hero__nav-item:focus-within > .hero__nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0s;
}
.hero__nav-dropdown a {
  font-family: var(--font-display, 'Fraunces', serif); font-variation-settings: 'opsz' 60;
  font-weight: 500; font-size: 15.5px; letter-spacing: -0.005em;
  color: #fff;
  padding: 8px 14px; border-radius: 6px; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.hero__nav-dropdown a:hover { color: #F5EFE6; background: rgba(245, 166, 91, 0.08); }
@media (max-width: 720px) { .hero__nav-links > a:not(.hero__nav-cta), .hero__nav-item { display: none; } }



.announce-bar {
  display: block;
  background: #C47352;
  padding: 9px 0;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(75, 30, 12, 0.35);
  overflow: hidden;
}
.announce-bar__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.announce-bar__row {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.announce-bar__track {
  display: flex; align-items: center; flex-shrink: 0;
  width: max-content;
  gap: clamp(15.6px, 2.12vw, 26.7px);
  animation: announce-press-scroll 60s linear infinite;
}
.announce-bar:hover .announce-bar__track { animation-play-state: paused; }
@keyframes announce-press-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-bar__track { animation: none; }
}
.announce-bar__logo {
  display: inline-flex; align-items: center;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.announce-bar__logo:hover { opacity: 0.65; }
.announce-bar__logo img { filter: brightness(0) invert(1); }
.announce-bar:hover { background: #C47352; }

/* ── Support-line CTA: the live button from the homepage ─────────────────── */
/* Pinned to literal values rather than each page's variables. --ember is
   #AB5618 everywhere now, but --font-sans still resolves to Fraunces on the
   coaching page, so var() would give two different buttons. */
.hero__nav-cta-wrap{position:relative;display:inline-flex;border-radius:999px;}
.hero__nav-cta-wrap::before,.hero__nav-cta-wrap::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid #F5A65B;opacity:0;pointer-events:none;}
.support-open .hero__nav-cta-wrap::before,.support-open .hero__nav-cta-wrap::after{animation:ctaHalo 2.8s ease-out infinite;}
.support-open .hero__nav-cta-wrap::after{animation-delay:1.4s;}
@keyframes ctaHalo{0%{transform:scale(1);opacity:0.55;}100%{transform:scale(1.45);opacity:0;}}
.hero__nav-cta{position:relative;display:inline-flex;align-items:center;gap:8px;background:#AB5618;color:#F5EFE6!important;padding:9px 17px;border-radius:999px;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0.01em;white-space:nowrap;text-decoration:none;transition:background 0.2s ease;}
.hero__nav-cta .cta-label{font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;}
.hero__nav-cta:hover{background:#773613;}
.cta-phone{width:14px;height:14px;transform-origin:60% 40%;animation:ctaRing 4s ease-in-out infinite;}
@keyframes ctaRing{0%,70%,100%{transform:rotate(0);}72%{transform:rotate(-12deg);}74%{transform:rotate(10deg);}76%{transform:rotate(-8deg);}78%{transform:rotate(6deg);}80%{transform:rotate(-3deg);}82%{transform:rotate(0);}}
.cta-dot{width:8px;height:8px;border-radius:50%;background:#E5594F;flex:none;animation:ctaDotClosed 1.9s ease-out infinite;}
.support-open .cta-dot{background:#5FE3A0;animation-name:ctaDot;}
@keyframes ctaDot{0%{box-shadow:0 0 0 0 rgba(95,227,160,0.6);}80%,100%{box-shadow:0 0 0 6px rgba(95,227,160,0);}}
@keyframes ctaDotClosed{0%{box-shadow:0 0 0 0 rgba(229,89,79,0.55);}80%,100%{box-shadow:0 0 0 6px rgba(229,89,79,0);}}
@media(prefers-reduced-motion:reduce){.hero__nav-cta-wrap::before,.hero__nav-cta-wrap::after,.cta-phone,.cta-dot{animation:none!important;}}

/* Skip link: first focusable thing on the page, offscreen until focused. */
.skip-link{position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ember, #AB5618); color: var(--cream, #F5EFE6); padding: 11px 18px; border-radius: 999px; font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 14px; font-weight: 600; text-decoration: none; transition: top 0.18s ease;}
.skip-link:focus{top: 12px; outline: 2px solid var(--cream, #F5EFE6); outline-offset: 2px;}
@media (prefers-reduced-motion: reduce){ .skip-link{transition: none;} }
/* main is focusable only as a skip target, never in the tab order. */
main:focus{outline: none;}

/* Status is not carried by colour alone: a word sits beside the dot, and the
   closed state is a hollow ring so the two differ in shape as well as hue. */
.cta-state{font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; margin-left: 2px; opacity: 0.95;}
.cta-dot{background: transparent; box-shadow: inset 0 0 0 2px var(--status-closed, #E5594F);}
.support-open .cta-dot{background: var(--status-open, #5FE3A0); box-shadow: none;}

/* The footer subscribe field sits inside a pill with no border of its own, so
   a plain outline would be clipped by the pill. Ring the pill instead, and give
   the field a real indicator rather than none at all. */
.footer__newsletter-form:focus-within{border-color: var(--ember-bright, #F5A65B); box-shadow: 0 0 0 3px rgba(245, 166, 91, 0.22);}
.footer__newsletter-form input:focus-visible{outline: 2px solid var(--ember-bright, #F5A65B); outline-offset: -2px; border-radius: 999px;}


/* ── Reduced motion: the sky and the hearth hold still ────────────────────────
   Individual sections already opt out of their own flourishes; this is the
   blanket for the two that appear on nearly every page and were only partly
   covered — the starfields and the hero's fire. Stars keep their painted
   opacity rather than freezing mid-twinkle. Embers, shooting stars and motes
   exist only as motion, so they are hidden rather than parked at whatever
   opacity their keyframe happened to hold. The hero's animated campfire has
   no still frame to fall back to, so it steps aside too. */
@media (prefers-reduced-motion: reduce) {
  /* Starfields */
  .hero__stars span, .hero__sky .hero__stars span, .page__sky span,
  .page-hero__stars span, .page-hero__sky span, .sky__stars span,
  .footer__stars span, .trust-bar__stars span, .ev4 .ev4-stars span,
  .volunteers-sunset__stars span, .cannabis-hero__stars span,
  .questions__stars span, .faq__stars span, .closing__stars span,
  .closing__sky span, .donate-hero__sky span, .voice__visual-stars span,
  .ty-hero__sky span, .research__stars span, .research__stars span.is-bright,
  .research-stars span, .founder__stars span, .path__stars span,
  .fade-stars span, .quotes__stars span, .coaching__stars span,
  .lucy__stars span, .support__stars span, .volunteer__stars span,
  .flywheel__stars span, .donors__stars span, .stars-layer span,
  .collab__sky span, .pulse__stars span, .testimonials__stars span,
  .star-field span, .fitfor__stars span, .fitfor__star, .wc__stars span,
  .apply__sky span, .station__star svg, .first-star, .fs-star, .star-mark {
    animation: none !important;
  }

  /* Motion-only particles: embers, motes, shooting stars */
  .hero__embers span, .page__embers span, .c-hero__embers span,
  .app-section__embers span, .closing__ember, .closing__embers span,
  .reassurance__embers span, .donate-hero__embers span, .ty-hero__embers span,
  .document__cover-embers span, .support__embers span, .ember-drift span,
  .ember-field span, .mote-field span, .shooting-field span,
  .hero__shooting span, .donate-hero__shooting span, .ty-hero__shooting span,
  .sky__shoot--1, .sky__shoot--2 {
    animation: none !important;
    opacity: 0 !important;
  }

  /* The hearth itself */
  .hero__flame-column, .hero__glow, .support__glow, .closing__glow,
  .cannabis-hero__glow, .closer__glow, .sky__glow, .c-hero__orb,
  .glow-title, .glow-title::before, .glow-title::after, .fitfor__beam-glow,
  .archive-sky__sun, .hero-atmos .sky-cloud, .archive-sky .sky-cloud {
    animation: none !important;
  }

  /* An animated GIF/WebP cannot be paused from CSS and there is no still
     frame to swap in, so the campfire sits this one out. It is decorative
     and already aria-hidden. */
  .hero__gif { display: none !important; }
}

.stars-idle span { animation-play-state: paused !important; }
.anim-idle, .anim-idle *, .anim-idle::before, .anim-idle::after,
.anim-idle *::before, .anim-idle *::after { animation-play-state: paused !important; }