/* ============================================================================
   THE LOTUS PRIEST, MASTER DESIGN SYSTEM  ·  "LIGHT TEMPLE"
   Amenti Alchemy / The Lotus Priest
   ----------------------------------------------------------------------------
   Source of truth: the Lotus Temple master spec. Light, warm, editorial,
   refined, a high-end printed invitation. This is the DEFAULT aesthetic for
   the entire site (homepage, blog, journal, about, work-with-me, all pages).

   A secondary dark "Amenti" palette (deep purple, dramatic) is reserved ONLY
   for product/shop pages and rare sacred "threshold" moments. It lives in the
   `--amenti-*` tokens below and must not be used for reading/general pages.

   Fully self-contained (no CDN required for the brand look). Google Fonts are
   loaded per-page via <link>.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Light temple, PRIMARY */
  --cream:       #F8F2E4; /* page background (light, clean cream) */
  --cream-deep:  #F2EAD8; /* alternate section background, gentle banding */
  --cream-card:  #FDFBF5; /* card surface (lightest, sits above the page) */
  --ink:         #2B2115; /* primary text, deepened warm near-black (crisper on light cream, never clinical #000) */
  --ink-soft:    #5C4A35; /* secondary / muted text, deepened for contrast */
  --gold:        #E0B52E; /* gold accent, rules, marks, secondary buttons (richer gold) */
  --gold-text:   #755712; /* darker gold, eyebrows / small text (AA-safe) */
  --purple:      #46249C; /* primary action color, buttons, key accents */
  --purple-deep: #351B77; /* hover / darker purple */
  --rule:        rgba(166,124,31,.30); /* hairline rules / borders */
  --rule-strong: rgba(166,124,31,.55);

  /* Dark "Amenti", SECONDARY (product pages & special sections ONLY) */
  --amenti-purple:      #3B1F8B;
  --amenti-purple-deep: #2A1566;
  --gold-bright:        #E8C84A;
  --papyrus:            #F4EFE4;

  /* Type */
  --font-display: "Marcellus", "Trajan Pro", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Measure & rhythm */
  --measure:      41rem;   /* reading column */
  --content-max:  72rem;
  --wide-max:     80rem;
  --pad-section:  6.8rem;   /* generous, calm */
  --pad-tight:    4.6rem;

  /* Sharp shape language, near-square corners everywhere */
  --radius:       2px;
  --shadow-soft:  0 18px 40px -30px rgba(43,33,21,.55);
}

/* --------------------------------------------------------------- RESET-ISH */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--ink);
  /* Subtle tiled paper-grain baked into the background for warmth.
     Tiled (not a fixed blended overlay) so it stays cheap to paint on scroll. */
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------- TYPOGRAPHY SCALE  */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .005em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.12; }
h2 { font-size: clamp(2rem, 4.8vw, 3rem); line-height: 1.18; margin-bottom: 1.6rem; }
h3 { font-size: clamp(1.45rem, 2.8vw, 1.65rem); line-height: 1.3; }
h4 { font-size: 1.15rem; font-family: var(--font-ui); font-weight: 600; }

p { margin: 0; }
p + p { margin-top: 1.85rem; }

strong { font-weight: 500; }
em, i { font-style: italic; }

/* Gold underline highlight (not a background) */
.hl {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1.2rem;
}

.lede { font-size: 1.6rem; line-height: 1.65; color: var(--ink-soft); }

/* Inline links inside body copy, gold underline, purple on hover */
.prose a, .founder__copy a, .start-here__copy a { color: var(--purple); }

/* ------------------------------------------------------------- LAYOUT UTIL */
.container       { width: 100%; max-width: var(--wide-max); margin-inline: auto; padding-inline: clamp(1.4rem, 4vw, 2.4rem); }
.container--content { max-width: var(--content-max); }
.reading-column  { max-width: var(--measure); margin-inline: auto; padding-inline: 1.6rem; }
.section         { padding-block: var(--pad-section); }
.section--tight  { padding-block: var(--pad-tight); }
.section--band   { background: var(--cream-deep); }
.center          { text-align: center; }

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

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--purple); color: #F5EFE0; padding: .7rem 1.1rem;
  font-family: var(--font-ui); font-weight: 600; text-decoration: none; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------- THRESHOLD LOTUS DIVIDER   */
.lotus-divider {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-block: clamp(2.5rem, 5vw, 3.5rem); color: var(--gold);
}
.lotus-divider::before, .lotus-divider::after {
  content: ""; height: 1px; width: clamp(28px, 10vw, 58px); background: var(--rule-strong);
}
.lotus-divider svg { width: 30px; height: 30px; flex: 0 0 auto; }

/* ------------------------------------------------------------- BUTTONS    */
/* Sharp, rectangular, uppercase Hanken, never pills, never large radius */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.35;
  text-align: center; justify-content: center;
  padding: 1.2rem 2.8rem; border-radius: var(--radius);
  background: var(--purple); color: #F5EFE0; text-decoration: none;
  border: 1.5px solid var(--purple); cursor: pointer;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: #F5EFE0; transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(70,36,156,.55); }
