/* ==========================================================================
   CASE — the single design system for every project page.
   Loaded last on each case study. Owns the shared tokens, type scale, spacing, layout widths, TOC, media
   and controls. Sections 1–3 are the former notate.css, project-clean.css
   and notate-refinements.css, kept in their original cascade order.
   ========================================================================== */

/* ══ 1 · formerly notate.css ═════════════════════════════════════════ */
/* Notate: three deliberate widths — reading, evidence, and product. */
body.home.notate-page { --nt-ink: var(--clr-text); --nt-muted: var(--clr-muted-strong); --nt-rule: var(--clr-border); background: var(--clr-bg); color: var(--nt-ink); }
.nt-main { padding-top: 132px; }
.nt-reading { width: min(640px, calc(100% - 48px)); margin-inline: auto; }
.nt-process { width: min(880px, calc(100% - 48px)); margin-inline: auto; }
.nt-back { display: inline-block; font-size: 13px; color: var(--nt-muted); margin-bottom: 44px; }
.nt-kicker { font-size: 12px; font-weight: 500; letter-spacing: .035em; margin-bottom: 20px; }
.nt-kicker span { color: var(--clr-muted); margin-inline: 10px; }
.nt-hero h1 { margin-bottom: 24px; }
.nt-deck { font-size: 19px; line-height: 1.5; color: var(--nt-muted); max-width: 490px; }
.nt-meta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; margin: 36px 0 40px; padding-top: 24px; font-size: 13px; }
.nt-meta dt { color: var(--nt-muted); margin-bottom: 6px; }
.nt-meta dd { margin: 0; }
.nt-media figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; line-height: 1.5; color: var(--nt-muted); margin-top: 12px; }
.nt-story { position: relative; display: flow-root; }
.nt-rail { position: absolute; top: 0; bottom: 0; left: 32px; width: 145px; pointer-events: none; z-index: 5; }
.nt-toc { position: sticky; top: 105px; pointer-events: auto; }
.nt-toc ol { list-style: none; }
.nt-toc li + li { margin-top: 4px; }
.nt-toc li a { display: flex; gap: 10px; align-items: center; font-size: 12px; padding: 7px 0; color: var(--nt-muted); }
.nt-toc li a span { font-size: 10px; color: var(--clr-muted); font-variant-numeric: tabular-nums; }
.nt-toc a[aria-current] { color: var(--nt-ink); font-weight: 600; }
.nt-toc a[aria-current] span { color: var(--nt-ink); }
.nt-section { padding-bottom: 112px; scroll-margin-top: 110px; }
.nt-section h2 { margin-bottom: 24px; }
.nt-section h3 { margin-bottom: 10px; }
.nt-section .nt-media { margin-top: 36px; }
.nt-link { display: inline-block; font-size: 14px; font-weight: 500; margin-top: 24px; border-bottom: 1px solid #91959a; padding-bottom: 4px; }
.nt-link-pending { color: var(--nt-muted); border-color: var(--nt-rule); cursor: default; }
.nt-feature { margin-top: 64px; }
.nt-feature-heading { display: grid; grid-template-columns: 125px 1fr; gap: 24px; }
.nt-feature .nt-media { margin-top: 28px; }
.nt-decision { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; padding-block: 32px; }
.nt-decision .nt-media { margin: 0; }
.nt-decision .nt-kicker { font-size: 11px; margin-bottom: 12px; color: var(--nt-muted); }
.nt-reflection .nt-reading { padding-top: 40px; }
.nt-reflection p + p { margin-top: 18px; }
.notate-page a:focus-visible { outline: 2px solid #475e4b; outline-offset: 5px; }
.nt-skip { position: fixed; left: 20px; top: -80px; padding: 10px 18px; background: white; z-index: 100; }
.nt-skip:focus { top: 12px; }
@media (min-width: 1200px) {
  /* Wide visuals pass above the rail; section reading remains truly centered. */
    .nt-process { max-width: min(880px, calc(100vw - 400px)); }
}
@media (max-width: 1199px) {
  .nt-rail { position: sticky; top: 72px; width: 100%; margin-bottom: 48px; padding: 0 24px; background: rgb(253 253 252 / .96); }
  .nt-rail::before { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 73px; background: var(--clr-bg); }
  .nt-toc { position: static; overflow-x: auto; scrollbar-width: thin; }
  .nt-toc ol { display: flex; gap: 24px; min-width: max-content; }
  .nt-toc li + li { margin: 0; }
  .nt-toc li a { padding-block: 16px; }
    .nt-section { scroll-margin-top: 152px; }
  }
@media (max-width: 600px) {
  .nt-main { padding-top: 104px; }
  .nt-reading, .nt-process { width: calc(100% - 40px); }
    .nt-back { margin-bottom: 32px; }
  .nt-deck { font-size: 17px; }
  .nt-meta { grid-template-columns: 1fr 1fr; row-gap: 20px; font-size: 12px; }
  .nt-meta > :last-child { grid-column: 1 / -1; }
    .nt-media figcaption { font-size: 10px; }
  .nt-media figcaption span + span { display: none; }
  .nt-rail { padding-inline: 20px; margin-bottom: 40px; }
  .nt-toc ol { gap: 20px; }
  .nt-section { padding-bottom: 72px; }
    .nt-feature { margin-top: 44px; }
  .nt-feature-heading { grid-template-columns: 1fr; gap: 0; }
  .nt-decision { grid-template-columns: 1fr; gap: 24px; }
  }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ══ 2 · formerly project-clean.css ═════════════════════════════════════════ */
/* Project pages use spacing, never rules or divider lines, to separate content.
   Chart axes are drawn with backgrounds (see .fig .axis-* in figures.css). */
body:is(.page--project, .bundles-page, .notate-page, .case-page) :is(main, footer, main *, main *::before, main *::after, footer *) {
  border-width: 0 !important;
}
body:is(.page--project, .bundles-page, .notate-page) main :is(figure, img, video, div):not(:focus-visible) {
  outline: none !important;
}
body:is(.page--project, .bundles-page, .notate-page) :is(hr, .case__divider, .sb-progress, figcaption, .case__viz-caption) {
  display: none !important;
}
/* Keep flow explanations above their media on stacked layouts. */
@media (max-width: 700px) {
  .bundles-page .sb-prototype .sb-flow-caption { grid-row: 1; padding-top: 0; }
  .bundles-page .sb-prototype .sb-prototype-media { grid-row: 2; }
}

/* Comfortable reading size across the project layouts. */
body:is(.page--project, .bundles-page, .notate-page) {
  --fs-base: 1.1875rem;
  --fs-sm: 1.0625rem;
}

/* Match Smart Bundles' 12px media corners throughout the case studies. */
body:is(.page--project, .bundles-page, .notate-page) {
  --project-media-radius: var(--r-md);
  --sb-radius: var(--project-media-radius);
}

/* Larger labels, more compact rows. */
body:is(.page--project, .bundles-page, .notate-page) :is(
  .nt-toc li a, .sb-toc a, .case__toc-link, .case__toc-bar-link
) {
  font-size: 15px;
  line-height: 1.4;
  padding-block: 3px;
}
.nt-toc li + li { margin-top: 0; }
.sb-toc, .case__toc-list { row-gap: 0; }
.nt-toc li a span { font-size: 12px; }
@media (min-width: 1200px) {
  .nt-rail { left: 24px; width: 168px; }
}
@media (max-width: 1199px) {
  .notate-page .nt-toc li a { font-size: 14px; padding-block: 8px; }
}
@media (max-width: 1000px) {
  .bundles-page .sb-toc a { font-size: 14px; padding-block: 8px; }
}
.page--project .case__toc-bar-link { font-size: 14px; padding-block: 8px; }

/* Align reading blocks to their associated media canvas. */
.notate-page .nt-reading { width: min(880px, calc(100% - 48px)); }
.notate-page .nt-hero { width: calc(100% - 64px); max-width: 1600px; }
.notate-page .nt-deck { max-width: none; }
.notate-page .nt-kicker,
.notate-page .nt-meta dt { text-transform: uppercase; letter-spacing: var(--label-ls); }
.notate-page .nt-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.home:is(.notate-page, .page--project, .bundles-page) .footer__copy { font-size: 12px; line-height: 1.5; }
@media (min-width: 1200px) {
  .notate-page .nt-reading:not(.nt-hero) { max-width: min(880px, calc(100vw - 400px)); }
}
@media (max-width: 600px) {
  .notate-page .nt-reading { width: calc(100% - 40px); }
  .notate-page .nt-hero { width: calc(100% - 24px); }
  .notate-page .nt-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notate-page .nt-meta > :last-child { grid-column: auto; }
}


/* ══ 3 · formerly notate-refinements.css ═════════════════════════════════════════ */
/* Refined navigation and explicit text/media groups for Notate. */
.notate-page .nt-toc li a { text-transform: uppercase; }
@media (max-width: 1199px) {
  .notate-page .nt-toc ol { width: max-content; min-width: 0; margin-inline: auto; }
}
.notate-page .nt-feature { margin-top: 80px; }
.notate-page .nt-feature-heading { display: block; }
.notate-page .nt-feature-heading h3 {
  margin-bottom: 14px;
}
.notate-page .nt-feature .nt-media { margin-top: 20px; }
.notate-page .nt-decision {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: 32px;
}
.notate-page .nt-decision + .nt-decision { margin-top: 40px; }
.notate-page .nt-decision h3 {
  margin-bottom: 28px;
}
.notate-page .nt-decision h4 {
  color: #74787d;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .notate-page .nt-feature { margin-top: 56px; }
  .notate-page .nt-decision { grid-template-columns: 1fr; gap: 24px; }
  .notate-page .nt-decision h3 { margin-bottom: 20px; }
  .notate-page .nt-decision + .nt-decision { margin-top: 24px; }
}

/* Open on the cover; introduce the project within the story below it. */
.notate-page .nt-main { padding-top: 76px; }
.notate-page .nt-chapters > .nt-hero {
  width: min(880px, calc(100% - 48px));
  margin-bottom: 80px;
}
@media (min-width: 1200px) {
  .notate-page .nt-chapters > .nt-hero { max-width: min(880px, calc(100vw - 400px)); }
}
@media (max-width: 600px) {
  .notate-page .nt-chapters > .nt-hero { width: calc(100% - 40px); margin-bottom: 56px; }
}

.notate-page .nt-toc > .nt-back { display: block; margin: 0 0 20px; }
@media (max-width: 1199px) {
  .notate-page .nt-toc > .nt-back { width: max-content; margin: 8px auto 4px; }
  .notate-page .nt-section { scroll-margin-top: 180px; }
}

/* Solution + decision motion clips */
.notate-page .nt-video { display: block; width: 100%; height: auto; background: var(--clr-panel); }

/* ── Page structure (Problem → Solution → First run → Launch) ── */
/* Each loop step: full-width walkthrough, then its decision beside a detail clip. */
.notate-page .nt-step + .nt-step { margin-top: clamp(72px, 8vw, 112px); }
.notate-page .nt-step .nt-decision { padding-block: 0; }

/* Carousels (First run clips, Launch cards): one slide at a time */
.notate-page .nt-carousel { margin-top: var(--sp-media, 28px); }
/* Arrows straddle the visuals' side edges, half on and half off, vertically centered */
.notate-page .nt-carousel__stage { position: relative; }
.notate-page .nt-carousel__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; color: var(--clr-text); transform: translateY(-50%); transition: opacity var(--dur-2, 200ms) ease; }
.notate-page .nt-carousel__btn[data-dir="-1"] { left: 0; translate: -50% 0; }
.notate-page .nt-carousel__btn[data-dir="1"] { right: 0; translate: 50% 0; }
.notate-page .nt-carousel__btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.notate-page .nt-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.notate-page .nt-carousel:not(.is-scrollable) .nt-carousel__btn { display: none; }
.notate-page .nt-carousel__rail { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap-media, 12px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.notate-page .nt-carousel__rail::-webkit-scrollbar { display: none; }
.notate-page .nt-carousel__rail:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.notate-page .nt-carousel__rail > li { flex: 0 0 min(78%, 560px); scroll-snap-align: start; }
.notate-page .nt-carousel--single .nt-carousel__rail > li { flex-basis: 100%; scroll-snap-stop: always; }
.notate-page .nt-store-carousel .nt-carousel__rail img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }

.notate-page .nt-onboarding .nt-media { margin: 0; }
.notate-page .nt-onboarding p { color: var(--c-ink, var(--clr-text)); }
.notate-page .nt-onboarding p span { color: var(--c-muted, var(--clr-muted)); margin-right: 8px; font-variant-numeric: tabular-nums; }
/* Hide playback buttons on these small clips; they're short loops. */
body.case-page.notate-page .nt-onboarding .flow__controls { display: none; }
@media (hover: none) { .notate-page .nt-carousel__btn { display: none; } }



/* Hero: title left, the extension as it appears in the store right */
.notate-page .nt-hero-head { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 24px 40px; align-items: start; }
body.case-page main .nt-hero-head h1 { margin-bottom: 0; }
.notate-page .nt-store-card { margin: 0; }
.notate-page .nt-store-card a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 14px; padding: 20px; border-radius: var(--r-md); background: var(--clr-panel); color: inherit; text-decoration: none; transition: background-color var(--dur-2, 200ms) ease; }
.notate-page .nt-store-card a:hover { background: color-mix(in srgb, var(--clr-panel) 80%, var(--clr-text) 6%); }
.notate-page .nt-store-card a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.notate-page .nt-store-card img { width: 56px; height: 56px; border-radius: 13px; }
.notate-page .nt-store-card__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.25; }
.notate-page .nt-store-card__name small { font-size: 12px; font-weight: 400; color: var(--nt-muted); }
.notate-page .nt-store-card__cta { grid-column: 1 / -1; padding: 12px 16px; border-radius: var(--r-pill); background: #0b57d0; color: #fff; font-size: 14px; font-weight: 500; text-align: center; white-space: nowrap; }
@media (max-width: 760px) {
  .notate-page .nt-hero-head { grid-template-columns: minmax(0, 1fr); }
  .notate-page .nt-store-card { max-width: 20rem; }
}

/* Launch: the listing as it appears in Chrome Web Store search */
.notate-page .nt-listing-fig { margin: var(--sp-media, 28px) 0 0; }
.notate-page .nt-listing { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 14px; border-radius: 24px; background: #eef1f6; color: #1f1f1f; text-decoration: none; transition: background-color var(--dur-2, 200ms) ease; }
.notate-page .nt-listing:hover { background: #e6eaf2; }
.notate-page .nt-listing:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.notate-page .nt-listing__cover { display: block; aspect-ratio: 440 / 280; overflow: hidden; border-radius: 16px; }
.notate-page .nt-listing__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.notate-page .nt-listing__body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; min-width: 0; }
.notate-page .nt-listing__name { font-size: 16px; font-weight: 500; }
.notate-page .nt-listing__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
.notate-page .nt-listing__rating svg { width: 13px; height: 13px; margin-inline-start: 4px; color: #5f6368; }
.notate-page .nt-listing__desc { font-size: 15px; line-height: 1.45; color: #3c4043; }
.notate-page .nt-listing__status { display: inline-flex; align-items: center; gap: 6px; padding: 8px 8px 0 0; font-size: 14px; font-weight: 500; color: #137333; white-space: nowrap; }
.notate-page .nt-listing__status svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .notate-page .nt-listing { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .notate-page .nt-listing__body { padding-top: 0; }
  .notate-page .nt-listing__status { padding: 0; }
}

/* Reflection: results in the same ruled, labeled grid as the overview meta */
.notate-page .nt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; }
.notate-page .nt-stats dt { margin-bottom: 14px; font-size: var(--label-fs); font-weight: var(--label-fw); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--nt-muted); }
.notate-page .nt-stats dd { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.notate-page .nt-stats strong { font-size: var(--h2-fs); font-weight: var(--h-fw); line-height: 1; letter-spacing: var(--h2-ls); color: var(--nt-ink); font-variant-numeric: tabular-nums; }
.notate-page .nt-stats span { font-size: 14px; line-height: 1.45; color: var(--nt-muted); }
@media (max-width: 600px) {
  .notate-page .nt-stats { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Launch: the live listing in a browser window (same frame as IBFF in Explorations) */
.notate-page .nt-browser-fig { margin-top: var(--sp-media, 28px); }
.notate-page .nt-hero .nt-browser-fig { margin-top: 40px; }
.notate-page .nt-browser { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1), var(--shadow-2); color: inherit; text-decoration: none; }
.notate-page .nt-browser:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.notate-page .nt-browser__bar { position: relative; display: flex; align-items: center; flex: none; height: 2.25rem; padding-inline: 0.9rem; background: var(--clr-panel); border-block-end: 1px solid var(--clr-border); }
.notate-page .nt-browser__dots { display: flex; gap: 0.4rem; }
.notate-page .nt-browser__dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d3d8de; }
.notate-page .nt-browser__url { position: absolute; left: 50%; transform: translateX(-50%); width: min(40%, 22rem); padding: 0.2rem 0.75rem; border-radius: var(--r-sm); background: #fff; font-size: 0.6875rem; line-height: 1.4; text-align: center; color: var(--clr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notate-page .nt-browser__screen { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.notate-page .nt-browser__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-4, 600ms) var(--ease, ease); }
@media (hover: hover) { .notate-page .nt-browser:hover .nt-browser__screen img { transform: scale(1.015); } }
@media (max-width: 560px) {
  .notate-page .nt-browser__url { width: 60%; }
}

@media (max-width: 700px) {
  .notate-page .nt-carousel__rail > li { flex-basis: 86%; }
}


/* ══ 4 · Case system ════════════════════════════════════════════ */

body.case-page {
	/* Color */
	--c-bg: var(--clr-bg);
	--c-ink: var(--clr-text);
	--c-body: #1c1d1c;
	--c-muted: var(--clr-muted);
	--c-rule: var(--clr-border);
	--c-panel: var(--clr-panel);

	/* Type scale */
	--fs-h1: clamp(1.875rem, 2.8vw, 2.625rem);    /* 30 → 42 */
	--fs-h2: clamp(1.5rem, 2.1vw, 1.875rem);      /* 24 → 30 */
	--fs-h3: 1.125rem;                             /* 18 */
	--fs-lead: 1.125rem;                           /* 18 */
	--fs-body: 1rem;                               /* 16 */
	--fs-small: 0.875rem;                          /* 14 */
	--fs-label: 0.75rem;                           /* 12 */
	--fs-quote: clamp(1.1875rem, 1.6vw, 1.375rem); /* 19 → 22 */
	--lh-body: 1.6;
	--lh-head: 1.18;

	/* Layout */
	--case-g: var(--gutter);                         /* page gutter = nav edges */
	--case-top: 76px;                                /* cover offset below nav */
	--col: 760px;                                    /* the one centered column */
	--col-w: min(var(--col), calc(100vw - 2 * var(--case-g)));
	--rail-w: 150px;
	--radius: var(--r-md);

	/* Rhythm */
	--sp-section: clamp(88px, 9vw, 128px);
	--sp-block: 56px;
	--sp-media: 28px;
	--sp-head: 14px;
	--sp-para: 12px;
	--gap-media: 12px;

	background: var(--c-bg);
	color: var(--c-ink);
	font-size: var(--fs-body);
}
@media (max-width: 700px) {
	body.case-page {
		--case-top: 68px;
		--sp-section: 72px;
		--sp-block: 44px;
		--sp-media: 22px;
		--gap-media: 8px;
		--radius: var(--r-md);
	}
}

/* ── Frame ───────────────────────────────────────────────────── */
body.case-page .nt-main { padding-top: var(--case-top); padding-bottom: var(--sp-section); }
body.case-page .nt-story { padding-inline: var(--case-g); }
body.case-page :is(
	.nt-reading, .nt-process, .nt-hero,
	.nt-chapters > .nt-hero, .nt-chapters > .nt-section,
	.nt-section > .nt-reading, .nt-section > .nt-process, .nt-section > .nt-media
) {
	width: 100%;
	max-width: var(--col);
	margin-inline: auto;
}
body.case-page .nt-section > :is(.nt-reading, .nt-process, .nt-media) { max-width: none; }
body.case-page .nt-section {
	max-width: var(--col);
	margin-inline: auto;
	margin-block: 0;
	padding: 0 0 var(--sp-section);
	scroll-margin-top: 104px;
}
body.case-page .nt-section:last-child { padding-bottom: 0; }

/* ── Cover (edge to edge of the story's inline padding) ─────── */
body.case-page .case-cover {
	position: relative;
	margin: 0 var(--case-g) clamp(56px, 7vw, 104px);
	/* Always the full width between the gutters at the covers' native 16:9,
	   so the video is never cropped. Mirrors coverRect() in js/morph.js. */
	width: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--c-panel);
}
body.case-page .case-cover .flow__device,
body.case-page .case-cover .flow__device-screen {
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	background: transparent;
}
body.case-page .case-cover .flow__device { border-radius: 0; }
body.case-page .case-cover .flow__device-screen { position: absolute; }
body.case-page .case-cover .case-cover__media {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	border-radius: 0 !important; /* beats the shared media radius */
	background: var(--c-panel);
}

/* ── Rail + TOC ──────────────────────────────────────────────── */
@media (min-width: 1200px) {
	body.case-page .nt-rail { left: var(--case-g); width: var(--rail-w); }
}
body.case-page .nt-toc { top: 104px; }
body.case-page .nt-toc > .nt-back {
	display: block;
	margin: 0 0 24px;
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--c-muted);
}
body.case-page .nt-toc > .nt-back:hover { color: var(--c-ink); }
body.case-page .nt-toc li + li { margin-top: 4px; }
body.case-page .nt-toc li a {
	display: flex;
	padding-block: 5px;
	font-size: var(--label-fs);            /* 13 (was 14) */
	line-height: 1.4;
	font-weight: var(--label-fw);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--c-muted);
	transition: color var(--dur-1) linear;
}
body.case-page .nt-toc li a:hover,
body.case-page .nt-toc a[aria-current] { color: var(--c-ink); font-weight: 400; }
body.case-page .nt-toc .flip__track > * { font-weight: var(--label-fw); }
@media (max-width: 1199px) {
	body.case-page .nt-rail { top: 64px; margin: 0 calc(-1 * var(--case-g)) 40px; width: auto; padding-inline: var(--case-g); }
	body.case-page .nt-toc li + li { margin-top: 0; }
	body.case-page .nt-toc li a { padding-block: 14px; }
	body.case-page .nt-toc > .nt-back { width: max-content; margin: 8px auto 0; font-size: 0.75rem; }
	body.case-page .nt-section { scroll-margin-top: 170px; }
}

/* ── Type ────────────────────────────────────────────────────── */
body.case-page main :is(.nt-kicker, .case__eyebrow, .nt-decision h3, .sb-label) {
	display: block;
	margin: 0 0 var(--sp-head);
	font-size: var(--label-fs);
	font-weight: var(--label-fw);
	line-height: 1.3;
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--c-muted);
}
body.case-page main .nt-hero h1 {
	margin: 0 0 16px;
	max-width: 100%;
	max-inline-size: 100%;
	color: var(--c-ink);
	text-wrap: balance;
}
body.case-page main .nt-deck {
	max-width: 52ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-body);
}
body.case-page main :is(.nt-section h2, .case__section-title) {
	margin: 0 0 var(--sp-head);
	max-width: 30ch;
	color: var(--c-ink);
	text-wrap: balance;
}
body.case-page main :is(
	.case__subhead, .nt-feature-heading h3, .nt-decision h4, .nt-problems h3,
	.ig-decision-copy > h4, .ig-exploration-copy h3, .sb-flow-caption h3,
	.case__decision-title, .case__insight-block h3, .case__insight-block .case__subhead,
	.case__col-group .case__subhead, .case__compare-card .case__subhead
) {
	margin: 0 0 6px;
	color: var(--c-ink);
}
body.case-page main .case__subhead { margin-top: 40px; }
body.case-page main :is(.case__flow-block, .case__insight-block, .case__col-group > div, .case__compare-card, .case__decision-block) > .case__subhead:first-child,
body.case-page main .flow__copy .case__subhead:first-child { margin-top: 0; }

