/* ---- src/css/tokens.css ---- */
/* ==========================================================================
   Perennial — design tokens
   Every colour, type size, space and motion value on the page comes from here.
   Section CSS may derive new tints with color-mix(), never new raw hex values.
   ========================================================================== */

:root {
  /* Paper & ink ---------------------------------------------------------- */
  --paper: #f6f0e7;        /* warm ivory, the page */
  --paper-2: #eee5d8;      /* linen */
  --paper-3: #e4d6c3;      /* oat */
  --card: #fffcf7;         /* mockup surfaces */
  --ink: #231c17;          /* espresso */
  --ink-2: #4a3f37;
  --ink-3: #6a5d52;
  --hair: rgba(35, 28, 23, 0.13);
  --hair-2: rgba(35, 28, 23, 0.07);

  /* Night (dark sections) ------------------------------------------------ */
  --night: #16110e;
  --night-2: #211913;
  --night-3: #2e241c;
  --cream: #f4eadd;
  --cream-2: rgba(244, 234, 221, 0.74);
  --cream-3: rgba(244, 234, 221, 0.52);
  --hair-dark: rgba(244, 234, 221, 0.14);

  /* Botanical accents: one per phase, a life stage each ------------------ */
  --sage: #8e9c79;         /* 01 Attract: sprout */
  --moss: #55603f;
  --rose: #c98a7c;         /* 02 Capture: bud */
  --rose-deep: #9b584b;
  --gold: #c8a064;         /* 03 Run: bloom */
  --gold-deep: #94703a;
  --wine: #a4566a;         /* 04 Encore: seed head */
  --wine-deep: #5c2434;
  --blush: #f0d8cd;
  --candle: #f2c58a;       /* warm light, glows only */

  /* Phase washes: light section grounds tinted by their phase colour, so each
     phase reads as its own room (Attract sage, Capture rose). */
  --sage-wash: #e3e8d5;
  --rose-wash: #efd1c5;

  /* Type ----------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-hand: "Homemade Apple", "Segoe Script", cursive;

  /* Two knobs for size.

     --zoom scales the entire page the way Ctrl+minus does: type, spacing,
     mockups, borders, every fixed pixel. It is the one to reach for first.

     --scale only moves the type ramp and the section rhythm, so it tunes how
     big the words are relative to everything else. At 1 the ramp is the
     original drawing. */
  --zoom: 0.72;
  --scale: 1;

  --fs-mega: calc(clamp(3rem, 1.1rem + 7.2vw, 8.5rem) * var(--scale));
  --fs-display: calc(clamp(2.5rem, 1.15rem + 5.2vw, 6.25rem) * var(--scale));
  --fs-h2: calc(clamp(2.1rem, 1.2rem + 3.5vw, 4.5rem) * var(--scale));
  --fs-h3: calc(clamp(1.45rem, 1.1rem + 1.3vw, 2.25rem) * var(--scale));
  --fs-h4: max(0.95rem, calc(clamp(1.12rem, 1rem + 0.45vw, 1.38rem) * var(--scale)));
  --fs-lede: max(1rem, calc(clamp(1.12rem, 1rem + 0.55vw, 1.45rem) * var(--scale)));
  --fs-body: max(0.95rem, calc(1.0625rem * var(--scale)));
  --fs-small: max(0.875rem, calc(0.9375rem * var(--scale)));
  --fs-xs: max(0.8rem, calc(0.8125rem * var(--scale)));
  --fs-micro: max(0.66rem, calc(0.6875rem * var(--scale)));

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  /* Space & layout ------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --max-text: 38rem;
  --section-y: calc(clamp(96px, 11vw, 176px) * var(--scale));
  --nav-h: 88px;

  /* Shape & depth -------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35, 28, 23, 0.06), 0 4px 14px -6px rgba(35, 28, 23, 0.12);
  --shadow-2: 0 2px 4px rgba(35, 28, 23, 0.05), 0 18px 40px -18px rgba(35, 28, 23, 0.28),
    0 40px 80px -40px rgba(60, 40, 25, 0.25);
  --shadow-3: 0 3px 8px rgba(35, 28, 23, 0.06), 0 30px 60px -24px rgba(35, 28, 23, 0.35),
    0 70px 120px -50px rgba(60, 40, 25, 0.35);
  --shadow-night: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 70px -30px rgba(0, 0, 0, 0.7);

  /* Motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 900ms;
  --dur-4: 1600ms;
}

/* ---- src/css/base.css ---- */
/* ==========================================================================
   Perennial — base: reset, document, layout primitives, section themes
   ========================================================================== */

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

html {
  /* Scales the page exactly the way the browser's own zoom does, so the
     mockups, borders and fixed pixel sizes come down with the type instead
     of staying big. See --zoom in tokens.css. */
  zoom: var(--zoom, 1);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  /* Viewport units shrink under zoom, so divide them back out to keep
     full-height blocks filling the real screen */
  min-height: calc(100vh / var(--zoom, 1));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-snug);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

a {
  color: inherit;
}

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

::selection {
  background: var(--blush);
  color: var(--ink);
}

/* Ink ring on the light grounds (gold falls under 3:1 there); gold on dark */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--night :focus-visible,
.section--night-2 :focus-visible,
.section--wine :focus-visible,
.footer :focus-visible,
body > footer :focus-visible,
.nav:not(.is-solid) :focus-visible {
  outline-color: var(--gold);
}

[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

/* Sections land flush under the nav, with no sliver of the one before */
main > section[id] {
  scroll-margin-top: var(--nav-h);
}

/* Components that set display (inline-flex, grid) must still obey [hidden] */
[hidden] {
  display: none !important;
}

.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;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* Layout ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}

/* Section themes: set background + text colours once, components read them */
.section--paper {
  background: var(--paper);
  color: var(--ink);
}

.section--linen {
  background: var(--paper-2);
  color: var(--ink);
}

.section--sage {
  background: var(--sage-wash);
  color: var(--ink);
}

.section--rose {
  background: var(--rose-wash);
  color: var(--ink);
}

.section--blush {
  background: color-mix(in srgb, var(--blush) 55%, var(--paper));
  color: var(--ink);
}

.section--night {
  background: var(--night);
  color: var(--cream);
  color-scheme: dark;
}

.section--night-2 {
  background: var(--night-2);
  color: var(--cream);
  color-scheme: dark;
}

.section--wine {
  background: var(--wine-deep);
  color: var(--cream);
  color-scheme: dark;
}

/* Film grain over the whole page: the thing that makes flat colour feel printed */
.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.11  0 0 0 0 0.09  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- src/css/components.css ---- */
/* ==========================================================================
   Perennial — shared components
   Type helpers, buttons, nav, phase scaffolding, mockup kit, reveal motion.
   Section CSS builds on these; it never redefines them.
   ========================================================================== */

/* Type helpers ------------------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow, var(--ink-3));
}

.eyebrow::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section--night .eyebrow,
.section--night-2 .eyebrow,
.section--wine .eyebrow {
  --eyebrow: var(--cream-3);
}

.mega,
.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mega {
  font-size: var(--fs-mega);
  line-height: 0.98;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Italic accent words inside headings: <h2 class="h2">Plain <em>accent</em></h2> */
.mega em,
.display em,
.h2 em,
.h3 em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--accent-deep, var(--rose-deep));
}

.section--night :is(.mega, .display, .h2, .h3) em,
.section--night-2 :is(.mega, .display, .h2, .h3) em,
.section--wine :is(.mega, .display, .h2, .h3) em {
  color: var(--accent, var(--candle));
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--max-text);
}

.section--night .lede,
.section--night-2 .lede,
.section--wine .lede {
  color: var(--cream-2);
}

/* The elegant paragraph: serif, generous, for the workflow descriptions */
.prose-serif {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.18rem, 1.02rem + 0.55vw, 1.5rem);
  line-height: 1.55;
  font-variation-settings: "SOFT" 80, "opsz" 36;
  letter-spacing: -0.005em;
  max-width: 36rem;
}

.prose-serif p + p {
  margin-top: 0.9em;
}

.muted {
  color: var(--ink-3);
}

.section--night .muted,
.section--night-2 .muted,
.section--wine .muted {
  color: var(--cream-3);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 52px;
  padding: 0.95em 1.55em 0.95em 1.7em;
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

/* A warm sheen that sweeps across on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(242, 197, 138, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(35, 28, 23, 0.55);
}

.btn:hover::after {
  transform: translateX(120%);
}

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

.btn__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--light {
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: color-mix(in srgb, currentColor 35%, transparent);
}

.btn--ghost:hover {
  box-shadow: none;
  --btn-border: currentColor;
}

.btn--sm {
  min-height: 42px;
  padding: 0.7em 1.15em 0.7em 1.3em;
  font-size: 0.9rem;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-2) var(--ease-out);
}

/* A 44px tap target around the words, without moving the underline or the
   line box: an invisible hit area centred on the link. */
.text-link::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

.text-link:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .btn__arrow,
  .text-link {
    transition: none;
  }
}

/* Brand ------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  transition: transform 1.2s var(--ease-out);
}

.brand:hover .brand__mark {
  transform: rotate(90deg);
}

.brand__word {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Nav --------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: var(--nav-h);
  color: var(--cream);
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The bar carries more weight than the old 72px one, so the brand and the CTA
   scale with it. The Second Brain lockup deliberately does not: it keeps its
   own size so it still reads as a credit, not a second brand on the bar. */
.nav .brand__mark {
  width: 36px;
  height: 36px;
}

.nav .brand__word {
  font-size: 1.72rem;
}

.nav .btn {
  min-height: 46px;
  padding: 0.75em 1.35em 0.75em 1.5em;
  font-size: 0.95rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-left: auto;
}

.nav__links a {
  position: relative;
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity var(--dur-1);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.nav__links a:hover,
.nav__links a[aria-current] {
  opacity: 1;
}

.nav__links a:hover::after,
.nav__links a[aria-current]::after {
  transform: scaleX(1);
}

.nav .btn {
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
}

.nav.is-solid {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--hair);
}

.nav.is-solid .btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
}

@media (max-width: 860px) {
  .nav__links {
    display: none;
  }
}

@media (max-width: 420px) {
  .nav .btn {
    padding-inline: 1em;
    font-size: 0.85rem;
  }
}

/* Floating CTA: appears after the hero, steps aside at the form ----------- */

.float-cta {
  position: fixed;
  right: clamp(12px, 3vw, 32px);
  bottom: clamp(12px, 3vw, 32px);
  z-index: 790;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  /* A candle-gold hairline keeps the ink pill distinct over the night sections too */
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(242, 197, 138, 0.42), inset 0 1px 0 rgba(244, 234, 221, 0.1);
  transform: translateY(140%);
  opacity: 0;
  /* Hidden means gone: no taps, no tab stop. visibility flips after the fade. */
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--dur-3) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}

.float-cta.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Desktop and wide tablet: the nav already carries the CTA, so no float. */
@media (min-width: 861px) {
  .float-cta {
    display: none;
  }
}

/* Phones and small tablets: one CTA pill at a time. While the float is up,
   the nav button steps aside; it comes back when the float does. */
@media (max-width: 860px) {
  .float-cta-on .nav__cta {
    visibility: hidden;
  }
}

.float-cta__mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
}

.float-cta__mark svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 560px) {
  .float-cta {
    left: 12px;
    right: 12px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-cta {
    transition:
      opacity var(--dur-2) linear,
      visibility 0s linear var(--dur-2);
    transform: none;
  }

  .float-cta.is-shown {
    transition-delay: 0s;
  }
}

/* Phase scaffolding (shared by the four phase sections) ------------------ */

[data-phase="attract"] {
  --accent: var(--sage);
  --accent-deep: var(--moss);
}

[data-phase="capture"] {
  --accent: var(--rose);
  --accent-deep: var(--rose-deep);
}

[data-phase="run"] {
  --accent: var(--gold);
  --accent-deep: var(--gold-deep);
}

[data-phase="encore"] {
  --accent: var(--wine);
  --accent-deep: var(--wine-deep);
}

/* Giant outlined numeral, positioned by each section */
.phase-num {
  font-family: var(--font-display);
  font-size: clamp(9rem, 24vw, 22rem);
  line-height: 0.78;
  font-weight: 200;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent);
  user-select: none;
  pointer-events: none;
}

/* "Takes proof → makes demand" */
.phase-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 0.8em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-deep) 80%, var(--ink));
}

/* Phase masthead: the big "PHASE 01" lockup that opens every phase section.
   <div class="phase-mast">
     <p class="phase-mast__mark" aria-hidden="true">
       <span class="phase-mast__word">Phase</span><span class="phase-mast__num">01</span>
     </p>
     <div class="phase-mast__meta">
       <p class="phase-mast__name"><span class="sr-only">Phase 01: </span>Attract</p>
       <p class="phase-flow">Takes proof <svg class="phase-flow__arrow">…</svg> makes demand</p>
     </div>
   </div>                                                                     */
.phase-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px clamp(24px, 3.4vw, 56px);
  padding-bottom: clamp(18px, 2.2vw, 28px);
  margin-bottom: clamp(28px, 3.6vw, 52px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.phase-mast__mark {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.2vw, 20px);
  margin: 0;
  line-height: 0.8;
  color: var(--accent-deep);
  user-select: none;
}

.phase-mast__word {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 4.4rem);
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phase-mast__num {
  font-family: var(--font-display);
  font-size: clamp(5.6rem, 3.2rem + 8.6vw, 12rem);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.045em;
  line-height: 0.76;
}

.phase-mast__meta {
  display: grid;
  gap: 12px;
  padding-bottom: 0.35em;
}

.phase-mast__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--ink);
}

.section--night .phase-mast__mark,
.section--night-2 .phase-mast__mark,
.section--wine .phase-mast__mark {
  color: var(--accent);
}

.section--night .phase-mast__name,
.section--night-2 .phase-mast__name,
.section--wine .phase-mast__name {
  color: var(--cream);
}

@media (max-width: 560px) {
  .phase-mast {
    align-items: flex-start;
    flex-direction: column;
  }
}

.phase-flow__arrow {
  width: 2.6em;
  height: 0.8em;
  flex: none;
}

.section--night .phase-flow,
.section--night-2 .phase-flow,
.section--wine .phase-flow {
  color: var(--accent);
}

.phase-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-lede);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-3);
}

.section--night .phase-kicker,
.section--night-2 .phase-kicker,
.section--wine .phase-kicker {
  color: var(--cream-3);
}

/* What we do: a list whose items carry sublists */
.phase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: phase-item;
}

.phase-list > li {
  counter-increment: phase-item;
  position: relative;
  padding: 18px 0 20px 3rem;
  border-top: 1px solid var(--hair);
  break-inside: avoid;
}

.phase-list > li::before {
  content: counter(phase-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 23px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}

.phase-list__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.28;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.phase-list__sub {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 5px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.phase-list__sub li {
  position: relative;
  padding-left: 1.15em;
}

.phase-list__sub li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5em;
  height: 1px;
  background: var(--accent);
}

.phase-list--cols {
  columns: 2 22rem;
  column-gap: clamp(32px, 4vw, 64px);
}

/* Phase lists read as a tight index. main.js turns each item title into a
   disclosure and hides its sublist, and adds one switch per phase that opens
   the lot, so the page can be skimmed without scrolling through every
   sub-point. Without JavaScript every sub-point simply shows. */
.phase-list__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 9px 16px 9px 18px;
  border: 1px solid color-mix(in srgb, var(--accent-deep, var(--ink)) 35%, transparent);
  border-radius: var(--r-pill);
  background: none;
  color: var(--accent-deep, var(--ink));
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-1),
    background-color var(--dur-1);
}

.phase-list__all:hover {
  border-color: color-mix(in srgb, var(--accent-deep, var(--ink)) 65%, transparent);
  background: color-mix(in srgb, var(--accent-deep, var(--ink)) 7%, transparent);
}

.phase-list__all .phase-list__toggle-icon {
  width: 17px;
  height: 17px;
  margin-top: 0;
}

.section--night .phase-list__all,
.section--night-2 .phase-list__all,
.section--wine .phase-list__all {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.section--night .phase-list__all:hover,
.section--night-2 .phase-list__all:hover,
.section--wine .phase-list__all:hover {
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Closed, the titles alone are short, so they take a third column */
.phase-list--cols.is-compact:not(.is-open) {
  columns: 3 15rem;
}
.phase-list__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  margin: -10px 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.phase-list__toggle:focus-visible {
  outline-offset: 2px;
}

/* A plus that turns to a minus, drawn in the phase accent */
.phase-list__toggle-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1em;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-deep, var(--ink)) 45%, transparent);
  color: var(--accent-deep, var(--ink));
}

.phase-list__toggle-icon::before,
.phase-list__toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.25px;
  margin: -0.625px 0 0 -5px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}

.phase-list__toggle-icon::after {
  transform: rotate(90deg);
}

.phase-list__toggle[aria-expanded="true"] .phase-list__toggle-icon::after {
  transform: rotate(0deg);
}

.phase-list.is-compact > li {
  padding-block: 14px 14px;
}

.phase-list.is-compact > li::before {
  top: 21px;
}

.phase-list.is-compact .phase-list__title {
  margin-bottom: 0;
}

.phase-list.is-compact .phase-list__sub {
  margin-top: 12px;
}

.section--night .phase-list__toggle-icon,
.section--night-2 .phase-list__toggle-icon,
.section--wine .phase-list__toggle-icon {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .phase-list__toggle-icon::before,
  .phase-list__toggle-icon::after {
    transition: none;
  }
}

.section--night .phase-list > li,
.section--night-2 .phase-list > li,
.section--wine .phase-list > li {
  border-top-color: var(--hair-dark);
}

.section--night .phase-list > li::before,
.section--night-2 .phase-list > li::before,
.section--wine .phase-list > li::before {
  color: var(--accent);
}

.section--night .phase-list__sub,
.section--night-2 .phase-list__sub,
.section--wine .phase-list__sub {
  color: var(--cream-2);
}

/* Mockup kit ------------------------------------------------------------- */
/* Mockups are illustrations of the product, not live UI: no focusable
   elements inside, wrapped in <figure> with a visible <figcaption>.      */

.mock {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

/* Light mock surfaces keep light-theme text colours even inside dark sections */
.mock .muted,
.mock--paper .muted {
  color: var(--ink-3);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(#fffdf9, #f7f0e6);
}

.mock__dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.mock__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper-3);
}

.mock__url {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__body {
  padding: 20px;
}

.mock__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Email: header rows then a letter body */
.mock__meta {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair-2);
  font-size: 13px;
  color: var(--ink-3);
}

.mock__meta b {
  font-weight: 500;
  color: var(--ink);
}

.mock__subject {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "opsz" 24;
}

/* Phone frame */
.mock--phone {
  border-radius: 44px;
  padding: 9px;
  background: #1c1612;
  border: 1px solid #3a2f27;
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mock__screen {
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  background: var(--card);
}

.mock__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  border-radius: 20px;
  background: #1c1612;
  z-index: 2;
}

/* Paper: memos, letters, cards */
.mock--paper {
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 10% 0%, #fffefb 0%, #fbf5ec 60%, #f5ecdf 100%);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Small parts */
.chip {
  --chip: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  background: color-mix(in srgb, var(--chip) 17%, var(--card));
  color: color-mix(in srgb, var(--chip) 62%, var(--ink));
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip);
}

.chip--plain::before {
  display: none;
}

.chip--sage { --chip: var(--sage); }
.chip--rose { --chip: var(--rose); }
.chip--gold { --chip: var(--gold); }
.chip--wine { --chip: var(--wine); }
.chip--ink { --chip: var(--ink-3); }

.avatar {
  --av: var(--rose);
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--av) 80%, white), var(--av));
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0;
}

.progress {
  --v: 50%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  overflow: hidden;
}

.progress > i {
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: inherit;
  background: var(--accent, var(--sage));
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--hair-2);
  font-size: 13px;
}

.kv > :first-child {
  color: var(--ink-3);
}

.kv > :last-child {
  font-weight: 500;
  text-align: right;
}

.tick {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--sage) 22%, var(--card));
  color: var(--moss);
}

.tick svg {
  width: 10px;
  height: 10px;
}

/* Figure captions under mockups */
.fig-cap {
  display: flex;
  gap: 0.75em;
  align-items: baseline;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fig-cap b {
  font-weight: 500;
  white-space: nowrap;
  color: var(--accent-deep, var(--ink-2));
}

.section--night .fig-cap,
.section--night-2 .fig-cap,
.section--wine .fig-cap {
  color: var(--cream-3);
}

.section--night .fig-cap b,
.section--night-2 .fig-cap b,
.section--wine .fig-cap b {
  color: var(--accent, var(--cream));
}

/* One line per section, near the mockups */
.illustrative {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.section--night .illustrative,
.section--night-2 .illustrative,
.section--wine .illustrative {
  color: var(--cream-3);
}

/* Botanical line ornaments that sections can drop in */
.ornament {
  pointer-events: none;
  color: var(--accent, var(--sage));
  opacity: 0.55;
}

.ornament path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reveal on scroll -------------------------------------------------------- */
/* Put data-reveal on a WRAPPER, never on an element that has its own
   transform. Stagger with style="--d: 120ms". Variants: fade, scale, left, right. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1s var(--ease-out) var(--d, 0ms),
    transform 1.2s var(--ease-out) var(--d, 0ms);
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="scale"] {
  transform: scale(0.96);
}

.js [data-reveal="left"] {
  transform: translate3d(-36px, 0, 0);
}

.js [data-reveal="right"] {
  transform: translate3d(36px, 0, 0);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Phase bar ---------------------------------------------------------------- */
/* Slides in under the nav once a phase's masthead has scrolled away, tinted
   in that phase's ground, so you always know where you are in the loop. */

.phase-bar {
  --pb-bg: var(--sage-wash);
  --pb-ink: var(--ink);
  --pb-accent: var(--moss);
  --pb-muted: var(--ink-3);
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h);
  z-index: 795;
  height: 52px;
  color: var(--pb-ink);
  background: color-mix(in srgb, var(--pb-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--pb-accent) 38%, transparent);
  box-shadow: 0 10px 24px -18px rgba(35, 28, 23, 0.45);
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}

.phase-bar.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    visibility 0s;
}

.phase-bar[data-phase="capture"] {
  --pb-bg: var(--rose-wash);
  --pb-accent: var(--rose-deep);
}

.phase-bar[data-phase="run"] {
  --pb-bg: var(--night-2);
  --pb-ink: var(--cream);
  --pb-accent: var(--gold);
  --pb-muted: var(--cream-3);
}

.phase-bar[data-phase="encore"] {
  --pb-bg: color-mix(in srgb, var(--blush) 55%, var(--paper));
  --pb-accent: var(--wine-deep);
}

.phase-bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.phase-bar__now {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.phase-bar__word {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-accent);
}

.phase-bar__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  font-variant-numeric: lining-nums;
  color: var(--pb-accent);
}

.phase-bar__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
}

.phase-bar__flow {
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-muted);
}

.phase-bar__steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.phase-bar__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--pb-muted);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.phase-bar__step i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.phase-bar__step:hover {
  color: var(--pb-ink);
}

.phase-bar__step[aria-current="step"] {
  color: var(--pb-ink);
  background: color-mix(in srgb, var(--pb-accent) 16%, transparent);
}

.phase-bar__step[aria-current="step"] i {
  opacity: 1;
  background: var(--pb-accent);
}

.phase-bar .phase-bar__step:focus-visible {
  outline-color: var(--pb-accent);
}

@media (max-width: 900px) {
  .phase-bar__flow {
    display: none;
  }
}

@media (max-width: 560px) {
  .phase-bar {
    height: 46px;
  }

  .phase-bar__word {
    display: none;
  }

  .phase-bar__num {
    font-size: 1.45rem;
  }

  .phase-bar__name {
    font-size: 1.1rem;
  }

  .phase-bar__step {
    padding: 0 7px;
    min-height: 34px;
  }

  .phase-bar__step span:not(.sr-only) {
    display: none;
  }

  .phase-bar__step i {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-bar,
  .phase-bar.is-shown {
    transform: none;
    transition: opacity var(--dur-1) linear, visibility 0s;
  }
}

@media (max-width: 560px) {
  .phase-bar__step {
    min-width: 34px;
    justify-content: center;
  }
}

/* A project by Second Brain -------------------------------------------------
   No pill, no fill. A filled purple badge next to the wordmark read as a
   sticker dropped on the page. This is just the mark and two words: Second
   Brain's artwork reduced to an alpha mask so it can be tinted, drawn in
   their purple as line art, with the words taking the nav's own colour so
   they sit at the same weight as everything else on the bar.

   Inlined as a data URI because the standalone build inlines this stylesheet
   at two directory depths, where a relative url() would resolve differently
   on the home page and the team page.
   Source: assets/img/secondbrain-mark.png, from the Second Brain landing site. */
:root {
  --sb-mark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAQAAAAkGDomAAAT/ElEQVR42rXaeXhV1bk/8A8JwmEIEAgcDIZICDEyGOAHFEqhCgW1ilKp+ohtnfVina5Drdpa1Gq1WqtVq9dfa6ut1rkOOIFaR0ABGSJTCIFADARCAgmEkEDW/YPNMYQExd6u/TzJPuvstfZ71ju/37dV8B8dN6p397+zQev/LH3e1f6AuQEOs+jrbtDqP3yCzY3XxUxR+Z87waGO0V1QbqbSQ14dt05DM+RNscmH//4J/tRRgu2q1EiVZYl7E99d6WjXqcZEp/iDgmbWp7ZwcueartBPDvzBSYdA3ATPyPO2B9yklf5uda6+fpH4vrOe+oF2OshNzMcSd2ktMrajWvXqvukJnmK4NO08ZaZjrVFsvCN9Kh//43mzoucybFUN0pUiRTWmqPGGuLIW988Sd5hK+d+EwDyXaLBKnc996Nd6+XniVblWmGyMaxo9H1O736epjtPG525rYf8U1U3WHJKSTHGK58yQpUiGe+xwHnjASg8q95CtjVi4Vwmu94Q10Y+odRR2OrzFN1TTMnlfJYOjnOFmM2QowkiH+1V0qg2CdOWW2WiPjISMTVGsXoNtiT3WaqWN1dK/oVEKB7seC2cG4aQwKgjCLeHnQRgQhKwgxIKQEYTR4dHE86PDXU12SAkDwrhwQRCE1ODQr5ZZfJLTfGGmqc73mCrlsi2SYimK0FWp9dINVp9Y87GPG8lWa5VaW2ppdMKViJum3ION9Lr84AfYEosvdZZ7/VJHmz3mKUuxTY1q55sABhqNUnW2H7A6ZpjWKiOiWN/IzU3xvSbkDTt0Fp8SngypQRgbzgypQUgPsZAaTgp3B+HFcHVIDcJD4fHo6b+GWJP1A0J2s/vGQkqYFkY2mX0pnNEyi5uf/mO4M/xPiAdhWBBSwivhtCBkhL832jwvpIWMkBuEh8OJ0YwgxIMgjAy5iSdzQyycHW6ISDzwbSkHk8HmWHy9IjMtV+a/DRcX94pqI623TSpucRp2KrfeCjlaaYeH3e1aKZF5ucivEr6kTq1hvitjP4OSmvAx1Ycqg0d7wwr3YahkZQr9yVy3OcHvDfS04EUUGOG34gqk+NzJhmhvVOJlnSRZG91X4m1vJN41xj1+ElnJ5sdkU1qWwRPDH4OQG3JCboJhwogwIQhDw9NhbBBEMnZD+Fu4MTwahPTwt/BRuC2xy7gwPnGfGf0/NmG81oenDmJ0TgiLwuIwoiUzc7RlTnSunylGtgu1kux5n+IK//QBKAG/cb0fuhqlrjDMrES0MlutQZFvbYh2fi/S2tUyzG4xbEgVt1m1DS2xuLOYdtYqxoMudYpUCy3FOK08A/7uv5FtqJctlBkxchYq5UUOT4LFOxMyV26wFH8ywcstCl0n6/3IaQnT1OR488JTYWRIC8KA8FCYFoS8BJvvDNcEQcgJvw+XRoyLhbMS5iYtMlFf7jYiweLcBOtbYuw+XU49mJmJhcfD1Gi7iQkXNjKcGoRh4fGQFQY0ejozpIfRIS08FzISc+lBGBemh4nRfrlBGBdGhZQg5ARBJMN7zc+D0U/+2mbmdvM8ZagVqE6Ej9W+h0ssVGRpxCwo9pBLlNshFxP8RrZSTHKqSyIt7Wu03rpra0QUYZck3naTY0xyzn5hbfxgZiZLqgdlR3HHHMlIwVLXSZNmaZO1gy30AXbrhB85O9p+kx02GClPtg5+4QJDjfYpyFQkBxnitgkaIrLjapF2YFDbWIsnWo2pssxAihjaqkZcmV1qZGswUbUnDVCpg1vlIGY3HlUQad4zCryAXAOda7g94kqMUYEUxdYZ40O8qMxKc0AZYonAYVQ024TAI8xHcWRs77YY5fIsdphaJYZ6AKfa4ElLkYyOSFaRiGTitilSBVboI8Me9drro8SHchTiXFONxULvJpKDxmY7xdjmCWyvnVRv6oFzBfch1TCLFeIjp4BbpMoz2HYvYLuxQmRQBsmXJZgrGRn6STLfJK3Nt0CdXLuV4xHvRYZpqCO80ij03yfzdzUvgx10VClNvpjj/H85ntLPn3G2q7yjE1hkmY2mORasM0Qr6xG3VYpVKmQb6lhbvavCSn/wmL+p8K6d2soRxwqkivnMuujd6S155NaNkqN+3sZSg6y1x2dYGYn2dktk2Y3BFqlwlJuVG6PeXHE7kGGqDB/YIKbaMsXIlWK91/XX3XtybFYcmezecsyNfMlQnyV8zkEJvNzrygy2RaqddkTs3JtMvow7E4l4tfY2WYRck42wVa5UF+inyitqcYZOGmyX5BOVPnYsCoyO4u1KHT0nRaYK9X7seE81S9toH39J4DSb3OMXBjnTeiPEGqWCbTHKUFMNioo+OXK0kaSVw+Vaq5PtPrHZGsN9aLRb/MnvDFOnEJSaYo+XErnxelSrxvFOs8dKOw4I/Se4yQz37CNwuEdk2GqeHAW2SjLEHJyjxnM4zRzlspGjvRN8xxJzMUu2esW4Xy8vy3OCPR4y30hsjnbfbpI9XlLmZDMaEZGmToUdkfI0TUdf9sa+ExykRjeneVQRMu2yxUBzMM4Wz8nS3b+851kb7LTOc5bYqUER8vVRJiZVKyy22DC1HjHPEwnJ6uZ1XxjvHTMibc1Qp0wXy9xm5wEuAOaa+6UM9rPVMY7UwQBLHeU4g2R6Talz5KFIa/XmWhOJ+QorrHSKw30sWQ/pkrXXPhKLKn0MVOOwxMsaLJePLEVaG6PCUqQoVKJWZmSma5srLiVPh/4G+4f35RtiuoG2WICLdTHPNoOVyjPIlchRgj5aWafUYH100tdyXRyutx36GaIn3rLKPFsi+1DiaIXSddXPSutsdorve1+KGqIkf7exqg6MEltH1jBmkWxcaJnpiSLGwzq7Q5UMj7lJlkKFJqo1wBpxbSxxnEkyfUuRywzRxxIL9bFJrh0KTNRbhQq0kq2wUUGpn+6JbCSuTEytDzDMUC839sh7T/BKH0vW3hVWuSPyrezwjMsMs1qOJO9EGrnayW7XTZkcWXo51ZGKFTheX2sUydZBrcsEO91miqX+oUyJTYkUaoIkr3k78Z6jlUZ3XOpiC6zen8DxBrhVqf7K/FNt4mF43rEm+bYfOsbGKMqNy7JasY162OMLO7yvRpH13tJTR69bZ4MytdLVmWW7bY50vWzzpUk3X4VpJlmA3exXtNypKIraG5XfblTlcdWR2850vbf2C8lHikvXy3CfuFnc8Tborodu8m10hGzLcZietuuowNFi1mutwEZHmikuy0VyBf9KlDtfl+bn3m2mFNeMDHa1TDUqopgiuEiyD3TS10bJCs2Vo0Ce6z1spWCzPj5TJU8nO+zRRnsjDVJgpT5K7PZt5/nA+bqhzDZxO8QSoS4zdbWkic6mNOePk9AKDxqg1lgZavzUY85UrsjPTLJIeRRWLTZVT/eYINUW6TrZ5nATnG6E7n5guG9pp63DtNJGjVrlUTBSa7Z2tjYCH+5zs3KVUjHaI34qo/lwoTV2aOttlU5yjQtVG+xFw13tXrf6UJbWCrTFIH0skK1SeyWO0UYbW0yRp9JLNkmx2SaF6OxFL+ohLfLpvGuRLeYaZv5+ddhKXGmQ4VY1KjHtG+dIa40Sfd2BZPdJwnbkG4t1UantBpPdYZHZllljtd7a2KxGtYFm2+oj9Z6UoVgPnW032yrbdTfMWpmKjTQnSh/mR4z8sqaQqVaQpF2T7KjKXR7fq8VHG+oV6Wos1sVuG9FgooW2qEOWJDHLLVCjRh9LrdPFeJfoZLkiVZaql6yNUu194SNH6a1OkS7SLZCmvY0YpxB1hrpPZ4X624ht6lX7V8Ksi5xvmSX7WJznc3RSiiLjjHCnpTb5kVuNUKFQkbfEjTJHrd1KpanSUaZ8a3V3mF1qTfMtf/U3vfT3gt4y9Lbcd02W7yHZkiI7ShvJ6lVHbjPNjP0CiL3j/sZ28HTv62WB8x2mq9bO94Yay12hg5cj3T5ctVUm6qyDZMP1sFqhdTo7Ui+FGgzVXb7t6h3hGLsFbY0xST8Z1lpki1ikBiWetThicyzKX/YlSw1NVaW1AfbYqgElujjPNOfoolyZR51ugLVKrbDMESrN9KhR7pPvUyebo7NWrpJurdke9YJNulnjZSept0aVmA5qtY5UZU8U/q5PoC9bLFOL3xruOL5MlRoT2MFuVdpiJn5sgKXSpSn3rGdNkyvb96WYbYZOdtljq0+laG+jrb5lDapU+YEBplvm/4nrpKv38IIsw7xiu8EWyZaiOspfypzmZltcY7dq8/Y7t/2sY/L0tsbZY4tR1titmxO8pVq6JDWY700zrJJqgq1etscbthlik+426yXDHCU+VGmMvlbY5k2XulGtCmsx2xdet8VGU9ziGM/pJi5LsTGG2OpedVgW1cz2pZ8pX4JiydMrjTdXTxcqscZnvuc73lOhRoYqxGXr7VFLXKWt5/SUL9mZxmqwQaG+Giy02ypzzDHEj9VLtdwKbWxBZsTSNBN84Z92qFRmtwXetSRSlNh+/p86GaoMU7pXSSZYgx3mK8csV2mjldEu0KCD1Tr4BBukOEt3u+yR72Jny7fEbnmGWmuHXtJtR72V3rNUgw6K0SuqxmS62UdRgWOMVahQHKWb7Q6AEav8xnUGej0JlXJ8bnkCL/pMrUW6qFNmkRT1GGyYF/xMju/bidkeMFtXfRxnkh+IucZtxnvDqz73kVrJepooVbeorPIhKo02XrnX5Eb4Xqm0FjG8LtL3nmC9Yy33hZNc5EX0191sC72ut/u1s8iRPne1VDO86lW91eA1rRTrraduZlrjJN19qI2+ulhincP0cqTu+mhvlJcQ18sia0C5ksjAjHCVId4/gMBFdnpecfJ0Shyrp9V2qVapwgA58nXRQ63+XrVWuYtN8VqUGXeWYa62xqm2WrUUH1lohflWmqVUrs762K1Wrksca7BPpehszX6+oioRovbSQ+YBJqbabMX7Qv67PaC9WyNh7q51Ioi8HFzmdIvMNdgicedZbaddFlqNTXZpp8x8hbYaZY58BRgkpr/eauQaZbMN4trY4zAVBitLlAFqJWmw9eCVhXLvOD6yQOXa2h1VnVIdpYMztfF3Q5Urx1mmecVLyqMceYFzoz3SlGsnboOYWvkGqZMsSYMq9VGJbe9o3Jtwt3PUebGlZoF9iftbhhimvbZmmec8qUrl+pkOtvjEn+UYFz25wpM+18HRVpukh+vVRnDiTqyXKUWSAoP185kUfa2wUYMK6U3C+32sfLBZKLwJgesl2S3mOpvMdIzbXWqF9yyMku8C2/2XR+R508f6KVaMoXpHdmtvETKms2Jn6KybGmt87A1jrNIVbSPi0iQrw4neaBJN1x4cTPxduCCcGM4PqSEWhF+H3zcpZ48LL4SsBIhzV5gShFiYHIS/hpOjZ/4c/hCEjDArzAtTE8BkPKSEvAScs/c6I6wNv2y2bH5z+FHzRfQSA/3Qe+L64xdq/NnkqFQ0zljvWud0UI+uBqLWQula2xix6AJXoK9UqQkUuVSZ6kRwlRLNPut5y5o9sfL9jfaXTRVj/cC9evvYuCjbOt0EQVDnaIWmOdm1bjBHXF0ETqcq9x2nRn0M+0LNrSbabbES5VHEvFc9sl3g4yaxX+xg/QpNgZz7wuAwKAxKIBpCRhgThOxwehCE08JL4e/h5pDXCGxJDb8Pt0ftAD8PuSEtahTYi5JkBWFABPAI2eGt8OsgCFkhKwgTw8UtALQtADlTw/0hJ9wZ0qOuhL1/UxMY8e3hxpAWfhOeD1MarXolXBcE4cbwbkg/AP29KvwlnJn4lJP46cKoMCN8Es7aD0b6CiDnKTHf1s1kVMmQrtQAHSPnNFK215W7wW/90KUJaLVT5G3vcLnSyC484dpE8bOz7gl2FjRql5pjnjWWJ7TYV2nxXij/6TA0pIe0IPwqPNfoNNLCs2FyIyTtr+H+cGKYGp4NV4d792sm2GsRzo0wupyQFVLDoK/Z45H61S0BJ4S/REjvhHB5RFosXBmeCadFUincGM4IwrXhL+FP4SdhXAJM3B8aTGnEtvQmTIy3QOC14ZGvakt500b/ZbwnFZgl0w7lbtLRM+Ylqst9JMl0T7RivF1SVDvbIO+YJUc/r0Uh/L6mk33+o79lasUd74lm2bm0UdHzoF0f14V/hPODMDi8GuGWQkZICfFwaULk957KsJAT7g/CmDAvFIQ/tnAyZybOcNyhNvY03zdzt/uNkq3YWwlYOkm1MmOMkCqOVKd4WFfbtEeFcjWRwd6Hh+4rFWW7zC+j+/pGxrrxXYsjeXrz8yWO0de/FCUit28ba6EXVNihDJvV+64l+uppps3mKPYgUtSpNVaeXRGDK6R7TyEyXWSUtxrlHk2zkUPq3Xo8jA6x8EK4MAixcEMjZchohLA/EX51wMoJ4bHwTLj1gPlrwtPhmYO18XxdFu8dj7hcf0+pQK2nnJMAnNfjRANlG2BnM/arkw6q9DGiSQfmPNuUNZeef7Mm2zmS/NRMzzSqBpTJNdnnZtjiUwxSEFUMGo8vrNfdYquadMd8IF/qAWW2uB6qomDiG3Rg3uQIW+0010xZau10lyIP4QzJHvU7s7x5QCNttl0RISniibJRS2OEixzuCc9+kzbl28WdYJjzhKhX9WJpqvEdC4zQoRF5U81XoJJGJD2js1O/oglvqyyd9T/0BsfG1+TweDg/8gGx6O/Q8HSjdrPB4bX9nP/e68Hw9NfY/fLwu+Yd4qH0Uee6TL3FyhXroaO+jvHEfpX6fYBrlqL/q7b1Q230PtkIXbV2hErzvywz7jceszZKYf8vxjfpKw2xMOoggeapB41epkQdrf92D+vBRu1BbdnLB12bfmDzzsHG/wLaEC4Kvf0wOQAAAABJRU5ErkJggg==");
}

.powered {
  --sb: #8b5cf6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}

.powered__k {
  opacity: 0.5;
}

.powered__mark {
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--sb);
  opacity: 0.88;
  -webkit-mask: var(--sb-mark) center / contain no-repeat;
  mask: var(--sb-mark) center / contain no-repeat;
}

/* Enough purple in the name to read as their brand, enough of the nav's own
   colour to keep contrast on both the dark hero and the paper bar. */
.powered__name {
  color: color-mix(in srgb, var(--sb) 38%, currentColor);
  opacity: 0.85;
}

/* Fading opacity and colour carries no movement, so it is safe for a visitor
   who asked for less motion and runs for everyone. Only travel waits for
   no-preference below. Without this split the whole hover snapped on, which
   read as nothing happening at all. */
.powered__mark,
.powered__name,
.powered__k,
.powered__out {
  transition:
    opacity 180ms var(--ease-out, ease),
    color 180ms var(--ease-out, ease),
    filter 180ms var(--ease-out, ease);
}

@media (prefers-reduced-motion: no-preference) {
  .powered__mark,
  .powered__out {
    transition:
      opacity 180ms var(--ease-out, ease),
      color 180ms var(--ease-out, ease),
      filter 180ms var(--ease-out, ease),
      transform 260ms var(--ease-out, ease);
  }

  .powered__name::after {
    transition: transform 260ms var(--ease-out, ease);
  }
}


/* Hovering has to say "this is a link, and it leaves the site" without the
   lockup changing size, because the size is fixed. So every cue is light and
   motion: the same underline wipe the nav tabs use, the mark lighting up and
   lifting, and an outbound arrow that was taking up no room before. */
.powered__name {
  position: relative;
}

.powered__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
}