.btn:active { transform: translateY(0); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #C79E28; border-color: #C79E28; color: var(--ink); }

.btn--outline { background: transparent; color: var(--purple); border-color: var(--rule-strong); }
.btn--outline:hover { background: transparent; color: var(--purple-deep); border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 10px 22px -18px rgba(43, 33, 21, .5); }

.btn--sm { padding: .85rem 1.5rem; font-size: .74rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--purple); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover { color: var(--purple-deep); }
.link-arrow:hover::after { transform: translateX(4px); }

/* =====================================================  SITE HEADER / NAV  */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242,234,216,.88);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand__glyph { width: 38px; height: 38px; color: var(--gold); flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); letter-spacing: .02em; }
.brand__sub { font-family: var(--font-ui); font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); margin-top: 5px; }

.site-nav { display: flex; align-items: center; gap: .5rem; }
.site-nav__links { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  display: inline-block; padding: .5rem .85rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; transition: color .15s ease;
}
.site-nav__link:hover { color: var(--purple); }
.site-nav__link[aria-current="page"] { color: var(--ink); }
.site-nav__link[aria-current="page"]::after {
  content: ""; display: block; height: 1.5px; margin-top: 4px; background: var(--gold);
}
.site-nav__cta { margin-left: .8rem; }

/* Hamburger */
.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: transparent; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle__box { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle__box span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--ink); border-radius: 1px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 7px; }
.nav-toggle__box span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Breadcrumbs bar (article/pillar pages) */
.breadcrumbs { background: var(--cream-deep); border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-size: .8rem; letter-spacing: .04em; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; list-style: none; margin: 0; padding: .75rem 0; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--purple); }
.breadcrumbs li[aria-current="page"] { color: var(--gold-text); }
.breadcrumbs .sep { color: var(--rule-strong); }

/* Mobile nav panel */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: 78px 0 auto 0;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .75rem clamp(1.4rem, 4vw, 2.4rem) 1.75rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { padding: 1rem .25rem; border-bottom: 1px solid var(--rule); font-size: .95rem; }
  .site-nav__link[aria-current="page"]::after { display: none; }
  .site-nav__cta { margin: 1.25rem 0 0; }
  .site-nav__cta .btn { width: 100%; justify-content: center; }
}

/* =========================================================  SITE FOOTER   */
.site-footer {
  background: var(--cream-deep);
  color: var(--ink);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--rule);
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--purple); }
.footer-grid { display: grid; gap: 2.75rem 2rem; grid-template-columns: 1.6fr 1fr 1fr; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand__name { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); }
.footer-brand__sub { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-text); margin-top: 5px; }
.footer-brand p { color: var(--ink-soft); max-width: 34ch; margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.75; }

.footer-col h3 { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: 1.05rem; }

.footer-social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer-social a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--gold-text); }
.footer-social a:hover { border-color: var(--purple); color: var(--purple); }
.footer-social svg { width: 18px; height: 18px; }

.compliance-disclaimer {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.7; color: var(--ink-soft); max-width: 92ch;
}
.footer-bottom {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-family: var(--font-ui); font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft);
}

/* ==========================================================  COMPONENTS   */

/* Article cards, editorial, sharp, rule-led (not heavy boxes) */
.card-grid { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

.article-card { display: flex; flex-direction: column; background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease; }
.article-card:hover { border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.article-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 1px solid var(--rule); }
.article-card__media img, .article-card__media svg { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.6rem 1.6rem 1.7rem; }
.article-card__title { font-size: 1.5rem; line-height: 1.22; margin: 0 0 .6rem; }
.article-card__title a { color: var(--ink); text-decoration: none; }
.article-card__title a:hover { color: var(--purple); }
.article-card__excerpt { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.65; margin: 0 0 1.3rem; }
.article-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.category-tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-text); text-decoration: none; margin-bottom: 1rem;
}
.category-tag::before { content: ""; width: 18px; height: 1px; background: var(--gold); margin-right: .6rem; }
.category-tag:hover { color: var(--purple); }
.read-time { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft); }

/* Newsletter widget, light editorial panel with gold hairline */
.newsletter { background: var(--cream-card); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: clamp(2.25rem, 5vw, 3.75rem); }
.newsletter__inner { max-width: 40rem; margin-inline: auto; text-align: center; }
.newsletter .eyebrow { text-align: center; }
.newsletter p { color: var(--ink-soft); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }
.newsletter-form .field { flex: 1 1 200px; text-align: left; }
.newsletter-form label { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .5rem; }
.newsletter-form input { width: 100%; padding: .95rem 1.05rem; border-radius: var(--radius); font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--cream); border: 1px solid var(--rule-strong); }
.newsletter-form input::placeholder { color: rgba(102,84,62,.55); }
.newsletter-form input:focus { border-color: var(--purple); }
.newsletter-form .submit-row { flex: 1 1 100%; display: flex; }
.newsletter-form .btn { width: 100%; justify-content: center; }
.newsletter__note { font-family: var(--font-ui); font-size: .76rem; letter-spacing: .04em; color: var(--ink-soft); margin-top: 1.1rem; }
.newsletter__success { display: none; margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--gold); color: var(--ink); }
.newsletter.is-success .newsletter-form { display: none; }
.newsletter.is-success .newsletter__note { display: none; }
.newsletter.is-success .newsletter__success { display: block; }

