/*!
 * The EventTalk — stylesheet (v1.0.0)
 * Designed & built by Pellicci Digital — https://pelliccidigital.com
 */
/* ============================================================
   The EventTalk — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================ */

/* ---------- Fonts ----------
   Brand spec calls for Georgia Pro / Georgia Pro Bold (Monotype).
   Licensed font files live in /fonts and are wired below.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cross-document view transitions were disabled — the snapshot/composite cost
   on heavier pages (notably /assistant/) caused a visible lag on navigation.
   Browsers fall back to a plain instant nav, which is faster overall. */
@media (prefers-reduced-motion: reduce) {
  /* No-op kept so the @media query block below still parses cleanly. */
}

@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
/* Note: also exposed under 'GeorgiaPro' for tools that prefer the no-space alias. */
@font-face {
  font-family: 'GeorgiaPro';
  src: url('../fonts/GeorgiaPro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Georgia Pro';
  src: url('../fonts/GeorgiaPro-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* ============ COLOR — Brand Core ============ */
  --et-mint:        #BAE7E6;  /* C23 M0  Y11 K0  — soft, breezy primary */
  --et-marine:      #35526E;  /* C85 M65 Y37 K20 — deep blue, anchor */
  --et-sky:         #96B4DE;  /* C40 M21 Y0  K0  — mid blue accent */

  /* Derived neutrals (anchored to marine, not pure black) */
  --et-ink:         #1F2F3F;  /* near-black, marine-tinted */
  --et-graphite:    #4D6070;  /* secondary text — 4.7:1 on --et-paper, WCAG AA */
  --et-mist:        #B6C2CE;  /* tertiary text / borders */
  --et-frost:       #F7F9FB;  /* alt cool-white surface */
  --et-paper:       #F6FAFA;  /* page bg, mint-tinted off-white */
  --et-cloud:       #E6EDED;  /* card hairline / subtle fills */
  --et-white:       #FFFFFF;

  /* Tints + shades of mint */
  --et-mint-50:     #EAF7F7;
  --et-mint-100:    #D5EFEF;
  --et-mint-200:    #BAE7E6;  /* canonical mint */
  --et-mint-300:    #95D6D5;
  --et-mint-500:    #5FB6B5;

  /* Tints + shades of marine */
  --et-marine-100:  #C4D0DC;
  --et-marine-300:  #6B85A0;
  --et-marine-500:  #35526E;  /* canonical marine */
  --et-marine-700:  #243A50;
  --et-marine-900:  #14222F;

  /* Sky */
  --et-sky-100:     #DCE6F4;
  --et-sky-300:     #B6CAE6;
  --et-sky-500:     #96B4DE;

  /* ============ COLOR — Semantic ============ */
  --bg:             var(--et-paper);
  --bg-elev:        var(--et-white);
  --bg-inverse:     var(--et-marine-700);
  --bg-accent:      var(--et-mint-100);

  --fg:             var(--et-ink);
  --fg-muted:       var(--et-graphite);
  --fg-meta:        #4E6880;        /* metadata/tag text — 4.6:1 on white, AA */
  --fg-subtle:      var(--et-mist);
  --fg-on-mint:     var(--et-marine);
  --fg-on-marine:   var(--et-mint);
  --fg-on-dark:     var(--et-white);

  --border:         var(--et-cloud);
  --border-strong:  var(--et-mist);

  --accent:         var(--et-marine);
  --accent-soft:    var(--et-mint);

  /* Status (sparingly used — not in brand guide; warm-tuned to fit) */
  --success:        #4F8A6A;
  --warning:        #C99548;
  --danger:         #B05656;
  --info:           var(--et-sky-500);

  /* ============ GRADIENT — The signature 60° brand gradient ============ */
  /* Canonical brand gradient: mint → sky on a 60° axis.
     Use sparingly — it is the "logo frame" gradient. */
  --et-gradient-brand:
    linear-gradient(60deg, var(--et-mint) 0%, var(--et-sky) 100%);
  --et-gradient-brand-soft:
    linear-gradient(60deg, var(--et-mint-100) 0%, var(--et-sky-100) 100%);
  --et-gradient-marine:
    linear-gradient(60deg, var(--et-marine) 0%, var(--et-marine-700) 100%);

  /* ============ TYPE — Families ============ */
  --font-serif:     var(--gh-font-body, 'Georgia Pro', Georgia, 'Times New Roman', serif);
  --font-serif-display: var(--gh-font-heading, 'Georgia Pro', Georgia, 'Times New Roman', serif);
  --font-sans:      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============ TYPE — Scale (1.250 major third, anchored at 16px) ============ */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-5xl:   60px;
  --text-6xl:   76px;

  /* ============ TYPE — Weight ============ */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ============ TYPE — Leading + tracking ============ */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ============ SPACING (4px base) ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============ RADIUS ============ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ============ SHADOW (cool, marine-tinted) ============ */
  --shadow-xs:  0 1px 2px rgba(31, 47, 63, 0.06);
  --shadow-sm:  0 2px 4px rgba(31, 47, 63, 0.06), 0 1px 2px rgba(31, 47, 63, 0.04);
  --shadow-md:  0 6px 16px rgba(31, 47, 63, 0.08), 0 2px 4px rgba(31, 47, 63, 0.04);
  --shadow-lg:  0 16px 32px rgba(31, 47, 63, 0.10), 0 4px 8px rgba(31, 47, 63, 0.05);
  --shadow-xl:  0 24px 56px rgba(31, 47, 63, 0.14), 0 8px 16px rgba(31, 47, 63, 0.06);
  --shadow-mint: 0 12px 28px rgba(95, 182, 181, 0.22);

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-quick:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============ LAYOUT ============ */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
}

/* ============================================================
   Base + semantic typography
   ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings — serif, the brand voice */
.h-display, h1.display {
  font-family: var(--font-serif-display);
  font-weight: var(--weight-bold);
  font-size: clamp(48px, 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--et-marine);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--et-marine);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--et-marine);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--et-marine);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--et-marine);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg);
}

/* Eyebrow — small, all-caps, tracked. Used above section titles. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--et-marine);
}

/* Body — Georgia Pro across the board (brand voice is editorial top-to-bottom) */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}
.body-lg { font-size: var(--text-md); }
.body-sm { font-size: var(--text-sm); color: var(--fg-muted); }

/* Pull-quote / editorial */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--et-marine);
}

/* Caption + meta */
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

/* Code / mono — rare, but covered */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--et-mint-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  color: var(--et-marine-700);
}

/* Links */
a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-quick);
}
a:hover { text-decoration-color: var(--et-marine); }

/* ============================================================
   Utility — backgrounds + frames
   ============================================================ */
.bg-mint    { background: var(--et-mint); color: var(--fg-on-mint); }
.bg-marine  { background: var(--et-marine); color: var(--fg-on-marine); }
.bg-sky     { background: var(--et-sky); color: var(--et-marine); }
.bg-paper   { background: var(--et-paper); color: var(--fg); }
.bg-gradient { background: var(--et-gradient-brand); color: var(--et-white); }
.bg-gradient-soft { background: var(--et-gradient-brand-soft); color: var(--et-marine); }

/* The signature "logo frame" — square outline with the brand gradient.
   Wrap any content in <div class="brand-frame"> to evoke the wordmark. */
.brand-frame {
  position: relative;
  padding: var(--space-8);
  background: var(--bg);
}
.brand-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xs);
  padding: 3px;
  background: var(--et-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* ===== The EventTalk · Core styles (v3 clean) ===== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--et-paper);
  color: var(--et-ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ===== Layout ===== */
.container       { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.container--wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 740px; margin: 0 auto; padding: 0 32px; }

/* ===== Eyebrows ===== */
.eyebrow {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--et-marine-300);
}
.eyebrow--coral   { color: #c4613a; }
.eyebrow--saffron { color: #a87828; }
.eyebrow--mint    { color: #2a7a6a; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  border: 1.5px solid transparent; border-radius: 4px; padding: 10px 20px;
  text-decoration: none; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.btn--marine  { background: var(--et-marine);  color: var(--et-mint);   border-color: var(--et-marine); }
.btn--marine:hover { background: var(--et-marine-700); border-color: var(--et-marine-700); }
.btn--mint    { background: var(--et-mint);    color: var(--et-marine); border-color: var(--et-mint); }
.btn--mint:hover { background: var(--et-mint-300); }
.btn--ghost   { background: transparent; color: var(--et-marine); border-color: var(--et-cloud); }
.btn--ghost:hover { border-color: var(--et-marine); }
/* On a marine surface (e.g. the Insider tier card) the standard marine
   button vanishes. --on-marine flips to a mint fill with marine ink. */
.btn--on-marine { background: var(--et-mint); color: var(--et-marine); border-color: var(--et-mint); }
.btn--on-marine:hover { background: #fff; border-color: #fff; }
.btn--link    { background: transparent; border: 0; padding: 4px 0; color: var(--et-marine); text-decoration: underline; text-decoration-color: var(--et-mint-300); text-underline-offset: 3px; }
.btn--lg      { padding: 13px 26px; font-size: 15px; }
.btn--sm      { padding: 7px 13px; font-size: 13px; }
.btn--full    { width: 100%; justify-content: center; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,250,250,0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--et-cloud); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 84px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand__logo { height: 64px; width: auto; max-width: 220px; object-fit: contain; }

/* Prominent hero slogan — the brand mantra, front and center on home */
.hero__slogan {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px; margin: 22px 0 4px;
}
.hero__slogan span {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 400;
  color: var(--et-marine); letter-spacing: -0.01em;
}
.hero__slogan i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--et-mint-500); flex-shrink: 0;
  display: inline-block;
}
@media (max-width: 560px) { .hero__slogan { gap: 10px; } }

.nav { display: flex; align-items: center; gap: 2px; }
.nav__top {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--et-marine); text-decoration: none;
  padding: 6px 11px; border-radius: 4px;
  transition: background 140ms ease;
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.nav__top:hover { background: var(--et-mint-50); }
.nav__top.is-active { color: var(--et-marine); font-weight: 600; }
.nav__top.is-active::after {
  content: ''; position: absolute; bottom: -1px; left: 11px; right: 11px;
  height: 2px; background: var(--et-mint-300); border-radius: 1px;
}
.nav__ask { display: inline-flex !important; align-items: center; gap: 5px; }
.nav__ask i[data-lucide] { color: var(--et-mint-500); flex-shrink: 0; }

/* Dropdown menus */
.nav__item { position: relative; }
.nav__caret {
  width: 13px; height: 13px;
  transition: transform 160ms ease;
}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: 100%; left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--et-cloud);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(15, 25, 50, 0.10);
  padding: 6px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__item--has-menu.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__item--has-menu.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu a {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--et-marine); text-decoration: none;
  padding: 9px 12px; border-radius: 6px;
  transition: background 140ms ease;
  white-space: nowrap;
}
.nav__menu a:hover { background: var(--et-mint-50); }

/* Mobile accordion groups */
.m-nav__group { border-bottom: 1px solid var(--et-cloud); }
.m-nav__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  color: var(--et-marine);
  padding: 12px 0; cursor: pointer;
}
.m-nav__toggle i[data-lucide] { width: 16px; height: 16px; transition: transform 160ms ease; }
.m-nav__toggle[aria-expanded="true"] i[data-lucide] { transform: rotate(180deg); }
.m-nav__sub { display: flex; flex-direction: column; padding: 0 0 10px 14px; }
.m-nav__sub a {
  font-size: 15px !important; padding: 8px 0 !important;
  border-bottom: 0 !important; color: var(--et-graphite) !important;
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 36px; height: 36px; border: 0; background: transparent;
  border-radius: 4px; color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
}
.icon-btn:hover { background: var(--et-mint-50); }
.menu-btn { display: none; }

.site-header__mobile {
  border-top: 1px solid var(--et-cloud);
  padding: 16px 24px 20px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--et-white);
}
.site-header__mobile a {
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  color: var(--et-marine); text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid var(--et-cloud);
  display: block;
}
.site-header__mobile a:last-of-type { border-bottom: 0; }
.site-header__mobile-actions { margin-top: 16px; }

/* Member pill */
.member-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  background: var(--et-mint-50); border: 1px solid var(--et-cloud);
  border-radius: 999px; font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; color: var(--et-marine); cursor: pointer;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background-size: cover; background-position: center;
}

/* ===== Hero ===== */
.hero {
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--et-cloud);
}
.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.hero__copy { padding-right: 8px; }
.hero__copy .eyebrow { margin-bottom: 18px; letter-spacing: 0.18em; }
.hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--et-marine);
  margin: 0 0 20px; text-wrap: balance;
}
.hero__deck {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.55;
  color: var(--et-marine-700); margin: 0 0 28px; text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero__note {
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
  margin: 0;
}
.hero__note a { color: var(--et-marine); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Hero collage */
.hero__collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.hero__collage-a, .hero__collage-b, .hero__collage-c {
  position: relative; overflow: hidden; border-radius: 3px;
  background: var(--et-mint-100);
}
.hero__collage-a { grid-column: 1; grid-row: 1; aspect-ratio: 4/3; }
.hero__collage-b { grid-column: 2; grid-row: 1; aspect-ratio: 4/3; }
.hero__collage-c { grid-column: 1 / 3; grid-row: 2; aspect-ratio: 16/6; }
.hero__collage-a img, .hero__collage-b img, .hero__collage-c img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.hero__collage-a:hover img, .hero__collage-b:hover img, .hero__collage-c:hover img { transform: scale(1.03); }
.hero__collage-label {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(31,47,63,0.72); color: #fff;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
}
.hero__collage-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(31,47,63,0.22);
}

/* ===== Featured strip ("This week") ===== */
.featured-strip {
  padding: 0; cursor: pointer;
  border-bottom: 1px solid var(--et-cloud);
  transition: background 160ms ease;
}
.featured-strip:hover { background: var(--et-mint-50); }
.featured-strip__grid {
  display: grid; grid-template-columns: 420px 1fr;
  align-items: center;
}
.featured-strip__media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--et-marine-900);
}
.featured-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.featured-strip__sticker {
  position: absolute; top: 14px; left: 14px;
  background: var(--et-marine); color: var(--et-mint);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; z-index: 2;
}
.featured-strip__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(31,47,63,0.3); z-index: 2;
}
.featured-strip__time {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(31,47,63,0.75); color: var(--et-mint);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 3px; z-index: 2;
}
.featured-strip__copy {
  padding: 40px 48px;
}
.featured-strip__copy .eyebrow { margin-bottom: 12px; }
.featured-strip__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15;
  letter-spacing: -0.012em; color: var(--et-marine);
  margin: 0 0 14px; text-wrap: balance;
}
.featured-strip__deck {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.55;
  color: var(--et-marine-700); margin: 0 0 22px; text-wrap: pretty;
}

/* ===== Section header ===== */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px;
}
.sec-head--center {
  flex-direction: column; align-items: center; text-align: center;
  margin-bottom: 40px;
}
.sec-head--center p { margin: 8px auto 0; max-width: 560px; }
.sec-head .eyebrow { margin-bottom: 8px; }
.sec-head h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 34px; line-height: 1.15; letter-spacing: -0.012em;
  color: var(--et-marine); margin: 0 0 8px;
}
.sec-head p {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.55;
  color: var(--et-graphite); margin: 0; max-width: 560px;
}
.sec-head__more {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--et-marine); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding-bottom: 4px;
}
.sec-head__more:hover { color: var(--et-marine-700); }

/* ===== Rails ===== */
.rail { padding: 80px 0; border-bottom: 1px solid var(--et-cloud); }
.rail--tips    { background: #fffaf7; }
.rail--stories { background: #fdf8f0; }
.rail__grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.rail__grid--2      { grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }

/* ===== Post card ===== */
.post-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; text-decoration: none !important; }
.post-card:hover, .post-card:focus { text-decoration: none !important; }
.post-card * { text-decoration: none !important; }
.post-card__media {
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4/3; background: var(--et-mint-100);
}
.post-card--feat .post-card__media { aspect-ratio: 16/11; }
.post-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__play {
  position: absolute; top: 10px; left: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(31,47,63,0.2); z-index: 2;
}
.post-card__lock {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(53,82,110,0.88); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center; z-index: 2;
}
.post-card__lock i { width: 13px; height: 13px; }
.post-card__tag {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-marine-300);
}
.post-card__tag--coral   { color: #c4613a; }
.post-card__tag--saffron { color: #a87828; }
.post-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 21px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--et-marine); margin: 2px 0 4px;
}
.post-card--feat .post-card__title { font-size: 28px; }
.post-card:hover .post-card__title { color: var(--et-marine-700); }
.post-card__excerpt {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55;
  color: var(--et-graphite); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card--feat .post-card__excerpt { -webkit-line-clamp: 3; font-size: 16px; }
.post-card__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--et-mist); flex-shrink: 0; }

/* Post list (sidebar) */
.post-list { display: flex; flex-direction: column; }
.post-list__item {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--et-cloud); cursor: pointer;
}
.post-list__item:first-child { padding-top: 0; }
.post-list__item:last-child  { border-bottom: 0; }
.post-list__media {
  aspect-ratio: 1; overflow: hidden; border-radius: 3px;
  background: var(--et-mint-100); position: relative;
}
.post-list__media img { width: 100%; height: 100%; object-fit: cover; }
.post-list__play {
  position: absolute; top: 5px; left: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; z-index: 2;
}
.post-list__meta {
  font-family: var(--font-sans); font-size: 11px; color: var(--et-graphite);
  letter-spacing: 0.03em; margin-bottom: 4px;
}
.post-list__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 16px; line-height: 1.25; color: var(--et-marine);
}

/* ===== Podcast strip ===== */
.podcast-strip {
  background: var(--et-marine); color: var(--et-mint); padding: 72px 0;
}
.podcast-strip .sec-head h2     { color: var(--et-mint); }
.podcast-strip .sec-head p      { color: rgba(186,231,230,0.8); }
.podcast-strip__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ep-card {
  background: var(--et-marine-700); border: 1px solid rgba(186,231,230,0.1);
  padding: 24px; border-radius: 3px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 160ms ease;
}
.ep-card:hover { border-color: rgba(186,231,230,0.3); }
.ep-card__num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 32px; color: var(--et-mint-300); line-height: 1; font-weight: 400;
}
.ep-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 18px; line-height: 1.25; color: var(--et-mint); margin: 0;
}
.ep-card__meta { font-family: var(--font-sans); font-size: 12px; color: var(--et-mint-300); }
/* (Legacy .ep-card__play styles removed — newer absolute-positioned styles
   live further down. Old rule was injecting padding-top that broke icon centering.) */

/* ===== Membership tiers ===== */
.tiers { padding: 0; background: transparent; }
.tiers__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 8px; }
.tiers__grid--2 { grid-template-columns: repeat(2,1fr); max-width: 760px; margin: 8px auto 0; }
.tier {
  background: var(--et-white); border: 1.5px solid var(--et-cloud);
  border-radius: 3px; padding: 32px; position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
.tier--pop { border-color: var(--et-marine); background: var(--et-marine); }
.tier--pop h3, .tier--pop .tier__price, .tier--pop .tier__sub, .tier--pop li, .tier--pop .tier__alt { color: var(--et-mint); }
.tier__badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--et-mint); color: var(--et-marine);
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px;
}
.tier h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--et-marine); margin: 0; }
.tier--pop h3 { color: var(--et-mint); }
.tier__price {
  font-family: var(--font-serif); font-weight: 700; font-size: 42px;
  color: var(--et-marine); letter-spacing: -0.02em; line-height: 1;
}
.tier__price small { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--et-graphite); }
.tier--pop .tier__price { color: var(--et-mint); }
.tier--pop .tier__price small { color: rgba(186,231,230,0.7); }
.tier__alt {
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
  padding-bottom: 10px; border-bottom: 1px dashed var(--et-cloud);
}
.tier--pop .tier__alt { color: rgba(186,231,230,0.75); border-color: rgba(186,231,230,0.2); }
.tier__alt strong { color: var(--et-marine); font-weight: 700; }
.tier--pop .tier__alt strong { color: var(--et-mint); }
.tier__sub { font-family: var(--font-serif); font-size: 15px; color: var(--et-graphite); margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; }
.tier li {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--et-marine);
  display: flex; align-items: flex-start; gap: 9px; line-height: 1.45;
}
.tier--pop li { color: var(--et-mint); }
.tier li i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--et-mint-500); }
.tier--pop li i { color: var(--et-mint-300); }
.tier__cta { margin-top: auto; padding-top: 8px; }

/* ===== Post page ===== */
.post-page { padding: 48px 0 80px; }
.post-hero { text-align: center; margin-bottom: 40px; }
.post-hero__rule {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 36px;
}
.post-hero__rule-line {
  flex: 1 1 0; height: 1px; background: var(--et-marine);
  opacity: 0.2;
}
.post-hero__tag {
  flex: 0 0 auto;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--et-marine-300); margin: 0;
  display: inline-flex; align-items: center;
}
.post-hero__tag-logo { height: 32px; width: auto; display: block; }
@media (max-width: 560px) { .post-hero__tag-logo { height: 24px; } }
.post-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.07;
  letter-spacing: -0.018em; color: var(--et-marine);
  margin: 0 0 16px; text-wrap: balance;
}
.post-hero__deck {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.55;
  color: var(--et-graphite); margin: 0 0 24px; text-wrap: pretty;
}
.post-hero__meta {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
  padding: 14px 0; border-top: 1px solid var(--et-cloud); border-bottom: 1px solid var(--et-cloud);
}
.post-hero__source { display: inline-flex; align-items: center; gap: 8px; color: var(--et-marine); font-weight: 500; }
.post-hero__monogram {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--et-marine);
  background: var(--et-mint); padding: 3px 7px; border-radius: 2px;
}
.post-hero__contrib { font-style: italic; color: var(--et-graphite); }

/* Video player */
.post-video {
  position: relative; aspect-ratio: 16/9;
  margin: 8px 0 36px; border-radius: 4px; overflow: hidden;
  cursor: pointer; background: var(--et-marine-900);
  box-shadow: 0 12px 40px rgba(31,47,63,0.16);
}
.post-video__poster { width: 100%; height: 100%; object-fit: cover; }
.post-video--embed { cursor: default; }
.post-video--embed iframe, .post-video--embed video { width: 100%; height: 100%; border: 0; display: block; }
.post-video--embed .kg-card, .post-video--embed figure { margin: 0; width: 100%; height: 100%; }
.post-video.is-playing .post-video__poster { filter: brightness(0.35); }
.post-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--et-marine); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(31,47,63,0.35);
  transition: transform 180ms ease;
}
.post-video:hover .post-video__play { transform: translate(-50%,-50%) scale(1.06); }
.post-video__chrome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(to top, rgba(31,47,63,0.85), transparent);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 12px; color: var(--et-mint-100);
}
.post-video__live {
  position: absolute; top: 14px; left: 14px;
  background: rgba(196,97,58,0.9); color: #fff;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.post-video__locked {
  position: absolute; inset: 0;
  background: rgba(31,47,63,0.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--et-mint); text-align: center; padding: 24px;
}
.post-video__lock-mark {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
}
.post-video__lock-title { font-family: var(--font-serif); font-weight: 700; font-size: 20px; }
.post-video__lock-sub   { font-family: var(--font-sans); font-size: 13px; color: var(--et-mint-300); }

/* Post body sections */
.post-section-title {
  font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  color: var(--et-marine); letter-spacing: -0.01em; margin: 44px 0 16px;
}
.post-summary {
  background: var(--et-mint-50); border: 1px solid var(--et-cloud);
  border-radius: 4px; padding: 22px 26px; margin-bottom: 8px;
}
.post-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.post-summary__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--et-mint); color: var(--et-marine);
  padding: 4px 10px; border-radius: 999px;
}
.post-summary__hint { font-family: var(--font-sans); font-size: 11px; color: var(--et-graphite); }
.post-summary__body {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: var(--et-ink); margin: 0;
}
.post-takeaways__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.post-takeaways__list li {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--et-cloud);
  font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--et-ink);
  align-items: baseline;
}
.post-takeaways__list li:last-child { border-bottom: 0; }
.post-takeaways__num {
  font-family: var(--font-serif); font-style: italic; font-size: 20px;
  color: #c4613a; font-weight: 400;
}
.post-checklist__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.post-checklist__row {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--et-white); border: 1px solid var(--et-cloud);
  border-radius: 3px; padding: 14px 16px;
}
.post-checklist__t {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a87828;
}
.post-checklist__d { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--et-ink); }

