/* chapter-art.css — interactive moments, draggables, page-flips, counters */

/* ============================================================
   COVER
   ============================================================ */

.cover {
  position: relative;
  min-height: 100vh;
  padding: var(--gutter) var(--gutter) 120px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.cover__chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
  margin-bottom: clamp(24px, 4vw, 56px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover__chrome strong { color: var(--ink); font-weight: 600; }

/* Stacked left column: VOL info on top, "A digital hand-set zine" tagline below */
.cover__chrome-vol {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}
.cover__chrome-tagline {
  /* It's a <button> but should read as text with a subtle hover affordance */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.cover__chrome-tagline:hover {
  border-bottom-color: var(--accent);
}
.cover__chrome-tagline:active { transform: translateY(1px); }
.cover__chrome-tagline:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.cover__main {
  position: relative;
  display: grid;
  /* Single column — VASTOLA at clamp(86px, 12vw, 180px) is too wide for the
     legacy two-column split at any common viewport, so it was clipping on
     the left. The toc-slot (the right-hand column) was dead space since
     the ChapterNav rewrite anyway. */
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: stretch;
  padding: clamp(20px, 5vw, 64px) 0;
}

.cover__masthead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover__supra {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.9;
  transform: rotate(-3deg);
  margin: 0 0 -8px;
}

.cover__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 140px);    /* dialed down from the previous 86/12vw/180 */
  letter-spacing: -0.04em;
  line-height: 0.82;
  margin: 0;
  text-wrap: balance;
}
.cover__title em {
  font-style: italic;
  color: var(--accent);
}

.cover__deck {
  /* Sub-header — matched to the About me / Services sub-headers so the
     sub-header type stays consistent across all three pages (Newsreader
     italic, same fluid size + colour). */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.45;
  margin: 24px 0 0 40px;        /* 40px indent off the V to soften the column */
  max-width: 64ch;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  text-align: left;
  align-self: stretch;
}

.cover__byline {
  margin: 36px 0 0 40px;        /* matches the deck indent */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  align-self: stretch;
}
.cover__byline strong { color: var(--ink); }

/* Vol. badge — anchored to masthead column, sits just past the final "A" in VASTOLA.
   It's a real <button> for the easter-egg modal so it's clickable & keyboard-accessible. */
.vol-badge {
  position: absolute;
  top: -10px;
  right: -80px;
  transform: rotate(8deg);
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s cubic-bezier(.6,.05,.3,1);
}
.vol-badge:hover { transform: rotate(8deg) scale(1.06); }
.vol-badge:active { transform: rotate(8deg) scale(0.97); }
.vol-badge:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}
.cover__masthead { position: relative; }
@media (max-width: 900px) {
  .vol-badge { right: -40px; top: -16px; transform: rotate(8deg) scale(0.85); }
}

/* Cover TOC card */
.cover__toc {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: clamp(22px, 3vw, 36px);
  font-family: var(--font-body);
  box-shadow: 8px 8px 0 var(--ink);
}

.cover__toc h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.cover__toc h3 + .mono { font-size: 10px; color: var(--ink-soft); }

.toc-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}
.toc-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-soft);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.toc-row:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
.toc-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 14px;
  color: var(--accent);
}
.toc-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.toc-row__page {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}

.cover__footer {
  display: flex;
  align-items: center;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover__footer .center {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-transform: none;
}

/* ===== Cover chrome links (Working Life / Creative Life) =====
   The two-volume toggle is the dominant element in the chrome bar — bigger
   font, accent underline for the active one, dashed underline on hover for
   the other. The separator dot fades into the background. */
.cover__chrome-links {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.cover__chrome-links > span[aria-hidden="true"] {
  color: var(--ink-soft);
  opacity: 0.4;
  font-size: 13px;
}
.cover__chrome-links .chrome-link {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 2px 4px 4px;
  transition: color .15s ease;
}
.cover__chrome-links .chrome-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.6,.05,.3,1);
}
.cover__chrome-links .chrome-link:hover { color: var(--accent); }
.cover__chrome-links .chrome-link:hover::after { transform: scaleX(1); }
.cover__chrome-links .chrome-link.is-current {
  color: var(--ink);
}
.cover__chrome-links .chrome-link.is-current::after {
  transform: scaleX(1);
}

.cover__chrome-contact {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}
.cover__chrome-contact a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.cover__chrome-contact a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  .cover__chrome {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
  }
  .cover__chrome > span { text-align: left !important; }
}

/* Cover deck — wider; takes the masthead width up to ~720px */
.cover__deck > span:first-child { display: inline; }
.cover__deck em { color: var(--accent); }

/* Override the inline width/height that was set previously — wider, fluid */
[style*="width: 555px"].cover__deck,
.cover__deck {
  width: auto !important;
  height: auto !important;
  max-width: min(720px, 100%);
}

/* Byline partner text — "in partnership with Claude" sits on its own line beneath the main byline,
   flush-left with the "Written, edited..." line above. */
.cover__partner {
  display: block;
  margin-top: 4px;
  opacity: 0.55;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-display);
  text-align: left;
}

/* Cover connect line (replaces "In this issue" copy) */
.cover__connect {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.cover__linkedin {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 2px;
}
.cover__linkedin:hover { color: var(--accent); }
.cover__linkedin u { text-transform: none; letter-spacing: 0.04em; }

/* ===== Cover responsive tightening ===== */
@media (max-width: 700px) {
  .cover { padding: var(--gutter) var(--gutter) 80px; }
  .cover__title { font-size: clamp(64px, 16vw, 110px) !important; }
  .cover__footer { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .cover__footer > * { justify-self: center; }
}

/* ============================================================
   FREELANCE — On Offer This Season
   ============================================================ */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 800px) { .offer-grid { grid-template-columns: 1fr; } }

.offer-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px 26px 24px;
  min-height: 280px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.offer-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--ink);
}
.offer-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 8px;
}
.offer-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.0;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.offer-card__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.offer-card__price {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-loud);
  color: var(--accent);
  font-size: 18px;
  transform: rotate(6deg);
}
.offer-card__body {
  font-size: 15px;
  line-height: 1.5;
}
.offer-card__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.offer-card__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px dashed var(--ink-soft);
}
.offer-card__list li::before {
  content: "✦";
  color: var(--accent);
  font-size: 12px;
}