/* Body copy: one size and measure everywhere, at zero specificity so figure
   and component text can set their own. */
body.case-page main :where(
	.case__copy, .case__lede,
	.nt-section p:not(.nt-kicker):not(.case__eyebrow):not(.case__key-insight):not(.case__quote-block-text):not([class*="sb-min"]),
	.nt-problems p, .nt-decision p, .sb-flow-caption p, .ig-decision .case__copy
) {
	max-width: 64ch;
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-body);
}
body.case-page main .case__intro { display: block; margin: 0 0 var(--sp-media); }
body.case-page main .case__intro-lead { position: static; }
body.case-page main .case__intro-body { margin-top: 0; }
body.case-page main .nt-link { font-size: var(--fs-small); margin-top: 20px; }

/* Pull statements */
body.case-page main :is(.case__key-insight, .case__quote-block-text, .sb-min-insight) {
	max-width: 40ch;
	margin: var(--sp-media) 0 0;
	padding: 0;
	font-size: var(--fs-quote);
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--c-ink);
	background: none;
}
body.case-page main .case__quote-block { margin: var(--sp-media) 0 0; padding: 0; background: none; }
body.case-page main .case__quote-block .case__quote-block-text { margin: 0; }

/* ── Hero meta ───────────────────────────────────────────────── */
body.case-page .nt-chapters > .nt-hero { margin-bottom: var(--sp-section); }
body.case-page main .nt-meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 32px 0 0;
	padding-top: 0;
	border-top: 0 !important;
	font-size: var(--fs-small);
	line-height: 1.45;
}
body.case-page main .nt-meta dt {
	margin-bottom: 6px;
	font-size: var(--label-fs);
	letter-spacing: var(--label-ls);
	text-transform: uppercase;
	color: var(--c-muted);
}
body.case-page main .nt-meta dd { font-size: var(--fs-small); color: var(--c-ink); }
@media (max-width: 700px) {
	body.case-page main .nt-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
	body.case-page main .nt-meta > :last-child { grid-column: auto; }
}

