/* =============================================================================
   BASTIAN MEDICINE — DESIGN SYSTEM
   Direction A: Desert Apothecary
   Pure CSS · no build step · hand-editable
   ============================================================================= */


/* ─── 1. Font imports (Google Fonts) ───────────────────────────────────────── */
/* Cormorant Garamond = display wordmark + page titles
   Fraunces         = headlines (variable, optical size)
   Inter            = body + nav + eyebrow
   font-display: swap is applied per-face by Google Fonts’ generated CSS.      */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');


/* ─── 2. CSS reset (minimal modern) ────────────────────────────────────────── */
/* Based on Andy Bell / Josh Comeau conventions. No Meyer reset. */

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

* { margin: 0; }

html:focus-within { scroll-behavior: smooth; }

html,
body { height: 100%; }

body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }


/* ─── 3. Design tokens (CSS custom properties) ─────────────────────────────── */
/* Single source of truth for color, type, spacing, motion, radii, shadow. */

:root {
  /* Palette — Desert Apothecary */
  --color-canvas:        #F2EEE3;  /* cream — dominant bg */
  --color-canvas-deep:   #E9E3D3;  /* subtle darker cream for alt sections */
  --color-forest:        #2F4A3A;  /* deep primary — hero, nav, footer */
  --color-forest-ink:    #223A2D;  /* forest text variant on cream */
  --color-ink:           #1B1B17;  /* off-black body text */
  --color-terracotta:    #C58F5D;  /* warm accent — CTA pills, underlines */
  --color-terracotta-dk: #9A6A3D;  /* darker terracotta for AA-safe text on cream */
  --color-terracotta-hv: #A87748;  /* hover-darken for buttons */
  --color-paper:         #FFFFFF;  /* pure white — cards, forms */
  --color-smoke:         #6D6860;  /* muted warm grey — captions */
  --color-smoke-soft:    #B5AFA3;  /* hairline rules on cream */
  --color-sage:          #8A9F7E;  /* leaf — secondary accent, botanical */

  /* Semantic aliases */
  --bg-page:             var(--color-canvas);
  --bg-surface:          var(--color-paper);
  --bg-dark:             var(--color-forest);
  --text-default:        var(--color-ink);
  --text-muted:          var(--color-smoke);
  --text-on-dark:        var(--color-canvas);
  --accent:              var(--color-terracotta);
  --accent-strong:       var(--color-terracotta-dk);
  --rule:                var(--color-smoke-soft);

  /* Typography */
  --font-display:  'Cormorant Garamond', 'Cormorant Infant', Georgia, serif;
  --font-serif:    'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-eyebrow:    0.75rem;                                /* 12px fixed */
  --fs-caption:    0.8125rem;                              /* 13px */
  --fs-body:       1rem;                                   /* 16px */
  --fs-lead:       clamp(1.125rem, 0.95rem + 0.65vw, 1.5rem);     /* 18 → 24 */
  --fs-h3:         clamp(1.375rem, 1.1rem + 1.0vw, 1.875rem);    /* 22 → 30 */
  --fs-h2:         clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem);     /* 28 → 44 */
  --fs-h1:         clamp(2.25rem, 1.5rem + 3.0vw, 4rem);         /* 36 → 64 */
  --fs-display-md: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);        /* 40 → 72 */
  --fs-display-lg: clamp(3rem, 1.8rem + 4.6vw, 5.75rem);         /* 48 → 92 */
  --fs-display-xl: clamp(3.5rem, 1.9rem + 6.2vw, 7.5rem);        /* 56 → 120 */

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-base:    1.55;
  --lh-loose:   1.7;

  /* Letter-spacing */
  --ls-eyebrow: 0.22em;
  --ls-caps:    0.08em;
  --ls-tight:   -0.015em;

  /* Spacing scale */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;
  --space-32: 16rem;

  /* Layout */
  --container-max:    1400px;
  --container-narrow: 880px;   /* long-form / essay width */
  --page-pad:         1.5rem;  /* mobile default */
  --section-pad-y:    3rem;    /* mobile */

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadows — warm, soft, not hard drop shadow */
  --shadow-sm:  0 1px 2px rgba(27, 27, 23, 0.04), 0 2px 6px rgba(27, 27, 23, 0.04);
  --shadow-md:  0 2px 4px rgba(27, 27, 23, 0.05), 0 8px 20px rgba(27, 27, 23, 0.06);
  --shadow-lg:  0 4px 10px rgba(27, 27, 23, 0.06), 0 16px 40px rgba(27, 27, 23, 0.08);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  180ms;
  --dur-base:  300ms;
  --dur-slow:  520ms;

  /* Borders */
  --border-hair: 1px solid var(--rule);
  --border-dark: 1px solid rgba(242, 238, 227, 0.18);  /* on forest bg */

  /* Z-index scale */
  --z-nav:    50;
  --z-drawer: 80;
  --z-modal:  90;
}

/* Tablet+ — upsize page padding and section rhythm */
@media (min-width: 768px) {
  :root {
    --page-pad: 2.5rem;
    --section-pad-y: 5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --page-pad: 4rem;
    --section-pad-y: 6rem;
  }
}


/* ─── 4. Base styles ───────────────────────────────────────────────────────── */

html { font-size: 100%; /* honors user browser zoom */ }

body {
  background: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-base);
}

/* Headings — default to Fraunces for H1–H3 per spec, mixed-case */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-forest-ink);
  /* Variable-font optical-size axis pulled up for editorial feel */
  font-variation-settings: 'opsz' 72;
}

h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text-default);
}

h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; letter-spacing: var(--ls-caps); text-transform: uppercase; }
h6 { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }

p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text-default); }
p + p { margin-top: var(--space-2); }

/* Inline serif links — terracotta underline that expands on hover */
a {
  color: var(--color-forest-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart);
}

@media (prefers-reduced-motion: no-preference) {
  a:hover,
  a:focus-visible { background-size: 100% 1px; }
}
@media (prefers-reduced-motion: reduce) {
  a:hover,
  a:focus-visible { background-size: 100% 1px; transition: none; }
}

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

small { font-size: var(--fs-caption); color: var(--text-muted); }

hr {
  border: 0;
  border-top: var(--border-hair);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--color-forest);
  color: var(--color-canvas);
}


/* ─── 5. Layout utilities ──────────────────────────────────────────────────── */

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

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

/* 12-col grid, when you need it. Otherwise just use flex. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) { .grid { gap: var(--space-4); } }

.section { padding-block: var(--section-pad-y); }

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--surface { background: var(--color-canvas-deep); }

.section--tight    { padding-block: var(--space-6); }
.section--generous { padding-block: calc(var(--section-pad-y) * 1.5); }

/* Utility spacing helpers — sparingly */
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }

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


/* ─── 6. Typography utilities ──────────────────────────────────────────────── */

/* Eyebrow — small caps label (Inter 500, .22em, 12px, uppercase) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.eyebrow--accent { color: var(--accent-strong); }
.eyebrow--light  { color: rgba(242, 238, 227, 0.72); }

/* Display type — Cormorant Garamond, editorial wordmark / page titles */
.display-xl,
.display-lg,
.display-md {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-forest-ink);
}

.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }

.display--italic { font-style: italic; font-weight: 700; }

/* Lead paragraph — Fraunces, larger body, for hero subheads + intros */
.lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-default);
  max-width: 48ch;
  font-variation-settings: 'opsz' 36;
}

.lead--muted { color: var(--text-muted); }

/* Caption — Inter, small, muted */
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* Pullquote — editorial serif, italic, larger */
.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.75rem);
  line-height: var(--lh-snug);
  color: var(--color-forest-ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-3);
  max-width: 44ch;
}


/* ─── 7. Components ────────────────────────────────────────────────────────── */

/* ---- Nav -----------------------------------------------------------------
   Top nav, sticky, cream bg, hairline border-bottom.
   Logo left (Cormorant wordmark), menu right (Inter caps eyebrow),
   hamburger below 768px. */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-canvas);
  border-bottom: var(--border-hair);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--color-forest-ink);
  line-height: 1;
  background-image: none;  /* override base link underline animation */
}

.nav__brand small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-default);
  padding-block: var(--space-1);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out-quart);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] { background-size: 100% 1px; }

.nav__cta { margin-left: var(--space-2); }

/* Hamburger — shown below 768px */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-forest-ink);
}
.nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 767px) {
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--color-canvas);
    border-bottom: var(--border-hair);
    padding: var(--space-3) var(--page-pad) var(--space-4);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out-quart),
                transform var(--dur-base) var(--ease-out-quart);
  }
  .nav[data-open="true"] .nav__menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav__cta { margin-left: 0; margin-top: var(--space-2); }
}
@media (min-width: 768px) {
  .nav__toggle { display: none; }
}


/* ---- Footer --------------------------------------------------------------
   Deep forest bg, cream text, 4-col grid desktop / 1-col mobile.
   Columns: brand · services · contact · legal. */

.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid rgba(242, 238, 227, 0.08);
}

.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--color-canvas);
}

.footer__tagline {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(242, 238, 227, 0.72);
  max-width: 32ch;
}

.footer__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.6);
  margin-bottom: var(--space-2);
}

.footer__list li + li { margin-top: var(--space-1); }

.footer__list a {
  color: var(--color-canvas);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out-quart);
}
.footer__list a:hover,
.footer__list a:focus-visible { background-size: 100% 1px; }

.footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: rgba(242, 238, 227, 0.55);
}


/* ---- Buttons -------------------------------------------------------------
   .btn-primary = terracotta fill, ink text (AA-safe), pill shape, Inter caps.
   .btn-ghost   = cream bg, forest border, forest text.
   Both share base .btn styling. */

.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  background-image: none;  /* cancel base-link underline animation */
  transition: background-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-quart);
  white-space: nowrap;
}

.btn__icon {
  display: inline-flex;
  margin-left: 0.25rem;
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.btn__icon svg { width: 14px; height: 14px; }

.btn-primary {
  background-color: var(--color-terracotta);
  color: var(--color-ink);   /* ink, not cream — for WCAG AA on terracotta */
  border-color: var(--color-terracotta);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-terracotta-hv);
  border-color: var(--color-terracotta-hv);
  color: var(--color-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover .btn__icon { transform: translateX(3px); }
}

.btn-ghost {
  background-color: var(--color-canvas);
  color: var(--color-forest-ink);
  border: 1px solid var(--color-forest);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-forest);
  color: var(--color-canvas);
  border-color: var(--color-forest);
}

/* Ghost on dark bg (inside hero over forest) */
.btn-ghost--on-dark {
  background-color: transparent;
  color: var(--color-canvas);
  border-color: rgba(242, 238, 227, 0.5);
}
.btn-ghost--on-dark:hover,
.btn-ghost--on-dark:focus-visible {
  background-color: var(--color-canvas);
  color: var(--color-forest-ink);
  border-color: var(--color-canvas);
}

/* Size variants */
.btn--sm { padding: 0.6rem 1.1rem; font-size: 11px; }
.btn--lg { padding: 1.05rem 2rem;  font-size: 13px; }


/* ---- Hero ----------------------------------------------------------------
   Full-bleed section; supports optional image layer + content block.
   Default: content aligned bottom-left. Modifier: .hero--center for center. */

.hero {
  position: relative;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: flex-end;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero--center { align-items: center; }
.hero--short  { min-height: min(58vh, 520px); }
.hero--light {
  background: var(--color-canvas);
  color: var(--text-default);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media picture,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vignette — forest gradient pulled over image for legibility */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(27, 27, 23, 0.15) 0%,
    rgba(27, 27, 23, 0.35) 55%,
    rgba(47, 74, 58, 0.82) 100%
  );
  z-index: -1;
}

.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-8) var(--page-pad) var(--space-6);
}

.hero--center .hero__inner { text-align: center; }
.hero--center .lead { margin-inline: auto; }

.hero__eyebrow { margin-bottom: var(--space-3); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  color: var(--color-canvas);
  max-width: 18ch;
}
.hero--light .hero__title,
.hero--light .hero__eyebrow { color: var(--color-forest-ink); }

.hero__subtitle {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: rgba(242, 238, 227, 0.85);
  max-width: 48ch;
  font-variation-settings: 'opsz' 36;
}
.hero--light .hero__subtitle { color: var(--text-default); }

.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ---- Card ----------------------------------------------------------------
   Paper bg, subtle shadow, padded. Serif heading inside. */

.card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart);
}

@media (prefers-reduced-motion: no-preference) {
  .card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--rule);
  }
}

.card__eyebrow { margin-bottom: var(--space-1); }

.card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-forest-ink);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-tight);
}

.card__body {
  font-family: var(--font-sans);
  color: var(--text-default);
}

.card--flat {
  background: transparent;
  border: var(--border-hair);
  box-shadow: none;
}

.card--bordered {
  background: var(--bg-surface);
  border: var(--border-hair);
  box-shadow: none;
}


/* ---- Section-credit ------------------------------------------------------
   "01 · Fieldwork" style — tracked credit eyebrow + oversized serif title.
   Lampost-inspired section-intro pattern. */

.section-credit {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.section-credit__number {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.section-credit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  color: var(--color-forest-ink);
  max-width: 18ch;
}

.section-credit__rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
  max-width: 180px;
  margin-top: var(--space-2);
}

.section-credit__lead { max-width: 52ch; }


/* ---- Dispensary grid -----------------------------------------------------
   Fullscript product tile grid: 2-col mobile / 4-col desktop. */

.dispensary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 640px)  { .dispensary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .dispensary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dispensary-tile {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out-quart),
              transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart);
}