/* Transcript */
.post-transcript { margin-top: 24px; }
.post-transcript__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--et-cloud);
}
.post-transcript__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.post-transcript__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--et-marine); background: var(--et-mint-50, #eaf6f5);
  border: 1px solid var(--et-cloud); border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  text-decoration: none !important;
  transition: background 140ms, border-color 140ms;
}
.post-transcript__btn:hover { background: var(--et-mint); border-color: var(--et-mint); }
.post-transcript__btn--lock { background: #fff5e8; border-color: #ffd9a8; color: #8a5a1d; }
.post-transcript__btn--lock:hover { background: #ffead0; border-color: #ffb866; }

.post-transcript__body { font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--et-ink); }
.post-transcript__body p { margin: 0 0 18px; padding-left: 62px; position: relative; }
/* Two equivalent timestamp patterns coexist on the site:
   - Older Ghost-editor posts use <p><strong>MM:SS</strong> text</p>
   - Newer worker-generated posts use the same shape (we kill <span class="ts">
     before sending to Ghost because Ghost strips inline class attributes
     on <span> and the styling disappeared on production).
   Both render with the same pill treatment via the rule below. The
   :first-child selector keeps mid-paragraph <strong> emphasis as
   plain bold instead of accidentally pilling it too. */
.post-transcript__body p > strong:first-child,
.post-transcript__body .ts {
  position: absolute; left: 0; top: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  color: var(--et-marine); background: var(--et-mint-50, #eaf6f5);
  padding: 3px 8px; border-radius: 5px; letter-spacing: 0.04em;
  width: 50px; text-align: center; box-sizing: border-box;
}
/* Catch <p><strong>MM:SS</strong> text</p> where Ghost may have wrapped
   the strong in a span (rare, but possible after some editor saves).
   The combined selector means any strong-as-first-child becomes a pill. */
.post-transcript__body p strong { color: var(--et-marine); font-weight: 700; }
@media (max-width: 560px) {
  .post-transcript__body p { padding-left: 0; padding-top: 24px; }
  .post-transcript__body p > strong:first-child,
  .post-transcript__body .ts { top: 0; }
}
.post-transcript__body.is-collapsed {
  max-height: 420px; overflow: hidden; position: relative;
}
.post-transcript__body.is-collapsed::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 120px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
  pointer-events: none;
}
.post-transcript__expand {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px;
  background: var(--et-mint-50, #eaf6f5); border: 1px solid var(--et-cloud);
  border-radius: 10px; padding: 12px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--et-marine); cursor: pointer;
  transition: background 140ms;
}
.post-transcript__expand:hover { background: var(--et-mint); }
.post-transcript__expand.is-expanded i[data-lucide] { transform: rotate(180deg); }
.post-transcript__expand i[data-lucide] { transition: transform 180ms; }

/* Guest preview upgrade banner */
.post-transcript__body--preview {
  max-height: 280px; overflow: hidden; position: relative;
}
.post-transcript__body--preview::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 100px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 90%);
  pointer-events: none;
}
.post-transcript__upgrade {
  display: flex; align-items: center; gap: 16px;
  margin-top: 12px; padding: 20px 22px;
  background: var(--et-marine); color: var(--et-mint);
  border-radius: 14px;
}
.post-transcript__upgrade i[data-lucide]:first-child { color: var(--et-mint); flex-shrink: 0; }
.post-transcript__upgrade > div { flex: 1; }
.post-transcript__upgrade strong { font-family: var(--font-serif); font-size: 18px; color: #fff; display: block; margin: 0 0 4px; }
.post-transcript__upgrade p { font-family: var(--font-sans); font-size: 13px; color: var(--et-mint); margin: 0; opacity: 0.85; }
.post-transcript__upgrade .btn { flex-shrink: 0; }

/* Podcast post — platform chips */
.post-platforms { margin: 40px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--et-cloud); border-bottom: 1px solid var(--et-cloud); }
.post-platforms__label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--et-graphite); }
.post-platforms__list { display: flex; gap: 8px; flex-wrap: wrap; }
.post-platforms__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 999px; text-decoration: none !important; transition: filter 140ms, transform 140ms; }
.post-platforms__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.post-platforms__btn--apple    { background: #9933CC; }
.post-platforms__btn--spotify  { background: #1DB954; }
.post-platforms__btn--youtube  { background: #FF0000; }
.post-platforms__btn--instagram{ background: linear-gradient(135deg, #feda75 0%, #fa7e1e 28%, #d62976 55%, #962fbf 75%, #4f5bd5 100%); }

/* Podcast post — Ask AI widget */
.post-ask { margin: 32px 0 0; background: var(--et-frost, #f7f9fb); border: 1.5px solid var(--et-cloud); border-radius: 16px; padding: 20px 26px 24px; }
/* Header sits as positioned context for the absolutely-positioned
   sparkles icon. No flex involved — icon is pinned via top/left and
   the text gets left-padding to clear it. This sidesteps the Lucide
   hydration race that kept breaking the previous flex approach. */
.post-ask__head { position: relative; margin: 0 0 16px; padding-left: 32px; }
.post-ask__head-icon { position: absolute; top: 4px; left: 0; width: 22px; height: 22px; color: var(--et-mint-500); }
.post-ask__head-text { padding-right: 90px; }
/* Kill the inherited top space on the title — h3 ships with browser
   default margin-top in some style resets, and gh-content's
   "* + * { margin-top: 1.1em; }" rule was also catching it whenever
   the head had any preceding sibling whitespace text node. */
.post-ask__head h3 { margin-top: 0 !important; }
.post-ask__head p:first-child,
.post-ask__head-text > *:first-child { margin-top: 0 !important; }
.post-ask__head h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--et-marine); margin: 0 0 4px; letter-spacing: -0.015em; }
.post-ask__head p { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); margin: 0; line-height: 1.5; }
.post-ask__form { display: flex; gap: 10px; align-items: flex-start; }
.post-ask__input-wrap { flex: 1; position: relative; }
.post-ask__input { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 14px; padding: 10px 14px; border: 1.5px solid var(--et-cloud); border-radius: 10px; resize: vertical; height: 42px; min-height: 42px; max-height: 140px; outline: none; color: var(--et-marine); background: #fff; line-height: 1.45; transition: border-color 140ms; }
.post-ask__input::placeholder { color: #9aa6b3; }
.post-ask__input:focus { border-color: var(--et-mint-500); }

/* Cycling suggestion label — sits absolutely over the textarea, fades out when typing */
.post-ask__cycle {
  position: absolute; inset: 12px 14px auto 14px;
  display: flex; align-items: baseline; gap: 6px;
  pointer-events: none;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  color: #9aa6b3;
  transition: opacity 200ms ease;
}
.post-ask__cycle.is-hidden { opacity: 0; }
.post-ask__cycle-lead { flex: 0 0 auto; }
.post-ask__cycle-window {
  flex: 1; min-width: 0; height: 1.45em; overflow: hidden; position: relative;
}
.post-ask__cycle-track { display: flex; flex-direction: column; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .post-ask__cycle-track { animation: none !important; transform: none !important; }
}
.post-ask__cycle-item {
  display: block; height: 1.45em; line-height: 1.45em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-ask__submit { flex-shrink: 0; height: 42px; padding-top: 0; padding-bottom: 0; align-self: flex-start; }
.post-ask__hint { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin: 10px 0 0; min-height: 1em; }
.post-ask__hint.is-error { color: #c00; }
.post-ask__head { position: relative; }
.post-ask__reset { position: absolute; top: 0; right: 0; background: transparent; border: 1px solid var(--et-cloud); border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--et-graphite); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.post-ask__reset:hover { background: #fff0f0; border-color: #f5c6c6; color: #c00; }
.post-ask__thread {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 16px;
  /* Cap the thread height — past ~5 messages the panel would otherwise
     push the form off the screen on a normal laptop. Inner scroll keeps
     the input always visible. overscroll-behavior:contain stops the
     scroll-chain from rubber-banding the whole page. */
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Subtle inset border + padding so the scroll bounds are visually
     clear when content overflows. */
  border: 1px solid var(--et-cloud);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  /* Custom scrollbar styling that matches the editorial palette. */
  scrollbar-width: thin;
  scrollbar-color: var(--et-cloud) transparent;
}
.post-ask__thread::-webkit-scrollbar { width: 8px; }
.post-ask__thread::-webkit-scrollbar-thumb { background: var(--et-cloud); border-radius: 4px; }
.post-ask__thread::-webkit-scrollbar-thumb:hover { background: var(--et-mint-300); }
.post-ask__thread:empty { display: none; }
.post-ask__msg { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; padding: 12px 16px; border-radius: 14px; max-width: 88%; word-wrap: break-word; }
.post-ask__msg--user { background: var(--et-marine); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.post-ask__msg--asst { background: #fff; border: 1px solid var(--et-cloud); color: var(--et-ink); align-self: flex-start; border-bottom-left-radius: 4px; font-family: var(--font-serif); font-size: 15px; }
.post-ask__msg--asst p { margin: 0 0 0.7em; }
.post-ask__msg--asst p:last-child { margin: 0; }
.post-ask__msg--error { background: #fff5e8; border-color: #ffd9a8; color: #8a5a1d; }
.post-ask__msg .btn { margin-top: 10px; }
.post-ask__hint a { color: var(--et-marine); text-decoration: underline; text-underline-offset: 2px; }
.post-ask__hint a:hover { color: var(--et-mint-500); }

/* Sign-in gate (non-members) */
.post-ask__gate {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--et-cloud);
  border-radius: 12px; padding: 18px 22px;
}
.post-ask__gate-text { flex: 1 1 auto; min-width: 200px; }
.post-ask__gate strong { font-family: var(--font-serif); font-size: 17px; color: var(--et-marine); display: block; margin: 0 0 4px; }
.post-ask__gate p { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); margin: 0; line-height: 1.5; }
.post-ask__gate-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
/* Force readable contrast on the Sign-in CTA. The .btn--marine global
   utility sets navy bg but a cascade somewhere is dropping text color
   to navy too on this surface — set both explicitly with !important so
   the button reads as a solid CTA regardless of cascade order. */
.post-ask__gate-signin { background: var(--et-marine) !important; color: #fff !important; border-color: var(--et-marine) !important; }
.post-ask__gate-signin:hover { background: var(--et-marine-300, #2f4a66) !important; border-color: var(--et-marine-300, #2f4a66) !important; }

/* Episode number sits inline in the rule for podcast posts — italic mint
   "№ X" in the same script as the podcast list, ~2x the regular tag size. */
.post-hero__tag:has(.post-hero__tag-epnum) {
  font-size: 0; /* let the inner span define its own size */
}
.post-hero__tag-epnum {
  font-family: var(--font-serif); font-style: italic;
  font-size: 26px; font-weight: 400; line-height: 1;
  color: var(--et-mint-500);
  letter-spacing: -0.005em;
  text-transform: none;
}
@media (max-width: 560px) {
  .post-ask__form { flex-direction: column; }
  .post-ask__submit { align-self: stretch; }
  .post-ask__msg { max-width: 100%; }
}

/* Paywall */
.paywall {
  margin: 16px 0 0; background: var(--et-white);
  border: 1.5px solid var(--et-cloud); border-radius: 3px;
  padding: 36px; text-align: center; box-shadow: 0 4px 18px rgba(31,47,63,0.07);
  position: relative;
}
.paywall::before {
  content: ''; position: absolute; inset: 0; padding: 2px;
  background: var(--et-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.paywall__lock {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.paywall h3 { font-family: var(--font-serif); font-weight: 700; font-size: 26px; color: var(--et-marine); margin: 0 0 8px; }
.paywall p  { font-family: var(--font-serif); font-size: 16px; color: var(--et-graphite); margin: 0 0 22px; line-height: 1.55; }
.paywall__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.paywall__signin { margin-top: 16px; font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); }
.paywall__signin a { color: var(--et-marine); font-weight: 600; text-decoration: underline; }

/* Post foot */
.post-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--et-cloud); text-align: center; }
.post-foot .caption { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin: 0 0 12px; }
.post-foot__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.post-foot__toast {
  margin-top: 10px; font-family: var(--font-sans); font-size: 12px;
  color: var(--et-marine); font-weight: 500;
}
/* Gift Insider CTA — sits directly under the share row. Soft mint
   card so it reads as a secondary action, not competing with share. */
.post-gift {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 20px 0 0; padding: 16px 18px;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 12px;
  text-align: left;
}
.post-gift__icon {
  flex-shrink: 0; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--et-mint-100); border-radius: 10px;
  color: var(--et-mint-500);
}
.post-gift__icon svg { width: 20px; height: 20px; }
.post-gift__body { flex: 1 1 240px; min-width: 200px; }
.post-gift__body strong { display: block; font-family: var(--font-serif); font-size: 16px; color: var(--et-marine); margin: 0 0 2px; letter-spacing: -0.005em; }
.post-gift__body p { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); margin: 0; line-height: 1.5; }
.post-gift .btn { flex-shrink: 0; }
.post-credit {
  margin-top: 32px; padding: 18px 0 0; border-top: 1px solid var(--et-cloud);
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); line-height: 1.6;
}
.post-credit a { color: var(--et-marine); font-weight: 600; }
.post-credit__disclaimer { margin-top: 8px; opacity: 0.75; font-size: 12px; }

/* ===== Portal (sign up / sign in) ===== */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31,47,63,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadein 200ms ease;
}
.portal {
  width: 100%; max-width: 460px; max-height: calc(100vh - 48px);
  overflow-y: auto; background: var(--et-white); border-radius: 4px;
  box-shadow: 0 24px 56px rgba(31,47,63,0.18);
  animation: slideup 260ms cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.portal--rsvp { max-width: 500px; }
@keyframes fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.portal__close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--et-mint-50); border: 0; color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; z-index: 2;
}
.portal__close:hover { background: var(--et-mint); }
.portal__body { padding: 36px 30px 28px; }
.portal__head { text-align: center; margin-bottom: 24px; }
.portal__mark {
  width: 40px; height: 40px; margin: 0 auto 16px;
  background-image: url('../assets/logo-gradient.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.portal h2 { font-family: var(--font-serif); font-weight: 700; font-size: 24px; color: var(--et-marine); margin: 0 0 6px; }
.portal__sub { font-family: var(--font-serif); font-size: 15px; color: var(--et-graphite); margin: 0; line-height: 1.5; }
.portal__tiers { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.tier-pill {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1.5px solid var(--et-cloud); border-radius: 4px;
  background: var(--et-white); cursor: pointer; text-align: left;
  width: 100%; font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.tier-pill:hover { border-color: var(--et-marine-300); }
.tier-pill.is-selected { border-color: var(--et-marine); background: var(--et-mint-50); }
.tier-pill__radio {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--et-mist); flex-shrink: 0; position: relative;
}
.tier-pill.is-selected .tier-pill__radio { border-color: var(--et-marine); background: var(--et-marine); }
.tier-pill.is-selected .tier-pill__radio::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--et-mint);
}
.tier-pill__body { flex: 1; }
.tier-pill__name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--et-marine); }
.tier-pill__desc { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin-top: 2px; }
.tier-pill__badge {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--et-mint); color: var(--et-marine);
  font-family: var(--font-sans); font-weight: 700; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
}
.tier-pill__price {
  font-family: var(--font-serif); font-weight: 700; font-size: 17px;
  color: var(--et-marine); white-space: nowrap;
}
.tier-pill__price small { font-family: var(--font-sans); font-size: 11px; font-weight: 400; color: var(--et-graphite); }
.billing-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px;
}
.billing-toggle button {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  background: var(--et-white); border: 1.5px solid var(--et-cloud); border-radius: 4px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.billing-toggle button.is-on { border-color: var(--et-marine); background: var(--et-mint-50); }
.billing-toggle button strong { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--et-marine); }
.billing-toggle button span   { font-family: var(--font-sans); font-size: 11px; color: var(--et-graphite); }
.portal__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--et-mint-50);
  border: 1px solid var(--et-cloud); border-radius: 3px; margin-bottom: 14px;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
}
.portal__summary strong { color: var(--et-marine); font-family: var(--font-serif); font-size: 18px; }
.portal__success { text-align: center; padding: 8px 0; }
.portal__success-mark {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.portal__divider {
  text-align: center; font-family: var(--font-sans); font-size: 11px;
  color: var(--et-mist); letter-spacing: 0.12em; text-transform: uppercase;
  margin: 16px 0; position: relative;
}
.portal__divider::before, .portal__divider::after {
  content: ''; position: absolute; top: 50%; height: 1px;
  background: var(--et-cloud); width: calc(50% - 22px);
}
.portal__divider::before { left: 0; }
.portal__divider::after  { right: 0; }
.portal__foot {
  text-align: center; font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin-top: 16px;
}
.portal__foot a { color: var(--et-marine); font-weight: 600; text-decoration: none; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--et-marine); letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  font-family: var(--font-serif); font-size: 15px; padding: 11px 13px;
  border: 1.5px solid var(--et-cloud); border-radius: 4px;
  background: var(--et-white); color: var(--et-ink); outline: 0;
  transition: border-color 140ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--et-marine); }
.field__hint { font-family: var(--font-sans); font-size: 11px; color: var(--et-graphite); }
.account-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; margin-bottom: 14px;
  background: var(--et-paper); border-radius: 4px;
}
.account-card__name  { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--et-ink); }
.account-card__email { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }
.account-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--et-cloud);
  font-family: var(--font-sans); font-size: 13px;
}
.account-row:last-child { border-bottom: 0; }
.account-row__label { color: var(--et-graphite); }
.account-row__value { color: var(--et-marine); font-weight: 500; }

/* ===== Archive pages ===== */
.archive-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--et-cloud); }
.archive-hero__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.archive-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--et-marine); margin: 0 0 16px; text-wrap: balance;
}
.archive-hero__deck {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.55;
  color: var(--et-graphite); margin: 0 0 18px; text-wrap: pretty;
}
.archive-hero__stats {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-marine-300);
}
.archive-hero__stats strong { color: var(--et-marine); font-weight: 700; }
.archive-hero__pic {
  position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: 3px;
}
.archive-hero__pic::before {
  content: ''; position: absolute; inset: 0; padding: 3px;
  background: var(--et-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.archive-hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.archive-toolbar {
  position: sticky; top: 83px; z-index: 10;
  background: rgba(246,250,250,0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--et-cloud);
}
.archive-toolbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 32px; min-height: 54px;
}
.archive-tabs { display: flex; gap: 4px; }
.archive-tab {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  background: transparent; border: 0; color: var(--et-graphite);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 140ms ease;
  text-decoration: none;
  line-height: 1;
}
.archive-tab:hover,
.archive-tab:focus,
.archive-tab:focus-visible { background: var(--et-mint-50); color: var(--et-marine); text-decoration: none; }
.archive-tab.is-active,
.archive-tab.is-active:hover { background: var(--et-marine); color: var(--et-mint); text-decoration: none; }
.archive-tab__count { font-size: 11px; opacity: 0.7; text-decoration: none; }
.archive-sort {
  display: inline-flex; align-items: center; gap: 8px; color: var(--et-graphite); font-size: 13px;
}
.archive-sort select { font-family: var(--font-sans); font-size: 13px; background: transparent; border: 0; color: var(--et-marine); font-weight: 500; cursor: pointer; }
.archive-grid-wrap { padding: 48px 0 80px; }
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.arc-card { cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.arc-card__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; background: var(--et-mint-100);
}
.arc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.arc-card:hover .arc-card__media img { transform: scale(1.03); }
.arc-card__body { display: flex; flex-direction: column; gap: 6px; }
.arc-card__title {
  font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.22; color: var(--et-marine); margin: 2px 0 4px;
}
.arc-card:hover .arc-card__title { color: var(--et-marine-700); }
.archive-empty {
  padding: 48px 32px; text-align: center;
  font-family: var(--font-serif); font-size: 17px; color: var(--et-graphite);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.archive-empty p { margin: 0; }

/* ===== About page ===== */
.about-hero { padding: 80px 0 48px; border-bottom: 1px solid var(--et-cloud); }
.about-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px); line-height: 1.07;
  letter-spacing: -0.018em; color: var(--et-marine); margin: 14px 0 20px; text-wrap: balance;
}
.about-hero__deck {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.6;
  color: var(--et-graphite); margin: 0 0 16px; text-wrap: pretty;
}
.about-pillars { padding: 64px 0; background: var(--et-mint-50); border-bottom: 1px solid var(--et-cloud); }
.pillar-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.pillar {
  background: var(--et-white); border: 1px solid var(--et-cloud); border-radius: 3px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
}
.pillar__icon {
  width: 34px; height: 34px; border-radius: 4px;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.pillar h3 { font-size: 18px; }
.pillar p  { font-size: 14px; line-height: 1.55; }
.pillar--coral   .pillar__icon { background: rgba(196,97,58,0.14); color: #c4613a; }
.pillar--saffron .pillar__icon { background: rgba(168,120,40,0.14); color: #a87828; }
.pillar--mint    .pillar__icon { background: var(--et-mint); color: var(--et-marine); }
.pillar--marine  .pillar__icon { background: var(--et-marine); color: var(--et-mint); }
.pillar h3 { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--et-marine); margin: 0; }
.pillar p  { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--et-graphite); margin: 0; }
.about-quote { padding: 88px 0; }
.about-quote__q {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.3; color: var(--et-marine);
  margin: 0 0 16px; text-align: center; text-wrap: balance;
}
.about-quote__attr { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); text-align: center; }
.about-give { padding: 80px 0; background: var(--et-marine); color: var(--et-mint); }
.about-give .eyebrow { color: var(--et-mint-300); margin-bottom: 8px; }
.about-give h2  { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 1.1; color: var(--et-mint); margin: 0 0 14px; }
.about-give > .container--wide > .give-grid > div > p { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--et-mint-100); margin: 0 0 22px; }
.give-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.give-pic { aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; }
.give-pic img { width: 100%; height: 100%; object-fit: cover; }
.give-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.give-list li { font-family: var(--font-sans); font-size: 14px; color: var(--et-mint); display: flex; align-items: center; gap: 9px; }
.give-list li i { width: 15px; height: 15px; color: var(--et-mint-300); flex-shrink: 0; }
.about-cta { padding: 88px 0; }
.about-cta h2 { font-family: var(--font-serif); font-weight: 700; font-size: 38px; line-height: 1.1; color: var(--et-marine); margin: 0 0 10px; }
.about-cta p  { font-family: var(--font-serif); font-size: 17px; color: var(--et-graphite); margin: 0; }
.about-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.about-cta__small { margin-top: 10px; font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }

/* ===== Membership page ===== */
.memb-hero { padding: 80px 0 48px; text-align: center; }
.memb-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--et-marine); margin: 14px 0 16px; text-wrap: balance;
}
.memb-hero__deck { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--et-graphite); margin: 0; text-wrap: pretty; }
.memb-faq { padding: 72px 0; background: var(--et-mint-50); border-top: 1px solid var(--et-cloud); }
.faq-list { display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid var(--et-cloud); padding: 16px 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 18px;
  color: var(--et-marine); cursor: pointer; list-style: none; padding: 4px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 18px; height: 18px; color: var(--et-marine-300); transition: transform 200ms ease; flex-shrink: 0; }
.faq[open] summary i { transform: rotate(45deg); }
.faq p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--et-graphite); margin: 10px 0 4px; max-width: 620px; }

