/* ==========================================================================
   Everglo site.css — Editorial Almanac
   Single stylesheet. All color tokens unchanged. Typography, rhythm, and
   components rebuilt around an editorial wellness-journal aesthetic. Legal
   pages remain compatible: external fonts are referenced with system
   fallbacks so a strict CSP can drop the @font requests without breakage.
   ========================================================================== */

:root {
  /* Surfaces — unchanged */
  --color-bg: #FAF7F2;
  --color-surface: #F5F2ED;
  --color-surface-raised: #FEFDF9;

  /* Text — unchanged */
  --color-fg: #3D3632;
  --color-fg-muted: #6B635D;

  /* Primary (coral) — unchanged */
  --color-primary: #E0785C;
  --color-primary-pressed: #B85840;
  --color-primary-ink: #9C4430;
  --color-primary-fg: #FAF7F2;

  /* Secondary (gold) — unchanged */
  --color-secondary: #C9A84C;
  --color-secondary-ink: #7A6520;
  --color-secondary-fg: #3D3632;

  /* Accent surfaces — unchanged */
  --color-accent-sand: #F5EFE0;
  --color-accent-stone: #F0EBE5;

  /* Borders — unchanged */
  --color-border: #E8E0D4;
  --color-border-soft: rgba(232, 224, 212, 0.5);

  /* Pillars — unchanged */
  --pillar-movement: #E0785C;
  --pillar-movement-tint: #F9E6E0;
  --pillar-mind: #9B8AA6;
  --pillar-mind-tint: #F0ECF3;
  --pillar-nutrition: #7BAE7F;
  --pillar-nutrition-tint: #E8F2E8;
  --pillar-sleep: #6B8CAE;
  --pillar-sleep-tint: #E8EEF4;
  --pillar-lifestyle: #C9A55C;
  --pillar-lifestyle-tint: #F5EFE0;

  /* Status — unchanged */
  --status-success: #7BAE7F;
  --status-warning: #D4A517;
  --status-error: #C75D5D;
  --status-info: #6B8CAE;

  /* Editorial tokens — new */
  --color-ink: #2C2820;
  --color-rule: rgba(60, 50, 42, 0.18);
  --color-rule-strong: rgba(60, 50, 42, 0.42);
  --color-rule-on-coral: rgba(250, 247, 242, 0.35);

  /* Surface-relative foregrounds — constant across modes so .section--ink and
     .section--coral text doesn't follow the dark-mode token inversion. */
  --color-on-ink: #F5F0EB;
  --color-on-coral: #FAF7F2;

  /* Section variant backgrounds — overridden in the dark-mode block below. */
  --section-stone-bg: #F0EBE5;
  --section-sand-bg: #F5EFE0;
  --section-nutrition-bg: #ECF2EC;
  --section-ink-bg: var(--color-ink);
  --section-coral-bg: var(--color-primary-ink);

  /* Shadows */
  --shadow-soft: 0 4px 20px -6px rgba(60, 50, 42, 0.10);
  --shadow-float: 0 12px 40px -16px rgba(60, 50, 42, 0.18);
  --shadow-lift: 0 24px 56px -20px rgba(156, 68, 48, 0.22);
  --shadow-glow: 0 0 40px -8px rgba(224, 120, 92, 0.30);

  /* Typography — editorial pairing */
  --font-display: 'Fraunces', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-system: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Variable font axes */
  --display-tight: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  --display-normal: 'opsz' 36, 'SOFT' 50, 'WONK' 0;
  --display-quirky: 'opsz' 144, 'SOFT' 100, 'WONK' 1;

  /* Type scale */
  --fs-xs: 0.75rem;     /* 12px — mono labels */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px — body */
  --fs-md: 1.25rem;     /* 20px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2rem;        /* 32px */
  --fs-2xl: 2.75rem;    /* 44px */
  --fs-3xl: 4rem;       /* 64px */
  --fs-4xl: 5.5rem;     /* 88px */
  --fs-5xl: 7.5rem;     /* 120px — editorial display */

  /* Radii — quieter and more architectural */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 9999px;

  /* Containers */
  --w-primary: 1240px;
  --w-focused: 980px;
  --w-intimate: 760px;
  --w-prose: 680px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-fast: 240ms;
  --dur-med: 480ms;
  --dur-slow: 800ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Light-only site. Tells the browser not to auto-style native form
     controls or scrollbars for dark OS preference. */
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* ==========================================================================
   Page texture: paper grain + faint horizon glow
   ========================================================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* z-index: 2 keeps the grain above content without claiming the top of the
     stacking context — leaves room for nav, modals, toasts above it. */
  z-index: 2;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.21 0 0 0 0 0.2 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 0.5em;
  font-variation-settings: var(--display-normal);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 7vw, var(--fs-3xl));
  letter-spacing: -0.035em;
  font-variation-settings: var(--display-tight);
}
h2 {
  font-size: clamp(2rem, 5vw, var(--fs-2xl));
  letter-spacing: -0.03em;
  font-variation-settings: var(--display-tight);
}
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-md); letter-spacing: -0.01em; }