.offer-card__flip {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ============================================================
   CHAPTER 1 — FIG. 1 · The Process Loop
   Three-stage animated workflow: wireframes → functional specs
   → design system + designer training. Drafting-grid background
   echoes the blueprint vocabulary in Fig. 2 for continuity.
   ============================================================ */
.process-lab {
  position: relative;
  width: 100%;
  height: 460px;
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
  user-select: none;
}
.process-lab__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(26,23,20,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,23,20,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.process-lab__scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.process-lab__label {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
  z-index: 3;
}
.process-lab__hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--accent);
  transform: rotate(-3deg);
  z-index: 3;
  text-align: right;
  line-height: 1.05;
  pointer-events: none;
}
.process-lab__stamp {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   SVG primitives styled with palette tokens
   ============================================================ */
.process-lab .pl-panel__frame {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.process-lab .pl-panel__title {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.process-lab .pl-panel__sub {
  fill: var(--accent);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.process-lab .pl-tick {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.1em;
}

/* Wireframe blocks */
.process-lab .pl-wire {
  fill: color-mix(in oklab, var(--paper-shadow) 75%, var(--paper));
  stroke: var(--ink);
  stroke-width: 0.7;
}
.process-lab .pl-wire--cta {
  fill: color-mix(in oklab, var(--accent) 30%, var(--paper));
  stroke: var(--accent);
}
.process-lab .pl-wire-line {
  stroke: var(--ink);
  stroke-width: 0.7;
  opacity: 0.5;
}

/* Functional spec lines */
.process-lab .pl-spec-num {
  fill: var(--accent);
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.process-lab .pl-spec-line {
  fill: var(--ink);
  opacity: 0.55;
}
.process-lab .pl-spec-rule {
  fill: var(--ink);
  opacity: 0.7;
}
.process-lab .pl-pin-num {
  fill: var(--accent);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
}

/* Connector + flow lines */
.process-lab .pl-connector {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.7;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}
.process-lab .pl-flow-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.process-lab .pl-flow-line--dashed {
  stroke-dasharray: 4 4;
}
.process-lab .pl-flow-line--loop {
  stroke: var(--ink);
  opacity: 0.45;
  stroke-dasharray: 2 5;
  stroke-width: 1;
}
.process-lab .pl-loop-label {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Design-system tiles */
.process-lab .pl-tile__rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 0.8;
}
.process-lab .pl-tile__label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
/* Accent the first tile so the system "starts" with a definitive primary */
.process-lab .pl-tile:first-of-type .pl-tile__rect {
  fill: color-mix(in oklab, var(--accent) 35%, var(--paper));
  stroke: var(--accent);
}

/* ============================================================
   Entrance animations — keyed off .is-drawn on the wrapper
   ============================================================ */

/* Draw-in strokes (wireframes, panel frames, connectors). Path length
   defaults to 600 — generous enough for our short paths and rects. */
.process-lab .pl-draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.process-lab.is-drawn .pl-draw {
  animation: plDraw 0.8s ease-out forwards;
  animation-delay: var(--pl-delay, 0s);
}
@keyframes plDraw {
  to { stroke-dashoffset: 0; }
}

/* Fade in (text and groups that aren't path-drawn). */
.process-lab .pl-fade { opacity: 0; }
.process-lab.is-drawn .pl-fade {
  animation: plFade 0.6s ease-out forwards;
}
@keyframes plFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade + scale (design-system tiles "snap in"). */
.process-lab .pl-fade-scale { opacity: 0; transform-origin: center; }
.process-lab.is-drawn .pl-fade-scale {
  animation: plFadeScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes plFadeScale {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Soft pulsing on callout pins after they've drawn in — keeps the
   "specs are live, referenced things" energy. */
.process-lab.is-drawn .pl-pulse-soft {
  animation: plFade 0.6s ease-out forwards,
             plPinPulse 2.6s ease-in-out 2s infinite;
}
@keyframes plPinPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Stagger helpers — use --pl-delay var on .pl-draw elements where needed.
   (Inline `style` already applies animation-delay on most elements; the
   var hook is here for future tweaks without hunting through markup.) */

@media (prefers-reduced-motion: reduce) {
  .process-lab .pl-draw,
  .process-lab .pl-fade,
  .process-lab .pl-fade-scale,
  .process-lab.is-drawn .pl-pulse-soft {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

/* ============================================================
   CHAPTER 2 — Blueprint / operating system diagram
   ============================================================ */

.blueprint {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px;
  height: 460px;
  overflow: hidden;
}
.blueprint__grid {
  position: absolute;
  inset: 12px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.blueprint__label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 2;
}
.blueprint__stamp {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
}

/* ============================================================
   CHAPTER 3 — Team growth (3 → 22)
   ============================================================ */

.team-grid {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px 22px;
  min-height: 420px;
}
.team-grid__counter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
  margin: 0;
}
.team-grid__counter span { font-size: 36px; color: var(--ink-soft); font-style: normal; font-weight: 400; }
.team-grid__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.team-figures {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
  align-items: end;
}
.team-figure {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  background: var(--ink);
  border-radius: 50% 50% 8% 8% / 70% 70% 8% 8%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.team-figure.is-active {
  opacity: 1;
  transform: translateY(0);
}
.team-figure.is-original { background: var(--accent); }

.scaler {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.scaler input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 22px;
}
.scaler input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--ink);
}
.scaler input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--ink);
}
.scaler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--ink);
  margin-top: -8px;
  cursor: pointer;
}
.scaler input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--ink);
  cursor: pointer;
}

/* ============================================================
   CHAPTER 4 — 150-page guide flip
   ============================================================ */

.binder {
  position: relative;
  height: 480px;
  perspective: 1500px;
}
.binder__stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-page {
  position: absolute;
  width: 70%;
  max-width: 360px;
  aspect-ratio: 8.5 / 11;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  padding: 28px 28px 18px;
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.6,.05,.3,1), opacity .35s ease;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.guide-page__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 6px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}
.guide-page__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
  margin: 0 0 10px;
}
.guide-page__body {
  font-size: 13px;
  line-height: 1.45;
  flex: 1;
}
.guide-page__footer {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--ink-soft);
  padding-top: 6px;
  margin-top: 10px;
}
/* SAMPLE rubber-stamp overlay — small, top-right corner of each
   integration-guide page so the page copy reads cleanly. */
.guide-page__sample {
  position: absolute;
  top: 32px;
  right: 14px;
  transform: rotate(-12deg);
  transform-origin: center;
  font-family: var(--font-loud);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 2px 6px;
  opacity: 0.7;
  background: transparent;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 5;
}
.binder__controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-mono);
}
.binder__btn {
  background: transparent;
  border: 1px solid var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--ink);
}
.binder__btn:hover { background: var(--ink); color: var(--paper); }
.binder__page-indicator {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  align-self: center;
  padding: 0 8px;
}

/* ============================================================
   CHAPTER 5 — Mural 8x counter & world map
   ============================================================ */

.eight-x {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 24px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eight-x__head {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.eight-x__big {
  font-family: var(--font-loud);
  font-size: clamp(110px, 14vw, 200px);
  line-height: 0.82;
  margin: 0;
  color: var(--ink);
  flex: 0 0 auto;
}
.eight-x__big em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: 0.7em;
}
.eight-x__stats {
  display: flex;
  gap: 28px;
  padding-bottom: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.eight-x__stat {
  display: flex;
  flex-direction: column;
}
.eight-x__counter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  font-feature-settings: "tnum";
  margin: 0;
}
.eight-x__counter strong { color: var(--accent); font-style: italic; }
.eight-x__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* World map — continent outlines + lit-up city dots */
.world-map {
  width: 100%;
}
.world-map__caption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  margin: 4px 0 0;
  opacity: 0.75;
}

/* Keep the old .dot-map class around as a no-op in case anything else
   references it; the new structure uses .world-map instead. */
.dot-map { display: none; }

/* ============================================================
   CHAPTER 6 — Huntress ship-wow stamp
   ============================================================ */

.manifest {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 22px 80px;
  min-height: 460px;
  overflow: hidden;
}
.manifest__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.manifest__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-soft);
  align-items: center;
}
.manifest__row:hover { background: rgba(0,0,0,0.03); cursor: pointer; }
.manifest__sku {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.manifest__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.manifest__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ink);
}
.manifest__status[data-shipped="true"] {
  background: var(--ink);
  color: var(--paper);
}

.shipwow-stamp {
  position: absolute;
  bottom: 24px;
  right: 26px;
  font-family: var(--font-loud);
  letter-spacing: 0.04em;
  font-size: 22px;
  color: var(--accent);
  border: 4px double currentColor;
  padding: 6px 14px;
  text-transform: uppercase;
  transform: rotate(-9deg);
  opacity: 0;
  transition: opacity .35s ease, transform .35s cubic-bezier(.5,1.6,.5,1);
  pointer-events: none;
}
.shipwow-stamp[data-on="true"] { opacity: 1; transform: rotate(-9deg) scale(1); }
.shipwow-stamp[data-on="false"] { transform: rotate(-9deg) scale(1.4); }

.manifest__action {
  position: absolute;
  bottom: 18px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  cursor: pointer;
}
.manifest__action:hover { background: var(--ink); }

/* ============================================================
   CHAPTER 7 — Rolodex of engagements
   ============================================================ */

.rolodex {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 26px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.rolodex__cards {
  position: relative;
  flex: 1;
  margin: 14px 0;
}
.biz-card {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  transition: transform .5s cubic-bezier(.6,.05,.3,1), opacity .35s ease;
}
.biz-card__co {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 0.95;
}
.biz-card__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin-top: 4px;
  color: var(--accent);
}
.biz-card__body {
  font-size: 14px;
  line-height: 1.45;
  margin-top: 18px;
  max-width: 38ch;
}
.biz-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rolodex__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  position: relative;
  padding: 48px 0 90px;
  border-top: 1px solid var(--ink);
}

.contact__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 800px) {
  .contact__grid { grid-template-columns: 1fr; }
}

.photo-frame {
  position: relative;
  display: inline-block;
}
.photo-frame img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border: 1px solid var(--ink);
  filter: contrast(1.05) saturate(0.9);
}
.photo-frame__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 8px 8px -8px -8px;
  border: 1px solid var(--ink);
  z-index: -1;
}

.contact__info dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 18px;
}
.contact__info dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 4px 0 0;
}
.contact__info dd a { text-decoration: none; }
.contact__info dd a:hover { color: var(--accent); }

.colophon {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) {
  .colophon { grid-template-columns: 1fr; }
}
.colophon strong { color: var(--ink); display: block; margin-bottom: 4px; }

/* ============================================================
   Loud "throughlines" banner between sections
   ============================================================ */
.throughlines {
  background: var(--ink);
  color: var(--paper);
  padding: 60px var(--gutter);
  margin: 0 calc(-1 * var(--gutter));
}
.throughlines__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  margin: 0 0 6px;
}
.throughlines__deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  opacity: 0.7;
  margin: 0 0 36px;
}
.throughlines__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .throughlines__list { grid-template-columns: 1fr 1fr; } }
.throughline {
  border-top: 1px solid var(--paper);
  padding-top: 14px;
}
.throughline__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
}
.throughline__word em { color: var(--highlight); font-style: italic; }
.throughline__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
  opacity: 0.85;
}