.powered__out {
  width: 9px;
  height: 9px;
  flex: none;
  margin-left: -2px;
  color: var(--sb);
  opacity: 0;
  transform: translate(-3px, 3px);
}

.powered:hover .powered__mark,
.powered:focus-visible .powered__mark {
  opacity: 1;
  transform: scale(1.09);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sb) 75%, transparent));
}

.powered:hover .powered__name,
.powered:hover .powered__k,
.powered:focus-visible .powered__name,
.powered:focus-visible .powered__k {
  opacity: 1;
}

.powered:hover .powered__name::after,
.powered:focus-visible .powered__name::after {
  transform: scaleX(1);
}

.powered:hover .powered__out,
.powered:focus-visible .powered__out {
  opacity: 0.95;
  transform: translate(0, 0);
}
/* Reduced motion: the same three cues, arriving by fade instead of travel. */
@media (prefers-reduced-motion: reduce) {
  .powered__name::after {
    opacity: 0;
    transform: scaleX(1);
    transition: opacity 180ms var(--ease-out, ease);
  }

  .powered:hover .powered__name::after,
  .powered:focus-visible .powered__name::after {
    opacity: 0.55;
  }

  .powered__mark,
  .powered__out,
  .powered:hover .powered__mark,
  .powered:focus-visible .powered__mark,
  .powered:hover .powered__out,
  .powered:focus-visible .powered__out {
    transform: none;
  }
}

/* The nav runs out of room before the links do, so the lockup drops to the
   mark alone, then out entirely. */
@media (max-width: 1180px) {
  .powered__k,
  .powered__name,
  .powered__out {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .powered {
    display: none;
  }
}

/* ---- src/css/sections/hero.css ---- */
/* ==========================================================================
   Hero — a candlelit reception, shot wide open, with the statement over it.
   The scene is two pre-blurred WebP plates (the drawn reception, baked once,
   no live SVG filters) plus a small set of HTML glows that animate
   transform/opacity only: 9 flickers, 3 halos, 8 drifting bokeh.
   ========================================================================== */

.hero {
  --hero-vx: 64cqw; /* where the vanishing point sits across the frame */
  --hero-vy: 46cqh;
  display: flex;
  flex-direction: column;
  min-height: calc(min(100vh, 980px) / var(--zoom, 1));
  min-height: calc(min(100svh, 980px) / var(--zoom, 1));
  padding-block: 0;
  overflow: hidden;
  background: var(--night);
}

/* Scene ------------------------------------------------------------------- */

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  animation: hero-scene-in 2.2s var(--ease-soft) both;
}

.hero-art {
  position: absolute;
  inset: -28px; /* bleed for the pointer parallax */
  container-type: size;
  transition: opacity 1.4s var(--ease-soft);
}

.hero-stage {
  /* fallback for browsers without container units: fill the frame */
  inset: 0;
  width: 100%;
  height: 100%;
  --sw: max(100cqw, 160cqh);
  --sh: max(100cqh, 62.5cqw);
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  left: clamp(100cqw - var(--sw), var(--hero-vx) - 0.675 * var(--sw), 0px);
  top: clamp(100cqh - var(--sh), var(--hero-vy) - 0.4 * var(--sh), 0px);
  /* Each depth is its own compositor layer: parallax moves it, never repaints it */
  will-change: transform;
  contain: layout paint;
  transform: translate3d(0, 0, 0);
}

.hero-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  user-select: none;
}

.hero-flames {
  position: absolute;
  inset: 0;
}

/* Candle flames: a halo that breathes, a core that flickers */
.hero-flame {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--candle) 46%, transparent),
    color-mix(in srgb, var(--candle) 16%, transparent) 42%,
    color-mix(in srgb, var(--candle) 5%, transparent) 70%,
    transparent
  );
}

.hero-flame--breathe {
  animation: hero-halo var(--fd) ease-in-out var(--fl) infinite alternate;
}

.hero-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9%;
  height: 17%;
  translate: -50% -62%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 68%,
    color-mix(in srgb, var(--candle) 18%, white) 0 34%,
    var(--candle) 66%,
    transparent 100%
  );
  transform-origin: 50% 100%;
}

/* Only the nearest tapers flicker; distant flames are too small to read it */
.hero-flame--lit::before {
  animation: hero-flick calc(var(--fd) * 0.55) ease-in-out var(--fl) infinite;
}

.hero-flame--votive {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--candle) 44%, transparent),
    color-mix(in srgb, var(--gold) 16%, transparent) 50%,
    transparent
  );
}

.hero-flame--votive::before {
  width: 13%;
  height: 16%;
}

/* Out-of-focus lights: soft discs, some with the brighter rim of real bokeh */
.hero-bokeh {
  --b: var(--candle);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: var(--o);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--b) 62%, transparent) 0%,
    color-mix(in srgb, var(--b) 52%, transparent) 72%,
    color-mix(in srgb, var(--b) 30%, transparent) 90%,
    transparent 100%
  );
}

/* A handful of the largest discs drift; the rest hold still */
.hero-bokeh--drift {
  animation: hero-drift var(--bd) ease-in-out var(--bl) infinite alternate;
}

.hero-bokeh--rim {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--b) 68%, transparent) 0%,
    color-mix(in srgb, var(--b) 70%, transparent) 62%,
    color-mix(in srgb, var(--b) 96%, transparent) 86%,
    color-mix(in srgb, var(--b) 50%, transparent) 94%,
    transparent 100%
  );
}

.hero-bokeh--hot {
  --b: color-mix(in srgb, var(--candle) 86%, var(--gold));
}

.hero-bokeh--cream {
  --b: var(--cream);
}

.hero-bokeh--glint {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--cream) 30%, white) 0%,
    color-mix(in srgb, var(--cream) 70%, transparent) 45%,
    color-mix(in srgb, var(--candle) 25%, transparent) 80%,
    transparent 100%
  );
}

.hero-bokeh--rose {
  --b: color-mix(in srgb, var(--rose) 70%, var(--candle));
}

/* Real-photo hook: style="--hero-photo: url('…')" on the section.
   hero.js reads the property and sets the image here, resolved against the
   page (a relative url() inside a custom property would otherwise resolve
   against this stylesheet and miss). Same blur, grade and shading as the
   drawn scene; the scene fades out and stops animating. */
.hero-photo {
  position: absolute;
  inset: -40px;
  background: 68% 50% / cover no-repeat;
  filter: blur(5px) saturate(1.08) sepia(0.16) brightness(0.8);
}

.js .hero-photo {
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
}

.hero--photo .hero-photo {
  opacity: 1;
}

.hero--photo .hero-art {
  opacity: 0;
}

.hero--photo-on .hero-art {
  visibility: hidden;
}

/* Shading: darkest where the words sit, a vignette like a fast lens */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 78%, transparent) 0%, transparent 17%),
    linear-gradient(0deg, var(--night) 0%, color-mix(in srgb, var(--night) 72%, transparent) 10%, transparent 30%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--night) 94%, transparent) 0%,
      color-mix(in srgb, var(--night) 88%, transparent) 26%,
      color-mix(in srgb, var(--night) 64%, transparent) 44%,
      color-mix(in srgb, var(--night) 22%, transparent) 60%,
      transparent 74%
    ),
    radial-gradient(130% 110% at 70% 46%, transparent 42%, color-mix(in srgb, var(--night) 62%, transparent) 100%);
}

/* Content ----------------------------------------------------------------- */

.hero-inner {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  column-gap: clamp(40px, 6vw, 112px);
  align-content: center;
  align-items: end;
  padding-top: calc(var(--nav-h) + clamp(20px, 3.8vh, 64px));
  padding-bottom: clamp(20px, 3vh, 40px);
}

.hero .hero-eyebrow {
  flex-wrap: wrap;
  row-gap: 0.4em;
  --eyebrow: color-mix(in srgb, var(--cream) 72%, transparent);
}

.hero-eyebrow-sep {
  opacity: 0.6;
}

.hero-title-wrap {
  margin-top: clamp(18px, 2.6vh, 28px);
}

.hero-title {
  font-size: min(clamp(2.75rem, 1.2rem + 6vw, 6.75rem), 10.8svh);
  line-height: 0.98;
  max-width: 11.2em;
  color: var(--cream);
  text-shadow: 0 2px 40px color-mix(in srgb, var(--night) 55%, transparent);
}

.hero-title-line {
  display: block;
}

.hero-title em {
  padding-right: 0.04em;
}

.hero-sub {
  display: grid;
  gap: 14px;
  max-width: 35rem;
  margin-top: clamp(18px, 2.6vh, 30px);
}

.hero-follow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.28rem, 1.02rem + 0.85vw, 1.72rem);
  line-height: 1.32;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  letter-spacing: -0.005em;
  color: var(--cream);
  max-width: 34ch;
}

.hero .hero-lede {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: clamp(20px, 2.8vh, 32px);
}

.hero-cta {
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--candle) 55%, transparent);
}

.hero-cta:hover {
  box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--candle) 70%, transparent);
}

.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
}

.hero-more span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--dur-2) var(--ease-out);
}

.hero-more svg {
  width: 18px;
  height: 18px;
  color: var(--candle);
  transition: transform var(--dur-3) var(--ease-out);
}

.hero-more:hover span {
  background-size: 0% 1px;
  background-position: 100% 100%;
}

.hero-more:hover svg {
  transform: rotate(-200deg);
}

/* For the studio already at capacity: one quiet line, straight to #better */
.hero-full {
  margin-top: clamp(14px, 2.2vh, 22px);
  text-wrap: pretty;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

.hero-full-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--candle);
}

.hero-full a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cream) 36%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.hero-full a:hover {
  text-decoration-color: var(--candle);
}

.hero-full-end {
  white-space: nowrap;
}

.hero-full .btn__arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--candle);
}

/* Research cards ---------------------------------------------------------- */

.hero-cards {
  position: relative;
  z-index: 1;
  padding-bottom: 6px;
}

.hero-cards-par {
  position: relative;
  padding-top: 156px;
}

.hero-card {
  position: relative;
  border-radius: var(--r-lg);
  color: var(--cream);
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--night-3) 54%, transparent),
    color-mix(in srgb, var(--night) 78%, transparent) 70%
  );
  box-shadow:
    var(--shadow-night),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 12%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

/* Specular edge: bright at the top left, gone by the bottom right */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--candle) 48%, transparent),
    color-mix(in srgb, var(--cream) 12%, transparent) 38%,
    color-mix(in srgb, var(--cream) 6%, transparent) 70%,
    color-mix(in srgb, var(--candle) 22%, transparent)
  );
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0);
  pointer-events: none;
}

/* The cards settle once after they arrive, then hold still (a moving
   backdrop-filter would re-blur every frame) */
.hero-card--front {
  padding: 24px 28px 24px;
  animation: hero-settle 2.8s var(--ease-soft) 0.5s both;
}

.hero-card--back {
  position: absolute;
  top: 0;
  right: -22px;
  width: 244px;
  padding: 18px 22px 56px;
  rotate: 4deg;
  animation: hero-settle-back 3.4s var(--ease-soft) 0.5s both;
}

.hero-card-big {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 3.1rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: color-mix(in srgb, var(--rose) 62%, var(--cream));
}

.hero-card-note {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--cream) 84%, transparent);
}

.hero-card-src {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
}

.hero-card-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
}

.hero-card-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--candle);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--candle) 20%, transparent);
}

.hero-card-q {
  position: relative;
  margin: 14px 0 0 22px;
  padding: 12px 16px 13px;
  border-radius: 18px 18px 5px 18px;
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 12%, transparent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.22rem;
  line-height: 1.3;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--cream);
  text-wrap: balance;
}

.hero-card-stat {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.8;
}

.hero-card-seven {
  font-size: 5.6rem;
  font-style: italic;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.hero-card-of {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
  color: var(--cream);
}

.hero-card-text {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--cream) 86%, transparent);
}

.hero-card-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-dark);
}

.hero-card-group {
  --dot: var(--gold);
  display: grid;
  gap: 8px;
}

.hero-card-group--wedy {
  --dot: var(--rose);
}

.hero-card-dots {
  display: flex;
  gap: 5px;
}

.hero-card-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dot) 45%, transparent);
}

.hero-card-group--none .hero-card-dots i {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 60%, transparent);
}

.hero-card-key {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.hero-card-key b {
  margin-left: 4px;
  font-weight: 500;
  color: var(--cream);
}

.hero-card-link {
  margin-top: 20px;
  font-size: var(--fs-small);
  color: var(--cream);
}

.hero-card-link .btn__arrow {
  color: var(--candle);
  transition: transform var(--dur-2) var(--ease-out);
}

.hero-card-link:hover .btn__arrow {
  transform: translateX(4px);
}

/* Foot: the loop in miniature, and a scroll cue -------------------------- */

.hero-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 16px;
  padding-bottom: 20px;
}

.hero-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, var(--hair-dark), color-mix(in srgb, var(--cream) 6%, transparent));
}

/* The loop: four phases, each one feeding the next, the last feeding the
   first. A light passes along the connectors in order, then turns back. */
.hero-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  color: var(--cream);
  text-decoration: none;
}

.hero-loop-label {
  display: grid;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 66%, transparent);
}

.hero-loop-sub {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--cream);
}

.hero-loop-phases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-loop-phase {
  display: flex;
  align-items: center;
}

.hero-loop-phase[data-phase="attract"] { --to: var(--rose); }
.hero-loop-phase[data-phase="capture"] { --to: var(--gold); }
.hero-loop-phase[data-phase="run"] { --to: var(--wine); }
.hero-loop-phase[data-phase="encore"] { --to: var(--sage); }

.hero-loop-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out);
}

/* The node brightens as the light reaches it */
.hero-loop-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 85%, var(--cream)),
    0 0 18px -2px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0;
  animation: hero-loop-lit 6s var(--ease-in-out) calc(var(--i) * 1.5s) infinite;
  pointer-events: none;
}

.hero-loop-node i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-loop-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--accent) 55%, var(--cream));
}

.hero-loop-feed {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 66px;
  padding: 0 9px;
}

.hero-loop-feed-word {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

.hero-loop-line {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--to));
}

.hero-loop-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--candle), transparent);
  transform: translateX(-100%);
  animation: hero-loop-pass 6s var(--ease-in-out) calc(var(--i) * 1.5s + 0.4s) infinite;
}

/* arrowhead at the end of each connector */
.hero-loop-feed:not(.hero-loop-feed--back)::after {
  content: "";
  align-self: flex-end;
  width: 6px;
  height: 6px;
  margin-top: -8.5px;
  border-top: 1px solid var(--to);
  border-right: 1px solid var(--to);
  rotate: 45deg;
  translate: -1px 0;
}

.hero-loop-feed--back {
  width: auto;
  padding-right: 0;
}

.hero-loop-back {
  width: 30px;
  height: 15px;
  color: var(--sage);
  opacity: 0.55;
  animation: hero-loop-return 6s var(--ease-in-out) 4.9s infinite;
}

.hero-loop:hover .hero-loop-node {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.hero-loop:focus-visible {
  outline-offset: 6px;
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}

.hero-scroll i {
  position: relative;
  width: 48px;
  height: 1px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 20%, transparent);
}

.hero-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--candle), transparent);
  transform: translateX(-100%);
  animation: hero-scroll 2.8s var(--ease-in-out) infinite;
}

/* Motion ------------------------------------------------------------------ */

@keyframes hero-scene-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-halo {
  0% { opacity: 0.78; transform: scale(0.95); }
  30% { opacity: 1; transform: scale(1.03); }
  55% { opacity: 0.86; transform: scale(0.98); }
  80% { opacity: 0.97; transform: scale(1.02); }
  100% { opacity: 0.82; transform: scale(0.97); }
}

@keyframes hero-flick {
  0%, 100% { opacity: 0.94; transform: scale(1, 1) skewX(0deg); }
  22% { opacity: 1; transform: scale(0.93, 1.1) skewX(-3deg); }
  46% { opacity: 0.82; transform: scale(1.05, 0.93) skewX(2deg); }
  71% { opacity: 1; transform: scale(0.97, 1.05) skewX(-1deg); }
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx), var(--dy), 0); }
}

@keyframes hero-settle {
  from { transform: translate3d(0, 14px, 0); }
  to { transform: none; }
}

@keyframes hero-settle-back {
  from { transform: translate3d(8px, -10px, 0); }
  to { transform: none; }
}

@keyframes hero-loop-pass {
  0% { transform: translateX(-100%); }
  25%, 100% { transform: translateX(100%); }
}

@keyframes hero-loop-return {
  0%, 100% { opacity: 0.5; transform: none; }
  10% { opacity: 1; transform: translateX(2px); }
  25% { opacity: 0.5; transform: none; }
}

@keyframes hero-loop-lit {
  0%, 30%, 100% { opacity: 0; }
  8% { opacity: 1; }
}

@keyframes hero-scroll {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Paused offscreen, or when a real photo has replaced the drawn scene */
.hero.is-paused .hero-flame,
.hero.is-paused .hero-flame::before,
.hero.is-paused .hero-bokeh,
.hero.is-paused .hero-card,
.hero.is-paused .hero-scroll i::after,
.hero.is-paused .hero-loop-line::after,
.hero.is-paused .hero-loop-back,
.hero.is-paused .hero-loop-node::after,
.hero--photo .hero-flame,
.hero--photo .hero-flame::before,
.hero--photo .hero-bokeh {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene {
    animation-duration: 200ms;
  }

  .hero-flame,
  .hero-flame::before,
  .hero-bokeh,
  .hero-card,
  .hero-scroll i::after,
  .hero-loop-line::after,
  .hero-loop-back,
  .hero-loop-node::after {
    animation: none;
  }

  .hero-loop-line::after {
    display: none;
  }

  .hero-more svg {
    transition: none;
  }

  .hero-more:hover svg {
    transform: none;
  }

  .hero-loop-back {
    opacity: 0.8;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-card {
    background: color-mix(in srgb, var(--night-2) 94%, transparent);
  }
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 316px;
    column-gap: 40px;
  }

  .hero-card--front {
    padding: 22px 22px 22px;
  }

  .hero-card--back {
    right: -12px;
    width: 236px;
  }

  .hero-card-q {
    margin-left: 12px;
    font-size: 1.12rem;
  }

  .hero-card-seven {
    font-size: 4.8rem;
  }

  .hero-card-viz {
    gap: 12px;
  }

  .hero-card-key {
    letter-spacing: 0.02em;
  }

  .hero-card-label {
    letter-spacing: 0.08em;
  }

  .hero-card-src {
    letter-spacing: 0.05em;
  }

  .hero .hero-lede {
    max-width: 29rem;
  }

  .hero-shade {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--night) 78%, transparent) 0%, transparent 17%),
      linear-gradient(0deg, var(--night) 0%, color-mix(in srgb, var(--night) 72%, transparent) 10%, transparent 30%),
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--night) 94%, transparent) 0%,
        color-mix(in srgb, var(--night) 90%, transparent) 34%,
        color-mix(in srgb, var(--night) 72%, transparent) 50%,
        color-mix(in srgb, var(--night) 30%, transparent) 62%,
        transparent 76%
      ),
      radial-gradient(130% 110% at 70% 46%, transparent 42%, color-mix(in srgb, var(--night) 62%, transparent) 100%);
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-cards {
    justify-self: end;
    width: min(100%, 380px);
    margin-top: 40px;
  }

  /* One column: the words run the full width, so the shade runs top-down */
  .hero-shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--night) 92%, transparent) 0%,
        color-mix(in srgb, var(--night) 86%, transparent) 30%,
        color-mix(in srgb, var(--night) 82%, transparent) 47%,
        color-mix(in srgb, var(--night) 45%, transparent) 52%,
        color-mix(in srgb, var(--night) 8%, transparent) 58%,
        color-mix(in srgb, var(--night) 16%, transparent) 76%,
        color-mix(in srgb, var(--night) 70%, transparent) 86%,
        var(--night) 93%
      ),
      radial-gradient(140% 90% at 60% 62%, transparent 40%, color-mix(in srgb, var(--night) 60%, transparent) 100%);
  }
}

@media (max-width: 760px) {
  .hero {
    --hero-vx: 76cqw;
    --hero-vy: 46cqh;
  }

  /* On a tall phone the scene keeps a lens-like scale and sits behind the
     call to action and the cards; the shade dissolves its edges. */
  .hero-stage {
    --sw: 1500px;
    --sh: 937.5px;
    top: calc(var(--hero-vy) - 0.4 * var(--sh));
  }

  .hero-shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--night) 92%, transparent) 0%,
        color-mix(in srgb, var(--night) 88%, transparent) 24%,
        color-mix(in srgb, var(--night) 80%, transparent) 38%,
        color-mix(in srgb, var(--night) 60%, transparent) 47%,
        color-mix(in srgb, var(--night) 10%, transparent) 55%,
        color-mix(in srgb, var(--night) 16%, transparent) 72%,
        color-mix(in srgb, var(--night) 70%, transparent) 81%,
        var(--night) 87%
      ),
      radial-gradient(140% 90% at 60% 62%, transparent 40%, color-mix(in srgb, var(--night) 60%, transparent) 100%);
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 28px;
  }

  .hero-eyebrow::before {
    display: none;
  }

  .hero-eyebrow-sep {
    display: none;
  }

  .hero-eyebrow span {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .hero-more {
    align-self: flex-start;
  }

  .hero-cards {
    justify-self: stretch;
    width: auto;
    margin-top: 44px;
  }

  .hero-cards-par {
    padding-top: 160px;
  }

  .hero-card-viz {
    gap: 12px 16px;
  }

  .hero-card-key {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  /* Two by two: 01 feeds 02, then 03 feeds 04, which turns back to 01 */
  .hero-loop {
    width: 100%;
  }

  .hero-loop-phases {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px 0;
  }

  .hero-loop-node {
    gap: 7px;
    padding: 7px 12px 7px 10px;
    font-size: 0.875rem;
  }

  .hero-loop-feed {
    width: 50px;
    padding: 0 7px;
  }

  .hero-loop-feed--back {
    width: auto;
  }

  .hero-card--front {
    margin-right: 14px;
    padding: 22px 22px 22px;
  }

  .hero-card--back {
    left: auto;
    right: 0;
    width: min(72%, 244px);
    rotate: 3.5deg;
  }

  .hero-card-label {
    letter-spacing: 0.08em;
  }

  .hero-card-src {
    letter-spacing: 0.05em;
  }

  .hero-card-seven {
    font-size: 5rem;
  }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-scroll {
    display: none;
  }
}

@media (max-width: 380px) {
  .hero-card-viz {
    gap: 12px;
  }

  .hero-card-key {
    letter-spacing: 0.02em;
  }

  .hero-loop-node {
    padding-inline: 9px 10px;
    font-size: 0.8125rem;
  }

  .hero-loop-feed {
    width: 42px;
    padding: 0 5px;
  }

  .hero-loop-feed--back {
    width: auto;
  }
}

/* Phones: lift the room into the top third, chandelier and table glow behind
   the headline, and thin the scrim there. The words keep a darker band. */
@media (max-width: 560px) {
  .hero {
    --hero-vx: 70cqw;
    --hero-vy: 21cqh;
  }

  /* the plate ends above the cards: dissolve its lower edge into the night */
  .hero-stage {
    --sw: 1400px;
    --sh: 875px;
    -webkit-mask-image: linear-gradient(180deg, var(--ink) 58%, transparent 96%);
    mask-image: linear-gradient(180deg, var(--ink) 58%, transparent 96%);
  }

  .hero-shade {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--night) 80%, transparent) 0%,
        color-mix(in srgb, var(--night) 60%, transparent) 9%,
        color-mix(in srgb, var(--night) 48%, transparent) 16%,
        color-mix(in srgb, var(--night) 72%, transparent) 23%,
        color-mix(in srgb, var(--night) 74%, transparent) 33%,
        color-mix(in srgb, var(--night) 70%, transparent) 44%,
        color-mix(in srgb, var(--night) 40%, transparent) 52%,
        color-mix(in srgb, var(--night) 30%, transparent) 60%,
        color-mix(in srgb, var(--night) 72%, transparent) 76%,
        var(--night) 86%
      ),
      radial-gradient(150% 70% at 60% 28%, transparent 45%, color-mix(in srgb, var(--night) 55%, transparent) 100%);
  }
}

/* Comfortable 44px target for the secondary link on touch screens */
@media (pointer: coarse) {
  .hero-more {
    min-height: 44px;
  }
}

/* ---- src/css/sections/proof.css ---- */
/* ==========================================================================
   Proof: the owner-confirmed results, right under the hero.
   A candlelit strip that carries on from the hero's night.
   ========================================================================== */

.proof {
  padding-block: clamp(56px, 7vw, 104px);
  background:
    radial-gradient(60% 120% at 82% 0%, color-mix(in srgb, var(--candle) 9%, transparent), transparent 70%),
    var(--night-2);
  border-top: 1px solid color-mix(in srgb, var(--candle) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--candle) 14%, transparent);
}

.proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(28px, 5vw, 96px);
}

.proof__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--cream);
}

.proof__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.proof__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof__stat {
  display: grid;
  gap: 14px;
  padding: 8px clamp(20px, 3vw, 48px);
  border-left: 1px solid var(--hair-dark);
}

.proof__num {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 2rem + 5vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--cream);
}

.proof__plus {
  margin-left: 0.04em;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.proof__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
}

@media (max-width: 860px) {
  .proof__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .proof__stat:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 420px) {
  .proof__stat {
    padding-inline: 16px 0;
  }

  .proof__label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

/* ---- src/css/sections/research.css ---- */
/* ==========================================================================
   Research: the spine of the argument, told in two screens.
   Screen one: the question, the answer card and the verdict (7 of 8).
   Screen two: six more findings on a printed hairline grid, then the close.
   ========================================================================== */

.research {
  --r-tbr: var(--gold);
  --r-tbr-deep: var(--gold-deep);
  --r-wedy: var(--wine);
  --r-wedy-deep: var(--wine-deep);
  overflow: clip;
}

/* A soft blush bloom behind the answer card, for depth */
.research::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2%;
  right: -12%;
  width: min(64vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blush) 60%, transparent), transparent 72%);
  pointer-events: none;
}

/* Shared: small print next to every figure */
.research-src {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Highlighter marks on the words that matter */
.research-hl {
  padding-inline: 0.04em;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--gold) 38%, transparent) 60% 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.research-hl--wine {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--wine-deep);
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--wine) 22%, transparent) 60% 92%, transparent 92%);
}

/* Screen one ------------------------------------------------------------- */

.research-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head card"
    "verdict card";
  column-gap: clamp(40px, 5.5vw, 96px);
  row-gap: 40px;
}

.research-head {
  grid-area: head;
}

.research-title {
  margin-top: 22px;
  max-width: 13ch;
}

/* The answer card: the question on a dark slip, the names grouped by source */
.research-answer {
  grid-area: card;
  align-self: center;
  position: relative;
  z-index: 1;
}

.research-answer__card {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-3);
}

.research-answer__ask {
  padding: 20px clamp(20px, 2.4vw, 32px) 22px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--candle) 16%, transparent), transparent 58%),
    var(--night-2);
  color: var(--cream);
}

.research-answer__label {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.research-answer__label span {
  white-space: nowrap;
}

.research-answer__label span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.research-answer__label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--candle);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--candle) 18%, transparent);
}

.research-answer__q {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  text-wrap: balance;
}

.research-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 5px;
  vertical-align: -0.12em;
  background: var(--candle);
}

/* The caret blinks a few times as the card arrives, then rests (no loop) */
.research-answer.is-in .research-caret {
  animation: research-blink 1.1s steps(1) 700ms 5;
}

@keyframes research-blink {
  50% { opacity: 0; }
}

.research-answer__body {
  padding: 16px clamp(20px, 2.4vw, 32px) 20px;
}

.research-answer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-answer__count > span {
  white-space: nowrap;
}

.research-answer__who {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.research-answer__who i {
  width: 13px;
  height: 13px;
  flex: none;
  background: var(--ink);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* Two directories side by side, the unsourced name underneath */
.research-answer__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 36px);
  padding-top: 18px;
}

.research-cluster {
  --c: var(--ink-3);
  --bloom: 42px;
  min-width: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.research-cluster--tbr { --c: var(--r-tbr); }
.research-cluster--wedy { --c: var(--r-wedy); }

.research-cluster__src {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
}

.research-cluster__n {
  flex: none;
  width: var(--bloom);
  height: var(--bloom);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 20%, var(--card));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent),
    0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "SOFT" 100, "opsz" 72;
  color: var(--ink);
}

.research-cluster__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.research-cluster__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 60, "opsz" 72;
}

.research-cluster__note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-cluster__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.research-cluster__flag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--wine) 14%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wine) 28%, transparent);
  color: var(--wine-deep);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Each name hangs off its directory on a thin stem in the directory's colour */