/* Lead-magnet callout */
.lead-magnet { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; background: var(--cream-card); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); }
.lead-magnet__icon { width: 52px; height: 52px; color: var(--gold-text); flex: 0 0 auto; }
.lead-magnet__text { flex: 1 1 240px; }
.lead-magnet__text h3 { margin: 0 0 .3rem; }
.lead-magnet__text p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

/* Panel surface (Start Here etc.) */
.panel { background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3rem); }

/* ============================================================  HERO       */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__inner { position: relative; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__lede { font-size: 1.6rem; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; margin-top: 1.4rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
/* The hero photo is shown WHOLE, never cropped. It is scaled to fit inside the
   column AND a height cap, so a tall portrait cannot run far below the text
   beside it and unbalance the hero. The border sits on the image, not the box,
   so it hugs the photo whatever shape it is. */
.hero__art { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.hero__art img, .hero__art svg {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 27rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
@media (max-width: 880px) { .hero__art img, .hero__art svg { max-height: 26rem; } }
@media (max-width: 880px) { .hero__art { max-width: 380px; margin-inline: auto; } }

/* Founder teaser */
.founder { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 3.75rem); align-items: center; }
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } }
.founder__portrait { overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--radius); max-width: 420px; }
.founder__portrait img, .founder__portrait svg { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.founder__sig { font-family: var(--font-display); font-size: 1.9rem; font-style: italic; color: var(--purple); margin-top: .6rem; }

/* Section heading helper */
.section-head { max-width: 44rem; }
.section-head.center { margin-inline: auto; }

/* Start-here two-col */
.start-here { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (max-width: 780px) { .start-here { grid-template-columns: 1fr; } }
.start-here__media { overflow: hidden; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.start-here__media img, .start-here__media svg { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ======================================================  PAGE HEADER    */
.page-header { text-align: center; padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-header .lede { max-width: 40rem; margin: 1.2rem auto 0; }

/* =====================================================  FILTER CHIPS     */
.filter-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2rem; }
.chip {
  font-family: var(--font-ui); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem 1.15rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: transparent; color: var(--ink-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover { color: var(--purple); border-color: var(--purple); }
.chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #F5EFE0; }

/* ==================================================  FEATURED ARTICLE    */
.featured {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--cream-card); overflow: hidden;
}
@media (max-width: 820px) { .featured { grid-template-columns: 1fr; } }
.featured__media { position: relative; min-height: 320px; border-right: 1px solid var(--rule); overflow: hidden; }
@media (max-width: 820px) { .featured__media { border-right: none; border-bottom: 1px solid var(--rule); aspect-ratio: 16/9; min-height: 0; } }
.featured__media img, .featured__media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .featured__media img, .featured__media svg { position: static; } }
.featured__body { padding: clamp(2rem, 4vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; }
.featured__body h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 1rem; }
.featured__body h2 a { color: var(--ink); text-decoration: none; }
.featured__body h2 a:hover { color: var(--purple); }
.featured__body p { color: var(--ink-soft); font-size: 1.12rem; margin-bottom: 1.5rem; }
.featured__foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* =========================================  ARTICLE (post.html) TEMPLATE */
.article-header { text-align: center; padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem); }
.article-header .category-tag { justify-content: center; align-self: center; }
.article-header h1 { max-width: 20ch; margin-inline: auto; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  margin-top: 1.4rem; font-family: var(--font-ui); font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft);
}
.article-meta a { color: var(--purple); text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.article-updated { color: var(--gold-text); }

.article-hero { margin-block: 1.5rem clamp(2rem, 4vw, 3rem); }
.article-hero figure { margin: 0; }
.article-hero img, .article-hero svg { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.article-hero figcaption { margin-top: .75rem; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); text-align: center; }

/* Long-form prose */
.prose { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.9; color: var(--ink); }
.prose > p { margin: 0; }
.prose > p + p { margin-top: 1.85rem; }
.prose h2 { margin-top: 3rem; }
.prose h3 { margin-top: 2.25rem; }
.prose h2 + p, .prose h3 + p { margin-top: 1rem; }
.prose .lead { font-size: 1.5rem; line-height: 1.6; color: var(--ink); }
/* Pulled-out bold one-liner for emphasis between paragraphs (with a small gold rule) */
.prose .statement {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.45rem, 2.8vw, 1.85rem); line-height: 1.32; color: var(--ink);
  text-align: center; margin: 2.75rem auto; max-width: 34ch; text-wrap: balance;
}
.prose .statement::before {
  content: ""; display: block; width: 34px; height: 2px; background: var(--gold); margin: 0 auto 1.15rem;
}
.prose a { color: var(--purple); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose a:hover { color: var(--purple-deep); }
.prose ul, .prose ol { margin: 1.5rem 0; padding-left: 1.4rem; }
.prose li { margin-bottom: .7rem; }
.prose li::marker { color: var(--gold-text); }
.prose blockquote {
  margin: 2.25rem 0; padding: .25rem 0 .25rem 1.6rem; border-left: 3px solid var(--gold);
  font-style: italic; font-size: 1.45rem; line-height: 1.55; color: var(--ink-soft);
}
.prose blockquote cite { display: block; margin-top: .8rem; font-style: normal; font-family: var(--font-ui); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.prose figure { margin: 2.5rem 0; }
.prose figure img, .prose figure svg { width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.prose figcaption { margin-top: .75rem; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); text-align: center; }

/* Inline soft shop CTA */
.inline-cta { margin: 2.5rem 0; padding: 1.5rem 1.75rem; border: 1px solid var(--rule); border-left: 3px solid var(--purple); border-radius: var(--radius); background: var(--cream-card); }
.inline-cta p { margin: 0; font-size: 1.1rem; color: var(--ink-soft); }
.inline-cta a { font-weight: 500; }

/* Author bio box */
.author-box {
  display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--cream-card);
}
.author-box__photo { width: 92px; height: 92px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.author-box__body { flex: 1 1 260px; }
.author-box__label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.author-box__name { font-family: var(--font-display); font-size: 1.5rem; margin: .2rem 0 .5rem; }
.author-box__bio { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 .9rem; }

/* ============================================  PILLAR PAGE COMPONENTS   */
/* Anchor offset so sticky header doesn't cover jump-link targets */
.prose h2, .prose h3 { scroll-margin-top: 100px; }

/* Direct-answer block (AEO / featured-snippet capture) */
.direct-answer {
  margin: 2rem 0 2.5rem; padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cream-card); border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--purple); border-radius: var(--radius);
}
.direct-answer__label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .6rem; }
.direct-answer p { margin: 0; font-size: 1.35rem; line-height: 1.6; color: var(--ink); }
.direct-answer p + p { margin-top: 1rem; }

/* Table of contents (jump links) */
.toc { margin: 2.5rem 0; padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2rem); background: var(--cream-card); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.toc__label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 1rem; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: .6rem; }
@media (min-width: 680px) { .toc ol { grid-template-columns: 1fr 1fr; gap: .6rem 2rem; } }
.toc li { counter-increment: toc; }
.toc a { display: inline-flex; gap: .6rem; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-ui); font-size: .8rem; color: var(--gold-text); padding-top: .25rem; }
.toc a:hover { color: var(--purple); }
.toc a:hover::before { color: var(--purple); }