/* ============================================================
   EMBEDDED OPERATOR (§00) — NEW LAYOUT
   4 roles × 3 ways to engage × impact strip
   ============================================================ */

.offerings-section {
  padding-top: 90px;
  padding-bottom: 110px;
}
.offerings__chnum {
  color: var(--bloom) !important;
}
.offerings-section .eyebrow {
  margin-bottom: var(--eyebrow-gap);
}
.offerings__title {
  margin: 0 0 18px !important;
}

.offerings__lede {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  margin-top: 30px;
  margin-bottom: 28px;
}
.offerings__lede .body {
  max-width: none; /* match the width of the section title above */
  margin: 0;
  font-size: 19px;
}
/* Cue row — sits above the role tabs as a horizontal track. The "pick
   a role ↓" arrow rides in the column matching the active (or hovered)
   role and slides between columns via animated `left`. */
.roles__cue-row {
  position: relative;
  margin: -2px 0 -10px;       /* shifted up 8px from prior 6px top margin */
  height: 44px;
  pointer-events: none;       /* hover passes through to the tabs */
}
.offerings__pickone {
  position: absolute;
  top: 0;
  /* Each role column is 100/cols % wide; left = idx * column-width.
     `--cue-cols` and `--cue-idx` are set inline from React. */
  left: calc(var(--cue-idx, 0) * (100% / var(--cue-cols, 4)));
  width: calc(100% / var(--cue-cols, 4));
  text-align: center;
  font-size: 32px;
  transform: rotate(-3deg);
  transform-origin: center bottom;
  color: var(--accent);
  font-family: var(--font-hand);
  font-weight: 700;
  white-space: nowrap;
  transition: left .35s cubic-bezier(.6, .05, .3, 1);
}

/* === Four roles — LOUD tabs, active one clearly highlighted === */
.roles {
  margin-top: 36px;
  padding: 0;
  border: none;
}
.roles__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 0;
  padding: 0;
  border: none;
}
@media (max-width: 800px) {
  .roles__tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .roles__tabs { grid-template-columns: 1fr; }
}

.role-tab {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 18px 18px 22px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .25s ease,
    border-color .2s ease;
  margin: 0;
}
.role-tab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--paper);
}
.role-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--highlight);
}

/* Active state — ink fill, paper text, accent indicator strip */
.role-tab[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent);
}
.role-tab[data-active="true"]:hover {
  /* hold pose — don't move further on hover */
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent);
}

.role-tab__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.role-tab[data-active="true"] .role-tab__num {
  color: var(--highlight);
}

.role-tab__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: inherit;
  text-transform: none;
  white-space: normal;
}

/* Indicator strip — fills the bottom of the active tab */
.role-tab__indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: transparent;
  transition: background .25s ease, height .2s ease;
}
.role-tab[data-active="true"] .role-tab__indicator {
  background: var(--accent);
  height: 8px;
}
.role-tab:hover .role-tab__indicator {
  background: var(--ink-soft);
}
.role-tab[data-active="true"]:hover .role-tab__indicator {
  background: var(--accent);
}

/* Loud "ACTIVE" marker on the corner of the selected tab */
.role-tab[data-active="true"]::after {
  content: "▸ NOW VIEWING";
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--highlight);
  font-weight: 600;
}

/* Panel: still gets a clear visual link to the active tab */
.role-panel {
  margin-top: 24px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top: 6px solid var(--accent);
  padding: 24px 24px 26px;
  box-shadow: 6px 6px 0 var(--ink);
  animation: rolePanelIn .35s ease-out;
}

@keyframes rolePanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Role panel grid — 2 columns:
   LEFT: identity block (num + title + subtitle + pitch, kept visually together)
   RIGHT: detail block (Yes-this-is-me stacked above What-it-looks-like-in-practice) */
.role-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) {
  .role-panel__grid { grid-template-columns: 1fr; gap: 28px; }
}

.role-panel__identity { min-width: 0; }
.role-panel__detail { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.role-panel__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 0.95;
  margin: 6px 0 4px;
  letter-spacing: -0.02em;
}
.role-panel__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.role-panel__pitch {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.role-panel__match {
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background: rgba(0,0,0,0.025);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-panel__match .hand {
  font-size: 26px !important;
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: 4px;
  color: var(--accent);
}

/* Rotating pain-point text — clickable, fades on advance */
.role-panel__pain {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: block;
  min-height: 3.8em; /* hold space so the dots don't bounce too much */
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}
.role-panel__pain.is-fading { opacity: 0; transform: translateY(-4px); }
.role-panel__pain em {
  font-style: italic;
  display: block;
}
.role-panel__pain:hover em {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.role-panel__pain:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

/* Dot navigation + "see all" link — aligned right, dots sitting just in front of "see all" */
.role-panel__pain-dots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.role-panel__pain-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1.4px solid var(--ink-soft);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.role-panel__pain-dot:hover { background: var(--ink-soft); transform: scale(1.2); }
.role-panel__pain-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
}
.role-panel__pain-dot:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}
.role-panel__pain-more {
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.role-panel__pain-more:hover { color: var(--accent); }

.role-panel__divider {
  margin: 0 0 14px;
  border-top: 1px solid var(--ink);
  position: relative;
}
.role-panel__divider span {
  position: absolute;
  top: -10px;
  left: 0;
  background: var(--paper);
  padding-right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.role-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.role-panel__list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  padding: 9px 0;
  border-bottom: 1px dashed var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.role-panel__list li:last-child { border-bottom: none; }
.role-panel__bullet { color: var(--accent); font-size: 14px; flex: 0 0 auto; }

/* === Three ways to engage === */
.engage-block {
  margin-top: 56px;
  position: relative;
}
.engage-block__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.engage-block__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0;
  letter-spacing: -0.01em;
}

.engage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .engage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .engage-grid { grid-template-columns: 1fr; }
}
/* "Ways to engage" — editorial layout, no boxes. Each card sits on the page
   background, divided from its neighbors by a thin top rule that picks up
   the masthead's hairline language. Hover is a subtle text shift. */
.engage-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 24px 4px 8px;
  position: relative;
  border-top: 1px solid var(--ink);
  transition: transform .2s ease;
}
.engage-card::before {
  /* Small accent tick above each card, anchored to the top hairline */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 3px;
  background: var(--accent);
}
.engage-card:hover {
  transform: translateY(-2px);
}
.engage-card:hover .engage-card__title {
  color: var(--accent);
}
.engage-card__title {
  transition: color .2s ease;
}
.engage-card__num {
  font-family: var(--font-loud);
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}
.engage-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  margin: 10px 0 2px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.engage-card__duration {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 4px 0 12px;
}
.engage-card__body {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* === Impact strip === */
.impact-strip {
  margin-top: 56px;
  padding: 28px 0 0;
  border-top: 6px solid var(--ink);
}
.impact-strip__lede {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.impact-strip__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0;
  letter-spacing: -0.01em;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .impact-grid { grid-template-columns: 1fr; } }
.impact-card {
  padding: 24px 20px;
  border-right: 1px dashed var(--ink-soft);
}
.impact-card:last-child { border-right: none; }
@media (max-width: 900px) {
  .impact-card:nth-child(2) { border-right: none; }
  .impact-card:nth-child(odd) { border-right: 1px dashed var(--ink-soft); }
  .impact-card:nth-child(-n+2) { border-bottom: 1px dashed var(--ink-soft); }
}
.impact-card__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.impact-card__num em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.6em;
}
.impact-card__label {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 22ch;
}
.impact-strip__cta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 24px;
  gap: 22px;
  flex-wrap: wrap;
}
.impact-strip__cta-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0;
  max-width: 38ch;
  line-height: 1.15;
}

/* ============================================================
   CUTTING ROOM FLOOR — expanded scrap variants
   ============================================================ */
.cutting-floor__sublabel {
  position: absolute;
  top: 22px;
  left: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  z-index: 2;
}
.cutting-floor__sublabel em { color: var(--accent); }

.scrap--torn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  background: var(--paper);
  border: none;
  padding: 8px 12px 12px;
  /* Torn-paper bottom edge via clip-path */
  clip-path: polygon(
    0 0, 100% 0, 100% 80%,
    96% 86%, 92% 78%, 88% 88%, 84% 80%, 80% 90%,
    76% 82%, 72% 92%, 68% 84%, 64% 94%, 60% 86%,
    56% 96%, 52% 88%, 48% 98%, 44% 90%, 40% 100%,
    36% 90%, 32% 98%, 28% 88%, 24% 96%, 20% 86%,
    16% 94%, 12% 84%, 8% 92%, 4% 82%, 0 90%
  );
  box-shadow: 2px 3px 0 rgba(0,0,0,0.15);
  filter: contrast(1.04);
}