.research-cluster dd {
  --pad: 7px;
  position: relative;
  margin: 0 0 0 calc(var(--bloom) / 2 - 0.75px);
  padding: var(--pad) 0 var(--pad) 24px;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.92rem + 0.3vw, 1.2rem);
  font-weight: 350;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  text-wrap: balance;
}

.research-cluster dd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: color-mix(in srgb, var(--c) 80%, transparent);
}

.research-cluster dt + dd::before {
  top: -9px;
}

.research-cluster dd:last-child::before {
  bottom: auto;
  height: calc(var(--pad) + 0.625em);
}

.research-cluster dt + dd:last-child::before {
  height: calc(var(--pad) + 0.625em + 9px);
}

.research-cluster dd::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--pad) + 0.625em - 3px);
  width: 17px;
  height: 6px;
  background:
    radial-gradient(circle at calc(100% - 3px) 50%, var(--c) 2.6px, transparent 3.1px),
    linear-gradient(var(--c), var(--c)) 0 50% / calc(100% - 4px) 1.5px no-repeat;
}

.research-cluster--none {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent);
}

.research-cluster--none .research-cluster__src {
  padding: 0;
}

.research-cluster--none .research-cluster__n {
  --bloom: 30px;
  background: var(--card);
  box-shadow: none;
  border: 1px dashed var(--ink-3);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-3);
}

.research-cluster--none .research-cluster__name {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-cluster--none dd {
  margin: 0;
  padding: 0;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-2);
}

.research-cluster--none dd::before,
.research-cluster--none dd::after {
  content: none;
}

/* Point at a directory and the other names step back */
@media (hover: hover) {
  .research-answer__groups:has(.research-cluster:hover) .research-cluster:not(:hover) {
    opacity: 0.38;
  }
}

.research-answer .fig-cap {
  padding-left: 6px;
}

/* The verdict */
.research-verdict {
  grid-area: verdict;
  align-self: end;
}

.research-verdict__stat {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2vw, 28px);
}

.research-verdict__big {
  display: flex;
  align-items: baseline;
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(6rem, 3.4rem + 6.4vw, 10rem);
  font-weight: 250;
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

.research-verdict__n:first-child {
  color: var(--wine-deep);
}

.research-verdict__of {
  display: inline-block;
  margin: 0 0.12em 0 0.1em;
  font-size: 0.26em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--ink-3);
  transform: translateY(-0.4em);
}

.research-verdict__line {
  max-width: 11ch;
  padding-bottom: 0.06em;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}

.research-verdict__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--rose-deep);
}

.research-verdict__wedy {
  max-width: 30rem;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + 0.4vw, 1.4rem);
  font-weight: 350;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 36;
}

.research-verdict .research-src {
  margin-top: 12px;
}

/* Screen two: the findings ----------------------------------------------- */

.research-more {
  margin-top: clamp(64px, 7vw, 104px);
}

.research-more__head {
  margin-bottom: 18px;
}

.research-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-bottom: 1px solid var(--hair);
}

.research-tile {
  --tile-x: clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 30px) var(--tile-x);
}

.research-tile:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--hair);
}

.research-tile:nth-child(3n + 1) {
  padding-left: 0;
}

.research-tile:nth-child(3n) {
  padding-right: 0;
}

.research-tile:nth-child(n + 4) {
  border-top: 1px solid var(--hair);
}

.research-tile__no {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-tile__no::after {
  content: "";
  flex: 0 1 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.research-tile__big {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2.2rem + 2.8vw, 5rem);
  font-weight: 250;
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variation-settings: "SOFT" 40, "opsz" 144;
  font-variant-numeric: lining-nums;
  color: var(--rose-deep);
}

.research-tile--num .research-tile__big {
  font-size: clamp(3.6rem, 1.6rem + 4.6vw, 6.5rem);
}

.research-tile__big small {
  margin-left: 0.04em;
  font-size: 0.42em;
  letter-spacing: 0;
  opacity: 0.85;
}

.research-tile__approx {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-3);
}

.research-tile__text {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem);
  font-weight: 350;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  text-wrap: pretty;
}

.research-tile__text--lg {
  margin-top: 14px;
  font-size: clamp(1.2rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 60, "opsz" 72;
}

.research-tile__text em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--rose-deep);
}

.research-tile__up {
  white-space: nowrap;
  color: var(--rose-deep);
}

.research-keep {
  white-space: nowrap;
}

.research-tile .research-src {
  margin-top: auto;
  padding-top: 16px;
}

/* A tally of a hundred couples: the filled ticks are the share */
.research-ticks {
  --v: 50%;
  position: relative;
  display: block;
  width: 300px;
  max-width: 100%;
  height: 14px;
  margin-top: 18px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.research-ticks::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: var(--rose);
  transform-origin: left center;
}

/* The comb paints the gaps in the page colour, so 1 in every 100 is a tick */
.research-ticks::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 1px, var(--paper) 1px 1%);
}

/* Bing: a slim recreated map with three pins */
.research-pack {
  position: relative;
  height: 72px;
  margin-top: 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--paper-2);
  overflow: hidden;
}

.research-pack svg {
  width: 100%;
  height: 100%;
}

.research-map__water {
  fill: color-mix(in srgb, var(--sage) 30%, var(--paper-2));
}

.research-map__road {
  fill: none;
  stroke: var(--card);
  stroke-width: 6;
  stroke-linecap: round;
}

.research-map__road--thin {
  stroke-width: 2.5;
  opacity: 0.85;
}

.research-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 24px;
  height: 24px;
  margin: -27px 0 0 -12px;
  border-radius: 50% 50% 50% 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  box-shadow: 0 5px 10px -4px color-mix(in srgb, var(--ink) 55%, transparent);
  transform: rotate(-45deg);
}

.research-pin b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--paper);
  transform: rotate(45deg);
}

.research-pin--odd {
  background: var(--wine);
}

.research-pack__tag {
  position: absolute;
  left: calc(52% + 16px);
  top: 61%;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wine) 38%, transparent), var(--shadow-1);
  color: var(--wine-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateY(-50%) rotate(-2deg);
}

/* Market: the headline figure beside its label, then a slim bar strip */
.research-market {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.research-market .research-tile__big {
  color: var(--wine-deep);
}

.research-market .research-tile__text {
  max-width: 12ch;
  padding-bottom: 0.1em;
}

.research-bars {
  list-style: none;
  display: grid;
  gap: 5px;
  margin: 18px 0 0;
  padding: 0;
}

.research-bars li {
  display: grid;
  grid-template-columns: 4.9rem minmax(0, 1fr) 2.9rem;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.25;
}

.research-bars__k {
  color: var(--ink-2);
}

.research-bars li.is-gv .research-bars__k {
  color: var(--ink);
  font-weight: 500;
}

.research-bars__track {
  height: 6px;
}

.research-bars__track i {
  display: block;
  width: var(--v);
  min-width: 3px;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--ink-3) 40%, var(--paper-2));
  transform-origin: left center;
}

.research-bars li.is-gv .research-bars__track i {
  background: var(--wine);
}

.research-bars__v {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.research-bars__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--ink-2);
}

.research-bars__total b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Calendar: four discrete months, with a break between January and July */
.research-season {
  --plot: 66px;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 16px);
  margin-top: 18px;
}

.research-season__col {
  flex: 1 1 0;
  max-width: 68px;
  display: grid;
  justify-items: center;
  gap: 7px;
}

.research-season__plot {
  display: block;
  width: 100%;
  height: calc(var(--plot) + 18px);
  padding-top: 18px;
  border-bottom: 1px solid var(--ink-3);
}

.research-season__track {
  position: relative;
  display: block;
  height: 100%;
}

.research-season__bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: var(--h);
  margin-left: -10px;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--gold) 62%, var(--card));
  transform-origin: bottom center;
}

.research-season__col.is-peak .research-season__bar {
  background: var(--gold);
}

.research-season__col.is-jan .research-season__bar {
  background: var(--wine);
}

.research-season__v {
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) + 4px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  transform: translateX(-50%);
}

.research-season__m {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-season__col.is-jan .research-season__m {
  color: var(--wine-deep);
  font-weight: 500;
}

.research-season__break {
  flex: none;
  align-self: flex-end;
  width: 22px;
  margin-bottom: 14px;
  color: var(--ink-3);
}

.research-season__break svg {
  width: 22px;
  height: 22px;
}

.research-season__break path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.research-season__note {
  margin-top: 12px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-2);
}

/* Motion: the figures draw in as each tile arrives */
.js .research-tile .research-ticks::before,
.js .research-tile .research-bars__track i {
  transform: scaleX(0);
  transition: transform 1.3s var(--ease-out) calc(var(--i, 0) * 80ms + 250ms);
}

.js .research-tile .research-season__bar {
  transform: scaleY(0);
  transition: transform 1.2s var(--ease-out) calc(var(--i, 0) * 100ms + 250ms);
}

.js .research-tile .research-season__v {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) calc(var(--i, 0) * 100ms + 850ms);
}

.js .research-tile.is-in .research-ticks::before,
.js .research-tile.is-in .research-bars__track i,
.js .research-tile.is-in .research-season__bar {
  transform: none;
}

.js .research-tile.is-in .research-season__v {
  opacity: 1;
}

/* No. 08: the three platforms the answers lean on */

.research-cite {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
}

.research-cite li {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr) 3.1em;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.research-cite__track {
  position: relative;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}

.research-cite__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease-out) calc(var(--i) * 110ms);
}

.js .research-tile.is-in .research-cite__track i {
  transform: scaleX(1);
}

.research-cite__v {
  text-align: right;
  color: var(--ink);
}

.research-cite__note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-2);
}

.research-cite__note em {
  font-style: italic;
  color: var(--rose-deep);
}

/* The local audit -------------------------------------------------------- */

.research-audit {
  margin-top: clamp(64px, 7vw, 104px);
}

.research-audit__title {
  margin-top: 10px;
  max-width: 20ch;
}

.research-audit__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--rose-deep);
}

.research-audit__lede {
  max-width: 54ch;
  margin-top: 18px;
}

.research-audit__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(32px, 3.6vw, 48px) 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
}

.research-audit__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2.4vw, 36px);
  border-bottom: 1px solid var(--hair);
}

.research-audit__item:nth-child(odd) {
  padding-left: 0;
}

.research-audit__item:nth-child(even) {
  padding-right: 0;
  border-left: 1px solid var(--hair);
}

.research-audit__n {
  display: flex;
  align-items: baseline;
  gap: 0.22em;
  font-family: var(--font-display);
  font-weight: 250;
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  color: var(--rose-deep);
}

.research-audit__n b {
  font-size: clamp(3.2rem, 1.8rem + 3.4vw, 5.2rem);
  font-weight: 250;
  font-variation-settings: "SOFT" 40, "opsz" 144;
}

.research-audit__n span {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-3);
}

.research-audit__what {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem);
  font-weight: 350;
  line-height: 1.34;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  text-wrap: pretty;
}

.research-audit__what em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--rose-deep);
}

.research-audit__fix {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.research-audit__method {
  max-width: 76ch;
  margin-top: clamp(22px, 2.4vw, 32px);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
}

/* Close ------------------------------------------------------------------ */

.research-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(40px, 4.5vw, 64px);
}

.research-close__copy {
  min-width: 0;
}

.research-close__sub {
  max-width: 58ch;
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.research-close__line {
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  text-wrap: balance;
}

.research-close__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--rose-deep);
}

.research-close .btn {
  flex: none;
}

/* Responsive ------------------------------------------------------------- */

/* Small laptops: headline and verdict share the top row, the card spans under */
@media (max-width: 1099px) {
  .research-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-rows: none;
    grid-template-areas:
      "head verdict"
      "card card";
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 40px;
  }

  .research-title {
    max-width: 16ch;
  }
}

/* Tablets: everything stacks; the verdict reads across in two columns */
@media (max-width: 959px) {
  .research-lead {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "card"
      "verdict";
    row-gap: 32px;
  }

  .research-title {
    max-width: 17ch;
  }

  .research-verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 40px);
    align-items: end;
  }

  .research-verdict__stat {
    grid-row: 1 / span 2;
  }

  .research-verdict__wedy {
    margin-top: 0;
    padding: 0 0 0 clamp(20px, 3vw, 28px);
    border-top: 0;
    border-left: 1px solid var(--hair);
  }

  .research-verdict .research-src {
    padding-left: calc(clamp(20px, 3vw, 28px) + 1px);
  }
}

@media (max-width: 959px) {
  .research-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-tile:nth-child(n) {
    border-left: 0;
    border-top: 0;
    padding-inline: 0 var(--tile-x);
  }

  .research-tile:nth-child(even) {
    border-left: 1px solid var(--hair);
    padding-inline: var(--tile-x) 0;
  }

  .research-tile:nth-child(n + 3) {
    border-top: 1px solid var(--hair);
  }
}

@media (max-width: 759px) {
  .research-close {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The audit rows go single file before the tiles do: each one is a long sentence */
@media (max-width: 759px) {
  .research-audit__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-audit__item:nth-child(n) {
    padding-inline: 0;
    border-left: 0;
  }
}

/* Phones: the directories stack, each tile becomes a compact row */
@media (max-width: 599px) {
  .research-answer__label {
    letter-spacing: 0.1em;
  }

  .research-verdict {
    display: block;
  }

  .research-verdict__wedy {
    margin-top: 24px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }

  .research-verdict .research-src {
    padding-left: 0;
  }

  .research-answer__meta {
    flex-direction: column;
    align-items: flex-start;
    letter-spacing: 0.08em;
  }

  .research-answer__groups {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .research-cluster--none {
    margin-top: 2px;
  }

  .research-tiles {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .research-tile:nth-child(n) {
    border-left: 0;
    padding: 22px 0;
  }

  .research-tile:nth-child(n + 2) {
    border-top: 1px solid var(--hair);
  }

  .research-tile--num {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "no no"
      "big text"
      "ticks ticks"
      "src src";
    column-gap: 18px;
    align-items: center;
  }

  .research-tile--num .research-tile__no { grid-area: no; }
  .research-tile--num .research-tile__big { grid-area: big; }
  .research-tile--num .research-tile__text { grid-area: text; }
  .research-tile--num .research-ticks { grid-area: ticks; }
  .research-tile--num .research-src { grid-area: src; }

  .research-tile .research-src {
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .research-answer.is-in .research-caret {
    animation: none;
  }

  .js .research-tile .research-ticks::before,
  .js .research-tile .research-bars__track i,
  .js .research-tile .research-season__bar,
  .js .research-tile .research-season__v {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .research-cluster {
    transition: none;
  }
}

/* ---- src/css/sections/model.css ---- */
/* ==========================================================================
   Model: the Perennial loop centrepiece, the argument, the diagnosis
   ========================================================================== */

.model {
  overflow: hidden;
}

.model-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 50% 38%, color-mix(in srgb, var(--candle) 9%, transparent), transparent 72%),
    radial-gradient(40% 30% at 12% 70%, color-mix(in srgb, var(--wine) 10%, transparent), transparent 70%),
    radial-gradient(36% 28% at 90% 20%, color-mix(in srgb, var(--sage) 8%, transparent), transparent 70%);
}

/* Header ------------------------------------------------------------------ */

.model-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 28px clamp(32px, 5vw, 88px);
  align-items: end;
}

.model-head .h2 {
  margin-top: 22px;
}

.model-head .h2 em {
  display: block;
}

.model-head__lede {
  padding-bottom: 0.5em;
  max-width: 27rem;
}

/* Stage: the wreath in the middle, the four phases around it -------------- */

.model-figure {
  margin-top: clamp(40px, 6vw, 88px);
}

.model-stage {
  --art: min(760px, 100cqw);
  position: relative;
  container-type: inline-size;
}

.model-art {
  position: relative;
  width: var(--art);
  aspect-ratio: 1;
  margin-inline: auto;
}

.model-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Flower hit areas: real links for pointer users (the labels carry focus) */
.model-hit {
  position: absolute;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.model-hit--attract { left: 16.3%; top: 16.3%; }
.model-hit--capture { left: 83.7%; top: 16.3%; }
.model-hit--run { left: 83.7%; top: 83.7%; }
.model-hit--encore { left: 16.3%; top: 83.7%; }

/* Phase colours. --model-ink is the phase colour for type: the wine accent is
   too dark for small text on night, so Encore's is lifted toward cream.
   --model-to is the colour of the phase each one feeds. */
.model-phase {
  --model-ink: var(--accent);
}

.model-phase--attract { --model-to: var(--rose); }
.model-phase--capture { --model-to: var(--gold); }
.model-phase--run { --model-to: color-mix(in srgb, var(--wine) 70%, var(--cream)); }

.model-phase--encore {
  --model-ink: color-mix(in srgb, var(--wine) 70%, var(--cream));
  --model-to: var(--sage);
}

.model-phases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.model-phase__link {
  position: relative;
  display: grid;
  text-decoration: none;
  color: var(--cream);
  border-radius: var(--r-md);
  transition: opacity var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.model-phase__link:focus-visible {
  outline-offset: 4px;
}

/* "PHASE 01": the masthead lockup that opens each phase section, in small */
.model-phase__mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 0.8;
  color: var(--model-ink);
  user-select: none;
}

.model-phase__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.model-phase__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.045em;
  line-height: 0.76;
  color: var(--model-ink);
}

.model-phase__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--cream);
}

/* "Takes X" on line one, "⟶ makes Y" on line two: one shape for all four */
.model-phase .model-phase__flow {
  display: grid;
  justify-items: start;
  gap: 0.6em;
  line-height: 1.25;
  color: var(--model-ink);
}

.model-phase__takes,
.model-phase__makes {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.model-phase__detail {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--cream-2);
  text-wrap: pretty;
}

.model-phase__go {
  width: 18px;
  height: 18px;
  color: var(--model-ink);
  transition: transform var(--dur-2) var(--ease-out);
}

/* The hand-off: "Attract feeds Phase 02", then what it hands on */
.model-feed {
  margin: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.model-feed__route {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.model-feed__from {
  color: var(--model-ink);
}

.model-feed__to {
  color: var(--model-to);
}

.model-feed__what {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--cream);
}

.model-feed__dir {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  color: var(--model-to);
}

.model-feed__pulse {
  display: none;
}

/* Wide: the phases sit at the four corners of the wreath, and each hand-off
   is written on the connector it rides, around the ring */
@media (min-width: 1100px) {
  .model-stage {
    --art: min(760px, calc((100cqw - 524px) / 0.96));
  }

  .model-phases {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .model-phase__link {
    position: absolute;
    width: calc(min(262px, 50% - 0.48 * var(--art)) + 28px);
    padding: 14px;
    gap: 14px;
    justify-items: start;
    pointer-events: auto;
  }

  .model-phase--attract .model-phase__link,
  .model-phase--encore .model-phase__link {
    right: calc(50% + 0.48 * var(--art) - 14px);
    justify-items: end;
    text-align: right;
  }

  .model-phase--capture .model-phase__link,
  .model-phase--run .model-phase__link {
    left: calc(50% + 0.48 * var(--art) - 14px);
  }

  .model-phase--attract .model-phase__link,
  .model-phase--capture .model-phase__link {
    top: calc(0.035 * var(--art) - 14px);
  }

  .model-phase--run .model-phase__link,
  .model-phase--encore .model-phase__link {
    bottom: calc(0.035 * var(--art) - 14px);
  }

  .model-phase__word {
    font-size: clamp(0.95rem, 0.55rem + 0.55vw, 1.25rem);
  }

  .model-phase__num {
    font-size: clamp(3.4rem, 1.5rem + 2.7vw, 4.75rem);
  }

  .model-phase__name {
    font-size: clamp(1.95rem, 1.2rem + 1.05vw, 2.45rem);
  }

  /* a hairline leader above the flow, brightest where it meets the flower */
  .model-phase .model-phase__flow {
    justify-self: stretch;
    padding-top: 14px;
    font-size: 0.75rem;
    letter-spacing: 0.11em;
    background: linear-gradient(var(--model-lead, 90deg), transparent, color-mix(in srgb, var(--model-ink) 75%, transparent)) top / 100% 1px no-repeat;
  }

  .model-phase--capture .model-phase__flow,
  .model-phase--run .model-phase__flow {
    --model-lead: 270deg;
  }

  .model-phase--attract .model-phase__flow,
  .model-phase--encore .model-phase__flow {
    justify-items: end;
  }

  /* The phase card: what's in the phase, opened in the heart of the wreath on
     hover/focus (the brain steps back behind it). Measured from each label to
     the art's centre, so it never lands on a hand-off label at any width. */
  .model-phase__detail {
    --model-lift: 0.96;
    position: absolute;
    z-index: 2;
    width: min(300px, 0.5 * var(--art));
    padding: 18px 22px 20px;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--night) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--hair-dark));
    box-shadow: var(--shadow-night);
    font-size: 0.95rem;
    text-align: center;
    color: var(--cream);
    opacity: 0;
    pointer-events: none;
  }

  .model-phase__detail::before {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--model-ink);
  }

  .model-phase--attract .model-phase__detail::before { content: "Inside Phase 01"; content: "Inside Phase 01" / ""; }
  .model-phase--capture .model-phase__detail::before { content: "Inside Phase 02"; content: "Inside Phase 02" / ""; }
  .model-phase--run .model-phase__detail::before { content: "Inside Phase 03"; content: "Inside Phase 03" / ""; }
  .model-phase--encore .model-phase__detail::before { content: "Inside Phase 04"; content: "Inside Phase 04" / ""; }

  /* transitions only once someone has pointed at a phase */
  .model-stage.is-touched .model-phase__detail {
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
  }

  .model-phase--attract .model-phase__detail,
  .model-phase--encore .model-phase__detail {
    left: calc(100% + 0.48 * var(--art) - 14px);
  }

  .model-phase--capture .model-phase__detail,
  .model-phase--run .model-phase__detail {
    left: calc(14px - 0.48 * var(--art));
  }

  .model-phase--attract .model-phase__detail,
  .model-phase--capture .model-phase__detail {
    top: calc(0.465 * var(--art) + 14px);
    transform: translate(-50%, -50%) scale(var(--model-lift));
  }

  .model-phase--run .model-phase__detail,
  .model-phase--encore .model-phase__detail {
    bottom: calc(0.465 * var(--art) + 14px);
    transform: translate(-50%, 50%) scale(var(--model-lift));
  }

  .model-brain {
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .model-stage[data-active] .model-brain {
    opacity: 0.14;
  }

  .model-phase__go {
    display: none;
  }

  /* Hand-off labels, each at the middle of its connector */
  .model-feed {
    position: absolute;
    display: grid;
    gap: 8px;
    justify-items: start;
    pointer-events: none;
  }

  .model-feed__route {
    white-space: nowrap;
  }

  .model-feed__what {
    font-size: clamp(1.3rem, 0.95rem + 0.55vw, 1.6rem);
    white-space: nowrap;
  }

  .model-feed__dir {
    order: 2;
  }

  /* 01 feeds 02, over the top */
  .model-phase--attract .model-feed {
    left: 50%;
    bottom: calc(50% + 0.436 * var(--art) + 12px);
    transform: translateX(-50%);
    justify-items: center;
    text-align: center;
  }

  /* 02 feeds 03, down the right */
  .model-phase--capture .model-feed {
    left: calc(50% + 0.434 * var(--art) + 18px);
    top: calc(50% - 0.043 * var(--art));
    transform: translateY(-50%);
  }

  .model-phase--capture .model-feed__dir {
    transform: rotate(90deg);
  }

  /* 03 feeds 04, under the bottom */
  .model-phase--run .model-feed {
    left: 50%;
    top: calc(50% + 0.436 * var(--art) + 12px);
    transform: translateX(-50%);
    justify-items: center;
    text-align: center;
  }

  .model-phase--run .model-feed__dir {
    order: 0;
    transform: rotate(180deg);
  }

  /* 04 feeds 01, up the left: the one that makes it a loop */
  .model-phase--encore .model-feed {
    right: calc(50% + 0.436 * var(--art) + 18px);
    top: 50%;
    transform: translateY(-50%);
    justify-items: end;
    text-align: right;
  }

  .model-phase--encore .model-feed__dir {
    transform: rotate(-90deg);
  }

  .model-figure .model-cap {
    margin-top: clamp(48px, 4vw, 64px);
  }

  /* Hover / focus: the phase, and the two hand-offs it takes and makes */
  .model-stage[data-active] .model-phase__link {
    opacity: 0.34;
  }

  .model-stage[data-active] .model-feed {
    opacity: 0.26;
  }

  .model-stage[data-active="attract"] .model-phase--attract .model-phase__link,
  .model-stage[data-active="capture"] .model-phase--capture .model-phase__link,
  .model-stage[data-active="run"] .model-phase--run .model-phase__link,
  .model-stage[data-active="encore"] .model-phase--encore .model-phase__link,
  .model-stage[data-active="attract"] :is(.model-phase--attract, .model-phase--encore) .model-feed,
  .model-stage[data-active="capture"] :is(.model-phase--capture, .model-phase--attract) .model-feed,
  .model-stage[data-active="run"] :is(.model-phase--run, .model-phase--capture) .model-feed,
  .model-stage[data-active="encore"] :is(.model-phase--encore, .model-phase--run) .model-feed {
    opacity: 1;
  }

  .model-stage[data-active="attract"] .model-phase--attract .model-phase__detail,
  .model-stage[data-active="capture"] .model-phase--capture .model-phase__detail,
  .model-stage[data-active="run"] .model-phase--run .model-phase__detail,
  .model-stage[data-active="encore"] .model-phase--encore .model-phase__detail {
    --model-lift: 1;
    opacity: 1;
  }
}

/* Narrow: the wreath fits the width, and the phases become a chain of cards.
   Each card feeds the one below it, and a return rail carries Encore's
   proof back up the left and into Phase 01. */
@media (max-width: 1099.98px) {
  .model-stage {
    --art: min(640px, 100cqw);
  }

  .model-phases {
    --lane: 22px;   /* the return rail runs in this lane, left of the cards */
    --mark: 3.3rem; /* the numeral column inside each card */
    --pad: 18px;    /* the card's left padding */
    --spine: calc(var(--lane) + 1px + var(--pad) + var(--mark) / 2);
    --row: 86px;
    --bend: 14px;
    --rail-top: 8px;
    position: relative;
    z-index: 0;
    max-width: 640px;
    margin: clamp(28px, 5vw, 48px) auto 0;
    padding-top: 40px;
  }

  /* the rail: up the lane from the return… */
  .model-phases::before {
    content: "";
    position: absolute;
    left: 5px;
    top: calc(var(--rail-top) + var(--bend));
    bottom: calc(var(--row) - 2px);
    width: 0;
    /* a border, not a fill, so it snaps to pixels like the bends it joins */
    border-left: 1.5px solid var(--sage);
    border-image: linear-gradient(to top, color-mix(in srgb, var(--wine) 70%, var(--cream)), var(--sage)) 1;
  }

  /* …over the top, and down into Phase 01 */
  .model-phases::after {
    content: "";
    position: absolute;
    left: 5px;
    top: var(--rail-top);
    width: calc(var(--spine) - 5px + 0.75px);
    height: calc(40px - var(--rail-top) - 7px);
    border: 1.5px solid var(--sage);
    border-bottom: 0;
    border-radius: var(--bend) var(--bend) 0 0;
  }

  .model-phase {
    position: relative;
  }

  /* little chevrons on the rail so its direction reads: up */
  .model-phase--capture::before,
  .model-phase--run::before {
    content: "";
    position: absolute;
    left: 0.25px;
    top: -4px;
    width: 11px;
    height: 9px;
    background: color-mix(in srgb, var(--sage) 45%, color-mix(in srgb, var(--wine) 70%, var(--cream)));
    clip-path: polygon(50% 0, 100% 100%, 50% 70%, 0 100%);
  }

  .model-phase--capture::before {
    background: color-mix(in srgb, var(--sage) 72%, color-mix(in srgb, var(--wine) 70%, var(--cream)));
  }

  .model-phase__link {
    margin-left: var(--lane);
    grid-template-columns: var(--mark) minmax(0, 1fr);
    grid-template-areas:
      "mark name"
      "mark flow"
      "mark detail";
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
    padding: 20px 18px 22px var(--pad);
    border-radius: var(--r-lg);
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      color-mix(in srgb, var(--night-3) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--hair-dark));
  }

  /* the rail's arrowhead, landing on Phase 01 */
  .model-phase--attract .model-phase__link::before {
    content: "";
    position: absolute;
    top: -11px;
    left: calc(var(--spine) - var(--lane) - 1px - 6px);
    width: 12px;
    height: 11px;
    background: var(--sage);
    clip-path: polygon(0 0, 50% 30%, 100% 0, 50% 100%);
  }

  .model-phase__mark {
    grid-area: mark;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
  }

  .model-phase__word {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
  }

  .model-phase__num {
    font-size: 3.1rem;
  }

  .model-phase__name {
    grid-area: name;
    padding: 4px 32px 0 0; /* the go arrow sits beside the name */
    font-size: 1.75rem;
  }

  .model-phase .model-phase__flow {
    grid-area: flow;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    gap: 0.5em;
  }

  .model-phase__flow .phase-flow__arrow {
    width: 2.2em;
  }

  .model-phase__detail {
    grid-area: detail;
    padding-top: 2px;
    font-size: 0.9rem;
  }

  .model-phase__go {
    position: absolute;
    top: 24px;
    right: 18px;
  }

  .model-phase__link:active .model-phase__go {
    transform: translateX(3px);
  }

  /* the connector between two cards */
  .model-feed {
    position: relative;
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: var(--row);
    padding: 12px 8px 12px calc(var(--spine) + 22px);
  }

  .model-feed::before {
    content: "";
    position: absolute;
    left: calc(var(--spine) - 0.75px);
    top: 0;
    bottom: 8px;
    width: 1.5px;
    background: linear-gradient(var(--model-ink), var(--model-to));
  }

  .model-feed::after {
    content: "";
    position: absolute;
    left: calc(var(--spine) - 6px);
    bottom: 0;
    width: 12px;
    height: 11px;
    background: var(--model-to);
    clip-path: polygon(0 0, 50% 30%, 100% 0, 50% 100%);
  }

  .model-feed__what {
    font-size: 1.4rem;
  }

  .model-feed__dir {
    display: none;
  }

  .model-feed__pulse {
    --drop: calc(var(--row) - 16px);
    display: block;
    position: absolute;
    left: calc(var(--spine) - 3.5px);
    top: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--candle) 65%, white);
    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--candle) 45%, transparent);
    opacity: 0;
  }

  /* After Phase 04, the return: down out of the card, round into the lane */
  .model-phase--encore .model-feed {
    height: var(--row);
  }

  .model-phase--encore .model-feed::before {
    left: 5px;
    top: 0;
    bottom: auto;
    width: calc(var(--spine) - 5px + 0.75px);
    height: 50%;
    background: none;
    border: 1.5px solid var(--model-ink);
    border-top: 0;
    border-radius: 0 0 var(--bend) var(--bend);
  }

  .model-phase--encore .model-feed::after {
    display: none;
  }

  .model-phase--encore .model-feed__pulse {
    --drop: calc(var(--row) / 2 - 5px);
  }
}

/* Phones: a slimmer lane and numeral column, so "⟶ makes delivered weddings"
   still sits on one line at 360px */
@media (max-width: 420px) {
  .model-phases {
    --lane: 16px;
    --mark: 2.75rem;
    --pad: 14px;
  }

  .model-phase__link {
    column-gap: 14px;
    padding-right: 14px;
  }

  .model-phase__num {
    font-size: 2.75rem;
  }

  .model-phase__word {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  .model-phase .model-phase__flow {
    letter-spacing: 0.05em;
  }

  .model-feed {
    padding-left: calc(var(--spine) + 18px);
  }
}

.model-cap {
  display: block;
  text-align: center;
  margin-top: clamp(16px, 2vw, 24px);
}

.model-cap b,
.model-seasons .fig-cap b {
  margin-right: 0.75em;
}

/* The argument: set like the inscription under a wreath -------------------- */

.model-argument {
  max-width: 50rem;
  margin: clamp(44px, 6vw, 88px) auto 0;
  text-align: center;
}

.model-argument__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
}

.model-argument__tag span:first-child {
  color: color-mix(in srgb, var(--wine) 70%, var(--cream));
}

.model-argument__tag span:last-child {
  color: var(--sage);
}

.model-argument__tag svg {
  width: 40px;
  height: 10px;
  color: var(--cream-3);
}

.model-argument__line {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.6rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  text-wrap: balance;
}

.model-argument__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.model-argument__body {
  max-width: 36rem;
  margin: 20px auto 0;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--cream-2);
}

/* ==========================================================================
   The drawing
   Strokes are set in CSS px, which are SVG user units here. --k thickens
   them as the drawing scales down so the line weight stays ~1 to 1.6px.
   ========================================================================== */

.model-svg {
  --kb: 1;
  --k: var(--kb);
  --line-sage: color-mix(in srgb, var(--sage) 78%, var(--cream));
  --line-gold: color-mix(in srgb, var(--candle) 80%, var(--cream));
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1099.98px) {
  .model-svg { --kb: 1.2; }
}

@media (max-width: 700px) {
  .model-svg { --kb: 1.65; }
}

/* Scaled groups keep the same line weight */
.model-flower { --k: calc(var(--kb) / 1.35); }
.model-flower--attract { --k: calc(var(--kb) / 1.55); }
.model-brain { --k: calc(var(--kb) / 1.1); }

/* Brain: gold-leaf line work */
.model-brain__fill {
  fill: color-mix(in srgb, var(--candle) 5%, transparent);
  stroke: none;
}

.model-brain__outline {
  stroke: var(--line-gold);
  stroke-width: calc(1.5px * var(--k));
}

.model-brain__sulcus {
  stroke: color-mix(in srgb, var(--candle) 78%, transparent);
  stroke-width: calc(1.1px * var(--k));
}

.model-brain__folia {
  stroke: color-mix(in srgb, var(--candle) 70%, transparent);
  stroke-width: calc(0.95px * var(--k));
}

.model-brain__stem {
  stroke: var(--line-gold);
  stroke-width: calc(1.3px * var(--k));
}

.model-brain__root {
  stroke: color-mix(in srgb, var(--candle) 60%, transparent);
  stroke-width: calc(0.9px * var(--k));
}

.model-brain__bud {
  fill: var(--candle);
  stroke: none;
}

.model-brain .model-leaf__blade {
  fill: color-mix(in srgb, var(--candle) 14%, transparent);
  stroke: var(--line-gold);
}

.model-brain .model-leaf__vein {
  stroke: color-mix(in srgb, var(--candle) 60%, transparent);
}

.model-glow {
  transform-box: fill-box;
  transform-origin: center;
}

/* Vine, leaves, tendrils */
.model-vine__main {
  stroke: var(--line-sage);
  stroke-width: calc(1.55px * var(--k));
}

.model-vine__twine {
  stroke: color-mix(in srgb, var(--sage) 62%, transparent);
  stroke-width: calc(0.9px * var(--k));
}

.model-tendril {
  stroke: color-mix(in srgb, var(--sage) 80%, transparent);
  stroke-width: calc(1px * var(--k));
}

.model-leaf {
  transform-box: view-box;
  transform-origin: 0 0;
}

.model-leaf__blade {
  fill: color-mix(in srgb, var(--sage) 17%, transparent);
  stroke: var(--line-sage);
  stroke-width: calc(1.1px * var(--k));
}

.model-leaf__vein {
  stroke: color-mix(in srgb, var(--sage) 70%, transparent);
  stroke-width: calc(0.7px * var(--k));
}

.model-leaf--in .model-leaf__blade {
  fill: color-mix(in srgb, var(--moss) 30%, transparent);
}

