@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

:root {
  --type-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --type-sans: 'General Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --type-script: 'Caveat', cursive;

  --fg: #000;
  --bg: #fff;
  --muted: rgba(0, 0, 0, 0.6);
  --rule: rgba(0, 0, 0, 0.12);
  --highlight: rgba(255, 234, 138, 0.45);

  --measure: 65ch;
  --measure-wide: 80ch;
  --gutter: clamp(1.25rem, 5vw, 2rem);

  --body-size: 19px;
  --body-lh: 1.7;
}

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

html {
  font-size: var(--body-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  max-width: 100vw;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--type-serif);
  font-weight: 400;
  line-height: var(--body-lh);
  color: var(--fg);
  background: var(--bg);
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
}

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

main {
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
}

/* ─── Lede (article header) ─────────────────── */

.lede {
  max-width: 1080px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.kicker {
  font-family: var(--type-sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.lede h1 {
  font-family: var(--type-serif);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.lede .dek {
  font-family: var(--type-serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 auto 2rem;
  text-wrap: pretty;
  max-width: 50ch;
}

.byline {
  font-family: var(--type-sans);
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0;
}

.byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 3px;
}

/* When the lede is followed by a hero video, tighten the spacing between them
   so the lede + video reads as one unified intro block. */
.lede:has(+ .hero-video) {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ─── Audio player (sits between hero video and article body) ─── */

.audio-player {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  /* Match body's computed 65ch width in Source Serif 4 (~623px). The `ch` unit
     is font-dependent, so using var(--measure) directly here would resolve in
     General Sans and overshoot the body measure by ~95px. */
  max-width: 32.8rem;
  font-family: var(--type-sans);
}

.audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.18s ease;
  padding: 0;
}

.audio-toggle:hover { background: rgba(0, 0, 0, 0.78); }
.audio-toggle:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.audio-icon { display: inline-block; }
.audio-icon-play { margin-left: 2px; }   /* optical-center the play triangle */
.audio-icon-pause { display: none; }

.audio-player[data-state="playing"] .audio-icon-play { display: none; }
.audio-player[data-state="playing"] .audio-icon-pause { display: inline-block; }

/* State swap: idle (label + duration) vs active (time + skip + speed). */
.audio-state-idle,
.audio-state-active {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 auto;
  min-width: 0;
}

.audio-state-active { display: none; }

.audio-player[data-engaged="true"] .audio-state-idle { display: none; }
.audio-player[data-engaged="true"] .audio-state-active { display: flex; }

.audio-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg);
  line-height: 1;
}

.audio-pipe {
  width: 1px;
  height: 14px;
  background: rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}

.audio-current,
.audio-total {
  font-size: 0.85rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
}

.audio-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  transition: opacity 0.18s ease;
  opacity: 0.85;
}

.audio-skip:hover { opacity: 1; }
.audio-skip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  opacity: 1;
}

.audio-speed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 38px;
  padding: 0 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  font-variant-numeric: tabular-nums;
  margin-left: 0.15rem;
}

.audio-speed:hover { background: rgba(0, 0, 0, 0.05); }
.audio-speed:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.audio-source { display: none; }