.scrap--stamp {
  font-family: var(--font-loud);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 3px double var(--accent);
  color: var(--accent);
  padding: 6px 12px;
  font-size: 14px;
  box-shadow: none;
}

.scrap--strike {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  padding: 6px 12px;
  position: relative;
}
.scrap--strike::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 1.5px;
  background: var(--accent);
  transform: rotate(-3deg);
}

/* The "Final Cut" survivor card pinned to the right side */
.final-cut {
  position: absolute;
  top: 16px;
  right: 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 12px 8px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.18);
  z-index: 3;
  max-width: 150px;
  pointer-events: none;
  transform: rotate(2deg);
}
.final-cut__label {
  display: block;
  font-family: var(--font-loud);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.final-cut__item {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   CHAPTER 5 — 8× LAYOUT FIX (no more overlap)
   ============================================================ */
.eight-x {
  height: auto;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.eight-x__big { margin-bottom: -8px; }
.eight-x__numbers {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}
.eight-x__divider {
  border-left: 1px solid var(--ink-soft);
  padding-left: 18px;
}
.dot-map {
  position: relative;
  bottom: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  padding-top: 8px;
  opacity: 1;
}

/* ============================================================
   ROLODEX — fix the layering / breakpoint issue
   ============================================================ */
.rolodex__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.rolodex__cards {
  min-height: 280px;
}
.biz-card {
  /* Solid paper so the card behind it is fully obscured — no text bleed-through */
  background: var(--paper);
  isolation: isolate;
}
.biz-card[aria-hidden="true"] {
  /* keep them behind, never overlapping text */
  filter: blur(0.3px);
}
.rolodex__nav-cue {
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: 22px;
  transform: rotate(-2deg);
  display: inline-block;
}
@media (max-width: 600px) {
  .rolodex__nav-cue { display: none; }
  .rolodex__nav { flex-wrap: wrap; gap: 10px; }
  .rolodex__cards { min-height: 360px; }
}

/* ============================================================
   THROUGHLINES — improved legibility
   Italic serif on black was tough to read.
   Solution: keep serif, weight it harder, brighten paper-on-ink,
   nudge tracking, and use the highlight color on the italic phrase.
   ============================================================ */
.throughlines {
  color: #f5efde;
}
.throughlines__title {
  font-family: var(--font-display);
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: clamp(48px, 7vw, 96px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.005em !important;
  color: #fbf7e8 !important;
  /* faint glow improves separation from the noise/grain layer */
  text-shadow: 0 0 1px rgba(255,255,255,0.25);
}
.throughlines__title em {
  font-style: italic;
  color: var(--highlight) !important;
  font-weight: 900;
}
.throughlines__deck {
  color: #f0ead4 !important;
  opacity: 0.92 !important;
  font-style: normal !important;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px) !important;
}
.throughline {
  border-top-color: rgba(255,255,255,0.6);
}
.throughline__word {
  color: #fbf7e8;
  letter-spacing: -0.01em;
}
.throughline__body {
  color: #f0ead4;
  opacity: 0.95;
}

/* ============================================================
   RECAST BOARD — Chapter VI Huntress visual
   ============================================================ */
.recast {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 22px 26px;
  min-height: 460px;
}
.recast__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.recast__toggle {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
}
.recast__toggle:hover { background: var(--ink); }
.recast__columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 600px) {
  .recast__columns { grid-template-columns: 1fr; }
  .recast__arrow { transform: rotate(90deg); margin: 4px auto; }
}
.recast__col-head { margin-bottom: 10px; }
.recast__col-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--ink-soft);
  padding: 2px 6px;
  color: var(--ink-soft);
}
.recast__col-tag--on { color: var(--accent); border-color: var(--accent); }
.recast__col-head h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  margin: 6px 0 0;
}
.recast__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-soft);
  font-family: var(--font-display);
  font-size: 16px;
  transition: opacity .35s ease, transform .35s ease, color .35s ease;
}
.recast__columns[data-recast="true"] .recast__row--before {
  opacity: 0.28;
  color: var(--ink-soft);
  text-decoration: line-through;
  transform: translateX(-6px);
}
.recast__columns[data-recast="false"] .recast__row--after {
  opacity: 0;
  transform: translateX(8px);
}
.recast__columns[data-recast="true"] .recast__row--after {
  opacity: 1;
  transform: translateX(0);
}
.recast__mark {
  font-family: var(--font-loud);
  color: var(--accent);
  font-size: 14px;
}
.recast__row--before .recast__mark { color: var(--ink-soft); }
.recast__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 28px;
  font-family: var(--font-hand);
  color: var(--accent);
  font-size: 18px;
}
.recast__zero {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 4px double var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.recast__zero[data-on="true"] {
  opacity: 1;
  transform: translateY(0);
}
.recast__zero-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--ink);
}
.recast__zero-num em {
  font-style: italic;
  color: var(--accent);
}
.recast__zero-body h5 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 4px;
}
.recast__zero-body p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  max-width: 50ch;
}

/* ============================================================
   POLAROID — contact photo treatment
   ============================================================ */