/* ── Media ───────────────────────────────────────────────────── */
body.case-page main :is(img, video, iframe, .nt-placeholder, .sb-tile, .case__frame, .flow__device-screen, .img-zoom-wrap, .ig-gallery__tile, .case__img-placeholder) {
	border-radius: var(--radius) !important;
}
body.case-page main :is(.case__media-block, .case__img, .case__video) {
	width: 100%;
	max-width: none;
	margin: var(--sp-media) 0 0;
	padding: 0;
}
body.case-page main .nt-section .nt-media,
body.case-page main .nt-section > .nt-process.sb-media { margin-top: var(--sp-media); }
body.case-page main :is(.flow__row, .ig-gallery, .sb-gallery, .case__col-group, .yap-flow__trio, .yap-flow__quad, .flow__mini-grid, .flow__media-stack) { gap: var(--gap-media); }
body.case-page main .case__media-block + :is(.case__copy, .case__subhead, .case__insight-grid, .case__decision-pair, .case__col-group, .case__key-insight) { margin-top: 32px; }
body.case-page main .case__img-label { font-size: var(--fs-small); color: var(--c-muted); }

/* ── Grouped content ─────────────────────────────────────────── */
body.case-page main :is(.case__insight-grid, .nt-problems) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px 32px;
	margin: 36px 0 0;
}
body.case-page main :is(.case__insight-block, .nt-problems > div) { padding: 0; background: none; }
body.case-page main :is(.case__insight-block, .nt-problems > div, .case__decision-block, .case__col-group > div, .case__compare-card) p { font-size: 0.9375rem; }
body.case-page main .case__insight-block .case__key-insight { font-size: 0.9375rem; margin-top: 6px; color: var(--c-ink); }
body.case-page main .case__decision-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin: 32px 0 0; }
body.case-page main .case__compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-media); margin: var(--sp-media) 0 0; }
body.case-page main .case__compare-card > .case__subhead { margin-top: 16px; }
body.case-page main .case__col-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin: 36px 0 0; }
body.case-page main .case__col-group .case__frame { margin-top: 16px; }
body.case-page main .case__system-row { grid-template-columns: 150px 1fr; font-size: var(--fs-body); }
body.case-page main .case__system-key { font-size: var(--fs-label); letter-spacing: 0.06em; }

