/* ============================================================
   WeWontRegain — Brand Design System
   Editorial, dark mode, restrained. No softness.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* === Colors === */
  --c-obsidian: #0E0B0F;          /* base background */
  --c-burgundy-smoke: #1A1518;    /* elevated surface */
  --c-bone: #F3ECE2;              /* primary text */
  --c-garnet: #B8333A;            /* signature accent */
  --c-garnet-hover: #9d2a30;
  --c-bruised-plum: #7B5C8C;      /* secondary accent */
  --c-smoke-ash: #8A8278;         /* meta text */
  --c-forest-moss: #4D7A5C;       /* success state */
  --c-error: #B8333A;             /* same as garnet — errors as serious */
  --c-divider: rgba(243, 236, 226, 0.08);
  --c-divider-strong: rgba(243, 236, 226, 0.16);

  /* === Typography === */
  --font-serif: 'Fraunces', 'Newsreader', 'Times New Roman', serif;
  --font-serif-reading: 'Newsreader', 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === Type scale === */
  --fs-eyebrow: 0.75rem;     /* 12px */
  --fs-body-sm: 0.875rem;    /* 14px */
  --fs-body: 1rem;           /* 16px */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fs-lead: 1.375rem;       /* 22px */
  --fs-h4: 1.5rem;           /* 24px */
  --fs-h3: 2rem;             /* 32px */
  --fs-h2: 2.75rem;          /* 44px */
  --fs-h1: 4rem;             /* 64px */
  --fs-display: 5.5rem;      /* 88px */

  /* === Spacing === */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* === Layout === */
  --container-narrow: 720px;
  --container: 1120px;
  --container-wide: 1320px;

  /* === Easing === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   Reset & Base
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--c-obsidian);
  color: var(--c-bone);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Subtle grain texture across whole site */
  background-image:
    radial-gradient(at 0% 0%, rgba(123, 92, 140, 0.04) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(184, 51, 58, 0.03) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Film grain overlay — subtle, organic, kills the "flat digital" feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  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='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

main, footer, header, section {
  position: relative;
  z-index: 2;
}

::selection {
  background-color: var(--c-garnet);
  color: var(--c-bone);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

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

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-garnet);
  margin-bottom: var(--s-5);
  display: inline-block;
}

.eyebrow--ash {
  color: var(--c-smoke-ash);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, var(--fs-h1));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-bone);
  font-variation-settings: 'opsz' 144;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, var(--fs-h2));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-bone);
  font-variation-settings: 'opsz' 96;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, var(--fs-h3));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-bone);
  font-variation-settings: 'opsz' 48;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-bone);
}

.display {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, var(--fs-display));
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-bone);
  font-weight: 400;
}

p {
  margin-bottom: var(--s-5);
}

p:last-child {
  margin-bottom: 0;
}

.text-ash {
  color: var(--c-smoke-ash);
}

.text-garnet {
  color: var(--c-garnet);
}

.text-bone {
  color: var(--c-bone);
}

.serif {
  font-family: var(--font-serif);
}

.reading {
  font-family: var(--font-serif-reading);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--c-bone);
}

.reading p {
  margin-bottom: var(--s-6);
}

.reading h2,
.reading h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}

.reading h2:first-child,
.reading h3:first-child {
  margin-top: 0;
}

.pullquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-garnet);
  border-left: 2px solid var(--c-garnet);
  padding-left: var(--s-6);
  margin: var(--s-8) 0;
  font-style: italic;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

section {
  padding-block: var(--s-10);
}

@media (max-width: 768px) {
  section {
    padding-block: var(--s-8);
  }
}

.section--surface {
  background-color: var(--c-burgundy-smoke);
}

.section--bordered {
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
}

.grid {
  display: grid;
  gap: var(--s-6);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--s-5);
}

.stack--lg > * + * {
  margin-top: var(--s-7);
}