.dispensary-tile__image {
  aspect-ratio: 1 / 1;
  background: var(--color-canvas-deep);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.dispensary-tile__image img { width: 100%; height: 100%; object-fit: cover; }

.dispensary-tile__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.dispensary-tile__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: var(--lh-snug);
  color: var(--color-forest-ink);
  margin-block: 4px var(--space-1);
}

.dispensary-tile__price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--text-default);
}

@media (prefers-reduced-motion: no-preference) {
  .dispensary-tile:hover {
    transform: translateY(-2px);
    border-color: var(--rule);
    box-shadow: var(--shadow-sm);
  }
}


/* ---- Book embed wrap -----------------------------------------------------
   Styled iframe wrapper for clientsecure.me embed:
   cream bg, terracotta border, shadow. */

.book-embed-wrap {
  background: var(--color-canvas);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  overflow: hidden;
}

.book-embed-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
}

.book-embed-wrap__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.book-embed-wrap__frame {
  width: 100%;
  min-height: 720px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  display: block;
}

/* Loading shimmer — cream/forest palette, avoids the white ClientSecure flash */
.book-embed-wrap__shimmer {
  width: 100%;
  min-height: 720px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    100deg,
    var(--color-canvas) 0%,
    var(--color-canvas-deep) 40%,
    var(--color-canvas) 80%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .book-embed-wrap__shimmer { animation: none; background: var(--color-canvas-deep); }
}


/* ─── 8. Page-specific blocks ──────────────────────────────────────────────── */
/* Kept small + reusable. Compose with .section + .container. */

/* Home hero — wordmark over cinematic portrait */
.home-hero { min-height: min(90vh, 820px); }
.home-hero .hero__title { max-width: 16ch; }

/* About Founder — portrait left, bio right */
.about-founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .about-founder {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }
}

.about-founder__portrait {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-canvas-deep);
}

.about-founder__body {
  display: grid;
  gap: var(--space-3);
}

/* Somatic Shen hero — dark bg, centered editorial treatment */
.somatic-shen-hero {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-12);
  text-align: center;
}

.somatic-shen-hero .eyebrow { color: var(--color-sage); }

.somatic-shen-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-display-xl);
  line-height: 1;
  color: var(--color-canvas);
  margin-top: var(--space-3);
}

.somatic-shen-hero__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  color: rgba(242, 238, 227, 0.82);
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  line-height: var(--lh-snug);
}

/* Positioning strip — large pull-statement across cream bg */
.section--positioning { padding-block: var(--space-12); }
.section--positioning .display-lg { max-width: 22ch; }

/* Pillars grid — 4-col for the 4 Pillar Monthly Program */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }

.pillar {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.pillar__num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.pillar__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: var(--lh-snug);
  color: var(--color-forest-ink);
  margin-top: var(--space-1);
}
.pillar__body {
  margin-top: var(--space-2);
  color: var(--text-default);
  font-size: 0.9375rem;
}

/* Testimonial — editorial serif, quoted, attributed */
.testimonial {
  display: grid;
  gap: var(--space-3);
  max-width: 60ch;
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: var(--lh-snug);
  color: var(--color-forest-ink);
}
.testimonial__attr {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}


/* ─── 9. Responsive — mobile-first polish ──────────────────────────────────── */
/* Breakpoints used above: 640 (sm), 768 (md), 900, 1024 (lg), 1440 (xl).      */

@media (min-width: 1440px) {
  :root { --section-pad-y: 7rem; }
}

/* Small-viewport guardrails (360-wide phones) */
@media (max-width: 360px) {
  .hero__inner { padding-inline: 1rem; }
  .hero__title { font-size: clamp(2rem, 8vw, 2.75rem); }
  .btn, .btn-primary, .btn-ghost { padding: 0.75rem 1.25rem; }
}


/* ─── 10. Reduced motion + focus-visible ───────────────────────────────────── */

/* Honor OS-level reduced-motion preference */
@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;
  }
}

/* Keyboard focus — 2px terracotta, 3px offset, always visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring on mouse click but keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* Ensure button focus is visible on both light + dark bg */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost--on-dark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ─── 11. Placeholder highlight ─────────────────────────────────────────────
   Makes `[PLACEHOLDER]` copy visible on staging so Dr. Bastian sees exactly
   what needs filling. Remove the `.placeholder` class from production HTML
   once the value is filled in. */
.placeholder {
  background: #FFE8C2;
  padding: 0 0.25em;
  border-radius: 2px;
  outline: 1px dashed #C58F5D;
  font-style: normal;
}