/* FAQ accordion (FAQPage schema) */
.faq { margin-top: 1rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.65rem; width: 12px; height: 12px;
  border-right: 2px solid var(--gold-text); border-bottom: 2px solid var(--gold-text);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--purple); }
.faq__answer { padding: 0 0 1.4rem; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.75; }
.faq__answer p { margin: 0 0 1rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* Prev/next pillar + sibling links */
.article-links { display: grid; gap: 1rem; margin-top: 2.5rem; }
.article-links a { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--cream-card); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: .95rem; letter-spacing: .02em; transition: border-color .15s ease; }
.article-links a:hover { border-color: var(--purple); color: var(--purple); }
.article-links .label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }

/* ==========================================================================
   PREMIUM PASS — motion, dark Amenti threshold, elixirs, proof, footer signup
   ========================================================================== */

/* ---- Micro-details ---- */
::selection { background: var(--gold); color: #241A0E; }

/* ---- Scroll-reveal motion (classes added by JS; no-JS users see everything) ----
   Slow, settled entrance: .9s fade + 20px upward drift on a soft ease-out.
   Images (.reveal--img) breathe in slightly slower at 1s. Animates once. */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.reveal--img { transition-duration: 1s, 1s; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--img { opacity: 1; transform: none; transition: none; }
}

/* ---- Drawn gold underline on text links (left to right) ---- */
.site-nav__link, .footer-col a, .breadcrumbs a, .article-meta a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.22, .61, .36, 1), color .2s ease;
}
.site-nav__link:hover, .footer-col a:hover, .breadcrumbs a:hover, .article-meta a:hover {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__link, .footer-col a, .breadcrumbs a, .article-meta a { transition: none; }
}

/* ---- Reading progress bar (article pages, injected by JS) ---- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-text));
  z-index: 300; pointer-events: none;
}

/* ---- Smooth-scroll landing offsets: keep glided-to targets clear of the
        sticky header (TOC links, #newsletter, FAQ anchors) ---- */
h2[id], h3[id], section[id] { scroll-margin-top: 100px; }