.model-leaf--out { --r0: 40deg; }
.model-leaf--in { --r0: -40deg; }

.model-blossom {
  transform-box: view-box;
  transform-origin: 0 0;
  fill: color-mix(in srgb, var(--rose) 55%, var(--cream));
  stroke: none;
  opacity: 0.85;
}

.model-blossom__eye {
  fill: var(--candle);
}

/* Connectors: each phase hands on to the next, flower to flower, clockwise */
.model-stop--attract { stop-color: var(--sage); }
.model-stop--capture { stop-color: var(--rose); }
.model-stop--run { stop-color: var(--gold); }
.model-stop--encore { stop-color: color-mix(in srgb, var(--wine) 70%, var(--cream)); }

.model-conn--attract { --c-from: var(--sage); --c-to: var(--rose); }
.model-conn--capture { --c-from: var(--rose); --c-to: var(--gold); }
.model-conn--run { --c-from: var(--gold); --c-to: color-mix(in srgb, var(--wine) 70%, var(--cream)); }
.model-conn--encore { --c-from: color-mix(in srgb, var(--wine) 70%, var(--cream)); --c-to: var(--sage); }

.model-conn {
  transition: opacity var(--dur-3) var(--ease-out);
}

.model-conn__line {
  stroke-width: calc(1.8px * var(--k));
}

.model-conn__tail {
  fill: var(--c-from);
  stroke: none;
}

.model-conn__head {
  fill: var(--c-to);
  stroke: none;
}

/* the pulse that carries the hand-off: parked off the path until it runs */
.model-conn__pulse {
  stroke: color-mix(in srgb, var(--candle) 60%, white);
  stroke-width: calc(2.8px * var(--k));
  stroke-dasharray: 0.12 3;
  stroke-dashoffset: 0.14;
}

.model-conn__pulse--halo {
  stroke: var(--candle);
  stroke-width: calc(10px * var(--k));
  stroke-opacity: 0.2;
}

/* Ring words: what each connector carries (narrow layouts; wide ones set the
   hand-off in type beside the ring) */
.model-word {
  fill: var(--cream-2);
  stroke: none;
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--k));
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: fill-opacity var(--dur-3) var(--ease-out);
}

@media (min-width: 1100px) {
  .model-words {
    display: none;
  }
}

/* Flowers */
.model-flower {
  transition: opacity var(--dur-3) var(--ease-out);
}

.model-flower__lift {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 700ms var(--ease-out);
}

.model-flower__halo {
  stroke: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}

.model-flower__stem {
  stroke: var(--line-sage);
  stroke-width: calc(1.35px * var(--k));
}

.model-flower--attract .model-flower__stem {
  stroke: color-mix(in srgb, var(--sage) 70%, var(--cream));
  stroke-width: calc(1.6px * var(--k));
}

.model-flower__head {
  transform-box: view-box;
  transform-origin: 0 var(--oy, 0);
}

.model-petal {
  fill: color-mix(in srgb, var(--accent) 18%, var(--night));
  stroke: color-mix(in srgb, var(--accent) 86%, var(--cream));
  stroke-width: calc(1.25px * var(--k));
}

.model-petal--outer {
  fill: color-mix(in srgb, var(--accent) 16%, var(--night));
}

.model-petal--mid {
  fill: color-mix(in srgb, var(--accent) 26%, var(--night));
}

.model-petal--inner {
  fill: color-mix(in srgb, var(--accent) 36%, var(--night));
}

.model-petal-heart {
  stroke: color-mix(in srgb, var(--candle) 70%, var(--accent));
  stroke-width: calc(1.1px * var(--k));
}

.model-stamen {
  fill: var(--candle);
  stroke: none;
}

.model-fine {
  stroke: color-mix(in srgb, var(--accent) 80%, var(--cream));
  stroke-width: calc(0.9px * var(--k));
}

.model-petal-line {
  opacity: 0.6;
}

.model-sepal {
  fill: color-mix(in srgb, var(--sage) 26%, var(--night));
  stroke: var(--line-sage);
  stroke-width: calc(1.05px * var(--k));
}

.model-flower--attract .model-fine {
  stroke: var(--line-sage);
}

.model-seedhead__fil {
  stroke: color-mix(in srgb, var(--wine) 58%, var(--cream));
  stroke-width: calc(0.8px * var(--k));
}

.model-seedhead__pap {
  stroke: color-mix(in srgb, var(--wine) 38%, var(--cream));
  stroke-width: calc(0.7px * var(--k));
  opacity: 0.9;
}

.model-seedhead__ach {
  stroke: color-mix(in srgb, var(--wine) 85%, var(--cream));
  stroke-width: calc(2px * var(--k));
}

.model-seedhead__core {
  fill: color-mix(in srgb, var(--wine) 60%, var(--night));
  stroke: color-mix(in srgb, var(--wine) 80%, var(--cream));
  stroke-width: calc(1px * var(--k));
}

/* ==========================================================================
   Choreography. Without JS, or with reduced motion, all of the above is the
   finished still. JS adds .is-armed (hidden start) to the stage, then
   .is-growing on entry, .is-alive once the last flower opens, and
   .is-paused while the stage is offscreen.
   ========================================================================== */

.model-phase--attract .model-feed { --at: 4; }
.model-phase--capture .model-feed { --at: 4.9; }
.model-phase--run .model-feed { --at: 5.8; }
.model-phase--encore .model-feed { --at: 6.6; }

@media (prefers-reduced-motion: no-preference) {
  .model-stage.is-armed :is(.model-vine__main, .model-vine__twine, .model-tendril, .model-flower__stem, .model-conn__line, .model-brain__outline, .model-brain__sulcus, .model-brain__folia, .model-brain__stem, .model-brain__root) {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
  }

  .model-stage.is-armed .model-blossom {
    opacity: 0;
    transform: scale(0);
  }

  .model-stage.is-growing .model-blossom {
    animation: model-pop 0.9s var(--ease-out) calc(var(--at, 0) * 1s) both;
  }

  .model-stage.is-armed :is(.model-leaves .model-leaf, .model-brain .model-leaf) {
    opacity: 0;
    transform: rotate(var(--r0, 0deg)) scale(0.08);
  }

  .model-stage.is-armed .model-flower__head {
    opacity: 0;
    transform: scale(0.2) rotate(-14deg);
  }

  .model-stage.is-armed :is(.model-glow, .model-brain__fill, .model-brain__bud, .model-word, .model-conn__tail, .model-conn__head) {
    opacity: 0;
  }

  .model-stage.is-growing :is(.model-tendril, .model-flower__stem, .model-conn__line, .model-brain__outline, .model-brain__sulcus, .model-brain__folia, .model-brain__stem, .model-brain__root) {
    animation: model-draw var(--dur, 1.3s) var(--ease-in-out) calc(var(--at, 0) * 1s) both;
  }

  .model-stage.is-growing .model-brain__outline { --dur: 2.2s; }
  .model-stage.is-growing .model-flower__stem { --dur: 0.9s; }
  .model-stage.is-growing .model-flower--attract .model-flower__stem { --dur: 1.8s; }
  .model-stage.is-growing .model-conn__line { --dur: 1.2s; }
  .model-stage.is-growing .model-tendril { --dur: 1.1s; }

  .model-stage.is-growing .model-vine__main {
    animation: model-draw 5.2s cubic-bezier(0.37, 0, 0.63, 1) 0.6s both;
  }

  .model-stage.is-growing .model-vine__twine {
    animation: model-draw 5.2s cubic-bezier(0.37, 0, 0.63, 1) 0.85s both;
  }

  .model-stage.is-growing :is(.model-leaves .model-leaf, .model-brain .model-leaf) {
    animation: model-unfurl 1.1s var(--ease-out) calc(var(--at, 0) * 1s) both;
  }

  .model-stage.is-growing .model-flower__head {
    animation: model-bloom 1.6s var(--ease-out) calc(var(--at, 0) * 1s + 0.45s) both;
  }

  .model-stage.is-growing .model-flower--attract .model-flower__head {
    animation-delay: calc(var(--at, 0) * 1s + 0.9s);
  }

  .model-stage.is-growing :is(.model-brain__fill, .model-word) {
    animation: model-fade 1.4s var(--ease-soft) calc(var(--at, 0) * 1s + 0.3s) both;
  }

  .model-stage.is-growing .model-conn__tail {
    animation: model-fade 0.6s var(--ease-soft) calc(var(--at, 0) * 1s) both;
  }

  .model-stage.is-growing .model-conn__head {
    animation: model-fade 0.5s var(--ease-out) calc(var(--at, 0) * 1s + 1s) both;
  }

  .model-stage.is-growing .model-brain__bud {
    animation: model-fade 0.9s var(--ease-out) calc(var(--at, 0) * 1s) both;
  }

  .model-stage.is-growing .model-glow {
    animation: model-fade 2.4s var(--ease-soft) 0.2s both;
  }

  .model-stage.is-alive .model-glow {
    animation: model-breathe 7s var(--ease-in-out) infinite alternate;
  }

  .model-stage.is-alive .model-brain__bud {
    animation: model-twinkle 3.6s var(--ease-in-out) calc(var(--i, 0) * -0.7s) infinite alternate;
  }

  /* The hand-off: a pulse runs each connector in turn, 01 → 02 → 03 → 04 → 01… */
  .model-stage.is-alive .model-conn__pulse {
    animation: model-pass 8s var(--ease-in-out) infinite;
  }

  .model-stage.is-alive .model-conn--capture .model-conn__pulse { animation-delay: 2s; }
  .model-stage.is-alive .model-conn--run .model-conn__pulse { animation-delay: 4s; }
  .model-stage.is-alive .model-conn--encore .model-conn__pulse { animation-delay: 6s; }

  /* …and the phase it reaches glows as it arrives */
  .model-stage.is-alive .model-flower__halo {
    animation: model-arrive 8s var(--ease-soft) infinite;
  }

  .model-stage.is-alive .model-flower--run .model-flower__halo { animation-delay: 2s; }
  .model-stage.is-alive .model-flower--encore .model-flower__halo { animation-delay: 4s; }
  .model-stage.is-alive .model-flower--attract .model-flower__halo { animation-delay: 6s; }

  /* the hand-off labels arrive with their connectors. A transition, not an
     animation, so crossing the breakpoint later never replays the delay. */
  @media (min-width: 1100px) {
    .model-stage.is-armed :is(.model-feed__route, .model-feed__what) {
      opacity: 0;
    }

    .model-stage.is-growing :is(.model-feed__route, .model-feed__what) {
      opacity: 1;
      transition: opacity 1s var(--ease-soft) calc(var(--at, 0) * 1s);
    }
  }

  /* the chain of cards carries the same pulse, in step with the ring */
  @media (max-width: 1099.98px) {
    .model-stage.is-alive .model-feed__pulse {
      animation: model-drop 8s var(--ease-in-out) infinite;
    }

    .model-stage.is-alive .model-phase--capture .model-feed__pulse { animation-delay: 2s; }
    .model-stage.is-alive .model-phase--run .model-feed__pulse { animation-delay: 4s; }
    .model-stage.is-alive .model-phase--encore .model-feed__pulse { animation-delay: 6s; }
  }

  .model-stage.is-paused,
  .model-stage.is-paused * {
    animation-play-state: paused !important;
  }
}

@keyframes model-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes model-unfurl {
  from { opacity: 0; transform: rotate(var(--r0, 0deg)) scale(0.08); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes model-bloom {
  from { opacity: 0; transform: scale(0.2) rotate(-14deg); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes model-pop {
  from { opacity: 0; transform: scale(0) rotate(-60deg); }
  to { opacity: 0.85; transform: none; }
}

@keyframes model-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes model-breathe {
  from { opacity: 0.72; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes model-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes model-pass {
  0% { stroke-dashoffset: 0.14; }
  24%, 100% { stroke-dashoffset: -1.02; }
}

@keyframes model-arrive {
  0%, 21% { opacity: 0; }
  28% { opacity: 0.8; }
  48%, 100% { opacity: 0; }
}

@keyframes model-drop {
  0% { opacity: 0; transform: translateY(0); }
  3% { opacity: 1; }
  20% { opacity: 1; }
  24%, 100% { opacity: 0; transform: translateY(var(--drop)); }
}

/* Hover / focus: one phase lifts, the rest recede, and the two hand-offs it
   takes and makes stay lit. (After the choreography so it wins over it.) --- */

.model-stage[data-active] .model-flower {
  opacity: 0.3;
}

.model-stage[data-active] .model-conn {
  opacity: 0.2;
}

.model-stage[data-active] .model-word {
  fill-opacity: 0.3;
}

.model-stage[data-active="attract"] :is(.model-flower--attract, .model-conn--attract, .model-conn--encore),
.model-stage[data-active="capture"] :is(.model-flower--capture, .model-conn--capture, .model-conn--attract),
.model-stage[data-active="run"] :is(.model-flower--run, .model-conn--run, .model-conn--capture),
.model-stage[data-active="encore"] :is(.model-flower--encore, .model-conn--encore, .model-conn--run) {
  opacity: 1;
}

.model-stage[data-active="attract"] :is(.model-word--attract, .model-word--encore),
.model-stage[data-active="capture"] :is(.model-word--capture, .model-word--attract),
.model-stage[data-active="run"] :is(.model-word--run, .model-word--capture),
.model-stage[data-active="encore"] :is(.model-word--encore, .model-word--run) {
  fill-opacity: 1;
}

.model-stage[data-active="attract"] .model-flower--attract .model-flower__lift,
.model-stage[data-active="capture"] .model-flower--capture .model-flower__lift,
.model-stage[data-active="run"] .model-flower--run .model-flower__lift,
.model-stage[data-active="encore"] .model-flower--encore .model-flower__lift {
  transform: translateY(-5px) scale(1.08);
}

.model-stage[data-active="attract"] .model-flower--attract .model-flower__halo,
.model-stage[data-active="capture"] .model-flower--capture .model-flower__halo,
.model-stage[data-active="run"] .model-flower--run .model-flower__halo,
.model-stage[data-active="encore"] .model-flower--encore .model-flower__halo {
  opacity: 1;
  animation: none;
}

@
}

/* The seasons: annual vs perennial */
.model-seasons {
  position: relative;
  display: grid;
  gap: 18px;
}

.model-seasons__years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.model-seasons__row {
  display: grid;
  gap: 6px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hair-2);
}

.model-seasons__label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.model-seasons__label b {
  margin-right: 0.5em;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--ink);
}

.model-seasons__art {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  --sk: 1;
}

@media (max-width: 700px) {
  .model-seasons__art { --sk: 1.5; }
}

.model-s-soil {
  stroke: color-mix(in srgb, var(--ink) 55%, transparent);
  stroke-width: calc(1.1px * var(--sk));
}

.model-s-grit {
  stroke: color-mix(in srgb, var(--ink) 30%, transparent);
  stroke-width: calc(2.2px * var(--sk));
}

.model-s-jan {
  stroke: color-mix(in srgb, var(--wine) 45%, transparent);
  stroke-width: calc(1px * var(--sk));
  stroke-dasharray: 2 5;
}

.model-s-stem {
  stroke: var(--moss);
  stroke-width: calc(1.35px * var(--sk));
}

.model-s-root {
  stroke: color-mix(in srgb, var(--gold-deep) 70%, transparent);
  stroke-width: calc(1px * var(--sk));
}

.model-s-rhizome {
  stroke: var(--gold-deep);
  stroke-width: calc(2.4px * var(--sk));
}

.model-s-seed {
  fill: var(--wine);
}

.model-s-leaf__blade {
  fill: color-mix(in srgb, var(--sage) 30%, transparent);
  stroke: var(--moss);
  stroke-width: calc(1.1px * var(--sk));
}

.model-s-leaf__vein {
  stroke: color-mix(in srgb, var(--moss) 65%, transparent);
  stroke-width: calc(0.7px * var(--sk));
}

.model-s-flower ellipse {
  stroke-width: calc(1px * var(--sk));
}

.model-s-flower--rose ellipse {
  fill: color-mix(in srgb, var(--rose) 45%, var(--card));
  stroke: var(--rose-deep);
}

.model-s-flower--gold ellipse {
  fill: color-mix(in srgb, var(--gold) 45%, var(--card));
  stroke: var(--gold-deep);
}

.model-s-flower__eye {
  fill: var(--gold-deep);
}

.model-s-bud__body {
  fill: color-mix(in srgb, var(--rose) 40%, var(--card));
  stroke: var(--rose-deep);
  stroke-width: calc(1px * var(--sk));
}

.model-s-bud__sepal {
  fill: color-mix(in srgb, var(--sage) 45%, var(--card));
  stroke: var(--moss);
  stroke-width: calc(0.9px * var(--sk));
}

.model-seasons .fig-cap {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
}

.model-seasons .fig-cap b {
  color: var(--wine);
}

/* ==========================================================================
   The slowest phase, and the way in
   ========================================================================== */

.model-slow {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px clamp(40px, 6vw, 110px);
  align-items: end;
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--hair-dark);
}

.model-slow__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.model-slow__mark {
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin-top: 0.2em;
}

.model-slow__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--sage) 45%, transparent);
  stroke-width: 1.2;
}

.model-slow__unknown {
  fill: none;
  stroke: var(--wine);
  stroke-width: 1.2;
  stroke-dasharray: 2.2 3;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .model-slow.is-live .model-slow__unknown {
    animation: model-seek 9s linear infinite;
  }
}

@keyframes model-seek {
  to { transform: rotate(360deg); }
}

.model-slow__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  text-wrap: balance;
}

.model-slow__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.model-slow__side {
  display: grid;
  gap: 28px;
  justify-items: start;
}

.model-slow__body {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--cream-2);
  max-width: 28rem;
}

/* Narrow ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .model-head {
    grid-template-columns: 1fr;
  }

  .model-slow {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@

  .model-slow__lead {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .model-slow .btn {
    width: 100%;
  }
}


/* Owner request: the arrows around the ring carry the loop on their own.
   The hand-off words stay in the page for screen readers only. */
.model-feed__route,
.model-feed__what {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1099.98px) {
  .model-feed {
    min-height: 52px;
  }

  .model-feed__pulse {
    --drop: 36px;
  }
}

/* ---- src/css/sections/attract.css ---- */
/* ==========================================================================
   Phase 01 · Attract
   The masthead and statement sit beside the collage (AI answer over the
   journal it quotes), so the pictures are in the first screen. Then Maya's
   search as one paragraph, the Business Profile deck, the flow from Encore
   into Capture, the fourteen things we do, and the hand-off to phase 02.
   ========================================================================== */

.attract {
  overflow: clip;
  /* A little less air above the masthead so the collage lands in the first screen */
  padding-top: clamp(49.6px, 5vw, 79.4px);
  --attract-gap: clamp(9.9px, 1.2vw, 19.8px);
  /* ink-3 is tuned for ivory; on the sage wash quiet text needs a touch more ink (AA) */
  --attract-muted: color-mix(in srgb, var(--ink-3) 70%, var(--ink));
  --attract-next: color-mix(in srgb, var(--rose-deep) 82%, var(--ink));
  --eyebrow: var(--attract-muted);
}

/* Morning light on the sage wash: pale glows behind the collage, a warm touch
   by the masthead, never a darker patch under text. */
.attract__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 22% at 78% 12%, color-mix(in srgb, var(--card) 62%, transparent), transparent 72%),
    radial-gradient(34% 16% at 8% 4%, color-mix(in srgb, var(--candle) 18%, transparent), transparent 70%),
    radial-gradient(46% 18% at 44% 36%, color-mix(in srgb, var(--card) 40%, transparent), transparent 72%),
    radial-gradient(60% 22% at 70% 100%, color-mix(in srgb, var(--card) 34%, transparent), transparent 72%);
}

.attract .phase-kicker,
.attract .illustrative,
.attract-fig .fig-cap {
  color: var(--attract-muted);
}

/* Top: head + story + flow on the left, the collage on the right ------------ */

.attract-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* the empty 1fr row soaks up the collage's extra height, so the left
     column's blocks stay stacked tight under each other */
  grid-template-rows: auto auto auto auto auto;
  column-gap: var(--attract-gap);
}

/* The masthead runs the full width, like the other three phases; the title
   and the collage start side by side beneath it */
.attract-head {
  display: contents;
}

.attract-mast {
  grid-column: 1 / 13;
  grid-row: 1;
  position: relative;
  z-index: 2;
}

.attract-head__text {
  grid-column: 1 / 7;
  grid-row: 2;
  position: relative;
  z-index: 2;
}

.attract-title {
  max-width: 11ch;
}

.attract-title em {
  padding-right: 0.06em;
}

.attract-kicker {
  margin-top: clamp(11.2px, 1.2vw, 17.4px);
}

.attract-story {
  grid-column: 1 / 7;
  grid-row: 3;
  display: grid;
  gap: 26px;
  justify-items: start;
  margin-top: clamp(13.6px, 1.5vw, 21.1px);
  padding-right: clamp(0px, 2vw, 32px);
}

.attract-prose {
  max-width: 35rem;
  color: var(--ink-2);
}

.attract-prose p::first-line {
  color: var(--ink);
}

/* The same drop cap as Capture and Run, in Attract's moss */
.attract-prose p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 3.4em;
  line-height: 0.8;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--moss);
}

.attract-cta {
  color: var(--moss);
  font-size: var(--fs-small);
}

/* The collage ---------------------------------------------------------------- */

.attract-stage {
  grid-column: 7 / 13;
  grid-row: 2 / 6;
  position: relative;
  min-width: 0;
  margin-right: calc(-1 * clamp(0px, 2.6vw, 40px));
  padding-left: clamp(0px, 1.2vw, 20px);
}

.attract-stage__slot {
  position: relative;
  min-width: 0;
}

.attract-fig {
  position: relative;
}

.attract-fig .fig-cap {
  padding-left: 4px;
}

.attract-fig .fig-cap b {
  flex: none;
  white-space: nowrap;
}

/* The answer leads; the journal it quotes tucks its browser bar under it */
.attract-stage__slot--ai {
  width: 80%;
  z-index: 3;
}

.attract-stage__slot--blog {
  width: 90%;
  margin: -52px 0 0 auto;
  z-index: 1;
}

/* Fig. 2's caption rides above its card: below it, the journal tucks in */
.attract-fig--ai {
  display: flex;
  flex-direction: column;
}

.attract-fig--ai .fig-cap {
  order: -1;
  margin: 0 0 12px;
}

/* Shared mock type ----------------------------------------------------------- */

.attract .mock {
  box-shadow: var(--shadow-3);
}

/* a) The AI answer --------------------------------------------------------- */

.attract-ai {
  padding: 0;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 92%, var(--paper-2)));
}

.attract-ai__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair-2);
}

.attract-ai__mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  background: radial-gradient(circle at 30% 25%, var(--ink-2), var(--ink));
}

.attract-ai__mark svg {
  width: 16px;
  height: 16px;
}

.attract-ai__name {
  font-weight: 600;
  font-size: 13.5px;
}

.attract-ai__meta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.attract-ai__q {
  display: flex;
  justify-content: flex-end;
  padding: 22px 20px 6px;
}

.attract-ai__q span {
  max-width: 82%;
  padding: 11px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--paper-2);
  font-size: 14.5px;
  color: var(--ink);
}

.attract-ai__a {
  padding: 16px 22px 8px;
}

.attract-ai__lead {
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 16px;
}

.attract-ai__pick,
.attract-ai__other {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}

.attract-ai__pick {
  position: relative;
  padding: 16px 16px 16px 14px;
  margin: 0 -8px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--sage) 11%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 30%, transparent);
}

.attract-ai__rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper-2);
}

.attract-ai__pick .attract-ai__rank {
  color: var(--card);
  background: var(--moss);
}

.attract-ai__planner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  letter-spacing: -0.01em;
}

.attract-ai__badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--moss) 35%, transparent);
  border-radius: var(--r-pill);
}

.attract-ai__why {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.attract-ai__why mark {
  color: var(--ink);
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--sage) 38%, transparent) 58%);
  padding: 0 1px;
}

.attract-ai__why sup {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 3px;
  border-radius: 50%;
  vertical-align: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--moss);
  background: color-mix(in srgb, var(--sage) 26%, var(--card));
}

.attract-ai__other {
  padding: 10px 6px;
  border-top: 1px solid var(--hair-2);
  opacity: 0.75;
}

.attract-ai__other--fade {
  opacity: 0.35;
}

.attract-ai__ghost {
  display: grid;
  gap: 7px;
  padding-top: 5px;
  filter: blur(0.6px);
}

.attract-ai__ghost i {
  display: block;
  height: 9px;
  width: var(--w, 70%);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-3) 22%, var(--paper-2));
}

.attract-ai__ghost i:first-child {
  height: 12px;
  background: color-mix(in srgb, var(--ink-3) 34%, var(--paper-2));
}

.attract-ai__sources {
  display: grid;
  gap: 10px;
  padding: 16px 22px 20px;
  margin-top: 6px;
  border-top: 1px solid var(--hair-2);
}

.attract-ai__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attract-cite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--hair);
  white-space: nowrap;
}

.attract-cite b {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper-2);
}

.attract-cite.is-cited {
  color: var(--moss);
  border-color: color-mix(in srgb, var(--sage) 55%, transparent);
  background: color-mix(in srgb, var(--sage) 12%, var(--card));
}

.attract-cite.is-cited b {
  color: var(--card);
  background: var(--sage);
}


/* The hand-drawn note in the margin beside the answer (wide screens only) */
.attract-note {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.2;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--moss);
  pointer-events: none;
}

.attract-note svg {
  width: 58px;
  flex: none;
}

.attract-note--ai {
  left: calc(100% + 18px);
  top: 36px;
  width: clamp(104px, 9vw, 132px);
}

.attract-note--ai svg {
  margin-left: -26px;
}

/* Shown only where the margin beside the answer card is wide enough */
@media (min-width: 1360px), (min-width: 1000px) and (max-width: 1199px) {
  .attract-note {
    display: flex;
  }
}

/* b) The journal ------------------------------------------------------------ */

.attract-blog {
  container-type: inline-size;
}

.attract-blog__site {
  padding: clamp(18px, 4cqi, 34px) clamp(18px, 4.4cqi, 38px) clamp(22px, 5cqi, 44px);
  background: var(--card);
}

.attract-blog__nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-2);
}

.attract-blog__logo {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.8cqi, 22px);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variation-settings: "SOFT" 80, "opsz" 36;
}

.attract-blog__logo i {
  font-style: italic;
  color: var(--moss);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.attract-blog__links {
  display: flex;
  gap: clamp(10px, 2.4cqi, 22px);
  font-size: clamp(10.5px, 1.6cqi, 12.5px);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.attract-blog__links .is-on {
  color: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.attract-blog__head {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: clamp(16px, 3.6cqi, 30px) 0 clamp(14px, 3cqi, 24px);
}

.attract-blog__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 6cqi, 46px);
  font-weight: 300;
  line-height: 1;
  font-style: italic;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.attract-blog__sub {
  font-size: clamp(11px, 1.7cqi, 13px);
  color: var(--ink-3);
}

.attract-blog__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  grid-template-rows: auto auto;
  gap: clamp(14px, 3cqi, 26px) clamp(14px, 3.2cqi, 28px);
}

.attract-post {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.attract-post--lead {
  grid-column: 2;
  grid-row: 1 / 3;
}

.attract-post:not(.attract-post--lead) {
  grid-template-columns: 42% 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 14px;
}

.attract-post:not(.attract-post--lead) .attract-photo {
  grid-row: 1 / 4;
  aspect-ratio: 4 / 5;
}

.attract-post__tag {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.35cqi, 10.5px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
  line-height: 1.4;
}

.attract-post--lead .attract-photo {
  margin-top: 10px;
  aspect-ratio: 5 / 3.6;
}

.attract-post__title {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.3cqi, 18px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 36;
  text-wrap: balance;
}

.attract-post--lead .attract-post__title {
  font-size: clamp(20px, 3.9cqi, 30px);
  font-weight: 300;
  line-height: 1.1;
  font-variation-settings: "SOFT" 70, "opsz" 96;
}

.attract-post__meta {
  font-size: clamp(10.5px, 1.5cqi, 12px);
  color: var(--ink-3);
}

/* CSS "photographs": warm gradients and botanical line drawings */
.attract-photo {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 5 / 3.4;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
}

.attract-photo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.attract-photo__ln {
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attract-photo__ln--soft {
  opacity: 0.55;
}

.attract-photo__dot {
  fill: color-mix(in srgb, var(--rose) 80%, var(--candle));
}

.attract-photo--table {
  background:
    radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--wine-deep) 60%, transparent), transparent 70%),
    linear-gradient(170deg, var(--night-3) 0%, color-mix(in srgb, var(--wine-deep) 55%, var(--night-2)) 55%, color-mix(in srgb, var(--gold-deep) 50%, var(--night-3)) 100%);
}

.attract-photo__glow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--candle) 70%, transparent) 0%, color-mix(in srgb, var(--candle) 18%, transparent) 30%, transparent 62%);
  mix-blend-mode: screen;
}

.attract-photo--orchard {
  color: color-mix(in srgb, var(--moss) 80%, var(--ink));
  background:
    radial-gradient(70% 60% at 70% 10%, color-mix(in srgb, var(--candle) 55%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--blush) 70%, var(--card)) 0%, color-mix(in srgb, var(--sage) 45%, var(--paper)) 72%, color-mix(in srgb, var(--sage) 70%, var(--paper-3)) 100%);
}

.attract-photo--winter {
  color: color-mix(in srgb, var(--ink-2) 70%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 70%, var(--card)) 0%, color-mix(in srgb, var(--sage) 25%, var(--paper-2)) 60%, color-mix(in srgb, var(--ink-3) 40%, var(--paper-3)) 100%);
}

.attract-photo__sun {
  position: absolute;
  right: 22%;
  top: 18%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card) 95%, transparent) 30%, transparent 70%);
}


/* The schema card peeking from under the journal's lower right corner:
   it overlaps the bottom of the candlelit photo and the page margin only. */
.attract-fig--blog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(330px, 50%);
  align-items: start;
}

.attract-blog {
  grid-column: 1 / 3;
  grid-row: 1;
}

.attract-fig--blog .fig-cap {
  grid-column: 1;
  grid-row: 2;
  padding-right: 20px;
}

.attract-code {
  grid-column: 2;
  grid-row: 2;
  z-index: 2;
  margin: -92px -12px 0 0;
  border-radius: var(--r-md);
  background: var(--night-2);
  color: var(--cream-2);
  border: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
  box-shadow: var(--shadow-night);
  rotate: 2.2deg;
}

.attract-code__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.attract-code__tabs span {
  padding: 6px 10px 8px;
  color: var(--cream-3);
}

.attract-code__tabs .is-on {
  color: var(--cream);
  box-shadow: inset 0 -1px 0 var(--sage);
}

.attract-code__pre {
  margin: 0;
  padding: 14px 16px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre;
  overflow: hidden;
}

.attract-code .c-k { color: color-mix(in srgb, var(--sage) 85%, var(--cream)); }
.attract-code .c-s { color: color-mix(in srgb, var(--candle) 85%, var(--cream)); }
.attract-code .c-p { color: var(--cream-3); }

/* c) Business Profile ------------------------------------------------------- */

.attract-gbp__photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 138px;
}

.attract-gbp__ph {
  position: relative;
  display: grid;
  place-items: center;
}

.attract-gbp__ph--1 {
  grid-row: 1 / 3;
  background:
    radial-gradient(40% 40% at 70% 30%, color-mix(in srgb, var(--candle) 60%, transparent), transparent 70%),
    radial-gradient(60% 50% at 30% 90%, color-mix(in srgb, var(--rose) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--blush) 80%, var(--card)), color-mix(in srgb, var(--sage) 60%, var(--paper-3)));
}

.attract-gbp__ph--2 {
  background:
    radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--candle) 65%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night-3), color-mix(in srgb, var(--wine-deep) 50%, var(--night-2)));
}

.attract-gbp__ph--3 {
  background: linear-gradient(200deg, color-mix(in srgb, var(--sage) 55%, var(--card)), color-mix(in srgb, var(--moss) 60%, var(--paper-3)));
}

.attract-gbp__ph--4 {
  grid-column: 2 / 4;
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 45%, var(--card)), color-mix(in srgb, var(--rose) 45%, var(--blush)));
}

.attract-gbp__ph--4 b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--card);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}

.attract-gbp__body {
  padding: 16px 20px 20px;
}

.attract-gbp__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attract-gbp__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--moss);
}

.attract-gbp__name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 60, "opsz" 48;
}

.attract-gbp__rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13px;
}

.attract-gbp__rating b {
  font-weight: 600;
}

.attract-gbp__cat {
  font-size: 13px;
  color: var(--ink-3);
}

.attract-gbp__actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0 6px;
}

.attract-gbp__actions span {
  padding: 7px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--moss);
}

.attract-gbp__actions span:first-child {
  color: var(--card);
  background: var(--moss);
  border-color: var(--moss);
}

.attract-gbp__row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hair-2);
  font-size: 13px;
  color: var(--ink-2);
}

.attract-gbp__row:first-child {
  border-top: 0;
}

.attract-gbp__k {
  color: var(--ink-3);
}

.attract-gbp__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.attract-gbp__areas .chip {
  padding: 2px 9px;
  font-size: 11.5px;
  background: var(--paper-2);
  color: var(--ink-2);
}

.attract-gbp__open {
  color: var(--moss);
  font-weight: 600;
}

.attract-gbp__post {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper-2) 60%, var(--card));
}

.attract-gbp__post-img {
  border-radius: 8px;
  min-height: 58px;
  background:
    radial-gradient(60% 50% at 70% 25%, color-mix(in srgb, var(--card) 80%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper-3) 80%, var(--card)), color-mix(in srgb, var(--sage) 45%, var(--ink-3)));
}

.attract-gbp__post-txt {
  display: grid;
  gap: 5px;
}

.attract-gbp__post-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.attract-gbp__post-top .chip {
  font-size: 11px;
  padding: 2px 8px;
}

.attract-gbp__post-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.attract-gbp__qa {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.attract-gbp__qa b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper-2);
  vertical-align: 1px;
}

.attract-gbp__q {
  color: var(--ink);
  font-weight: 500;
}

.attract-gbp__ans b {
  color: var(--card);
  background: var(--sage);
}

.attract-gbp__ans em {
  display: block;
  margin: 3px 0 0 24px;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
}


/* Consistency checklist: a paper card tucked under the profile's left edge.
   The profile only covers its right padding, so every status shows. */
.attract-check {
  grid-column: 1;
  grid-row: 1 / 3;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin: clamp(56px, 7vw, 104px) -26px 0 0;
  padding: 22px 52px 20px 24px;
  rotate: -1.6deg;
}

.attract-check__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  font-variation-settings: "SOFT" 80, "opsz" 24;
  margin-bottom: 8px;
}

.attract-check__list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

/* Baseline row: the status label sits on the same line as its listing */
.attract-check__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--hair);
  font-size: 13px;
  line-height: 1.4;
}

.attract-check__list .tick {
  align-self: center;
}

.attract-check__list em {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

.attract-check__foot {
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.35;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--moss);
}

/* The deck: Business Profile and listings, under the top ------------------- */

/* The Business Profile tucks under the journal, same as the journal under the answer */
.attract-stage__slot--gbp {
  width: 86%;
  margin: -34px auto 0 0;
  z-index: 2;
}

.attract-illustrative {
  margin-top: 14px;
  text-align: right;
}

.attract-fig--gbp {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: start;
}