.polaroid {
  position: relative;
  display: inline-block;
  background: #f8f3df;
  padding: 14px 14px 56px;
  box-shadow:
    0 2px 0 rgba(0,0,0,0.08),
    6px 8px 0 rgba(0,0,0,0.12),
    14px 18px 36px rgba(0,0,0,0.18);
  transform: rotate(-2.2deg);
  border: 1px solid rgba(0,0,0,0.08);
  max-width: 320px;
}
.polaroid::before {
  /* faded paper grain on the frame itself */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.06), transparent 60%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.polaroid__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(0,0,0,0.2);
}
.polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Distressed / artistic photo treatment */
  filter:
    contrast(1.12)
    saturate(0.78)
    sepia(0.18)
    brightness(0.96);
  transition: opacity .6s ease;
  opacity: 1;
}
.polaroid__photo img.is-fading { opacity: 0; }
.polaroid__photo-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.65 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.polaroid__photo::after {
  /* lens vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.polaroid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0 14px;
}
.polaroid__tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 92px;
  height: 22px;
  background: rgba(232,197,71,0.55);
  border-left: 1px dashed rgba(0,0,0,0.12);
  border-right: 1px dashed rgba(0,0,0,0.12);
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
@media (max-width: 800px) {
  .polaroid { transform: rotate(-1deg); max-width: 100%; }
}

/* ============================================================
   GLOBAL RESPONSIVE — mobile/tablet improvements
   ============================================================ */
@media (max-width: 1000px) {
  .chapter { padding: 70px 0 90px; }
  .chapter__art { min-height: 320px; }
}

@media (max-width: 700px) {
  html, body { font-size: 16px; }
  .chapter { padding: 56px 0 72px; }
  .chapter__num { font-size: clamp(44px, 14vw, 72px) !important; }
  .chapter__title { font-size: clamp(38px, 11vw, 64px) !important; }
  .chapter__subtitle { font-size: clamp(18px, 4.5vw, 22px) !important; max-width: 100%; }
  .alt-titles { font-size: 9px; }
  .pullquote__text { font-size: clamp(19px, 4.5vw, 24px) !important; }
  .pullquote__mark { font-size: 80px; }

  /* Folio on mobile: smaller, never overlap title */
  .folio { font-size: 9px; }
  .folio .folio__num { font-size: 14px; }

  /* Cover */
  .cover__main { padding-top: 8px; }
  .vol-badge { transform: rotate(8deg) scale(0.7) !important; top: -20px !important; right: -8px !important; }
  .cover__connect { gap: 10px; }
  .cover__linkedin { font-size: 10px; }
  .cover__supra { font-size: clamp(30px, 9vw, 48px) !important; }

  /* Cutting floor: tighter, scraps scaled down */
  .cutting-floor { height: 420px; }
  .final-cut { max-width: 110px; padding: 8px 10px 6px; }
  .final-cut__item { font-size: 11px; }

  /* Stats stack */
  .stats { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* Throughlines stacks */
  .throughlines { padding: 40px var(--gutter); }
  .throughlines__list { grid-template-columns: 1fr 1fr; }

  /* Contact photo centered */
  .contact__grid { gap: 30px; }
  .polaroid { display: block; margin: 0 auto; }

  /* Offerings */
  .offerings__lede { grid-template-columns: 1fr; }
  .offerings__pickone { font-size: 24px; }
  .role-panel__title { font-size: clamp(28px, 7vw, 40px) !important; }
}

@media (max-width: 500px) {
  .throughlines__list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .colophon { grid-template-columns: 1fr; gap: 14px; }
}


/* ============================================================
   TOC NAV — clean rebuild. Right-edge fixed nav with two pieces:
     1. Vertical red TAB ("Table of Contents") always visible to the left
     2. RAIL — narrow (just dashes) by default; expands on hover/click
   ============================================================ */
.toc {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  align-items: stretch;
  font-family: var(--font-mono);
  pointer-events: auto;
}

/* TAB — always visible, accent red, vertical text */
.toc__tab {
  background: var(--accent);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-right: none;
  box-shadow: -2px 2px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}
.toc__tab:hover { background: var(--ink); color: var(--paper); }
.toc__tab:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* RAIL — collapsed by default, expands on hover */
.toc__rail {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 14px 14px 10px;
  width: 56px;
  max-height: 60vh;
  overflow: hidden;
  transition: width .35s cubic-bezier(.6,.05,.3,1), padding .25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc.is-open .toc__rail {
  width: 260px;
  padding: 14px 16px 10px;
}

/* LIST + ITEMS */
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.toc__item { margin: 0; }
.toc__link {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .15s ease;
}
/* Extra items (Ways to Engage / More About Me / Editor's Note): title spans
   the numeral column so it sits next to the dash with no gap. */
.toc__link[data-type="extra"] .toc__title { grid-column: 2 / 4; }
/* Small breathing room between dash and the next column */
.toc__link[data-type="chapter"] .toc__num { margin-left: 4px; }

.toc__link:hover { color: var(--accent); }
.toc__link[data-active="true"] { color: var(--ink); }
.toc__link[data-past="true"]   { opacity: 0.65; }

/* DASH — the only thing visible in collapsed state */
.toc__dash {
  display: inline-block;
  width: 10px;
  height: 2px;
  background: var(--ink-soft);
  border-radius: 1px;
  transition: width .2s ease, height .2s ease, background .2s ease;
}
.toc__link:hover .toc__dash { background: var(--accent); width: 13px; }
.toc__link[data-active="true"] .toc__dash {
  background: var(--accent);
  width: 14px;
  height: 4px;
}

/* NUM + TITLE — fade in only when the rail is open. Collapsed state shows
   only the dash for every item (chapters and extras alike). */
.toc__num,
.toc__title {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .25s ease .08s;
  pointer-events: none;
}
.toc.is-open .toc__num,
.toc.is-open .toc__title {
  opacity: 1;
  pointer-events: auto;
}
.toc__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
}
.toc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: inherit;
}
.toc__link[data-type="extra"] .toc__title {
  font-style: italic;
  font-weight: 500;
}
.toc__link[data-active="true"] .toc__title { color: var(--ink); }

/* "Career Journey" section heading inside the rail (visible only when open).
   Sits across a dashed line, like a chapter divider in a magazine TOC. */
.toc__section-heading {
  display: none;
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
  position: relative;
}
.toc.is-open .toc__section-heading { display: flex; align-items: center; gap: 10px; }
.toc__section-heading::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--ink-soft);
}
.toc__section-heading span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Thin divider before the post-chapter extras (More About Me, Editor's Note) */
.toc__section-divider {
  display: none;
  list-style: none;
  height: 0;
  margin: 10px 0;
  border-top: 1px dashed var(--ink-soft);
  opacity: 0.5;
}
.toc.is-open .toc__section-divider { display: block; }

/* Back-to-top button at the bottom of the rail */
.toc__top {
  background: none;
  border: none;
  margin: 6px 0 0;
  padding: 4px 0 0;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 1px dashed var(--ink-soft);
  transition: color .15s ease;
}
.toc__top:hover { color: var(--accent); }
.toc__top:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}
.toc__top-arrow {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  transition: transform .2s ease;
}
.toc__top:hover .toc__top-arrow { transform: translateY(-2px); }
/* Label text only when the rail is open; collapsed shows just the arrow */
.toc__top-label {
  opacity: 0;
  transition: opacity .25s ease .08s;
  white-space: nowrap;
}
.toc.is-open .toc__top-label { opacity: 1; }

/* Mobile — hide the floating nav entirely */
@media (max-width: 640px) {
  .toc { display: none !important; }
}


/* ============================================================
   LEADERSHIP — full-bleed paper section, 3 tabs
   How I Lead · AI POV · Values
   Mirrors the structural prominence of .throughlines (black banner)
   but inverted: clean paper, ink on light, full-bleed margins.
   ============================================================ */
.leadership {
  background: var(--paper);
  color: var(--ink);
  padding: 90px var(--gutter) 110px;
  margin: 0 calc(-1 * var(--gutter));
  position: relative;
  overflow: hidden;   /* contain decorative blooms so they don't cause h-scroll */
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.leadership::before {
  /* subtle paper tone shift so the section reads as its own surface */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.025), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(31,93,98,0.06), transparent 55%);
  pointer-events: none;
}
.leadership__page { position: relative; z-index: 1; }

.leadership__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0; /* polaroid sits flush against the content; offset via transform */
  margin-bottom: 44px;
}
.leadership__header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
/* Smaller polaroid, top-right of the section. Nudged left across design
   passes: now -95px / +24px from the original right-edge anchor (the latest
   pass moved it a further 35px left), placing it closer to the content text. */
.leadership__polaroid {
  justify-self: end;
  align-self: start;
  transform: translate(-95px, 24px);
}
.leadership__polaroid .polaroid {
  max-width: 200px;
  padding: 10px 10px 44px;
  transform: rotate(-3deg);
}
@media (max-width: 700px) {
  /* Stack the polaroid below the text, centered, with real breathing room so
     its rotated frame no longer overlaps the copy above. */
  .leadership__header { grid-template-columns: 1fr; gap: 30px; }
  .leadership__polaroid { justify-self: center; transform: none; margin-top: 6px; }
  .leadership__polaroid .polaroid { max-width: 168px; }
}

/* "Practice · Twenty years on" eyebrow — bump it to readable size with
   higher contrast so it no longer reads as weak utility text. */
.leadership__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 1;
  margin: 0;
  line-height: 1.4;
}
.leadership__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
  white-space: nowrap; /* keep "More about me." on a single line */
  text-align: left;
}
.leadership__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.leadership__deck {
  /* The deck is the "stick" / punchy sub-header. Bolder than the old
     italic treatment so it reads as a definitive statement about the
     section, not flavor text. */
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 70ch;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.leadership__deck strong {
  font-weight: 800;
  color: var(--ink);
}

/* Location pair — sits just below the deck, mono label + italic value.
   Migrated here from the now-removed editor's note. */
.leadership__location {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.leadership__location dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.leadership__location dd {
  margin: 0;
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
}
.leadership__substack {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 0 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(245, 239, 222, 0.25);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fbf7e8;
  text-decoration: none;
  transition: color .2s ease;
}
.leadership__substack:hover { color: var(--highlight); }
.leadership__substack-icon {
  width: 15px;
  height: 15px;
  fill: #FF6719;
  flex: none;
}

/* === Tabs — loud, prominent, the active one inverted to ink.
   4 columns fit on a single line at every breakpoint; tab content
   shrinks fluidly via clamp() on padding + label font-size. === */
/* === Tabs — restyled to match the ROLE tabs' structure: flat tabs sitting on
   a horizontal rule, with num + label + sub stacked and an active underline.
   Colours stay in the About-me (dark ink / cream / yellow-highlight) palette
   — only the structure/layout is borrowed from the roles. === */
.leadership__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 36px;
  border-bottom: 2px solid rgba(245, 239, 222, 0.28);
}
.leadership-tab {
  position: relative;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;   /* active underline rides the rule */
  margin-bottom: -2px;
  padding: 14px 18px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #f5efde;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.leadership-tab + .leadership-tab { border-left: 1px solid rgba(245, 239, 222, 0.16); }
.leadership-tab:hover { background: rgba(245, 239, 222, 0.06); }
.leadership-tab:hover .leadership-tab__label { color: var(--highlight); }
.leadership-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--highlight); }
.leadership-tab[data-active="true"] {
  border-bottom-width: 5px;
  border-bottom-color: var(--highlight);
  background: rgba(245, 239, 222, 0.08);
}

.leadership-tab__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 239, 222, 0.6);
  line-height: 1;
}
.leadership-tab[data-active="true"] .leadership-tab__index { color: var(--highlight); }
.leadership-tab__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 1.7vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #fbf7e8;
  transition: color .18s ease;
}
.leadership-tab[data-active="true"] .leadership-tab__label { color: var(--highlight); }
.leadership-tab__sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: rgba(245, 239, 222, 0.7);
}
.leadership-tab__indicator { display: none; }   /* underline handled by the active border */

/* === Active panel === */
.leadership__panel {
  animation: leadershipPanelIn .35s ease-out;
}
@keyframes leadershipPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.leadership__panel-head {
  padding-top: 18px;
  border-top: 4px double var(--ink);
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
@media (max-width: 800px) {
  .leadership__panel-head { grid-template-columns: 1fr; gap: 8px; align-items: start; }
}
.leadership__panel-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.leadership__panel-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}

