/* NOTHING x YAMI — stylesheet
   Static port of the handoff (app/globals.css, commit c3fbe58). Two parts:
   1. Tailwind v4.2.1 theme + preflight, carried VERBATIM from the handoff's compiled build so the
      cascade is identical (the original had `@import "tailwindcss"`). Do not edit this block.
   2. The page's own rules, from app/globals.css, unchanged. Edit here. */

/* ---- 1. Tailwind theme + preflight (verbatim, minified) ---- */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}
@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ---- 2. Page rules ---- */
@font-face { font-family: "NType82"; src: url("/fonts/NType82-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ndot"; src: url("/fonts/Ndot-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SpaceMono"; src: url("/fonts/SpaceMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
/* Started from the handoff's app/globals.css. Every value that changed is marked "ref:" with the Nothing About-page
   token it was measured against (site/tools/out/reference-probe/dom-outline-1363.txt has the classes).
   Two layouts live in this sheet, switched by <html data-layout="a|b"> (see the switch panel + app.js):
     a = the handoff's composition (hero beside the opening copy, every photo tilted and staggered)
     b = the reference's composition (opening alone, hero below-left with (1) beside it, only hero + sketch tilted)
   Everything not under [data-layout] applies to both. */
:root {
  color-scheme: light;
  --background: #f5f5f5; --foreground: #040404; --red: #c6102e; --yellow: #ffc700;
  --primary: #c6102e; --primary-foreground: #fff; --border: #d9d9d9; --ring: #c6102e;
  --grid-cell: calc((100vw - 64px) / 4); --nav-inset: 16px; --nav-square: 14px; --nav-gap: 4px;
  --rhythm: 96px;   /* ref: mobile gap between blocks = mb-20/pb-20 (80px) + the 12-col grid's gap-4 (16px) */
  --tuck: 40px;     /* ref: copy -> its own visual = mt-10 / mb-10 (40px) */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: none; overflow-x: clip; }  /* ref: body overflow-x-hidden */
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "NType82", Georgia, serif; font-size: 16px; font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, figure { margin: 0; font-weight: 400; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--red); outline-offset: 5px; }
::selection { background: var(--red); color: white; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 18px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
/* ref: fixed inset-0 p-8 > absolute -inset-px, radial white 1px -> transparent 1.5px, opacity .3, mix-blend difference; cell (100vw-64)/12 */
.dot-field { position: fixed; z-index: 10; inset: 31px; pointer-events: none; opacity: .3; mix-blend-mode: difference; background-image: radial-gradient(circle, white 1px, transparent 1.5px); background-size: var(--grid-cell) var(--grid-cell); background-position: calc(1px - var(--grid-cell) / 2) calc(1px - var(--grid-cell) / 2); }
.registration { position: fixed; z-index: 20; pointer-events: none; color: #000; }  /* ref: stroke="black" */
.registration-tl { top: var(--nav-inset); left: var(--nav-inset); }
.registration-tr { top: var(--nav-inset); right: var(--nav-inset); }
.registration-bl { bottom: var(--nav-inset); left: var(--nav-inset); }
.masthead { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; padding: 8px; }
/* ref: frost-white-intense = rgba(255,255,255,.8) + blur(45px); max-w-xl 576; min-h-12 48; rounded-lg 8 */
.masthead a { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 576px; height: 48px; margin-inline: auto; border-radius: 8px; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); font-family: "Ndot", monospace; font-size: 18px; line-height: 1; }
.proposal { padding-inline: 16px; }
.opening-row { padding-block: 160px var(--rhythm); }  /* ref: pt-40; bottom was 104 -> rhythm */
.opening { font-size: 30px; line-height: 1.25; }
.opening h1 { font-size: inherit; line-height: inherit; text-indent: 32px; }
.opening p { margin-top: 1em; }
.opening-marker { width: 16px; height: 16px; margin-bottom: -29px; background: var(--red); animation: square-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
/* Rail. Ported from the reference's own component (nothing.tech/about, framer-motion useScroll): six blocks that fill
   white from the BOTTOM as a scroll-progress bar, filled = round(progress / 0.9 x 6); a 2s random flicker once all six
   are on; the rail fades out between 94% and 97% of the page (over the footer). grey = bg-grey-darker/40, red #C6102E.
   The red square doubles as Tito's next-section / back-to-top button; the blocks are not interactive, like the reference. */
.chapter-rail { position: fixed; z-index: 44; right: var(--nav-inset); bottom: var(--nav-inset); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--nav-gap); }
.rail-progress { display: flex; flex-direction: column-reverse; gap: var(--nav-gap); }
.rail-block, .nav-red-square span { display: block; width: var(--nav-square); height: var(--nav-square); }
.rail-block { background: rgb(89 90 90 / .4); transition: background-color 200ms cubic-bezier(.4,0,.2,1); }
.rail-block.is-on { background: #fff; }
.nav-red-square { display: flex; justify-content: flex-end; align-items: center; width: 32px; height: var(--nav-square); border: 0; padding: 0; background: transparent; cursor: pointer; }
.nav-red-square span { background: var(--red); }
/* Media. The hero (and the sketch) tilt with scroll like the reference's photos: 0deg as they enter from the bottom,
   the full angle once fully in view (app.js drives --tilt from data-scroll-tilt). Reduced motion = static angle. */
.hero-media { margin-top: var(--rhythm); transform: translateX(-24px); }  /* ref: -translate-x-6 mobile; gap was 80 */
.media-placeholder { position: relative; background: #e6e6e6; border-radius: 6px; transform: rotate(var(--tilt, 0deg)); }
.hero-placeholder { aspect-ratio: 1; width: 100%; }
.yellow-pin { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.yellow-pin.pin-left { right: auto; left: 16px; }  /* ref: the second photo's pin sits top-left */
.chapter { scroll-margin-top: 104px; }
.section-row { display: grid; grid-template-columns: minmax(0,1fr); row-gap: var(--tuck); align-items: center; }  /* was 56 */
.chapter-number { display: block; margin: 0 0 12px; font-family: "Ndot", monospace; font-size: 18px; line-height: 1.4; color: #040404; white-space: nowrap; }
.chapter-copy { font-size: 22px; line-height: 1.4; }  /* ref: body leading 1.4 on mobile (22.4/16) */
.chapter-copy p + p { margin-top: 16px; }  /* ref: mt-4 */
.section-visual { min-width: 0; }
.headphone-study { position: relative; background: transparent; padding: 0; overflow: visible; }
.headphone-viewer { display: block; width: 100%; aspect-ratio: 1 / 1; border: 0; background: transparent; pointer-events: none; }  /* pointer-events: none = nothing on the page can grab or drag it */
.headphone-study noscript img { display: block; width: 100%; height: auto; }
.characters, .idea { margin-top: var(--rhythm); }  /* was 112 */
.character-portraits, .listening-portraits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.character-portraits > * { aspect-ratio: 9 / 16; overflow: hidden; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-group img { object-position: 100% 50%; transform: scale(1.42); transform-origin: 0% 76%; }  /* crop within the unchanged 9:16 frame: the three women, with Dom outside the right edge */
.character-portraits > :nth-child(2) { margin-top: 8px; background: #e9e9e9; }
.character-portraits > :nth-child(3) { margin-top: -5px; background: #e3e3e3; }
.idea h2 { font-size: 28px; line-height: 1.2; margin: 0 0 16px; }  /* the label already supplies the reference's 4px offset */
/* A single production storyboard: these are shots within each city film, not episodes of the series. */
.storyboard-board { position: relative; z-index: 11; padding: 20px 16px; background: #111; color: #fff; }
.storyboard-header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #4a4a4a; }
.storyboard-kicker { font-family: "SpaceMono", monospace; font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.storyboard-context { margin-top: 8px; font-size: 22px; line-height: 1.2; }
.storyboard-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.storyboard-pair figure { min-width: 0; }
.storyboard-pair .media-placeholder { aspect-ratio: 9 / 16; border-radius: 0; transform: none; }
.storyboard-pair figcaption { margin-top: 16px; color: #fff; }
.shot-number { display: block; font-family: "SpaceMono", monospace; font-size: 12px; line-height: 1.5; letter-spacing: .04em; }
.shot-title { display: block; margin-top: 8px; font-size: 20px; line-height: 1.15; }
.storyboard-pair figcaption p { margin-top: 8px; font-size: 16px; line-height: 1.35; color: #dedede; }
.montage-row { margin-top: var(--rhythm); }  /* was 80 */
.sense-row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 14px; margin-top: 32px; }
.sense-icon { margin-top: 3px; }
.storyboard-image { overflow: hidden; background: #fff; }
.storyboard-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.listening-portraits { grid-template-columns: repeat(2, minmax(0,1fr)); }
.listening-portraits > figure { aspect-ratio: 4 / 3; }
.impression { margin-block: var(--rhythm) 160px; }  /* was 112 */
.impression .chapter-copy { font-size: 26px; line-height: 1.3; }
@keyframes square-pulse { 50% { opacity: .5; } }
/* Endcard footer: Tito's endcard frame (assets-in/endcard-kit/frames/09_endcard.jpg) as a full-viewport black end screen,
   like the reference's black min-h-svh footer. Wordmark = Nothing's own SVG; the two lines in the kit's Space Mono. */
.endcard { position: relative; z-index: 11; min-height: 100svh; display: grid; place-items: center; padding: 96px 16px; background: #040404; color: #fff; text-align: center; }
.endcard-inner { display: grid; justify-items: center; }
.endcard-wordmark { display: block; width: clamp(220px, 49vw, 590px); height: auto; color: #fff; }
.endcard-line { margin-top: clamp(32px, 6vw, 56px); font-family: "SpaceMono", "Ndot", monospace; font-size: clamp(18px, 2.3vw, 28px); line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.endcard-city { margin-top: clamp(14px, 2.2vw, 22px); font-family: "SpaceMono", "Ndot", monospace; font-size: clamp(12px, 1.35vw, 16px); line-height: 1; letter-spacing: .12em; color: rgb(255 255 255 / .55); }

/* Layout switch (review aid, remove before the page goes to Nothing) */
.layout-switch { position: fixed; z-index: 60; top: 64px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); font-family: "Ndot", monospace; font-size: 12px; line-height: 1; color: #040404; }
.layout-switch span { padding: 0 6px 0 8px; opacity: .6; }
.layout-switch[hidden] { display: none; }
.layout-switch button { border: 0; padding: 8px 10px; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.layout-switch button[aria-pressed="true"] { background: #040404; color: #fff; }

/* Layout B: reference composition */
.hero-media-b { display: none; }
html[data-layout="b"] .opening-row .hero-media { display: none; }
html[data-layout="b"] .hero-media-b { display: block; margin-top: 0; margin-bottom: calc(var(--rhythm) - var(--tuck)); transform: translateX(-24px); }
html[data-layout="b"] .character-portraits > *, html[data-layout="b"] .listening-portraits > *, html[data-layout="b"] .storyboard-pair .media-placeholder { --tilt: 0deg !important; margin-top: 0; }
html[data-layout="b"] .character-portraits .yellow-pin, html[data-layout="b"] .listening-portraits .yellow-pin, html[data-layout="b"] .storyboard-pair .yellow-pin { display: none; }

@media (min-width: 600px) and (max-width: 899px) {
  .chapter-text, .impression { max-width: 600px; margin-inline: auto; }
  .section-visual, .hero-media { max-width: 600px; width: 100%; margin-inline: auto; }  /* ref: sm:max-w-[600px] (was 620) */
  html[data-layout="b"] .hero-media-b { margin-inline: 0; }  /* ref: hero stays on the left edge, only the copy is centred */
}
@media (min-width: 768px) {
  :root { --grid-cell: calc((100vw - 64px) / 12); }
  .opening { font-size: 36px; line-height: 40px; }
  .opening h1 { text-indent: 40px; }
  .opening-marker { width: 20px; height: 20px; margin-bottom: -32px; }
  .hero-media { transform: translateX(-40px); }  /* ref: md:-translate-x-10 */
  html[data-layout="b"] .hero-media-b { transform: translateX(-40px); }
}
@media (min-width: 900px) {
  .opening-row, .section-row, .impression { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 16px; row-gap: 0; }
  .opening-row { align-items: center; padding-block: 208px 152px; }  /* ref: lg:pt-52 */
  .opening { grid-column: 1 / 7; }
  .hero-media { grid-column: 8 / 13; margin: 0; transform: none; }
  html[data-layout="a"] .opening-row .hero-media { margin-right: 48px; }  /* rail clearance at the 16px inset (the rail is 32px wide) */
  /* ref: the label is one grid column, the copy starts on the next (subgrid keeps both on the 12-col grid) */
  .chapter-text { grid-column: 1 / 7; display: grid; grid-template-columns: subgrid; column-gap: 16px; align-items: start; }
  .chapter-number { grid-column: 1; align-self: start; font-size: 20px; line-height: 28px; margin: 4px 0 0; }  /* ref: heading sits 4px above the label */
  .chapter-copy { grid-column: 2 / -1; font-size: 24px; line-height: 1.25; }  /* ref: lg:leading-tight */
  .section-visual { grid-column: 8 / 13; grid-row: 1; }
  .visual-left .chapter-text { grid-column: 7 / 13; grid-row: 1; }
  .visual-left .chapter-copy { padding-right: 32px; }  /* rail clearance until the copy stops at col 11 */
  .visual-left .section-visual { grid-column: 1 / 6; }
  .characters, .idea { margin-top: 160px; }
  .character-portraits, .listening-portraits { gap: 16px; }
  .idea h2 { font-size: 30px; }
  .montage-row { margin-top: 128px; }
  .sense-row { margin-top: 36px; gap: 16px; }
  .impression { margin-block: 160px 200px; }
  .impression > .chapter-number { grid-column: 1; }
  .impression > .chapter-copy { grid-column: 2 / 10; font-size: 34px; line-height: 1.25; }
  /* Layout B on desktop: opening alone on 7 columns (ref: xl:col-span-7), hero cols 1-5 shifted -40px (ref: xl:col-span-5
     md:-translate-x-10) with (1) beside it on cols 7-11 (ref: xl:col-span-5 xl:col-start-7 xl:mt-16), sketch under the copy */
  html[data-layout="b"] .opening-row { display: block; padding-block: 208px 96px; }
  html[data-layout="b"] .opening { max-width: calc((100% - 11 * 16px) * 7 / 12 + 6 * 16px); }  /* 7 of 12 columns, gap 16 */
  html[data-layout="b"] .individuality { grid-template-rows: auto auto; align-items: start; }
  html[data-layout="b"] .hero-media-b { grid-column: 1 / 6; grid-row: 1 / 3; margin: 0; transform: translateX(-40px); }
  html[data-layout="b"] .individuality .chapter-text { grid-column: 7 / 12; grid-row: 1; margin-top: 64px; }
  html[data-layout="b"] .individuality .headphone-study { grid-column: 7 / 13; grid-row: 2; margin-top: var(--tuck); }
  html[data-layout="b"] .characters .chapter-text { grid-column: 1 / 6; grid-row: 1; }  /* ref: (2) is col-span-5 on the left, not mirrored */
  html[data-layout="b"] .characters .chapter-copy { padding-right: 0; }
  html[data-layout="b"] .characters .section-visual { grid-column: 7 / 13; }  /* ref: media col-span-6 col-start-7 */
  html[data-layout="b"] .idea .chapter-text { grid-column: 1 / 6; }  /* ref: every copy block is label + 4 columns */
}
@media (min-width: 1024px) {
  :root { --nav-inset: 32px; --nav-square: 16px; --nav-gap: 2px; }
  .yellow-pin { width: 12px; height: 12px; }
  html[data-layout="a"] .opening-row .hero-media { margin-right: 64px; }  /* rail clearance at the 32px inset */
  .visual-left .chapter-copy { padding-right: 48px; }  /* 16px clearance from the rail squares until col 11 at 1280 */
  .chapter-copy p { text-wrap: balance; }  /* ref: lg:text-balance */
  .storyboard-board { padding: 24px 40px 24px 24px; }  /* clear the fixed progress rail at the right edge */
  html[data-layout="b"] .idea, html[data-layout="b"] .impression { padding-inline: 16px; }  /* ref: sections (3)/(4) use lg:px-8 = 32px gutters, their grid recomputes inside */
}
@media (min-width: 1280px) {
  .opening { font-size: 43.2px; line-height: 46.4px; }
  .opening-marker { margin-bottom: -36px; }
  .chapter-copy { font-size: 26px; line-height: 1.2; }  /* ref: xl:leading-[1.5rem] on 20px = 1.2 */
  .visual-left .chapter-text { grid-column: 7 / 12; }
  .visual-left .chapter-copy { padding-right: 0; }
  .character-portraits, .listening-portraits { gap: 20px; }
  .storyboard-pair { gap: 24px; }
  html[data-layout="b"] .opening-row { padding-bottom: 160px; }  /* ref: xl:pb-40 */
  html[data-layout="b"] .individuality .headphone-study { width: 100%; max-width: 576px; margin-left: auto; }  /* explicit width prevents the iframe's 300px intrinsic width shrinking the figure */
}
@media (min-width: 1536px) {
  .opening { font-size: 48px; line-height: 1; }  /* ref: 2xl:text-5xl = 48/48 (was 1.05) */
  .chapter-copy { font-size: 28px; }
  html[data-layout="b"] .hero-media-b { margin-top: 40px; }  /* ref: 2xl:mt-10 */
  html[data-layout="b"] .individuality .chapter-text { margin-top: 192px; }  /* ref: 2xl:mt-48 */
}
@media (min-width: 1792px) {  /* ref: 3xl breakpoint is 1792px in nothing-about-source.css (the handoff spec said 1920) */
  .opening { max-width: 1200px; font-size: 60px; line-height: 1; }  /* ref: 3xl:text-6xl = 60/60 (was 1.1) */
  .opening h1 { text-indent: 48px; }
  .opening-marker { width: 24px; height: 24px; margin-bottom: -45px; }
  /* ref 3xl tokens, layout b: hero col-span-6 with the photo capped at 800px, section gaps pb-60 (240), second visual max-w-3xl (768) */
  html[data-layout="b"] .hero-media-b { grid-column: 1 / 7; }
  html[data-layout="b"] .hero-media-b .hero-placeholder { max-width: 800px; }
  html[data-layout="b"] .characters, html[data-layout="b"] .idea { margin-top: 240px; }
  html[data-layout="b"] .impression { margin-top: 240px; }
  html[data-layout="b"] .individuality .headphone-study { max-width: 768px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .opening-marker { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}