.attract-gbp {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
}

.attract-fig--gbp .fig-cap {
  grid-column: 2;
  grid-row: 2;
}

.attract-illustrative {
  grid-column: 1 / 13;
  margin-top: clamp(19.8px, 2.5vw, 34.7px);
  text-align: right;
}

/* The flow in one glance: fed by Encore, three moves, into Capture ------- */

.attract-flow {
  grid-column: 1 / 6;
  grid-row: 4;
  align-self: start;
  list-style: none;
  padding: 0;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  display: grid;
  max-width: 27rem;
}

.attract-flow li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--hair);
}

.attract-flow li:last-child {
  border-bottom: 1px solid var(--hair);
}

.attract-flow__m {
  grid-row: 1 / 3;
  padding-top: 1px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.3;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--moss);
}

.attract-flow__m svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.attract-flow__t {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  font-variation-settings: "SOFT" 60, "opsz" 36;
}

.attract-flow__d {
  font-size: var(--fs-xs);
  color: var(--attract-muted);
}

.attract-flow__io .attract-flow__t {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--moss);
}

.attract-flow__ph {
  margin-right: 0.45em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 0.18em;
}

/* The way out is in Capture's colour: the next room */
.attract-flow__io--out .attract-flow__m,
.attract-flow__io--out .attract-flow__t {
  color: var(--attract-next);
}

/* What we do --------------------------------------------------------------- */

.attract-work {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--attract-gap);
  margin-top: clamp(27.3px, 2.9vw, 44.6px);
  padding-top: clamp(24.8px, 3.1vw, 39.7px);
  border-top: 1px solid var(--hair);
}

.attract-work__side {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  display: grid;
  gap: 20px;
  justify-items: start;
  padding-right: clamp(0px, 2vw, 32px);
}

.attract-work__title {
  max-width: 12ch;
}

.attract-work__note {
  color: var(--ink-2);
  max-width: 26rem;
}

.attract-work__btn {
  margin-top: 8px;
}

.attract-list {
  grid-column: 5 / 13;
}

/* Two columns from about 700px of room, so 768 gets them too */
.attract-list.phase-list--cols {
  columns: 2 20rem;
}

.attract-list > li:first-child {
  border-top-color: transparent;
}

/* Hand-off: Attract's output is Capture's input ------------------------------- */

.attract-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px clamp(28px, 4vw, 64px);
  margin-top: clamp(44.6px, 5vw, 74.4px);
  padding-top: clamp(17.4px, 1.9vw, 24.8px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.attract-next__route {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.8rem + 3vw, 5rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-variant-numeric: lining-nums;
  color: var(--moss);
}

.attract-next__arrow {
  width: clamp(56px, 7vw, 120px);
  height: 16px;
  color: color-mix(in srgb, var(--moss) 55%, var(--rose-deep));
}

.attract-next__n--to {
  color: var(--rose-deep);
}

.attract-next__text {
  display: grid;
  gap: 6px;
}

.attract-next__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--attract-muted);
}

.attract-next__lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
  font-variation-settings: "SOFT" 70, "opsz" 48;
  color: var(--ink);
}

.attract-next__lead em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 48;
  color: var(--attract-next);
}

.attract-next__link {
  color: var(--attract-next);
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* Two-column top, 1200 to 1359: the answer card widens, the margin note rests */

@media (max-width: 1359px) {
  .attract-stage__slot--ai {
    width: 90%;
  }

  .attract-stage__slot--blog {
    width: 94%;
  }
}

/* Journal: one column when its frame gets narrow */
@container (max-width: 520px) {
  .attract-blog__grid {
    grid-template-columns: 1fr;
  }

  .attract-post--lead {
    grid-column: 1;
    grid-row: auto;
  }

  .attract-blog__links span:not(.is-on) {
    display: none;
  }
}

/* Below 1200px: one column, the collage straight after the statement --------- */

@media (max-width: 1199px) {
  .attract-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .attract-mast,
  .attract-head__text,
  .attract-stage,
  .attract-story,
  .attract-flow {
    grid-column: 1;
    grid-row: auto;
  }

  .attract-title {
    max-width: 13ch;
  }

  .attract-stage {
    margin: clamp(32px, 6vw, 56px) 0 0;
    padding-left: 0;
  }

  .attract-stage__slot--ai {
    width: min(94%, 640px);
  }

  /* Stacked, only the bar's top edge tucks under the answer card, so the
     address on the journal's browser bar is never cut */
  .attract-stage__slot--blog {
    width: min(94%, 720px);
    margin-top: -14px;
  }

  .attract-story {
    margin-top: clamp(27.3px, 4.3vw, 39.7px);
    padding-right: 0;
  }

  .attract-illustrative {
    grid-column: 1;
  }

  .attract-illustrative {
    text-align: left;
  }

  .attract-flow {
    max-width: 32rem;
  }

  .attract-work {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .attract-work__side,
  .attract-list {
    grid-column: 1;
  }

  .attract-work__side {
    position: static;
  }

  .attract-work__title {
    max-width: none;
  }
}

/* 1000 to 1199: the paragraph and the flow share a row under the collage */
@media (min-width: 1000px) and (max-width: 1199px) {
  .attract-top {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(24.8px, 3.1vw, 39.7px);
  }

  .attract-head,
  .attract-stage {
    grid-column: 1 / -1;
  }

  .attract-story {
    grid-column: 1;
    grid-row: 3;
  }

  .attract-flow {
    grid-column: 2;
    grid-row: 3;
    margin-top: clamp(27.3px, 4.3vw, 39.7px);
  }

}

/* Below 740px the profile and the checklist stack: the checklist tilts in
   under the profile's bottom margin, the caption follows. */
@media (max-width: 739px) {
  .attract-fig--gbp {
    grid-template-columns: minmax(0, 1fr);
  }

  .attract-gbp,
  .attract-fig--gbp .fig-cap {
    grid-column: 1;
  }

  .attract-gbp {
    grid-row: 1;
    width: 96%;
  }

  .attract-gbp__body {
    padding-bottom: 34px;
  }

  .attract-check {
    grid-column: 1;
    grid-row: 2;
    z-index: 3;
    justify-self: end;
    width: min(340px, 88%);
    margin: -24px -4px 0 0;
    padding-right: 24px;
    rotate: 1.4deg;
  }

  .attract-fig--gbp .fig-cap {
    grid-row: 3;
  }

  .attract-fig--blog {
    grid-template-columns: minmax(0, 1fr);
  }

  .attract-blog,
  .attract-fig--blog .fig-cap {
    grid-column: 1;
  }

  .attract-code {
    grid-column: 1;
    width: min(310px, 88%);
    margin: -30px 0 0 -6px;
    rotate: -2deg;
  }

  .attract-fig--blog .fig-cap {
    grid-row: 3;
  }

  .attract-next {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

@media (max-width: 560px) {
  .attract-prose {
    font-size: 1.05rem;
  }

  .attract-ai__top,
  .attract-ai__q,
  .attract-ai__sources {
    padding-inline: 16px;
  }

  .attract-ai__a {
    padding-inline: 18px;
  }

  .attract-ai__meta {
    display: none;
  }

  .attract-ai__planner {
    font-size: 18px;
  }

  .attract-work__btn {
    white-space: normal;
    text-align: left;
  }

  /* A tighter list on phones (main.js also folds each item's sub-points
     behind its title below 700px; every sub-point stays in the page) */
  .attract-list > li {
    padding-left: 2.4rem;
  }

  .attract-list .phase-list__title {
    font-size: 1.06rem;
  }

  .attract-list .phase-list__sub {
    gap: 3px;
    font-size: 0.875rem;
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .attract * {
    transition: none;
  }
}

/* ---- src/css/sections/capture.css ---- */
/* ==========================================================================
   Phase 02 · Capture and qualify
   Mockups lead on the left: a phone overlapping a printed brief overlapping
   an email. The story reads as one Tuesday night, 9:14 to 9:16 pm.
   ========================================================================== */

.capture {
  overflow: clip;
  /* Small text on the rose wash needs more weight than the shared tones give
     it: ink-3 and rose-deep both fall under 4.5:1 on --rose-wash. */
  --capture-soft: color-mix(in srgb, var(--ink-2) 60%, var(--ink-3));
  --capture-rose-ink: color-mix(in srgb, var(--rose-deep) 70%, var(--ink));
  --eyebrow: var(--capture-soft);
}

/* The rose room: a deeper bloom of rose at the corners, a paler light behind
   the collage, so the ground reads unmistakably as its own phase */
.capture-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 24% 48%, color-mix(in srgb, var(--card) 38%, transparent), transparent 72%),
    radial-gradient(42% 30% at 92% 4%, color-mix(in srgb, var(--rose) 38%, transparent), transparent 70%),
    radial-gradient(40% 26% at 4% 96%, color-mix(in srgb, var(--rose) 30%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--rose) 10%, transparent), transparent 22%);
}

.capture .fig-cap,
.capture .illustrative,
.capture .phase-kicker {
  color: var(--capture-soft);
}

.capture .fig-cap b,
.capture .phase-list > li::before {
  color: var(--capture-rose-ink);
}

.capture .phase-list > li {
  border-top-color: color-mix(in srgb, var(--rose-deep) 24%, transparent);
}

/* Head ------------------------------------------------------------------- */

.capture-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(29.8px, 3.7vw, 54.6px);
}

/* Where the couple comes from: Attract hands its demand to Capture */
.capture-fed {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(11.2px, 1.5vw, 19.8px);
  padding: 8px 18px 8px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sage-wash) 70%, var(--card));
  border: 1px solid color-mix(in srgb, var(--sage) 45%, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.capture-fed:hover {
  transform: translateY(2px);
  box-shadow: var(--shadow-1);
}

.capture-fed:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.capture-fed__arrow {
  width: 12px;
  height: 24px;
  flex: none;
  color: var(--moss);
}

.capture-fed__text {
  display: grid;
  line-height: 1.3;
}

.capture-fed__text b {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
}

.capture-fed__text span {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.capture-mast {
  position: relative;
  border-bottom-color: color-mix(in srgb, var(--rose-deep) 40%, transparent);
}

.capture-mast .phase-mast__mark {
  color: color-mix(in srgb, var(--rose-deep) 88%, var(--ink));
}

.capture-mast .phase-flow {
  color: var(--capture-rose-ink);
}

.capture-bud {
  position: absolute;
  right: clamp(0px, 2vw, 32px);
  bottom: 14px;
  width: clamp(54px, 6vw, 86px);
  height: auto;
  opacity: 0.75;
  transform: rotate(-8deg);
  color: var(--rose-deep);
}

.capture-head__text {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 64rem;
}

.capture-title em {
  display: block;
}

.capture-kicker {
  margin-top: 4px;
}

/* Stage: collage left, story right --------------------------------------- */

.capture-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: clamp(24.8px, 3.4vw, 54.6px);
  align-items: start;
}

.capture-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.capture-fig {
  position: relative;
  margin: 0;
  min-width: 0;
}

.capture-fig .fig-cap {
  flex-wrap: wrap;
}

.capture-fig--phone {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  z-index: 3;
  justify-self: start;
  width: min(100%, 318px);
  margin-top: 196px;
}

.capture-fig--memo {
  grid-column: 5 / 13;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-left: 10%;
}

.capture-fig--memo .fig-cap {
  margin: 18px 0 0;
  justify-content: flex-end;
}

.capture-fig--email {
  grid-column: 6 / 13;
  grid-row: 2;
  z-index: 1;
  margin-top: 30px;
  margin-left: 12%;
  margin-right: -4%;
}

.capture-fig--email .fig-cap {
  justify-content: flex-end;
}

/* The phone -------------------------------------------------------------- */

.capture-phone-wrap {
  transform: rotate(-2.2deg);
  transform-origin: 50% 80%;
}

.capture-phone {
  box-shadow:
    0 2px 4px rgba(35, 28, 23, 0.1),
    0 40px 70px -30px rgba(35, 28, 23, 0.55),
    0 80px 120px -60px rgba(90, 50, 40, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.capture-phone__screen {
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--blush) 22%, var(--card)) 100%);
  font-size: 12px;
  line-height: 1.35;
}

.capture-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px 0 28px;
  height: 40px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.capture-status__icons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.capture-status__icons svg {
  height: 10px;
  width: auto;
  fill: currentColor;
}

.capture-addr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 14px 0;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper-2) 80%, var(--card));
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

.capture-addr svg {
  width: 8px;
  height: 10px;
  fill: currentColor;
}

.capture-form {
  display: grid;
  gap: 11px;
  padding: 16px 18px 12px;
}

.capture-form__brand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair-2);
}

.capture-form__mark {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "opsz" 36;
}

.capture-form__mark i {
  font-style: italic;
  color: var(--rose-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
}

.capture-form__place {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capture-steps {
  display: grid;
  gap: 7px;
}

.capture-steps__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capture-steps__label b {
  font-weight: 500;
  color: var(--rose-deep);
}

.capture-steps__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.capture-steps__bar i {
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
}

.capture-steps__bar i.is-done {
  background: var(--rose);
}

.capture-steps__bar i.is-now {
  background: linear-gradient(90deg, var(--rose) 70%, var(--paper-3) 70%);
}

.capture-form__title {
  display: block;
  margin: 2px 0 1px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
}

.capture-form__title em {
  font-style: italic;
  color: var(--rose-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
}

.capture-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.capture-field-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}

.capture-field__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capture-field__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.capture-field__box--venue {
  font-size: 11.5px;
  line-height: 1.25;
}

.capture-field__box--venue > span:first-child {
  min-width: 0;
}

.capture-field__tag {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sage) 18%, var(--card));
  color: var(--moss);
  font-size: 9.5px;
  font-weight: 600;
}

.capture-field__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--moss);
}

.capture-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.capture-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  opacity: 0;
}

.capture-seg {
  display: grid;
  grid-template-columns: 1fr 1.45fr 0.9fr;
  padding: 3px;
  gap: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper-2) 75%, var(--card));
  border: 1px solid var(--hair-2);
}

.capture-seg span {
  display: grid;
  place-items: center;
  padding: 6px 2px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}

.capture-seg .is-on {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 10px -6px rgba(35, 28, 23, 0.6);
}

.capture-field__box--pick {
  justify-content: flex-start;
  border-color: color-mix(in srgb, var(--rose) 60%, transparent);
  background: color-mix(in srgb, var(--blush) 30%, var(--card));
}

.capture-radio {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--rose-deep);
  box-shadow: inset 0 0 0 2.5px var(--card);
  background: var(--rose-deep);
}

.capture-field__box--text {
  display: block;
  min-height: 52px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  font-variation-settings: "SOFT" 100, "opsz" 24;
  color: var(--ink-2);
}

.capture-caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--rose-deep);
}

.capture-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  min-height: 38px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
}

.capture-next svg {
  width: 13px;
  height: 13px;
}

/* The gated scheduler: visibly there, visibly closed */
.capture-locked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 9px;
  margin-top: 4px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--ink-3) 45%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--paper-3) 30%, transparent) 6px 7px
  );
  color: var(--ink-3);
}

.capture-locked__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
}

.capture-locked__icon svg {
  width: 11px;
  height: 12px;
}

.capture-locked__text {
  display: grid;
  line-height: 1.25;
}

.capture-locked__text b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.capture-locked__text span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

.capture-locked__slots {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  opacity: 0.5;
}

.capture-locked__slots i {
  height: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--paper-3) 70%, var(--card));
}

.capture-home {
  display: block;
  width: 110px;
  height: 4px;
  margin: 8px auto 12px;
  border-radius: 3px;
  background: var(--ink);
  opacity: 0.8;
}

/* The printed brief ------------------------------------------------------ */

.capture-memo {
  display: grid;
  gap: 16px;
  padding: 26px 28px 24px;
  transform: rotate(1.4deg);
  font-size: 13px;
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(35, 28, 23, 0.08),
    0 24px 50px -24px rgba(35, 28, 23, 0.4),
    0 60px 90px -60px rgba(90, 50, 40, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* A strip of washi-style tape holding the memo to the page */
.capture-memo::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 22px;
  margin-left: -48px;
  transform: rotate(-3deg);
  background: color-mix(in srgb, var(--rose) 34%, transparent);
  box-shadow: 0 1px 2px rgba(35, 28, 23, 0.08);
}

.capture-memo {
  overflow: visible;
}

.capture-memo__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}

.capture-memo__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border: 1px solid color-mix(in srgb, var(--rose-deep) 45%, transparent);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.capture-memo__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rose);
}

.capture-memo__when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.capture-memo__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 70, "opsz" 144;
}

.capture-memo__title em {
  font-style: italic;
  color: var(--rose-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.capture-memo__for {
  display: block;
  margin-top: -8px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.capture-memo__grid {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  border-top: 1px solid var(--hair);
}

.capture-memo__k,
.capture-memo__v {
  padding: 8px 0;
  border-bottom: 1px solid var(--hair-2);
}

.capture-memo__k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 10px;
}

.capture-memo__v {
  font-weight: 500;
  line-height: 1.4;
}

.capture-memo__v .chip {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10.5px;
  vertical-align: 1px;
}

.capture-memo__v small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
}

.capture-memo__h {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.capture-memo__quote {
  display: block;
  padding-left: 12px;
  border-left: 2px solid var(--rose);
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-2);
}

.capture-memo__points {
  display: grid;
  gap: 6px;
}

.capture-memo__points .capture-memo__h {
  margin-bottom: 0;
}

.capture-memo__pt {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.capture-memo__pt i {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.2;
  color: var(--rose-deep);
}

.capture-memo__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

.capture-memo__flag {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.capture-memo__flag b {
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.capture-memo__range {
  display: grid;
  justify-items: end;
  text-align: right;
}

.capture-memo__range small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capture-memo__range span {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  font-variation-settings: "SOFT" 60, "opsz" 72;
}

/* The email -------------------------------------------------------------- */

.capture-email {
  transform: rotate(-0.8deg);
  box-shadow: var(--shadow-3);
}

.capture-email__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(var(--card), color-mix(in srgb, var(--paper-2) 50%, var(--card)));
}

.capture-email__box {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capture-email__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--moss);
}

.capture-email__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

.capture-email .mock__meta {
  gap: 5px;
  padding: 14px 20px 16px;
}

.capture-email__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  font-size: 12.5px;
}

.capture-email__row > span {
  color: var(--ink-3);
}

.capture-email .mock__subject {
  margin-top: 8px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.capture-email__body {
  display: grid;
  gap: 12px;
  padding: 18px 20px 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.capture-email__p {
  display: block;
}

.capture-email__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blush) 45%, var(--card));
}

.capture-email__price small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.capture-email__price b {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "opsz" 72;
}

.capture-email__incl {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

.capture-email__incl > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
}

.capture-email__incl .tick {
  margin-top: 2px;
}

.capture-email__btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--rose-deep);
  color: var(--card);
  font-size: 12.5px;
  font-weight: 500;
}

.capture-email__sig {
  display: grid;
  gap: 2px;
  padding-top: 6px;
}

.capture-email__sig em {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
}

.capture-email__sig span {
  font-size: 11px;
  color: var(--ink-3);
}

/* The story column ------------------------------------------------------- */

.capture-aside {
  position: relative;
  align-self: stretch;
}

.capture-aside__inner {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  display: grid;
  gap: 32px;
  padding-top: 132px;
}

.capture-prose {
  font-size: clamp(1.14rem, 1rem + 0.42vw, 1.36rem);
}

.capture-prose p::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 3.4em;
  line-height: 0.8;
  font-style: italic;
  color: var(--rose-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.capture-clock {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 0;
}

.capture-clock::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: color-mix(in srgb, var(--rose-deep) 45%, transparent);
}

.capture-clock li {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: baseline;
  padding: 7px 0 7px 22px;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.capture-clock li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--rose-wash);
  border: 1px solid var(--rose-deep);
}

.capture-clock li:last-child::before {
  background: var(--rose);
}

.capture-clock .num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--capture-rose-ink);
}

.capture-cta {
  justify-self: start;
}

/* One pipeline ----------------------------------------------------------- */

.capture-pipe {
  margin-top: clamp(44.6px, 5vw, 74.4px);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(14.9px, 2.5vw, 39.7px);
  align-items: center;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--card) 55%, var(--rose-wash));
  border: 1px solid color-mix(in srgb, var(--rose-deep) 18%, transparent);
  box-shadow: var(--shadow-1);
}

.capture-pipe__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 300;
  line-height: 1.3;
  font-variation-settings: "SOFT" 80, "opsz" 36;
}

.capture-pipe__lead .mono {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--capture-rose-ink);
}

.capture-pipe__flow {
  display: grid;
  grid-template-columns: auto 56px auto minmax(24px, 1fr) auto;
  align-items: center;
}

.capture-pipe__sources {
  display: grid;
  gap: 10px;
}

.capture-pipe__src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hair);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.capture-pipe__src i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
}

.capture-pipe__join {
  width: 100%;
  height: 104px;
}

.capture-pipe__join path {
  fill: none;
  stroke: color-mix(in srgb, var(--rose) 70%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.capture-pipe__inbox,
.capture-pipe__crm {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 14px;
  line-height: 1.3;
}

.capture-pipe__inbox {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 16px 30px -18px rgba(35, 28, 23, 0.7);
}

.capture-pipe__inbox b,
.capture-pipe__crm b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  font-variation-settings: "SOFT" 80, "opsz" 36;
}

.capture-pipe__inbox span,
.capture-pipe__crm span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.capture-pipe__crm {
  border: 1px solid color-mix(in srgb, var(--rose) 55%, transparent);
  background: color-mix(in srgb, var(--blush) 40%, var(--card));
}

.capture-pipe__line {
  position: relative;
  height: 1px;
  margin-inline: 10px;
  background: color-mix(in srgb, var(--rose) 70%, transparent);
}

.capture-pipe__line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--rose);
  border-right: 1px solid var(--rose);
  transform: rotate(45deg);
}

/* What we build ---------------------------------------------------------- */

.capture-build {
  margin-top: clamp(49.6px, 5.6vw, 84.3px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(24.8px, 3.1vw, 54.6px);
  align-items: start;
}

.capture-build__side {
  align-self: stretch;
}

.capture-build__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  display: grid;
  gap: 18px;
  justify-items: start;
}

.capture-build__title {
  max-width: 14ch;
}

.capture-build__note {
  max-width: 24rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.capture-list > li:nth-child(-n + 2) {
  border-top-color: var(--capture-rose-ink);
}

/* Hand-off: what Capture makes is what Run takes ------------------- */

.capture-handoff {
  margin-top: clamp(44.6px, 5vw, 74.4px);
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: clamp(9.9px, 1.5vw, 22.3px);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 44px);
  border-radius: var(--r-xl);
  background: linear-gradient(100deg, color-mix(in srgb, var(--card) 45%, var(--rose-wash)) 0%, color-mix(in srgb, var(--card) 45%, var(--rose-wash)) 22%, var(--night-2) 70%);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out);
}

.capture-handoff:hover {
  transform: translateY(-2px);
}

.capture-handoff:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.capture-handoff__out,
.capture-handoff__in {
  display: grid;
  gap: 4px;
}

.capture-handoff__in {
  justify-items: end;
  text-align: right;
  color: var(--cream);
}

.capture-handoff__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--capture-rose-ink);
}

.capture-handoff__in .capture-handoff__k {
  color: var(--gold);
}

.capture-handoff__v {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
}

.capture-handoff__v em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
}

.capture-handoff__in .capture-handoff__v {
  max-width: 19ch;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
}

.capture-handoff__track svg {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

.capture-handoff__track path {
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.capture-handoff__path {
  stroke: color-mix(in srgb, var(--gold) 80%, var(--rose));
  stroke-dasharray: 2 7;
}

.capture-handoff__head {
  stroke: var(--gold);
}

/* Motion: a live caret and a quiet pulse, only while on screen ------------ */

@media (prefers-reduced-motion: no-preference) {
  .capture.is-live .capture-caret {
    animation: capture-blink 1.1s steps(1, end) infinite;
  }

  .capture.is-live .capture-pulse::after {
    animation: capture-ping 2.4s var(--ease-out) infinite;
  }
}

@keyframes capture-blink {
  50% {
    opacity: 0;
  }
}

@keyframes capture-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .capture-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .capture-aside__inner {
    position: static;
    padding-top: 0;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }

  .capture-prose {
    grid-row: span 3;
  }

  .capture-aside {
    order: -1;
    margin-bottom: 24px;
  }

  .capture-collage {
    max-width: 880px;
    width: 100%;
    margin-inline: auto;
  }

  .capture-pipe {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tablet: keep the phone off the brief's text column */
@media (min-width: 761px) and (max-width: 900px) {
  .capture-fig--memo {
    padding-left: 96px;
  }
}

@media (max-width: 760px) {
  .capture-aside__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .capture-prose {
    grid-row: auto;
  }

  .capture-bud {
    display: none;
  }

  .capture-handoff {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 10px;
    background: linear-gradient(172deg, color-mix(in srgb, var(--card) 45%, var(--rose-wash)) 0%, color-mix(in srgb, var(--card) 45%, var(--rose-wash)) 34%, var(--night-2) 60%);
  }

  .capture-handoff__track {
    width: 1px;
    height: 30px;
    margin-left: 6px;
    background: linear-gradient(var(--rose-deep), var(--gold));
  }

  .capture-handoff__track svg {
    display: none;
  }

  .capture-handoff__in {
    justify-items: start;
    text-align: left;
  }

  /* The collage restacks but stays layered: phone, brief tucked beneath it,
     then the email offset the other way */
  .capture-collage {
    display: flex;
    flex-direction: column;
  }

  .capture-fig--phone {
    align-self: center;
    width: min(100%, 300px);
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  .capture-fig--phone .fig-cap {
    order: -1;
    margin: 0 0 14px;
  }

  .capture-fig--memo {
    z-index: 4;
    margin-top: -18px;
    padding-left: 0;
    margin-left: 20px;
    margin-right: 2px;
  }

  .capture-fig--memo .fig-cap {
    justify-content: flex-start;
  }

  .capture-fig--email {
    z-index: 5;
    margin: 40px 14px 0 2px;
  }

  .capture-fig--email .fig-cap {
    justify-content: flex-start;
  }

  .capture-memo {
    padding: 22px 18px 20px;
  }

  .capture-memo__grid {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .capture-memo__foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .capture-memo__range {
    justify-items: start;
    text-align: left;
  }

  .capture-email .mock__subject {
    font-size: 17px;
  }

  .capture-pipe {
    border-radius: var(--r-lg);
  }

  .capture-pipe__flow {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
  }

  .capture-pipe__sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .capture-pipe__join {
    width: 64px;
    height: 44px;
    transform: rotate(90deg);
  }

  .capture-pipe__inbox,
  .capture-pipe__crm {
    width: 100%;
    text-align: center;
  }

  .capture-pipe__line {
    width: 1px;
    height: 32px;
    margin: 0;
  }

  .capture-pipe__line::after {
    right: -4px;
    top: auto;
    bottom: 0;
    transform: rotate(135deg);
  }

  .capture-build {
    grid-template-columns: minmax(0, 1fr);
  }

  .capture-build__sticky {
    position: static;
  }

  .capture-list > li:nth-child(2) {
    border-top-color: var(--hair);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capture-fed,
  .capture-handoff {
    transition: none;
  }

  .capture-fed:hover,
  .capture-handoff:hover {
    transform: none;
  }
}

/* ---- src/css/sections/run.css ---- */
/* ==========================================================================
   Phase 03 · Run
   Calm command of a full calendar: warm gold, lamplit, on night.
   ========================================================================== */

.run {
  --cap-glow: color-mix(in srgb, var(--candle) 60%, var(--gold));
  overflow: clip;
}

/* Atmosphere --------------------------------------------------------------- */

.run-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.run-sky__glow {
  position: absolute;
  border-radius: 50%;
}

.run-sky__glow--a {
  width: 1100px;
  height: 900px;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 20%, transparent), transparent);
}

.run-sky__glow--b {
  width: 700px;
  height: 700px;
  right: -240px;
  top: -200px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--candle) 11%, transparent), transparent);
}

.run-sky__arc {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(360px, 38vw, 560px);
  width: 100%;
  height: 520px;
  color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Head --------------------------------------------------------------------- */

.run-head {
  position: relative;
  padding-top: clamp(14.9px, 1.9vw, 29.8px);
}

/* The shared .phase-mast lockup (components.css) opens the section. */
.run-mast .phase-mast__num {
  text-shadow: 0 0 60px color-mix(in srgb, var(--gold) 30%, transparent);
}

.run-flow {
  display: flex;
}

.run-title {
  margin-top: 0;
  line-height: 0.98;
  max-width: 9.5em;
}

.run-title em {
  display: block;
  color: var(--cap-glow);
  text-shadow: 0 0 48px color-mix(in srgb, var(--gold) 40%, transparent);
}

/* The writing on the left, every product view beside it on the right */
.run-main {
  display: grid;
  grid-template-columns: minmax(0, 4.1fr) minmax(0, 7.9fr);
  gap: clamp(20px, 2.6vw, 46px);
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 34px);
}

.run-head__lower {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

.run-head__kick {
  padding-top: 6px;
}

.run-kicker {
  max-width: 16em;
}

.run-head__rule {
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.run-prose {
  max-width: 40rem;
  color: var(--cream-2);
  font-size: clamp(1.12rem, 1rem + 0.45vw, 1.4rem);
}

.run-prose p::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-size: 3.4em;
  line-height: 0.8;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--cap-glow);
}

/* The stage ---------------------------------------------------------------- */

.run-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* The flexible last row takes the phone's overhang, so row 2 ends with the
     briefing and the statement starts right beneath it, beside the phone. */
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  min-width: 0;
  margin-top: 0;
}

.run-fig {
  position: relative;
  margin: 0;
  min-width: 0;
}

.run-fig--brief {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  align-self: start;
  z-index: 1;
}

.run-fig--guard {
  grid-column: 8 / 13;
  grid-row: 1;
  margin-top: 104px;
  margin-left: -56px;
  z-index: 2;
}

.run-fig--phone {
  grid-column: 9 / 13;
  grid-row: 2 / 4;
  margin-top: 56px;
  z-index: 3;
  justify-self: center;
  width: 300px;
}

.run-fig .fig-cap b {
  flex: none;
  white-space: nowrap;
}

/* The briefing's tilted corner reaches under the guardrails panel, so the
   Fig. 9 caption sits right-aligned beneath the panel, clear of the paper. */
.run-fig--guard .fig-cap {
  justify-content: flex-end;
  text-align: right;
  padding-right: 6px;
}

.run-fig--phone .fig-cap {
  justify-content: center;
}

/* Fig 1 · The Monday briefing ---------------------------------------------- */

.run-brief-wrap {
  position: relative;
}

.run-brief {
  padding: 34px 76px 34px 36px;
  transform: rotate(-1.1deg);
  transform-origin: 60% 0;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 40px 90px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 120px -30px color-mix(in srgb, var(--candle) 35%, transparent);
  color: var(--ink);
}

.run-brief__mast {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 3px double color-mix(in srgb, var(--ink) 55%, transparent);
}

.run-brief__studio {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.run-brief__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.3vw, 50px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

.run-brief__dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.run-brief__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.run-brief__tally {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--hair);
}

.run-tally {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
}

.run-tally + .run-tally {
  padding-left: 20px;
  border-left: 1px solid var(--hair);
}

.run-tally b {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.9;
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  letter-spacing: -0.03em;
}

.run-tally--you b {
  color: var(--wine);
}

.run-tally--done b {
  color: var(--gold-deep);
}

.run-tally > span {
  display: grid;
  gap: 2px;
}

.run-tally__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.run-tally__note {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

.run-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--hair-2);
}

.run-row__out {
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 2px;
}

.run-row__out b {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 350;
  font-variation-settings: "SOFT" 60, "opsz" 72;
  color: var(--ink);
}

.run-row__out span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.run-row--lead .run-row__out b {
  color: var(--gold-deep);
}

.run-row__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.run-row__who {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  font-variation-settings: "SOFT" 60, "opsz" 24;
}

.run-row--lead .run-row__who {
  font-size: 22px;
}

.run-row__where {
  font-size: 12.5px;
  color: var(--ink-3);
}

.run-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.run-row__chips .chip {
  font-size: 11.5px;
  padding: 3px 9px;
}

.run-row__flag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.35;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--wine-deep);
}

.run-row__flag i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wine);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine) 18%, transparent);
}

.run-brief__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
}

.run-brief__sync {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* The vendor packet, clipped on */
.run-slip {
  position: relative;
  width: 300px;
  margin: -6px 0 0 20%;
  z-index: 4;
  transform: rotate(-2.2deg);
}

.run-slip__clip {
  position: absolute;
  top: -14px;
  left: 34px;
  z-index: 2;
  width: 16px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--gold) 80%, var(--cream));
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.run-slip__card.mock {
  display: grid;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow-night), var(--shadow-2);
}

.run-slip__card .mock__label {
  color: var(--gold-deep);
}

.run-slip__title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-variation-settings: "SOFT" 60, "opsz" 24;
  margin-top: -4px;
}

.run-slip__ros {
  display: grid;
  gap: 5px;
  padding: 10px 0;
  border-block: 1px solid var(--hair-2);
  font-size: 12.5px;
  color: var(--ink-2);
}

.run-slip__ros b {
  display: inline-block;
  width: 62px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}

.run-slip__vendors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 12.5px;
}

.run-slip__vendors > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.run-slip__vendors .is-waiting {
  grid-column: 1 / -1;
  align-items: flex-start;
  color: var(--gold-deep);
  font-weight: 500;
}

.run-slip__wait {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px dashed var(--gold);
}

/* Fig 2 · Capacity guardrails (a night instrument) ------------------------- */

.run-guard.mock {
  padding: 26px 26px 22px;
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 60%),
    color-mix(in srgb, var(--night-3) 82%, var(--night));
  color: var(--cream);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  border-radius: var(--r-lg);
  box-shadow:
    var(--shadow-night),
    0 0 0 6px color-mix(in srgb, var(--night-2) 70%, transparent),
    0 0 90px -20px color-mix(in srgb, var(--gold) 35%, transparent);
}

.run-guard .mock__label {
  display: block;
  color: var(--gold);
}

.run-guard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.run-guard__title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  font-variation-settings: "SOFT" 80, "opsz" 72;
}

.run-guard__score {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 6px;
  row-gap: 0;
  align-items: baseline;
  font-size: 11px;
  color: var(--cream-3);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.run-guard__score b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  text-align: right;
  color: var(--cream);
  letter-spacing: 0;
}

.run-guard__score b:first-child {
  color: var(--candle);
}

/* The season grid: one mark per Saturday */
.run-season {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  padding: 14px 0 12px;
  border-block: 1px solid var(--hair-dark);
}

.run-season__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  min-height: 38px;
  padding: 0 8px 0 0;
  border-radius: 10px;
}

.run-season__m {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
  padding-left: 8px;
}

.run-season__days {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  gap: 6px;
}

.run-season__row.is-full {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
}

.run-season__row.is-full .run-season__m {
  color: var(--candle);
}

.run-season__full {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--cap-glow);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* Marks: booked = full bloom, held = bud, open = empty ring */
.run-season i,
.run-guard__legend i {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
}

.run-season i::before,
.run-guard__legend i::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.run-season .is-b,
.run-guard__legend .is-b {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--candle) 30%, transparent), transparent);
}