em, .italic {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

p {
  margin: 0 0 1em;
  max-width: 64ch;
  hyphens: auto;
  hanging-punctuation: first last;
}

.prose { max-width: 58ch; }
.lede {
  font-size: clamp(1.125rem, 1.6vw, var(--fs-md));
  line-height: 1.55;
  color: var(--color-fg);
  max-width: 36ch;
  text-wrap: balance;
}

a {
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), background-size var(--dur-med) var(--ease);
}
a:hover {
  color: var(--color-primary-ink);
  background-size: 0% 1px;
}

small, .small { font-size: var(--fs-sm); }
strong { font-weight: 700; color: var(--color-ink); }

/* Drop cap for editorial column intros */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.5rem;
  line-height: 0.85;
  float: left;
  margin: 0.1em 0.18em 0 -0.05em;
  color: var(--color-primary-ink);
  font-variation-settings: var(--display-quirky);
}

/* Pull quote */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, var(--fs-xl));
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  max-width: 22ch;
  font-variation-settings: var(--display-quirky);
  text-wrap: balance;
  margin: 0;
}

/* Sub-eyebrow / kicker — mono editorial label */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-fg-muted);
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-rule-strong);
}
.kicker--center {
  margin-left: auto;
  margin-right: auto;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary-ink);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-size: clamp(2.75rem, 9vw, var(--fs-4xl));
  font-variation-settings: var(--display-tight);
  text-wrap: balance;
}

.display--xl {
  font-size: clamp(3.25rem, 12vw, var(--fs-5xl));
}

.subhead {
  font-size: clamp(1.0625rem, 1.4vw, var(--fs-md));
  color: var(--color-fg);
  max-width: 48ch;
  line-height: 1.5;
  text-wrap: balance;
}

/* ==========================================================================
   Focus states (coral halo)
   ========================================================================== */

/* Suppress the focus ring for mouse clicks but keep it for keyboard focus.
   Older WebKit without :focus-visible support keeps the default outline. */
:focus:not(:focus-visible) { outline: none; }

:focus-visible {
  outline: none;
  /* Outer ring uses --color-primary-ink (5.99:1) instead of --color-primary
     (2.80:1) so it meets WCAG 2.4.11 against the ivory page background. */
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-primary-ink);
  border-radius: var(--r-sm);
}
.section--ink :focus-visible,
.section--coral :focus-visible {
  box-shadow:
    0 0 0 2px var(--color-ink),
    0 0 0 4px #FAF7F2;
}

/* Pill-shaped legal/quick links — used in support page footer and 404 page. */
.legal-links {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--r-pill);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: all var(--dur-fast) var(--ease);
  background-image: none;
  padding-bottom: 0.5rem;
}
.legal-links a:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* Skip-to-content link, hidden until focused. WCAG 2.4.1 Bypass Blocks. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 16px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  background-image: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-bg);
  background: var(--color-ink);
}