/* ===== Submit page ===== */
/* .submit-page intentionally has no rules — the inner sections own their layout. */
.submit-hero { padding: 64px 0 40px; }
.submit-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.08;
  letter-spacing: -0.018em; color: var(--et-marine); margin: 12px 0 16px;
}
.submit-hero__deck { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--et-graphite); margin: 0; text-wrap: pretty; }
.submit-stepper {
  display: flex; gap: 0; list-style: none; padding: 0; margin: 28px 0 0;
  border-top: 1px solid var(--et-cloud); padding-top: 20px;
}
.submit-stepper li {
  display: flex; align-items: center; gap: 8px; flex: 1;
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
}
.submit-stepper li span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--et-cloud); color: var(--et-graphite);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.submit-stepper li.is-on span { background: var(--et-marine); color: var(--et-mint); }
.submit-stepper li.is-on { color: var(--et-marine); font-weight: 500; }
.submit-body { padding: 48px 0 96px; }
.submit-card {
  background: var(--et-white); border: 1px solid var(--et-cloud); border-radius: 4px; padding: 36px; margin-bottom: 24px;
}
.submit-card--done { text-align: center; }
.submit-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 26px; color: var(--et-marine); margin: 0 0 8px; }
.submit-card__deck  { font-family: var(--font-serif); font-size: 16px; color: var(--et-graphite); margin: 0 0 24px; }
.submit-card__foot  { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.submit-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.submit-type {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  background: var(--et-white); border: 1.5px solid var(--et-cloud); border-radius: 4px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color 140ms ease, background 140ms ease;
}
.submit-type:hover  { border-color: var(--et-marine-300); }
.submit-type.is-on  { border-color: var(--et-marine); background: var(--et-mint-50); }
.submit-type__icon  { width: 32px; height: 32px; border-radius: 4px; background: var(--et-mint-50); color: var(--et-marine); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.submit-type strong { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--et-marine); display: block; margin-bottom: 3px; }
.submit-type__desc  { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.file-drop {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1.5px dashed var(--et-cloud); border-radius: 4px;
  cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
  transition: border-color 140ms ease;
}
.file-drop:hover { border-color: var(--et-marine); color: var(--et-marine); }
.radio-row { display: flex; flex-direction: column; gap: 10px; }
.radio-row label { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: var(--et-ink); cursor: pointer; }
.radio-row label input[type="radio"] { margin-top: 2px; accent-color: var(--et-marine); }
.radio-row label strong { color: var(--et-marine); }
.check-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.check-row label { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 13px; color: var(--et-ink); cursor: pointer; line-height: 1.5; }
.check-row label input[type="checkbox"] { margin-top: 2px; accent-color: var(--et-marine); }
.submit-done__mark {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.submit-done__steps { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; text-align: left; max-width: 340px; margin-left: auto; margin-right: auto; }
.submit-done__steps div { font-family: var(--font-sans); font-size: 14px; color: var(--et-graphite); }
.submit-done__steps strong { color: var(--et-marine); }
.submit-aside {
  background: var(--et-paper); border: 1px solid var(--et-cloud); border-radius: 4px;
  padding: 20px 24px; margin-top: 16px;
}
.submit-aside .eyebrow { margin-bottom: 10px; }
.submit-aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.submit-aside li { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); line-height: 1.5; }
.submit-aside li::before { content: '—'; margin-right: 8px; color: var(--et-marine-300); }

/* ===== Chat bubble (floating) ===== */
.chat-bubble-wrap {
  position: fixed; bottom: 28px; right: 28px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: opacity 320ms ease, transform 320ms ease;
}
.chat-bubble-wrap.is-hidden {
  opacity: 0; transform: translateY(14px); pointer-events: none;
}
/* On the Ask the Industry page, the sticky composer at the bottom of the chat
   card lives alongside the floating bubble. Lift the bubble's z-index over
   the composer so it stays tappable, and keep it visible regardless of any
   page-level scroll state (the messages scroll inside the card, not the
   document, so the footer-watcher isn't a useful signal here). */
body:has(.ai-page) .chat-bubble-wrap { z-index: 80; }
body:has(.ai-page) .chat-bubble-wrap.is-hidden { opacity: 1; transform: none; pointer-events: auto; }
@keyframes bubble-twirl {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-18deg) scale(1.15); }
  50%  { transform: rotate(22deg) scale(1.1); }
  75%  { transform: rotate(-8deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}
.chat-bubble.is-twirling svg { animation: bubble-twirl 650ms cubic-bezier(0.34,1.56,0.64,1) both; }
.chat-bubble {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--et-marine); color: var(--et-mint); border: 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 8px 24px rgba(31,47,63,0.22);
  transition: background 140ms ease, transform 140ms ease;
}
.chat-bubble:hover { background: var(--et-marine-700); transform: translateY(-1px); }
.chat-panel {
  width: 320px; background: var(--et-white); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(31,47,63,0.18); overflow: hidden;
  animation: slideup 260ms cubic-bezier(0.16,1,0.3,1);
}
.chat-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--et-marine); color: var(--et-mint);
}
.chat-panel__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.chat-panel__close {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(186,231,230,0.15); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-panel__close:hover { background: rgba(186,231,230,0.28); }
.chat-panel__body { padding: 20px; }
.chat-panel__coming { text-align: center; padding: 8px 0 16px; }
.chat-panel__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--et-mint-50); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.chat-panel__coming strong { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--et-marine); margin-bottom: 8px; }
.chat-panel__coming p { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--et-graphite); margin: 0 0 6px; }
.chat-panel__notify { font-family: var(--font-sans); font-size: 12px; color: var(--et-marine-300); font-style: italic; }

/* ===== Footer ===== */
.site-footer { background: var(--et-marine-900); color: var(--et-mint-100); padding: 52px 0 24px; }
.site-footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 28px; align-items: start; }
.site-footer__legal-bottom {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px;
}
.site-footer__legal-bottom a { color: inherit; opacity: 0.7; text-decoration: none; }
.site-footer__legal-bottom a:hover { opacity: 1; text-decoration: underline; }
.site-footer__legal-bottom .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; }
/* .site-footer__col — layout handled by .site-footer__grid; column itself is unstyled. */
.site-footer__col--brand {}
.site-footer__logo { height: 80px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: 0.9; }
.site-footer__col p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--et-mint-100); opacity: 0.7; margin: 0 0 20px; }
.site-footer__slogan { font-family: var(--font-sans) !important; font-size: 13px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--et-mint) !important; opacity: 0.9 !important; font-weight: 600; }
.site-footer h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-mint); margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer li a { font-family: var(--font-sans); font-size: 14px; color: var(--et-mint-100); opacity: 0.65; text-decoration: none; }
.site-footer li a:hover { opacity: 1; }
.newsletter-wrap { max-width: 340px; }
.newsletter-note {
  font-family: var(--font-sans); font-size: 11px; line-height: 1.5;
  color: var(--et-mint-100); opacity: 0.45; margin: 8px 0 0;
}
.newsletter-input {
  display: flex; gap: 8px;
  border-bottom: 1px solid rgba(186,231,230,0.3); padding-bottom: 6px;
}
.newsletter-input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--et-mint); font-family: var(--font-serif); font-size: 15px; padding: 8px 0;
}
.newsletter-input input::placeholder { color: var(--et-mint-300); opacity: 0.6; }
.newsletter-input button {
  background: transparent; border: 0; color: var(--et-mint);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; cursor: pointer;
}
.site-footer__bottom {
  border-top: 1px solid rgba(186,231,230,0.12); padding-top: 20px;
  display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;
  text-align: center;
  font-family: var(--font-sans); font-size: 12px; color: rgba(186,231,230,0.78);
}
.site-footer__bottom > * { opacity: 1; }
.site-footer__legal-bottom a { color: rgba(186,231,230,0.78); opacity: 1; }
.site-footer__legal-bottom a:hover { color: #fff; opacity: 1; }
.site-footer__legal-note { font-size: 10px; opacity: 0.6; line-height: 1.4; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--et-marine); color: var(--et-mint);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(31,47,63,0.18);
  z-index: 200; display: inline-flex; align-items: center; gap: 8px;
  animation: slideup 240ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}

/* ===== Shared animation ===== */
.tet-fade-in { animation: fadein 260ms cubic-bezier(0.16,1,0.3,1); }
.tet-main { min-height: 60vh; }

/* ===== Mobile ===== */
@media (max-width: 860px) {
  .container, .container--wide, .container--narrow { padding: 0 20px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex !important; }
  .header-actions .btn--ghost { display: none; }
  .site-header__inner { height: 60px; }
  .brand__logo { height: 52px; }

  .hero { padding: 40px 0 48px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__title { font-size: 30px; }
  .hero__deck { font-size: 16px; margin-bottom: 22px; }
  .hero__collage { grid-template-columns: 1fr 1fr; }
  .hero__collage-c { grid-column: 1 / 3; }

  .featured-strip__grid { grid-template-columns: 1fr; }
  .featured-strip__copy { padding: 24px 20px 28px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .sec-head h2 { font-size: 26px; }

  .rail { padding: 48px 0; }
  .rail__grid, .rail__grid--2 { grid-template-columns: 1fr; gap: 28px; }
  .post-card--feat .post-card__title { font-size: 22px; }

  .podcast-strip { padding: 48px 0; }
  .podcast-strip__grid { grid-template-columns: 1fr; gap: 14px; }

  .tiers { padding: 56px 0; }
  .tiers__grid, .tiers__grid--2 { grid-template-columns: 1fr; gap: 16px; }
  .tier { padding: 24px; }

  .archive-hero { padding: 32px 0 24px; }
  .archive-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .archive-hero__title { font-size: 28px; }
  .archive-toolbar { top: 59px; }
  .archive-toolbar__inner { padding: 10px 20px; flex-wrap: wrap; }
  .archive-grid-wrap { padding: 32px 0 56px; }
  .archive-grid { grid-template-columns: 1fr; gap: 24px; }

  .pillar-grid { grid-template-columns: 1fr; gap: 14px; }
  .give-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-hero { padding: 48px 0 24px; }
  .about-pillars { padding: 40px 0; }
  .about-quote { padding: 56px 0; }
  .about-give { padding: 48px 0; }
  .about-cta { padding: 56px 0; }

  .podcast-hero { padding: 32px 0 48px; }
  .podcast-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .podcast-hero__art { max-width: 260px; }

  .memb-hero { padding: 48px 0 24px; }
  .memb-faq { padding: 40px 0; }

  .submit-types { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }

  .post-page { padding: 28px 0 56px; }
  .post-hero__title { font-size: 26px; }
  .paywall { padding: 24px 18px; }
  .post-checklist__grid { grid-template-columns: 1fr; }
  .post-foot__actions { justify-content: center; }

  .site-footer { padding: 48px 0 20px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }

  .chat-bubble-wrap { bottom: 16px; right: 16px; }
  .chat-panel { width: calc(100vw - 32px); }
}
/* ===== The EventTalk · additional pages CSS ===== */

/* === Archive / topic === */
.archive-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--et-cloud);
}
.archive-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.archive-hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--et-marine);
  margin: 0 0 18px;
  text-wrap: balance;
}
.archive-hero__deck {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--et-graphite);
  margin: 0 0 24px;
  max-width: 540px;
  text-wrap: pretty;
}
.archive-hero__meta {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-marine-300);
}
.archive-hero__meta strong { color: var(--et-marine); font-weight: 700; }
.archive-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--et-marine-300); }
.archive-hero__pic {
  position: relative; aspect-ratio: 5 / 4;
  overflow: hidden; border-radius: 2px;
}
.archive-hero__pic::before {
  content: ''; position: absolute; inset: 0; padding: 3px;
  background: var(--et-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.archive-hero__pic img { width: 100%; height: 100%; object-fit: cover; }

.archive-toolbar {
  position: sticky; top: 83px; z-index: 10;
  background: rgba(246,250,250,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--et-cloud);
}
.archive-toolbar__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 14px 32px; min-height: 56px;
}
/* (Duplicate .archive-tabs / .archive-tab rules removed; canonical
   definitions live higher in this file with proper :focus / no-underline
   handling. Leaving the wrapper selector here so existing source-order
   assumptions in the file stay intact.) */
.archive-sort {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--et-graphite);
}
.archive-sort select {
  font-family: var(--font-sans); font-size: 13px;
  background: transparent; border: 0; color: var(--et-marine); font-weight: 500;
  cursor: pointer; padding: 4px 0;
}

.archive-grid-wrap { padding: 56px 0 80px; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
}
.arc-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.arc-card__media {
  position: relative; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 2px;
  background: var(--et-mint-100);
}
.arc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
.arc-card:hover .arc-card__media img { transform: scale(1.03); }
.arc-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 21px; line-height: 1.2;
  color: var(--et-marine); margin: 4px 0 6px;
}
.arc-card__body { display: flex; flex-direction: column; gap: 6px; }

.archive-end {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--et-cloud);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
  flex-wrap: wrap;
}

/* === Author page === */
.author-page { padding-bottom: 96px; }
.author-cover {
  height: 280px; overflow: hidden; position: relative; margin-bottom: -120px;
}
.author-cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.author-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(53,82,110,0.12) 0%, var(--et-paper) 100%);
}
.author-card {
  position: relative; z-index: 2;
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 2px;
  padding: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: flex-start;
  box-shadow: var(--shadow-md);
}
.author-card__avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  border: 4px solid var(--et-white);
  box-shadow: 0 0 0 1px var(--et-cloud);
  flex-shrink: 0;
}
.author-card__name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 40px; line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--et-marine); margin: 6px 0 4px;
}
.author-card__role {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--et-graphite); margin-bottom: 16px;
}
.author-card__bio {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: var(--et-ink); margin: 0 0 20px; max-width: 640px;
}
.author-card__stats {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
  margin-bottom: 22px; flex-wrap: wrap;
}
.author-card__stats strong { color: var(--et-marine); font-weight: 700; }
.author-card__stats .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--et-mist); }
.author-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* === About page === */
.about-hero { padding: 80px 0 48px; }
.about-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--et-marine); margin: 16px 0 24px;
  text-wrap: balance;
}
.about-hero__deck {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.55;
  color: var(--et-graphite); text-wrap: pretty; margin: 0;
}
.about-pillars { padding: 64px 0 96px; border-top: 1px solid var(--et-cloud); border-bottom: 1px solid var(--et-cloud); background: var(--et-mint-50); }
.pillar-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.pillar {
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 2px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.pillar__icon {
  width: 44px; height: 44px;
  border-radius: 4px;
  background: var(--et-mint);
  color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.pillar h3 {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--et-marine); margin: 0;
}
.pillar p {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: var(--et-graphite); margin: 0;
}

.about-quote { padding: 96px 0; }
.about-quote__q {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.25; color: var(--et-marine);
  margin: 0 0 18px; text-align: center; text-wrap: balance;
}
.about-quote__attr {
  font-family: var(--font-sans); font-size: 14px;
  color: var(--et-graphite); text-align: center;
}

.about-give { padding: 80px 0; background: var(--et-marine); color: var(--et-mint); }
.about-give .eyebrow { color: var(--et-mint-300); }
.about-give h2 { color: var(--et-mint); font-size: 38px; line-height: 1.1; margin: 12px 0 18px; }
.about-give p { color: var(--et-mint-100); opacity: 0.85; font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.give-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.give-pic {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  position: relative;
}
.give-pic::before {
  content: ''; position: absolute; inset: 0; padding: 3px;
  background: var(--et-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.give-pic img { width: 100%; height: 100%; object-fit: cover; }
.give-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.give-list li {
  font-family: var(--font-sans); font-size: 14px; color: var(--et-mint);
  display: flex; align-items: center; gap: 10px;
}
.give-list li i { width: 16px; height: 16px; color: var(--et-mint-300); }

.about-cta { padding: 96px 0; }
.about-cta h2 { font-size: 42px; line-height: 1.1; margin: 0 0 12px; color: var(--et-marine); }
.about-cta p { font-size: 18px; color: var(--et-graphite); margin: 0; }

/* === Membership page === */
.memb-hero { padding: 80px 0 56px; text-align: center; }
.memb-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05; letter-spacing: -0.018em;
  color: var(--et-marine); margin: 16px 0 18px; text-wrap: balance;
}
.memb-hero__deck {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.55;
  color: var(--et-graphite); margin: 0; text-wrap: pretty;
}
.memb-faq { padding: 80px 0; background: var(--et-mint-50); border-top: 1px solid var(--et-cloud); }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq {
  border-bottom: 1px solid var(--et-cloud);
  padding: 18px 0;
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 19px;
  color: var(--et-marine); cursor: pointer; list-style: none;
  padding: 6px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 20px; height: 20px; color: var(--et-marine-300); transition: transform 220ms var(--ease-out); }
.faq[open] summary i { transform: rotate(45deg); }
.faq p {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: var(--et-graphite); margin: 12px 0 0; max-width: 640px;
}

/* === Search overlay === */
.search-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31,47,63,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 80px 24px 24px;
  animation: scrim-in 220ms var(--ease-out);
}
.search-shell {
  width: 100%; max-width: 720px;
  background: var(--et-white);
  border-radius: 4px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 104px);
  animation: portal-in 280ms var(--ease-out);
}
.search-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--et-cloud);
  color: var(--et-marine-300);
}
.search-bar input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-serif); font-size: 18px;
  color: var(--et-ink);
}
.search-bar input::placeholder { color: var(--et-marine-300); opacity: 0.6; }
.search-bar__close { background: transparent; border: 0; color: var(--et-graphite); cursor: pointer; }

.search-body { padding: 18px 22px 22px; overflow-y: auto; }
.search-section + .search-section { margin-top: 24px; }
.search-section__head {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--et-marine-300); margin-bottom: 12px;
}
.search-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggest__chip {
  font-family: var(--font-sans); font-size: 13px;
  padding: 8px 14px; border: 1px solid var(--et-cloud); background: var(--et-mint-50);
  border-radius: 999px; color: var(--et-marine); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 140ms var(--ease-quick);
}
.search-suggest__chip:hover { border-color: var(--et-marine); }

.search-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.search-topic {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-radius: 4px;
  font-family: var(--font-serif); font-size: 16px; color: var(--et-marine);
  text-decoration: none;
}
.search-topic:hover { background: var(--et-mint-50); }
.search-topic__count {
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
}

.search-results { display: flex; flex-direction: column; gap: 4px; }
.search-result {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 12px; border: 0; background: transparent; border-radius: 4px;
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit;
  transition: background 140ms var(--ease-quick);
}
.search-result:hover { background: var(--et-mint-50); }
.search-result__thumb { aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--et-mint-100); }
.search-result__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result__title {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px; line-height: 1.3;
  color: var(--et-marine); margin: 4px 0 4px;
}
.search-result__meta { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }
.search-empty { font-family: var(--font-serif); font-size: 16px; color: var(--et-graphite); padding: 24px 0; text-align: center; }

/* === Podcast page === */
.podcast-hero {
  background: var(--et-marine);
  color: var(--et-mint);
  padding: 64px 0 80px;
}
.podcast-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas: "text image";
  gap: 56px; align-items: center;
}
.podcast-hero__right { grid-area: text; }
.podcast-hero__art   { grid-area: image; }
.podcast-hero__art {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--et-gradient-brand);
}
.podcast-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.podcast-hero__right { color: var(--et-mint); }
.podcast-hero__logo {
  display: block; width: auto; height: auto;
  max-width: 340px; max-height: 200px;
  margin: 0 auto 24px 0;
  object-fit: contain; object-position: left center;
}
@media (max-width: 860px) {
  .podcast-hero__logo { max-height: 160px; margin: 0 auto 20px; object-position: center; }
}
.podcast-hero__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05;
  letter-spacing: -0.018em; color: #fff;
  margin: 0 0 12px;
}
.podcast-hero__meta {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--et-mint); font-weight: 500; opacity: 0.85;
  margin: 0 0 22px;
}
.podcast-hero__deck {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.55;
  color: var(--et-mint-100, var(--et-mint)); opacity: 0.9; margin: 0 0 28px;
}
.podcast-hero__actions {
  display: flex; flex-direction: row; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 24px;
}
.podcast-hero__listen {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.podcast-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.podcast-hero__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; color: #fff;
  text-decoration: none !important;
  transition: transform 140ms var(--ease-quick), filter 140ms;
}
.podcast-hero__chip:hover { filter: brightness(1.08); transform: translateY(-2px); }
.podcast-hero__chip--apple     { background: #9933CC; }
.podcast-hero__chip--spotify   { background: #1DB954; }
.podcast-hero__chip--youtube   { background: #FF0000; }
.podcast-hero__chip--instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #515BD4 100%); }
.podcast-listen-on {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--et-mint); text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(186,231,230,0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms var(--ease-quick);
}
.podcast-listen-on:hover { background: rgba(186,231,230,0.08); border-color: var(--et-mint); }
.podcast-hero__stats {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-mint-300);
}
.podcast-hero__stats strong { color: var(--et-mint); font-weight: 700; }
.podcast-hero__stats .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--et-mint-300); }

.ep-list { display: flex; flex-direction: column; }

/* View toggle (list vs gallery) */
.ep-toolbar {
  display: flex; justify-content: flex-end; align-items: center;
  margin: 0 0 20px;
}
.ep-view-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--et-mint-50, #eaf6f5);
  border: 1px solid var(--et-cloud);
  border-radius: 999px;
  padding: 4px;
}
.ep-view-toggle__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--et-graphite);
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  transition: background 140ms ease, color 140ms ease;
}
.ep-view-toggle__btn:hover { color: var(--et-marine); }
.ep-view-toggle__btn.is-active {
  background: #fff; color: var(--et-marine);
  box-shadow: 0 1px 3px rgba(15, 25, 50, 0.08);
}

/* ── List mode (default) ── */
.ep-row {
  display: grid; grid-template-columns: 80px auto 1fr auto; gap: 20px; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--et-cloud);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 140ms var(--ease-quick);
}
.ep-row__thumb {
  height: 108px;
  border-radius: 8px; overflow: hidden;
  background: var(--et-mint-50, #eaf6f5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ep-row__thumb img {
  height: 100%; width: auto; max-width: none;
  display: block;
}
.ep-row__thumb:empty { display: none; }
.ep-row__body { display: flex; flex-direction: column; }
@media (max-width: 560px) {
  .ep-row { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .ep-row__thumb { display: none; }
}

/* ── Gallery mode ── */
.ep-list--gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 24px;
  flex-direction: row !important;
}
.ep-list--gallery .ep-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0;
  border-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.ep-list--gallery .ep-row:hover {
  background: transparent; padding-left: 0; padding-right: 0; margin: 0;
}
.ep-list--gallery .ep-row:hover .ep-row__thumb img { transform: scale(1.04); }
.ep-list--gallery .ep-row__thumb {
  width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 12px;
  margin-bottom: 14px; min-height: 0;
  background: var(--et-mint-50, #eaf6f5);
  display: block;
}
.ep-list--gallery .ep-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 320ms var(--ease-quick);
}
.ep-list--gallery .ep-row__num {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,0.92);
  padding: 4px 10px; border-radius: 999px;
  font-size: 14px; line-height: 1;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.ep-list--gallery .ep-row__body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 4px;
}
.ep-list--gallery .ep-row__title { font-size: 18px; margin: 0 0 4px; }
.ep-list--gallery .ep-row__excerpt { -webkit-line-clamp: 3; margin: 0; }
.ep-list--gallery .ep-row.is-expanded .ep-row__excerpt {
  -webkit-line-clamp: unset; display: block; overflow: visible;
}
.ep-row__more {
  display: none;
  align-self: flex-start;
  background: transparent; border: 0; padding: 4px 0;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--et-marine); cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: underline; text-decoration-color: var(--et-mint-300);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.ep-row__more:hover { color: var(--et-marine-700, var(--et-marine)); text-decoration-color: var(--et-marine); }
.ep-list--gallery .ep-row__more[data-has-overflow] { display: inline-block; }
.ep-list--gallery .ep-row__play {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px;
  box-shadow: 0 4px 14px rgba(15,25,50,0.18);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 200ms var(--ease-quick), transform 200ms var(--ease-quick);
}
.ep-list--gallery .ep-row:hover .ep-row__play,
.ep-list--gallery .ep-row:focus-within .ep-row__play {
  opacity: 1; transform: translateY(0);
}
@media (hover: none) {
  .ep-list--gallery .ep-row__play { opacity: 1; transform: none; }
}
.ep-row, .ep-row:hover, .ep-row:focus, .ep-row:visited { text-decoration: none !important; }
.ep-row * { text-decoration: none !important; }
.ep-row:hover { background: var(--et-mint-50); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.ep-row__num {
  font-family: var(--font-serif); font-style: italic; font-size: 54px;
  color: var(--et-mint-500); font-weight: 400; line-height: 1;
  letter-spacing: -0.02em;
}
.ep-row__title {
  font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.25;
  color: var(--et-marine); margin: 0 0 6px;
}
.ep-row__excerpt {
  font-family: var(--font-serif); font-size: 15.5px; line-height: 1.55;
  color: var(--et-graphite); margin: 4px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ep-row__meta {
  font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite);
  letter-spacing: 0.02em;
}
@media (max-width: 560px) {
  .ep-row__excerpt { -webkit-line-clamp: 2; font-size: 13px; }
}
.ep-row__play {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ep-row__play:hover { background: var(--et-mint-300); }

/* Podcast page — pagination */
.ep-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding: 14px 0 0; }
/* Hide pagination on the Back Issues (spines) view — every episode is
   already on the shelf, so Newer/Older are noise. */
body[data-ep-view-spines] .ep-pagination { display: none !important; }
.ep-pagination__btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--et-marine); background: var(--et-mint-50, #eaf6f5); border: 1px solid var(--et-cloud); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background 140ms, opacity 140ms; }
.ep-pagination__btn:hover:not(:disabled) { background: var(--et-mint); border-color: var(--et-mint); }
.ep-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ep-pagination__info { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--et-graphite); letter-spacing: 0.04em; }