.run-season .is-b::before,
.run-guard__legend .is-b::before {
  width: 26px;
  height: 26px;
  background: linear-gradient(160deg, var(--candle), var(--gold));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><path d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(72)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(144)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(216)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(288)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><circle r='1.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><path d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(72)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(144)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(216)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><path transform='rotate(288)' d='M0 -2.2C3.6 -3.8 3.9 -9.2 0 -11.4C-3.9 -9.2 -3.6 -3.8 0 -2.2Z'/><circle r='1.5'/></svg>") center / contain no-repeat;
}

.run-season .is-h::before,
.run-guard__legend .is-h::before {
  width: 20px;
  height: 22px;
  background: color-mix(in srgb, var(--gold) 70%, var(--rose));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -11 20 22'><path d='M0 6C-4.6 3.4 -5 -3.6 -1.2 -9.4C-0.6 -5 0.6 -5 1.2 -9.4C5 -3.6 4.6 3.4 0 6Z'/><path d='M-0.6 5.4h1.2V10.8h-1.2Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -11 20 22'><path d='M0 6C-4.6 3.4 -5 -3.6 -1.2 -9.4C-0.6 -5 0.6 -5 1.2 -9.4C5 -3.6 4.6 3.4 0 6Z'/><path d='M-0.6 5.4h1.2V10.8h-1.2Z'/></svg>") center / contain no-repeat;
}

.run-season .is-o::before,
.run-guard__legend .is-o::before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream) 34%, transparent);
}

.run-guard__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cream-2);
}

.run-guard__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.run-guard__legend i {
  width: 26px;
  height: 26px;
  transform: scale(0.8);
}

.run-guard__legend .is-b::before {
  width: 20px;
  height: 20px;
}

.run-guard__legend-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--cream-3);
}

/* Rules */
.run-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.run-rules__label {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.run-rule {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair-dark);
  font-size: 12.5px;
  color: var(--cream-2);
}

.run-rule b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--cream);
}

.run-rule.is-tripped {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--cream);
}

.run-rule.is-tripped b {
  color: var(--candle);
}

/* The moment a guardrail trips */
.run-trip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--candle) 94%, var(--cream)), var(--gold));
  color: var(--night);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--gold) 70%, transparent);
}

.run-trip__icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--night-2);
  opacity: 0.85;
}

.run-trip__head {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
}

.run-trip__body {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--night) 82%, var(--gold));
}

/* Ledger */
.run-ledger {
  display: grid;
  margin-top: 16px;
}

.run-ledger__label {
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.run-ledger__row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px dashed var(--hair-dark);
  font-size: 13px;
  color: var(--cream);
}

.run-ledger__row > .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-3);
}

.run-ledger__row em {
  font-style: normal;
  color: var(--gold);
  padding-inline: 2px;
}

.run-guard .chip--gold {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--candle);
  font-size: 11px;
}

/* Fig 3 · The phone ------------------------------------------------------- */

.run-phone-wrap {
  position: relative;
}

.run-phone {
  transform: rotate(3deg);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.run-phone .mock__screen {
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--paper) 70%, var(--card)));
  padding-bottom: 18px;
}

.run-phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 26px 0;
  height: 44px;
  font-size: 12px;
  font-weight: 600;
}

.run-phone__sig {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.run-phone__sig i {
  width: 3px;
  border-radius: 1px;
  background: var(--ink);
}

.run-phone__sig i:nth-child(1) { height: 5px; }
.run-phone__sig i:nth-child(2) { height: 7px; }
.run-phone__sig i:nth-child(3) { height: 9px; }

.run-phone__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px;
  border-bottom: 1px solid var(--hair-2);
}

.run-phone__head .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.run-phone__head > span:last-child {
  display: grid;
  line-height: 1.25;
}

.run-phone__head b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 450;
  font-variation-settings: "SOFT" 60, "opsz" 24;
}

.run-phone__head b + span {
  font-size: 11px;
  color: var(--ink-3);
}

.run-phone__thread {
  display: grid;
  gap: 9px;
  padding: 14px 12px 0;
}

.run-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 12.5px;
  line-height: 1.42;
}

.run-bubble--in {
  justify-self: start;
  background: color-mix(in srgb, var(--gold) 16%, var(--card));
  border-bottom-left-radius: 5px;
}

.run-bubble--out {
  justify-self: end;
  background: var(--ink);
  color: var(--cream);
  border-bottom-right-radius: 5px;
}

.run-bubble--small {
  font-size: 12px;
  padding: 7px 11px;
}

.run-check {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-1);
}

.run-check__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.run-check__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0 6px;
  border-top: 1px solid var(--hair-2);
}

.run-check__item > span {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.run-check__item b {
  font-size: 12.5px;
  font-weight: 600;
}

.run-check__item > span > span {
  font-size: 11.5px;
  color: var(--ink-3);
}

.run-check__box {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

.run-check__item.is-done .run-check__box {
  border-color: var(--gold-deep);
  background: var(--gold-deep);
}

.run-check__item.is-done .run-check__box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--card);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.run-check__item.is-part .run-check__box {
  border-color: var(--gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, var(--card)) 50%, transparent 50%);
}

.run-check__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.run-check__bar .progress {
  flex: 1;
  height: 5px;
  --accent: var(--gold);
}

.run-check__bar .num {
  font-size: 11px;
  color: var(--ink-2);
}

/* A handwritten-feeling tag that floats beside the phone */
.run-tag {
  position: absolute;
  z-index: 5;
  top: 118px;
  left: -150px;
  max-width: 170px;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 3px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  box-shadow: var(--shadow-night);
  transform: rotate(-4deg);
}

/* A pull quote paired with Fig. 10, set level with the phone beside it */
.run-statement {
  grid-column: 1 / 8;
  grid-row: 3;
  align-self: start;
  margin: clamp(40px, 4vw, 64px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 144;
  color: var(--cream);
}

.run-statement span,
.run-statement em {
  display: block;
}

.run-statement em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--cap-glow);
}

/* Sits directly under the Fig. 10 caption */
.run-illustrative {
  margin-top: 10px;
  text-align: center;
}

/* What we do --------------------------------------------------------------- */

.run-offer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24.8px, 3.7vw, 59.5px);
  margin-top: clamp(39.7px, 4.3vw, 64.5px);
  padding-top: clamp(29.8px, 3.1vw, 44.6px);
  border-top: 1px solid var(--hair-dark);
}

.run-offer__aside {
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}

.run-offer__title {
  margin-top: 18px;
}

.run-offer__title em {
  color: var(--cap-glow);
}

.run-offer__note {
  margin-top: 18px;
  max-width: 24rem;
  color: var(--cream-2);
  font-size: var(--fs-small);
}

.run-cta {
  margin-top: 28px;
}

.run-cta-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--cream-3);
}

.run-list {
  columns: 2 18rem;
}

.run-list > li {
  padding-bottom: 24px;
}

/* Motion ------------------------------------------------------------------ */
/* JS adds .run--anim when motion is allowed; .is-live when the stage is seen. */

.run--anim .run-season i {
  opacity: 0;
  transform: scale(0.4) rotate(-40deg);
  transition:
    opacity 600ms var(--ease-out) var(--i, 0ms),
    transform 900ms var(--ease-out) var(--i, 0ms);
}

.run--anim .run-season__row.is-full {
  transition: background-color 600ms, box-shadow 600ms;
}

.run--anim .run-trip,
.run--anim .run-ledger__row,
.run--anim .run-season__full {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 700ms var(--ease-out) var(--i, 0ms),
    transform 900ms var(--ease-out) var(--i, 0ms);
}

.run--anim .run-check__item.is-done .run-check__box {
  background: transparent;
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
  transition: background-color 400ms var(--ease-out) 1400ms, border-color 400ms var(--ease-out) 1400ms;
}

.run--anim .run-check__item.is-done .run-check__box::after {
  opacity: 0;
  transition: opacity 300ms 1600ms;
}

.run--anim .run-bubble--out,
.run--anim .run-bubble--small {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}

.run--anim .run-bubble--out { transition-delay: 2000ms; }
.run--anim .run-bubble--small { transition-delay: 2700ms; }

.run--anim.is-live .run-season i,
.run--anim.is-live .run-trip,
.run--anim.is-live .run-ledger__row,
.run--anim.is-live .run-season__full,
.run--anim.is-live .run-bubble--out,
.run--anim.is-live .run-bubble--small {
  opacity: 1;
  transform: none;
}

.run--anim.is-live .run-check__item.is-done .run-check__box {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.run--anim.is-live .run-check__item.is-done .run-check__box::after {
  opacity: 1;
}

/* A slow breath on the booked blooms once the season has opened */
@keyframes run-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.run--anim.is-glowing .run-season .is-b {
  animation: run-breathe 4.8s var(--ease-in-out) infinite;
  animation-delay: var(--i, 0ms);
}

.run--anim.is-paused .run-season .is-b {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .run *,
  .run *::before,
  .run *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1180px) {
  .run-brief {
    padding-right: 60px;
  }

  .run-fig--guard {
    margin-left: -40px;
  }

  .run-tag {
    left: -170px;
  }
}

@media (max-width: 1023px) {
  /* Stacked: the writing sits above its product views again */
  .run-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .run-head__lower {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .run-statement {
    order: 5;
    align-self: stretch;
    margin: 72px 0 0;
  }

  .run-stage {
    display: flex;
    flex-direction: column;
  }

  .run-fig--brief {
    width: min(100%, 680px);
  }

  .run-fig--guard {
    width: min(100%, 520px);
    align-self: flex-end;
    margin-top: 120px;
  }

  .run-fig--phone {
    align-self: flex-start;
    margin-top: -120px;
    margin-left: 4%;
  }

  .run-tag {
    left: auto;
    right: -150px;
    top: 150px;
    border-radius: 12px 12px 3px 12px;
  }

  .run-fig--guard .fig-cap {
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 0 6px;
  }

  .run-offer {
    grid-template-columns: 1fr;
  }

  .run-offer__aside {
    position: static;
  }
}

/* Tablet: the guardrails panel spans most of the row, so the phone drops
   clear of the referral ledger and the Fig. 9 caption instead of tucking under. */
@media (min-width: 561px) and (max-width: 900px) {
  .run-fig--phone {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .run-head {
    padding-top: 12px;
  }

  .run-stage {
    margin-top: 56px;
  }

  .run-brief {
    padding: 22px 16px 18px;
    transform: rotate(-0.8deg);
  }

  .run-brief__title {
    font-size: 32px;
  }

  .run-brief__dateline span:last-child,
  .run-brief__dateline .run-brief__dot:nth-of-type(4) {
    display: none;
  }

  .run-tally {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
  }

  .run-tally + .run-tally {
    padding-left: 12px;
  }

  .run-tally b {
    font-size: 40px;
  }

  .run-tally__note {
    display: none;
  }

  .run-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .run-row__out b {
    font-size: 24px;
  }

  .run-row__who,
  .run-row--lead .run-row__who {
    font-size: 18px;
  }

  .run-row__flag {
    font-size: 13.5px;
  }

  .run-brief__foot {
    font-size: 11.5px;
  }

  .run-slip {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(84%, 280px);
    margin: -12px -6px 0 auto;
  }

  .run-fig--brief .fig-cap {
    margin-top: 18px;
  }

  .run-fig--guard {
    margin-top: 64px;
    width: 100%;
  }

  .run-guard.mock {
    padding: 20px 16px 18px;
  }

  .run-guard__title {
    font-size: 21px;
  }

  .run-season__row {
    grid-template-columns: 40px 1fr auto;
    padding-right: 6px;
  }

  .run-season__m {
    padding-left: 6px;
  }

  .run-season__days {
    grid-template-columns: repeat(5, minmax(0, 32px));
    gap: 2px;
  }

  .run-season i {
    width: 32px;
    height: 34px;
  }

  .run-season .is-b::before {
    width: 23px;
    height: 23px;
  }

  .run-guard__legend-note {
    display: none;
  }

  .run-trip {
    padding: 14px;
  }

  .run-trip__head {
    font-size: 19px;
  }

  .run-ledger__row {
    grid-template-columns: 46px 1fr auto;
    gap: 8px;
    font-size: 12.5px;
  }

  .run-fig--phone {
    width: 268px;
    margin-top: 40px;
    margin-left: 0;
    align-self: flex-end;
    margin-right: 4px;
  }

  .run-tag {
    right: auto;
    left: -62px;
    top: -22px;
    max-width: 156px;
    font-size: 14px;
    border-radius: 12px 12px 12px 3px;
  }

  .run-statement {
    margin-top: 56px;
  }

  .run-list {
    columns: 1;
  }
}


/* Hand-off: Run feeds Encore (matches Capture's band) -------------- */

.run-handoff {
  margin-top: clamp(44.6px, 5vw, 74.4px);
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: clamp(9.9px, 1.5vw, 22.3px);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 44px);
  border-radius: var(--r-xl);
  background: linear-gradient(100deg, var(--night-3) 0%, var(--night-3) 26%, color-mix(in srgb, var(--blush) 70%, var(--card)) 74%);
  color: var(--cream);
  text-decoration: none;
  box-shadow: var(--shadow-night), 0 0 0 1px var(--hair-dark);
  transition: transform var(--dur-2) var(--ease-out);
}

.run-handoff:hover {
  transform: translateY(-2px);
}

.run-handoff:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.run-handoff__out,
.run-handoff__in {
  display: grid;
  gap: 4px;
}

.run-handoff__in {
  justify-items: end;
  text-align: right;
  color: var(--ink);
}

.run-handoff__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.run-handoff__in .run-handoff__k {
  color: var(--wine-deep);
}

.run-handoff__v {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
}

.run-handoff__v em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
}

.run-handoff__in .run-handoff__v {
  max-width: 19ch;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
}

.run-handoff__track svg {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

.run-handoff__track path {
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.run-handoff__path {
  stroke: color-mix(in srgb, var(--gold) 70%, var(--wine));
  stroke-dasharray: 2 7;
}

.run-handoff__head {
  stroke: var(--wine);
}

@media (max-width: 700px) {
  .run-handoff {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 10px;
    background: linear-gradient(172deg, var(--night-3) 0%, var(--night-3) 34%, color-mix(in srgb, var(--blush) 70%, var(--card)) 60%);
  }

  .run-handoff__track {
    width: 1px;
    height: 30px;
    margin-left: 6px;
    background: linear-gradient(var(--gold), var(--wine));
  }

  .run-handoff__track svg {
    display: none;
  }

  .run-handoff__in {
    justify-items: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-handoff {
    transition: none;
  }
}

/* ---- src/css/sections/encore.css ---- */
/* ==========================================================================
   Phase 04 · Encore  (blush)
   The tender one: a seed head letting go, a review, an anniversary, a card.
   ========================================================================== */

.encore {
  --ac-ink-wine: color-mix(in srgb, var(--wine-deep) 88%, var(--ink));
  --ac-line: color-mix(in srgb, var(--wine) 26%, transparent);
  overflow: clip;
}

/* Evening light washing across the blush */
.encore-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 88% 6%, color-mix(in srgb, var(--candle) 34%, transparent), transparent 70%),
    radial-gradient(50% 40% at 4% 46%, color-mix(in srgb, var(--wine) 12%, transparent), transparent 72%),
    radial-gradient(70% 36% at 60% 100%, color-mix(in srgb, var(--rose) 16%, transparent), transparent 70%);
}

.encore-wrap {
  position: relative;
}

/* ---------------------------------------------------------------- Header */

.encore-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(9.9px, 1.2vw, 19.8px);
  align-items: start;
}

/* The shared phase masthead, with room on the right for the seed head */
.encore-mast {
  grid-column: 1 / 13;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding-right: clamp(150px, 20vw, 300px);
}

.encore-head__text {
  grid-column: 1 / 11;
  grid-row: 2;
  position: relative;
  z-index: 2;
}

.encore-title {
  max-width: 11ch;
}

.encore-title em {
  display: block;
  color: var(--wine);
}

.encore-kicker {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: start;
  max-width: 22ch;
  margin-top: clamp(12.4px, 1.6vw, 24.8px);
  color: var(--ink-2);
}

/* The writing on the left, every product view beside it on the right */
.encore-main {
  display: grid;
  grid-template-columns: minmax(0, 4.1fr) minmax(0, 7.9fr);
  gap: clamp(20px, 2.6vw, 46px);
  align-items: start;
  margin-top: clamp(18px, 2.2vw, 30px);
}

.encore-head__prose {
  position: relative;
  z-index: 2;
  padding-left: clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--ac-line);
}

.encore-prose {
  color: var(--ink);
}

.encore-prose p::first-letter {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--wine);
}

.encore-head__note {
  margin-top: 22px;
  max-width: 34rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* The seed head: already letting go */
.encore-seedhead {
  grid-column: 10 / 13;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: start;
  width: clamp(170px, 18vw, 270px);
  aspect-ratio: 1 / 1.25;
  margin-top: -12px;
  margin-right: clamp(0px, 3vw, 48px);
  color: var(--wine);
  pointer-events: none;
}

.encore-seedhead__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.encore-seedhead__head {
  transform-origin: 0 0;
}

.encore-seedhead__stem {
  opacity: 0.7;
}

.encore-drift {
  position: absolute;
  width: 26px;
  height: auto;
  color: var(--wine);
  overflow: visible;
}

.encore-drift--1 { top: 2%;  left: 78%; transform: rotate(38deg); opacity: 0.85; }
.encore-drift--2 { top: -12%; left: 104%; transform: rotate(58deg) scale(0.8); opacity: 0.6; }
.encore-drift--3 { top: 20%; left: 112%; transform: rotate(72deg) scale(0.66); opacity: 0.45; }

@media (prefers-reduced-motion: no-preference) {
  .encore.is-live .encore-seedhead__head {
    animation: encore-sway 9s var(--ease-in-out) infinite alternate;
  }
  .encore.is-live .encore-drift--1 { animation: encore-float-1 11s var(--ease-in-out) infinite alternate; }
  .encore.is-live .encore-drift--2 { animation: encore-float-2 13s var(--ease-in-out) infinite alternate; }
  .encore.is-live .encore-drift--3 { animation: encore-float-3 15s var(--ease-in-out) infinite alternate; }
}

@keyframes encore-sway {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}
@keyframes encore-float-1 {
  from { transform: translate(0, 0) rotate(38deg); }
  to   { transform: translate(14px, -18px) rotate(50deg); }
}
@keyframes encore-float-2 {
  from { transform: translate(0, 0) rotate(58deg) scale(0.8); }
  to   { transform: translate(18px, -14px) rotate(70deg) scale(0.8); }
}
@keyframes encore-float-3 {
  from { transform: translate(0, 0) rotate(72deg) scale(0.66); }
  to   { transform: translate(12px, -22px) rotate(84deg) scale(0.66); }
}

/* ----------------------------------------------------------------- Stage */

.encore-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(9.9px, 1.2vw, 19.8px);
  min-width: 0;
  margin-top: 0;
}

.encore-fig {
  position: relative;
  margin: 0;
}

.encore-fig--review {
  grid-column: 1 / 7;
  grid-row: 2;
  z-index: 2;
  align-self: start;
}

/* Screens carry their caption above, like a plate label; paper keeps it below */
.encore-fig--review,
.encore-fig--email {
  display: flex;
  flex-direction: column;
}

.encore-fig--review > .fig-cap,
.encore-fig--email > .fig-cap {
  order: -1;
  margin: 0 0 14px;
}

.encore-fig--email {
  grid-column: 7 / 12;
  grid-row: 2;
  z-index: 1;
  margin-left: clamp(0px, 1.5vw, 24px);
}

.encore-fig--card {
  grid-column: 4 / 8;
  grid-row: 3;
  z-index: 4;
  margin: -18px 0 0 30px;
  justify-self: start;
  width: min(100%, 380px);
}

.encore-fig--cut {
  grid-column: 11 / 13;
  grid-row: 3;
  z-index: 5;
  justify-self: end;
  align-self: start;
  width: 150px;
  margin: -150px -4px 0 0;
}

.encore-illustrative {
  grid-column: 1 / 5;
  grid-row: 2;
  align-self: start;
  max-width: 30ch;
  margin-top: 40px;
}

.encore .fig-cap b {
  flex: none;
  white-space: nowrap;
}

/* Shared small parts */
.encore-glyph {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--card) 0 3px, transparent 3.5px),
    conic-gradient(from 20deg, var(--wine), var(--rose), var(--gold), var(--sage), var(--wine));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  flex: none;
}

/* a) Review engine ------------------------------------------------------- */

.encore-review {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
}

.encore-review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(var(--card), color-mix(in srgb, var(--blush) 26%, var(--card)));
}

.encore-review__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-variation-settings: "SOFT" 80, "opsz" 24;
}

.encore-review__crumb {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.encore-review__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 14px 20px 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.encore-review__steps span {
  display: grid;
  gap: 7px;
}

.encore-review__steps i {
  display: block;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
}

.encore-review__steps .is-done i {
  background: color-mix(in srgb, var(--wine) 55%, var(--card));
}

.encore-review__steps .is-now {
  color: var(--wine-deep);
}

.encore-review__steps .is-now i {
  background: var(--wine);
}

.encore-review__body {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

.encore-ask {
  justify-self: end;
  max-width: 88%;
  display: grid;
  gap: 8px;
}

.encore-ask__head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  font-size: 12px;
}

.encore-ask__head .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  order: 2;
}

.encore-ask__head b {
  font-weight: 600;
}

.encore-ask__bubble {
  padding: 13px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--ac-ink-wine);
  color: var(--cream);
  font-size: 14px;
  line-height: 1.5;
}

.encore-hl {
  color: color-mix(in srgb, var(--candle) 88%, var(--card));
  font-weight: 500;
}

.encore-ask__foot {
  justify-self: end;
  display: flex;
  gap: 12px;
  font-size: 10.5px;
  color: var(--ink-3);
}

.encore-ask__read::before {
  content: "✓✓ ";
  color: var(--wine);
  letter-spacing: -0.2em;
  margin-right: 0.3em;
}

.encore-rv {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--paper) 55%, var(--card));
  border: 1px solid var(--hair-2);
}

.encore-rv::before {
  /* a hairline from the ask down to what it produced */
  content: "";
  position: absolute;
  top: -17px;
  left: 30px;
  width: 1px;
  height: 16px;
  background: var(--ac-line);
}

.encore-rv__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.encore-rv__who {
  display: grid;
  gap: 1px;
  font-size: 13.5px;
  line-height: 1.3;
}

.encore-rv__who b {
  font-weight: 600;
}

.encore-rv__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.encore-rv__new {
  margin-left: auto;
}

.encore-rv__text {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 16.5px;
  line-height: 1.55;
  font-variation-settings: "SOFT" 80, "opsz" 24;
  color: var(--ink);
}

.encore-mark {
  color: inherit;
  background-color: transparent;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 3px;
  background-image: linear-gradient(color-mix(in srgb, var(--wine) 20%, transparent), color-mix(in srgb, var(--wine) 20%, transparent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 42%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .js .encore-mark {
    background-size: 0% 42%;
    transition: background-size 1.1s var(--ease-out) 0.5s;
  }
  .js .encore-fig--review.is-in .encore-mark {
    background-size: 100% 42%;
  }
  .js .encore-fig--review.is-in .encore-mark + .encore-mark,
  .js .encore-fig--review.is-in p .encore-mark:last-child {
    transition-delay: 0.9s;
  }
}

.encore-rv__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--hair);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

.encore-rv__notes > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.encore-lands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--hair-2);
  background: color-mix(in srgb, var(--paper-2) 50%, var(--card));
}

.encore-lands__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.encore-lands__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hair);
  font-size: 12px;
  font-weight: 500;
}

.encore-lands__item i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 22%, transparent);
}

/* b) Anniversary email --------------------------------------------------- */

.encore-email {
  box-shadow: var(--shadow-3);
}

.encore-email__to {
  color: var(--ink-3);
  margin-left: 4px;
}

.encore-email__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--wine-deep);
}

.encore-photo {
  position: relative;
  margin: 18px 20px 0;
  aspect-ratio: 16 / 9.4;
  border-radius: 12px;
  overflow: hidden;
  color: color-mix(in srgb, var(--card) 80%, transparent);
  background:
    radial-gradient(90% 70% at 72% 30%, color-mix(in srgb, var(--candle) 85%, var(--card)) 0%, transparent 60%),
    linear-gradient(176deg,
      color-mix(in srgb, var(--candle) 70%, var(--blush)) 0%,
      color-mix(in srgb, var(--rose) 78%, var(--candle)) 42%,
      color-mix(in srgb, var(--wine) 74%, var(--rose)) 76%,
      color-mix(in srgb, var(--wine-deep) 86%, var(--night)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}

.encore-photo::after {
  /* soft film vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, color-mix(in srgb, var(--wine-deep) 40%, transparent));
  pointer-events: none;
}

.encore-photo__sun {
  position: absolute;
  left: 58%;
  top: 22%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card) 85%, var(--candle)) 0%, color-mix(in srgb, var(--candle) 60%, transparent) 45%, transparent 70%);
}

.encore-photo__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.encore-photo__fruit {
  fill: color-mix(in srgb, var(--wine-deep) 70%, transparent);
  stroke: none;
}

.encore-photo__bulbs circle {
  fill: color-mix(in srgb, var(--card) 92%, var(--candle));
  stroke: none;
}

.encore-photo__stamp {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--card) 88%, transparent);
}

.encore-email__body {
  display: grid;
  gap: 12px;
  padding: 20px 24px 28px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.encore-email__hi {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-variation-settings: "SOFT" 80, "opsz" 24;
}

.encore-email__ask {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blush) 50%, var(--card));
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--wine-deep);
}

.encore-email__sign {
  display: grid;
  gap: 0;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

.encore-email__sign span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-3);
}

.encore-email__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 24px 14px;
  border-top: 1px solid var(--hair-2);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* c) Handwritten card ---------------------------------------------------- */

.encore-card-tilt {
  transform: rotate(-4deg);
  transform-origin: 60% 40%;
}

.encore-card {
  position: relative;
  padding: 26px 28px 30px;
  border-radius: 3px;
  overflow: visible;
  background:
    radial-gradient(130% 100% at 0% 0%, var(--card) 0%, color-mix(in srgb, var(--paper) 70%, var(--card)) 70%, color-mix(in srgb, var(--paper-2) 80%, var(--card)) 100%);
  box-shadow:
    0 1px 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 22px 40px -18px color-mix(in srgb, var(--ink) 45%, transparent),
    0 60px 90px -50px color-mix(in srgb, var(--wine-deep) 50%, transparent);
}

.encore-card__deckle {
  /* a pressed inner border: the letterpress frame */
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--wine) 22%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.encore-card__press {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--wine) 70%, var(--paper));
  /* debossed: light edge below, shade above */
  text-shadow: 0 1px 0 color-mix(in srgb, var(--card) 90%, transparent), 0 -1px 0 color-mix(in srgb, var(--wine-deep) 18%, transparent);
}

.encore-card__press svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
}

.encore-card__hand {
  display: grid;
  gap: 6px;
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.95;
  color: color-mix(in srgb, var(--ink) 82%, var(--wine-deep));
}

.encore-card__to {
  font-size: 16.5px;
}

.encore-card__from {
  justify-self: end;
  margin-top: 2px;
  font-size: 17px;
  transform: rotate(-3deg);
}

/* Tiny extra: the venue's cut -------------------------------------------- */

.encore-cut-tilt {
  transform: rotate(4deg);
}

.encore-cut {
  padding: 7px 7px 10px;
  border-radius: 22px;
  background: var(--night-2);
  box-shadow: var(--shadow-3), inset 0 0 0 1px color-mix(in srgb, var(--cream) 10%, transparent);
}

.encore-cut__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--candle) 60%, var(--rose)) 0%,
      color-mix(in srgb, var(--wine) 70%, var(--rose)) 55%,
      var(--wine-deep) 100%);
}

.encore-cut__glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card) 70%, var(--candle)), transparent 65%);
  opacity: 0.8;
}

.encore-cut__lines {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
  stroke: currentColor;
  stroke-linecap: round;
}

.encore-cut__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--card) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 55%, transparent);
}

.encore-cut__play svg {
  width: 13px;
  height: 13px;
  fill: var(--card);
  margin-left: 2px;
}

.encore-cut__tag {
  white-space: nowrap;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--night) 35%, transparent);
  color: var(--cream);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.encore-cut__bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cream) 30%, transparent);
}

.encore-cut__bar i {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--cream);
}

.encore-cut__label {
  display: block;
  padding: 9px 4px 0;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-2);
  text-align: center;
}

.encore-cut__cap {
  justify-content: flex-end;
  white-space: nowrap;
}

/* ------------------------------------------------------------- What we do */

.encore-do {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(9.9px, 1.2vw, 19.8px);
  margin-top: clamp(59.5px, 5.6vw, 84.3px);
  padding-top: clamp(29.8px, 3.1vw, 44.6px);
  border-top: 1px solid var(--ac-line);
}

.encore-do__intro {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  display: grid;
  justify-items: start;
  gap: 20px;
  padding-right: clamp(0px, 2vw, 24px);
}

.encore-do__title {
  max-width: 14ch;
}

.encore-do__lede {
  max-width: 30ch;
  color: var(--ink-2);
}

.encore-do__cta {
  margin-top: 8px;
}

.encore-list {
  grid-column: 5 / 13;
}

.encore-list.phase-list--cols {
  columns: 2 16rem;
}

.encore-list > li:first-child,
.encore-list > li:nth-child(6) {
  border-top-color: var(--ac-line);
}

/* --------------------------------------------------------- Close the loop */

.encore-close {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(14.9px, 2.5vw, 39.7px);
  margin-top: clamp(59.5px, 6.2vw, 99.2px);
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 4.5vw, 72px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--wine) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wine) 16%, transparent), var(--shadow-1);
}

.encore-close__art {
  width: 100%;
  height: auto;
  color: var(--wine);
  overflow: visible;
}

.encore-close__path {
  stroke: color-mix(in srgb, var(--wine) 60%, transparent);
  stroke-width: 1.4;
}

.encore-close__seed {
  color: var(--wine);
}

.encore-close__sprout {
  color: var(--moss);
  stroke: currentColor;
  stroke-width: 1.4;
}

.encore-close__leaf {
  fill: color-mix(in srgb, var(--sage) 55%, transparent);
}

.encore-close__ground {
  stroke: color-mix(in srgb, var(--ink) 25%, transparent);
  stroke-width: 1;
}

.encore-close__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  text-wrap: balance;
}

.encore-close__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--wine);
}

.encore-close__sub {
  margin-top: 16px;
  max-width: 40rem;
  color: var(--ink-2);
}

.encore-close__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 22px;
  font-size: var(--fs-small);
}

.encore-close__links .text-link:first-child {
  color: var(--wine-deep);
}

.encore-close__loopicon {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur-3) var(--ease-out);
}

.encore-close__links .text-link:hover .encore-close__loopicon {
  transform: rotate(-300deg);
}

@media (prefers-reduced-motion: no-preference) {
  .js .encore-close__path {
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 2.4s var(--ease-out) 0.3s;
  }
  .js .encore-close.is-in .encore-close__path {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .encore-close__loopicon {
    transition: none;
  }
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1100px) {
  .encore-fig--review { grid-column: 1 / 8; }
  .encore-time { grid-column: 1 / 13; }
  .encore-fig--email { grid-column: 8 / 13; margin-left: 0; }
  .encore-fig--card { grid-column: 4 / 10; }
  .encore-fig--cut { grid-column: 10 / 13; width: 136px; margin: -64px 0 0 0; }
  .encore-do__intro {
    grid-column: 1 / 13;
    position: static;
    margin-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: end;
  }
  .encore-do__intro > .eyebrow { grid-column: 1 / 3; }
  .encore-do__intro > .encore-do__cta { grid-column: 2; justify-self: start; }
  .encore-list { grid-column: 1 / 13; }
}

@media (max-width: 860px) {
  .encore-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .encore-mast,
  .encore-head__text,
  .encore-kicker,
  .encore-head__prose {
    grid-column: 1;
  }
  .encore-mast { padding-right: 0; }
  .encore-head__text { grid-row: 2; }
  .encore-kicker { grid-row: 3; margin-top: 18px; }
  .encore-seedhead {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: clamp(96px, 20vw, 150px);
    margin: -10px -4px 0 0;
    z-index: 1;
  }
  .encore-head__prose {
    grid-row: auto;
    margin-top: 0;
  }

  /* Stacked: the writing sits above its product views again */
  .encore-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .encore-stage {
    grid-template-columns: minmax(0, 1fr) 112px;
    column-gap: 0;
    margin-top: 56px;
  }
  .encore-time { grid-column: 1 / 3; }
  .encore-fig--review { grid-column: 1 / 3; grid-row: 2; margin-top: 0; }
  .encore-fig--email {
    grid-column: 1 / 3;
    grid-row: 3;
    margin: 56px 0 0 clamp(12px, 5vw, 48px);
  }
  .encore-fig--card {
    grid-column: 1 / 2;
    grid-row: 4;
    width: auto;
    max-width: 380px;
    margin: -14px 10px 0 -4px;
  }
  .encore-fig--cut {
    grid-column: 2 / 3;
    grid-row: 4;
    align-self: start;
    width: 112px;
    margin: -52px 0 0 0;
  }
  .encore-illustrative { grid-column: 1 / 3; grid-row: 5; margin: 36px 0 0; max-width: none; }

  .encore-close {
    grid-template-columns: minmax(0, 1fr);
  }
  .encore-do__intro { grid-template-columns: minmax(0, 1fr); }
  .encore-do__intro > .eyebrow,
  .encore-do__intro > .encore-do__cta { grid-column: 1; }
  .encore-close__art { max-width: 340px; }
}

@media (max-width: 560px) {
  .encore-seedhead { width: 92px; margin-top: -6px; }
  .encore-title { max-width: 9.5ch; }
  /* the email photo's stamp: date and town only, on one line */
  .encore-photo__stamp-venue { display: none; }
  .encore-review__crumb { display: none; }
  .encore-review__steps { font-size: 8.5px; letter-spacing: 0.03em; }
  .encore-ask { max-width: 94%; }
  .encore-rv__text { font-size: 15.5px; }
  .encore-email__body { padding-inline: 20px; }
  .encore-email__foot { padding-inline: 20px; }
  .encore-photo { margin-inline: 14px; }
  .encore-card { padding: 22px 22px 26px; }
  .encore-card__hand { font-size: 13.5px; }
  /* the card takes the width; the venue's reel overlaps its lower corner,
     its caption set full width underneath */
  .encore-stage { grid-template-columns: minmax(0, 1fr) 132px; }
  .encore-fig--card {
    grid-column: 1 / 3;
    max-width: none;
    margin: -14px 64px 0 -4px;
  }
  .encore-fig--card > .fig-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-right: 76px;
    text-wrap: balance;
  }
  .encore-fig--cut {
    grid-column: 1 / 3;
    grid-row: 5;
    justify-self: stretch;
    width: auto;
    margin: -84px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .encore-cut-tilt { width: 132px; }
  .encore-cut__tag { font-size: 10px; letter-spacing: 0.08em; top: 9px; left: 9px; }
  .encore-cut__label { font-size: 10px; letter-spacing: 0.04em; padding-inline: 2px; }
  .encore-cut__cap { align-self: stretch; justify-content: flex-end; white-space: normal; margin-top: 14px; }
  .encore-illustrative { grid-row: 6; }
  .encore-list.phase-list--cols { columns: 1; }
  .encore-close { padding: 32px 22px; border-radius: var(--r-lg); }
}

/* Close-the-loop art labels */
.encore-close__head {
  color: var(--wine);
}

.encore-close__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--wine-deep);
  text-anchor: middle;
}