@media (max-width: 640px) {
  .audio-player { gap: 0.65rem; }
  .audio-state-idle,
  .audio-state-active { gap: 0.45rem; }
  .audio-label { font-size: 0.78rem; }
  .audio-current, .audio-total { font-size: 0.78rem; }
  .audio-speed { min-width: 34px; padding: 0 0.5rem; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .audio-toggle, .audio-skip, .audio-speed { transition: none; }
}

/* ─── Hero video (sits between lede and article body) ─────── */

.hero-video {
  max-width: 1080px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.hero-video video {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  background: #000;
}

.hero-video figcaption {
  font-family: var(--type-sans);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.875rem;
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Depth — no outer frame, just a soft drop shadow on the inner
   image/video. The screenshot window itself (rounded corners) lifts off
   the page; nothing else competes with the visual. ─── */

.hero-video > video,
figure.full-wide > video,
figure.full-wide > img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 28px 60px -25px rgba(0, 0, 0, 0.20),
    0 6px 18px -6px rgba(0, 0, 0, 0.07);
}

.hero-video > video,
figure.full-wide > video {
  background: #000;
}

/* ─── Customer-roster strip — sits as a floating card with deeper lift.
   The deeper shadow + a faint top hairline give the strip more weight
   than a flat image, so the logos register as a moment, not just an
   inline asset. ─── */

.customers-figure {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.customers-figure > img {
  border-radius: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.04),
    0 -2px 12px -4px rgba(0, 0, 0, 0.06),
    0 40px 80px -30px rgba(0, 0, 0, 0.30),
    0 12px 30px -10px rgba(0, 0, 0, 0.12);
}

.customers-figure > figcaption {
  text-align: center;
}

/* ─── Callout-sidebar — dim everything except the focal area in a wide
   screenshot. Used on the JetBlue case study image to highlight the
   connector-sources sidebar while keeping the full page in context. ─── */

.callout-sidebar > .callout-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 28px 60px -25px rgba(0, 0, 0, 0.20),
    0 6px 18px -6px rgba(0, 0, 0, 0.07);
}

.callout-sidebar > .callout-frame > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}


/* ─── LinkedIn embed — tabs to switch between four posts, JetBlue primary.
   Whole block is constrained to the iframe's natural width so the tab
   bar's bottom border visually aligns with the iframe edges. ─── */

.linkedin-tabs {
  max-width: 540px;
  margin: 0 auto;
}

.linkedin-tabs-bar {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.linkedin-tab {
  font-family: var(--type-sans);
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transform: translateY(1px);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.linkedin-tab:hover { color: var(--fg); }

.linkedin-tab.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
  font-weight: 600;
}

.linkedin-tabs-stage > iframe {
  width: 100%;
  height: 700px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.10);
  display: block;
}

/* Caption sits under the LinkedIn embed, aligned to the embed's left edge,
   matching its 540px width (rather than the figure's full prose width). */