/* Podcast page — social/listen footer */
.podcast-social { background: var(--et-marine); color: var(--et-mint); padding: 56px 0 64px; }
.podcast-social__title { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 24px; letter-spacing: -0.015em; }
.podcast-social__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.podcast-social__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: #fff;
  padding: 14px 20px; border-radius: 12px;
  text-decoration: none !important;
  transition: transform 140ms var(--ease-quick), filter 140ms;
}
.podcast-social__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.podcast-social__btn--apple     { background: #9933CC; }
.podcast-social__btn--spotify   { background: #1DB954; }
.podcast-social__btn--youtube   { background: #FF0000; }
.podcast-social__btn--instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #515BD4 100%); }
@media (max-width: 560px) {
  .podcast-social__grid { grid-template-columns: 1fr 1fr; }
}

/* === Mobile breakpoints === */
@media (max-width: 860px) {
  .archive-hero { padding: 32px 0 24px; }
  .archive-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .archive-hero__title { font-size: 30px; }
  .archive-hero__deck { font-size: 16px; }
  .archive-toolbar { top: 59px; }
  .archive-toolbar__inner { padding: 12px 20px; gap: 10px; flex-wrap: wrap; }
  .archive-tab { padding: 6px 10px; font-size: 12px; }
  .archive-grid-wrap { padding: 32px 0 56px; }
  .archive-grid { grid-template-columns: 1fr; gap: 28px; }

  .author-cover { height: 180px; margin-bottom: -80px; }
  .author-card { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
  .author-card__avatar { width: 88px; height: 88px; }
  .author-card__name { font-size: 28px; }
  .author-card__bio { font-size: 16px; }

  .about-hero { padding: 48px 0 24px; }
  .about-pillars { padding: 40px 0 56px; }
  .pillar-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar { padding: 24px; }
  .about-quote { padding: 56px 0; }
  .about-give { padding: 48px 0; }
  .give-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-give h2 { font-size: 28px; }
  .about-cta { padding: 56px 0; }
  .about-cta h2 { font-size: 30px; }

  .memb-hero { padding: 48px 0 24px; }
  .memb-faq { padding: 48px 0; }
  .faq summary { font-size: 17px; }

  .search-scrim { padding: 60px 16px 16px; }
  .search-shell { max-height: calc(100vh - 76px); }
  .search-bar { padding: 14px 16px; }
  .search-bar input { font-size: 16px; }
  .search-topics { grid-template-columns: 1fr; }

  .podcast-hero { padding: 32px 0 48px; }
  .podcast-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "text";
    gap: 28px; justify-items: center; text-align: center;
  }
  .podcast-hero__art { aspect-ratio: 1; max-width: 320px; width: 100%; }
  .podcast-hero__right { width: 100%; max-width: 520px; }
  .podcast-hero__title { font-size: 26px; }
  .podcast-hero__deck { font-size: 16px; margin-bottom: 22px; }
  .podcast-hero__actions { align-items: center; justify-content: center; flex-direction: column; }
  .podcast-hero__listen { justify-content: center; width: 100%; }
  .podcast-hero__listen .btn { width: 100%; max-width: 320px; justify-content: center; }
  .podcast-hero__chips { justify-content: center; }
  .ep-row { grid-template-columns: 72px 1fr auto; gap: 16px; padding: 16px 0; }
  .ep-row__num { font-size: 44px; }
  .ep-row__title { font-size: 16px; }
}

/* ============================================================
   Ghost-specific overrides — post content, KG cards, comments,
   pagination, search, member status states.
   ============================================================ */

/* Ghost post content typography & spacing inside .gh-content */
.gh-content {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.72;
  color: var(--et-ink);
  margin: 0 auto;
  max-width: 720px;
}
.gh-content > * + * { margin-top: 1.1em; }
.gh-content h2,
.gh-content h3,
.gh-content h4 {
  font-family: var(--font-serif);
  color: var(--et-marine);
  letter-spacing: -0.01em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.gh-content h2 { font-size: 28px; }
.gh-content h3 { font-size: 22px; }
.gh-content h4 { font-size: 19px; }
.gh-content p,
.gh-content ul,
.gh-content ol,
.gh-content blockquote { font-family: var(--font-serif); }
.gh-content a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-underline-offset: 3px;
}
.gh-content a:hover { text-decoration-color: var(--et-marine); }
.gh-content blockquote {
  border-left: 3px solid var(--et-mint);
  padding: 8px 0 8px 22px;
  font-style: italic;
  color: var(--et-marine);
  margin: 1.4em 0;
}
.gh-content blockquote.kg-blockquote-alt,
.gh-content .kg-callout-card { background: var(--et-mint-50); padding: 20px 24px; border-radius: 4px; border-left: 0; }
.gh-content code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--et-mint-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em; color: var(--et-marine-700);
}
.gh-content pre {
  background: var(--et-marine-900); color: var(--et-mint);
  padding: 20px 22px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 14px;
  overflow-x: auto;
}
.gh-content pre code { background: transparent; border: 0; color: inherit; padding: 0; }
.gh-content hr {
  border: 0; height: 1px; background: var(--et-cloud); margin: 2em 0;
}
.gh-content ul, .gh-content ol { padding-left: 22px; }
.gh-content li { margin: 0.4em 0; }
.gh-content figure { margin: 1.8em 0; }
.gh-content figure img { width: 100%; border-radius: 4px; }

/* Ghost embed cards (YouTube, Vimeo, etc.) — make iframes responsive
   with a 16:9 aspect ratio container. The composer ships YouTube as
   a raw <iframe width="560" height="315">; without this rule it
   would render at fixed 560x315 in the post body. */
.gh-content .kg-embed-card { margin: 1.8em 0; max-width: 100%; }
.gh-content .kg-embed-card iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
  display: block;
}

/* Transcript timestamps. The composer wraps each segment timestamp
   in <span class="ts">MM:SS</span> inside a <p>. Style it so it
   reads as metadata not body prose: smaller, tabular, gray, slight
   right margin so the transcript text breathes. */
.gh-content .ts {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78em;
  color: var(--et-graphite);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.gh-content figcaption {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--et-graphite); margin-top: 8px; text-align: center;
}

/* Ghost Koenig wide / full image cards */
.kg-width-wide  { max-width: 1040px; margin-left: auto; margin-right: auto; }
.kg-width-full  { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-width-full img { width: 100vw; border-radius: 0; }

.kg-bookmark-card {
  border: 1px solid var(--et-cloud); border-radius: 4px; overflow: hidden;
  display: flex; min-height: 144px; text-decoration: none;
  background: var(--et-white); margin: 1.4em 0;
}
.kg-bookmark-card:hover { border-color: var(--et-marine-300); }
.kg-bookmark-content { flex: 2; padding: 18px 22px; display: flex; flex-direction: column; }
.kg-bookmark-title    { font-family: var(--font-serif); font-weight: 700; color: var(--et-marine); font-size: 17px; }
.kg-bookmark-description { font-family: var(--font-serif); font-size: 14px; color: var(--et-graphite); margin: 6px 0; flex: 1; }
.kg-bookmark-metadata { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); display: flex; gap: 8px; }
.kg-bookmark-thumbnail { flex: 1; min-height: 144px; background-size: cover; background-position: center; }
.kg-bookmark-thumbnail img { object-fit: cover; width: 100%; height: 100%; }
.kg-button-card .kg-btn {
  display: inline-block; padding: 12px 22px;
  background: var(--et-marine); color: var(--et-mint);
  font-family: var(--font-sans); font-weight: 600;
  border-radius: 4px; text-decoration: none;
}
.kg-product-card { border: 1px solid var(--et-cloud); padding: 22px; border-radius: 4px; }
.kg-toggle-card { border-bottom: 1px solid var(--et-cloud); padding: 14px 0; }
.kg-toggle-heading-text { font-family: var(--font-serif); font-weight: 700; color: var(--et-marine); }
.kg-video-card video, .kg-audio-card audio { width: 100%; }

/* Pagination */
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: 48px 0; max-width: 720px; margin: 0 auto;
  font-family: var(--font-sans); font-size: 13px;
}
.pagination a {
  color: var(--et-marine); text-decoration: none;
  font-weight: 600; padding: 10px 16px;
  border: 1px solid var(--et-cloud); border-radius: 999px;
}
.pagination a:hover { border-color: var(--et-marine); }
.pagination .page-number { color: var(--et-graphite); }

/* Section header — for index/tag templates */
.index-hero {
  padding: 64px 0 24px;
  border-bottom: 1px solid var(--et-cloud);
}
.index-hero h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px); line-height: 1.05;
  letter-spacing: -0.018em; color: var(--et-marine);
  margin: 12px 0 16px; text-wrap: balance;
}
.index-hero p {
  font-family: var(--font-serif); font-size: 18px;
  color: var(--et-graphite); margin: 0; max-width: 640px;
}

/* Feature card — used by index posts grid */
.post-grid-wrap { padding: 56px 0 80px; }
.post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
}
@media (max-width: 860px) {
  .post-grid { grid-template-columns: 1fr; gap: 28px; }
  .index-hero { padding: 32px 0 16px; }
  .index-hero h1 { font-size: 30px; }
  .post-grid-wrap { padding: 32px 0 56px; }
}

/* Author hero (Ghost author page) */
.author-cover { height: 280px; overflow: hidden; position: relative; margin-bottom: -120px; }
.author-cover.no-image { height: 80px; background: var(--et-mint-100); margin-bottom: -40px; }
.author-cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.author-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(53,82,110,0.12) 0%, var(--et-paper) 100%);
}
.author-page { padding-bottom: 96px; }
.author-card {
  position: relative; z-index: 2;
  background: var(--et-white); border: 1px solid var(--et-cloud);
  border-radius: 4px; padding: 40px;
  display: grid; grid-template-columns: auto 1fr; gap: 32px;
  align-items: flex-start; box-shadow: var(--shadow-md);
}
.author-card__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 4px solid var(--et-white); box-shadow: 0 0 0 1px var(--et-cloud);
  flex-shrink: 0; background-color: var(--et-mint);
}
.author-card__name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.018em;
  color: var(--et-marine); margin: 6px 0 4px;
}
.author-card__role { font-family: var(--font-sans); font-size: 14px; color: var(--et-graphite); margin-bottom: 16px; }
.author-card__bio { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--et-ink); margin: 0 0 20px; max-width: 640px; }
.author-card__stats {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
  margin-bottom: 22px; flex-wrap: wrap;
}
.author-card__stats strong { color: var(--et-marine); font-weight: 700; }
@media (max-width: 860px) {
  .author-cover { height: 180px; margin-bottom: -80px; }
  .author-card { padding: 24px; grid-template-columns: 1fr; gap: 18px; }
  .author-card__avatar { width: 88px; height: 88px; }
  .author-card__name { font-size: 28px; }
}

/* Events page card */
.ev-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.ev-card {
  background: var(--et-white); border: 1px solid var(--et-cloud);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ev-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--et-mint-100); }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ev-card__date {
  position: absolute; top: 14px; left: 14px;
  background: var(--et-white); padding: 8px 12px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-sans); box-shadow: 0 4px 14px rgba(31,47,63,0.18);
}
.ev-card__month { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-marine-300); }
.ev-card__day { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--et-marine); line-height: 1; }
.ev-card__weekday { font-size: 9px; color: var(--et-graphite); letter-spacing: 0.1em; text-transform: uppercase; }
.ev-card__status {
  position: absolute; bottom: 12px; right: 12px;
  padding: 5px 10px; font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; border-radius: 999px;
}
.ev-card__status--open { background: rgba(74,138,106,0.92); color: #fff; }
.ev-card__status--wait { background: rgba(201,149,72,0.94); color: #fff; }
.ev-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ev-card__kind { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-marine-300); }
.ev-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--et-marine); margin: 0; }
.ev-card__lead { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--et-graphite); margin: 0; }
.ev-card__detail { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }
.ev-card__detail span { display: inline-flex; align-items: center; gap: 6px; }
.ev-card__bar { height: 4px; background: var(--et-cloud); border-radius: 999px; overflow: hidden; }
.ev-card__bar span { display: block; height: 100%; background: var(--et-marine); }
.ev-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.ev-card__price { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }
.ev-card__price strong { color: var(--et-marine); font-weight: 700; }
.events-page .events-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--et-cloud); }
.events-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.events-hero__title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.06; color: var(--et-marine); margin: 14px 0 18px; letter-spacing: -0.018em; }
.events-hero__deck { font-family: var(--font-serif); font-size: 18px; color: var(--et-graphite); line-height: 1.55; margin: 0 0 20px; }
.events-hero__counts { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.events-hero__counts > div { display: flex; flex-direction: column; }
.events-hero__counts span { font-family: var(--font-serif); font-weight: 700; font-size: 32px; color: var(--et-marine); line-height: 1; }
.events-hero__counts label { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--et-graphite); margin-top: 4px; }
.events-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.events-hero__panel { background: var(--et-marine); color: var(--et-mint); border-radius: 4px; padding: 28px; }
.events-hero__panel-rule { width: 36px; height: 2px; background: var(--et-mint); margin-bottom: 16px; }
.events-hero__panel-title { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--et-mint); margin: 4px 0 10px; line-height: 1.2; }
.events-hero__panel-meta { font-family: var(--font-sans); font-size: 13px; color: var(--et-mint-300); margin-bottom: 4px; }
.events-hero__panel-meta strong { color: var(--et-mint); font-weight: 700; }
.events-hero__panel-venue { font-family: var(--font-sans); font-size: 13px; color: var(--et-mint-300); margin-bottom: 16px; }
.events-hero__panel-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-family: var(--font-sans); font-size: 12px; color: var(--et-mint-300); }
.events-hero__panel-legend .lg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.lg--free { background: var(--et-mint); }
.lg--public { background: var(--et-marine-300); }
.events-host {
  margin-top: 56px; padding: 32px;
  background: var(--et-mint); color: var(--et-marine); border-radius: 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.events-host h3 { font-family: var(--font-serif); font-weight: 700; font-size: 26px; color: var(--et-marine); margin: 4px 0 8px; }
.events-host p { font-family: var(--font-serif); font-size: 15px; color: var(--et-marine-700); margin: 0; max-width: 540px; }
@media (max-width: 860px) {
  .events-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .ev-grid { grid-template-columns: 1fr; }
  .events-host { padding: 24px; }
}

/* Submission form (Ghost-friendly) */
.tet-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.tet-form select,
.tet-form textarea {
  font-family: var(--font-serif); font-size: 15px; padding: 12px 14px;
  border: 1.5px solid var(--et-cloud); border-radius: 4px;
  background: var(--et-white); color: var(--et-ink); outline: 0;
  transition: border-color 140ms ease; width: 100%;
}
.tet-form input[type="radio"],
.tet-form input[type="checkbox"] { width: auto; padding: 0; border: none; background: none; flex-shrink: 0; }
.tet-form input:focus, .tet-form textarea:focus, .tet-form select:focus { border-color: var(--et-marine); }
.tet-form .field { margin-bottom: 14px; }
.tet-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tet-form .form-status { font-family: var(--font-sans); font-size: 13px; color: var(--et-marine); margin-top: 12px; }
.tet-form .form-status.is-error { color: var(--danger); }
@media (max-width: 860px) {
  .tet-form .field-row { grid-template-columns: 1fr; }
}

/* Members-only banner / status (used in post when locked or on assistant page) */
.member-only-banner {
  background: var(--et-mint-50); border: 1px solid var(--et-cloud);
  padding: 20px 24px; border-radius: 4px; margin: 24px 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.member-only-banner__icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--et-mint);
  color: var(--et-marine); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.member-only-banner__body { flex: 1; font-family: var(--font-sans); font-size: 14px; color: var(--et-marine); line-height: 1.5; }
.member-only-banner__body strong { display: block; font-family: var(--font-serif); font-size: 17px; font-weight: 700; margin-bottom: 2px; }

/* Ghost comments wrapper alignment */
.gh-comments { max-width: 720px; margin: 64px auto; padding: 0 32px; }
@media (max-width: 860px) { .gh-comments { padding: 0 20px; } }

/* Subscribed/error feedback for newsletter forms */
.newsletter-input[data-status="success"] input { color: var(--et-mint); }
.newsletter-input[data-status="error"] input { color: #ff9a9a; }

/* Tip of the week sticker variant for grid cards */
.post-card__sticker {
  position: absolute; top: 10px; left: 10px;
  background: var(--et-marine); color: var(--et-mint);
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; z-index: 2;
}

/* === Body class state from Ghost === */
body.error-template .index-hero { padding: 96px 0; text-align: center; }
body.error-template .index-hero h1 { font-size: clamp(60px, 12vw, 140px); }

/* Tag eyebrow color by slug */
.tag-eyebrow { color: var(--et-marine-300); }
.tag-eyebrow--tips { color: #c4613a; }
.tag-eyebrow--stories { color: #a87828; }
.tag-eyebrow--podcast { color: #2a7a6a; }
.tag-eyebrow--events { color: var(--et-marine); }

/* Honor the [hidden] attribute across all elements (overrides display:flex etc.) */
[hidden] { display: none !important; }

/* Accommodate the 6–7 top-level nav items by tightening spacing */
.site-header__inner .nav { gap: 0; flex-wrap: nowrap; }
.site-header__inner .nav .nav__top { padding: 6px 9px; font-size: 13px; }
@media (max-width: 1100px) {
  .site-header__inner .nav .nav__top { padding: 6px 7px; font-size: 12.5px; }
}

/* ============================================================
   Assistant — full /assistant/ page and chat bubble extensions
   ============================================================ */

.assistant-page { padding: 56px 0 96px; }
.assistant-head { margin-bottom: 28px; }
.assistant-head__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06;
  letter-spacing: -0.018em; color: var(--et-marine);
  margin: 12px 0 14px; text-wrap: balance;
}
.assistant-head__deck {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: var(--et-graphite); margin: 0; text-wrap: pretty;
}
.assistant-preview-note {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--et-mint-50);
  border: 1px solid var(--et-cloud);
  border-radius: 4px;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-marine);
}
.assistant-preview-note a { color: var(--et-marine); font-weight: 600; }

/* Chat thread */
.chat-thread {
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 6px;
  padding: 20px;
  min-height: 240px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 14px;
}
.chat-thread--mini {
  background: var(--et-white);
  border: 0;
  padding: 4px 0 12px;
  min-height: 120px;
  max-height: 280px;
  border-radius: 0;
}

.chat-msg { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: flex-start; }
.chat-msg--user { grid-template-columns: 1fr; justify-items: end; }
.chat-msg__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-msg__body {
  background: var(--et-mint-50);
  border: 1px solid var(--et-cloud);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55;
  color: var(--et-ink);
  max-width: 88%;
}
.chat-msg--user .chat-msg__body {
  background: var(--et-marine); color: var(--et-mint);
  border-color: var(--et-marine);
}
.chat-msg__body p { margin: 0; font-family: inherit; color: inherit; }
.chat-msg__body p + p { margin-top: 8px; }

.chat-thread--mini .chat-msg__body { font-size: 14px; padding: 10px 12px; }

/* Source cards under an assistant message */
.chat-msg__sources { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.chat-msg__sources-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-marine-300);
  margin-bottom: 4px;
}
.chat-msg__source {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--et-white);
  border: 1px solid var(--et-cloud); border-radius: 4px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--et-marine); text-decoration: none;
  transition: border-color 140ms ease;
}
.chat-msg__source:hover { border-color: var(--et-marine); }
.chat-msg__source i { color: var(--et-marine-300); flex-shrink: 0; }

/* Suggestion chips */
.chat-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.chat-suggest__chip {
  font-family: var(--font-sans); font-size: 12.5px;
  padding: 7px 12px;
  border: 1px solid var(--et-cloud);
  background: var(--et-white);
  color: var(--et-marine);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: border-color 140ms ease, background 140ms ease;
}
.chat-suggest__chip:hover { border-color: var(--et-marine); background: var(--et-mint-50); }

/* Typing indicator */
.chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--et-marine-300);
  animation: chat-dot 1.1s infinite ease-in-out both;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.9); }
  40% { opacity: 1; transform: scale(1); }
}

/* Composer */
.chat-composer {
  display: flex; flex-direction: column; gap: 8px;
}
.chat-composer__inner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--et-cloud);
  border-radius: 999px;
  background: var(--et-white);
  transition: border-color 140ms ease;
}
.chat-composer__inner:focus-within { border-color: var(--et-marine); }
.chat-composer__inner input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-serif); font-size: 15px;
  color: var(--et-ink); padding: 10px 0;
}
.chat-composer__inner input::placeholder { color: var(--et-marine-300); opacity: 0.6; }
.chat-composer__send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--et-marine); color: var(--et-mint);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 140ms ease;
}
.chat-composer__send:hover { background: var(--et-marine-700); }
.chat-composer__send:disabled { opacity: 0.5; pointer-events: none; }
.chat-composer__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 11.5px; color: var(--et-graphite);
  padding: 0 8px;
}
.chat-composer__foot .is-error { color: var(--danger); }
.chat-composer__hint { color: var(--et-marine-300); text-decoration: none; }
.chat-composer__hint:hover { color: var(--et-marine); }

.chat-composer--mini .chat-composer__inner { padding: 4px 4px 4px 12px; }
.chat-composer--mini .chat-composer__inner input { font-size: 13.5px; padding: 8px 0; }
.chat-composer--mini .chat-composer__send { width: 30px; height: 30px; }

/* Bubble panel: expand button next to close */
.chat-panel__head { gap: 8px; }
.chat-panel__expand {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(186,231,230,0.15); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; margin-left: auto;
}
.chat-panel__expand:hover { background: rgba(186,231,230,0.28); }
.chat-panel { width: 360px; }

@media (max-width: 860px) {
  .chat-panel { width: calc(100vw - 32px); }
  .chat-thread { padding: 14px; max-height: 55vh; }
  .assistant-page { padding: 32px 0 64px; }
}

/* Chat: New chat button (page + bubble) */
.chat-thread-head {
  display: flex; justify-content: flex-end;
  margin-bottom: 8px;
}
.chat-new {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--et-marine-300); background: transparent;
  border: 1px solid var(--et-cloud); border-radius: 999px;
  padding: 5px 11px; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.chat-new:hover { border-color: var(--et-marine); color: var(--et-marine); }

.chat-panel__action {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(186,231,230,0.15); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; margin-left: auto;
}
.chat-panel__action:hover { background: rgba(186,231,230,0.28); }
.chat-panel__head .chat-panel__action + .chat-panel__expand { margin-left: 0; }

/* ============================================================
   Bigger bubble + sign-in gates
   ============================================================ */

/* Grow the floating panel so a typical answer + composer fits without scrolling */
.chat-panel { width: 420px; }
.chat-thread.chat-thread--mini {
  min-height: 240px;
  max-height: 60vh;       /* takes more vertical room on tall screens */
  padding: 6px 0 14px;
}
.chat-panel__body { padding: 18px 20px 16px; }

/* Sign-in gate inside the bubble */
.chat-gate {
  text-align: center;
  padding: 8px 4px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-gate__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--et-mint-50); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.chat-gate strong {
  display: block;
  font-family: var(--font-serif); font-weight: 700; font-size: 18px;
  color: var(--et-marine);
}
.chat-gate p {
  font-family: var(--font-serif); font-size: 14px; line-height: 1.55;
  color: var(--et-graphite); margin: 0;
}
.chat-gate__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* Full-page gate on /assistant/ */
.assistant-gate {
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 6px;
  padding: 48px 40px;
  text-align: center;
  margin: 24px 0;
}
.assistant-gate__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.assistant-gate h2 {
  font-family: var(--font-serif); font-weight: 700; font-size: 28px;
  color: var(--et-marine); margin: 0 0 10px;
}
.assistant-gate p {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: var(--et-graphite); margin: 0 auto 24px; max-width: 480px;
}
.assistant-gate__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.assistant-gate__signin {
  margin-top: 18px;
  font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite);
}
.assistant-gate__signin a { color: var(--et-marine); font-weight: 600; }

/* Grow the full-page chat thread too so casual questions don't scroll */
.assistant-page .chat-thread {
  min-height: 320px;
  max-height: 70vh;
}

@media (max-width: 860px) {
  .chat-panel { width: calc(100vw - 24px); }
  .chat-thread.chat-thread--mini { max-height: 55vh; }
  .assistant-gate { padding: 32px 20px; }
}

/* Chat message with CTA (limit hit, sign-in needed, etc.) */
.chat-msg--cta .chat-msg__avatar {
  background: var(--et-marine); color: var(--et-mint);
}
.chat-msg--cta .chat-msg__body {
  background: var(--et-white);
  border: 1.5px solid var(--et-marine);
  border-radius: 6px;
  padding: 14px 16px;
}
.chat-msg--cta .chat-msg__body p {
  font-weight: 500;
  color: var(--et-marine);
  margin-bottom: 12px;
}
.chat-msg__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--et-marine); color: var(--et-mint);
  border: 0; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background 140ms ease;
}
.chat-msg__cta:hover { background: var(--et-marine-700); color: var(--et-mint); }
.chat-msg__cta i { color: var(--et-mint); }