/* Visually hidden, accessible to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Legal pages override font to system */
body.legal {
  font-family: var(--font-system);
}
body.legal h1,
body.legal h2,
body.legal h3,
body.legal h4 {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Mobile nav: links wrap into the header on every page so behaviour is
   consistent across marketing and legal pages (legal pages cannot ship the
   toggle JS under their strict CSP, so the toggle pattern is dropped sitewide).
   WCAG 2.5.5: the inline links get larger padding (44px target) on mobile. */
@media (max-width: 767px) {
  .site-nav { flex-wrap: wrap; align-items: flex-start; }
  .site-nav__links {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
  }
  .site-nav__links a {
    padding: 12px 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Buttons — minimal editorial pills with sliding fill
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 52px;
  padding: 0 1.875rem;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  background-image: none;
  padding-bottom: 0;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-ink);
  transform: translateY(101%);
  transition: transform var(--dur-med) var(--ease-spring);
  z-index: -1;
}
.btn:hover {
  color: var(--color-bg);
  border-color: var(--color-primary-ink);
  background-size: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after { transform: translateY(0); }
}
.btn:active { transform: scale(0.98); }

.btn--lg { height: 60px; padding: 0 2.25rem; font-size: var(--fs-base); }
.btn--sm { height: 40px; padding: 0 1.25rem; font-size: var(--fs-xs); }

.btn--primary {
  background: var(--color-primary-ink);
  border-color: var(--color-primary-ink);
}
.btn--primary::after { background: var(--color-ink); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
}
.btn--outline::after { background: var(--color-ink); }
.btn--outline:hover { color: var(--color-bg); border-color: var(--color-ink); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
}
.btn--ghost::after { background: rgba(60, 50, 42, 0.06); }
.btn--ghost:hover { color: var(--color-ink); }

.btn--on-ink {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-bg);
}
.btn--on-ink::after { background: var(--color-primary); }
.btn--on-ink:hover { color: var(--color-ink); border-color: var(--color-primary); }

.btn .arrow {
  display: inline-block;
  width: 18px;
  height: 8px;
  position: relative;
  transition: width var(--dur-fast) var(--ease);
}
.btn .arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow { width: 24px; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:hover { background: var(--color-primary-ink); border-color: var(--color-primary-ink); color: var(--color-bg); }
}

/* ==========================================================================
   Cards — editorial frame with hairline rules
   ========================================================================== */

.card {
  position: relative;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 2rem;
  box-shadow: 0 1px 0 rgba(60, 50, 42, 0.04);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

@media (min-width: 768px) {
  .card { padding: 2.5rem; }
}

.card--hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
  border-color: var(--color-rule-strong);
}

@media (prefers-reduced-motion: reduce) {
  .card--hoverable:hover { transform: none; }
}

/* Editorial framed image */
.image-frame {
  display: block;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: 0;
  box-shadow: var(--shadow-float);
  transform: none;
  position: relative;
}
.image-frame::before,
.image-frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-ink);
}
.image-frame::before { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.image-frame::after { bottom: -6px; right: -6px; border-left: none; border-top: none; }
.image-frame > * { display: block; max-width: 100%; }

/* ==========================================================================
   Inputs
   ========================================================================== */

.input,
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  width: 100%;
  height: 52px;
  padding: 0 1.25rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

textarea {
  height: auto;
  min-height: 140px;
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  resize: vertical;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(224, 120, 92, 0.18);
}

::placeholder {
  color: var(--color-fg-muted);
  opacity: 0.7;
}

/* ==========================================================================
   Navigation — editorial inline header (replaces sticky pill)
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  max-width: none;
  padding: 18px max(clamp(20px, 4vw, 48px), calc((100% - var(--w-primary)) / 2));
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: none;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .site-nav { padding: 22px max(clamp(24px, 5vw, 64px), calc((100% - var(--w-primary)) / 2)); }
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.025em;
  background: none;
  padding: 0;
  font-variation-settings: var(--display-tight);
}
.site-nav__brand:hover {
  color: var(--color-primary-ink);
  background-size: 0;
}

.site-nav__logo {
  height: 36px;
  width: auto;
  max-width: none;
  display: block;
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) { .site-nav__links { display: flex; } }

.site-nav__links a {
  color: var(--color-fg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 0;
  background: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-med) var(--ease);
}
.site-nav__links a:hover { color: var(--color-primary-ink); }
.site-nav__links a:hover::after { transform: scaleX(1); }
.site-nav__links a[aria-current="page"] { color: var(--color-primary-ink); }
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }


/* ==========================================================================
   Footer — deep loam, editorial
   ========================================================================== */

.site-footer {
  margin-top: 0;
  background: var(--color-ink);
  color: #F5F0EB;
  padding: 5rem 1.5rem 2rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 30%, var(--color-secondary) 70%, transparent);
  opacity: 0.45;
}
.site-footer a {
  color: rgba(245, 240, 235, 0.85);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), background-size var(--dur-med) var(--ease);
}
.site-footer a:hover { color: var(--color-primary); background-size: 100% 1px; }