/* Blocks inside a section: flows, features, decisions */
body.case-page main :is(.case__flow-block, .nt-feature, .ig-decision, .nt-decision) { margin-top: var(--sp-block); }
body.case-page main .nt-decisions { margin-top: 0; }
body.case-page main :is(.case__flow-block, .nt-feature) > :is(.case__copy, .nt-feature-heading) + * { margin-top: 20px; }
body.case-page main .nt-feature-heading { display: block; }
body.case-page main .nt-decision {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 0;
}
body.case-page main .nt-decision + .nt-decision { margin-top: var(--sp-block); }
body.case-page main .nt-decision h3 { margin-bottom: 10px; }
body.case-page main .ig-decision { gap: 32px; }
body.case-page main .ig-decision .case__media-block { top: 104px; }
body.case-page main .ig-explorations { gap: var(--sp-block); }
body.case-page main .sb-flow-caption { padding: 16px 0 8px; }
body.case-page main .ig-quote p { font-size: 0.9375rem; }
body.case-page main .ig-quote cite { font-size: 0.8125rem; }
@media (max-width: 700px) {
	body.case-page main :is(.case__decision-pair, .case__compare-row, .nt-decision, .ig-decision) { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Playback controls: always top-right of the video ─────────── */
body.case-page :is(.flow__controls, .sb-video-controls, .ig-scene-controls) {
	position: absolute;
	top: 12px;
	right: 12px;
	bottom: auto;
	left: auto;
	inset-block-start: 12px;
	inset-block-end: auto;
	display: flex;
	gap: 6px;
	z-index: 4;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding: 0;
	background: none;
	transform-origin: top right;
}
body.case-page :is(.flow__btn, .sb-video-controls button, .ig-scene-controls button, .ig-scene-controls a) {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--clr-accent);
	cursor: pointer;
	/* surface, hover and press come from .glass (css/glass.css) */
}
body.case-page :is(.flow__btn, .sb-video-controls) svg { width: 13px; height: 13px; }
body.case-page .flow__device { position: relative; }
body.case-page .flow__device:has(> .flow__device-screen > .flow__video:not(video)):not(:has(video)) > .flow__controls { display: none; }
body.case-page .case-cover .flow__controls { top: 16px; right: 16px; }
/* Pause/play icon swap (was only in work.css, which not every page loads) */
body.case-page .flow__btn--pause .icon-play,
body.case-page .flow__btn--pause:not(.is-playing) .icon-pause { display: none; }
body.case-page .flow__btn--pause .icon-pause,
body.case-page .flow__btn--pause:not(.is-playing) .icon-play { display: block; }

/* ── Removed chrome ──────────────────────────────────────────── */

/* ── Footer ──────────────────────────────────────────────────── */
body.case-page .footer__copy { font-size: 12px; }

/* ── Placeholders (media not yet supplied) ───────────────────── */
body.case-page main div.flow__video:empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--c-panel);
	border-radius: var(--radius);
}
body.case-page main :is(.flow__row, .yap-flow__trio, .yap-flow__quad, .flow__media-stack, .flow__mini-grid) div.flow__video:empty { aspect-ratio: 9 / 16; }
body.case-page main img.case__frame:not([src]),
body.case-page main img.case__frame[src=""] {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: var(--c-panel);
	border: 0;
	color: transparent;
	font-size: 0;
}