/* ---- Hook box: open-loop overview at the top of articles ---- */
.hook-box {
  margin: 2rem 0 2.5rem; padding: 1.5rem 1.75rem;
  background: var(--cream-card); border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}
.hook-box__label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 .9rem; }
.hook-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.hook-box li { position: relative; padding-left: 1.9rem; font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); }
.hook-box li::before { content: "\2726"; position: absolute; left: 0; top: .1em; color: var(--gold); font-size: .95rem; }

/* ---- Pull the Thread: homepage curiosity index ---- */
.thread-list { list-style: none; margin: 2.25rem auto 0; padding: 0; max-width: 44rem; }
.thread-list li { border-top: 1px solid var(--rule); }
.thread-list li:last-child { border-bottom: 1px solid var(--rule); }
.thread-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem .25rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.35;
  transition: color .2s ease, padding-left .25s cubic-bezier(.22, .61, .36, 1);
}
.thread-list a:hover { color: var(--purple); padding-left: .8rem; }
.thread-list .arrow { color: var(--gold-text); flex: 0 0 auto; transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .2s ease; }
.thread-list a:hover .arrow { transform: translateX(5px); color: var(--purple); }
@media (prefers-reduced-motion: reduce) { .thread-list a, .thread-list .arrow { transition: none; } }

/* ---- Back to top (injected by JS; fades in after one screen height) ---- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 150;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: var(--cream-card); color: var(--gold-text);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(43, 33, 21, .45);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1), color .25s ease, border-color .25s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--purple); border-color: var(--purple); transform: translateY(-2px); }
.to-top svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }

/* ---- FAQ answer entrance ---- */
.faq details[open] .faq__answer { animation: faq-in .28s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Editorial drop cap on article openers ---- */
.prose .lead::first-letter,
.direct-answer__label + p::first-letter {
  font-family: var(--font-display);
  float: left; font-size: 3.1em; line-height: .82;
  padding: .06em .14em 0 0; color: var(--gold-text);
}

/* ---- Hero trust line ---- */
.hero__trust {
  margin-top: 1.5rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
}

/* ---- Placeholder slots (drop real assets in later) ---- */
.ph-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--cream-deep); padding: 1rem;
  color: var(--gold-text); font-family: var(--font-ui); font-size: .74rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6;
}
.ph-slot--portrait { aspect-ratio: 3 / 4; }
.ph-slot--wide { aspect-ratio: 16 / 9; }

/* ---- "Your voice" fill-in slots ---- */
.voice-slot { font-style: italic; color: var(--gold-text); border-bottom: 1px dashed var(--rule-strong); }

/* ---- The Elixirs (shop bridge) ---- */
.elixir-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.4rem; transition: transform .25s cubic-bezier(.22, .61, .36, 1), border-color .25s ease, box-shadow .25s ease;
}
.elixir-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.elixir-card__name { font-family: var(--font-display); font-size: 1.45rem; margin: 0; color: var(--ink); }
.elixir-card__line { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }
.elixir-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.elixir-card__price { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; letter-spacing: .08em; color: var(--gold-text); }

/* ---- Dark "Amenti" threshold band ---- */
.amenti-band {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(1000px 480px at 50% -10%, var(--amenti-purple) 0%, var(--amenti-purple-deep) 62%, #1D0F4E 100%);
  color: var(--papyrus);
  padding-block: clamp(4rem, 9vw, 6.5rem);
}
.amenti-band .eyebrow { color: var(--gold-bright); }
.amenti-quote {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.25;
  max-width: 24ch; margin: 0 auto 1.2rem; color: #FFF9EA; text-wrap: balance;
}
.amenti-sub {
  font-family: var(--font-ui); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(244, 239, 228, .72); margin: 0 0 2.4rem;
}
.amenti-band .btn--gold { box-shadow: 0 16px 36px -18px rgba(232, 200, 74, .65); }
.btn--ghost-light { background: transparent; color: var(--papyrus); border-color: rgba(232, 200, 74, .55); }
.btn--ghost-light:hover { background: transparent; color: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-2px); box-shadow: none; }
.amenti-band__glyph {
  position: absolute; right: -50px; bottom: -70px; width: 300px; height: 300px;
  color: var(--gold-bright); opacity: .07; pointer-events: none;
}

/* ---- Proof: stats row ---- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 2.75rem 0; }
@media (max-width: 860px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
  text-align: center; padding: 1.5rem 1rem;
  background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--radius);
}
.stat__num { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--purple); }
.stat__label { margin-top: .6rem; font-family: var(--font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }

/* ---- Proof: testimonial cards ---- */
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .card-grid--2 { grid-template-columns: 1fr; } }
.testimonial-card {
  position: relative; background: var(--cream-card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2.2rem 1.6rem 1.6rem;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease;
}
.testimonial-card:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: var(--shadow-soft); }
.testimonial-card::before {
  content: "\201C"; position: absolute; top: .5rem; left: 1.1rem;
  font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--gold);
}
.testimonial-card blockquote { margin: 0 0 1.1rem; border: 0; padding: 0; font-style: italic; font-size: 1.28rem; line-height: 1.65; color: var(--ink); }
.testimonial-card figcaption { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }

/* ---- Footer compact signup ---- */
.newsletter--bare { background: transparent; border: 0; padding: 0; margin-top: 2.25rem; max-width: 32rem; }
.footer-news__title { margin: 0; font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.newsletter--bare .newsletter-form { margin-top: .9rem; gap: .6rem; flex-wrap: nowrap; }
.newsletter--bare .field { flex: 1 1 220px; }
.newsletter--bare input { background: rgba(255, 255, 255, .55); }
.newsletter--bare .submit-row { flex: 0 0 auto; display: flex; }
.newsletter--bare .btn { width: auto; }
.newsletter--bare .newsletter__success { margin-top: .9rem; }
@media (max-width: 520px) { .newsletter--bare .newsletter-form { flex-wrap: wrap; } .newsletter--bare .submit-row { flex: 1 1 100%; } .newsletter--bare .btn { width: 100%; } }

/* ==========================================================================
   CEREMONIES & RETREATS — live ribbon, event cards, event detail
   ========================================================================== */

/* ---- Homepage "Next Gathering" live ribbon (under the header) ---- */
.event-ribbon {
  background: linear-gradient(90deg, var(--amenti-purple-deep), var(--purple-deep));
  color: var(--papyrus); border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-ui);
}
.event-ribbon__inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .5rem 1.4rem; padding: .7rem 0; font-size: .84rem; text-align: center;
}
.event-ribbon__mark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright);
}
.event-ribbon__item { color: var(--papyrus); }
.event-ribbon__item strong { font-weight: 600; color: #FFF; }
.event-ribbon__item a { color: var(--gold-bright); text-decoration: none; font-weight: 600; white-space: nowrap; }
.event-ribbon__item a:hover { text-decoration: underline; }
.event-ribbon .sep { color: rgba(244, 239, 228, .3); }

/* No-JS / reduced-motion fallback: items sit side by side as before */
.event-ribbon__slider { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1.4rem; }

/* Slider mode (class added by JS): items stack in one cell and cross-fade */
.event-ribbon--slide .event-ribbon__slider { display: grid; text-align: center; }
.event-ribbon--slide .event-ribbon__item {
  grid-area: 1 / 1; opacity: 0; transform: translateY(7px); pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.event-ribbon--slide .event-ribbon__item.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Event cards (hub listing) ---- */
.event-list { display: grid; gap: 1.5rem; }
.event-card {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start;
  background: var(--cream-card); border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 1.6rem 1.8rem;
  transition: border-color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}
.event-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
@media (max-width: 620px) { .event-card { grid-template-columns: 1fr; gap: 1rem; } }
.event-date {
  text-align: center; min-width: 96px; align-self: start;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: .85rem .9rem; background: var(--cream);
}
.event-date__day { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; color: var(--purple); }
.event-date__mon { font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-top: .35rem; }
.event-card__meta { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .2rem; }
.event-card__where { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); }
.event-card__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .5rem; }
.event-card__title a { color: var(--ink); text-decoration: none; }
.event-card__title a:hover { color: var(--purple); }
.event-card__desc { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.1rem; }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.event-card__price { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; letter-spacing: .04em; color: var(--gold-text); }
.event-card--past { opacity: .62; border-left-color: var(--rule-strong); }
.event-card--past .event-date__day { color: var(--ink-soft); }

/* ---- Event detail page: key facts box ---- */
.event-facts {
  margin: 2rem 0; padding: 1.5rem 1.8rem; background: var(--cream-card);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.event-facts__row { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.event-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.event-facts__row:first-child { padding-top: 0; }
.event-facts__k { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.event-facts__v { color: var(--ink); text-align: right; font-size: 1.05rem; }

/* ==========================================================================
   FREE-GUIDE OPT-IN LANDING — dark "Amenti" purple + gold, no navigation
   ========================================================================== */
.landing {
  min-height: 100vh; display: flex; align-items: center;
  background: radial-gradient(1100px 640px at 72% -12%, var(--amenti-purple) 0%, var(--amenti-purple-deep) 55%, #1B0E48 100%);
  color: var(--papyrus); padding-block: clamp(2rem, 6vw, 4rem);
}
.landing__wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: clamp(1.4rem, 4vw, 2.4rem); }
.landing__brand { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.landing__brand svg { width: 34px; height: 34px; color: var(--gold-bright); flex: 0 0 auto; }
.landing__brand-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-bright); letter-spacing: .02em; }
.landing__brand-sub { font-family: var(--font-ui); font-size: .58rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(244, 239, 228, .6); display: block; margin-top: 2px; }

.landing__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .landing__grid { grid-template-columns: 1fr; } }

.landing .eyebrow { color: var(--gold-bright); }
.landing h1 { color: #FFF9EA; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.08; margin-bottom: 1rem; }
.landing h1 .gold { color: var(--gold-bright); }
.landing__sub { font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.5; color: rgba(244, 239, 228, .85); max-width: 36ch; margin: 0 0 1.9rem; }

.landing__list { list-style: none; margin: 0 0 2.1rem; padding: 0; display: grid; gap: .95rem; }
.landing__list li { position: relative; padding-left: 2rem; color: var(--papyrus); font-size: 1.1rem; line-height: 1.5; }
.landing__list li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--gold-bright); font-size: 1rem; }