.leadership__panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .leadership__panel-body { grid-template-columns: 1fr; gap: 36px; }
}

.leadership__prose {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  max-width: 52ch;
}
.leadership__prose p { margin: 0 0 1em; }
.leadership__prose p + p { text-indent: 1.4em; }
.leadership__prose-lead::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 4.2em;
  line-height: 0.85;
  float: left;
  margin: 0.06em 0.08em -0.1em -0.04em;
  color: var(--accent);
}

.leadership__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Shared header above the pillars list on both tabs. */
.leadership__pillars-wrap {
  display: flex;
  flex-direction: column;
}
.leadership__pillars-header {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 48ch;
  text-wrap: balance;
  color: #fbf7e8;
}

.leadership-pillar {
  display: grid;
  grid-template-columns: 56px 1fr;   /* widened gutter for the larger serif num */
  gap: 16px;
  padding: 22px 0;                   /* more vertical breathing room per pillar */
  border-top: 1px solid var(--ink);
  align-items: start;
}
.leadership-pillar:last-child {
  border-bottom: 1px solid var(--ink);
}
.leadership-pillar__num {
  /* Editorial serif numerals — larger and italic so 01 · 02 · 03 read as
     "chapter numbers" rather than utility marks. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -0.01em;
  color: var(--accent);
  line-height: 1;
  margin-top: 2px;
}
/* Pillar header — DM Mono bold caps, smaller now so it reads as a
   sub-header rather than a competing display title. */
.leadership-pillar__word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(11px, 0.95vw, 12.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 4px;
}
.leadership-pillar__copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 700px) {
  .leadership { padding: 60px var(--gutter) 80px; }
  .leadership__header { margin-bottom: 28px; }
  .leadership-pillar { grid-template-columns: 32px 1fr; gap: 10px; padding: 8px 0; }
}


/* ============================================================
   EASTER-EGG MODAL — opens when the Vol. I badge is clicked
   ============================================================ */
.easter {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.60);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  animation: easterFadeIn 0.28s ease both;
}
@keyframes easterFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.easter__card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--accent);
  padding: 44px 40px 32px;
  max-width: 560px;
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  animation: easterCardIn 0.45s cubic-bezier(.6,.05,.3,1) both;
}
@keyframes easterCardIn {
  from { transform: translateY(24px) rotate(-0.4deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0deg); opacity: 1; }
}

.easter__tape {
  position: absolute;
  top: -18px;
  left: 28px;
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}

.easter__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(26px, 3.8vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 4px 0 18px;
}
.easter__title em {
  color: var(--accent);
  font-style: italic;
}

.easter__card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--ink);
}
.easter__card p em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}
.easter__card p strong {
  color: var(--ink);
  font-weight: 700;
}

.easter__signoff {
  font-family: var(--font-hand) !important;
  font-size: 30px !important;
  color: var(--accent) !important;
  transform: rotate(-3deg);
  display: inline-block;
  margin-top: 8px !important;
  line-height: 1 !important;
}

.easter__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  transition: color .15s ease, transform .15s ease;
}
.easter__close:hover { color: var(--accent); transform: scale(1.15); }
.easter__close:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .easter__card { padding: 36px 24px 26px; box-shadow: 8px 8px 0 var(--accent); }
  .easter__tape { left: 18px; top: -14px; font-size: 10px; padding: 5px 10px; }
}


/* ============================================================
   HIGH-FIVE LUCKY CAT — easter-egg counter at end of issue
   ============================================================ */
.high-five {
  margin: 70px auto 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* The "zone" expands the cursor-swap radius around the cat AND acts as the
   positioning container for the thank-you particle layer */
.high-five__zone {
  position: relative;
  padding: 18px 60px 6px;
  display: inline-block;
  /* Custom cursor: high-five hand emoji rendered inside an SVG.
     Falls back to `pointer` in browsers that can't render emoji-in-SVG cursors. */
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><text x="2" y="32" font-size="32">🖐️</text></svg>') 14 14,
    pointer;
}

.high-five__button {
  background: none;
  border: none;
  padding: 0;
  cursor: inherit;
  transition: transform .25s cubic-bezier(.6,.05,.3,1);
  display: inline-block;
  position: relative;
  z-index: 2; /* above the thank-you particle layer */
}
.high-five__button:hover { transform: scale(1.04) rotate(-1deg); }
.high-five__button:active,
.high-five__button.is-pulsing {
  transform: scale(1.12) rotate(2deg);
}
.high-five__button:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 8px;
}

/* Lucky-cat — two PNG layers stacked, only the arm animates.
   The body stays static; the arm rotates around the shoulder pivot. */
.lucky-cat {
  position: relative;
  width: 180px;
  height: auto;
  display: block;
  user-select: none;
}
.lucky-cat__body,
.lucky-cat__arm {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.lucky-cat__arm {
  position: absolute;
  top: 0;
  left: 0;
  /* Pivot at the wrist (where the paw meets the upper arm).
     Coords are %-of-image for the 476x494 lucky-cat-arm.png. */
  transform-origin: 85% 31%;
  animation: catPawWave 1.8s ease-in-out infinite;
}
@keyframes catPawWave {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(14deg); }
}
/* On click — a bigger excited wave, then the loop resumes */
.high-five__button.is-pulsing .lucky-cat__arm {
  animation: catPawHighFive 0.55s cubic-bezier(.4, .8, .5, 1.2), catPawWave 1.8s ease-in-out 0.55s infinite;
}
@keyframes catPawHighFive {
  0%   { transform: rotate(-8deg); }
  30%  { transform: rotate(-32deg); }
  60%  { transform: rotate(24deg); }
  100% { transform: rotate(-8deg); }
}

/* Thank-you particle layer — sits ABOVE the cat so emojis pop over the body */
.high-five__thanks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.high-five__thanks {
  position: absolute;
  display: inline-block;
  pointer-events: none;
  --drift: 0px;
  animation: thanksRise 1.45s cubic-bezier(.4,.0,.4,1) forwards;
  will-change: transform, opacity;
}
.high-five__thanks-inner {
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  /* rotate + scale supplied via inline style from React */
}
@keyframes thanksRise {
  0%   { opacity: 0; transform: translate(0, 30px); }
  18%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -150px); }
}

.high-five__hint {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--accent);
  margin: -6px 0 0;
  transform: rotate(-2deg);
  line-height: 1;
}

/* Count "speech bubble" above the cat — scoreboard / counter feel */
.high-five__bubble {
  position: relative;
  display: inline-block;
  background: var(--paper);
  color: var(--accent);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 10px 24px 8px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-loud);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  min-width: 80px;
  text-align: center;
}
.high-five__bubble-num { display: inline-block; }
/* Little pointed tail under the bubble, pointing at the cat */
.high-five__bubble-tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 600px) {
  .high-five__zone { padding: 30px 40px; }
  .lucky-cat { width: 130px; }
  .high-five__thanks-inner { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .lucky-cat__arm { animation: none; }
  .high-five__thanks { animation-duration: 1s; }
}


/* "See all recommendations on LinkedIn" link — right-aligned beneath each chapter's pullquote(s) */
.pullquote__more {
  display: block;
  text-align: right;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s ease;
}
.pullquote__more::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  border-top: 1px dashed var(--ink-soft);
  margin-left: 8px;
  vertical-align: middle;
  transition: border-color .15s ease;
}
.pullquote__more:hover { color: var(--accent); }
.pullquote__more:hover::after { border-top-color: var(--accent); }


/* ============================================================
   PAGE-TURN — clickable INTERMISSION (Bali easter egg)
   ============================================================ */
.page-turn--clickable {
  /* Keep the horizontal rule that the base .page-turn provides — earlier this
     override was killing it. */
  background:
    linear-gradient(to bottom, transparent 0%, transparent 49%, var(--ink) 49.5%, var(--ink) 50.5%, transparent 51%, transparent 100%);
  border: none;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  transition: filter .2s ease;
}
.page-turn--clickable .page-turn__mark {
  transition: color .2s ease;
}
.page-turn--clickable:hover .page-turn__mark { color: var(--accent); }
.page-turn--clickable:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}
.page-turn__hint {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--accent);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.page-turn--clickable:hover .page-turn__hint,
.page-turn--clickable:focus-visible .page-turn__hint {
  opacity: 0.9;
  transform: translateY(0);
}


/* ============================================================
   BALI MODAL — light & airy. Paper backdrop, text above the photo,
   no heavy frame. Designed to feel like flipping to a journal page.
   ============================================================ */