figure:has(> .linkedin-tabs) > figcaption {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Callout — full-wide editorial pull-out with grey ground and an
   off-black left bar. Used in §8 to summarize the cross-functional
   alignment moves. Same breakout treatment as figure.full-wide so it
   visually matches the rhythm of the wide visuals. ─── */

.callout {
  width: min(1080px, calc(100vw - 4rem));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  z-index: 1;
  background: #E8E5DD;
  border-left: 5px solid #141414;
  border-radius: 0 8px 8px 0;
  padding: 2rem 2rem 2rem 1.85rem;
}

.callout .callout-headline {
  font-family: var(--type-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 1.5rem;
}

.callout .callout-beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.callout .beat-num {
  display: block;
  font-family: var(--type-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.callout .beat-title {
  font-family: var(--type-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  line-height: 1.3;
  color: var(--fg);
}

.callout .beat-desc {
  font-family: var(--type-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
}

@media (max-width: 700px) {
  .callout .callout-beats { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* When .stats sits inside a .callout, drop its own hairline borders and
   outer margins/padding so it nests cleanly inside the grey card. */
.callout .stats {
  border-top: none;
  border-bottom: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

/* ─── Portfolio list — numbered list inside §4.
   Counter-based "01, 02…" markers in sans on the left, prose flows to
   the right. Lower-friction than a card widget; preserves the editorial
   voice in each customer paragraph. ─── */

.portfolio-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: portfolio-counter;
}

.portfolio-list li {
  counter-increment: portfolio-counter;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

.portfolio-list li:last-child {
  margin-bottom: 0;
}

/* Multi-paragraph list items: paragraphs inside an li
   should sit flush at the top and stack with sentence-friendly air. */
.portfolio-list li > p,
.behavior-list li > p {
  margin: 0;
}
.portfolio-list li > p + p,
.behavior-list li > p + p {
  margin-top: 1em;
}

/* ─── Behavior list (§11) — bulleted, unnumbered. Bullet marker is a
   subtle dot that signals discrete points without echoing §10's
   numbered list. ─── */

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

.behavior-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

.behavior-list li:last-child {
  margin-bottom: 0;
}

.behavior-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--type-serif);
  font-size: 1.25em;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
}

.portfolio-list li::before {
  content: counter(portfolio-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.32em;
  font-family: var(--type-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.42);
}

/* ─── Shaded section — wraps a whole section in a soft-tinted card with
   rounded corners, signaling "this part is set apart from the main flow."
   Used on §10 to give the loss its own visual register.

   Mobile: stays at .prose width with elements in flow.
   Desktop (≥1200px): breaks out to 1080px (matching the wide visuals),
   the body text stays at 65ch centered, and the hand-note + side-rail
   sit absolutely positioned in the left and right margins. ─── */

.section-shaded {
  background: #F4F1EA;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  margin: 3rem 0;
  position: relative;
  /* Slide-in: start 140px to the left + faded; .is-in-view (added by JS
     when the section enters the viewport) brings it to its rest position.
     Cubic-bezier easeOutExpo for a deliberate, decelerating landing. */
  opacity: 0;
  transform: translateX(-140px);
  transition: opacity 3.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 3.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-shaded.is-in-view {
  opacity: 1;
  transform: translateX(0);
}

.section-shaded .section-body > h2:first-child { margin-top: 0; }
.section-shaded .section-body > * + * { margin-top: 1.25em; }

@media (min-width: 1200px) {
  .section-shaded {
    width: min(1080px, calc(100vw - 4rem));
    max-width: none;
    margin-left: 50%;
    /* Initial slide-in: -50% centering offset PLUS -140px slide */
    transform: translateX(calc(-50% - 140px));
    padding: 2.75rem 2rem 2.75rem 2rem;
  }

  .section-shaded.is-in-view {
    transform: translateX(-50%);
  }

  /* Body wrapper centered at 65ch within the wider shaded card —
     same as .prose elsewhere on the page, so the body's left edge
     lands at the same x-position as the surrounding sections. */
  .section-shaded .section-body {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hand-note: rotated handwritten annotation in the left margin, sitting
     a bit further down so it lands next to the start of the first
     paragraph, not next to the H2. */
  .section-shaded .hand-note {
    position: absolute;
    top: 8rem;
    left: 1rem;
    width: 9rem;
    margin: 0;
    transform: rotate(-30deg);
    transform-origin: center center;
    font-size: 1.5rem;
    text-align: center;
    display: block;
    line-height: 1.2;
  }

  /* Side-rail: same 17rem-wide format as the original; absolute-positioned
     to BREAK the right edge of the shaded box (partly inside cream, partly
     outside on white). Pushed far enough right that it sits flush against
     (not over) the body text's right edge. */
  .section-shaded .side-rail {
    position: absolute;
    top: 6rem;
    right: -7rem;
    width: 17rem;
    margin: 0;
    float: none;
    clear: none;
  }
}

/* Respect users who prefer reduced motion — skip the slide-in entirely. */
@media (prefers-reduced-motion: reduce) {
  .section-shaded {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1200px) {
  .section-shaded {
    transform: translateX(-50%);
  }
}

/* ─── Hand note — Caveat-script annotation that sits beside the H2,
   like someone scribbled in the margin of a printout.
   Mobile baseline (inline next to H2). Desktop overrides above. ─── */

.hand-note {
  font-family: var(--type-script);
  font-weight: 500;
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 0.85rem;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-2deg);
  vertical-align: middle;
  line-height: 1;
}

/* ─── Side-rail — small editorial pull-out that floats right of the
   prose at desktop widths. Lighter visual than the .callout (no grey
   ground, no left bar) so the two modules don't read as the same widget.
   Used in §10 to extract the "what we'd do today" lesson. ─── */

.side-rail {
  margin: 1.5rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 2px solid rgba(0, 0, 0, 0.85);
  border-radius: 0 0 6px 6px;
  background: #FFF;
}

.side-rail .side-rail-kicker {
  font-family: var(--type-sans);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 0.7rem;
}

.side-rail .side-rail-body {
  font-family: var(--type-serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.78);
  margin: 0;
}

/* (Old standalone .side-rail desktop float removed — side-rail is always
   inside .section-shaded now, and that wrapper handles all desktop
   positioning above.) */

/* ─── iPhone figure — portrait phone mockup with a soft elliptical
   contact shadow at the bottom (like Apple's product photography). ─── */

.iphone-figure {
  margin: 2.5rem auto;
}

.iphone-figure .iphone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 28px;
}

.iphone-figure .iphone-wrap a {
  display: block;
  position: relative;
  z-index: 2;
  text-decoration: none;
  border: none;
  transition: transform 0.25s ease;
}

.iphone-figure .iphone-wrap a:hover {
  transform: translateY(-2px);
}

.iphone-figure .iphone-wrap img {
  display: block;
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
}

.iphone-figure .iphone-wrap::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 18px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  filter: blur(14px);
  z-index: 1;
  pointer-events: none;
}

.iphone-figure figcaption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Prose container (the article body) ─────── */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  font-family: var(--type-serif);
}

/* Visually-hidden — an element that's removed from visual layout but
   stays in the DOM/accessibility tree. Used on the §1 opening h2 so the
   TOC has an anchor without a visible heading interrupting the prose. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prose > * + * { margin-top: 1.25em; }
.prose p { text-wrap: pretty; }


/* ─── Headings within prose ─────────────────── */

.prose h2 {
  font-family: var(--type-serif);
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-top: 3rem;
  margin-bottom: 1rem;
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.prose h3 {
  font-family: var(--type-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

/* Override the default .prose > * + * margin-top when a paragraph or list
   directly follows an h3 — keeps the subhead visually tied to its body. */
.prose h3 + p,
.prose h3 + ul,
.prose h3 + ol {
  margin-top: 0.4rem;
}

/* ─── Epigraph (opening italic quote) ────────── */

.epigraph {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: 1.25rem;
  margin: 0 0 2.5rem;
  max-width: 50ch;
}

.epigraph cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  font-family: var(--type-sans);
  color: var(--muted);
}

.epigraph cite::before { content: '— '; }

/* ─── Pull-quote (breaks up body — OpenAI editorial register) ─── */

.pullquote {
  font-family: var(--type-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-align: center;
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  max-width: 28ch;
  text-wrap: balance;
}

.pullquote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--type-sans);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.pullquote cite::before { content: '— '; }

/* ─── Sidenote (Tufte-derived; CSS-only, no checkbox) ── */

.sidenote-anchor {
  font-family: var(--type-sans);
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: super;
  color: var(--muted);
  margin: 0 1px;
  cursor: default;
}

.sidenote {
  font-family: var(--type-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  display: block;
  margin: 0.75rem 0;
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
}

@media (min-width: 1100px) {
  /* On wide screens, sidenotes float to the right margin */
  .sidenote {
    float: right;
    clear: right;
    width: 14rem;
    margin: 0 -16rem 1rem 0;
    padding-left: 0;
    padding-right: 0.75rem;
    border-left: 0;
    border-right: 1px solid var(--rule);
    text-align: right;
  }
}

/* ─── Figure + caption ───────────────────────── */

figure {
  margin: 2.5rem auto;
}

figure img,
figure video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

figcaption {
  font-family: var(--type-sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 0.75rem;
  text-align: left;
  max-width: 50ch;
}

/* Wide figure — break out of reading measure (lighter breakout, ~80ch) */
figure.wide {
  max-width: var(--measure-wide);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Full-wide figure — breaks all the way out, near hero-video width.
   Always centered on the page (centered on .prose center, which is page center
   thanks to the symmetric grid). Sits above the sticky TOC via z-index, so when
   a wide visual scrolls past the TOC the visual covers the TOC briefly. */
figure.full-wide {
  width: min(1080px, calc(100vw - 4rem));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  z-index: 1;
}

figure.full-wide figcaption {
  max-width: none;
}

/* ─── Footnotes ─────────────────────────────── */

.prose sup a {
  font-family: var(--type-sans);
  font-size: 0.7em;
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  margin: 0 1px;
}

.prose sup a:hover { color: var(--fg); }

.footnotes {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--type-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  list-style-position: inside;
  padding-left: 0;
}

.footnotes li {
  margin-bottom: 0.875rem;
  scroll-margin-top: 2rem;
}

.footnotes li:target {
  background: var(--highlight);
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: 3px;
  transition: background 0.4s ease;
}

.footnotes a {
  color: inherit;
  text-decoration: none;
  margin-left: 0.25rem;
}

.footnotes a:hover { color: var(--fg); }

/* ─── Stats (Results section) — hairlines bracketing a 4-stat grid ─── */

.stats {
  margin: 2.5rem 0 2rem;
}

.stats-kicker {
  font-family: var(--type-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.75rem 0;
}

.stats-grid > div { text-align: left; }

.stat-num {
  display: block;
  font-family: var(--type-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.stat-label {
  display: block;
  font-family: var(--type-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}

/* ─── §11 pivot — section break + restated bonus question + dek ───────
   §11 answers a separate prompt question (the "bonus" the brief asked
   for). These three elements together signal the editorial pivot from
   the Fivetran case study to the forward-looking response. ─── */

.section-break {
  text-align: center;
  font-family: var(--type-serif);
  font-size: 1.25rem;
  letter-spacing: 0.6em;
  color: rgba(0, 0, 0, 0.35);
  margin: clamp(3rem, 6vw, 4rem) auto;
  user-select: none;
  line-height: 1;
  text-indent: 0.6em; /* compensate for trailing letter-spacing so the marks center optically */
}

.bonus-question-frame {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  border: 0;
  background: none;
}

.bonus-kicker {
  font-family: var(--type-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}

.bonus-question {
  font-family: var(--type-serif);
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg);
  text-wrap: pretty;
  max-width: 50ch;
  margin: 0;
}

/* ─── Closing / signoff ─────────────────────── */

.closing {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.signoff {
  font-family: var(--type-script);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  margin: 4rem auto 0;
  color: var(--fg);
}

/* ─── Inline links ──────────────────────────── */

.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, 0.32);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease;
}

.prose a:hover {
  text-decoration-color: var(--fg);
}

/* ─── Article region (simple wrapper — prose centers itself) ─── */

.article-region {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ─── TOC — position: fixed, anchored so its right edge sits flush with
   the left edge of the centered wide visuals (1080px wide on a centered
   page). JS toggles .is-visible after the user scrolls past the hero. ─── */

.toc { display: none; }

@media (min-width: 1360px) {
  .toc {
    display: block;
    position: fixed;
    top: 2rem;
    /* Right anchor: flush with the visual's left edge (visual is 1080px
       wide centered, so its left edge sits at 50vw - 540px). */
    right: calc(50vw + 540px);
    /* Width takes the whole remaining gap minus a 1rem breathing pad. */
    width: clamp(7rem, calc(50vw - 540px - 1rem), 13rem);
    /* Hidden until user scrolls past hero (toggled by JS). */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    font-family: var(--type-sans);
    font-size: 0.65rem; /* 0.8125rem × 0.80 — 20% smaller than the original. */
    line-height: 1.4;
    color: var(--muted);
    counter-reset: toc-counter;
  }

  .toc.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .toc h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    color: var(--muted);
  }

  .toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
  }

  .toc li {
    counter-increment: toc-counter;
    margin-bottom: 0.45rem;
  }

  .toc a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--muted);
    text-decoration: none;
    border-left: 1px solid var(--rule);
    padding: 0.1rem 0 0.1rem 0.6rem;
    line-height: 1.35;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .toc a::before {
    content: counter(toc-counter, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: rgba(0, 0, 0, 0.32);
    flex: 0 0 auto;
  }

  .toc a:hover {
    color: var(--fg);
    border-left-color: var(--fg);
  }

  .toc a.is-active {
    color: var(--fg);
    border-left-color: var(--fg);
    font-weight: 500;
  }

  .toc a.is-active::before {
    color: var(--fg);
  }
}

/* ─── Embed placeholder (Pass 1: visible slots for pending assets) ── */

.embed-placeholder {
  padding: 1.25rem 1.5rem;
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
  font-family: var(--type-sans);
}

.embed-placeholder .ph-kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.embed-placeholder .ph-desc {
  font-family: var(--type-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--fg);
  line-height: 1.5;
  margin: 0;
}

.embed-placeholder code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ─── TBD link (Pass 1: visible inline marker for unconfirmed URLs) ── */

.prose a.link-tbd {
  background: rgba(255, 234, 138, 0.55);
  padding: 0.05em 0.3em;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
}

.prose a.link-tbd::after {
  content: ' [URL TBD]';
  font-family: var(--type-sans);
  font-size: 0.72em;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  margin-left: 0.15em;
}

/* ─── V2 gallery: thumbs + main player (3 secondary videos) ─── */

/* V2 sits at ~85% of full-wide width — slightly smaller than the hero
   videos and case-study screenshots, so it reads as the "secondary"
   set rather than competing with the JetBlue hero. */
figure.v2.full-wide {
  width: min(918px, calc(100vw - 4rem));
}

.v2-main { aspect-ratio: 16 / 9; width: 100%; }

.v2-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.v2-thumb {
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  font-family: inherit;
  color: inherit;
  min-width: 0;
}

.v2-thumb:hover {
  border-color: rgba(0, 0, 0, 0.4);
}

.v2-thumb.is-active {
  border-color: var(--fg);
  box-shadow: 0 0 0 1px var(--fg);
}

.v2-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: #000;
}

.v2-thumb span {
  font-family: var(--type-sans);
  font-size: 0.78rem;
  padding: 0.55rem 0.75rem;
  color: var(--fg);
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .v2-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* On mobile, drop the poster thumbnails entirely and collapse to a 2×2
   grid of text-only tabs — the main video already shows the active
   poster, so the image thumbs become redundant and visually heavy. */
@media (max-width: 600px) {
  .v2-thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.85rem;
  }
  .v2-thumb img { display: none; }
  .v2-thumb {
    border-width: 1px;
    border-radius: 4px;
  }
  .v2-thumb span {
    padding: 0.65rem 0.5rem;
    text-align: center;
    font-size: 0.78rem;
  }
}

/* ─── Inline video trigger + modal player ───── */

.inline-video-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}

.inline-video-trigger:hover,
.inline-video-trigger:focus-visible {
  text-decoration-color: var(--fg);
  outline: none;
}

.inline-video-icon {
  display: inline-block;
  margin-right: 0.35em;
  transform: translateY(0px);
  opacity: 0.85;
}

.video-modal[hidden] { display: none; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: video-modal-fade 0.2s ease-out;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  z-index: 1;
}

.video-modal-player {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.video-modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0.5rem;
  line-height: 0;
  transition: color 0.15s ease;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  color: #fff;
  outline: none;
}

@keyframes video-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal { animation: none; }
}

/* ─── Footer ───────────────────────────────── */

.page-footer {
  margin: 5rem auto 0;
  max-width: var(--measure);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--type-sans);
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

.page-footer p { margin: 0; }

/* ─── Mobile ────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --body-size: 17px;
  }

  .lede h1 { letter-spacing: -0.02em; }

  .pullquote { font-size: 1.375rem; }

  .signoff { font-size: 2.5rem; }
}

/* ─── Print ─────────────────────────────────── */

@media print {
  body { font-size: 11pt; line-height: 1.55; color: #000; background: #fff; }
  .toc,
  .audio-player,
  .video-modal,
  .linkedin-tabs,
  .iphone-figure,
  .v2-thumbs,
  .page-footer { display: none !important; }
  .inline-video-icon { display: none; }
  .inline-video-trigger { text-decoration: underline; }
  figure { page-break-inside: avoid; break-inside: avoid; }
  h2 { page-break-after: avoid; break-after: avoid; }
  h2 + p, h2 + ol, h2 + ul { page-break-before: avoid; break-before: avoid; }
  .section-shaded { background: #fff; border: 1px solid #ccc; padding: 1rem; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; word-break: break-all; }
  /* Show video as poster image */
  video { pointer-events: none; }
}