/* Form on dark ground */
.landing .newsletter-form { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; max-width: 34rem; }
.landing .newsletter-form .field { flex: 1 1 200px; text-align: left; }
.landing .newsletter-form label { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 239, 228, .65); margin-bottom: .45rem; }
.landing .newsletter-form input { width: 100%; padding: .95rem 1.05rem; border-radius: var(--radius); font: inherit; font-size: 1.05rem; color: var(--papyrus); background: rgba(255, 255, 255, .07); border: 1px solid rgba(232, 200, 74, .35); }
.landing .newsletter-form input::placeholder { color: rgba(244, 239, 228, .42); }
.landing .newsletter-form input:focus { border-color: var(--gold-bright); background: rgba(255, 255, 255, .12); outline: none; }
.landing .newsletter-form .submit-row { flex: 1 1 100%; display: flex; }
.landing .newsletter-form .btn { width: 100%; justify-content: center; }

.landing__trust { font-family: var(--font-ui); font-size: .82rem; letter-spacing: .03em; color: rgba(244, 239, 228, .62); margin: 0; }
.landing__legal { margin-top: clamp(2rem, 5vw, 3rem); font-family: var(--font-ui); font-size: .74rem; line-height: 1.6; color: rgba(244, 239, 228, .45); }

/* Success state (JS adds .is-success to .landing-optin = the form's parent) */
.landing-optin .landing-success { display: none; }
.landing-optin.is-success .newsletter-form,
.landing-optin.is-success .landing__trust { display: none; }
.landing-optin.is-success .landing-success {
  display: block; padding: 1.4rem 1.6rem; border: 1px solid var(--gold-bright); border-radius: var(--radius);
  background: rgba(232, 200, 74, .09); color: #FFF9EA; max-width: 34rem;
}
.landing-success strong { color: var(--gold-bright); }

/* Hero image slot */
.landing__art {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid rgba(232, 200, 74, .4); border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
}
@media (max-width: 860px) { .landing__art { max-width: 420px; margin-inline: auto; aspect-ratio: 4 / 4.4; } }
.landing__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing__art-ph {
  display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 1.25rem;
  background: radial-gradient(circle at 50% 40%, rgba(232, 200, 74, .1), transparent 70%);
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232, 200, 74, .7); line-height: 1.7;
}

/* ---- Centered VSL variant of the landing ---- */
.landing__wrap--center { max-width: 56rem; text-align: center; }
.landing__wrap--center .landing__brand { justify-content: center; }
.landing__wrap--center .landing__sub { margin-inline: auto; }
.landing__wrap--center .landing__list { max-width: 40rem; margin-inline: auto; text-align: left; }
.landing__wrap--center .landing-optin { max-width: 34rem; margin-inline: auto; }
.landing__wrap--center .newsletter-form { margin-inline: auto; }
.landing__wrap--center .landing__trust,
.landing__wrap--center .landing__legal { text-align: center; }

/* ---- VSL video frame (paste an <iframe> inside; drop the placeholder) ---- */
.vsl {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  max-width: 52rem; margin: 2rem auto 2.25rem;
  border: 1px solid rgba(232, 200, 74, .4); border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); background: #14092F;
}
.vsl iframe, .vsl video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: radial-gradient(circle at 50% 45%, rgba(232, 200, 74, .12), transparent 70%);
  color: rgba(232, 200, 74, .8); font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 1rem;
}
.vsl__play { width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--gold-bright); display: flex; align-items: center; justify-content: center; }
.vsl__play svg { width: 24px; height: 24px; margin-left: 4px; color: var(--gold-bright); }

/* ==========================================================================
   TYPE + LAYOUT REFINEMENTS (round 5)
   Larger section headings, full-width hero title, quoted statements,
   one-liner testimonial strip, in-story photographs.
   ========================================================================== */

/* ---- Larger eyebrow + section heading pairing ---- */
.eyebrow--lg { font-size: 1.2rem; letter-spacing: .22em; margin-bottom: 1rem; }
.section-head--xl h2 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); margin-bottom: 1.4rem; }
.section-head--xl .lede { font-size: 1.35rem; max-width: 46rem; }
.section-head--xl.center .lede { margin-inline: auto; }

/* ---- Larger button variant ---- */
.btn--lg { font-size: 1rem; letter-spacing: .16em; padding: 1.35rem 3.1rem; }

/* ---- Hero: title runs the full width, copy + art sit beneath it ---- */
/* text-wrap:balance evens the line lengths so the headline does not end on a
   short ragged line. It runs the full width; balance does the aligning. */