/* Member pill — sizing for "Hi, {firstname}" and initial-only avatar */
.member-pill { max-width: 220px; }
.member-pill > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar[data-member-initial]:not([style*="background-image"]) {
  font-size: 12px;
  letter-spacing: 0;
}

/* ============================================================
   PWA install banner (iOS Safari only)
   ============================================================ */
.install-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 60;
  animation: install-up 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.install-banner--leaving { animation: install-down 200ms ease-out both; }

.install-banner__inner {
  display: flex; align-items: center; gap: 12px;
  background: var(--et-marine); color: var(--et-mint);
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(31, 47, 63, 0.28), 0 4px 10px rgba(31, 47, 63, 0.18);
}
.install-banner__icon {
  width: 44px; height: 44px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  background: var(--et-mint-50);
  display: inline-flex; align-items: center; justify-content: center;
}
.install-banner__icon img { width: 100%; height: 100%; object-fit: cover; }
.install-banner__body { flex: 1; min-width: 0; line-height: 1.3; }
.install-banner__body strong {
  display: block;
  font-family: var(--font-serif); font-weight: 700; font-size: 14.5px;
  color: var(--et-mint); margin-bottom: 2px;
}
.install-banner__body span:not(.install-banner__share) {
  font-family: var(--font-sans); font-size: 12.5px;
  color: rgba(186,231,230,0.85);
}
.install-banner__share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(186,231,230,0.18);
  color: var(--et-mint); vertical-align: -3px; margin: 0 2px;
}
.install-banner__close {
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(186,231,230,0.15); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.install-banner__close:hover { background: rgba(186,231,230,0.28); }

/* The floating chat bubble already lives at bottom-right; nudge it up
   while the install banner is visible so they don't overlap. */
.install-banner ~ .chat-bubble-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

@keyframes install-up {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes install-down {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(110%); opacity: 0; }
}

/* iOS standalone (installed PWA) — push content below the iPhone notch */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .site-header { top: env(safe-area-inset-top); }
}

/* Hide the install banner on tablets / large screens — it's iPhone-targeted */
@media (min-width: 720px) {
  .install-banner { display: none; }
}

/* ============================================================
   Dev panel (admin testing toggle)
   ============================================================ */
.dev-panel-wrap {
  position: fixed; left: 16px; bottom: 16px; z-index: 80;
  font-family: var(--font-sans);
}
.dev-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--et-marine-900); color: var(--et-mint-300);
  border: 1px solid rgba(186,231,230,0.18); border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: color 140ms ease, border-color 140ms ease;
}
.dev-toggle:hover, .dev-toggle.is-on { color: var(--et-mint); border-color: var(--et-mint); }

.dev-panel {
  position: absolute; left: 0; bottom: 44px;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--et-marine-900); color: var(--et-mint-100);
  border: 1px solid rgba(186,231,230,0.16);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  animation: install-up 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dev-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(186,231,230,0.12);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--et-mint);
}
.dev-panel__close {
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: rgba(186,231,230,0.08); color: var(--et-mint);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dev-panel__body {
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.dev-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent; border: 0;
  color: var(--et-mint-100); text-decoration: none;
  font-family: var(--font-sans); font-size: 13px; text-align: left;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms ease;
}
.dev-row:hover { background: rgba(186,231,230,0.06); }
.dev-row strong { display: block; color: var(--et-mint); font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.dev-row small { display: block; color: rgba(186,231,230,0.55); font-size: 11px; line-height: 1.4; }
.dev-row > span { flex: 1; line-height: 1.3; }
.dev-row > i { color: var(--et-mint-300); flex-shrink: 0; }
.dev-row--toggle { cursor: pointer; }
.dev-row--toggle input { margin: 2px 4px 0 0; accent-color: var(--et-mint); }
.dev-row--danger strong { color: #f0a8a8; }
.dev-row--danger:hover { background: rgba(176,86,86,0.12); }

.dev-info {
  margin: 4px 4px 0;
  padding: 10px 12px;
  background: rgba(186,231,230,0.05);
  border: 1px dashed rgba(186,231,230,0.18);
  border-radius: 6px;
  font-size: 11.5px; line-height: 1.55;
  color: rgba(186,231,230,0.65);
}
.dev-info strong { color: var(--et-mint); font-weight: 600; }
.dev-info code { background: rgba(0,0,0,0.25); color: var(--et-mint); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* Don't compete with the chat bubble on the same side */
@media (max-width: 520px) {
  .dev-panel { width: calc(100vw - 32px); }
}

/* ============================================================
   Chat — source preview cards (clickable buttons w/ thumbnail)
   ============================================================ */
.chat-msg__sources {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Phase B — inline timestamped podcast clips */
.chat-msg__clips {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-clip {
  border: 1px solid var(--et-cloud);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 18px rgba(16, 42, 67, .07);
  transition: box-shadow .18s ease, transform .18s ease;
}
.chat-clip:hover {
  box-shadow: 0 2px 4px rgba(16, 42, 67, .06), 0 12px 28px rgba(16, 42, 67, .11);
  transform: translateY(-1px);
}
.chat-clip__head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  background: var(--et-mint-50);
  border-bottom: 1px solid var(--et-mint-100);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--et-marine-300);
}
.chat-clip__head > i[data-lucide] { color: var(--et-mint-500); flex-shrink: 0; }
.chat-clip__head > span:nth-child(2) { flex: 1; min-width: 0; }
.chat-clip__ts {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: none;
  color: #fff;
  background: var(--et-mint-500);
  border-radius: 999px; padding: 3px 9px 3px 7px;
}
.chat-clip__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.chat-clip__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.chat-source-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 8px;
  text-decoration: none;
  color: var(--et-marine);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.chat-source-card:hover {
  border-color: var(--et-marine);
  box-shadow: 0 4px 12px rgba(31, 47, 63, 0.08);
  transform: translateY(-1px);
}
.chat-source-card__media {
  width: 56px; height: 56px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--et-mint-100);
  flex-shrink: 0;
}
.chat-source-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-source-card__media--mark {
  background-image: var(--et-gradient-brand);
}
.chat-source-card__body { min-width: 0; }
.chat-source-card__tag {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--et-marine-300);
  margin-bottom: 3px;
}
.chat-source-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 14.5px; line-height: 1.28;
  color: var(--et-marine);
  /* Clamp to 2 lines so cards stay compact */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-source-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--et-marine); color: var(--et-mint);
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  transition: background 140ms ease;
}
.chat-source-card:hover .chat-source-card__cta {
  background: var(--et-marine-700);
}
.chat-source-card__cta i { color: var(--et-mint); }

/* Compact mode for the bubble's mini thread */
.chat-thread--mini .chat-source-card {
  grid-template-columns: 44px 1fr auto;
  padding: 6px 10px 6px 6px;
  gap: 10px;
}
.chat-thread--mini .chat-source-card__media { width: 44px; height: 44px; }
.chat-thread--mini .chat-source-card__title { font-size: 13.5px; }
.chat-thread--mini .chat-source-card__cta {
  padding: 6px 10px; font-size: 11.5px;
}

/* On narrow screens, drop the side label and rely on the arrow icon */
@media (max-width: 380px) {
  .chat-source-card__cta span { display: none; }
  .chat-source-card__cta { padding: 8px; }
}

/* Previous .chat-msg__source / .chat-msg__sources-label styles were
   superseded by the card treatment below; the old selectors are no
   longer emitted by templates so they're removed entirely. */

/* "Powered by Pellicci Digital" — inline with the copyright */
.site-footer__poweredby {
  font-family: var(--font-sans);
  font-size: 12px;
  color: inherit;
}
.site-footer__poweredby::before {
  content: "·";
  margin: 0 12px;
  opacity: 0.6;
}
.site-footer__poweredby a {
  color: var(--et-mint);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 140ms ease;
}
.site-footer__poweredby a:hover { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════
   v1.1 — Ask the Industry page: 3-column layout with conversation
   history sidebar (account-tied threads). Ported from v2 design.
   ════════════════════════════════════════════════════════════ */
.ai-page-wrap { padding: 0 24px 64px; }
.ai-page {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 140px);
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .ai-page-wrap { padding: 0 0 64px; }
}

/* ─── Slide-in sidebar (absolute overlay) ─────────────────────
   The chat conversation card stays centered in the viewport regardless
   of sidebar state. The sidebar is absolutely positioned to the left
   of `.ai-page` and slides in from the gutter without pushing the chat
   off-center. On desktop with a wide viewport, the sidebar lives in
   the empty whitespace between the page edge and the chat card. On
   narrower viewports it just overlays the start of the chat. */
.ai-side {
  position: absolute;
  left: 0; top: 16px;
  width: 240px;
  height: calc(100vh - 124px);
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 16px;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: 16px 14px;
  z-index: 5;
  transform: translateX(calc(-100% - 16px));
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease;
}
.ai-page.is-side-open .ai-side {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.ai-side__head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 14px;
}
.ai-side__close-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--et-cloud); border-radius: 6px;
  color: var(--et-graphite); cursor: pointer;
  transition: background 140ms, color 140ms;
}
.ai-side__close-btn:hover { background: var(--et-mint-50, #eaf6f5); color: var(--et-marine); }
.ai-side__head .ai-new-btn { margin-bottom: 0; margin-left: 0; margin-right: auto; }

/* Mobile: sidebar overlays + backdrop */
.ai-side-overlay {
  position: fixed; inset: 0;
  background: rgba(15,25,50,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 30;
}
@media (max-width: 720px) {
  .ai-side {
    position: fixed; top: 0; left: 0;
    height: 100vh; max-height: none;
    width: 88vw; max-width: 320px;
    flex: 0 0 auto;
    transform: translateX(-100%);
    opacity: 1; pointer-events: none;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    border-right: 1px solid var(--et-cloud);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    z-index: 50;
  }
  .ai-page.is-side-open .ai-side {
    transform: translateX(0);
    width: 88vw; max-width: 320px;
    flex: 0 0 auto;
    pointer-events: auto;
  }
  .ai-page.is-side-open .ai-side-overlay {
    opacity: 1; pointer-events: auto;
  }
}
.ai-side h4 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 15px; color: var(--et-marine);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.ai-side__group { padding: 0 0 24px; }
.ai-side__group + .ai-side__group {
  border-top: 1px solid var(--et-cloud);
  padding-top: 20px;
}
.ai-side__copy {
  font-family: var(--font-serif); font-size: 14px;
  color: var(--et-graphite); line-height: 1.55; margin: 0;
}
.ai-side__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: 6px;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--et-marine); text-decoration: none; cursor: pointer;
  text-align: left; line-height: 1.4;
  width: 100%;
  transition: background 140ms ease;
}
.ai-side__item:hover { background: var(--et-mint-50); }
.ai-side__item i { color: var(--et-marine-300); flex-shrink: 0; }

/* New conversation button */
.ai-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--et-marine); color: var(--et-mint);
  border: 0; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 140ms ease;
  align-self: flex-start;
}
.ai-new-btn:hover { background: var(--et-marine-700); }

/* Thread list */
.ai-side__threads {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 12px;
  flex: 1 1 0; min-height: 0;
  overflow-y: auto;
  /* Subtle scrollbar so the list reads as scrollable */
  scrollbar-width: thin;
  scrollbar-color: var(--et-cloud) transparent;
}
.ai-side__threads::-webkit-scrollbar { width: 6px; }
.ai-side__threads::-webkit-scrollbar-track { background: transparent; }
.ai-side__threads::-webkit-scrollbar-thumb { background: var(--et-cloud); border-radius: 999px; }
.ai-side__threads::-webkit-scrollbar-thumb:hover { background: var(--et-marine-300); }
.ai-side__thread-row {
  display: flex; align-items: stretch;
  border-radius: 6px;
  background: transparent;
  transition: background 140ms ease;
  position: relative;
}
.ai-side__thread-row:hover { background: var(--et-mint-50); }
.ai-side__thread-row.is-active { background: var(--et-mint-50); }
.ai-side__thread {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ai-side__thread-delete {
  flex: 0 0 auto;
  width: 32px; margin: 4px 4px 4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 5px;
  color: var(--et-marine-300); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.ai-side__thread-row:hover .ai-side__thread-delete,
.ai-side__thread-row:focus-within .ai-side__thread-delete {
  opacity: 1; pointer-events: auto;
}
.ai-side__thread-delete:hover { background: #fff0f0; color: #c00; }
@media (hover: none) {
  /* Touch devices: always show */
  .ai-side__thread-delete { opacity: 0.6; pointer-events: auto; }
}
.ai-side__thread-title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--et-marine);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-side__thread-meta {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--et-graphite); margin-top: 3px;
  letter-spacing: 0.02em;
}
.ai-side__thread-group-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--et-marine-300);
  margin: 14px 12px 6px;
}
.ai-side__empty {
  padding: 16px 12px;
  font-family: var(--font-serif); font-size: 13px;
  color: var(--et-graphite); line-height: 1.5;
  font-style: italic;
}

/* Free-tier upsell card in the sidebar */
.ai-side__upsell {
  margin-top: 12px;
  padding: 14px;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-side__upsell strong {
  font-family: var(--font-serif); font-weight: 700; font-size: 14px;
  color: var(--et-marine);
}
.ai-side__upsell span {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--et-graphite);
}
.ai-side__upsell .btn { margin-top: 6px; }

/* ─── Conversation pane ─── */
.ai-conv {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--et-cloud);
  border-radius: 16px;
  height: calc(100vh - 124px);
  padding: 0 28px;
  max-width: 760px;
  margin: 16px auto;
  width: 100%;
  box-shadow: 0 1px 3px rgba(15, 25, 50, 0.04), 0 8px 32px rgba(15, 25, 50, 0.04);
}
.ai-conv__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--et-cloud);
  background: #fff;
  z-index: 4;
  margin: 0 -28px;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}
.ai-conv__head-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ai-conv__icon-btn {
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--et-cloud); border-radius: 8px;
  color: var(--et-graphite); cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}
.ai-conv__icon-btn:hover { background: var(--et-mint-50, #eaf6f5); color: var(--et-marine); border-color: var(--et-mint); }
.ai-conv__head-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ai-conv__head-title i[data-lucide] { color: var(--et-mint-500); flex-shrink: 0; }
.ai-conv__head-title h3 {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--et-marine); margin: 0;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.ai-conv__title-edit {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--et-marine);
  letter-spacing: -0.005em;
  flex: 1; min-width: 0;
  background: #fff;
  border: 1.5px solid var(--et-marine);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
}
.ai-conv__head-quota { flex: 0 0 auto; }
.ai-conv__head-quota .badge { flex-shrink: 0; }
.ai-conv__rename,
.ai-conv__delete {
  width: 28px; height: 28px; border-radius: 999px;
  background: transparent; border: 0;
  color: var(--et-marine-300); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.ai-conv__rename:hover { background: var(--et-mint-50); color: var(--et-marine); }
.ai-conv__delete:hover { background: rgba(176, 86, 86, 0.08); color: var(--danger); }

.ai-conv__messages {
  flex: 1 1 0;
  padding: 28px 4px 24px;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Starter state (empty thread) */
.ai-conv__starter {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 32px 16px 8px;
  gap: 18px;
}
.ai-conv__starter h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 28px; color: var(--et-marine);
  margin: 0; letter-spacing: -0.01em; line-height: 1.1;
  max-width: 22ch; text-wrap: balance;
}
.ai-conv__starter p {
  font-family: var(--font-serif); color: var(--et-graphite);
  font-size: 15px; line-height: 1.55; margin: 0;
  max-width: 50ch;
}
.ai-conv__starter-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 520px; margin-top: 4px;
}
.ai-conv__starter-card {
  background: var(--et-white); border: 1px solid var(--et-cloud);
  border-radius: 10px; padding: 14px 16px;
  text-align: left; cursor: pointer;
  font-family: var(--font-serif); font-size: 14px;
  color: var(--et-marine); line-height: 1.35;
  transition: background 140ms ease, border-color 140ms ease;
}
.ai-conv__starter-card:hover {
  background: var(--et-mint-50);
  border-color: var(--et-mint-300);
}

/* New-style messages on the AI page (override the generic chat-msg styling) */
.ai-page .chat-msg {
  display: flex; gap: 12px; align-items: flex-start;
  grid-template-columns: none;
}
.ai-page .chat-msg--user {
  justify-content: flex-end;
}
.ai-page .chat-msg--user .chat-msg__body {
  background: var(--et-marine); color: var(--et-mint);
  border: 0;
  border-radius: 18px 18px 4px 18px;
  padding: 14px 18px;
  max-width: 78%;
  box-shadow: 0 2px 10px rgba(53, 82, 110, 0.18);
}
.ai-page .chat-msg--asst .chat-msg__body {
  background: #ffffff;
  border: 1px solid var(--et-cloud);
  border-radius: 18px 18px 18px 4px;
  padding: 14px 18px;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(15, 25, 50, 0.05),
              0 6px 18px rgba(15, 25, 50, 0.04);
}
.ai-page .chat-msg__avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--et-mint); color: var(--et-marine);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Composer pinned to the bottom of the chat card */
.ai-conv__input-wrap {
  flex-shrink: 0;
  padding: 16px 0 20px;
  background: #fff;
  z-index: 3;
  border-radius: 0 0 16px 16px;
}
.ai-conv__input {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--et-marine-100, #c9d4e1);
  border-radius: 18px;
  padding: 12px 14px 10px;
  box-shadow: 0 8px 28px rgba(15, 25, 50, 0.10),
              0 2px 6px rgba(15, 25, 50, 0.05);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ai-conv__input:focus-within {
  border-color: var(--et-marine);
}
.ai-conv__input textarea {
  width: 100%;
  border: 0; outline: 0; resize: none;
  font-family: var(--font-serif); font-size: 15px;
  background: transparent; color: var(--et-ink);
  min-height: 22px; max-height: 160px;
  line-height: 1.5;
  padding: 4px 2px;
}
.ai-conv__input-row {
  display: flex; align-items: center; gap: 6px;
}
.ai-conv__attach {
  width: 34px; height: 34px; border-radius: 8px;
  background: transparent; color: var(--et-marine-300);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.ai-conv__attach:hover { background: var(--et-mint-50); color: var(--et-marine); }
.ai-conv__input-row .ai-conv__send { margin-left: auto; }

/* Attached-image preview chip above the textarea */
.ai-conv__attached {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--et-cloud);
  background: var(--et-mint-50);
  flex-shrink: 0;
}
.ai-conv__attached img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-conv__attached-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(15, 25, 50, 0.78); color: #fff;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ai-conv__attached-remove:hover { background: rgba(15, 25, 50, 0.95); }
.chat-msg__img {
  margin: 0 0 8px;
  max-width: 320px; max-height: 320px;
  border-radius: 10px; display: block;
  border: 1px solid rgba(255,255,255,0.15);
}
.ai-conv__input textarea::placeholder { color: var(--et-marine-300); }
.ai-conv__send {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--et-marine); color: var(--et-mint);
  border: 0; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease;
}
.ai-conv__send:hover { background: var(--et-marine-700); }
.ai-conv__send:disabled { background: var(--et-mist); cursor: not-allowed; }

.ai-conv__foot {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--et-graphite);
  padding: 0 4px;
}
.ai-conv__foot .is-error { color: var(--danger); }
.ai-conv__hint { color: var(--et-marine-300); }

/* Responsive */
@media (max-width: 720px) {
  .ai-conv { padding: 0 16px; }
  .ai-conv__head { padding-left: 16px; padding-right: 16px; margin: 0 -16px; }
  .ai-conv__starter-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   v1.2 — Home page styles (v2 design). Ported from /tmp/etk2.
   Uses standalone class names (.ep-card, .tip-card, .hero-editorial,
   .ai-feature, .ig-cell, .tiers, .cta-banner) that don't collide
   with the older site-header/post-card system.
   ════════════════════════════════════════════════════════════ */

/* Container variants used by the v2 home (single-dash naming) */
.container-wide   { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 32px; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }

/* v2 single-dash button variants used alongside the existing btn--marine etc. */
.btn-marine    { background: var(--et-marine); color: #fff; border: 0; padding: 12px 22px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background 140ms ease; line-height: 1; }
.btn-marine:hover { background: var(--et-marine-700); color: #fff; }
.btn-mint      { background: var(--et-mint); color: var(--et-marine); border: 0; padding: 12px 22px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background 140ms ease; line-height: 1; }
.btn-mint:hover { background: var(--et-mint-300); color: var(--et-marine); }
.btn-ghost     { background: transparent; color: var(--et-marine); border: 1.5px solid var(--et-marine); padding: 12px 22px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: all 140ms ease; line-height: 1; }
.btn-ghost:hover { background: var(--et-marine); color: #fff; }
.btn-on-marine { background: var(--et-mint); color: var(--et-marine); border: 0; padding: 12px 22px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background 140ms ease; line-height: 1; }
.btn-on-marine:hover { background: #fff; }
.btn-link      { background: transparent; color: var(--et-marine); padding: 4px 0; text-decoration: underline; text-decoration-color: var(--et-mint-300); text-underline-offset: 4px; text-decoration-thickness: 2px; border: 0; display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 15px; cursor: pointer; }
.btn-link:hover { text-decoration-color: var(--et-marine); color: var(--et-marine); }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn svg, .btn i[data-lucide],
.btn-marine i[data-lucide], .btn-mint i[data-lucide],
.btn-ghost i[data-lucide], .btn-on-marine i[data-lucide],
.btn-link i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }

/* v2 badges (used on tip / ep cards) */
.badge          { font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; letter-spacing: 0.02em; }
.badge-mint     { background: var(--et-mint); color: var(--et-marine); }
.badge-marine   { background: var(--et-marine); color: var(--et-mint); }
.badge-paper    { background: var(--et-cloud); color: var(--et-marine); }
a.chat-quota { text-decoration: none; cursor: pointer; transition: background 140ms, color 140ms; }
a.chat-quota:hover { filter: brightness(0.95); }
.chat-quota--depleted { background: #e07b54 !important; color: #fff !important; font-weight: 700; animation: chatQuotaPulse 1.4s ease-in-out infinite; }
.chat-quota--depleted i[data-lucide] { display: none; }
@keyframes chatQuotaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 123, 84, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 123, 84, 0.22); }
}

/* Section spacing + heads */
.section        { padding: 96px 0; }
.section-mint   { background: var(--et-mint-50); }
.section-marine { background: var(--et-marine); color: var(--et-mint); }
.section-head-center { margin: 0 auto 56px; text-align: center; max-width: 640px; }
.section-head-center .eyebrow { margin-bottom: 14px; display: inline-block; }
.section-head-center h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; color: var(--et-marine); margin: 0 0 16px; letter-spacing: -0.018em; text-wrap: balance; }
.section-head-center .sub { font-family: var(--font-serif); color: var(--et-graphite); font-size: 18px; line-height: 1.55; max-width: 56ch; margin: 0 auto; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.section-head-row .left { max-width: 640px; }
.section-head-row h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--et-marine); margin: 12px 0 8px; letter-spacing: -0.018em; }
.section-head-row .sub { color: var(--et-graphite); font-family: var(--font-serif); font-size: 17px; line-height: 1.55; margin: 0; max-width: 52ch; }
.section-head-row .right { flex-shrink: 0; }

