/* =====================================================================
   BASE — reset, typography primitives, layout helpers
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-plain);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: color-mix(in srgb, var(--color-secondary) 40%, transparent); color: var(--ref-ink); }

:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-brand);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  color: var(--color-text);
  text-wrap: balance;
}
em, .italic { font-style: italic; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }

/* Surfaces */
.bg-page   { background: var(--color-page); }
.bg-cream  { background: var(--color-surface-cream); }
.bg-cream2 { background: var(--color-surface-cream-2); }
.bg-deep   { background: var(--color-surface-deep); color: var(--color-text-on-deep); }
.bg-plum-grad { background: var(--grad-plum-deep); color: var(--color-text-on-deep); }
.bg-indigo { background: var(--color-surface-indigo); color: var(--color-text-on-deep); }
.bg-indigo-grad { background: var(--grad-indigo-deep); color: var(--color-text-on-deep); }
.bg-ocean { background: var(--grad-ocean); color: var(--color-text-on-deep); }
.bg-azure-grad { background: var(--grad-azure-deep); color: var(--color-text-on-deep); }
.bg-spectrum { background: var(--grad-spectrum); color: #fff; }
/* Monochromatic dark-turquoise: deep teal ground, bright cyan headings + text */
.bg-teal-mono { background: var(--grad-teal-mono); color: var(--ref-teal-80); position: relative; isolation: isolate; }
/* subtle embedded watercolor grain over the gradient (soft-light, low opacity) */
.bg-teal-mono::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tex-teal-1); background-size: cover; background-position: center;
  opacity: 0.22; mix-blend-mode: soft-light;
}
.bg-teal-mono h1, .bg-teal-mono h2, .bg-teal-mono h3, .bg-teal-mono h4 { color: var(--ref-cyan-40); }
.bg-teal-mono .eyebrow { color: var(--ref-cyan-40); }
.bg-teal-mono .eyebrow::before { background: var(--ref-cyan-40); }
.bg-teal-mono .lead, .bg-teal-mono p { color: var(--ref-teal-80); }
.bg-teal-mono .display em { color: var(--ref-cyan-60); }
.bg-teal-mono .text-link { color: var(--ref-cyan-40); border-color: color-mix(in srgb, var(--ref-cyan-40) 50%, transparent); }
.bg-teal-mono .btn--ghost { color: var(--ref-cyan-40); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ref-cyan-40) 45%, transparent); }
.bg-teal-mono .step__dot { background: var(--ref-cyan-40); color: var(--ref-teal-05); }
/* CTA in teal-mono uses rose (not gold) */
.bg-teal-mono .btn--gold { background: var(--ref-rose-40); color: var(--ref-plum-10); }
.bg-teal-mono .btn--gold:hover { background: var(--ref-rose-50); }