.hero__title { max-width: 26ch; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); text-wrap: balance; }
@media (min-width: 881px) { .hero__title { max-width: none; } }
/* The photo column shrinks to the photo's own width (it is height-capped, so
   that width is predictable) and the copy takes the rest. Centring the two
   means neither hangs below the other. */
@media (min-width: 881px) {
  /* Top-aligned: the copy and the photo start on the same line, rather than the
     copy floating in the middle of the taller photo column. */
  .hero--stacked .hero__grid { grid-template-columns: 1fr auto; align-items: start; }
}
.hero--stacked .hero__lede { margin-top: 0; max-width: 46ch; }

/* ---- Quoted pull-statement inside long-form stories ---- */
.prose .statement--quote {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.65rem, 3.4vw, 2.35rem); line-height: 1.28;
  max-width: 26ch; margin-block: clamp(2.75rem, 5vw, 3.75rem);
}

/* ---- Photographs set inside a story column ---- */
.story-portrait {
  float: right; width: min(46%, 330px); margin: .4rem 0 1.9rem 2.2rem;
}
@media (max-width: 700px) { .story-portrait { float: none; width: 100%; margin: 2.25rem 0; } }
.story-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.story-wide { margin-block: clamp(2.5rem, 5vw, 3.5rem); }
.story-wide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--rule-strong); border-radius: var(--radius); }

/* ---- Short verbatim one-liners (strip under the testimonial cards) ---- */
.one-liners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .one-liners { grid-template-columns: 1fr; } }
.one-liner {
  margin: 0; padding: 1.15rem 0 1.15rem 1.5rem;
  border-left: 2px solid var(--gold);
}
.one-liner blockquote {
  margin: 0 0 .6rem; border: 0; padding: 0; font-style: italic;
  font-size: 1.25rem; line-height: 1.55; color: var(--ink);
}
.one-liner figcaption {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
.one-liner--empty {
  display: flex; align-items: center;
  border-left: 2px dashed var(--rule-strong);
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text);
}

/* Buttons placed inside body-copy contexts must keep their own colours:
   ".prose a / .founder__copy a / .start-here__copy a" would otherwise win. */
.prose a.btn, .founder__copy a.btn, .start-here__copy a.btn { color: #F5EFE0; text-decoration: none; }
.prose a.btn--gold, .founder__copy a.btn--gold, .start-here__copy a.btn--gold { color: var(--ink); }
.prose a.btn--outline, .founder__copy a.btn--outline, .start-here__copy a.btn--outline { color: var(--purple); }
.prose a.btn--outline:hover, .founder__copy a.btn--outline:hover, .start-here__copy a.btn--outline:hover { color: var(--purple-deep); }

/* Portrait photographs dropped inside an article column stay a sensible height */
.prose figure--portrait { max-width: 26rem; margin-inline: auto; }

/* ==========================================================================
   IN-STORY PHOTOGRAPH FIXES
   ".prose figure { margin: 2.5rem 0 }" out-specifies a bare .story-portrait,
   so the float lost its left gutter and sat flush against the text.
   ========================================================================== */
.prose figure.story-portrait {
  margin: .35rem 0 1.75rem 2.6rem;
  width: min(46%, 330px);
}
/* Above the reading measure there is empty page either side: let the photo
   lean into it so the text keeps a readable line length. */
@media (min-width: 1000px) {
  .prose figure.story-portrait { margin-right: -6.5rem; }
}
/* Below that the column is too narrow to wrap text beside a photo at all. */
@media (max-width: 999px) {
  .prose figure.story-portrait { float: none; width: 100%; margin: 2.25rem 0; }
}

/* A photograph shown whole, at its own proportions, never cropped */
.prose figure.story-full { margin: clamp(2.5rem, 5vw, 3.5rem) 0; }
.story-full img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: fill;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}

/* Whole photographs stay a sensible width so a tall portrait does not
   swallow the page. Works inside a reading column or a wide section. */
.story-full { max-width: 44rem; margin-inline: auto; }
.story-full img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; display: block;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}

/* Article titles: 20ch was breaking long headlines into two-word lines */
.article-header h1 {
  max-width: 26ch;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  text-wrap: balance;
}

/* On phones the hero photo belongs between the headline and the description,
   not stranded below the buttons where the one-column grid would put it. */
@media (max-width: 880px) {
  .hero--stacked .hero__art { order: -1; margin-bottom: 1.75rem; }
  .hero--stacked .hero__grid { row-gap: 0; }
}

/* A single one-liner standing on its own, centred under a section */
.one-liner--center {
  border-left: 0; border-top: 2px solid var(--gold);
  max-width: 34rem; margin: 2.5rem auto 0; padding: 1.35rem 0 0;
  text-align: center;
}
.one-liner--center blockquote { margin-bottom: .7rem; }

/* The category filter sets the `hidden` attribute in JS. The browser's default
   [hidden]{display:none} loses to .article-card{display:flex} and
   .event-card{display:grid}, so filtered cards stayed visible. This wins. */
[hidden] { display: none !important; }