/* HERO — editorial */
.hero { padding: 80px 0 64px; position: relative; }
.hero-editorial { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.hero__lockup .eyebrow { margin-bottom: 16px; display: inline-block; }
.hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.024em; color: var(--et-marine); margin: 0 0 24px; text-wrap: balance; }
.hero h1 .em-mint { color: var(--et-mint-500); font-style: italic; font-weight: 700; }
.hero .lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; color: var(--et-ink); max-width: 52ch; margin: 0 0 32px; }
.hero .cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero__meta { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; color: var(--et-graphite); font-family: var(--font-sans); font-size: 13px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta i[data-lucide] { width: 14px; height: 14px; color: var(--et-marine); }
.hero__art .brand-frame { aspect-ratio: 4 / 5; padding: 14px; background: var(--et-paper); }
.hero__photo { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; }
.hero__photo-caption { position: absolute; bottom: 14px; left: 14px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.06em; color: #fff; background: rgba(31,47,63,0.7); padding: 5px 10px; border-radius: 4px; text-transform: uppercase; }

/* AI feature block (homepage) */
.ai-feature { background: var(--et-marine); color: #fff; padding: 64px 56px; border-radius: 20px; position: relative; overflow: hidden; }
.ai-feature::after { content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: var(--et-gradient-brand); opacity: 0.18; filter: blur(80px); pointer-events: none; }
.ai-feature__head { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; position: relative; }
.ai-feature__head .eyebrow { color: var(--et-mint); background: rgba(186, 231, 230, 0.16); padding: 6px 12px; border-radius: 999px; }
.ai-feature h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; position: relative; text-wrap: balance; }
.ai-feature p { font-family: var(--font-serif); color: var(--et-mint); font-size: 17px; line-height: 1.55; margin: 0 0 28px; position: relative; max-width: 60ch; }

.ai-search { position: relative; z-index: 2; background: #fff; color: var(--et-ink); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-lg); }
.ai-search__row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--et-cloud); padding: 6px 8px 14px; }
.ai-search__row > i[data-lucide] { width: 20px; height: 20px; color: var(--et-marine); flex-shrink: 0; }
.ai-search__input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--font-serif); font-size: 18px; color: var(--et-ink); line-height: 1.4; }
.ai-search__input::placeholder { color: var(--et-graphite); }
.ai-search__row .btn-marine { flex-shrink: 0; }
.ai-search__chips { display: flex; gap: 8px; padding: 12px 4px 4px; flex-wrap: wrap; }
.ai-search__chip { font-family: var(--font-sans); font-size: 13px; background: var(--et-mint-50); color: var(--et-marine); border: 1px solid var(--et-mint-100); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background 140ms ease; display: inline-flex; align-items: center; gap: 6px; }
.ai-search__chip:hover { background: var(--et-mint); }
.ai-search__chip i[data-lucide] { width: 12px; height: 12px; }
.ai-search__foot { font-family: var(--font-sans); font-size: 12px; color: var(--et-mint); padding-top: 24px; display: flex; align-items: center; gap: 8px; position: relative; }
.ai-search__foot i[data-lucide] { width: 13px; height: 13px; }
.ai-search__foot a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); text-underline-offset: 3px; }

/* EPISODE CARD */
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ep-card { background: var(--et-white); border: 1px solid var(--et-cloud); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); text-decoration: none; color: inherit; display: block; }
.ep-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ep-card__cover { position: relative; aspect-ratio: 16/10; background: var(--et-marine); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: flex-start; padding: 18px; }
.ep-card__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,47,63,0.45), rgba(31,47,63,0.7)); }
.ep-card__play { position: absolute; bottom: 14px; right: 14px; width: 42px; height: 42px; border-radius: 999px; background: var(--et-mint); color: var(--et-marine); display: flex; align-items: center; justify-content: center; z-index: 1; }
.ep-card__play i[data-lucide], .ep-card__play svg { margin-left: 2px; }
.ep-card__lock { position: absolute; top: 14px; right: 14px; z-index: 1; }
.ep-card__body { padding: 20px 22px 22px; }
.ep-card__meta { display: flex; gap: 10px; align-items: baseline; color: var(--et-graphite); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; margin-bottom: 8px; }
.ep-card__no { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--et-mint-500); font-weight: 400; line-height: 1; letter-spacing: 0; }
.ep-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--et-marine); margin: 0 0 8px; line-height: 1.22; letter-spacing: -0.005em; }
.ep-card__blurb { font-family: var(--font-serif); color: var(--et-ink); font-size: 14px; line-height: 1.55; margin: 0; }

/* TIP CARD */
.tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tip-card { background: var(--et-white); border: 1px solid var(--et-cloud); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .25s, box-shadow .25s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.tip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tip-card__cover { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--et-mint-100); position: relative; }
.tip-card__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(31,47,63,0.18)); }
.tip-card__play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 999px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; color: var(--et-marine); z-index: 1; transition: transform .2s; }
.tip-card:hover .tip-card__play-overlay { transform: translate(-50%, -50%) scale(1.08); }
.tip-card__play-overlay svg { width: 22px; height: 22px; fill: currentColor; }
.tip-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.tip-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tip-card__meta { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin-bottom: 10px; display: flex; gap: 10px; }
.tip-card__title { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--et-marine); line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.005em; }
.tip-card__excerpt { font-family: var(--font-serif); color: var(--et-ink); font-size: 14px; line-height: 1.55; margin: 0 0 16px; flex: 1; }
.tip-card__author { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); }
.tip-card__author img { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; }

/* IG / inspiration cells */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ig-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--et-mint-100); cursor: pointer; display: block; text-decoration: none; }
.ig-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ig-cell:hover img { transform: scale(1.04); }
.ig-cell__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(31,47,63,0.85)); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: #fff; opacity: 0; transition: opacity .2s; }
.ig-cell:hover .ig-cell__overlay,
.ig-cell:focus-visible .ig-cell__overlay { opacity: 1; }
/* Touch devices have no hover — keep the caption + credit visible so
   the content isn't permanently hidden from phone visitors. */
@media (hover: none) {
  .ig-cell__overlay { opacity: 1; background: linear-gradient(180deg, transparent 30%, rgba(31,47,63,0.78)); }
}
.ig-cell__caption { font-family: var(--font-serif); font-size: 12px; line-height: 1.35; }
.ig-cell__credit { font-family: var(--font-sans); font-size: 10px; opacity: 0.8; margin-top: 4px; letter-spacing: 0.04em; }

/* TIERS — homepage soft pitch */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 880px; margin: 0 auto; }
.tier { background: var(--et-white); border: 1px solid var(--et-cloud); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 0; }
.tier-paid { background: var(--et-marine); color: #fff; border-color: var(--et-marine); }
.tier-paid h3 { color: #fff; }
.tier-paid .tier__blurb { color: var(--et-mint); }
.tier-paid .tier__perks li { color: var(--et-mint-100); }
.tier-paid .tier__perks i[data-lucide] { color: var(--et-marine); background: var(--et-mint); }
.tier-paid .tier__foot { color: var(--et-mint); }
.tier__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 16px; }
.tier h3 { font-family: var(--font-serif); font-weight: 700; font-size: 26px; color: var(--et-marine); margin: 0; letter-spacing: -0.01em; }
.tier__blurb { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--et-graphite); margin: 0 0 20px; }
.tier .tier__perks { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.tier .tier__perks li { display: flex; gap: 12px; font-family: var(--font-serif); font-size: 15px; color: var(--et-ink); line-height: 1.4; align-items: flex-start; }
.tier .tier__perks li span { flex: 1; }
.tier__perks i[data-lucide] { width: 16px; height: 16px; color: var(--et-marine); background: var(--et-mint); padding: 3px; border-radius: 999px; flex-shrink: 0; margin-top: 2px; }
.tier__foot { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin-top: 16px; display: flex; align-items: center; gap: 6px; }
.tier__foot i[data-lucide] { width: 12px; height: 12px; }
.tier__cta { margin-top: auto; }

/* CTA banner */
.cta-banner {
  background: linear-gradient(120deg, var(--et-marine) 0%, var(--et-marine-700) 55%, var(--et-mint-500) 130%);
  color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  padding: 64px 56px; border-radius: 20px;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 90% 60%, rgba(186, 231, 230, 0.22), transparent 55%);
  pointer-events: none;
}
.cta-banner .eyebrow { color: var(--et-mint) !important; }
.cta-banner h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); color: #fff; line-height: 1.12; margin: 0 0 10px; letter-spacing: -0.018em; position: relative; }
.cta-banner p { font-family: var(--font-serif); color: #fff; font-size: 16px; line-height: 1.5; margin: 0; max-width: 50ch; position: relative; }
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; position: relative; }

/* Responsive */
@media (max-width: 980px) {
  .hero-editorial { grid-template-columns: 1fr; gap: 40px; }
  .hero__art .brand-frame { aspect-ratio: 16/10; }
  .ep-grid, .tip-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .ai-feature { padding: 40px 28px; }
  .cta-banner { grid-template-columns: 1fr; padding: 40px 24px; }
  .cta-banner__actions { justify-content: flex-start; }
  .tiers { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .ep-grid, .tip-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 32px; }
}

/* AI feature: flat eyebrow (no pill background) */
.ai-feature__head .eyebrow--flat {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--et-mint);
  letter-spacing: 0.14em;
}

/* Hero headline: smaller + capped so it lands on 3 lines */
.hero h1 {
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  max-width: 16ch;
}

/* Nav links must never carry the global underline (mint decoration on <a>) */
.site-header .nav a,
.site-header__mobile a,
.site-footer a,
.btn,
.btn-marine, .btn-mint, .btn-ghost, .btn-on-marine,
.member-pill {
  text-decoration: none !important;
}

/* Billing toggle on the membership page */
.tier-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--et-white);
  border: 1px solid var(--et-cloud);
  border-radius: 999px;
}
.tier-toggle button {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; border: 0;
  background: transparent; color: var(--et-graphite);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.tier-toggle button.on {
  background: var(--et-marine);
  color: var(--et-mint);
}
.tier-toggle .save {
  font-family: var(--font-sans); font-size: 10px;
  background: var(--et-mint); color: var(--et-marine);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tier-toggle button.on .save { background: var(--et-mint); color: var(--et-marine); }

/* ── Contributors (about page + standalone page) ── */
.about-contributors { padding: 80px 0; border-top: 1px solid var(--et-cloud); border-bottom: 1px solid var(--et-cloud); }
.contrib-founder { padding: 72px 0 56px; border-bottom: 1px solid var(--et-cloud); }
.contrib-featured { display: grid; grid-template-columns: 280px 1fr; gap: 52px; align-items: start; }
.contrib-featured__photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; }
.contrib-featured__photo img { width: 100%; height: 100%; object-fit: cover; }
.contrib-featured__name { font-family: var(--font-serif); font-weight: 700; font-size: 38px; color: var(--et-marine); margin: 4px 0 2px; letter-spacing: -0.02em; }

.contrib-panel { padding: 64px 0 96px; }
.contrib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 48px; }

.contrib-card__photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; margin-bottom: 18px; }
.contrib-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.contrib-card__company { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--et-mint-500); margin: 0 0 3px; }
.contrib-card__name { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--et-marine); margin: 0 0 3px; letter-spacing: -0.01em; }
.contrib-card__role { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin: 0 0 14px; line-height: 1.5; }
.contrib-card__bio { font-family: var(--font-serif); font-size: 15px; line-height: 1.65; color: var(--et-graphite); margin: 0 0 16px; }

/* When the bio lives inside a .contrib-bio expander, the bio paragraph
   above the button shouldn't carry a large bottom margin — the button
   sits directly under it. */
.contrib-bio { margin: 0 0 16px; }
.contrib-bio > .contrib-card__bio { margin-bottom: 6px; }
.contrib-bio > .contrib-bio__extra > .contrib-card__bio:not(:last-child) { margin-bottom: 10px; }
.contrib-bio > .contrib-bio__extra > .contrib-card__bio:last-child { margin-bottom: 0; }

/* Panel grid cards: clamp the visible bio to 5 lines AND reserve 5 lines'
   worth of space so cards line up regardless of bio length. When the user
   expands, drop the clamp and let the full text flow. (Rachel's featured
   card is intentionally excluded — it has its own full-width layout.) */
.contrib-card .contrib-bio > .contrib-card__bio:first-of-type {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.65em * 5);
}
.contrib-card .contrib-bio:has(> .contrib-bio__extra:not([hidden])) > .contrib-card__bio:first-of-type {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
}
/* Cards with a two-line role (e.g. Cara & Stephanie) clamp their bio to
   4 lines so the overall card height still matches its single-role
   neighbour. The expanded state remains unbounded. */
.contrib-card--two-role .contrib-bio > .contrib-card__bio:first-of-type {
  -webkit-line-clamp: 4;
  min-height: calc(1.65em * 4);
}
.contrib-card--two-role .contrib-bio:has(> .contrib-bio__extra:not([hidden])) > .contrib-card__bio:first-of-type {
  -webkit-line-clamp: unset;
  min-height: 0;
}

.contrib-links { display: flex; flex-wrap: wrap; gap: 6px; }
.contrib-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--et-marine); background: var(--et-mint-50); border: 1px solid var(--et-cloud); border-radius: 999px; padding: 5px 11px; text-decoration: none !important; transition: background 140ms ease; }
.contrib-link:hover { background: var(--et-mint); }
.contrib-link i[data-lucide], .contrib-link svg { width: 12px; height: 12px; flex-shrink: 0; }
.contrib-bio__btn { background: none; border: none; padding: 0; margin: 2px 0 0; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--et-marine); cursor: pointer; display: inline-block; opacity: 0.75; }
.contrib-bio__btn:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .contrib-featured { grid-template-columns: 1fr; gap: 28px; }
  .contrib-featured__photo { aspect-ratio: 1 / 1; }
  .contrib-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Tier price (membership page) — bigger, marine number */
.tier .price { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-serif); color: var(--et-marine); }
.tier .price-num { font-weight: 700; font-size: 40px; line-height: 1; }
.tier .price-per { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); font-weight: 500; }
.tier-paid .price-num { color: #fff; }
.tier-paid .price-per { color: var(--et-mint); }
/* Stack heading + price vertically on BOTH cards for consistent layout */
.tier .tier__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 8px; }
.tier h3 { font-size: 28px; }
.tier.tier-paid h3 { display: block; font-size: 28px; color: #fff; }
.tier.tier-paid .tier__blurb { color: var(--et-mint); }
.tier.tier-paid .tier__perks li { color: var(--et-mint); }
.tier.tier-paid .tier__perks li strong { color: #fff; }
.tier__perks-lead { font-weight: 700; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,0.18); margin-bottom: 4px; gap: 0; }
.tier__perks-lead span { color: #fff !important; font-weight: 700; }
.tier__billing-note { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--et-graphite); margin: 4px 0 22px; line-height: 1.4; }
.tier.tier-paid .tier__billing-note { color: var(--et-mint); opacity: 0.9; }

/* ===== Event detail page (custom-event.hbs) ===== */
.event-top { padding: 52px 0 28px; }
.event-top .eyebrow { margin-bottom: 14px; }
.event-title { font-family: var(--font-serif); font-size: 46px; font-weight: 700; color: var(--et-marine); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; }
.event-deck { font-family: var(--font-serif); font-size: 20px; color: var(--et-graphite); line-height: 1.5; margin: 0; }

.event-banner { margin: 0 0 52px; }
.event-banner img { width: 100%; display: block; border-radius: 16px; max-height: 480px; object-fit: cover; }

.event-body { padding: 0 0 72px; }
.event-layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.event-layout__main { min-width: 0; }
.event-layout__ticket { position: sticky; top: 88px; }

/* Ticket panel */
.ticket-panel { background: var(--et-frost, #f7f9fb); border: 1.5px solid var(--et-cloud); border-radius: 20px; padding: 28px; }
.ticket-panel__meta { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.ticket-panel__meta-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); }
.ticket-panel__member-badge { display: flex; align-items: center; gap: 7px; background: var(--et-marine); border-radius: 10px; padding: 9px 13px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--et-mint); margin: 0 0 18px; }
.ticket-panel__price { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: var(--et-marine); line-height: 1; margin: 0 0 3px; }
.ticket-panel__price-label { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin: 0 0 18px; }
.ticket-panel__note { font-family: var(--font-sans); font-size: 12px; color: var(--et-graphite); margin: 12px 0 0; text-align: center; }
.ticket-panel__note a { color: var(--et-mint-500); text-decoration: underline; }
.ticket-panel__seats { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: #c06040; margin: 10px 0 0; }

.event-foot { padding: 0 0 60px; }

/* Ticket modal */
.ticket-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ticket-modal[hidden] { display: none; }
.ticket-modal__backdrop { position: fixed; inset: 0; background: rgba(15,25,50,0.55); z-index: 899; backdrop-filter: blur(4px); }
.ticket-modal__backdrop[hidden] { display: none; }
.ticket-modal__box { position: relative; background: #fff; border-radius: 20px; padding: 40px; max-width: 420px; width: 100%; z-index: 901; box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
.ticket-modal__close {
  position: absolute; top: 8px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: none; padding: 0;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--et-graphite); opacity: 0.6;
  border-radius: var(--radius-sm);
}
.ticket-modal__close:hover { opacity: 1; }
.ticket-modal__close:focus-visible { outline: 2px solid var(--et-mint-500); outline-offset: 2px; }
.ticket-modal__title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--et-marine); margin: 0 0 4px; }
.ticket-modal__event { font-family: var(--font-sans); font-size: 13px; color: var(--et-graphite); margin: 0 0 24px; }
/* Step indicator above the ticket form. Two states: pending and
   .is-current. Numbers in small mint chips. */
.ticket-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.ticket-steps__item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--et-graphite); }
.ticket-steps__item span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--et-cloud); color: var(--et-graphite); font-size: 11px; font-weight: 700; }
.ticket-steps__item.is-current { color: var(--et-marine); }
.ticket-steps__item.is-current span { background: var(--et-marine); color: #fff; }
.ticket-steps__item.is-done { color: var(--et-mint-500); }
.ticket-steps__item.is-done span { background: var(--et-mint-300); color: var(--et-marine); }
.ticket-steps__divider { flex: 1; height: 1.5px; background: var(--et-cloud); }

/* Two-column row inside the form (used for first/last name). */
.ticket-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .ticket-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* "Back" link inside step 2 — sits above the order summary, small and
   unobtrusive. Just a text link, not a button. */
.ticket-form__back { background: none; border: 0; padding: 0 0 14px; color: var(--et-graphite); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ticket-form__back:hover { color: var(--et-marine); }

.ticket-form__field { margin: 0 0 14px; }
.ticket-form__field label { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--et-marine); margin: 0 0 5px; }
.ticket-form__field input { width: 100%; border: 1.5px solid var(--et-cloud); border-radius: 9px; padding: 10px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--et-marine); outline: none; box-sizing: border-box; transition: border-color 120ms; }
.ticket-form__field input:focus { border-color: var(--et-mint-500); }
.ticket-form__member-badge { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--et-marine); background: var(--et-mint-100, #e8f8f7); border-radius: 8px; padding: 9px 12px; margin: 0 0 16px; font-weight: 600; }
.ticket-form__secure { font-family: var(--font-sans); font-size: 11px; color: var(--et-graphite); text-align: center; margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0.7; }
.ticket-form__consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--et-graphite); cursor: pointer; }
.ticket-form__consent input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--et-mint-500); cursor: pointer; }
.ticket-form__consent a { color: var(--et-marine); text-decoration: underline; text-decoration-color: var(--et-mint-300); text-underline-offset: 2px; }
.ticket-form__consent a:hover { text-decoration-color: var(--et-marine); }
.ticket-form__error { background: #fff0f0; border: 1px solid #f5c6c6; border-radius: 8px; padding: 10px 14px; font-family: var(--font-sans); font-size: 13px; color: #c00; margin: 12px 0 0; }

@media (max-width: 860px) {
  .event-title { font-size: 30px; }
  .event-deck { font-size: 17px; }
  .event-banner img { border-radius: 10px; max-height: 260px; }
  .event-layout { grid-template-columns: 1fr; gap: 36px; }
  .event-layout__ticket { position: static; }
}

/* ============================================================
   v2 Live Events — refreshed listing + single (May 2026)
   Replaces the old .ev-card/.ev-grid markup with .event-card /
   .event-list / .calendar-view, and a sidebar-rail single-event
   layout (.ev-detail). The old classes are kept for backwards
   compatibility on any other pages that still reference them.
   ============================================================ */
/* Generic chip used by the events filter bar + event-card meta row. */
.chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
  background: var(--et-mint-50); color: var(--et-marine);
  border: 1px solid var(--et-mint-100);
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.2; white-space: nowrap;
}
.event-list { display: flex; flex-direction: column; gap: 20px; }
.event-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.event-card:hover { box-shadow: var(--shadow-md); border-color: var(--et-mint-100); }
.event-card.is-open { box-shadow: var(--shadow-md); }

.event-card__main {
  display: grid;
  grid-template-columns: 96px 1fr 240px;
  gap: 28px;
  padding: 24px 28px;
  align-items: center;
}
.event-card__date {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 12px;
  padding: 10px 8px 12px;
  align-self: center;
}
.event-card__date-mo {
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-marine);
}
.event-card__date-day {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 36px; line-height: 1; color: var(--et-marine);
  margin: 4px 0 2px; letter-spacing: -0.02em;
}
.event-card__date-dow {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.event-card__body { min-width: 0; overflow-wrap: anywhere; }
.event-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.event-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 24px; line-height: 1.2;
  color: var(--et-marine); margin: 0 0 8px;
  letter-spacing: -0.012em; text-wrap: pretty;
}
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__title a:hover { text-decoration: underline; text-decoration-color: var(--et-mint-300); }
.event-card__excerpt {
  font-family: var(--font-serif); font-size: 15px;
  color: var(--fg); line-height: 1.55; margin: 0 0 14px; max-width: 60ch;
  /* Long unbroken strings (test data, URLs) must wrap and not bleed into the photo column. */
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.event-card__facts {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted);
}
.event-card__facts span { display: inline-flex; align-items: center; gap: 6px; }
.event-card__facts i[data-lucide] { width: 13px; height: 13px; color: var(--et-marine); flex-shrink: 0; }
.event-card__photo {
  width: 100%; aspect-ratio: 16/11;
  background-size: cover; background-position: center;
  background-color: var(--et-mint-100);
  border-radius: 10px;
}
.event-card__rsvp {
  display: grid; grid-template-columns: 1fr auto; gap: 28px;
  padding: 18px 28px; background: var(--et-paper);
  border-top: 1px solid var(--border); align-items: center;
}
.event-card__capacity { display: flex; flex-direction: column; gap: 8px; }
.event-card__capacity-bar { height: 5px; border-radius: 999px; background: var(--et-cloud); overflow: hidden; }
.event-card__capacity-fill {
  height: 100%; width: 100%;
  background: var(--et-mint-500);
  border-radius: 999px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease-out);
}
.event-card__capacity-text {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted);
  flex-wrap: wrap; gap: 8px;
}
.event-card__capacity-text strong { color: var(--et-marine); font-weight: 700; }
.event-card__more {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  color: var(--et-marine);
  display: inline-flex; align-items: center; gap: 4px; padding: 0;
}
.event-card__more i[data-lucide] { width: 13px; height: 13px; }
.event-card__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.event-card__detail {
  background: var(--et-mint-50);
  border-top: 1px solid var(--et-mint-100);
  padding: 24px 28px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
}
.event-card__detail .eyebrow { display: block; margin-bottom: 12px; }
.event-card__panel, .event-card__agenda {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.event-card__panel li {
  font-family: var(--font-serif); font-size: 15px;
  color: var(--fg); line-height: 1.5;
  padding-left: 18px; position: relative;
}
.event-card__panel li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px; background: var(--et-mint-500);
}
.event-card__agenda { counter-reset: agenda; }
.event-card__agenda li {
  font-family: var(--font-serif); font-size: 15px;
  color: var(--fg); line-height: 1.5;
  padding-left: 30px; position: relative;
  counter-increment: agenda;
}
.event-card__agenda li::before {
  content: counter(agenda);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  background: white; color: var(--et-marine);
  border: 1px solid var(--et-mint-300);
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Filter bar above the events list — subtle row, pill chips, mint-active state. */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  align-items: center;
}
.filter-bar__label {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
  margin-right: 4px;
}
.filter-bar__count {
  margin-left: auto;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-muted);
}
/* Group cluster — keeps the time-window pills visually tied together. */
.filter-bar__group { display: inline-flex; gap: 8px; }
/* Hairline divider between time + kind groups. */
.filter-bar__divider {
  display: inline-block; width: 1px; height: 18px;
  background: var(--border); margin: 0 4px; vertical-align: middle;
}
.filter-bar .chip {
  cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  padding: 6px 14px;
  background: transparent; border-color: var(--border); color: var(--fg-muted);
}
.filter-bar .chip:hover {
  background: var(--et-mint-50); color: var(--et-marine); border-color: var(--et-mint-100);
}
.filter-bar .chip.on {
  background: var(--et-marine); color: #fff;
  border-color: var(--et-marine); font-weight: 600;
}