.site-footer__inner {
  max-width: var(--w-primary);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2.5rem;
  }
}

.site-footer__brand {
  grid-column: 1 / -1;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(245, 240, 235, 0.12);
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__brand {
    grid-template-columns: minmax(auto, 22ch) minmax(auto, 60ch);
    gap: 4rem;
    align-items: start;
  }
}
.site-footer__brand strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  color: #F5F0EB;
  display: block;
  font-variation-settings: var(--display-tight);
}
.site-footer__brand p {
  margin: 0;
  color: rgba(245, 240, 235, 0.7);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.site-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(245, 240, 235, 0.55);
  margin: 0 0 1.25rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li {
  margin: 0 0 0.75rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(245, 240, 235, 0.85);
}
.site-footer li:last-child { margin-bottom: 0; }
.site-footer li small {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.5);
}

.site-footer__bottom {
  max-width: var(--w-primary);
  margin: 3.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 240, 235, 0.12);
  color: rgba(245, 240, 235, 0.55);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

/* Simplified section heading (replaces editorial section-mark) */
.section-heading {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 2.5rem;
  max-width: none;
  text-wrap: pretty;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  position: relative;
  padding: 96px clamp(20px, 4vw, 48px);
  overflow: hidden;
}
@media (min-width: 768px) {
  .section { padding: 144px clamp(24px, 5vw, 64px); }
}