/* Compact rail: an opaque strip content scrolls beneath */
@media (max-width: 1199px) {
	body.case-page .nt-rail {
		z-index: 30;
		background: var(--c-bg);
		box-shadow: 0 1px 0 var(--c-rule);
	}
	body.case-page .nt-rail::before { background: var(--c-bg); }
}
@media (max-width: 700px) {
	body.case-page main .case__system-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Instagram gallery: all sources are 16:9, so tiles are 16:9 and never crop */
body.case-page main .ig-gallery__tile { aspect-ratio: 16 / 9; }
body.case-page main .ig-gallery__tile video { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
	body.case-page main .ig-gallery__row { grid-auto-flow: row; grid-template-columns: 1fr; }
}
body.case-page .ig-motion-toggle .icon-play,
body.case-page .ig-motion-toggle.is-playing .icon-pause { display: block; }
body.case-page .ig-motion-toggle .icon-pause,
body.case-page .ig-motion-toggle.is-playing .icon-play { display: none; }
body.case-page .ig-motion-toggle svg { width: 13px; height: 13px; }
body.case-page .ig-scene-controls button { background: rgb(255 255 255 / 0.16); }
body.case-page .ig-scene-controls button:hover { background: rgb(255 255 255 / 0.28); }

/* ── Reference layout (astapable.com/captures) ──────────────────
   Body-content inline margins and the text + media split follow that
   site's case-section / case-double-wrapper values. Its rem scales with
   the viewport (1.04502vw desktop, 2.93333vw ≤980px), so the values are
   converted to vw here; our own type scale is left unchanged.
     margins   21.25rem → 22.207vw   (800px column at 1440)
               6.25rem  → 18.333vw   (768–991)
     2-col     1fr 1fr, gap .75rem → 0.784vw, text column padding-right 2rem
   ≤767px the nav gutter is kept (the reference's 11–17px differs from it
   by a few pixels, and aligning with the nav reads cleaner). */
body.case-page {
	--case-m: 22.207vw;
	--col: calc(100vw - 2 * var(--case-m));
	--pair-gap: 0.784vw;
	--pair-copy-pad: 2.09vw;
}
@media (max-width: 991px) {
	body.case-page { --case-m: 18.333vw; --pair-gap: 5.867vw; --pair-copy-pad: 0px; }
}
@media (max-width: 767px) {
	body.case-page { --case-m: var(--case-g); --pair-gap: 1.467vw; }
}
@media (max-width: 479px) {
	body.case-page { --pair-gap: 5.333vw; }
}

/* Text + media side by side: two equal columns. */
body.case-page main :is(.nt-decision, .ig-decision) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pair-gap);
	align-items: start;
}
body.case-page main :is(.nt-decision-copy, .ig-decision-copy) { padding-right: var(--pair-copy-pad); }
body.case-page main :is(.nt-decision, .ig-decision) > :is(.nt-media, .case__media-block) { margin: 0; }

/* 768–991: stacked, as in the reference. */
@media (min-width: 768px) and (max-width: 991px) {
	body.case-page main :is(.nt-decision, .ig-decision) { grid-template-columns: minmax(0, 1fr); }
	body.case-page main .ig-decision .case__media-block { position: static; }
}
/* 480–767: back to two columns; nested text pairs stack so they stay readable. */
@media (min-width: 480px) and (max-width: 767px) {
	body.case-page main :is(.nt-decision, .ig-decision) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	body.case-page main .ig-decision .case__decision-pair { grid-template-columns: 1fr; }
}
/* ≤479: stacked. */
@media (max-width: 479px) {
	body.case-page main :is(.nt-decision, .ig-decision) { grid-template-columns: minmax(0, 1fr); }
	body.case-page main .ig-decision .case__media-block { position: static; }
}

/* One recording beside its explanation; multiple-media figures retain their layout. */
@media (min-width: 960px) {
 body.case-page main .case-single-video {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* the recording gets the larger share */
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
 }
 body.case-page main .case-single-video > .nt-reading,
 body.case-page main .case-single-video > .nt-media {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
 }
 body.case-page main .case-single-video > .nt-media video {
  width: 100%;
  height: auto;
  object-fit: contain;
 }
}

body.case-page .dx-media:has(> .flow__controls) { position: relative; }
body.case-page .dx-media .flow__btn--pause .icon-pause { display: none; }
body.case-page .dx-media .flow__btn--pause.is-playing .icon-pause { display: block; }
body.case-page .dx-media .flow__btn--pause.is-playing .icon-play { display: none; }

/* Keep the back link fixed while only chapter links scroll to the viewport edge. */
@media (max-width: 1199px) {
 body.case-page .nt-toc { overflow: visible; }
 body.case-page .nt-toc > .nt-back { margin: 12px 0 0; }
 body.case-page .nt-toc ol { min-width: 0; width: calc(100% + var(--case-g)); overflow-x: auto; padding-right: var(--case-g); scrollbar-width: none; }
 body.case-page .nt-toc li { flex: 0 0 auto; }
}
@media (max-width: 759px) { body.case-page { --sp-section: 96px; } }

/* ── Notate: research → decision traceability ─────────────────── */
/* Three workarounds, each named by what it loses, lined up under the research figure */
.notate-page .nt-insights { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 32px 0 0; padding: 0; }
.notate-page .nt-insights li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.notate-page .nt-insights strong { font-size: var(--h2-fs); font-weight: var(--h-fw); line-height: 1.1; letter-spacing: var(--h2-ls); color: var(--nt-ink); }
.notate-page .nt-insights blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--nt-muted); }
.notate-page .nt-hmw { margin-top: 56px; }
body.notate-page main .nt-section p.nt-hmw__q { max-width: 32ch; font-size: var(--h2-fs); font-weight: var(--h-fw); line-height: 1.2; letter-spacing: var(--h2-ls); color: var(--nt-ink); text-wrap: balance; }
@media (max-width: 700px) { .notate-page .nt-insights { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Each decision is labeled as the trade-off behind its step */
body.case-page main .nt-decision .nt-decision-kicker { margin-bottom: 8px; }
.notate-page .nt-todo { padding: 0 2px; border-radius: 3px; background: #ffe98a; color: inherit; }

/* ── Smart Bundles: decisions traced to research ─────────────── */
body.case-page main .sb-decision { margin-top: var(--sp-block, 64px); }
body.case-page main .sb-decision h3 { margin: 0 0 8px; color: var(--c-ink); }
body.case-page main .nt-section p.sb-evidence { display: flex; gap: 12px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--c-muted, var(--clr-muted)); }
body.case-page main .sb-evidence span { flex: none; font-size: var(--label-fs); font-weight: var(--label-fw); letter-spacing: var(--label-ls); line-height: 1.8; text-transform: uppercase; color: var(--c-ink); }
/* Launch: each piece full width, one after another */
body.case-page main .dx-grid.dx-grid--1 { grid-template-columns: minmax(0, 1fr); gap: var(--gap-media); }
body.case-page main .sb-launch .dx-media { aspect-ratio: 16 / 9; }
@media (max-width: 600px) { body.case-page main .nt-section p.sb-evidence { flex-direction: column; gap: 4px; } }

/* ── Smart Bundles: waste across one order ───────────────────── */
body.case-page main .sbw { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; font-family: inherit; }
.sbw-wipe { transform-box: fill-box; transform-origin: left center; transition: transform 1600ms cubic-bezier(.45, 0, .2, 1); }
.sbw-callout, .sbw-loop { transition: opacity 500ms ease 1400ms; }
.sbw-loop { transition-delay: 1700ms; }
.sbw-fig.reveal-ready:not(.is-in) .sbw-wipe { transform: scaleX(0); }
.sbw-fig.reveal-ready:not(.is-in) :is(.sbw-callout, .sbw-loop) { opacity: 0; }
/* Decision visuals: the flow video, cropped to 16:9 and zoomed onto the moment the decision shows */
body.case-page main .sb-decision-fig { margin-top: var(--sp-media, 28px); }
body.case-page main .sb-crop { aspect-ratio: 16 / 9; }
body.case-page main .sb-crop > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--crop-zoom, 1.25)); }
/* Empty 16:9 figure slot for a decision visual still being designed */
body.case-page main .case-fig-empty { aspect-ratio: 16 / 9; border-radius: var(--r-lg, 20px); background: radial-gradient(circle, rgb(32 38 45 / .07) .6px, transparent .9px) 0 0 / 10px 10px, var(--clr-panel); }
/* Decisions open with the research finding that prompted them */
body.case-page main .nt-section p.sb-evidence--lead { margin: 0 0 14px; }
/* Branding figures (logo, type, color, signature components) */
body.case-page main .brand-svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; font-family: inherit; }

/* ── One media gap: figures stacked back to back sit --gap-media apart, matching grid gaps ── */
body.case-page main :is(.nt-media, .nt-process, .nk-board) + :is(.nt-media, .nt-process, .nk-board) { margin-top: var(--gap-media); }

/* ── Hero pair + overview media (shared) ─────────────────────── */
body.case-page .case-cover:has(+ .case-hero-pair) { margin-bottom: var(--gap-media, 12px); }
body.case-page .case-hero-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-media, 12px); margin: 0 var(--case-g) clamp(56px, 7vw, 104px); }
body.case-page .case-hero-pair img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 760px) { body.case-page .case-hero-pair { grid-template-columns: 1fr; } }
body.case-page main .case-overview-media { margin: 32px 0; }
body.case-page main .case-overview-media video { display: block; width: 100%; height: auto; border-radius: var(--r-lg, 20px); }
/* Mixed-ratio pair (4:5 + 16:9): columns sized by aspect ratio so both show uncropped at equal height. */
body.case-page .case-hero-pair--fit { grid-template-columns: 0.8fr 1.7778fr; }
body.case-page .case-hero-pair--fit img { height: auto; aspect-ratio: auto; }