.encore-close__tag--sage {
  fill: var(--moss);
}

/* ------------------------------------------------ The encore calendar */

.encore-time {
  grid-column: 1 / 13;
  grid-row: 1;
  margin-bottom: clamp(12px, 1.4vw, 20px);
  align-self: start;
  position: relative;
  z-index: 2;
  padding-top: 8px;
}

.encore-time__title {
  display: grid;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-2);
}

.encore-time__title .mono {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine-deep);
}

.encore-time__list {
  --dot: 11px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
  position: relative;
}

/* the thread: solid through the first month, dotted across the year */
.encore-time__list::before,
.encore-time__list::after {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2);
  height: 1px;
}

.encore-time__list::before {
  left: 0;
  width: 70%;
  background: color-mix(in srgb, var(--wine) 45%, transparent);
}

.encore-time__list::after {
  left: 70%;
  right: 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--wine) 55%, transparent) 0 2px, transparent 2px 7px);
}

.encore-time__list li {
  position: relative;
  display: grid;
  gap: 6px;
  padding: calc(var(--dot) + 14px) 14px 0 0;
}

.encore-time__list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blush) 80%, var(--paper));
}

.encore-time__list li.is-far::before {
  background: color-mix(in srgb, var(--blush) 70%, var(--paper));
  box-shadow: inset 0 0 0 1.5px var(--wine), 0 0 0 4px color-mix(in srgb, var(--blush) 80%, var(--paper));
}

.encore-time__when {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine-deep);
}

.encore-time__what {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .encore-time { grid-column: 1 / 3; grid-row: 1; margin-bottom: 56px; }
  .encore-time__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-left: 26px;
  }
  .encore-time__list::before,
  .encore-time__list::after {
    left: 5px;
    width: 1px;
    height: auto;
  }
  .encore-time__list::before { top: 6px; bottom: 34%; }
  .encore-time__list::after {
    top: 66%;
    bottom: 6px;
    right: auto;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--wine) 55%, transparent) 0 2px, transparent 2px 7px);
  }
  .encore-time__list li {
    grid-template-columns: 5.5em minmax(0, 1fr);
    align-items: baseline;
    padding: 0;
  }
  .encore-time__list li::before { left: -26px; top: 3px; }
}

/* ---- src/css/sections/better.css ---- */
/* ==========================================================================
   Better bookings (wine): three arched windows on a wine ground
   ========================================================================== */

.better {
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 38%, color-mix(in srgb, var(--wine) 34%, transparent) 0%, transparent 70%),
    radial-gradient(60% 40% at 88% 100%, color-mix(in srgb, var(--candle) 9%, transparent) 0%, transparent 70%),
    var(--wine-deep);
}

/* A great faint arbour drawn behind everything */
.better-arbour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.better-arbour path {
  fill: none;
  stroke: color-mix(in srgb, var(--cream) 9%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Header ------------------------------------------------------------------ */

.better-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(18px, 2vw, 28px);
  max-width: 60rem;
  margin-inline: auto;
}

/* Small text on the wine ground stays at cream-2 for contrast (11px labels) */
.better .eyebrow {
  --eyebrow: var(--cream-2);
}

.better-h2 {
  margin-top: 18px;
  font-size: var(--fs-display);
  line-height: 1;
}

.better-h2 em {
  color: var(--blush);
}

.better-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
  color: var(--cream);
  text-wrap: balance;
}

.better-line span {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: color-mix(in srgb, var(--blush) 88%, var(--candle));
}

.better-intro {
  max-width: 40rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--cream-2);
}

/* The three arches -------------------------------------------------------- */

.better-arches {
  list-style: none;
  margin: clamp(64px, 7vw, 104px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: start;
}

.better-arch-wrap--mid {
  margin-top: clamp(0px, 5vw, 72px);
}

.better-arch-wrap:first-child,
.better-arch-wrap:last-child {
  margin-top: clamp(0px, 1vw, 12px);
}

.better-arch {
  --arch: var(--rose);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px) clamp(30px, 3vw, 40px);
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--wine) 30%, var(--wine-deep)) 0%,
      color-mix(in srgb, var(--night) 22%, var(--wine-deep)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 10%, transparent),
    var(--shadow-night);
  isolation: isolate;
}

/* Inner window line: the arch within the arch */
.better-arch::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px 999px calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px);
  border: 1px solid color-mix(in srgb, var(--arch) 38%, transparent);
  pointer-events: none;
  z-index: -1;
}

/* Glow in the head of the arch, like light through glass */
.better-arch::after {
  content: "";
  position: absolute;
  inset: 10px 10px auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--arch) 20%, transparent), transparent);
  pointer-events: none;
  z-index: -1;
}

.better-arch__art {
  width: min(78%, 240px);
  margin: clamp(10px, 1.4vw, 22px) auto 8px;
  color: var(--arch);
}

.better-arch__art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.better-stroke,
.better-laurel path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.better-leaf,
.better-laurel path {
  fill: color-mix(in srgb, currentColor 14%, transparent);
}

.better-petal {
  fill: color-mix(in srgb, currentColor 20%, transparent);
}

.better-faint {
  opacity: 0.5;
}

.better-berry {
  fill: color-mix(in srgb, var(--blush) 70%, var(--rose));
  stroke: color-mix(in srgb, var(--cream) 50%, transparent);
  stroke-width: 0.8;
}

.better-arch__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--arch);
  text-align: center;
}

.better-arch__title {
  margin-top: 2px;
  text-align: center;
  font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 80, "WONK" 0, "opsz" 144;
  color: var(--cream);
}

.better-arch__body {
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--cream-2);
}

.better-arch__foot {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

.better-arch__foot span {
  display: inline-block;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--arch) 40%, transparent);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
}

/* Off season: the one number that proves it -------------------------------- */

.better-season {
  margin-top: auto;
  padding: 18px 18px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--night) 34%, transparent);
  border: 1px solid var(--hair-dark);
}

.better-arch .better-season {
  margin-top: 24px;
}

.better-season__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
}

.better-season__rows {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.better-season__row {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) 3.4em;
  align-items: center;
  gap: 12px;
}

.better-season__m {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cream-2);
}

.better-season__track {
  height: 14px;
}

.better-season__track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 2px 4px 4px 2px;
  transform-origin: left center;
}

/* Same colour coding as the research chart: January wine, August gold */
.better-season__row--jan .better-season__track i {
  background: var(--wine);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blush) 30%, transparent);
}

.better-season__row--aug .better-season__track i {
  background: var(--gold);
}

.better-season__row--jan .better-season__m {
  color: var(--blush);
}

.better-season__v {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  text-align: right;
  color: var(--cream);
}

.better-season__src {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--cream-2);
}

@media (prefers-reduced-motion: no-preference) {
  .js .better-season__track i {
    transform: scaleX(0);
    transition: transform 1.4s var(--ease-out) 500ms;
  }

  .js .is-in .better-season__track i {
    transform: none;
  }

  .js .is-in .better-season__row:last-child .better-season__track i {
    transition-delay: 700ms;
  }
}

/* Closing: run lives in Phase 03, so this only points there ---------- */

.better-close {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 40rem;
  margin: clamp(80px, 9vw, 128px) auto 0;
  text-align: center;
}

.better-close__sprig {
  width: 120px;
  height: 24px;
  color: color-mix(in srgb, var(--blush) 70%, var(--rose));
}

.better-close__sprig path {
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.better-close__sprig path + path {
  fill: color-mix(in srgb, currentColor 18%, transparent);
}

.better-close__title em {
  color: var(--blush);
}

.better-close__body {
  max-width: 34rem;
  margin-bottom: 10px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--cream-2);
}

.better-close__link {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.better-close__link:hover {
  color: var(--candle);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .better-close__link {
    transition: none;
  }
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 1020px) {
  .better-arches {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .better-arch-wrap--mid {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .better-arch-wrap--mid .better-arch {
    border-radius: var(--r-lg);
  }

  .better-arch-wrap--mid .better-arch::before {
    border-radius: calc(var(--r-lg) - 6px);
  }
}

/* Phone: arches become a layered column of windows ----------------------- */

@media (max-width: 680px) {
  .better-head {
    text-align: left;
    justify-items: start;
  }

  .better-arches {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .better-arch-wrap,
  .better-arch-wrap:first-child,
  .better-arch-wrap:last-child,
  .better-arch-wrap--mid {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }

  .better-arch-wrap:nth-child(2) {
    margin-left: 18px;
  }

  .better-arch-wrap:nth-child(1),
  .better-arch-wrap:nth-child(3) {
    margin-right: 18px;
  }

  .better-arch-wrap--mid .better-arch {
    border-radius: 999px 999px var(--r-lg) var(--r-lg);
  }

  .better-arch-wrap--mid .better-arch::before {
    border-radius: 999px 999px calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px);
  }

  .better-arch__art {
    width: 62%;
  }

  .better-close {
    justify-items: start;
    text-align: left;
  }
}

/* ---- src/css/sections/clock.css ---- */
/* ==========================================================================
   Why now: the booking clock (paper)
   A wall-calendar of seven months with the seasons laid across it.
   ========================================================================== */

.clock {
  --clock-eng: var(--rose);
  --clock-book: var(--gold);
  --clock-live: var(--moss);
  --clock-late: var(--wine);
  overflow: hidden;
}

/* Header ------------------------------------------------------------------ */

.clock-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.clock-h2 {
  margin-top: 20px;
  max-width: 14ch;
}

.clock-h2 em {
  display: block;
  color: var(--rose-deep);
}

.clock-facts {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 80, "opsz" 48;
  color: var(--ink);
}

.clock-facts b {
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 48;
  color: var(--rose-deep);
}

.clock-facts__aside {
  margin-top: 18px;
  max-width: 30rem;
  color: var(--ink-2);
}

/* The calendar card ------------------------------------------------------- */

.clock-fig {
  margin-top: clamp(56px, 6vw, 96px);
}

.clock-card {
  position: relative;
  padding: clamp(22px, 2.6vw, 40px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 120% at 0% 0%, #fffefb 0%, var(--card) 45%, color-mix(in srgb, var(--paper-2) 60%, var(--card)) 100%);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-3);
}

/* A second sheet peeking out behind: a desk calendar, not a widget */
.clock-card::before {
  content: "";
  position: absolute;
  inset: 14px -12px -14px 12px;
  z-index: -1;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--blush) 60%, var(--paper));
  transform: rotate(1.1deg);
  box-shadow: var(--shadow-1);
}

.clock-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--hair);
}

.clock-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.clock-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.clock-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.clock-key__sw {
  width: 22px;
  height: 10px;
  border-radius: var(--r-pill);
}

.clock-key__sw--eng {
  background: color-mix(in srgb, var(--clock-eng) 55%, var(--card));
}

.clock-key__sw--book {
  background: color-mix(in srgb, var(--clock-book) 60%, var(--card));
}

.clock-key__sw--sat {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--clock-eng) 22%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clock-eng) 60%, transparent);
}

/* The grid: months as columns, seasons as lanes beneath, pins above ------- */

.clock-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto auto 44px 44px;
  row-gap: 10px;
  margin-top: clamp(18px, 2vw, 28px);
}

.clock-month {
  grid-column: var(--s);
  grid-row: 2;
  position: relative;
  padding: 18px clamp(10px, 1.1vw, 18px) 18px;
  border-left: 1px solid var(--hair);
}

.clock-month:first-of-type {
  border-left-color: transparent;
}

.clock-month__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.8rem + 0.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 80, "opsz" 48;
}

.clock-month__name span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.clock-month__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px 0;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1;
  text-align: center;
  color: var(--ink-3);
}

.clock-month__days > * {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-style: normal;
  font-weight: 400;
}

.clock-month__days em {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink-3) 70%, transparent);
}

.clock-month__days b {
  border-radius: 50%;
  color: var(--rose-deep);
  background: color-mix(in srgb, var(--clock-eng) 16%, transparent);
}

/* Month states */
.clock-month--today {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 80%);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.clock-month--live {
  border-left: 2px solid var(--clock-live);
}

.clock-month--late {
  border-left: 2px dashed color-mix(in srgb, var(--clock-late) 70%, transparent);
}

.clock-month--live .clock-month__name,
.clock-month--live .clock-month__name span {
  color: var(--clock-live);
}

.clock-month--late .clock-month__name {
  color: var(--clock-late);
}

/* Season lanes */
.clock-band {
  position: relative;
  grid-column: var(--s) / var(--e);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline: 6px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transform-origin: left center;
}

/* Band colours, shared by the lanes on narrow screens.
   Text measures about 5.1:1 on each band. */
.clock-band--eng,
.clock-lane--eng {
  background: color-mix(in srgb, var(--clock-eng) 42%, var(--card));
  color: color-mix(in srgb, var(--rose-deep) 70%, var(--ink));
}

.clock-band--book,
.clock-lane--book {
  background: color-mix(in srgb, var(--clock-book) 50%, var(--card));
  color: color-mix(in srgb, var(--gold-deep) 60%, var(--ink));
}

.clock-band--eng {
  grid-row: 3;
}

.clock-band--book {
  grid-row: 4;
}

.clock-band__long {
  font-weight: 400;
}

/* Pins and lanes that live inside a month: only used on narrow screens */
.clock-month__pin,
.clock-month__lanes {
  display: none;
}

/* Pins above the months */
.clock-runway {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  width: 100%;
  height: 20px;
  margin-top: 6px;
  pointer-events: none;
}

.clock-runway path {
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.clock-pin {
  grid-column: var(--s) / span 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px clamp(10px, 1.1vw, 18px) 4px;
}

.clock-pin__dot {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--pin, var(--ink));
  box-shadow: 0 0 0 4px var(--card);
}

.clock-pin__text {
  display: grid;
  gap: 2px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-3);
}

.clock-pin__text b {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 80, "opsz" 36;
  color: var(--pin, var(--ink));
}

.clock-pin--today {
  --pin: var(--ink);
}

.clock-pin--live {
  --pin: var(--clock-live);
}

.clock-pin--late {
  --pin: var(--clock-late);
  grid-column: var(--s);
}

.clock-pin--late .clock-pin__dot {
  background: var(--card);
  box-shadow: 0 0 0 4px var(--card), inset 0 0 0 2px var(--clock-late);
}

/* Today breathes, gently */
.clock-pin--today .clock-pin__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .clock.is-live .clock-pin--today .clock-pin__dot::after {
    animation: clock-breathe 2.8s var(--ease-soft) infinite;
  }

  .js .clock-band {
    transform: scaleX(0.04);
    opacity: 0;
    transition:
      transform 1.4s var(--ease-out) 450ms,
      opacity 0.6s linear 450ms;
  }

  .js .clock-band--book {
    transition-delay: 700ms;
  }

  .js .is-in .clock-band {
    transform: none;
    opacity: 1;
  }
}

@keyframes clock-breathe {
  0% {
    transform: scale(0.6);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.clock-fig .fig-cap {
  margin-top: 26px;
}

/* The verdict: two sentences, two years ---------------------------------- */

.clock-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(64px, 7vw, 112px);
}

.clock-verdict__item {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}

.clock-verdict__item--late {
  border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent);
}

.clock-verdict__year {
  font-family: var(--font-display);
  font-size: clamp(5rem, 2rem + 9vw, 11rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--clock-live);
}

.clock-verdict__item--late .clock-verdict__year {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--clock-late) 75%, transparent);
}

.clock-verdict__line {
  margin-top: 20px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
  text-wrap: balance;
}

.clock-verdict__item--late .clock-verdict__line {
  color: var(--ink-2);
}

.clock-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(48px, 5vw, 72px);
}

.clock-cta__note {
  max-width: 26rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* Tablet: shrink the calendar type ---------------------------------------- */

@media (max-width: 1100px) {
  .clock-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .clock-h2 {
    max-width: 18ch;
  }

  .clock-band__long {
    display: none;
  }

  .clock-pin__text {
    font-size: 11.5px;
  }

  .clock-pin__text b {
    font-size: 1rem;
  }
}

/* Narrow screens: the pins and seasons move inside the months -------------- */

@media (max-width: 900px) {
  .clock-card {
    padding: 18px 14px 14px;
    border-radius: var(--r-lg);
  }

  .clock-card::before {
    inset: 10px -6px -10px 6px;
    border-radius: var(--r-lg);
  }

  .clock-runway,
  .clock-pin {
    display: none;
  }

  .clock-month {
    grid-column: auto;
    grid-row: auto;
    border-left: 0;
    border-top: 1px solid var(--hair);
  }

  .clock-month--live {
    border-left: 0;
    border-top: 2px solid var(--clock-live);
  }

  .clock-month--late {
    border-left: 0;
    border-top: 2px dashed color-mix(in srgb, var(--clock-late) 70%, transparent);
  }

  .clock-month--today {
    border-top-color: transparent;
    border-radius: var(--r-md);
  }

  /* The pin, now a line inside its month */
  .clock-month__pin {
    --pin: var(--ink);
    position: relative;
    display: block;
    margin-top: 10px;
    padding-left: 20px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--ink-2);
  }

  .clock-month__pin b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variation-settings: "SOFT" 80, "opsz" 36;
    color: var(--pin);
  }

  .clock-month__pin::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--pin);
  }

  .clock-month__pin--live {
    --pin: var(--clock-live);
  }

  .clock-month__pin--late {
    --pin: var(--clock-late);
  }

  .clock-month__pin--late::before {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--clock-late);
  }

  .clock-month__pin--today::after {
    content: "";
    position: absolute;
    left: -5px;
    top: calc(0.32em - 5px);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    opacity: 0;
  }

  .clock-verdict {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .clock.is-live .clock-month__pin--today::after {
    animation: clock-breathe 2.8s var(--ease-soft) infinite;
  }
}

/* Tablet: two columns of month pages, September across the top ------------- */

@media (min-width: 561px) and (max-width: 900px) {
  .clock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0;
  }

  .clock-band {
    display: none;
  }

  .clock-month {
    display: flex;
    flex-direction: column;
    padding: 18px;
  }

  /* right-hand pages (Nov, Jan, Mar) get a spine */
  .clock-month:nth-of-type(odd):not(:first-of-type) {
    box-shadow: inset 1px 0 0 var(--hair);
  }

  .clock-month--today {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 36px;
    align-items: start;
  }

  .clock-month--today .clock-month__name {
    grid-column: 1;
    font-size: clamp(1.5rem, 1rem + 1.4vw, 1.9rem);
  }

  .clock-month--today .clock-month__pin {
    grid-column: 1;
    margin-top: 14px;
  }

  .clock-month--today .clock-month__days {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .clock-month__days {
    max-width: 320px;
    gap: 2px 0;
    font-size: 11.5px;
  }

  .clock-month__days > * {
    aspect-ratio: auto;
    width: 27px;
    height: 27px;
    justify-self: center;
  }

  .clock-month__days em {
    font-size: 11px;
  }

  /* Season lanes: a band that runs on from one page to the next */
  .clock-month__lanes {
    display: grid;
    grid-template-rows: 26px 26px;
    row-gap: 6px;
    margin: auto -18px 0;
    padding-top: 16px;
  }

  .clock-lane {
    grid-column: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    transform-origin: left center;
  }

  .clock-lane--eng {
    grid-row: 1;
  }

  .clock-lane--book {
    grid-row: 2;
  }

  .clock-lane.is-start {
    margin-left: 18px;
    border-radius: var(--r-pill) 0 0 var(--r-pill);
  }

  .clock-lane.is-end {
    margin-right: 18px;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
  }
}

@media (min-width: 561px) and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .clock-lane {
    transform: scaleX(0.04);
    opacity: 0;
    transition:
      transform 1.2s var(--ease-out) 450ms,
      opacity 0.6s linear 450ms;
  }

  .js .clock-lane--book {
    transition-delay: 650ms;
  }

  .js .is-in .clock-lane {
    transform: none;
    opacity: 1;
  }
}

/* Phone: one line per month, only its Saturdays, the seasons down the side -- */

@media (max-width: 560px) {
  .clock-grid {
    grid-template-columns: 26px 26px minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
    column-gap: 6px;
    row-gap: 0;
  }

  .clock-month {
    grid-column: 3;
    grid-row: var(--s);
    padding: 14px 4px 14px 10px;
  }

  .clock-month__name {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1.2rem;
  }

  .clock-month__name span {
    display: inline;
    margin-top: 0;
  }

  .clock-month__days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
  }

  .clock-month__days > :not(b) {
    display: none;
  }

  .clock-month__days b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    aspect-ratio: auto;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clock-eng) 45%, transparent);
  }

  .clock-month__pin {
    margin-top: 8px;
  }

  .clock-band {
    grid-row: var(--s) / var(--e);
    margin: 8px 0;
    padding: 14px 0;
    justify-content: flex-start;
    writing-mode: vertical-rl;
    transform-origin: center top;
  }

  .clock-band--eng {
    grid-column: 1;
  }

  .clock-band--book {
    grid-column: 2;
  }

  .clock-band__long {
    display: none;
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .js .clock-band {
    transform: scaleY(0.04);
  }
}

.clock-fig .fig-cap b {
  white-space: nowrap;
}

/* Mid widths: keep the seven months legible */
@media (min-width: 901px) and (max-width: 1180px) {
  .clock-month {
    padding-inline: 8px;
  }

  .clock-month__days {
    font-size: 8.5px;
    letter-spacing: -0.02em;
  }

  .clock-pin {
    gap: 8px;
    padding-inline: 8px;
  }

  .clock-pin__text b {
    white-space: nowrap;
  }

  /* One column is too narrow for the last pin: it reads right to left,
     over February and March, ending on March's edge */
  .clock-pin--late {
    grid-column: 6 / span 2;
    justify-self: end;
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* ---- src/css/sections/team.css ---- */
/* ==========================================================================
   Our team

   Four people across one row. The grid breaks out past the container so the
   columns have room to set prose at a readable size: at --max the four cards
   would be about 250px wide, which is too narrow for a bio.

   Everyone is cross-trained across the whole loop, so the colour on each card
   is personal, not a phase. The page sits under zoom: 0.72, so every size here
   lands about a third smaller than it reads in the file.
   ========================================================================== */
.team {
  position: relative;
  /* First section on the page, under a fixed nav: the top has to clear the
     bar itself, not just sit at the usual section rhythm. Derived from
     --nav-h so raising the bar can never hide the eyebrow again. */
  padding-block: calc(var(--nav-h) + clamp(26px, 3vh, 44px)) clamp(56px, 7vh, 88px);
  overflow: hidden;
}

.team-sprig {
  position: absolute;
  top: clamp(24px, 4vh, 54px);
  right: clamp(-40px, -2vw, 0px);
  width: clamp(180px, 20vw, 320px);
  fill: none;
  stroke: color-mix(in srgb, var(--rose-deep) 26%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
  pointer-events: none;
}

/* Header ------------------------------------------------------------------ */
.team-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: start;
  column-gap: clamp(32px, 4vw, 64px);
}

.team-head__aside {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
  padding-top: clamp(6px, 1.2vw, 18px);
}

.team-title {
  margin-top: 8px;
  max-width: 16ch;
  font-size: clamp(1.85rem, 1.2rem + 1.7vw, 2.9rem);
  line-height: 1.04;
}

.team-title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--rose-deep);
}

.team-lede {
  padding-bottom: 6px;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.team-note {
  position: relative;
  max-width: 62ch;
  margin-top: 0;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--rose) 45%, transparent);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* The roster -------------------------------------------------------------- */
.team-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  align-items: stretch;
  /* Break out of the text container: four bios need the extra width. */
  width: min(1620px, 96vw);
  margin: clamp(20px, 2.1vw, 30px) auto 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

.team-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  min-width: 0;
  padding: clamp(22px, 1.9vw, 30px) clamp(18px, 1.5vw, 26px) clamp(24px, 2vw, 32px);
  border: 1px solid color-mix(in srgb, var(--accent, var(--rose)) 30%, var(--hair));
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent, var(--rose)) 14%, transparent), transparent 60%),
    var(--card);
  box-shadow: var(--shadow-1);
}

/* Portrait ---------------------------------------------------------------- */
.team-avatar {
  width: clamp(112px, 8vw, 148px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid var(--accent, var(--rose));
  background:
    radial-gradient(120% 120% at 50% 12%, color-mix(in srgb, var(--accent, var(--rose)) 30%, transparent), transparent 70%),
    var(--paper-2);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent),
    0 0 30px -6px color-mix(in srgb, var(--accent, var(--rose)) 60%, transparent);
}

.team-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  /* The height attribute lands as a presentational hint that outranks
     aspect-ratio, so without this the portrait renders as a tall oval. */
  height: 100%;
  display: block;
  object-fit: cover;
  /* A touch of warmth only. The ring does the colouring, not a grade over
     somebody's face. */
  filter: saturate(0.92) sepia(0.06) contrast(1.03);
}

.team-avatar__mono {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.5vw, 2.9rem);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  line-height: 1;
  color: color-mix(in srgb, var(--accent, var(--rose)) 75%, var(--ink));
}

/* Name and role ----------------------------------------------------------- */
.team-card__head {
  margin-top: clamp(14px, 1.4vw, 20px);
  text-align: center;
  min-width: 0;
}

.team-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.team-card__role {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--rose)) 72%, var(--ink));
}

/* Quick facts, sitting with the name -------------------------------------- */
.team-quick {
  width: 100%;
  list-style: none;
  display: grid;
  gap: 9px;
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  padding: clamp(13px, 1.2vw, 17px) clamp(13px, 1.2vw, 16px);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent, var(--rose)) 11%, var(--paper-2));
}

.team-quick__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-2);
}

.team-quick__row b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--rose)) 74%, var(--ink-3));
}

.team-quick__i {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: color-mix(in srgb, var(--accent, var(--rose)) 85%, var(--ink));
}

/* The bio ----------------------------------------------------------------- */
.team-facts {
  width: 100%;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  text-align: left;
}

.team-fact + .team-fact {
  margin-top: clamp(13px, 1.3vw, 18px);
}

.team-fact__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  /* DM Mono is loaded at 400 and 500 only, so 500 is the real bold here.
     Anything heavier would be synthesised and would smear at this size. */
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--rose)) 58%, var(--ink));
}

/* A short rule after each label, so the eye finds the next block quickly */
.team-fact__k::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--accent, var(--rose)) 26%, transparent);
}

.team-fact__v {
  margin: 6px 0 0;
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--ink-2);
}

/* Close ------------------------------------------------------------------- */
.team-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(34px, 3.6vw, 52px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--hair);
}

.team-close__line {
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--ink);
}

.team-close__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96;
  color: var(--rose-deep);
}

/* Narrow ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(960px, 94vw);
  }
}

@media (max-width: 1000px) {
  .team-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .team-head__aside {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .team-sprig {
    display: none;
  }
}

/* ---- src/css/sections/pricing.css ---- */
/* ==========================================================================
   Pricing (linen): four cards that climb like a growing plant
   ========================================================================== */

/* Clip the climbing plants at the section edge. `clip`, not `hidden`: hidden
   turns the section into a scroll container, and the build-your-own summary
   then sticks to the section instead of to the screen. Older engines that
   don't know clip fall back to hidden and simply lose the sticky summary. */
.pricing {
  overflow: hidden;
  overflow: clip;
  /* Landed on straight from the nav, where a full --section-y above the
     heading reads as dead space rather than rhythm. */
  padding-block-start: calc(var(--section-y) * 0.5);
}

/* Header ------------------------------------------------------------------ */

.pricing-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: end;
}

.pricing-h2 {
  margin-top: 8px;
  max-width: 13ch;
}

.pricing-h2 em {
  display: block;
  color: var(--moss);
}

.pricing-lede {
  padding-bottom: 6px;
}

/* The staircase ------------------------------------------------------------ */

.pricing-tiers {
  --rise: clamp(18px, 2.1vw, 32px);
  list-style: none;
  margin: 0;
  /* Only as much headroom as the tallest plant needs: 93% of --plant. */
  padding: clamp(128px, 10vw, 152px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}

.pricing-tier {
  margin-top: calc(var(--step, 0) * var(--rise));
}

.pricing-card {
  --plant: 128px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 1.8vw, 28px) clamp(20px, 1.9vw, 30px) clamp(18px, 1.5vw, 24px);
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-2);
}

/* Each card is a bed of soil for its plant */
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--tier) 70%, transparent) 50%, transparent 92%);
  opacity: 0.8;
}

.pricing-card__plant {
  position: absolute;
  left: clamp(8px, 1vw, 16px);
  top: calc(var(--plant) * -0.93 + 1px);
  width: var(--plant);
  height: var(--plant);
  color: var(--tier-deep);
  pointer-events: none;
}

.pricing-card__plant svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pricing-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pricing-fill {
  fill: color-mix(in srgb, var(--sage) 26%, var(--paper-2));
  stroke: var(--moss);
}

.pricing-fill--strong {
  fill: color-mix(in srgb, var(--tier) 45%, var(--paper-2));
  stroke: var(--tier-deep);
}

.pricing-bloom[style] .pricing-fill--strong {
  fill: color-mix(in srgb, var(--bc) 45%, var(--paper-2));
  stroke: var(--gold-deep);
}

.pricing-bud {
  fill: color-mix(in srgb, var(--rose) 45%, var(--paper-2));
  stroke: var(--rose-deep);
}

.pricing-heart {
  fill: var(--tier-deep);
}

.pricing-bloom[style] .pricing-heart {
  fill: var(--gold-deep);
}

.pricing-seed .pricing-line {
  stroke: var(--wine);
}

.pricing-dot {
  fill: var(--wine);
}

.pricing-soil {
  fill: none;
  stroke: transparent;
}

.pricing-card__stage {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tier-deep);
}

.pricing-card__layer {
  color: var(--ink-3);
  font-weight: 400;
}

.pricing-card__name {
  margin-top: 14px;
  font-size: clamp(2rem, 1.4rem + 1.3vw, 2.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 80, "WONK" 0, "opsz" 144;
}

.pricing-card__promise {
  margin-top: 12px;
  min-height: 3em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.4;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--ink-2);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 22px;
}

.pricing-card__amt {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 1.3vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 40, "opsz" 144;
}

.pricing-card__per {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Four strata, one per layer you have */
.pricing-card__layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 20px;
}

.pricing-card__layers i {
  height: 6px;
  border-radius: 2px;
  background: var(--hair-2);
  box-shadow: inset 0 0 0 1px var(--hair-2);
}

.pricing-card__layers i:first-child {
  border-radius: 4px 2px 2px 4px;
}

.pricing-card__layers i:last-child {
  border-radius: 2px 4px 4px 2px;
}

.pricing-card__layers i.is-on {
  background: var(--c);
  box-shadow: none;
}

.pricing-card__inherit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}

.pricing-card__plus {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier) 22%, var(--card));
  color: var(--tier-deep);
  font-weight: 500;
  line-height: 1;
}

.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 9px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-2);
}

.pricing-card__list li {
  position: relative;
  padding-left: 22px;
}

/* A tiny leaf instead of a bullet */
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 0 70% 0 70%;
  background: color-mix(in srgb, var(--tier) 70%, var(--card));
}

.pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 18px 14px 20px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.pricing-card__cta svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.pricing-card__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.pricing-card__cta:hover svg {
  transform: translateX(3px);
}

/* Spacer so the CTA never touches the list */
.pricing-card__list {
  margin-bottom: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card__cta,
  .pricing-card__cta svg {
    transition: none;
  }
}

/* Plants grow in as each card arrives */
@media (prefers-reduced-motion: no-preference) {
  .js .pricing-card__plant svg {
    transform: scale(0.35);
    transform-origin: 50% 93%;
    opacity: 0;
    transition:
      transform 1.4s var(--ease-out) calc(var(--d, 0ms) + 350ms),
      opacity 0.8s var(--ease-out) calc(var(--d, 0ms) + 350ms);
  }

  .js .is-in .pricing-card__plant svg {
    transform: none;
    opacity: 1;
  }
}

/* Blog cadence, under the price */
/* The cadence is a deliverable like any other, so it keeps the ordinary leaf
   and only bolds the count. */
.pricing-card__lead b {
  font-weight: 600;
  color: var(--ink);
}

/* Ranked: what SEO, AEO and GEO mean, in a line each */
/* See full deliverables ----------------------------------------------------- */

.pricing-more {
  margin-top: 10px;
}

.pricing-more__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 2px 8px 4px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--tier-deep, var(--ink-2));
  cursor: pointer;
}

.pricing-more__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.pricing-more__btn:hover .pricing-more__label {
  text-decoration-color: currentColor;
}

/* A plus that folds into a minus */
.pricing-more__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier, var(--sage)) 22%, var(--card));
  transition: background-color var(--dur-2) var(--ease-out);
}

.pricing-more__icon::before,
.pricing-more__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out);
}

.pricing-more__icon::after {
  transform: rotate(90deg);
}

.pricing-more__btn[aria-expanded="true"] .pricing-more__icon::after {
  transform: rotate(0deg) scaleX(0);
}

.pricing-more__btn:hover .pricing-more__icon {
  background: color-mix(in srgb, var(--tier, var(--sage)) 38%, var(--card));
}

/* Collapsed until asked for (only once pricing.js is running) */
.pricing--ready .pricing-more__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 520ms var(--ease-out),
    opacity 240ms linear,
    visibility 0s linear 520ms;
}

.pricing--ready .pricing-more.is-open .pricing-more__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 520ms var(--ease-out),
    opacity 420ms var(--ease-out) 80ms,
    visibility 0s;
}

.pricing-more__inner {
  min-height: 0;
  overflow: hidden;
}

.pricing-more__plus {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
}

.pricing-more__plus::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier, var(--sage)) 22%, var(--card));
  color: var(--tier-deep, var(--ink-2));
  font-weight: 500;
  line-height: 1;
}

/* Each phase group hangs off a rail in its phase colour, so the groups read
   as one loop flowing Attract, Capture, Run, Encore */
.pricing-more__group {
  --ph: var(--sage);
  position: relative;
  margin-top: 14px;
  margin-left: 4px;
  padding: 0 0 2px 16px;
  border-left: 1px solid color-mix(in srgb, var(--ph) 55%, transparent);
}

.pricing-more__group:first-child {
  margin-top: 10px;
}

.pricing-more__phase {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ph) 55%, var(--ink));
}

.pricing-more__phase::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ph);
  box-shadow: 0 0 0 3px var(--pm-ground, var(--card));
}

.pricing-more__num {
  color: var(--ink-3);
}

.pricing-more__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-2);
}

.pricing-more__list li {
  position: relative;
  padding-left: 14px;
}

.pricing-more__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ph) 80%, var(--card));
}

/* While a panel is open, neighbouring cards keep their resting height
   (pricing.js pins it) instead of stretching with the open one */
.pricing-tiers.is-locked {
  align-items: start;
}

.pricing-tiers.is-measuring .pricing-more__panel {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pricing--ready .pricing-more__panel,
  .pricing--ready .pricing-more.is-open .pricing-more__panel,
  .pricing-more__label,
  .pricing-more__icon,
  .pricing-more__icon::before,
  .pricing-more__icon::after {
    transition: none;
  }
}

/* Build your own: every service in one candlelit panel ---------------------
   Without JavaScript this is a static catalogue: every service, grouped by
   phase, tagged with the package it starts in. pricing.js turns each row into
   a toggle, reveals the package picker, the add-your-own fields and the
   summary, and lights up whatever the chosen package includes. */

.pricing-build-wrap {
  margin-top: clamp(56px, 6vw, 96px);
}

.pricing-build {
  position: relative;
  padding: clamp(28px, 3.6vw, 56px) clamp(18px, 3.4vw, 52px) clamp(22px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  color: var(--cream);
  background:
    radial-gradient(55% 40% at 0% 0%, color-mix(in srgb, var(--candle) 11%, transparent), transparent 64%),
    radial-gradient(50% 36% at 100% 100%, color-mix(in srgb, var(--wine) 24%, transparent), transparent 70%),
    var(--night-2);
  box-shadow: var(--shadow-3);
  isolation: isolate;
}

/* The window line inside the panel, as on the arches */
.pricing-build::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: calc(var(--r-xl) - 8px);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  pointer-events: none;
}

.pricing-build :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Head ------------------------------------------------------------------ */

.pricing-build__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 18px clamp(28px, 5vw, 80px);
  align-items: end;
}

.pricing-build__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.pricing-build__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 80, "WONK" 0, "opsz" 144;
  color: var(--cream);
}

.pricing-build__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: color-mix(in srgb, var(--gold) 76%, var(--cream));
}

.pricing-build__intro {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--cream-2);
}

/* Package picker --------------------------------------------------------- */

.pricing-build__pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pricing-build__pkg {
  --tc: var(--sage);
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 15px 16px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair-dark);
  background: color-mix(in srgb, var(--cream) 3%, transparent);
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.pricing-build__pkg:hover {
  border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  transform: translateY(-2px);
}

.pricing-build__pkg:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pricing-build__pkg.is-active {
  border-color: color-mix(in srgb, var(--tc) 80%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tc) 30%, var(--night-2)), color-mix(in srgb, var(--tc) 9%, var(--night-2)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent),
    0 18px 44px -18px color-mix(in srgb, var(--tc) 70%, transparent);
}

.pricing-build__pkg-stage {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc) 78%, var(--cream));
}

.pricing-build__pkg-name {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
  color: var(--cream);
}

.pricing-build__pkg-price {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--cream-2);
}

.pricing-build__pkg-price small {
  font-size: 0.85em;
  color: var(--cream-3);
}

.pricing-build__pkg-layers {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.pricing-build__pkg-layers i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--hair-dark);
}

.pricing-build__pkg-layers i.is-on {
  background: color-mix(in srgb, var(--c) 55%, transparent);
  transition: background-color var(--dur-2) var(--ease-out);
}

.pricing-build__pkg.is-active .pricing-build__pkg-layers i.is-on {
  background: var(--c);
}

/* Phases ------------------------------------------------------------------ */

.pricing-build__phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px clamp(16px, 1.8vw, 28px);
  margin-top: clamp(32px, 3.6vw, 52px);
}

.pricing-build__phase {
  --ph: var(--sage);
  min-width: 0;
  padding-top: 16px;
  border-top: 2px solid color-mix(in srgb, var(--ph) 60%, transparent);
}

.pricing-build__ph-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--cream);
}

.pricing-build__ph-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ph);
}

.pricing-build__ph-note {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--cream-3);
}

.pricing-build__meter {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--cream-2);
}

.pricing-build__meter i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--hair-dark);
  overflow: hidden;
}

.pricing-build__meter b {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ph);
  transform-origin: left center;
  transform: scaleX(var(--pct, 0));
  transition: transform 0.7s var(--ease-out);
}

.pricing-build__list {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
}

.pricing-build__item {
  --tc: var(--sage);
}

.pricing-build__item[data-tier="cited"] {
  --tc: var(--rose);
}

.pricing-build__item[data-tier="automated"] {
  --tc: var(--gold);
}

.pricing-build__item[data-tier="scaled"] {
  --tc: var(--wine);
}

/* One row per service. A span without JavaScript, a toggle button with it. */
.pricing-build__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 8px 10px 8px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--cream-2);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.38;
  transition:
    color 0.45s var(--ease-out),
    background-color 0.45s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

/* Unlit rows only step back once there is something lit to compare them with */
.pricing-build.has-plan .pricing-build__row {
  color: var(--cream-3);
}

button.pricing-build__row {
  cursor: pointer;
}

.pricing-build__item:not(.is-lit) > button.pricing-build__row:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 5%, transparent);
}

.pricing-build__item.is-lit > button.pricing-build__row:hover {
  background: color-mix(in srgb, var(--ph) 22%, transparent);
}

.pricing-build__leaf {
  width: 10px;
  height: 10px;
  margin-top: 0.38em;
  border-radius: 0 70% 0 70%;
  box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--ph) 70%, var(--cream));
  transition:
    background-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}

.pricing-build__tag {
  padding-top: 0.28em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--tc) 80%, var(--cream));
  transition: opacity 0.3s var(--ease-out);
}

/* Lit: the package you are looking at includes it */
.pricing-build__item.is-lit .pricing-build__row {
  color: var(--cream);
  background: color-mix(in srgb, var(--ph) 14%, transparent);
}

.pricing-build__item.is-lit .pricing-build__leaf {
  background: var(--ph);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ph) 22%, transparent),
    0 0 14px 1px color-mix(in srgb, var(--candle) 40%, transparent);
  transform: scale(1.12);
}

/* Once it is lit the package tag has done its job; the cadence stays */
.pricing-build__item.is-lit .pricing-build__tag {
  opacity: 0;
}

.pricing-build__item.is-lit[data-cadence] .pricing-build__tag {
  opacity: 1;
  color: color-mix(in srgb, var(--ph) 70%, var(--cream));
}

/* Picked: she tapped this one herself */
.pricing-build__item.is-picked .pricing-build__row {
  border-color: color-mix(in srgb, var(--ph) 65%, transparent);
}

.pricing-build__item.is-picked .pricing-build__leaf {
  outline: 1.5px solid var(--cream);
  outline-offset: 2px;
}

/* Your own additions: always in the plan, quoted separately */
.pricing-build__item.is-own {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
}

.pricing-build__item.is-own .pricing-build__row {
  color: var(--cream);
  border: 1px dashed color-mix(in srgb, var(--candle) 50%, transparent);
  background: color-mix(in srgb, var(--candle) 8%, transparent);
}

.pricing-build__item.is-own .pricing-build__leaf {
  background: var(--candle);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--candle) 45%, transparent);
}

/* Always lit, but unlike a package row the tag stays: it says whose it is */
.pricing-build__item.is-own .pricing-build__tag {
  opacity: 1;
  color: var(--candle);
}

.pricing-build__x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cream-3);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) linear, background-color var(--dur-1) linear;
}

.pricing-build__x:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 8%, transparent);
}

/* Add your own ------------------------------------------------------------- */

.pricing-build__add {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.pricing-build__add input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 1px dashed color-mix(in srgb, var(--ph) 50%, transparent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  transition: border-color var(--dur-1) linear, background-color var(--dur-1) linear;
}

.pricing-build__add input::placeholder {
  color: var(--cream-3);
}

.pricing-build__add input:focus-visible {
  border-style: solid;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
}

.pricing-build__add button {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ph) 34%, var(--night-2));
  color: var(--cream);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-1) linear;
}

.pricing-build__add button:hover {
  background: color-mix(in srgb, var(--ph) 55%, var(--night-2));
}

/* The summary, pinned to the bottom of the screen while the panel is in view */

.pricing-build__sum {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px 22px;
  align-items: center;
  margin-top: clamp(28px, 3vw, 44px);
  padding: 12px 14px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--night) 93%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-night);
}

.pricing-build__loop {
  width: 58px;
  height: 58px;
  overflow: visible;
}

.pricing-build__arc-track {
  fill: none;
  stroke: var(--hair-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.pricing-build__arc-fill {
  fill: none;
  stroke: var(--ph);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 0.9s var(--ease-in-out),
    opacity 0.3s linear;
}

.pricing-build__arc-head {
  fill: none;
  stroke: var(--ph);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.4s linear 0.5s;
}

.pricing-build__hub {
  fill: color-mix(in srgb, var(--cream) 4%, transparent);
  stroke: var(--hair-dark);
  stroke-width: 1;
}

.pricing-build__sprout {
  fill: color-mix(in srgb, var(--sage) 30%, transparent);
  stroke: color-mix(in srgb, var(--sage) 80%, var(--cream));
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--grow, 0.3);
  transition: opacity 0.6s var(--ease-out);
}

.pricing-build__sum-main {
  min-width: 0;
}

.pricing-build__sum-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.pricing-build__sum-tier {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96;
  color: color-mix(in srgb, var(--tc, var(--cream)) 70%, var(--cream));
}

.pricing-build__sum-meta,
.pricing-build__sum-own {
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--cream-2);
}

.pricing-build__sum-own {
  margin-top: 2px;
  color: var(--candle);
}

.pricing-build__sum-actions {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Owner's way into edit mode. Only ever rendered on this machine. */
.pricing-build__editlink {
  margin-left: 4px;
  padding-inline: 10px;
  border: 1px dashed color-mix(in srgb, var(--candle) 45%, transparent);
  border-radius: var(--r-pill);
  color: var(--candle);
  text-decoration: none;
}

.pricing-build__editlink:hover {
  border-color: var(--candle);
  background: color-mix(in srgb, var(--candle) 12%, transparent);
}

.pricing-build__textbtn {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--cream-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color var(--dur-1) linear, text-decoration-color var(--dur-1) linear;
}

.pricing-build__textbtn:hover {
  color: var(--cream);
  text-decoration-color: currentColor;
}

/* Long and short versions of the same words; the short ones are for phones */
.pricing-build__narrow {
  display: none;
}

.pricing-build__foot {
  margin-top: 22px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--cream-3);
}

.pricing-build__foot a {
  color: var(--cream-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pricing-build__foot a:hover {
  color: var(--cream);
}

/* When a package is chosen, the lights come on down each column in turn */
@keyframes pricing-build-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pricing-build.is-cascade .pricing-build__row,
  .pricing-build.is-cascade .pricing-build__leaf {
    transition-delay: calc(var(--i, 0) * 34ms);
  }

  .pricing-build__sum-tier.is-swap {
    animation: pricing-build-swap 0.5s var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-build__pkg,
  .pricing-build__pkg-layers i,
  .pricing-build__row,
  .pricing-build__leaf,
  .pricing-build__tag,
  .pricing-build__meter b,
  .pricing-build__arc-fill,
  .pricing-build__arc-head,
  .pricing-build__sprout {
    transition: none;
  }

  .pricing-build__pkg:hover {
    transform: none;
  }
}

/* Terms --------------------------------------------------------------------- */

.pricing-terms {
  margin-top: clamp(72px, 8vw, 120px);
  padding-block: clamp(36px, 4vw, 56px);
  border-block: 1px solid var(--hair);
  text-align: center;
}

.pricing-terms__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.pricing-terms__line span {
  white-space: nowrap;
}

.pricing-terms__line span + span::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin: 0 0.55em 0.12em;
  border-radius: 0 70% 0 70%;
  background: var(--sage);
  vertical-align: middle;
}

.pricing-terms__line span:last-child::before {
  background: var(--wine);
}

.pricing-terms__line em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--wine-deep);
}

.pricing-terms__crm {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Not sure which? -------------------------------------------------------- */

.pricing-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--blush) 70%, transparent), transparent 60%),
    var(--paper);
  box-shadow: var(--shadow-1);
}

.pricing-check__title em {
  color: var(--rose-deep);
}

.pricing-check__copy p {
  margin-top: 12px;
  max-width: 40rem;
  color: var(--ink-2);
}

/* Tablet: two by two, still climbing ---------------------------------------- */

@media (max-width: 1180px) {
  .pricing-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 150px;
  }

  .pricing-tier {
    margin-top: 0;
  }

  .pricing-tier:nth-child(odd) {
    margin-top: var(--rise);
  }

  .pricing-card__promise {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .pricing-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .pricing-check {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

/* Phone: one column, each card still rooted ------------------------------- */

@media (max-width: 680px) {
  .pricing-tiers {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding-top: 12px;
  }

  .pricing-tier,
  .pricing-tier:nth-child(odd) {
    margin-top: 0;
  }

  .pricing-tier + .pricing-tier {
    margin-top: 18px;
  }

  .pricing-card {
    --plant: 92px;
    padding: 24px 20px 22px;
    border-radius: var(--r-lg);
  }

  .pricing-card::before {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }

  .pricing-card__plant {
    left: auto;
    right: 10px;
    top: 10px;
  }

  .pricing-card__stage {
    padding-right: 96px;
    flex-direction: column;
    gap: 4px;
  }

  .pricing-card__name {
    margin-top: 12px;
    padding-right: 90px;
  }

  .pricing-card__promise {
    margin-top: 10px;
  }

  .pricing-terms__line {
    flex-direction: column;
    align-items: center;
  }

  .pricing-terms__line span + span::before {
    display: block;
    margin: 0.35em auto 0.4em;
  }

  .pricing-terms__line span {
    white-space: normal;
  }

  .pricing-check .btn {
    width: 100%;
  }
}

/* Build your own at smaller widths ---------------------------------------- */

@media (max-width: 1180px) {
  .pricing-build__phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-build__pick {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .pricing-build__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .pricing-build__sum {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pricing-build__sum-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .pricing-build {
    padding: 26px 14px 18px;
    border-radius: var(--r-lg);
  }

  .pricing-build::before {
    inset: 7px;
    border-radius: calc(var(--r-lg) - 5px);
  }

  .pricing-build__pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pricing-build__pkg {
    padding: 12px 13px 11px;
  }

  .pricing-build__phases {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  /* A compact two-row bar on phones: what it fits and the button on top,
     the price and the count underneath. Copy steps out, since the email
     button opens the mail app directly on a phone. */
  .pricing-build__sum {
    bottom: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "loop tier send"
      "loop meta reset"
      "own  own  own";
    gap: 2px 12px;
    padding: 10px 10px 10px 8px;
  }

  .pricing-build__sum-main,
  .pricing-build__sum-actions {
    display: contents;
  }

  .pricing-build__loop {
    grid-area: loop;
    align-self: center;
    width: 42px;
    height: 42px;
  }

  .pricing-build__sum-kicker,
  [data-sum-copy] {
    display: none;
  }

  .pricing-build__sum-tier {
    grid-area: tier;
    align-self: end;
    margin: 0;
    font-size: 1.4rem;
  }

  .pricing-build__sum-meta {
    grid-area: meta;
    align-self: start;
    margin: 0;
  }

  .pricing-build__sum-own {
    grid-area: own;
    margin-top: 4px;
  }

  .pricing-build__send {
    grid-area: send;
    justify-self: end;
    align-self: end;
  }

  [data-sum-reset] {
    grid-area: reset;
    justify-self: end;
    align-self: start;
    padding: 4px 2px;
  }

  .pricing-build__wide {
    display: none;
  }

  .pricing-build__narrow {
    display: inline;
  }
}

/* Below 861px the page floats its own "Get in touch" pill at the bottom of the
   screen (main.js sets .float-cta-on on the root while it shows). Ride above
   it rather than under it: pill height 50px, plus its own bottom offset. */
@media (max-width: 860px) {
  .float-cta-on .pricing-build__sum {
    bottom: calc(clamp(12px, 3vw, 32px) + 60px);
  }
}

/* Owner edit mode (?edit on this machine) ----------------------------------
   Only ever shown on the local preview server. Rows become editable: the
   name is typed in place, five squares set the plan a service starts in,
   and a cross removes it. A pinned bar carries save, copy and discard. */

.pricing-build__edit {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 28px;
  align-items: center;
  margin-top: clamp(22px, 2.4vw, 32px);
  padding: 16px 18px;
  border: 1px dashed color-mix(in srgb, var(--candle) 60%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--night) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-night);
}

.pricing-build__edit-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--candle);
}

.pricing-build__edit-count {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-2);
}

.pricing-build__edit-help {
  max-width: 68ch;
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--cream-2);
}

.pricing-build__edit-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: var(--fs-micro);
  color: var(--cream-3);
}

.pricing-build__edit-key b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  margin-right: 5px;
  border-radius: 4px;
  background: var(--c);
  color: var(--night);
  font-family: var(--font-mono);
  font-weight: 600;
}

.pricing-build__edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
}

.pricing-build__edit-actions [disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.pricing-build__edit-status {
  grid-column: 1 / -1;
  min-height: 1.3em;
  font-size: var(--fs-xs);
  color: var(--candle);
}

.pricing-build.is-editing .pricing-build__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "row x"
    "plans plans";
  align-items: start;
  column-gap: 2px;
  padding-bottom: 8px;
}

.pricing-build.is-editing .pricing-build__row {
  grid-area: row;
  grid-template-columns: 12px minmax(0, 1fr);
}

.pricing-build.is-editing .pricing-build__tag {
  display: none;
}

.pricing-build.is-editing .pricing-build__x {
  grid-area: x;
}

/* The name, typed in place */
.pricing-build.is-editing .pricing-build__text {
  border-radius: 4px;
  outline: none;
  cursor: text;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--cream) 22%, transparent);
  transition: box-shadow var(--dur-1) linear, background-color var(--dur-1) linear;
}

.pricing-build.is-editing .pricing-build__text:hover {
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--gold) 70%, transparent);
}

.pricing-build.is-editing .pricing-build__text:focus {
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  box-shadow: 0 0 0 2px var(--gold);
}

/* Five squares: filled from the plan it starts in, onward */
.pricing-build__plans {
  grid-area: plans;
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: 2px 0 0 30px;
  padding: 0;
  border: 0;
}

.pricing-build__cell {
  --c: var(--sage);
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--cream-3);
  cursor: pointer;
  transition:
    background-color var(--dur-1) linear,
    border-color var(--dur-1) linear,
    color var(--dur-1) linear;
}

.pricing-build__cell:hover {
  border-color: var(--c);
  color: var(--cream);
}

.pricing-build__cell.is-in {
  background: color-mix(in srgb, var(--c) 32%, transparent);
  color: var(--cream);
}

.pricing-build__cell.is-start {
  background: var(--c);
  border-color: var(--c);
  color: var(--night);
  font-weight: 600;
}

.pricing-build__cell:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* What you have touched since the page loaded */
.pricing-build.is-editing .pricing-build__item.is-changed .pricing-build__row,
.pricing-build.is-editing .pricing-build__item.is-new .pricing-build__row {
  box-shadow: inset 2px 0 0 var(--candle);
}

.pricing-build.is-editing .pricing-build__item.is-new .pricing-build__leaf {
  outline: 1.5px solid var(--candle);
  outline-offset: 2px;
}

.pricing-build.is-editing .pricing-build__sum-actions {
  display: none;
}

@media (max-width: 680px) {
  .pricing-build__edit {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .pricing-build__edit-actions {
    justify-content: flex-start;
  }
}

/* Owner edit mode: order controls on each service ------------------------- */
/* Up, down, and the phase it sits in, on a line of their own under the plan
   squares, so the name keeps the full width of the column */
.pricing-build.is-editing .pricing-build__item {
  grid-template-areas:
    "row x"
    "plans plans"
    "order order";
}

.pricing-build__order {
  grid-area: order;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0 30px;
}

.pricing-build__mv {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--cream-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-1) linear, color var(--dur-1) linear;
}

.pricing-build__mv:hover {
  border-color: var(--gold);
  color: var(--cream);
}

.pricing-build__mv:focus-visible,
.pricing-build__mv-phase:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.pricing-build__mv-phase {
  height: 22px;
  max-width: 108px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  border-radius: 6px;
  background: var(--night-2);
  color: var(--cream-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  cursor: pointer;
}

.pricing-build__mv-phase option {
  background: var(--night-2);
  color: var(--cream);
}

@media (max-width: 680px) {
  .pricing-build.is-editing .pricing-build__item {
    grid-template-areas:
      "row x"
      "plans plans"
      "order order";
  }

  .pricing-build__order {
    margin: 6px 0 0 30px;
  }
}

/* Owner edit mode: every editable piece of copy, cards and builder -------- */
.is-editing-copy [data-edit].is-copy {
  border-radius: 3px;
  outline: none;
  cursor: text;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--gold) 75%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.is-editing-copy [data-edit].is-copy:hover {
  text-decoration-color: var(--gold);
}

.is-editing-copy [data-edit].is-copy:focus {
  text-decoration-line: none;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  box-shadow: 0 0 0 2px var(--gold);
}

.is-editing-copy [data-edit].is-edited {
  box-shadow: inset 0 -2px 0 var(--candle);
}

.is-editing-copy [data-edit].is-edited:focus {
  box-shadow: 0 0 0 2px var(--gold);
}

/* Each card points at the full matrix instead of repeating it inline.
   The per-card disclosures were removed when #offer landed. */
.pricing-card__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pricing-card__all .btn__arrow {
  width: 14px;
  height: 14px;
}

/* The scorecard reports across all four phases, so it has no column of its
   own. It sits under the grid rather than being filed arbitrarily. */
.pricing-build__across {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: clamp(18px, 2vw, 30px);
  padding-top: 16px;
  border-top: 1px solid var(--hair-dark);
  font-size: var(--fs-xs);
  color: var(--cream-3);
}

.pricing-build__across-k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-2);
}

/* ---- src/css/sections/contact.css ---- */
/* ==========================================================================
   Contact: Get in touch. The single goal of the page.
   A cream letter card lit by candlelight on the night ground, with the
   address large enough to read across a room.
   ========================================================================== */

.contact {
  overflow: hidden;
  overflow: clip; /* clip, not hidden: a hidden box can still be scrolled by focus() */
  padding-bottom: clamp(104px, 12vw, 192px);
}

/* Candlelight ------------------------------------------------------------- */

.contact-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.contact-glow__pool {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 58% at 74% 38%, color-mix(in srgb, var(--candle) 20%, transparent) 0%, color-mix(in srgb, var(--candle) 7%, transparent) 42%, transparent 72%),
    radial-gradient(40% 40% at 8% 100%, color-mix(in srgb, var(--wine) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--night) 0%, color-mix(in srgb, var(--night-2) 70%, var(--night)) 100%);
}

.contact-glow__flame {
  position: absolute;
  left: 74%;
  top: 34%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--candle) 16%, transparent), transparent);
  opacity: 0.9;
}

.contact.is-lit .contact-glow__flame {
  animation: contact-flicker 7s var(--ease-in-out) infinite alternate;
}

@keyframes contact-flicker {
  0% { opacity: 0.75; transform: scale(0.97); }
  35% { opacity: 1; transform: scale(1.02); }
  60% { opacity: 0.82; transform: scale(0.99); }
  100% { opacity: 0.95; transform: scale(1.03); }
}

/* The line-drawn bloom behind the card: the four phases as petals */
.contact-bloom {
  position: absolute;
  z-index: -1;
  right: -14vw;
  top: -6%;
  width: min(66vw, 960px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.contact-bloom__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--candle) 22%, transparent);
  stroke-width: 0.3;
}

.contact-bloom__ring--in {
  stroke-dasharray: 1 3;
  stroke: color-mix(in srgb, var(--cream) 22%, transparent);
}

.contact-bloom__petals path {
  fill: color-mix(in srgb, var(--p) 10%, transparent);
  stroke: color-mix(in srgb, var(--p) 75%, transparent);
  stroke-width: 0.4;
}

.contact.is-lit .contact-bloom__petals {
  animation: contact-turn 120s linear infinite;
}

@keyframes contact-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .contact.is-lit .contact-glow__flame,
  .contact.is-lit .contact-bloom__petals {
    animation: none;
  }
}

/* Layout ------------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}

.contact-title {
  margin-top: 22px;
  max-width: 12ch;
}

.contact-lede {
  margin-top: 26px;
  max-width: 30rem;
}

/* What to tell us ---------------------------------------------------------- */

.contact-tell {
  margin-top: clamp(32px, 4vw, 52px);
  max-width: 30rem;
  border-top: 1px solid var(--hair-dark);
  padding-top: 22px;
}

.contact-tell__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.contact-tell__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-tell__list li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: baseline;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--cream-2);
}

.contact-tell__list b {
  font-weight: 500;
  color: var(--cream);
}

.contact-tell__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--candle);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
}

/* The letter card ---------------------------------------------------------- */

.contact-card {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--candle) 16%, var(--card)) 0%, var(--card) 55%),
    var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-night), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  isolation: isolate;
}

/* A fine inner frame, like a printed correspondence card */
.contact-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: calc(var(--r-xl) - 8px);
  pointer-events: none;
}

.contact-card__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.contact-card__rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

.contact-card__address {
  display: block;
  margin-top: clamp(18px, 2.4vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 0.9rem + 2.3vw, 2.9rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 80, "opsz" 72;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.contact-card__address:hover {
  color: var(--rose-deep);
  background-size: 100% 1px;
}

.contact-card__sub {
  margin-top: 16px;
  max-width: 30rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
}

.contact-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}

.contact-card__copy {
  --btn-fg: var(--ink);
  --btn-border: color-mix(in srgb, var(--ink) 28%, transparent);
}

.contact-card__copy-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.contact-card__copy.is-done {
  --btn-border: var(--moss);
  color: var(--moss);
}

.contact-card__status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--moss);
}

.contact-card :focus-visible {
  outline-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .contact-card__address {
    transition: none;
  }
}

/* Small screens ------------------------------------------------------------ */

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-title {
    max-width: 14ch;
  }

  .contact-bloom {
    right: -40vw;
    top: 30%;
    width: 120vw;
  }
}

@media (max-width: 480px) {
  .contact-card {
    border-radius: var(--r-lg);
  }

  .contact-card::before {
    border-radius: calc(var(--r-lg) - 6px);
    inset: 8px;
  }

  .contact-card__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---- src/css/sections/faq.css ---- */
/* ==========================================================================
   FAQ: questions, answered. An editorial accordion on paper.
   ========================================================================== */

.faq {
  /* Landed on straight from the nav: see the note on .pricing. */
  padding-block-start: calc(var(--section-y) * 0.6);
  overflow: hidden;
  overflow: clip; /* clip, not hidden: a hidden box can still be scrolled by focus() */
}

/* a tall line-drawn sprig growing up behind the aside */
.faq-sprig {
  position: absolute;
  z-index: -1;
  left: clamp(-60px, -2vw, 0px);
  bottom: -40px;
  width: clamp(220px, 26vw, 400px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.faq-sprig path {
  fill: color-mix(in srgb, var(--sage) 9%, transparent);
  stroke: color-mix(in srgb, var(--moss) 45%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.faq-sprig path:first-child {
  fill: none;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}

.faq-aside {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}

.faq-title {
  margin-top: 22px;
}

.faq-aside__lede {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.45;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  color: var(--ink-3);
  max-width: 22rem;
}

.faq-note {
  position: relative;
  margin-top: clamp(36px, 4vw, 56px);
  padding: 26px 28px 26px 92px;
  max-width: 26rem;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--hair-2);
}

.faq-note__sprig {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 44px;
  height: 66px;
  overflow: visible;
}

.faq-note__sprig path {
  fill: color-mix(in srgb, var(--sage) 16%, transparent);
  stroke: var(--moss);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-note__sprig path:first-child {
  fill: none;
}

.faq-note__text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.faq-note__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  color: var(--ink);
}

.faq-note__link {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--ink);
}

.faq-note__link .btn__arrow {
  width: 1em;
  height: 1em;
}

/* The list ---------------------------------------------------------------- */

.faq-list {
  border-bottom: 1px solid var(--hair);
}

.faq-item {
  --accent: var(--rose);
  --accent-deep: var(--rose-deep);
  position: relative;
  border-top: 1px solid var(--hair);
}

.faq-item:nth-child(4n + 1) { --accent: var(--sage); --accent-deep: var(--moss); }
.faq-item:nth-child(4n + 2) { --accent: var(--rose); --accent-deep: var(--rose-deep); }
.faq-item:nth-child(4n + 3) { --accent: var(--gold); --accent-deep: var(--gold-deep); }
.faq-item:nth-child(4n + 4) { --accent: var(--wine); --accent-deep: var(--wine-deep); }

/* a coloured hairline draws across the top of the open item */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}

.faq-item[open]::before {
  transform: scaleX(1);
}

.faq-q {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 44px;
  align-items: center;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::marker {
  content: "";
}

.faq-q:focus-visible {
  outline-offset: 6px;
}

.faq-q__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}

.faq-q__text {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 0.95vw, 1.95rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 72;
  text-wrap: balance;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
  .faq-q:hover .faq-q__text {
    transform: translateX(4px);
  }
}

.faq-item[open] .faq-q__text {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--accent-deep);
}

/* plus that turns into a minus */
.faq-q__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform 600ms var(--ease-out);
}

.faq-q__icon::before,
.faq-q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 600ms var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.faq-q__icon::after {
  transform: rotate(90deg);
}

.faq-q:hover .faq-q__icon {
  border-color: var(--ink);
}

.faq-item[open] .faq-q__icon {
  background: var(--ink);
  border-color: var(--ink);
  transform: rotate(180deg);
}

.faq-item[open] .faq-q__icon::before,
.faq-item[open] .faq-q__icon::after {
  background: var(--paper);
}

.faq-item[open] .faq-q__icon::after {
  transform: rotate(0deg);
}

/* the answer */
.faq-a {
  overflow: hidden;
}

.faq-a__inner {
  padding: 0 calc(44px + 16px) clamp(26px, 2.8vw, 36px) calc(3.4rem + 16px);
}

.faq-a__inner p {
  max-width: 40rem;
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink-2);
}

.faq-item[open] .faq-a__inner {
  animation: faq-in 700ms var(--ease-out) both;
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::before,
  .faq-q__text,
  .faq-q__icon,
  .faq-q__icon::before,
  .faq-q__icon::after {
    transition: none;
  }

  .faq-item[open] .faq-a__inner {
    animation: none;
  }

  .faq-q:hover .faq-q__text {
    transform: none;
  }
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-aside {
    position: relative;
    top: auto;
  }

  .faq-sprig {
    left: auto;
    right: -40px;
    bottom: auto;
    top: 40px;
    width: 180px;
    opacity: 0.8;
  }
}

@media (max-width: 640px) {
  .faq-q {
    grid-template-columns: 2.2rem minmax(0, 1fr) 40px;
    gap: 12px;
  }

  .faq-q__icon {
    width: 40px;
    height: 40px;
  }

  .faq-a__inner {
    padding: 0 0 26px calc(2.2rem + 12px);
  }

  .faq-note {
    padding: 22px 22px 22px 80px;
  }

  .faq-note__sprig {
    left: 18px;
  }
}

/* ---- src/css/sections/footer.css ---- */
/* ==========================================================================
   Footer: brand, links, sources and small print, over a huge outlined wordmark.
   ========================================================================== */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clip, not hidden: a hidden box can still be scrolled by focus() */
  padding-top: clamp(80px, 9vw, 136px);
  border-top: 1px solid var(--hair-dark);
}

.footer-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 50% 105%, color-mix(in srgb, var(--candle) 14%, transparent), transparent 70%),
    radial-gradient(30% 40% at 95% 0%, color-mix(in srgb, var(--wine) 16%, transparent), transparent 70%);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 2.6fr) minmax(0, 4fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

.footer-brand__link .brand__mark {
  width: 36px;
  height: 36px;
}

.footer-brand__link .brand__word {
  font-size: 1.7rem;
}

.footer-title {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem);
  line-height: 1.08;
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  letter-spacing: -0.025em;
  max-width: 17ch;
}

.footer-title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--candle);
}

.footer-desc {
  margin-top: 20px;
  max-width: 30rem;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--cream-2);
}

.footer-cta {
  margin-top: 30px;
}

.footer-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-3);
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hair-dark);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: var(--fs-small);
  color: var(--cream-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.footer-links a:hover {
  color: var(--cream);
  transform: translateX(3px);
}

.footer-links__phase a {
  padding-left: 14px;
}

.footer-links__phase i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.footer-sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: src;
}

.footer-sources__list li {
  counter-increment: src;
  position: relative;
  padding: 12px 0 12px 2.4rem;
  border-bottom: 1px solid var(--hair-dark);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--cream-2);
}

.footer-sources__list li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.footer-sources__list cite {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  color: var(--cream-2);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid var(--hair-dark);
}

.footer-small {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--cream-3);
}

/* The wordmark: huge and outlined, sitting on the bottom edge. The box is
   derived from the type rather than set independently, so the descenders of
   the italic P and l always have room and the word is never sliced. */
.footer-word {
  --word-size: clamp(7rem, 25.5vw, 25rem);
  --word-box: 1.02;
  position: relative;
  margin-top: clamp(8px, 2vw, 24px);
  height: calc(var(--word-size) * var(--word-box));
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.footer-word__text {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 250;
  font-size: var(--word-size);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--candle) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--candle) 16%, transparent), transparent 75%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* A project by Second Brain ------------------------------------------------
   The nav wears this small and quiet, because up there it must not compete
   with the Perennial wordmark beside it. Down here there is nothing left to
   compete with, so it gets the full width: a hairline running out to each
   margin, the mark lit like everything else on this page, and the name in
   the display italic rather than the mono. Hovering brings the light up. */
.footer-powered {
  --sb: #8b5cf6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  margin-top: clamp(24px, 3.5vw, 44px);
  text-decoration: none;
  color: inherit;
}

.footer-powered::before,
.footer-powered::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-dark));
}

.footer-powered::after {
  background: linear-gradient(90deg, var(--hair-dark), transparent);
}

.footer-powered__lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.footer-powered__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.footer-powered__mark {
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--sb);
  opacity: 0.9;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sb) 40%, transparent));
  -webkit-mask: var(--sb-mark) center / contain no-repeat;
  mask: var(--sb-mark) center / contain no-repeat;
}

.footer-powered__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 0.92rem + 0.7vw, 1.55rem);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  letter-spacing: -0.01em;
  line-height: 1;
  color: color-mix(in srgb, var(--sb) 40%, var(--cream));
}

.footer-powered__out {
  width: 11px;
  height: 11px;
  flex: none;
  margin-left: -4px;
  color: var(--sb);
  opacity: 0;
  transform: translate(-4px, 4px);
}

.footer-powered:hover .footer-powered__out,
.footer-powered:focus-visible .footer-powered__out {
  opacity: 0.95;
  transform: translate(0, 0);
}

/* See the note on .powered: colour and opacity fade for everyone, travel is
   reserved for visitors who have not asked for less motion. */
.footer-powered__mark,
.footer-powered__name,
.footer-powered__k,
.footer-powered__out {
  transition:
    color var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .footer-powered__mark,
  .footer-powered__out {
    transition:
      color var(--dur-2) var(--ease-out),
      opacity var(--dur-2) var(--ease-out),
      filter var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-powered__mark,
  .footer-powered__out,
  .footer-powered:hover .footer-powered__mark,
  .footer-powered:focus-visible .footer-powered__mark,
  .footer-powered:hover .footer-powered__out,
  .footer-powered:focus-visible .footer-powered__out {
    transform: none;
  }
}

.footer-powered:hover .footer-powered__mark,
.footer-powered:focus-visible .footer-powered__mark {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--sb) 80%, transparent));
}

.footer-powered:hover .footer-powered__name,
.footer-powered:focus-visible .footer-powered__name {
  color: color-mix(in srgb, var(--sb) 68%, var(--cream));
}

.footer-powered:hover .footer-powered__k,
.footer-powered:focus-visible .footer-powered__k {
  color: var(--cream-2);
}

@media (max-width: 520px) {
  .footer-powered__lockup {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
  }

  .footer-powered__k {
    flex-basis: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a {
    transition: none;
  }

  .footer-links a:hover {
    transform: none;
  }
}

@media (max-width: 1080px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .footer-links__phase a {
    padding-left: 0;
  }

  .footer-base {
    flex-direction: column;
  }
}

/* Comfortable 44px targets on touch screens */
@media (pointer: coarse) {
  .footer-links a {
    min-height: 44px;
  }
}