.section--compact {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (min-width: 768px) {
  .section--compact { padding-top: 88px; padding-bottom: 88px; }
}

.section__inner {
  max-width: var(--w-primary);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.section__inner--focused { max-width: var(--w-focused); }
.section__inner--intimate { max-width: var(--w-intimate); }
.section__inner--prose { max-width: var(--w-prose); }

/* Section variants reference tokens so dark mode can override the bg in one place. */
.section--stone { background: var(--section-stone-bg); }
.section--sand { background: var(--section-sand-bg); }
.section--nutrition-tint { background: var(--section-nutrition-bg); }

.section--coral {
  background: var(--section-coral-bg);
  /* --color-on-coral is constant across modes so text doesn't follow
     the dark-mode token inversion that lightens --color-primary-ink. */
  color: var(--color-on-coral);
  --color-primary-fg: var(--color-on-coral);
}
.section--coral h1,
.section--coral h2,
.section--coral h3 { color: var(--color-on-coral); }
.section--coral .eyebrow,
.section--coral .kicker { color: rgba(250, 247, 242, 0.75); }
.section--coral .kicker::before { background: rgba(250, 247, 242, 0.45); }
.section--coral .lede { color: rgba(250, 247, 242, 0.86); }
/* Outline buttons on coral need ivory text + ivory border so they read as
   "secondary on dark" rather than the default "ink-on-light" register. */
.section--coral .btn--outline {
  color: var(--color-on-coral);
  border-color: rgba(250, 247, 242, 0.55);
}
.section--coral .btn--outline:hover {
  color: var(--color-on-coral);
  border-color: var(--color-on-coral);
}

.section--ink {
  background: var(--section-ink-bg);
  /* --color-on-ink is constant across modes for the same reason as above. */
  color: var(--color-on-ink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--color-on-ink); }
.section--ink .kicker { color: rgba(245, 240, 235, 0.55); }
.section--ink .kicker::before { background: rgba(245, 240, 235, 0.35); }


/* Ornamental rule — sun-mark divider */
.rule {
  position: relative;
  height: 1px;
  background: var(--color-rule);
  margin: 4rem 0;
  border: 0;
}
.rule--ornament::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 1rem;
  color: var(--color-secondary);
  font-size: 1rem;
  letter-spacing: 0;
}
.section--coral .rule { background: var(--color-rule-on-coral); }
.section--coral .rule--ornament::before { background: var(--color-primary-ink); color: rgba(250, 247, 242, 0.7); }

/* ==========================================================================
   Atmospheric blobs (kept, but quieter)
   ========================================================================== */

.blob {
  position: absolute;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.32;
  z-index: 0;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.blob--alt { border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; }
.blob--alt2 { border-radius: 40% 60% 65% 35% / 55% 45% 55% 45%; }

.blob--coral { background: var(--color-primary); }
.blob--gold { background: var(--color-secondary); }
.blob--nutrition { background: var(--pillar-nutrition); }
.blob--sleep { background: var(--pillar-sleep); }
.blob--mind { background: var(--pillar-mind); }
.blob--lifestyle { background: var(--pillar-lifestyle); }

.blob--s { width: 380px; height: 380px; }
.blob--m { width: 540px; height: 540px; }
.blob--l { width: 720px; height: 720px; }

.blob--top-left     { top: -240px; left: -240px; }
.blob--top-right    { top: -240px; right: -240px; }
.blob--bottom-left  { bottom: -240px; left: -240px; }
.blob--bottom-right { bottom: -240px; right: -240px; }
.blob--center-left  { top: 30%; left: -260px; }
.blob--center-right { top: 30%; right: -260px; }

/* ==========================================================================
   Layout utilities
   ========================================================================== */

.grid { display: grid; gap: 2rem; }
@media (min-width: 768px) {
  .grid { gap: 2.5rem; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.stack-xl > * + * { margin-top: 3rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

.text-center { text-align: center; }
.text-muted { color: var(--color-fg-muted); }
.text-balance { text-wrap: balance; }

/* Icon container */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-ink);
  border: 1px solid var(--color-rule-strong);
  transition: all var(--dur-fast) var(--ease);
}
.icon-box svg { width: 22px; height: 22px; }
.card--hoverable:hover .icon-box {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

/* ==========================================================================
   Editorial components — new
   ========================================================================== */

/* Marquee — running word strip */
.marquee {
  position: relative;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  overflow: hidden;
  padding: 1.25rem 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
@media (prefers-reduced-motion: no-preference) {
  /* Promote to its own compositing layer only when the animation runs. */
  .marquee__track { will-change: transform; }
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 0;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: var(--display-quirky);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  padding: 0 2rem;
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
}
.marquee__item::after {
  content: "✦";
  display: inline-block;
  color: var(--color-secondary);
  font-style: normal;
  font-size: 1rem;
  font-family: var(--font-body);
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pillar editorial cards */
.pillar-card {
  position: relative;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  overflow: hidden;
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--pillar-color, var(--color-primary));
  transform-origin: left center;
  transform: scaleX(0.18);
  transition: transform var(--dur-med) var(--ease);
}
.pillar-card:hover {
  box-shadow: var(--shadow-float);
  border-color: var(--color-rule-strong);
}
.pillar-card:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  /* Lift transform only when motion is permitted. */
  .pillar-card:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-card::before { transform: scaleX(1); }
}
.pillar-card__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 4rem;
  line-height: 1;
  color: var(--pillar-color, var(--color-primary));
  letter-spacing: -0.02em;
  font-variation-settings: var(--display-quirky);
  margin: 0.25rem 0 0.5rem;
}
.pillar-card h3 {
  font-size: var(--fs-md);
  margin: 0;
  color: var(--color-ink);
}
.pillar-card p {
  margin: 0;
  color: var(--color-fg);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: none;
}
.pillar-card__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}

/* Pillars grid — asymmetric editorial layout */
.pillars-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}
.pillars-grid > .pillar-card {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 700px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  /* 3 columns at mid-viewport so 5 cards stack 3+2 instead of an awkward
     2+2+1 with an orphan stretched card. */
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .pillars-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Editorial chapter list (numbered) */
.chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: chapter;
}
.chapter-list > li {
  counter-increment: chapter;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-rule);
  align-items: baseline;
}
.chapter-list > li::before {
  content: counter(chapter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-fg-muted);
}
.chapter-list h3 {
  font-size: var(--fs-md);
  margin: 0 0 0.375em;
}
.chapter-list p { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }

/* FAQ accordion */
.faq {
  border: none;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.faq + .faq { margin-top: 0; }
.faq summary {
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { display: none; }
.faq summary .chev {
  flex-shrink: 0;
  color: var(--color-primary-ink);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .faq summary .chev { transition: transform var(--dur-med) var(--ease); }
  .faq[open] summary .chev { transform: rotate(180deg); }
}
.faq__body {
  padding: 0 0 1.75rem;
  color: var(--color-fg-muted);
  max-width: 64ch;
}
.faq__body p:last-child { margin-bottom: 0; }

/* On-this-page table of contents for long legal pages. Collapsible via
   native <details>. Accessible without JavaScript. */
.legal-toc {
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.legal-toc > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-fg-muted);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary::marker { display: none; }
.legal-toc > summary::after {
  content: "▾";
  font-family: inherit;
  color: var(--color-fg-muted);
  transition: transform var(--dur-fast) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .legal-toc > summary::after { transition: none; }
}
.legal-toc[open] > summary::after { transform: rotate(180deg); }
.legal-toc ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem 1.5rem;
  counter-reset: toc-item;
}
@media (min-width: 700px) {
  /* Two columns on tablet+. The privacy policy has 17 sections; this keeps
     the TOC from dominating the viewport. */
  .legal-toc ol { grid-template-columns: 1fr 1fr; }
}
.legal-toc li {
  counter-increment: toc-item;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.legal-toc li::before {
  content: counter(toc-item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-fg-muted);
}
.legal-toc a {
  color: var(--color-ink);
  background-image: none;
  padding-bottom: 2px;
  font-size: var(--fs-sm);
}
.legal-toc a:hover {
  color: var(--color-primary-ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

/* Summary box for prose pages — uses the same sand token as .section--sand
   so the prose callout and the section variant track each other. */
.summary-box {
  background: var(--section-sand-bg);
  border: 1px solid var(--color-rule);
  border-radius: 0;
  padding: 2rem;
  margin: 0 0 3rem;
  position: relative;
}
.summary-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}
.summary-box h2 { margin-top: 0; }
.summary-box ul { padding-left: 1.25rem; }

/* ==========================================================================
   Reveal utility — gentle once-on-load fade-in for above-the-fold elements.
   Below-the-fold content stays visible by default so it's always present
   for crawlers, screenshots, and no-JS users. JS scopes the fade-in to the
   initial viewport via the .js-reveals-init class on <html>.
   ========================================================================== */

.js-reveals-init .reveal[data-in-view="1"] {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-in 800ms var(--ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
@keyframes reveal-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveals-init .reveal[data-in-view="1"] { opacity: 1; transform: none; animation: none; }
}

/* Dark mode intentionally not implemented. The editorial almanac aesthetic is
   light-only; declare `color-scheme: light` on `html` (see Reset block above)
   so the browser does not auto-restyle native form controls in dark OS mode. */