/* ============================================================
   Buttons & CTAs
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 250ms var(--ease-out);
  text-align: center;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--c-garnet);
  color: var(--c-bone);
}

.btn--primary:hover {
  background-color: var(--c-garnet-hover);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background-color: transparent;
  color: var(--c-bone);
  border-color: var(--c-divider-strong);
}

.btn--secondary:hover {
  border-color: var(--c-bone);
  background-color: rgba(243, 236, 226, 0.04);
}

.btn--lg {
  padding: var(--s-5) var(--s-7);
  font-size: var(--fs-body-lg);
}

.btn[disabled],
.btn--loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 768px) {
  .btn {
    white-space: normal;
    max-width: 100%;
  }

  .btn--lg {
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-body);
  }
}

.link-arrow {
  color: var(--c-smoke-ash);
  font-size: var(--fs-body-sm);
  text-decoration: underline;
  text-decoration-color: var(--c-divider-strong);
  text-underline-offset: 4px;
  transition: color 200ms var(--ease-out);
}

.link-arrow:hover {
  color: var(--c-bone);
  text-decoration-color: var(--c-bone);
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background-color: var(--c-burgundy-smoke);
  border: 1px solid var(--c-divider);
  padding: var(--s-7);
  border-radius: 2px;
  transition: border-color 250ms var(--ease-out);
}

.card:hover {
  border-color: var(--c-divider-strong);
}

/* Edge-to-edge header image for cards.
   Negative margins pull the image flush with the card's outer border,
   overriding the card's own padding on top + sides only. A 1px divider
   beneath separates the image from the card's text content. */
.card__image {
  display: block;
  width: calc(100% + 2 * var(--s-7));
  margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-7)) var(--s-6);
  aspect-ratio: 3 / 2;
  background-color: var(--c-obsidian);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--c-divider);
}

.card__phase {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-garnet);
  margin-bottom: var(--s-3);
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  margin-bottom: var(--s-2);
  color: var(--c-bone);
}

.card__meta {
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
  margin-bottom: var(--s-5);
}

.card__body {
  color: var(--c-bone);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ============================================================
   Stats
   ============================================================ */

/* Two-column layout for the "Numbers" section: heading + stacked
   stat blocks on the left, portrait still-life image on the right.
   Mirrors the standard-of-care section's 1.15fr / 1fr split so the
   two "institutional voice" sections of the landing page share a
   visual rhythm. */
.stats__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.stats__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.stats__image {
  aspect-ratio: 4 / 5;
  background-color: var(--c-burgundy-smoke);
  background-image: url('/assets/img/stats.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-divider);
  width: 100%;
}

@media (max-width: 880px) {
  .stats__grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .stats__image {
    max-width: 420px;
    margin-inline: auto;
  }
}

.stat {
  text-align: left;
}

.stat__number {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-garnet);
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144;
  margin-bottom: var(--s-4);
  display: block;
}

.stat__body {
  font-size: var(--fs-body);
  color: var(--c-bone);
  line-height: 1.5;
  margin-bottom: var(--s-3);
}

.stat__source {
  font-size: var(--fs-eyebrow);
  color: var(--c-smoke-ash);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   FAQ Accordion
   ============================================================ */

.faq__item {
  border-bottom: 1px solid var(--c-divider);
}

.faq__item:first-child {
  border-top: 1px solid var(--c-divider);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--c-bone);
  transition: color 200ms var(--ease-out);
}

.faq__question:hover {
  color: var(--c-garnet);
}

.faq__toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-top: 8px;
  transition: transform 300ms var(--ease-out);
}

.faq__toggle::before,
.faq__toggle::after {
  content: '';
  position: absolute;
  background-color: var(--c-garnet);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 300ms var(--ease-out);
}

.faq__toggle::before {
  width: 16px;
  height: 1px;
}

.faq__toggle::after {
  width: 1px;
  height: 16px;
}

.faq__item[open] .faq__toggle::after {
  opacity: 0;
}

.faq__answer {
  padding-bottom: var(--s-6);
  color: var(--c-bone);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  max-width: 60ch;
}

details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   Form
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
}

.form__input,
.form__textarea,
.form__select {
  background-color: rgba(243, 236, 226, 0.03);
  border: 1px solid var(--c-divider-strong);
  border-radius: 2px;
  padding: var(--s-4) var(--s-5);
  color: var(--c-bone);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
  width: 100%;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--c-garnet);
  background-color: rgba(243, 236, 226, 0.05);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--c-smoke-ash);
  opacity: 0.6;
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-sans);
}

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%23B8333A' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-5) center;
  padding-right: var(--s-8);
}

.form__error {
  color: var(--c-garnet);
  font-size: var(--fs-body-sm);
}

.form__success {
  color: var(--c-forest-moss);
  font-size: var(--fs-body-sm);
}

.form__note {
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
  line-height: 1.5;
}

/* ============================================================
   Header / Nav
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(14, 11, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-divider);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
}

/*
  Wordmark = the brand identifier you see in headers, footers, emails.
  Composition: graphic mark (circle outline + red dot) on the LEFT,
  wordmark text on the right, horizontally aligned, baseline-centered.

  Sizing strategy:
  - The mark is 1.0em — it should read as an icon, not a competing logo.
    At the default wordmark font-size (1.125rem = 18px), the mark renders
    at 18px tall. In larger footer contexts (1.5rem = 24px), it scales
    to 24px automatically.
  - The mark's outer circle uses `currentColor` so it inherits the
    wordmark's text color — keeps it consistent if context changes.
  - `display: inline-flex !important` defends against any inline
    `style="display: block"` from older HTML that we couldn't migrate.
*/
.wordmark {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--c-bone);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 48;
  text-decoration: none;
  line-height: 1;
}

.wordmark__mark {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  display: block;
}

.wordmark__text {
  color: var(--c-garnet);
  white-space: nowrap;
  line-height: 1;
  /* Optical alignment: serif descenders sit slightly low relative to
     the geometric center of the circle mark. Nudging the text up by
     a hairline produces visually-centered alignment. */
  transform: translateY(-0.02em);
}

.wordmark .dot {
  color: var(--c-garnet);
}

/*
  Dot grid in the side margins — Cloudflare-style "infrastructure" texture.
  We use a radial-gradient repeated across the whole viewport, then use a
  CSS mask to clip it to ONLY the area outside the content container.
  Math: container is 1120px max. (50% - 560px) gives the left edge,
  (50% + 560px) gives the right edge. Anything between is masked out.
  Below 1120px viewport, the calc values invert and the mask hides the
  entire grid — so mobile/tablet stays clean automatically.
*/
.dot-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(184, 51, 58, 0.22) 1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: linear-gradient(
    to right,
    black 0,
    black calc(50% - 580px),
    transparent calc(50% - 560px),
    transparent calc(50% + 560px),
    black calc(50% + 580px),
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black 0,
    black calc(50% - 580px),
    transparent calc(50% - 560px),
    transparent calc(50% + 560px),
    black calc(50% + 580px),
    black 100%
  );
}

/* Hide the dot grid entirely below ~1180px — no margins to put it in. */
@media (max-width: 1180px) {
  .dot-grid-bg {
    display: none;
  }
}

/*
  Vertical rules marking the content container's edges.
  Two thin lines, faded at top and bottom so they read as deliberate
  design language rather than jail bars. Like the dot grid, they only
  exist where the content has room to breathe — hidden below 1180px.
*/
.margin-rules {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.margin-rules::before,
.margin-rules::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    rgba(243, 236, 226, 0.08) 8%,
    rgba(243, 236, 226, 0.08) 92%,
    transparent 100%
  );
}

.margin-rules::before {
  left: calc(50% - 560px);
}

.margin-rules::after {
  right: calc(50% - 560px);
}

@media (max-width: 1180px) {
  .margin-rules {
    display: none;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-7);
}