/* Inverse monochromatic: BRIGHT CYAN ground, dark-turquoise text (cyan as background) */
.bg-cyan-mono { background: linear-gradient(165deg, var(--ref-cyan-60) 0%, var(--ref-cyan-40) 100%); color: var(--ref-indigo-20); position: relative; isolation: isolate; }
/* subtle watercolor grain over the bright cyan (multiply, low opacity) */
.bg-cyan-mono::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tex-teal-1); background-size: cover; background-position: center;
  opacity: 0.32; mix-blend-mode: multiply;
}
.bg-cyan-mono h1, .bg-cyan-mono h2, .bg-cyan-mono h3, .bg-cyan-mono h4 { color: var(--ref-indigo-05); }
.bg-cyan-mono .eyebrow { color: var(--ref-indigo-30); }
.bg-cyan-mono .eyebrow::before { background: var(--ref-indigo-30); }
.bg-cyan-mono .lead, .bg-cyan-mono p { color: var(--ref-indigo-20); }
.bg-cyan-mono .display em { color: var(--ref-plum-30); }
.bg-cyan-mono .text-link { color: var(--ref-indigo-10); border-color: color-mix(in srgb, var(--ref-indigo-20) 55%, transparent); }
.bg-cyan-mono .btn--ghost { color: var(--ref-indigo-10); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ref-indigo-20) 60%, transparent); }
.bg-cyan-mono .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ref-indigo-10); color: var(--ref-indigo-05); }
.bg-cyan-mono .step__dot { background: var(--ref-indigo-10); color: var(--ref-cyan-40); }
.bg-cyan-mono .card { background: rgba(255,255,255,0.92); }
.bg-cyan-mono .phase { background: rgba(255,255,255,0.82); border-color: rgba(6,28,36,0.12); }
.bg-cyan-mono .phase .says { color: var(--ref-plum-40); }
.bg-mono-purple { background: var(--bg-mono-purple); }
.bg-mono-rose { background: var(--bg-mono-rose); }
.bg-mono-blue { background: var(--bg-mono-blue); }
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-plum-grad h1, .bg-plum-grad h2, .bg-plum-grad h3,
.bg-indigo h1, .bg-indigo h2, .bg-indigo h3, .bg-indigo-grad h1, .bg-indigo-grad h2, .bg-indigo-grad h3,
.bg-ocean h1, .bg-ocean h2, .bg-ocean h3, .bg-azure-grad h1, .bg-azure-grad h2, .bg-azure-grad h3,
.bg-spectrum h1, .bg-spectrum h2, .bg-spectrum h3 { color: var(--color-text-on-deep); }
.bg-indigo .eyebrow, .bg-indigo-grad .eyebrow, .bg-ocean .eyebrow, .bg-azure-grad .eyebrow, .bg-spectrum .eyebrow { color: var(--ref-cyan-40); }
.bg-indigo .lead, .bg-indigo-grad .lead, .bg-ocean .lead, .bg-azure-grad .lead, .bg-spectrum .lead { color: var(--color-text-on-deep-soft); }

/* Textured section: watercolor photo as a low-key texture under a color overlay.
   Usage: <section class="section has-texture tex-purple" style="--tex:url(...)"> */
/* Textures are composited directly on the element: a translucent color
   gradient (top layer) over the watercolor image (bottom layer). No
   pseudo-elements, no z-index, no stacking context — the most robust
   technique, and content paints above the background naturally.
   This single declaration WINS over .bg-page/.bg-cream because it appears
   later in this stylesheet and sets the full background. */
/* The watercolor image is set INLINE on each section (background-image:url(...)),
   which resolves reliably in every browser. The color scrim is a separate
   rgba pseudo-element on top — no color-mix(), no url() in a custom property. */
.has-texture {
  position: relative;
  background-image: var(--tex-overlay), var(--tex-img);
  background-size: cover, cover;
  background-position: var(--tex-pos, center), var(--tex-pos, center);
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal;
}
/* DARK textured sections — watercolor reads boldly under a tinted gradient; white text */
.tex-purple { --tex-overlay: var(--tex-purple-overlay); color: var(--color-text-on-deep); }
.tex-rose   { --tex-overlay: var(--tex-rose-overlay);   color: var(--color-text-on-deep); }
.tex-blue   { --tex-overlay: var(--tex-blue-overlay);   color: var(--color-text-on-deep); }
.tex-indigo { --tex-overlay: var(--tex-indigo-overlay); color: var(--color-text-on-deep); }
/* LIGHT textured sections — watercolor at full strength under a translucent
   page-scrim, so it's boldly visible while dark ink text stays legible. */
.tex-purple-light { --tex-overlay: var(--tex-purple-light); }
.tex-rose-light   { --tex-overlay: var(--tex-rose-light); }
.tex-blue-light   { --tex-overlay: var(--tex-blue-light); }
.tex-teal-light   { --tex-overlay: var(--tex-teal-light); }
.tex-gold-light   { --tex-overlay: var(--tex-gold-light); }

/* SUBTLE GRAIN — for gradient/mono panels (heroes, Five Rites). The texture is
   blended OVER the element's own gradient at low opacity via soft-light, so the
   clean gradient stays dominant and the watercolor only adds organic grain.
   Does NOT replace the background, so the deep blue-green gradient is preserved. */