.bali {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vh, 64px) 0; /* no horizontal padding — photo runs edge to edge */
  animation: easterFadeIn 0.4s ease both;
  overflow: auto;
}
.bali__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vh, 36px);
  width: 100%;
  text-align: center;
  animation: easterCardIn 0.55s cubic-bezier(.6,.05,.3,1) both;
}
/* Padded zones for text + dots so they don't crash into the viewport edges */
.bali__header,
.bali__copy,
.bali__dots {
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* Close — fixed to the viewport corner */
.bali__close {
  position: fixed;
  top: clamp(16px, 2.5vh, 28px);
  right: clamp(16px, 2.5vw, 32px);
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 12px;
  z-index: 2;
  transition: color .2s ease, transform .25s ease;
}
.bali__close:hover { color: var(--accent); transform: rotate(90deg); }
.bali__close:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Title block above the photo */
.bali__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bali__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  text-wrap: balance;
}
.bali__title em {
  color: var(--accent);
  font-style: italic;
}
.bali__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--accent);
  margin: 6px 0 0;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
}

/* Description / deck — sits beneath the subtitle, magazine-style */
.bali__deck {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  margin: 14px auto 0;
  max-width: calc(58ch + 60px);
  font-style: italic;
  opacity: 0.9;
  text-wrap: balance;
}

/* Photo wrap — single panoramic slides go full viewport width;
   pair slides show two images side by side with a gap */
.bali__photo-wrap {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}
.bali__photo-wrap.is-single .bali__photo {
  display: block;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  animation: baliPhotoFade 0.45s ease both;
}
.bali__photo-wrap.is-pair {
  padding: 0 clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
.bali__photo-wrap.is-pair .bali__photo {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48vw;
  height: auto;
  max-height: 65vh;
  object-fit: contain;
  animation: baliPhotoFade 0.45s ease both;
}
@media (max-width: 700px) {
  .bali__photo-wrap.is-pair { flex-direction: column; padding: 0; gap: 16px; }
  .bali__photo-wrap.is-pair .bali__photo { max-width: 92vw; max-height: 40vh; }
}
@keyframes baliPhotoFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dots */
.bali__dots {
  display: flex;
  gap: 12px;
  align-items: center;
}
.bali__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.bali__dot:hover { background: var(--ink-soft); transform: scale(1.25); }
.bali__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
.bali__dot:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }

@media (max-width: 600px) {
  .bali__photo { max-height: 50vh; }
  .bali__title { font-size: clamp(36px, 11vw, 56px); }
}


/* ============================================================
   NOW BOOKING — Ch VII art card (replaces the old Rolodex)
   ============================================================ */
.now-booking {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 24px 24px 22px;
  position: relative;
  transform: rotate(-1deg);
  box-shadow: 6px 6px 0 var(--accent);
  max-width: 360px;
}
.now-booking__stamp {
  display: inline-block;
  border: 4px double var(--accent);
  padding: 7px 16px 5px;
  color: var(--accent);
  font-family: var(--font-loud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  margin-bottom: 14px;
  line-height: 1;
}
.now-booking__stamp-text {
  display: block;
  font-size: 20px;
  letter-spacing: 0.05em;
}
.now-booking__stamp-year {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  margin-top: 4px;
  color: var(--accent);
  opacity: 0.85;
}
.now-booking__deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.now-booking__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px dashed var(--ink-soft);
  border-bottom: 1px dashed var(--ink-soft);
}
.now-booking__list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.now-booking__list li:last-child { border-bottom: none; }
.now-booking__hand {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--accent);
  margin: 14px 0 0;
  transform: rotate(-2deg);
  display: inline-block;
}


/* ============================================================
   CONTACT CTA — "Reach me on LinkedIn" primary button
   under the Editor's Note dl
   ============================================================ */
.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 22px 13px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s cubic-bezier(.6,.05,.3,1),
              box-shadow .15s ease,
              color .15s ease;
}
/* Lock the paper text color on hover (overrides the global a:hover that
   otherwise dyes link text accent — which is the same as this button's
   background, making the label disappear). Use opacity on the label for
   the hover affordance instead. */
.contact__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  color: var(--paper);
}
.contact__cta:hover .contact__cta-label,
.contact__cta:hover .contact__cta-arrow {
  opacity: 0.75;
}
.contact__cta-label,
.contact__cta-arrow {
  transition: opacity .15s ease;
}
.contact__cta:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.contact__cta-arrow {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 0.8;
  display: inline-block;
  transition: transform .2s ease;
}
.contact__cta:hover .contact__cta-arrow { transform: translateX(4px); }


/* ============================================================
   EASTER MODAL — "right brain / left brain" view-mode toggle
   ============================================================ */
.easter__toggle-block {
  margin-top: 30px;
  padding-top: 24px;
}

/* Dashed divider — dashes on both sides of the "YOUR CHOICE" text, flex-laid */
.easter__toggle-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.easter__toggle-divider::before,
.easter__toggle-divider::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--ink-soft);
}
.easter__toggle-divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.easter__toggle {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Volume picker — flat text links (modeled on the "case study →" chip), not
   chunky buttons. The current volume is solid ink with a terracotta dot; the
   other reads as a terracotta link. No underline. */
.easter__volumes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.easter__vol {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
.easter__vol:hover { opacity: 0.65; }
.easter__vol.is-active {
  color: var(--ink);
  cursor: default;
}
.easter__vol.is-active:hover { opacity: 1; }
.easter__vol.is-active::before {
  content: "\25CF";              /* ● current-volume marker */
  color: var(--accent);
  font-size: 8px;
  margin-right: 8px;
  vertical-align: 2px;
}
.easter__vol-sep {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.4;
}
.easter__toggle-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 180px;
  padding: 9px 22px 8px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.easter__toggle-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.easter__toggle-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.easter__toggle-btn.is-active {
  background: var(--accent);
  color: var(--paper);
}
.easter__toggle-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-transform: none;
}
.easter__toggle-sub {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.15em;
}
/* Bounce the vanilla toggle to invite play */
.easter__toggle-btn.is-bounce {
  animation: easterToggleBounce 2.6s cubic-bezier(.5,.2,.4,1) infinite;
}
@keyframes easterToggleBounce {
  0%, 60%, 100% { transform: translate(0, 0); }
  70%           { transform: translate(0, -5px); }
  80%           { transform: translate(0, 0); }
  87%           { transform: translate(0, -2px); }
  93%           { transform: translate(0, 0); }
}


/* ============================================================
   GRAB-TARGET easter egg
   Click the registration crosshair in the cover footer to enter
   "grab mode" — cursor becomes a closed-fist, every page click
   drops a 🌸 wherever the cursor is. Escape (or another click on
   the target) releases.
   ============================================================ */
.grab-target-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.grab-target {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Custom cartoon white-gloved open hand on hover */
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='white' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 22 L7 14 Q7 11 10 11 Q12 11 12 13 L12 9 Q12 6 15 6 Q17 6 17 9 L17 12 Q17 6 20 6 Q22 6 22 9 L22 13 Q22 8 25 8 Q27 8 27 11 L27 22 Q27 28 21 28 L13 28 Q7 28 7 22 Z'/%3E%3Cpath d='M12 26 L22 26' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") 17 17,
    grab;
  transition: transform .15s ease;
}
.grab-target:hover { transform: scale(1.10); }
.grab-target:active { transform: scale(0.94); }
.grab-target.is-active { transform: scale(0.94) rotate(-8deg); }
.grab-target:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

/* "press esc to exit" hint below the target while grabbing */
.grab-hint {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
  pointer-events: none;
  animation: grabHintIn 0.3s ease both;
}
.grab-hint em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
@keyframes grabHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
  to   { opacity: 0.75; transform: translateX(-50%) translateY(0); }
}

/* While grab mode is active, every cursor on the page becomes a white-gloved closed fist */
body.is-grabbing,
body.is-grabbing * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='white' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 14 Q6 10 10 10 L25 10 Q29 10 29 14 L29 23 Q29 28 24 28 L11 28 Q6 28 6 23 Z'/%3E%3Cpath d='M6 16 Q3 14 3 11 Q3 7 7 9 L10 11' fill='white'/%3E%3Cpath d='M12 13 L12 19 M17 13 L17 19 M22 13 L22 19' stroke-width='0.9' fill='none'/%3E%3Cpath d='M9 25 L26 25' stroke-width='1.1' fill='none'/%3E%3C/g%3E%3C/svg%3E") 17 17,
    grabbing !important;
}

/* Weather grab — cursor becomes a cloud emoji */
body.is-weathering,
body.is-weathering * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='2' y='32' font-size='32'%3E☁️%3C/text%3E%3C/svg%3E") 20 20,
    crosshair !important;
}

/* Magic-wand grab — cursor becomes a wand emoji */
body.is-wanding,
body.is-wanding * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='2' y='32' font-size='32'%3E🪄%3C/text%3E%3C/svg%3E") 8 30,
    crosshair !important;
}