.site-nav__link {
  font-size: var(--fs-body-sm);
  color: var(--c-bone);
  font-weight: 400;
  transition: color 200ms var(--ease-out);
}

.site-nav__link:hover {
  color: var(--c-garnet);
}

@media (max-width: 720px) {
  .site-nav {
    gap: var(--s-5);
  }
  .site-nav__link:not(.site-nav__link--cta) {
    display: none;
  }
}

.site-nav__link--cta {
  background-color: var(--c-garnet);
  color: var(--c-bone);
  padding: var(--s-3) var(--s-5);
  border-radius: 2px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

.site-nav__link--cta:hover {
  color: var(--c-bone);
  background-color: var(--c-garnet-hover);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--c-divider);
  padding-block: var(--s-9) var(--s-6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-9);
}

@media (max-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.site-footer__col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
  margin-bottom: var(--s-5);
  font-weight: 500;
}

.site-footer__col a {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--c-bone);
  margin-bottom: var(--s-3);
}

.site-footer__col a:hover {
  color: var(--c-garnet);
}

.site-footer__disclaimer {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-smoke-ash);
  max-width: 90ch;
  border-top: 1px solid var(--c-divider);
  padding-top: var(--s-6);
}

.site-footer__copy {
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
  margin-top: var(--s-5);
}

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

/*
  Hero sizing strategy:
  - min-height: 100svh - header  → fills exactly the visible viewport
    (svh = "small viewport height", the modern unit that handles
    mobile browser chrome correctly; falls back to vh on older browsers).
  - The sticky header is ~64px tall (--s-4 padding-block + content),
    so we subtract var(--s-9) (96px) which gives a small extra cushion.
  - Flexbox centers content vertically. On tall screens it sits in
    the middle; on shorter screens it floats just below the header.
  - padding-block provides the minimum breathing room when the
    content is shorter than the viewport.
*/
.hero {
  min-height: calc(100svh - var(--s-9));
  padding-block: var(--s-7) var(--s-8);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fallback for browsers that don't support svh (Safari < 15.4) */
@supports not (height: 100svh) {
  .hero {
    min-height: calc(100vh - var(--s-9));
  }
}

@media (max-width: 768px) {
  .hero {
    /* On mobile, allow the hero to be naturally tall but cap it
       so the protocol-section preview peeks through and invites scroll. */
    min-height: calc(100svh - var(--s-8));
    padding-block: var(--s-6) var(--s-7);
  }
}

/* Two-column hero: editorial copy on the left, portrait image on the right.
   The copy column is slightly wider (1.15fr) so the headline breathes; the
   image holds a 4:5 portrait aspect to echo the standard-of-care pattern. */
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.hero__content {
  max-width: 60ch;
}

.hero h1 {
  margin-bottom: var(--s-6);
}

.hero__sub {
  margin-bottom: var(--s-7);
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* Right column wrapper: tagline stacked above the companion image.
   The tagline's own margin-bottom provides the gap, so no extra
   spacing rule is needed here. */
.hero__media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Cascading three-line tagline that sits where the eyebrow used to.
   Serif italic at a near-body size reads as an opening verse rather
   than a category label; progressive padding-inline-start on lines
   2 and 3 produces a wedge that descends with the shrinking copy. */
.hero__tagline {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-garnet);
}

.hero__tagline-line:nth-child(2) { padding-inline-start: var(--s-4); }
.hero__tagline-line:nth-child(3) { padding-inline-start: var(--s-6); }

/* Hero companion image — the standing mirror + lotus still life.
   Uses background-image so the burgundy-smoke fallback color still
   reads as part of the composition if the JPG hasn't been generated
   yet. 1px divider keeps it consistent with the standard-of-care
   image cell. */
.hero__image {
  aspect-ratio: 4 / 5;
  background-color: var(--c-burgundy-smoke);
  background-image: url('/assets/img/hero.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-divider);
  width: 100%;
}

@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .hero__media {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
}

/* ============================================================
   Hero carousel — continuous auto-pan, looped via doubled track
   ============================================================
   The track contains 16 tiles total (the same 8 images, rendered twice
   in sequence). A linear translateX(0 → -50%) animation moves the track
   leftward by exactly half its width, which lines up the second half
   visually identically with the first half — the loop is invisible.
   The carousel sits on a shared obsidian background so each tile reads
   as part of a single continuous frieze.
*/
.hero-carousel {
  position: relative;
  overflow: hidden;
  background-color: var(--c-obsidian);
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
  padding-block: var(--s-7);
}

/* Gradient fade on left + right edges so tiles dissolve into the dark
   rather than getting hard-cropped at the viewport edges. */
.hero-carousel::before,
.hero-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.hero-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--c-obsidian) 0%, transparent 100%);
}
.hero-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--c-obsidian) 0%, transparent 100%);
}