.tex-grain { position: relative; isolation: isolate; }
.tex-grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tex-img); background-size: cover; background-position: var(--tex-pos, center);
  opacity: var(--grain-opacity, 0.30); mix-blend-mode: soft-light;
}

/* Photo-as-background band: a Kat Bacchus photo set as a full-bleed section
   background, gently desaturated, under a translucent monochromatic veil so
   the image reads as atmosphere and text stays legible. Set --photo:url(...). */
/* photo-bg reuses the .has-texture engine: --tex-img holds the embedded photo
   (set by .pb-* class), and the veil feeds the overlay layer. */
.photo-bg { color: var(--color-text-on-deep); background-color: var(--color-surface-deep); --tex-overlay: var(--veil, var(--veil-plum)); --tex-pos: var(--photo-pos, center); overflow: hidden; }
.photo-bg h1, .photo-bg h2, .photo-bg h3, .photo-bg h4 { color: var(--color-text-on-deep); }
.photo-bg .lead, .photo-bg p { color: var(--color-text-on-deep-soft); }
.veil-plum  { --veil: var(--veil-plum); }
.veil-teal  { --veil: var(--veil-teal); }
.veil-rose  { --veil: var(--veil-rose); }
.veil-azure { --veil: var(--veil-azure); }
.veil-gold  { --veil: var(--veil-gold); }
.photo-bg.veil-teal .eyebrow, .photo-bg.veil-azure .eyebrow { color: var(--ref-cyan-40); }
.photo-bg.veil-plum .eyebrow, .photo-bg.veil-rose .eyebrow { color: var(--ref-rose-60); }
.photo-bg.veil-gold .eyebrow { color: var(--ref-gold-50); }
.has-texture.tex-purple h1, .has-texture.tex-purple h2, .has-texture.tex-purple h3,
.has-texture.tex-rose h1, .has-texture.tex-rose h2, .has-texture.tex-rose h3,
.has-texture.tex-blue h1, .has-texture.tex-blue h2, .has-texture.tex-blue h3,
.has-texture.tex-indigo h1, .has-texture.tex-indigo h2, .has-texture.tex-indigo h3 { color: var(--color-text-on-deep); }
.has-texture.tex-purple .eyebrow, .has-texture.tex-rose .eyebrow { color: var(--ref-rose-70); }
.has-texture.tex-blue .eyebrow, .has-texture.tex-indigo .eyebrow { color: var(--ref-cyan-40); }
.has-texture.tex-purple .lead, .has-texture.tex-rose .lead,
.has-texture.tex-blue .lead, .has-texture.tex-indigo .lead { color: var(--color-text-on-deep-soft); }

/* Eyebrow / section number */
.eyebrow {
  font-family: var(--font-plain);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
  display: inline-flex; align-items: center;
}
.bg-deep .eyebrow, .bg-plum-grad .eyebrow { color: var(--ref-rose-60); }

/* Display + lead */
/* Display classes carry the brand font so they work on ANY element,
   not only on h1–h4 tags (fixes bare-<div> specimens rendering in Inter). */
.display, .h1, .h2, .h3 { font-family: var(--font-brand); font-weight: 400; line-height: var(--lh-snug); font-optical-sizing: auto; }
.display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--color-text-soft); max-width: 60ch; }
.bg-deep .lead, .bg-plum-grad .lead { color: var(--color-text-on-deep-soft); }
.muted { color: var(--color-text-soft); }
.measure { max-width: 62ch; }
.measure p + p { margin-top: 1.1em; }

/* Utility */
.center { text-align: center; }
.center .lead, .center .measure { margin-inline: auto; }
.stack > * + * { margin-top: var(--s-5); }
.mt-2{margin-top:var(--s-2)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)}
.gold-text { color: var(--ref-gold-30); }
.cyan-rule { height: 2px; width: 64px; background: var(--grad-sunset); border-radius: var(--radius-pill); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--color-action); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }