/* =========================================================
   Rayhan Group — v2 stylesheet
   Design system
     · Ink         #0E0F0C   warm near-black
     · Ink soft    #1B1C18
     · Cream       #F4F0E8   warm off-white  (page surface)
     · Cream 2     #ECE5D7   alt surface
     · Cream 3     #E4DCC9   tertiary surface
     · Accent      #6B1F1A   oxblood — used as 1px / type / single hover only
     · Mute        #6B6760 / #8B867D
     · Hair        rgba(14,15,12, .12 / .07)
   Type
     · Serif       Instrument Serif  (display + italic)
     · Sans        Geist             (UI, body)
     · Mono        Geist Mono        (tabular numerals, eyebrows, kbd)
   Motion
     · ease        cubic-bezier(.2, .8, .2, 1)  — "Vercel house curve"
     · ease-out    cubic-bezier(.2, .7, .2, 1)
     · dur-fast    180ms
     · dur         260ms
     · dur-slow    420ms
   ========================================================= */

:root {
  --ink:         #0E0F0C;
  --ink-soft:    #1B1C18;
  --cream:       #F4F0E8;
  --cream-2:     #ECE5D7;
  --cream-3:     #E4DCC9;
  --accent:      #6B1F1A;
  --accent-deep: #501712;
  --mute:        #6B6760;
  --mute-soft:   #76716A;
  --hair:        rgba(14, 15, 12, .12);
  --hair-soft:   rgba(14, 15, 12, .07);

  --serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --text:  "Newsreader", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --sans:  "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --container: 1280px;
  --gutter:    clamp(20px, 4vw, 48px);
  --section-y: clamp(80px, 12vw, 160px);

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 14px;

  --ease:      cubic-bezier(.2, .8, .2, 1);
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --dur-fast:  180ms;
  --dur:       260ms;
  --dur-slow:  420ms;

  --chrome-h:  60px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-top: var(--chrome-h);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
kbd {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(14,15,12,.05);
  border: 1px solid var(--hair-soft);
  color: var(--mute);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--ink); color: var(--cream);
  padding: 10px 14px; z-index: 1000;
  border-radius: var(--radius-sm); font-size: 14px;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section + .section { border-top: 1px solid var(--hair-soft); }

.two-col { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .two-col {
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: clamp(48px, 8vw, 120px);
    align-items: start;
  }
}
.section-header.two-col { margin-bottom: clamp(40px, 6vw, 72px); }

/* ---------- Subtle grain overlay (the "made not themed" tax) ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.03; } }

/* ---------- Top chrome (sticky bar w/ wordmark + chapter + actions) ---------- */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--chrome-h);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}
.chrome-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  padding-inline: var(--gutter);
  max-width: none;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 20px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
}
.wordmark-mark { display: grid; place-items: center; color: var(--ink); }
.wordmark-mark-light { color: var(--ink); }
.rg-mark { display: block; }
/* Stroke-draw animation on load — the mark draws itself as a single signature */
.rg-mark-bowl, .rg-mark-leg {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rg-draw 1100ms var(--ease) 200ms forwards;
}
.rg-mark-leg { animation-delay: 900ms; animation-duration: 500ms; }
@keyframes rg-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rg-mark-bowl, .rg-mark-leg { animation: none; stroke-dashoffset: 0; }
}

.chapter {
  justify-self: center;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute);
  transition: opacity var(--dur) var(--ease);
}
.chapter-num { color: var(--ink); font-variant-numeric: tabular-nums; }
.chapter-sep { opacity: .5; }
.chapter.is-fading { opacity: 0; }
@media (max-width: 760px) { .chapter { display: none; } }

.chrome-actions { display: inline-flex; align-items: center; gap: 10px; }

.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13px; color: var(--mute);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cmdk-trigger:hover { border-color: var(--ink); color: var(--ink); background: rgba(14,15,12,.02); }
.cmdk-trigger kbd { background: transparent; border-color: var(--hair); }
@media (max-width: 760px) { .cmdk-trigger { display: none; } }

.chrome-cta {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: var(--ink); color: var(--cream);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chrome-cta:hover { background: var(--ink-soft); transform: translateY(-1px); }

/* ---------- Typography ---------- */
.display, .h-display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400; font-style: normal;
  letter-spacing: -0.015em; color: var(--ink);
}
.display {
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  margin: 0 0 28px;
}
.display em { font-style: italic; color: var(--accent); }
.h-display {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.h-display em { font-style: italic; color: var(--accent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 28px;
}
/* Spec-card eyebrow — NASA flight-card / Patek spec-sheet treatment.
   Two rows of mono data, labels recede, values lead. */
.eyebrow-spec {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 28px;
  line-height: 1.5;
}
.eyebrow-spec .eyebrow-row {
  display: flex; flex-wrap: wrap;
  gap: 4px 22px;
  align-items: baseline;
}
.eyebrow-spec .eyebrow-row--coords {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 2px;
  width: 100%;
}
.eyebrow-spec #hero-clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.10em;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 36px;
  letter-spacing: -0.005em;
}
.lede-sm {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 56ch;
  margin: 0;
  letter-spacing: -0.005em;
}

.prose p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; max-width: 62ch; letter-spacing: -0.005em; }
.prose p:last-child { margin-bottom: 0; }
.prose-emphasis {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.32;
  color: var(--ink) !important;
  margin-top: 30px !important;
  letter-spacing: -0.012em;
}
.prose-emphasis em { font-style: italic; color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 18px 28px; font-size: 16px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: clamp(56px, 9vw, 110px);
  padding-bottom: clamp(72px, 10vw, 140px);
  padding-inline: var(--gutter);
  position: relative;
}
.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.45fr .9fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}
/* Wind-veil canvas — sits behind hero content, full-bleed across the hero box.
   The hero owns position:relative; canvas is absolutely positioned to its edges.
   z-index 0 puts it below the hero-grid (stacking context promoted to 1). */
.hero > #wind-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: auto;     /* receive pointermove for the gust ripple */
  user-select: none;
  transform: translateZ(0);
  will-change: filter;
}
.hero > .hero-grid {
  position: relative;
  z-index: 1;
}
/* Forward pointer events to the wind-veil canvas underneath, EXCEPT
   on interactive elements (buttons, links). Lets the entire hero respond
   to mouse hover for the ripple effect, while keeping clicks on chips/CTAs working. */
.hero-grid { pointer-events: none; }
.hero-grid a,
.hero-grid button,
.hero-grid [role="tab"],
.hero-grid [role="button"],
.hero-grid input,
.hero-grid select,
.hero-grid textarea,
.hero-grid label {
  pointer-events: auto;
}
/* Warm light wash above the canvas — a soft directional gradient that suggests
   light raking across the wind-veil surface from the upper-left. Sits between
   the canvas (z:0) and the content (z:1). Pointer-events:none so it doesn't
   block hover on text/buttons. */
/* Horizon glow above the WebGL ocean — adds atmospheric warmth at the top and
   a subtle grounding tint at the bottom. Sits between the canvas (z:0) and
   the content (z:1). pointer-events:none so text/buttons remain interactive. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Bare hint of grounding warmth at very bottom — barely visible */
    linear-gradient(
      to top,
      rgba(74, 50, 30, 0.06) 0%,
      rgba(74, 50, 30, 0) 14%
    ),
    /* Tiny brand-color whisper bottom-right */
    radial-gradient(
      ellipse 35% 25% at 82% 95%,
      rgba(107, 31, 26, 0.04),
      rgba(107, 31, 26, 0) 70%
    );
  opacity: 0.18;
}
/* Diagonal sun/wind streak — a very faint angular highlight reinforcing the
   shader's sun-glint direction. Adds a sense of light coming from upper-right.
   Pointer-events:none so interactions pass through. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(244, 240, 232, 0) 35%,
    rgba(244, 240, 232, 0.45) 55%,
    rgba(244, 240, 232, 0.82) 75%,
    rgba(244, 240, 232, 0.95) 92%,
    rgba(244, 240, 232, 1) 100%
  );
  opacity: 1;
}
/* When the user prefers reduced motion, the canvas script renders one static frame.
   Soften it further visually so the static field doesn't compete with copy. */
@media (prefers-reduced-motion: reduce) {
  .hero > #wind-veil { opacity: .75; }
  .hero::before { opacity: .65; }
  .hero::after { opacity: .35; }
}

.hero-text { min-width: 0; }
.hero-text .eyebrow { animation: fade-rise 800ms var(--ease) both; }
.hero-text .lede     { animation: fade-rise 900ms var(--ease) 700ms both; opacity: 0; }
.hero-cta            { animation: fade-rise 900ms var(--ease) 820ms both; opacity: 0; }
.hero-meta           { animation: fade-rise 900ms var(--ease) 940ms both; opacity: 0; }

/* Kinetic headline: words rise from beneath a horizon with blur decay */
.kinetic {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7.8vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.034em;
  margin: 0 0 32px;
  color: var(--ink);
}
.kinetic .line { display: block; }
/* Pin the verb-containing line to 2 visual lines so long verbs
   (reposition, compound) don't wrap the headline taller and shift
   the page below on each verb cycle. */
.kinetic .line:nth-of-type(2) {
  min-height: calc(2 * 1lh);
}
/* Force the verb and "the system" to stack onto two visual lines every
   time, so short verbs (build) and long verbs (reposition) produce the
   same headline height. Eliminates the gap that the min-height alone left. */
.kinetic .line:nth-of-type(2) .word {
  display: block;
}
.kinetic .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 .06em;
  margin: 0 -.06em;
}
.kinetic .word > span {
  display: inline-block;
  transform: translateY(108%);
  filter: blur(8px);
  opacity: 0;
  animation: word-rise 1100ms var(--ease) forwards;
}
.kinetic .line:nth-child(1) .word > span { animation-delay:  60ms; }
.kinetic .line:nth-child(2) .word > span { animation-delay: 240ms; }
.kinetic .line:nth-child(3) .word:nth-of-type(1) > span { animation-delay: 460ms; }
.kinetic .line:nth-child(3) .word:nth-of-type(2) > span { animation-delay: 580ms; }
.kinetic .line:nth-child(3) .word:nth-of-type(3) > span { animation-delay: 720ms; }

@keyframes word-rise {
  60%  { filter: blur(0); opacity: 1; }
  100% { transform: translateY(0); filter: blur(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic .word > span { animation: none; transform: none; filter: none; opacity: 1; }
  .hero-text .eyebrow, .hero-text .lede, .hero-cta, .hero-meta { animation: none; opacity: 1; }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
  max-width: 640px;
}
@media (min-width: 640px) {
  .hero-meta { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.hero-meta div { display: flex; flex-direction: column; gap: 6px; }
.hero-meta dt {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}
.hero-meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.meta-emph { color: var(--accent); font-style: italic; }

/* Pin the hero lede height to the tallest verb-variant so cycling
   verbs never causes layout shift below. The build variant is the
   longest (~50 words → ~7 lines at typical hero widths). */
#hero-lede {
  min-height: calc(7 * 1lh);
}
@media (min-width: 980px) {
  /* At wider widths the lede is on one narrower column — gets taller per word.
     Reserve a bit more height to absorb the worst case. */
  #hero-lede { min-height: calc(8 * 1lh); }
}
@media (max-width: 560px) {
  /* On narrow phones the build lede wraps to many lines. */
  #hero-lede { min-height: calc(10 * 1lh); }
}

/* ---------- Hero portrait slot ---------- */
.hero-portrait {
  margin: 0;
  align-self: start;
  animation: fade-rise 500ms var(--ease) 200ms both;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .hero-portrait { animation: none; opacity: 1; } }
.portrait {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Soft drop-shadow so the portrait grounds against the moving ocean
     instead of floating ambiguously. */
  filter:
    drop-shadow(0 6px 16px rgba(14, 15, 12, 0.18))
    drop-shadow(0 2px 4px rgba(14, 15, 12, 0.12));
}
.portrait img { width: 100%; height: auto; border-radius: var(--radius); display: block; background: var(--cream-2); }
.portrait figcaption {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute);
}
.portrait-name { color: var(--ink); }
.portrait-role { color: var(--mute); }

/* ============================================================
   MARQUEE
   ============================================================ */

/* ============================================================
   SECTION LABELS
   ============================================================ */
.col-label {
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: calc(var(--chrome-h) + 28px);
  align-self: start;
}
@media (max-width: 899px) {
  .col-label { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
}
.section-num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em; color: var(--mute);
}
.section-kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}

/* ============================================================
   SERVICES — with hover-revealed preview panel
   ============================================================ */
.section-services { position: relative; }
.services-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hair);
}
.service {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas:
    "num title"
    "num tag"
    "num desc";
  gap: 4px 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
@media (min-width: 900px) {
  .service {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas:
      "num title tag"
      "num desc  desc";
    align-items: baseline;
    gap: 12px 32px;
    padding: 36px 8px;
  }
}
.service-num {
  grid-area: num;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--mute-soft);
  padding-top: 8px;
  letter-spacing: 0.04em;
  transition: color var(--dur) var(--ease);
}
.service-title {
  grid-area: title;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.service-tag {
  grid-area: tag;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute-soft);
  white-space: nowrap;
}
.service-desc {
  grid-area: desc;
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--mute);
  letter-spacing: -0.005em;
  max-width: 62ch;
}

/* ============================================================
   PROCESS
   ============================================================ */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.process-step {
  background: var(--cream-2);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.process-step:hover { background: var(--cream-3); border-color: var(--hair); transform: translateY(-2px); }

.process-step-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft); }
.process-num {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--accent); letter-spacing: 0.06em;
}
.process-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 26px; margin: 0; letter-spacing: -0.01em;
}
.process-body { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.process-meta {
  margin: auto 0 0; padding-top: 14px;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--mute);
}

/* ============================================================
   PROOF — working principles
   ============================================================ */
.proof-principles {
  margin-top: clamp(40px, 5vw, 64px);
}
.principles-list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hair);
}
.principle {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
@media (min-width: 900px) {
  .principle {
    grid-template-columns: 60px 1fr;
    gap: 32px;
    padding: 28px 8px;
  }
}
.principle-num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--mute-soft);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.principle-text {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ============================================================
   CTA
   ============================================================ */
.section-cta {
  background: var(--ink);
  color: var(--cream);
  border-top: 0 !important;
}
.section-cta .eyebrow { color: rgba(244,240,232,.6); }
.section-cta .display, .section-cta .h-display { color: var(--cream); }
.section-cta .display em, .section-cta .h-display em { color: var(--accent); }
.section-cta .lede { color: rgba(244,240,232,.78); max-width: 60ch; }
.section-cta .btn-primary { background: var(--cream); color: var(--ink); }
.section-cta .btn-primary:hover { background: var(--accent); color: var(--cream); }

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 60px; }

.contact-list {
  list-style: none; margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(244,240,232,.12);
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 640px) { .contact-list { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.contact-list li { display: flex; flex-direction: column; gap: 4px; }
.contact-label {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244,240,232,.5);
}
.contact-value {
  font-family: var(--serif); font-size: 18px;
  color: var(--cream); border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  align-self: flex-start;
}
a.contact-value:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   CONTACT FORM
   Sits inside the dark .section-cta. Inputs flip to cream so
   the form reads as editorial inserts on ink, not pasted boxes.
   ============================================================ */

/* Quiet mono caption under the hero CTAs (lives in light hero) */
.hero-cta-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 16px 0 0;
}

.contact-form-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 48px 0 24px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
  margin: 0;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, .55);
  margin-bottom: 8px;
}

.form-optional {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  color: rgba(244, 240, 232, .35);
  margin-left: 6px;
  font-style: italic;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%236B6760' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--mute);
  opacity: .7;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
  border-color: rgba(14, 15, 12, .22);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--accent);
  background-color: var(--cream);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: none;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--sans);
}

.contact-form-submit {
  align-self: flex-start;
  margin-top: 6px;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  background: var(--cream);
  color: var(--ink);
}
.contact-form-submit:hover {
  background: var(--accent);
  color: var(--cream);
}

.form-fine-print {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(244, 240, 232, .5);
  margin: 12px 0 0;
  max-width: 56ch;
  line-height: 1.55;
}

/* Hidden success state — keep [hidden] honored */
.contact-form-success[hidden] { display: none; }
.contact-form-success {
  max-width: 560px;
  margin: 0;
  padding: 24px 26px;
  background: rgba(244, 240, 232, .04);
  border: 1px solid rgba(244, 240, 232, .14);
  border-radius: var(--radius-sm);
  animation: contact-success-in 240ms var(--ease) both;
}
.contact-form-success h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--cream);
  margin: 0 0 8px;
}
.contact-form-success p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(244, 240, 232, .78);
  margin: 0;
}
.contact-form-success a {
  color: var(--cream);
  border-bottom: 1px solid rgba(244, 240, 232, .35);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-form-success a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@keyframes contact-success-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form-success { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Contact form — light-context variant (e.g., pricing page).
   Add class `contact-form-light` to flip type colors + button.
   ───────────────────────────────────────────────────────────── */
.contact-form-light label { color: var(--mute); }
.contact-form-light .form-optional { color: var(--mute-soft); }
.contact-form-light .contact-form-heading { color: var(--ink); }
.contact-form-light .contact-form-submit {
  background: var(--ink);
  color: var(--cream);
}
.contact-form-light .contact-form-submit:hover {
  background: var(--accent);
  color: var(--cream);
}
.contact-form-light .form-fine-print { color: var(--mute); }
.contact-form-light .contact-form-success {
  background: var(--cream-2);
  border: 1px solid var(--hair);
}
.contact-form-light .contact-form-success h3 { color: var(--ink); }
.contact-form-light .contact-form-success p { color: var(--ink-soft); }
.contact-form-light .contact-form-success a {
  color: var(--ink);
  border-bottom-color: var(--hair);
}
.contact-form-light .contact-form-success a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Divider label between form and fallback contact list */
.contact-or {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, .45);
  max-width: 560px;
  margin: 40px 0 20px;
}
.contact-or::before,
.contact-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(244, 240, 232, .12);
}

/* Mobile */
@media (max-width: 600px) {
  .contact-form { gap: 20px; }
  .contact-form-submit { align-self: stretch; width: 100%; }
  .contact-form-heading { margin-top: 40px; }
}

/* ============================================================
   FOOTER + SHIPPING LOG
   ============================================================ */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--hair);
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(28px, 3vw, 40px);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "brand"
    "nav"
    "meta";
  gap: 28px;
}
@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand nav"
      "meta  meta";
    gap: 24px 64px;
    align-items: center;
  }
}

.footer-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 14px; }
.footer-brand-text { display: flex; flex-direction: column; gap: 2px; }
.footer-name { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.footer-location { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }

.footer-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 18px; }
.footer-nav a { font-size: 14px; color: var(--mute); transition: color var(--dur) var(--ease); }
.footer-nav a:hover { color: var(--ink); }

.footer-meta {
  grid-area: meta;
  margin: 0; padding-top: 24px;
  border-top: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--mute);
}
.footer-email { color: var(--ink); transition: color var(--dur) var(--ease); }
.footer-email:hover { color: var(--accent); }

/* ============================================================
   ⌘K COMMAND PALETTE
   ============================================================ */
#cmdk {
  border: 0; padding: 0; background: transparent;
  max-width: 560px; width: min(560px, 92vw);
  margin-top: 14vh;
  color: var(--cream);
}
#cmdk::backdrop {
  background: rgba(14,15,12,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#cmdk[open] { animation: cmdk-pop 200ms var(--ease); }
@keyframes cmdk-pop {
  from { transform: translateY(-6px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cmdk-shell {
  background: #14150F;
  border: 1px solid rgba(244,240,232,.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(244,240,232,.04);
  overflow: hidden;
}

.cmdk-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(244,240,232,.08);
}
.cmdk-input-icon {
  font-family: var(--mono); color: var(--accent);
  font-size: 13px; opacity: .8;
}
#cmdk-q {
  width: 100%;
  background: transparent; border: 0; outline: 0;
  color: var(--cream);
  font-family: var(--sans); font-size: 15px;
  caret-color: var(--accent);
}
#cmdk-q::placeholder { color: rgba(244,240,232,.35); }
.cmdk-esc {
  background: rgba(244,240,232,.06);
  border: 1px solid rgba(244,240,232,.10);
  color: rgba(244,240,232,.6);
  font-size: 10px;
}

#cmdk-list {
  list-style: none; margin: 0; padding: 8px;
  max-height: 50vh; overflow: auto;
}
#cmdk-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px; color: rgba(244,240,232,.85);
  cursor: pointer;
}
#cmdk-list li[aria-selected="true"] {
  background: rgba(244,240,232,.06);
  color: var(--cream);
}
#cmdk-list li[aria-selected="true"] .cmdk-icon { color: var(--accent); }
.cmdk-icon {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: rgba(244,240,232,.5);
  display: inline-flex; align-items: center; justify-content: center;
}
.cmdk-hint {
  font-family: var(--mono); font-size: 10px;
  color: rgba(244,240,232,.4); letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cmdk-foot {
  display: flex; gap: 18px; justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid rgba(244,240,232,.08);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(244,240,232,.45);
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot kbd {
  background: rgba(244,240,232,.06);
  border-color: rgba(244,240,232,.10);
  color: rgba(244,240,232,.6);
  font-size: 10px;
}

/* ============================================================
   SELECTION
   ============================================================ */
::selection { background: var(--accent); color: var(--cream); }

/* =============================================================
   v3 ADDITIONS — multi-page architecture, view transitions,
   verb swap hero, editorial reading system, live metadata.
   ============================================================= */

/* ── View Transitions API — same-document & cross-document ── */
@view-transition { navigation: auto; }

/* Persistent chrome stays put during cross-doc navigation */
.chrome           { view-transition-name: chrome; }
.site-footer      { view-transition-name: page-footer; }

/* Root crossfade tuned tighter than the browser default */
::view-transition-old(root) {
  animation: 200ms cubic-bezier(.4,0,1,1) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 360ms cubic-bezier(0,0,.2,1) 60ms both vt-slide-in;
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Top chrome v3 — real cross-page nav (replaces chapter bar on inner pages) ── */
.chrome-nav {
  display: inline-flex; align-items: center; gap: 24px;
  justify-self: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.chrome-nav a {
  position: relative;
  padding: 6px 0;
  transition: color var(--dur) var(--ease);
}
.chrome-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.chrome-nav a:hover { color: var(--ink); }
.chrome-nav a:hover::after,
.chrome-nav a[aria-current="page"]::after { transform: scaleX(1); }
.chrome-nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 760px) {
  .chrome-nav { display: none; }
}

/* ── Mobile menu — <details> dropdown that replaces .chrome-nav under 760px ── */
.mobile-menu {
  display: none;
  position: relative;
  justify-self: end;
}
@media (max-width: 759px) {
  .mobile-menu { display: inline-block; }
}
.mobile-menu summary {
  display: block;                     /* kills the default list-item marker */
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  user-select: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::marker { content: ""; display: none; }
/* Hide the nav by default — only show when [open] (rule below) */
.mobile-menu > nav { display: none; }
.mobile-menu summary:hover { border-color: var(--ink); }
.mobile-menu[open] summary { border-color: var(--ink); }

.mobile-menu[open] > nav {
  display: flex;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 8px 0;
  box-shadow: 0 12px 32px -12px rgba(14, 15, 12, 0.18);
  flex-direction: column;
  z-index: 60;
}
.mobile-menu nav a {
  display: block;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mobile-menu nav a:hover { color: var(--ink); background: rgba(14, 15, 12, 0.03); }
.mobile-menu nav a[aria-current="page"] { color: var(--ink); }

/* ── Verb-swap hero (signature v3 interactive) ── */
.kinetic .verb-host {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.kinetic .verb {
  font: inherit;
  font-style: italic;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 .04em;
  position: relative;
  display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: opacity 240ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.kinetic .verb.is-swap { opacity: 0; }
.kinetic .verb:hover   { color: var(--accent-deep); }

.verb-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 28px 0 32px;
  font-family: var(--mono);
}
.verb-row button {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--mute);
  background: transparent;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.verb-row button:hover { color: var(--ink); border-color: var(--ink-soft); }
.verb-row button.is-active {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.hero-text .lede.is-swap { opacity: 0; }
.hero-text .lede { transition: opacity 240ms var(--ease); }

/* ── Secondary page (inner) layout ── */
.page {
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(80px, 10vw, 140px);
  max-width: none;
}
.page-inner {
  max-width: 740px;
  margin: 0 auto;
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ink);
}
.page-title em { font-style: italic; color: var(--accent); }
.page-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin: 0 0 56px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.page-meta time { font-variant-numeric: tabular-nums; }
.page-meta .sep { color: var(--mute-soft); }

/* ── /now and /principles section rhythm ── */
.now-section { margin-bottom: 48px; }
.now-section h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair-soft);
}
.now-section p,
.now-section li {
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-feature-settings: "onum", "liga", "kern";
}
.now-section ul { list-style: none; padding: 0; margin: 0; }
.now-section li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 16px;
}
.now-section li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.now-section strong {
  font-weight: 400;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
}
.now-section em {
  font-style: italic;
  color: var(--accent);
}

/* ── /now inline link + coda — extracted from inline styles ──
   .now-inline-link        : muted underline, inherits color (for body refs)
   .now-inline-link--accent: same shape, accent underline (for the CTAs
                             that should pull the eye — email, Playbook link)
   .now-coda               : the small mono sign-off paragraph at page end */
.now-inline-link {
  color: inherit;
  border-bottom: 1px solid currentColor;
}
.now-inline-link--accent {
  color: inherit;
  border-bottom: 1px solid var(--accent);
}
.now-coda {
  margin-top: 64px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute-soft);
}

/* Principles list — numbered, permalinkable (inner page only) */
.page-inner .principle {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px 20px;
  margin: 0 0 36px;
  padding: 0;
  border-bottom: 0;
}
.page-inner .principle-num {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 8px;
}
.page-inner .principle-body h2,
.page-inner .principle-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.page-inner .principle-body h2 a,
.page-inner .principle-body h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.page-inner .principle-body h2 a:hover,
.page-inner .principle-body h3 a:hover { border-bottom-color: var(--accent); }
.page-inner .principle-body p {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  font-feature-settings: "onum", "liga";
}
.page-inner .principle:target .principle-body h2,
.page-inner .principle:target .principle-body h3 {
  color: var(--accent);
}

/* Principles page: section rule, eyebrow, lede, coda */
.page-rule {
  border: 0;
  border-top: 1px solid var(--hair-soft);
  margin: 64px 0 48px;
}
.page-inner .page-section-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 8px;
}
.page-inner .page-section-lede {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0 0 24px;
  max-width: 56ch;
}
.page-inner .page-section-lede a,
.page-inner .page-coda a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease);
}
.page-inner .page-section-lede a:hover,
.page-inner .page-coda a:hover { color: var(--accent); }
.page-inner .page-coda {
  margin: 80px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute-soft);
}

/* Standing invitations / refusals — two-column lists on desktop */
.standings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 760px) {
  .standings { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.standings .standing h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  margin: 0 0 16px;
}
.standings .standing-yes h3 { color: var(--accent); }
.standings ul { list-style: none; padding: 0; margin: 0; }
.standings li {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
  margin-bottom: 12px;
}
.standings .standing-yes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.standings .standing-no  li::before { content: "—"; position: absolute; left: 0; color: var(--mute-soft); }

/* ── Editorial essay layout (/playbook/*) ── */
.essay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 32px) clamp(80px, 10vw, 140px);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.65;
  font-feature-settings: "onum", "liga", "kern";
  color: var(--ink);
}
@media (min-width: 1100px) {
  .essay {
    grid-template-columns:
      [spine] 180px
      [body]  minmax(0, 66ch)
      [margin] 280px;
    column-gap: 56px;
  }
}
.essay > * { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .essay > * { grid-column: body; }
}

.essay-header { margin-bottom: clamp(48px, 6vw, 72px); }
.essay-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.essay-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.essay-title {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 22px;
  max-width: 22ch;
  color: var(--ink);
}
.essay-title em { font-style: italic; color: var(--accent); }
.essay-dek {
  font-family: var(--text);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.4;
  font-style: italic;
  color: var(--mute);
  max-width: 56ch;
  margin: 0 0 28px;
}
.essay-metaline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0;
}
.essay-metaline time { font-variant-numeric: tabular-nums; }
.essay-metaline .sep { color: var(--mute-soft); }

.essay p {
  margin: 0 0 1em;
  font-feature-settings: "onum", "liga", "kern";
}
.essay h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin: 2.2em 0 0.8em;
  color: var(--ink);
}
.essay h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 1.8em 0 0.6em;
  color: var(--ink-soft);
}
.essay h2 + p,
.essay h3 + p { margin-top: 0; }
.essay a:not(.btn) {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.essay a:not(.btn):hover { color: var(--accent); }
.essay em { font-style: italic; }
.essay strong { font-weight: 500; }
.essay hr {
  border: 0;
  text-align: center;
  margin: 2.4em 0;
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
}
.essay hr::before { content: "* * *"; letter-spacing: .4em; }

/* Drop cap — modern + float fallback */
.essay .opener::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3 2;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  margin-right: 0.1em;
  padding-right: 0.04em;
}
@supports not (initial-letter: 3) {
  .essay .opener::first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.82;
    padding: 0.05em 0.1em 0 0;
    color: var(--accent);
    font-family: var(--serif);
    font-style: italic;
  }
}

/* Pull quote */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
  margin: 2.4em auto;
  padding: 0.3em 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  text-align: left;
}
@media (min-width: 1100px) {
  .pullquote.float {
    grid-column: margin;
    margin: 0.3em 0 1em;
    max-width: none;
    font-size: 22px;
    border-color: var(--hair);
  }
}

/* Sidenote — checkbox/label, no JS */
.sn-state, .sn-toggle { display: none; }
.sn-toggle {
  display: inline;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7em;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
  user-select: none;
}
.sn-toggle:hover { color: var(--accent-deep); }

.availability-note {
  display: block;
  margin: 1.25rem 0 2rem;
  padding: 14px 18px;
  background: var(--cream-2);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.availability-note strong {
  color: var(--accent-deep, var(--accent));
  letter-spacing: 0.005em;
}

.sidenote {
  display: block;
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}
.sidenote .sn-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* Mobile/tablet: collapsed; tap toggle expands inline */
@media (max-width: 1099px) {
  .sidenote {
    display: none;
    margin: 14px 0;
    padding: 12px 16px;
    background: var(--cream-2);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .sn-state:checked ~ .sidenote { display: block; }
}

/* Desktop: float into right margin */
@media (min-width: 1100px) {
  .sidenote {
    grid-column: margin;
    float: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  /* Use grid placement so each sidenote lands in margin column.
     The trick: wrap each in a wrapper that grid-row aligns to the paragraph
     OR simply allow the natural flow + JS adjustment. For now, float pattern: */
  p .sidenote {
    float: right;
    clear: right;
    width: 260px;
    margin-right: -312px;
    margin-top: 0.3em;
    display: block !important;
  }
}

/* Chapter spine (sticky table of contents on desktop) */
.essay-spine {
  display: none;
}
@media (min-width: 1100px) {
  .essay-spine {
    display: block;
    grid-column: spine;
    position: sticky;
    top: calc(var(--chrome-h) + 36px);
    align-self: start;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute-soft);
    line-height: 1.8;
  }
  .essay-spine li { padding: 2px 0; }
  .essay-spine a {
    color: var(--mute);
    transition: color var(--dur) var(--ease);
  }
  .essay-spine a:hover,
  .essay-spine .is-active a { color: var(--ink); }
  .essay-spine .is-active a { font-weight: 500; }
}

/* Reading progress bar (top of viewport) */
.progress-bar {
  position: fixed; top: var(--chrome-h); left: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 49;
}
@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}


/* Hero lede-frame: a persistent, system-level note that DOESN'T swap with the verb.
   Sits beneath the swapping lede and explains the choosing mechanic itself. */
.lede-frame {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--mute);
  max-width: 52ch;
  margin: -16px 0 36px;
  /* Faint cream wash behind the text so it stays readable when the ocean
     dips dark behind it. Soft inset to feather edges; doesn't read as a card. */
  background: linear-gradient(
    to right,
    rgba(244, 240, 232, 0.78),
    rgba(244, 240, 232, 0.55) 75%,
    rgba(244, 240, 232, 0.0)
  );
  padding: 14px 18px 14px 22px;
  border-radius: 8px;
  /* Preserve the existing red left-border accent. */
  border-left: 2px solid var(--accent);
}
.lede-frame em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: -0.005em;
  vertical-align: baseline;
}

/* ---------- Essay: pricing tiers ---------- */
.tier {
  margin: 2rem 0 2.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}
.tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin: 0 0 0.6rem;
}
.essay .tier-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.tier-price {
  font-family: var(--mono);
  font-size: clamp(18px, 1.8vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.tier-price-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.tier-body {
  margin: 0;
}

/* ---------- Essay: inline CTA block ---------- */
.essay-cta {
  margin: 3rem 0 1rem;
  padding: clamp(24px, 3vw, 36px);
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.essay-cta-text {
  flex: 1 1 18rem;
}
.essay-cta-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
  margin: 0 0 0.5rem;
  max-width: none;
}
.essay-cta-headline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  max-width: 26ch;
}
.essay-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.essay-cta .btn {
  border-bottom-width: 1px;
}
.essay-cta .btn-primary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.essay-cta .btn-primary:hover {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}
.essay-cta .btn-ghost {
  color: rgba(244, 240, 232, 0.85);
  border-color: rgba(244, 240, 232, 0.25);
}
.essay-cta .btn-ghost:hover {
  border-color: var(--cream);
  color: var(--cream);
  background: rgba(244, 240, 232, 0.06);
}

/* ---------- Essay coda: filed-in / updated line ---------- */
.essay-coda {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute-soft);
}