.hero-carousel__track {
  display: flex;
  gap: var(--s-5);
  width: max-content;
  animation: carousel-pan 146s linear infinite;
}

/*
  Note: deliberately no pause-on-hover rule.
  The carousel is ambient decorative texture, not interactive content.
  Pausing it on hover would create a "did I break it?" beat for any
  user who happens to hover without intending to. Continuous calm
  motion is the design intent.
*/

.hero-carousel__tile {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 2px;
  background-color: var(--c-burgundy-smoke);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-divider);
  position: relative;
}

/* Subtle vignette inside each tile to integrate them with the obsidian backdrop */
.hero-carousel__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 50%, rgba(14, 11, 15, 0.4) 100%);
  pointer-events: none;
}

@keyframes carousel-pan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect users who've requested reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__track {
    animation: none;
  }
}

@media (max-width: 720px) {
  .hero-carousel__tile {
    width: 140px;
    height: 140px;
  }
  .hero-carousel::before,
  .hero-carousel::after {
    width: 60px;
  }
}

/* ============================================================
   Bullets / Checkmarks
   ============================================================ */

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  font-size: var(--fs-body);
  color: var(--c-bone);
  line-height: 1.5;
}

.check-list li::before {
  content: '✦';
  color: var(--c-garnet);
  font-size: 1.1em;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ============================================================
   Journal (Blog)
   ============================================================ */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-7);
}

.journal-card {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: 1px solid var(--c-divider);
  text-decoration: none;
  transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out);
  overflow: hidden;
}

.journal-card:hover {
  border-color: var(--c-divider-strong);
  transform: translateY(-2px);
}

.journal-card__img {
  aspect-ratio: 16 / 10;
  background-color: var(--c-burgundy-smoke);
  background-size: cover;
  background-position: center;
  position: relative;
}

.journal-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(14, 11, 15, 0.6) 100%);
}

.journal-card__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex-grow: 1;
}

.journal-card__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
}

.journal-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-bone);
  margin-bottom: var(--s-3);
}

.journal-card__excerpt {
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
  line-height: 1.5;
  margin-top: auto;
}

/* === Post template === */

.post-hero {
  padding-block: var(--s-9) var(--s-7);
  border-bottom: 1px solid var(--c-divider);
}

.post-hero__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--c-burgundy-smoke);
  background-size: cover;
  background-position: center;
  margin-bottom: var(--s-8);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
  margin-bottom: var(--s-5);
}

.post-meta__dot {
  width: 4px;
  height: 4px;
  background-color: var(--c-garnet);
  border-radius: 50%;
}

.post-body {
  padding-block: var(--s-8);
}

.post-cta-inline {
  background-color: var(--c-burgundy-smoke);
  border-left: 2px solid var(--c-garnet);
  padding: var(--s-6) var(--s-7);
  margin: var(--s-8) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.post-cta-inline a {
  color: var(--c-garnet);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-garnet);
}

.related-posts {
  border-top: 1px solid var(--c-divider);
  padding-block: var(--s-9);
}

/* ============================================================
   Admin Dashboard
   ============================================================ */

.admin {
  min-height: 100vh;
  padding-block: var(--s-7);
}