/* Flower drop layer — sits above everything, portaled into <body> */
.flower-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10001;
}
.flower-drop {
  position: absolute;
  pointer-events: none;
  animation: flowerDropIn 0.5s cubic-bezier(.3,.7,.4,1.3) both, flowerFade 5s ease-out 4s forwards;
}
.flower-drop__inner {
  display: inline-block;
  font-size: 36px;
  line-height: 1;
}
@keyframes flowerDropIn {
  from { opacity: 0; transform: translate(-50%, -65%) scale(0.2); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes flowerFade {
  from { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -30%) scale(0.95); }
}


/* Chapter descriptor — small italic line beneath the company/role eyebrow.
   Sentence-case body italic, no parens, faded so it doesn't compete with
   the all-caps mono eyebrow above. */
.chapter__descriptor {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  opacity: 0.4;
  margin-top: 4px;
  margin-bottom: 14px;
}


/* CTA beneath the "Four ways in" grid — replaces the old Recent Impact strip */
.engage-block__cta {
  margin-top: 36px;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.engage-block__cta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}


/* ============================================================
   LEADERSHIP — DARK BANNER VARIANT
   Flips the "More about me" section to the dark/yellow palette the
   old Throughlines section used. Restores the high-contrast visual
   beat between chapters and contact, and makes the section stand out.
   ============================================================ */
.leadership {
  background: var(--ink);
  color: #f5efde;
}
.leadership::before {
  background:
    radial-gradient(circle at 20% 10%, rgba(232,197,71,0.06), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,255,255,0.03), transparent 55%);
}

.leadership__title { color: #fbf7e8; }
.leadership__title em { color: var(--highlight); }
/* Full opacity + pure cream so the deck reads cleanly on the dark ink bg. */
.leadership__deck { color: #fbf7e8; opacity: 1; }
.leadership__deck strong { color: #ffffff; }

/* "Based: Detroit, MI · Remote" — dark-bg overrides so it's legible.
   The base styles use --ink-soft / --ink which were invisible on dark. */
.leadership__location dt { color: rgba(245, 239, 222, 0.6); }
.leadership__location dd { color: #fbf7e8; }

/* Leadership tabs now use the flat-on-rule treatment defined in the base block
   above (dark/cream/yellow palette). The earlier box+shadow overrides were
   removed here so they don't reimpose the old look. */

/* Panel head + body */
.leadership__panel-head { border-top-color: rgba(245,239,222,0.45); }
.leadership__panel-title { color: #fbf7e8; }
.leadership__panel-deck  { color: #f0ead4; opacity: 0.85; }
.leadership__prose       { color: #f0ead4; }
.leadership__prose-lead::first-letter { color: var(--highlight); }

/* Pillars list */
.leadership-pillar { border-top-color: rgba(245,239,222,0.3); }
.leadership-pillar:last-child { border-bottom-color: rgba(245,239,222,0.3); }
.leadership-pillar__num  { color: var(--highlight); }
.leadership-pillar__word { color: #ffffff; }
.leadership-pillar__copy { color: #ffffff; }       /* full white for max legibility */

/* OnVelocity newsletter callout — sits at the bottom of the pillars column.
   Tuned for the dark leadership background; the whole card is one link. */
.substack-card {
  display: block;
  margin-top: 26px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(245, 239, 222, 0.18);
  border-radius: 4px;
  background: rgba(245, 239, 222, 0.04);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.substack-card:hover {
  border-color: rgba(255, 103, 25, 0.55);
  background: rgba(245, 239, 222, 0.07);
  transform: translateY(-2px);
}
.substack-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 239, 222, 0.7);
}
.substack-card__eyebrow strong { color: #fbf7e8; font-weight: 500; }
.substack-card__mark { width: 14px; height: 14px; fill: #FF6719; flex: none; }
.substack-card__media {
  display: block;
  margin: 14px 0 0;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(245, 239, 222, 0.08);
}
.substack-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.substack-card__title {
  display: block;
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.18;
  color: #fbf7e8;
}
.substack-card__blurb {
  display: block;
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #f0ead4;
  opacity: 0.85;
}
.substack-card__cta {
  display: inline-block;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--highlight);
  transition: color .2s ease;
}
.substack-card:hover .substack-card__cta { color: #FF6719; }

/* OnVelocity email signup — zine-styled box in the footer (light background). */
.substack-signup {
  margin: 0 0 18px;
}
.substack-signup__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.substack-signup__label .substack-card__mark { width: 14px; height: 14px; fill: #FF6719; }
.substack-signup__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.substack-signup__input {
  flex: 0 1 240px;            /* fixed-ish width — doesn't stretch to fill */
  min-width: 0;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink) 30%, transparent);
  border-radius: 3px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s ease;
}
.substack-signup__input::placeholder { color: color-mix(in oklab, var(--ink) 45%, transparent); }
.substack-signup__input:focus {
  outline: none;
  border-color: #FF6719;
}
.substack-signup__btn {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #FF6719;
  border: 0;
  border-radius: 3px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.substack-signup__btn:hover { background: #ff7d3a; transform: translateY(-1px); }
.substack-signup__btn:active { transform: translateY(0); }
.substack-signup__done {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 360px;
}
.substack-signup__again {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.substack-signup__again:hover { color: var(--ink); }
/* In the page-bottom cross-promo row: signup sits on the left, pushing the
   nav links to the right so it's level with the "View case studies" button. */
.xpromo .substack-signup { margin: 0 auto 0 0; }


/* ============================================================
   LINKEDIN STAMP — postage-stamp styled link in the cover footer.
   The whole stamp (scalloped shape, greyscale LinkedIn logo,
   postmark cancellation) is one inline SVG; this wrapper just
   handles tilt + hover lift + drop shadow.
   ============================================================ */
.li-stamp {
  display: inline-block;
  text-decoration: none;
  transform: rotate(-4deg);
  transition: transform .25s cubic-bezier(.6,.05,.3,1), filter .25s ease;
  filter: drop-shadow(3px 3px 0 rgba(20,18,16,0.32));
}
.li-stamp:hover {
  transform: rotate(-2deg) translate(-2px, -3px) scale(1.04);
  filter: drop-shadow(5px 5px 0 rgba(20,18,16,0.38));
}
.li-stamp:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
}
.li-stamp__svg {
  display: block;
  width: 84px;
  height: auto;
  overflow: visible;
}

@media (max-width: 600px) {
  .li-stamp__postmark { display: none; }
}


/* ============================================================
   PAIN-POINT MODAL — full list of "if this is your room…" pains
   for the currently selected role.
   ============================================================ */
.pain-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 48px); /* extra top padding so the tape isn't clipped against the viewport */
  animation: easterFadeIn 0.28s ease both;
  overflow-y: auto; /* outer handles scroll when content is taller than viewport */
}
.pain-modal__card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--accent);
  padding: 44px 40px 36px;
  max-width: 620px;
  width: 100%;
  margin: auto;       /* re-center within the scrollable outer */
  overflow: visible;  /* let the tape stick out above the card */
  font-family: var(--font-body);
  color: var(--ink);
  animation: easterCardIn 0.45s cubic-bezier(.6,.05,.3,1) both;
}
.pain-modal__tape {
  position: absolute;
  top: -18px;
  left: 28px;
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.pain-modal__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(26px, 3.8vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 6px 0 6px;
  text-wrap: balance;
}
.pain-modal__title em {
  color: var(--accent);
  font-style: italic;
}
.pain-modal__sub {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--accent);
  transform: rotate(-2deg);
  display: inline-block;
  margin: 0 0 22px;
}
.pain-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pain-modal__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px dashed var(--ink-soft);
}
.pain-modal__item:first-child { border-top: none; padding-top: 0; }
.pain-modal__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0;
  line-height: 1;
}
.pain-modal__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.pain-modal__cta {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 22px 11px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pain-modal__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.pain-modal__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  transition: color .15s ease, transform .15s ease;
}
.pain-modal__close:hover { color: var(--accent); transform: scale(1.15); }

@media (max-width: 600px) {
  .pain-modal__card { padding: 38px 24px 28px; box-shadow: 8px 8px 0 var(--accent); }
  .pain-modal__tape { left: 18px; top: -14px; }
}


/* ============================================================
   CAREER CHAPTERS — slightly-off-white sheet background
   Applies only to Chapters I–VII (not Offerings, not Contact, not
   Leadership). Sits between the beige body and the near-white cards.
   ============================================================ */
.chapter:not(.offerings-section) {
  background: #f9f0d8;
}
/* …but on the Career story page the chapter sits on the page background — no
   cream sheet. Higher specificity + later source order so it always wins. */
.cj__chapter-wrap .chapter:not(.offerings-section) {
  background: transparent;
}