/* Calendar view */
.calendar-view { display: flex; flex-direction: column; gap: 48px; }
.cal-month__head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.cal-month__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 26px; color: var(--et-marine);
  margin: 0; letter-spacing: -0.01em;
  min-width: 220px;
}
.cal-month__nav {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: 999px; color: var(--et-marine);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.cal-month__nav:hover { background: var(--et-mint-50); border-color: var(--et-mint-100); }
.cal-month__today {
  margin-left: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent; border: 1px solid var(--border);
  color: var(--et-marine); padding: 7px 14px;
  border-radius: 999px; cursor: pointer;
  transition: background 140ms ease;
}
.cal-month__today:hover { background: var(--et-mint-50); }
.cal-month__empty {
  text-align: center; padding: 24px;
  font-family: var(--font-serif); font-size: 15px;
  color: var(--fg-muted); font-style: italic;
  margin: 0;
}
.cal-month__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.cal-month__dow {
  background: var(--et-mint-50);
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--et-marine);
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.cal-month__cell {
  min-height: 110px;
  padding: 8px 8px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-month__cell:nth-child(7n+7) { border-right: 0; }
.cal-month__cell.is-empty { background: var(--et-paper); }
.cal-month__cell.is-today { background: var(--et-mint-50); }
.cal-month__cell.is-today .cal-month__day {
  background: var(--et-marine); color: white;
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.cal-month__day {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  color: var(--fg-muted); margin-bottom: 4px;
}
.cal-month__event {
  display: flex; gap: 6px; align-items: baseline;
  background: var(--et-marine); color: white;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  padding: 5px 8px; border-radius: 6px;
  text-decoration: none; line-height: 1.3; cursor: pointer;
  transition: background .15s; word-break: break-word;
}
.cal-month__event:hover { background: var(--et-marine-700); }
.cal-month__event.is-paid { background: var(--et-mint); color: var(--et-marine); }
.cal-month__event.is-paid:hover { background: var(--et-mint-300); }
.cal-month__event-time { font-weight: 700; flex-shrink: 0; font-size: 10px; opacity: 0.9; }

@media (max-width: 860px) {
  .event-card__main { grid-template-columns: 64px 1fr; gap: 18px; padding: 18px 20px; }
  .event-card__photo { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .event-card__rsvp { grid-template-columns: 1fr; padding: 16px 20px; gap: 14px; }
  .event-card__detail { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .cal-month__cell { min-height: 70px; padding: 6px 4px; }
  .cal-month__event { font-size: 10px; padding: 3px 5px; }
  .cal-month__event-time { display: none; }
}

/* List / Calendar toggle + iCal link in the hero */
.events-view-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
}
.events-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  background: transparent; border: 0; padding: 6px 14px;
  border-radius: 999px; color: var(--fg-muted); cursor: pointer;
  transition: background 140ms, color 140ms;
}
.events-view-toggle button:hover { color: var(--et-marine); }
.events-view-toggle button.is-active {
  background: var(--et-marine); color: #fff;
}

/* Single event detail (rail + body) */
.ev-detail { padding: 24px 0 96px; }
.ev-detail__crumbs { font-family: var(--font-sans); font-size: 13px; margin-bottom: 32px; }
.ev-detail__crumbs a {
  color: var(--fg-muted); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ev-detail__crumbs a:hover { color: var(--et-marine); text-decoration: underline; text-decoration-color: var(--et-mint); }

.ev-detail__grid { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }

.ev-detail__head { margin-bottom: 32px; }
.ev-detail__kind {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-mint-500);
}
.ev-detail__head h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.04; color: var(--et-marine);
  margin: 12px 0 18px; letter-spacing: -0.024em;
  text-wrap: balance; max-width: 28ch;
}
.ev-detail__excerpt {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.55;
  color: var(--fg-muted); font-style: italic;
  margin: 0; max-width: 56ch;
}
.ev-detail__image {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--et-mint-100);
  background-size: cover; background-position: center;
  margin-bottom: 40px;
}
.ev-detail__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 0 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ev-detail__facts > div { padding: 20px 24px; border-right: 1px solid var(--border); text-align: center; }
.ev-detail__facts > div:last-child { border-right: 0; }
.ev-detail__facts > div:first-child { padding-left: 0; }
.ev-detail__facts dt {
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 10px;
}
.ev-detail__facts dd {
  font-family: var(--font-serif); font-size: 17px;
  color: var(--et-marine); font-weight: 600;
  margin: 0; line-height: 1.35;
}
.ev-detail__facts .muted { font-weight: 400; color: var(--fg-muted); font-size: 14px; }
.ev-detail__facts a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-underline-offset: 3px;
}

.ev-detail__section { margin-bottom: 40px; }
.ev-detail__section h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; color: var(--et-marine);
  letter-spacing: -0.01em; margin: 0 0 18px;
}
.ev-detail__people { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ev-detail__people li {
  font-family: var(--font-serif); font-size: 17px;
  color: var(--fg); line-height: 1.4;
  padding-left: 24px; position: relative;
}
.ev-detail__people li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 12px; height: 2px; background: var(--et-mint-500);
}
.ev-detail__agenda { list-style: none; counter-reset: agenda; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ev-detail__agenda li {
  counter-increment: agenda;
  font-family: var(--font-serif); font-size: 17px;
  color: var(--fg); line-height: 1.5;
  padding: 14px 0 14px 48px;
  border-bottom: 1px solid var(--border); position: relative;
}
.ev-detail__agenda li:last-child { border-bottom: 0; }
.ev-detail__agenda li::before {
  content: counter(agenda, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--et-mint-500);
}

/* Body content inside the event detail page sits flush with the column
   instead of inheriting .gh-content's centered 720px max-width. */
.ev-detail__main .gh-content {
  margin: 0; max-width: none;
}

.ev-detail__fineprint {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--fg-muted); line-height: 1.5;
  margin: 32px 0 0; padding-top: 20px;
  border-top: 1px solid var(--border);
  max-width: none;
  text-align: center;
}

/* Sticky rail */
.ev-detail__rail { position: sticky; top: 110px; }
.ev-detail__card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  box-shadow: var(--shadow-md);
}
.ev-detail__card-date { display: flex; align-items: baseline; gap: 8px; }
.ev-detail__card-date .mo {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-mint-500);
}
.ev-detail__card-date .day {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 44px; color: var(--et-marine);
  line-height: 1; letter-spacing: -0.02em;
}
.ev-detail__card-time {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--fg-muted); margin-top: 4px;
}
.ev-detail__card-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 14px;
}
.ev-detail__card-price .big {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 30px; color: var(--et-marine); line-height: 1;
  letter-spacing: -0.01em;
}
.ev-detail__card-price .per {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--fg-muted); margin-left: 2px;
}
.ev-detail__card-cap { margin-bottom: 14px; }
.ev-detail__card-cap .bar { height: 4px; border-radius: 999px; background: var(--et-mint-100); overflow: hidden; margin-bottom: 8px; }
.ev-detail__card-cap .fill { height: 100%; background: var(--et-mint-500); }
.ev-detail__card-cap .cap-text { font-family: var(--font-sans); font-size: 12px; color: var(--fg-muted); }
.ev-detail__card-cap strong { color: var(--et-marine); font-weight: 600; }
.ev-detail__cta { width: 100%; justify-content: center; padding: 14px; font-size: 15px; margin-bottom: 6px; }
.ev-detail__card-cal,
.ev-detail__card-share {
  width: 100%; justify-content: center;
  background: transparent; border: 0;
  font-family: var(--font-sans); font-weight: 500; font-size: 13px;
  color: var(--fg-muted); cursor: pointer;
  padding: 6px 0; margin: 0;
  display: flex; align-items: center; gap: 8px;
  transition: color .15s;
}
.ev-detail__card-cal:hover, .ev-detail__card-share:hover { color: var(--et-marine); }
.ev-detail__card-cal i[data-lucide], .ev-detail__card-share i[data-lucide] { width: 14px; height: 14px; }

/* Add-to-calendar popover */
.cal-menu {
  display: flex; flex-direction: column;
  margin: 8px 0 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(15, 25, 50, 0.08);
  overflow: hidden;
}
.cal-menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--et-marine); text-decoration: none;
  transition: background 140ms ease;
}
.cal-menu__item + .cal-menu__item { border-top: 1px solid var(--et-cloud); }
.cal-menu__item:hover { background: var(--et-mint-50); }
.cal-menu__item i[data-lucide] { color: var(--et-marine-300); flex-shrink: 0; }

@media (max-width: 860px) {
  .ev-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .ev-detail__rail { position: static; }
  .ev-detail__facts { grid-template-columns: 1fr; }
  .ev-detail__facts > div { border-right: 0; border-bottom: 1px solid var(--border); padding: 16px 0; }
  .ev-detail__facts > div:last-child { border-bottom: 0; }
}

/* ============================================================
   Legal page — /legal/
   Big policy doc with sticky TOC. Tight reading column.
   ============================================================ */
.legal-hero {
  padding: 64px 0 32px;
  background: linear-gradient(180deg, var(--et-mint-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--et-cloud);
}
.legal-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: var(--et-marine);
  margin: 8px 0 16px;
}
.legal-hero__deck {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--et-graphite);
  max-width: 720px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.legal-hero__updated {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--et-marine-300);
  margin: 0;
}
.legal-body { padding: 48px 0 96px; background: #fff; }
.legal-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 96px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.legal-toc__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--et-marine-300);
  margin-bottom: 12px;
}
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--et-cloud);
}
.legal-toc li { margin: 0; }
.legal-toc a {
  display: block;
  padding: 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--et-graphite);
  text-decoration: none;
  line-height: 1.35;
  transition: color .12s ease, border-color .12s ease;
}
.legal-toc a:hover { color: var(--et-marine); }
.legal-toc a.is-active {
  color: var(--et-marine);
  border-left-color: var(--et-mint-500);
  font-weight: 600;
}
.legal-content { max-width: 720px; }
.legal-section {
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--et-cloud);
  scroll-margin-top: 96px;
}
.legal-section:last-of-type { border-bottom: 0; }
.legal-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 32px);
  color: var(--et-marine);
  margin: 0 0 20px;
  line-height: 1.15;
}
.legal-section h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--et-marine);
  margin: 22px 0 10px;
}
.legal-section p,
.legal-section li {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--et-graphite);
}
.legal-section p { margin: 0 0 14px; }
.legal-section ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-section li { margin-bottom: 6px; }
.legal-section a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-underline-offset: 3px;
}
.legal-section a:hover { text-decoration-color: var(--et-marine); }
.legal-section strong { color: var(--et-marine); font-weight: 700; }
.legal-foot {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--et-mint-50);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--et-marine);
}
.legal-foot p { margin: 0; font-family: var(--font-sans); }

/* Tiny disclosure line — used under signup CTAs, ticket buttons, etc. */
.legal-microcopy {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--et-marine-300);
  margin: 10px 0 0;
}
.legal-microcopy a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-underline-offset: 2px;
}
.legal-microcopy a:hover { text-decoration-color: var(--et-marine); }
/* Variant for use over dark/marine backgrounds (e.g. Insider card). */
.legal-microcopy--on-marine { color: rgba(255, 255, 255, 0.85); }
.legal-microcopy--on-marine a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}
.legal-microcopy--on-marine a:hover { text-decoration-color: #fff; }

@media (max-width: 860px) {
  .legal-grid { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc {
    position: static;
    padding: 16px 18px;
    background: var(--et-mint-50);
    border-radius: 12px;
  }
  .legal-toc ol { border-left: 0; }
  .legal-toc a { padding: 5px 0; }
  .legal-toc a.is-active { border-left: 0; }
}

/* ============================================================
   Polish pass — Path A
   Audit fixes for skip-link, scroll-margin, balanced display
   typography, hero photo overlap, btn-class drift, active nav,
   focus rings, empty-state CTAs.
   ============================================================ */

/* Skip-to-content (WCAG 2.4.1). Hidden until focused, then
   slides into view as a high-contrast pill. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  background: var(--et-marine);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  pointer-events: none;
  transition: top 180ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  pointer-events: auto;
  outline: 2px solid var(--et-mint-500);
  outline-offset: 2px;
}

/* Anchor scroll respects the sticky header. Used on /legal/
   section ids and any in-page jump destinations. */
.legal-section,
[id]:target { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }

/* Align the BEM .btn base with the single-dash variants so the
   two parallel button systems render identically. Matches
   .btn-marine spec (10px radius, 12px 22px, 15px). Scoped with
   :not() so existing size modifiers (.btn-lg/.btn-sm/.btn--lg/
   .btn--sm) and .btn--link still win their padding/radius. */
.btn:not(.btn-lg):not(.btn-sm):not(.btn-link):not(.btn--lg):not(.btn--sm):not(.btn--link) {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
}
.btn--lg { padding: 14px 26px; font-size: 16px; border-radius: 10px; }
.btn--sm { padding: 8px 14px;  font-size: 13px; border-radius: 8px; }

/* Universal focus ring — visible only on keyboard nav. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--et-mint-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Display headlines get balanced wrapping so orphan words
   like "yours." or "it." don't sit alone on the last line. */
.hero__lockup h1,
.cta-banner h2,
.section-head-row h2,
.section-head-center h2,
.archive-hero__title,
.memb-hero__title,
.legal-hero__title,
.submit-hero__title,
.podcast-hero__title,
.events-hero__title,
.about-hero__title {
  text-wrap: balance;
}
.lede,
.archive-hero__deck,
.memb-hero__deck,
.legal-hero__deck,
.submit-hero__deck,
.podcast-hero__deck,
.events-hero__deck,
.about-hero__deck {
  text-wrap: pretty;
}

/* Skip-link keeps its pill radius even when :focus-visible applies. */
.skip-link:focus-visible {
  border-radius: 0 0 8px 8px;
}

/* Hero photo gets a saffron offset card behind it, breaking the
   strict two-col symmetry without changing the markup contract. */
.hero__art { position: relative; }
.hero__art::before {
  content: "";
  position: absolute;
  inset: 32px -16px -32px 16px;
  background: var(--et-mint-100);
  border-radius: var(--radius-xl);
  z-index: 0;
  transform: rotate(-1.5deg);
}
.hero__art .brand-frame { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .hero__art::before { inset: 20px -8px -20px 8px; }
}

/* Active route indicator in primary nav. JS in main.js applies
   `.is-active` to the matching `.nav__top` based on data-nav-url. */
.nav__top.is-active {
  color: var(--et-marine);
}
.nav__top.is-active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--et-mint-500);
  border-radius: 1px;
  margin-top: 4px;
  animation: nav-underline 240ms var(--ease-out);
}
@keyframes nav-underline {
  from { transform: scaleX(0); transform-origin: left; opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Section padding utility — replaces inline style="padding: 64px 0 96px;"
   sprinkled across templates. */
.section--tight   { padding: 24px 0 64px; }
.section--bottom-lg { padding: 0 0 96px; }

/* Centered control row utility (was inline). */
.row-center { display: flex; justify-content: center; margin: 0 0 28px; }

/* IG / mosaic empty-state CTA — replaces 6 hardcoded fallback rows. */
.ig-empty {
  background: var(--et-mint-50);
  border: 1px dashed var(--et-mint-300);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-sans);
  color: var(--et-marine);
}
.ig-empty h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--et-marine);
}
.ig-empty p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--et-graphite);
  margin: 0 0 18px;
}

/* Submit success CTA wording */
.submit-done__back { font-family: var(--font-serif); font-style: normal; }


/* Eyebrow variant when sitting on a dark/marine surface (replaces
   inline style="color:#fff;" on cta-banner eyebrows). */
.eyebrow--on-dark { color: rgba(255, 255, 255, 0.95); }


/* Podcast page empty state — replaces 8 hardcoded fake episode rows. */
.ep-empty {
  background: var(--et-mint-50);
  border: 1px dashed var(--et-mint-300);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ep-empty h3 {
  font-family: var(--font-serif);
  font-size: 26px; color: var(--et-marine);
  margin: 4px 0 0;
}
.ep-empty p {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6;
  color: var(--et-graphite);
  max-width: 460px; margin: 0;
}

/* Events page section utility classes (replaces inline styles). */
.events-hero {
  background: var(--et-mint-50);
  border-bottom: 1px solid var(--border);
}
.events-hero__inner { padding: 64px 32px 48px; }
.events-hero__controls {
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
}
.events-filter-section { padding: 32px 0 0; }
.events-list-section { padding: 24px 0 64px; }
.events-filter__count {
  margin-left: auto;
  font-family: var(--font-sans); font-size: 13px;
  color: var(--fg-muted);
}

/* Submit done — replaces inline justify-content/margin styles. */
.submit-card__foot--centered { justify-content: center; margin-top: 24px; }

/* Visible inline error for #form-status when a submission fails or
   client-side validation messaging needs to surface. JS toggles
   .form-status--error / .form-status--info. */
.form-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
}
.form-status--error {
  background: rgba(176, 86, 86, 0.08);
  border: 1px solid rgba(176, 86, 86, 0.28);
  color: var(--danger, #B05656);
}
.form-status--info {
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-300);
  color: var(--et-marine);
}

/* Skeleton state for ticket-price placeholders before JS hydrates.
   The shimmer is subtle so it doesn't compete with real content. */
.price-skeleton {
  display: inline-block;
  color: var(--et-mint-300);
  letter-spacing: 0.2em;
  animation: price-pulse 1.4s ease-in-out infinite;
}
@keyframes price-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.price-skeleton[aria-busy="false"] { animation: none; color: inherit; letter-spacing: normal; }

/* About CTA — replaces inline style="text-align:center;" */
.about-cta__inner { text-align: center; }

/* About page panel teaser — replaces the full duplicated bio block.
   Stays on the page as a visual proof-of-people; deep bios live at
   /contributors/. */
.about-panel-teaser {
  margin: 64px 0 0;
  padding: 48px 32px;
  background: var(--et-mint-50);
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.about-panel-teaser__eyebrow { margin: 0 0 4px; }
.about-panel-teaser__row {
  display: flex; justify-content: center; align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.about-panel-teaser__row img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  margin-left: -12px;
  box-shadow: var(--shadow-sm);
  background: var(--et-cloud);
  transition: transform 220ms var(--ease-out);
}
.about-panel-teaser__row img:first-child { margin-left: 0; }
.about-panel-teaser__row img:hover {
  transform: translateY(-4px);
  z-index: 1; position: relative;
}
.about-panel-teaser__deck {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6;
  color: var(--et-graphite);
  max-width: 520px;
  margin: 4px 0 8px;
  text-wrap: pretty;
}

/* ============================================================
   PATH B — EDITORIAL LUXE
   Pushes the existing warm-editorial direction further toward
   the Cereal / Monocle / Kinfolk magazine register: bigger
   display type, asymmetric placement, drop caps, pull quotes,
   image bleed, subtle film grain, wider whitespace, tabular
   figures, and a cinematic stat reveal on scroll.
   ============================================================ */

/* ----- 1. Bigger display type + tabular figures -------------- */
/* All editorial hero/display headings get a bigger floor + ceiling
   and a touch more negative tracking so they read as deliberate
   magazine masthead rather than blog post title. */
:where(
  .hero__lockup h1,
  .archive-hero__title,
  .memb-hero__title,
  .legal-hero__title,
  .submit-hero__title,
  .podcast-hero__title,
  .events-hero__title,
  .about-hero__title
) {
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
/* Hero on the homepage gets the boldest treatment (cover-story scale). */
.hero__lockup h1 {
  font-size: clamp(48px, 6.5vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.032em;
}
/* All numeric digits across the design system use tabular figures —
   datelines, stats, prices, counts align cleanly in columns. */
:root { font-variant-numeric: tabular-nums; }
.price-num, .stat__num, .ep-row__num, .archive-hero__stats strong,
.archive-tab__count, .archive-empty p strong, .legal-hero__updated,
[data-events-count], .ev-card__when, .ev-detail__when {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ----- 2. Magazine eyebrow / dateline treatment -------------- */
/* Use as: <span class="dateline">Vol 03 · Issue 12 · May 2026</span>
   When applied to existing eyebrows, adds the editorial bullets +
   small-caps treatment without changing markup. */
.dateline,
.eyebrow--issue {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--et-marine-300);
}
.dateline::before,
.eyebrow--issue::before,
.dateline::after,
.eyebrow--issue::after {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* ----- 3. Drop caps on long-form articles -------------------- */
/* OPT-IN drop cap. Add `.has-drop-cap` class to the post wrapper or
   <body> (e.g. via a #dropcap Ghost internal tag → body_class) to
   activate. We avoid the auto-everywhere form because ::first-letter
   would also enlarge leading punctuation (quotes, parens, em-dash)
   on posts that open with them, which looks awkward. */
.has-drop-cap .gh-content > p:first-of-type::first-letter,
.gh-content > p.drop-cap::first-letter {
  float: left;
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(64px, 9vw, 92px);
  line-height: 0.85;
  margin: 6px 12px 0 0;
  color: var(--et-marine);
}
@media (max-width: 540px) {
  .has-drop-cap .gh-content > p:first-of-type::first-letter,
  .gh-content > p.drop-cap::first-letter {
    font-size: 56px;
    margin: 4px 8px 0 0;
  }
}

/* ----- 4. Pull quotes ---------------------------------------- */
/* Style for .pull-quote inside .gh-content, or for Ghost's native
   blockquote when the editor adds class "kg-blockquote-alt". */
.gh-content blockquote,
.gh-content .kg-blockquote-alt,
.pull-quote {
  position: relative;
  margin: 48px auto;
  padding: 28px 8px 28px 32px;
  max-width: 720px;
  border-left: 3px solid var(--et-mint-500);
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.32;
  color: var(--et-marine);
  text-wrap: balance;
}
.gh-content blockquote::before,
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: -2px; top: -18px;
  font-family: var(--font-serif-display);
  font-style: normal;
  font-size: 80px;
  line-height: 1;
  color: var(--et-mint-300);
  pointer-events: none;
}
.gh-content blockquote cite,
.pull-quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--et-marine-300);
}

/* ----- 5. Image-bleed sections ------------------------------- */
/* Apply .image-bleed to a wrapper inside a max-width container
   to let it break out to 90vw / 100vw. */
.image-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.image-bleed--soft {
  width: min(100vw, 1600px);
  position: relative;
  left: 50%; right: 50%;
  margin-left: calc(50% - min(50vw, 800px));
  margin-right: calc(50% - min(50vw, 800px));
}
.image-bleed figcaption,
.image-bleed__caption {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--et-marine-300);
  letter-spacing: 0.04em;
  margin-top: 10px;
  padding: 0 24px;
  max-width: 720px;
}

/* ----- 6. Film grain overlay --------------------------------- */
/* Subtle SVG noise fixed over the hero photo. Pointer-events:none
   so it never blocks clicks. 2% opacity is enough to break the
   digital flatness without screaming "vintage filter". */
.hero__photo {
  position: relative;
  isolation: isolate;
}
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* ----- 7. Vertical feature spread (Tip of the Week) ---------- */
/* When the Tip section uses .feature-spread instead of the
   3-card grid, the featured tip becomes a magazine cover story
   with supporting tips beside it. */
.feature-spread {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.feature-spread__lead {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--et-cloud);
  aspect-ratio: 5 / 6;
  display: block;
}
.feature-spread__lead img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 540ms var(--ease-out);
}
.feature-spread__lead:hover img { transform: scale(1.03); }
.feature-spread__lead-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 32px 28px;
  color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(20, 34, 47, 0.85) 100%);
}
.feature-spread__lead-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px; display: block;
}
.feature-spread__lead-title {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 10px;
  color: #fff;
}
.feature-spread__lead-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.feature-spread__supporting { display: flex; flex-direction: column; gap: 20px; }
.feature-spread__support {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding: 12px 0;
  border-bottom: 1px solid var(--et-cloud);
}
.feature-spread__support:last-child { border-bottom: 0; }
.feature-spread__support img {
  width: 88px; height: 88px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.feature-spread__support-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--et-marine);
  margin: 0 0 4px;
  text-wrap: balance;
}
.feature-spread__support-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--et-marine-300);
}
@media (max-width: 860px) {
  .feature-spread { grid-template-columns: 1fr; gap: 32px; }
  .feature-spread__lead { aspect-ratio: 4 / 5; }
}

/* ----- 8. Podcast "Back Issues" rack ------------------------- */
/* Magazine-spine-style horizontal archive. Restrained palette
   (tone-on-tone marine) so the rack reads as an archive, not a
   rainbow. Wider spines + multi-line title with line-clamp so
   long episode names don't truncate mid-word.

   Layout per spine:
     ┌─────────────┐
     │ № 03        │  ← issue number (sans, small caps)
     │             │
     │ Title in    │  ← magazine title, multi-line clamp
     │ a stack of  │
     │ lines       │
     │             │
     │ Sep 25      │  ← issue date
     └─────────────┘

   No vertical/rotated text — readability beats novelty. The
   tall narrow proportion + book-spine top-radius + thin
   highlight strip on hover is what sells the magazine feel. */