.admin__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-divider);
}

.admin__user {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
}

.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.admin__stat {
  background-color: var(--c-burgundy-smoke);
  padding: var(--s-5);
  border: 1px solid var(--c-divider);
}

.admin__stat-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
  margin-bottom: var(--s-3);
}

.admin__stat-value {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--c-garnet);
  line-height: 1;
}

.admin__tabs {
  display: flex;
  gap: var(--s-6);
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: var(--s-6);
}

.admin__tab {
  padding: var(--s-4) 0;
  font-size: var(--fs-body-sm);
  color: var(--c-smoke-ash);
  border-bottom: 2px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  letter-spacing: 0.05em;
}

.admin__tab--active {
  color: var(--c-bone);
  border-bottom-color: var(--c-garnet);
}

.admin__table {
  width: 100%;
  border-collapse: collapse;
}

.admin__table th {
  text-align: left;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-smoke-ash);
  font-weight: 500;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-divider);
}

.admin__table td {
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--c-divider);
  color: var(--c-bone);
  font-size: var(--fs-body-sm);
  vertical-align: top;
}

.admin__table tr:hover td {
  background-color: rgba(243, 236, 226, 0.02);
}

.admin__login {
  max-width: 420px;
  margin: var(--s-11) auto;
  text-align: center;
  padding-inline: var(--s-5);
}

.admin__login h1 {
  margin-bottom: var(--s-4);
}

.admin__login p {
  color: var(--c-smoke-ash);
  margin-bottom: var(--s-7);
}

.admin__error {
  background-color: rgba(184, 51, 58, 0.08);
  border: 1px solid var(--c-garnet);
  color: var(--c-garnet);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--s-5);
  border-radius: 2px;
}

.admin__detail {
  background-color: var(--c-burgundy-smoke);
  border-left: 2px solid var(--c-garnet);
  padding: var(--s-6);
  margin-top: var(--s-4);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--c-bone);
  white-space: pre-wrap;
}

.tag {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--c-divider-strong);
  color: var(--c-smoke-ash);
  border-radius: 2px;
}

.tag--garnet {
  border-color: var(--c-garnet);
  color: var(--c-garnet);
}

/* ============================================================
   Utility
   ============================================================ */

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

.hidden { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0 !important; }
.text-center { text-align: center; }
.no-wrap { white-space: nowrap; }

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeIn 800ms var(--ease-out) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   BLUR-FADE-IN — page entrance + scroll reveal
   ------------------------------------------------------------
   Activated by /assets/js/blur-fade.js, which adds .bf-active
   to <html> synchronously (before first paint) and tags
   structural elements (.site-header, main sections, .site-footer)
   with .bf-target. Above-the-fold targets reveal on load with
   staggered delays; below-the-fold reveal via IntersectionObserver
   as the user scrolls. Runs on every refresh — no session gating.
   ============================================================ */
.bf-active .bf-target {
  opacity: 0;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  transform: translateY(10px) scale(1.015);
  will-change: filter, opacity, transform;
  transition:
    opacity 900ms cubic-bezier(0, 0.47, 0.5, 1) var(--bf-delay, 0ms),
    filter 900ms cubic-bezier(0, 0.47, 0.5, 1) var(--bf-delay, 0ms),
    transform 900ms cubic-bezier(0, 0.47, 0.5, 1) var(--bf-delay, 0ms);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.bf-active .bf-target.bf-hero {
  filter: blur(24px);
  -webkit-filter: blur(24px);
  transform: translateY(14px) scale(1.035);
}

.bf-active .bf-target.bf-visible {
  opacity: 1;
  filter: blur(0);
  -webkit-filter: blur(0);
  transform: translateY(0) scale(1);
}

/* After the entrance settles, drop will-change so we don't keep
   layers around forever (matters for long pages with many sections). */
.bf-active .bf-target.bf-settled {
  will-change: auto;
}

/* Reduced motion */
@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;
  }
  .bf-active .bf-target {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}