.back-issues {
  display: flex;
  gap: 3px;
  align-items: stretch; /* uniform spine height — all books equal */
  padding: 40px 18px 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  /* The shelf itself — warm wood band at the bottom with a thin
     leading edge of light, then a slim shadow under it. */
  background:
    linear-gradient(180deg,
      transparent 0,
      transparent calc(100% - 22px),
      rgba(255, 255, 255, 0.7) calc(100% - 22px),
      rgba(255, 255, 255, 0.7) calc(100% - 20px),
      #8a6f4d calc(100% - 20px),
      #6e5536 calc(100% - 4px),
      rgba(20, 34, 47, 0.18) calc(100% - 4px),
      rgba(20, 34, 47, 0.05) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 4px 4px;
  padding-bottom: 24px; /* clearance below shelf top so books "stand" on it */
}
.back-issues__spine {
  flex: 0 0 118px;
  min-height: 318px;
  padding: 22px 14px 22px;
  /* Slight pinch at the bottom — books are widest at the spine middle */
  border-radius: 2px 2px 1px 1px;
  background: var(--et-marine-900);
  color: #F2F8F8;
  text-decoration: none;
  display: flex; flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  /* Bookbinding shading — light highlight on the left edge (page
     block peeking out), darker on the right (shadow between books). */
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.08),
    inset -2px 0 4px rgba(0, 0, 0, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.18);
}
/* Cloth-binding bands — two horizontal hairlines near top + bottom,
   the way an old hardback's headband + tail looks on the shelf. */
.back-issues__spine::before,
.back-issues__spine::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.back-issues__spine::before { top: 14px;    box-shadow: 0 4px 0 rgba(255,255,255,0.10); }
.back-issues__spine::after  { bottom: 14px; box-shadow: 0 -4px 0 rgba(255,255,255,0.10); }
.back-issues__spine:hover {
  transform: translateY(-10px);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.1),
    inset -2px 0 4px rgba(0, 0, 0, 0.28),
    0 18px 26px -10px rgba(20, 34, 47, 0.42);
}

/* ----- Brand-palette book rotation (6 covers) ---------------------
   Each "book" uses a real brand token so the shelf reads as a curated
   library, not a swatch test. Width + height vary subtly so the row
   looks bound rather than uniform. */
.back-issues__spine:nth-child(6n + 1) { background: var(--et-marine-900); flex-basis: 118px; }
.back-issues__spine:nth-child(6n + 2) {
  background: var(--et-mint);          /* pale cloth — needs dark text */
  color: var(--et-marine-900);
  flex-basis: 108px;
}
.back-issues__spine:nth-child(6n + 3) { background: var(--et-marine);     flex-basis: 124px; }
.back-issues__spine:nth-child(6n + 4) { background: var(--et-mint-500);   flex-basis: 110px; color: var(--et-marine-900); }
.back-issues__spine:nth-child(6n + 5) { background: var(--et-ink);        flex-basis: 116px; }
.back-issues__spine:nth-child(6n + 6) { background: var(--et-marine-700); flex-basis: 120px; }

/* Num + date opacity scales to the book it's printed on. */
.back-issues__spine-num,
.back-issues__spine-date {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 248, 248, 0.82);
}
.back-issues__spine-num  { font-size: 11px; }
.back-issues__spine-date { font-size: 10px; margin-top: auto; }
.back-issues__spine:nth-child(6n + 2) .back-issues__spine-num,
.back-issues__spine:nth-child(6n + 2) .back-issues__spine-date,
.back-issues__spine:nth-child(6n + 4) .back-issues__spine-num,
.back-issues__spine:nth-child(6n + 4) .back-issues__spine-date {
  color: rgba(20, 34, 47, 0.72);
}
.back-issues__spine-title {
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  align-self: stretch;
}
@media (max-width: 640px) {
  .back-issues__spine { flex-basis: 100px !important; min-height: 268px !important; padding: 18px 12px; }
  .back-issues__spine-title { font-size: 14px; -webkit-line-clamp: 6; }
}

/* ----- 9. Whitespace expansion ------------------------------- */
/* Section vertical padding increases on large viewports — gives
   the page the breath of a magazine spread. Reverts on small
   screens so mobile doesn't feel empty. */
@media (min-width: 1080px) {
  .section:not(.section--tight):not(.section--bottom-lg),
  .section-mint,
  .about-hero, .memb-hero, .archive-hero,
  .legal-hero, .submit-hero, .podcast-hero, .events-hero {
    padding-top: clamp(72px, 7vw, 128px);
    padding-bottom: clamp(72px, 7vw, 128px);
  }
  /* .section--tight keeps its 24/64 spec; .section--bottom-lg keeps 0/96. */
}

/* ----- 10. Cinematic stat reveal ----------------------------- */
/* Stats wrapped in [data-stat-reveal] get an opacity+translate
   in animation as they scroll into view. JS toggles .is-revealed. */
[data-stat-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-stat-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* Podcast page section replaces inline style="padding:64px 0 96px;". */
.podcast-list-section { padding: 64px 0 96px; }

/* Feature spread empty supporting list. */
.feature-spread__support-empty {
  font-family: var(--font-serif);
  color: var(--et-marine-300);
  font-style: italic;
  font-size: 15px;
  padding: 8px 0;
}

/* Chat quota locked state — applied when a guest's monthly questions
   are exhausted. Inputs go dim + can't be edited; suggestion chips
   dim out. The header/sidebar Upgrade CTA remains the active path. */
.is-quota-locked,
.is-quota-locked:focus,
.is-quota-locked:focus-visible {
  background: var(--et-cloud);
  color: var(--et-mist);
  cursor: not-allowed;
  outline: none;
}
[data-chat-input].is-quota-locked::placeholder {
  color: var(--et-marine-300);
  opacity: 0.85;
}
[data-chat-suggest].is-quota-locked {
  pointer-events: none;
  opacity: 0.45;
  background: var(--et-cloud);
}
[data-chat-form] button[type="submit"][disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* When the post-ask widget is JS-relocated inline (between Key takeaways
   and Transcript), give it a touch more breathing room so it doesn't
   crash into the surrounding content. */
.post-ask--inline {
  margin: 48px auto;
  max-width: 720px;
  scroll-margin-top: 96px;
}

/* ============================================================
   Ticket modal — order summary + payment selector
   ============================================================ */
.ticket-summary {
  margin: 8px 0 14px;
  padding: 14px 16px;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}
.ticket-summary__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--et-marine-300);
  margin-bottom: 8px;
}
.ticket-summary__list { margin: 0; padding: 0; }
.ticket-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 13px; color: var(--et-marine);
}
.ticket-summary__row dt { margin: 0; }
.ticket-summary__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.ticket-summary__row .muted { color: var(--fg-meta); font-size: 11px; }
.ticket-summary__row--discount { color: var(--et-mint-500); }
.ticket-summary__row--discount dd { color: var(--et-mint-500); font-weight: 600; }
.ticket-summary__row--total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--et-mint-100);
  font-size: 15px; font-weight: 700;
}

/* Payment method radio cards */
.ticket-pay { border: 0; margin: 14px 0 0; padding: 0; }
.ticket-pay legend {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--et-marine);
  margin-bottom: 6px;
  padding: 0;
}
.ticket-pay__option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  margin-bottom: 6px;
  background: #fff;
  border: 1.5px solid var(--et-cloud);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 140ms var(--ease-quick), background 140ms;
}
.ticket-pay__option:hover { border-color: var(--et-mint-300); }
.ticket-pay__option input[type="radio"] {
  margin: 3px 0 0; flex-shrink: 0;
  accent-color: var(--et-mint-500);
}
.ticket-pay__option:has(input:checked) {
  border-color: var(--et-mint-500);
  background: var(--et-mint-50);
}
.ticket-pay__option-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ticket-pay__option-title {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--et-marine);
  display: inline-flex; align-items: center; gap: 6px;
}
.ticket-pay__option-sub {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--et-graphite);
}

/* Zelle pane shown when Zelle is selected */
.ticket-zelle {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-300);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}
.ticket-zelle__head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--et-marine);
  margin-bottom: 6px;
}
.ticket-zelle__amount,
.ticket-zelle__memo {
  font-size: 14px; color: var(--et-marine);
  margin: 0 0 4px;
}
.ticket-zelle__memo { margin-bottom: 10px; }
.ticket-zelle__amount strong { font-variant-numeric: tabular-nums; }
.ticket-zelle__memo em { font-style: italic; }
.ticket-zelle__note {
  font-size: 12px; color: var(--et-graphite);
  line-height: 1.45;
  margin: 0 0 10px;
}

/* Modal success state for Zelle path */
.ticket-modal__success {
  text-align: center;
  padding: 8px 0;
}
.ticket-modal__success-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--et-mint-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.ticket-modal__success h3 {
  font-family: var(--font-serif);
  font-size: 22px; color: var(--et-marine);
  margin: 0 0 8px;
}
.ticket-modal__success p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  color: var(--et-graphite);
  margin: 0 0 18px;
}

/* ============================================================
   FINAL POLISH PASS — anti-cookie-cutter touches
   Editorial 404, micro-interactions, hero depth, reading
   progress, footer art, hover/focus states with real personality.
   ============================================================ */

/* ----- Editorial 404 + error page ---------------------------- */
.error-page {
  min-height: calc(100dvh - 200px);
  display: flex; align-items: center;
  padding: 80px 0;
}
.error-page__inner {
  display: grid;
  /* Two balanced columns — numerals on the left, story + doors on the
     right. minmax(0,...) on both stops either side from blowing out
     and squeezing its neighbor (which is what caused the 404 to
     overlap the door cards in the original layout). */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.error-page__numerals {
  font-family: var(--font-serif-display);
  font-weight: 700;
  /* Capped at 200px and 14vw so the digits sit inside their grid
     column at every viewport instead of bleeding into the body. */
  font-size: clamp(96px, 14vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--et-marine);
  opacity: 0.92;
  position: relative;
  /* Sticky-ish placement so the giant numerals feel anchored as the
     reader scrolls the right column on tall viewports. */
  position: sticky;
  top: 96px;
  align-self: start;
}
.error-page__numerals::before {
  content: "";
  position: absolute;
  /* Decorative mint blob is now CONTAINED inside the numerals box
     (no negative inset overflow into the neighboring column). */
  inset: 8% 0 8% 0;
  background: var(--et-mint-100);
  border-radius: 100% 20% 80% 30% / 30% 60% 40% 70%;
  z-index: -1;
  opacity: 0.45;
  transform: rotate(-2deg);
}
.error-page__title {
  font-family: var(--font-serif-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--et-marine);
  margin: 12px 0 14px;
  text-wrap: balance;
}
.error-page__deck {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--et-graphite);
  max-width: 480px;
  margin: 0 0 28px;
}
.error-page__doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--et-cloud);
  margin-bottom: 28px;
}
.error-page__door {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--et-cloud);
  text-decoration: none;
  color: var(--et-ink);
  position: relative;
  transition: padding-left 220ms var(--ease-out), color 180ms;
}
.error-page__door:nth-child(odd)  { padding-right: 18px; border-right: 1px solid var(--et-cloud); }
.error-page__door:nth-child(even) { padding-left: 18px; }
.error-page__door:hover { padding-left: 26px; color: var(--et-marine); }
.error-page__door:nth-child(odd):hover { padding-left: 14px; }
.error-page__door::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  font-size: 18px;
  color: var(--et-mint-500);
  transition: transform 220ms var(--ease-out), opacity 180ms;
}
.error-page__door:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.error-page__door-num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--et-mint-500);
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 4px;
}
.error-page__door-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--et-marine);
  display: block;
}
.error-page__door-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--et-graphite);
  display: block;
  margin-top: 2px;
}
.error-page__signoff {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--et-graphite);
  margin: 0;
}
.error-page__signoff a {
  color: var(--et-marine);
  text-decoration: underline;
  text-decoration-color: var(--et-mint-300);
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .error-page__inner { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .error-page__numerals {
    font-size: clamp(96px, 28vw, 160px);
    /* Drop the sticky behavior on phones — it reads as a layout
       bug at narrow viewports where the numerals span the whole
       column above the body. Let it scroll naturally. */
    position: static;
    top: auto;
  }
  .error-page__doors { grid-template-columns: 1fr; }
  .error-page__door:nth-child(odd) { padding-right: 4px; border-right: 0; }
  .error-page__door:nth-child(even) { padding-left: 4px; }
}

/* ----- Reading progress rail (long-form posts) --------------- */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  pointer-events: none;
  z-index: 200;
}
.reading-progress__fill {
  /* Full-width fill, scaled on the X axis via transform so we stay on
     the compositor and don't trigger layout on every scroll tick.
     JS sets `transform: scaleX(progress)` instead of width. */
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--et-mint-500), var(--et-marine));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 90ms linear;
}

/* ----- Brand mark micro-interaction --------------------------- */
.brand { position: relative; display: inline-flex; align-items: center; }
.brand__logo { transition: transform 320ms var(--ease-out), filter 220ms; }
.brand:hover .brand__logo { transform: rotate(-3deg) scale(1.04); }
.brand:active .brand__logo { transform: rotate(-1deg) scale(0.98); }

/* ----- Nav top underline travels in on hover ------------------ */
.nav__top {
  position: relative;
  transition: color 160ms var(--ease-out);
}
.nav__top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--et-mint-500);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms var(--ease-out);
}
.nav__top:hover { color: var(--et-marine); }
/* Hover no longer reveals the underline — only the active page gets one.
   Keeps the chrome quieter on every page Rachel passes through. */
.nav__top.is-active::before { transform: scaleX(1); transform-origin: left center; background: var(--et-mint-500); }
.nav__top.is-active::after { display: none; } /* the old ::after underline conflicts; we use ::before now */

/* ----- Buttons feel pressed on active ------------------------- */
.btn, .btn-marine, .btn-ghost, .btn-on-marine, .btn-mint {
  transition: background 140ms var(--ease-out), border-color 140ms, color 140ms, transform 100ms var(--ease-out), box-shadow 180ms;
}
.btn:active, .btn-marine:active, .btn-ghost:active, .btn-on-marine:active, .btn-mint:active {
  transform: translateY(1px) scale(0.985);
}

/* ----- Inputs: focus glow that respects brand ----------------- */
input.input:focus,
textarea.textarea:focus,
select.select:focus,
.ai-search__input:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--et-mint-500);
  box-shadow: 0 0 0 3px rgba(95, 182, 181, 0.22);
}

/* ----- About-page pillars get serif numerals ----------------- */
.pillar { position: relative; overflow: hidden; isolation: isolate; }
.pillar::before {
  counter-increment: pillar-counter;
  content: counter(pillar-counter, decimal-leading-zero);
  position: absolute;
  top: -22px; right: -10px;
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: 140px;
  line-height: 1;
  color: currentColor;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.pillar-grid { counter-reset: pillar-counter; position: relative; z-index: 1; }
.pillar > * { position: relative; z-index: 1; }

/* ----- Editorial section divider ----------------------------- */
.editorial-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 56px auto;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--et-marine-300);
}
.editorial-rule::before,
.editorial-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--et-cloud);
  max-width: 120px;
}

/* ----- Card hover lift with shadow tint ---------------------- */
.tip-card, .arc-card, .ig-cell, .ep-card, .contrib-card, .feature-spread__support {
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.tip-card:hover, .arc-card:hover, .ep-card:hover, .contrib-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -10px rgba(31, 47, 63, 0.18);
}

/* ----- Hero photo: scale-on-scroll via CSS only (cheap, no JS) */
.hero__photo {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.hero__lockup h1 .em-mint {
  background: linear-gradient(120deg, var(--et-mint-500) 0%, var(--et-marine) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Hero meta gains a thin bracket on hover */
.hero__meta span {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  padding-left: 14px;
}
.hero__meta span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--et-mint-500);
}

/* ----- Footer: small editorial wordmark + improved hierarchy - */
.site-footer__grid h4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--et-mint-300);
  margin-bottom: 14px;
}
.site-footer__col ul li { margin-bottom: 8px; }
.site-footer__col a {
  transition: color 160ms;
}
.site-footer__col a:hover { color: #fff; }

/* ----- Sticky-header lift on scroll: better feel ------------- */
.site-header {
  transition: background 220ms var(--ease-out),
              border-bottom-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              backdrop-filter 220ms var(--ease-out);
}
.site-header.is-scrolled {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  box-shadow: 0 1px 0 0 var(--border), 0 8px 24px -16px rgba(31,47,63,0.18);
}

/* ----- Selection color: branded ------------------------------ */
::selection {
  background: var(--et-mint-500);
  color: #fff;
}

/* ----- Smooth keyboard-visible focus ring overrides ---------- */
:where(a):focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}

/* ----- Empty state voice — light personality ---------------- */
.archive-empty { animation: empty-breathe 4.5s ease-in-out infinite; }
@keyframes empty-breathe {
  0%, 100% { opacity: 0.95; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}


/* ----- Hero editorial masthead + photo caption --------------- */
.hero__masthead {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--et-marine-300);
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--et-cloud);
  display: flex; align-items: center; gap: 14px;
}
.hero__masthead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--et-cloud);
}
.hero__cap {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--et-marine-300);
  text-align: right;
}
@media (max-width: 860px) {
  .hero__masthead { font-size: 10px; }
  .hero__cap { text-align: left; }
}

/* (Footer brand-mark watermark removed — the half-bleed logo behind
   the columns added visual noise without adding meaning. Footer is
   the cleaner sign-off without it.) */


/* Event-detail title block: when used full-width above the grid,
   give it container-width breathing room and constrain the line
   length of the excerpt so headlines don't get unreadably wide. */
.ev-detail__head--full {
  margin: 0 0 32px;
}
.ev-detail__head--full h1 { max-width: 22ch; }
.ev-detail__head--full .ev-detail__excerpt { max-width: 60ch; }

/* Old in-grid head margin no longer applies when used full-width. */
.ev-detail__head--full + .ev-detail__grid .ev-detail__main > :first-child { margin-top: 0; }

/* Quantity stepper inside the ticket modal */
.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--et-cloud);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  width: 132px;
}
.qty-stepper__btn {
  width: 38px; height: 40px;
  background: transparent; border: 0;
  font: 700 18px/1 var(--font-sans);
  color: var(--et-marine);
  cursor: pointer;
  transition: background 140ms var(--ease-quick);
}
.qty-stepper__btn:hover { background: var(--et-mint-50); }
.qty-stepper__btn:disabled { color: var(--et-mist); cursor: not-allowed; }
.qty-stepper input[type="number"] {
  flex: 1; min-width: 0;
  width: 56px;
  border: 0;
  text-align: center;
  font: 700 16px/1 var(--font-sans);
  color: var(--et-marine);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qty-stepper input[type="number"]:focus { outline: none; }

/* Success card action row */
.ticket-modal__success-actions {
  display: flex; flex-direction: column; gap: 8px;
}

/* Whole event card clickable — title anchor stretches over the whole
   article via ::after, so clicking anywhere on the card opens the
   event. Interactive children stay clickable because they live above
   the stretched link in stacking order (relative + z-index). */
.event-card { position: relative; cursor: pointer; }
.event-card__title { position: static; }
.event-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.event-card .chip,
.event-card .badge { position: relative; z-index: 2; }

/* ============================================================
   Accessibility utility + new components added in cleanup pass
   ============================================================ */

/* Visually hidden but exposed to assistive tech. Used for landmark
   headings (e.g. the podcast page <h1> when a logo image replaces it
   visually) and any other off-screen labels. Standard WCAG pattern. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Submit-form helpers — the body textarea becomes optional for video
   submissions, and a small inline "(optional…)" hint sits next to the
   label. Tone-matched to the existing form styles. */
.field--fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.field--fieldset legend {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 8px;
  padding: 0;
}
.field__optional {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-meta);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* Related posts (post.hbs) — sits below the article body. Three
   reusable post-card partials in a responsive grid. Brand-consistent:
   mint-tinted surface, marine accent on the heading rule. */
.related-posts {
  margin: 72px 0 0;
  padding: 56px 0 64px;
  background: var(--et-mint-50);
  border-top: 1px solid var(--et-mint-100);
}
/* Kill any default bottom margin on <main> / <article> on post pages so
   the related-posts mint band sits flush against the dark footer
   instead of leaving a sliver of body-bg "white" between them. */
.tet-main { margin-bottom: 0; padding-bottom: 0; }
.post-page { margin-bottom: 0; padding-bottom: 0; }
.related-posts + footer,
.related-posts ~ footer,
.related-posts { margin-bottom: 0; }
.related-posts__title {
  font-family: var(--font-serif-display);
  font-size: clamp(22px, 1.6vw + 14px, 30px);
  font-weight: 600;
  color: var(--et-marine);
  margin: 0 0 28px;
  letter-spacing: var(--tracking-snug);
}
.related-posts__empty {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--et-graphite);
  margin: 0;
  padding: 14px 0 0;
  grid-column: 1 / -1;
  text-align: center;
}
.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
}
/* Podcast feature images are 16:9 (YouTube thumbnail aspect). The
   default 4:3 post-card frame was cropping the sides. Match the source
   aspect so the full thumbnail is visible end-to-end. */
.related-posts__grid .post-card__media { aspect-ratio: 16/9; }
@media (max-width: 860px) {
  .related-posts { padding: 40px 0 48px; }
  .related-posts__grid { grid-template-columns: 1fr; gap: 20px; max-width: none; }
}


/* ─────────────────────────────────────────────────────────────────
   Tip of the Week — page-tips.hbs
   Featured tip on top, archive grid below, Insider lock states.
   ───────────────────────────────────────────────────────────────── */
.tips-page { padding-bottom: 64px; }

.tips-hero {
  padding: 80px 0 36px;
  text-align: center;
  background: linear-gradient(180deg, var(--et-mint-50) 0%, transparent 100%);
}
.tips-hero__kicker {
  display: inline-block;
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--et-marine);
  background: var(--et-mint-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.tips-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--et-marine);
  margin: 0 0 14px;
}
.tips-hero__deck {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--et-graphite);
  font-size: 17px;
  line-height: 1.6;
}

.tip-featured {
  padding: 30px 0 64px;
}
.tip-featured__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.tip-featured__media-link { display: block; border-radius: 14px; overflow: hidden; }
.tip-featured__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tip-featured__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 14px;
  color: var(--et-marine);
}
.tip-featured__placeholder i { width: 56px; height: 56px; opacity: 0.5; }

.tip-featured__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tip-featured__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--et-marine);
  color: #fff;
  font: 600 11px/1 ui-sans-serif, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.tip-featured__lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--et-cloud, #f3eee6);
  color: var(--et-marine);
  font: 600 11px/1 ui-sans-serif, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.tip-featured__date {
  color: var(--et-graphite);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.tip-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--et-marine);
  margin: 0 0 14px;
}
.tip-featured__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--et-mint), var(--et-mint));
  background-repeat: no-repeat;
  background-size: 0% 8px;
  background-position: 0 88%;
  transition: background-size 0.25s ease;
}
.tip-featured__title a:hover { background-size: 100% 8px; }
.tip-featured__excerpt {
  color: var(--et-graphite);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.tip-featured__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tip-featured__preview {
  color: var(--et-marine);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tips-archive { padding: 24px 0 56px; }
.tips-archive__head { text-align: center; margin-bottom: 36px; }
.tips-archive__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--et-marine);
  margin: 0 0 6px;
}
.tips-archive__sub {
  color: var(--et-graphite);
  font-size: 14px;
  margin: 0;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tip-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--et-cloud, #f3eee6);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(20, 40, 70, 0.18);
  border-color: var(--et-mint-100);
}
.tip-card--locked { background: var(--et-mint-50); }
.tip-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tip-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--et-mint-50);
}
.tip-card__media--placeholder { display: grid; place-items: center; color: var(--et-marine); }
.tip-card__media--placeholder i { width: 36px; height: 36px; opacity: 0.45; }
.tip-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tip-card__lock-pip {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(20, 40, 70, 0.85);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 2;
}
.tip-card__body { padding: 18px 18px 22px; }
.tip-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tip-card__date {
  color: var(--et-graphite);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tip-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--et-marine);
  color: #fff;
  font: 600 10px/1 ui-sans-serif, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.tip-card__title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--et-marine);
  margin: 0 0 8px;
}
.tip-card__excerpt {
  color: var(--et-graphite);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tips-empty {
  background: var(--et-mint-50);
  border: 1px solid var(--et-mint-100);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  color: var(--et-graphite);
}
.tips-empty p { margin: 0 0 14px; font-size: 15px; }

.tips-pitch {
  padding: 64px 0 32px;
  text-align: center;
}
.tips-pitch__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--et-marine);
  margin: 0 0 12px;
}
.tips-pitch__deck {
  max-width: 56ch;
  margin: 0 auto 22px;
  color: var(--et-graphite);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tip-featured { padding-bottom: 40px; }
  .tip-featured__grid { grid-template-columns: 1fr; gap: 24px; }
  .tip-featured__title { font-size: 26px; }
  .tips-grid { grid-template-columns: 1fr; gap: 18px; }
  .tips-hero { padding: 56px 0 24px; }
}