/* ==========================================================================
   Home — H02 Selected work (.sw) + H03 One product, three ways in (.tw)
   Scoped under .sw / .tw. Colour via role tokens so both sit correctly on paper and ink.
   ========================================================================== */

/* ---------------------------------------------------------------- H02 Selected work */
.sw { --sw-stagger: 0px; --sw-rowgap: clamp(48px, 4.4vw, 72px); }
/* #/selected-work lands with the eyebrow ~32px under the header, not a whole section-padding of empty paper */
.sw { scroll-margin-top: calc(20px - var(--section)); }
.sw__head {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px;
  align-items: end; margin-bottom: clamp(36px, 3.4vw, 56px);
}
.sw__intro { grid-column: 1 / span 7; display: grid; gap: 18px; justify-items: start; }
.sw__title { max-width: 12em; }
.sw__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); max-width: 27em; text-wrap: pretty; }
.sw__all { grid-column: 9 / -1; justify-self: end; padding-bottom: 4px; }

.sw__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-rowgap) var(--gutter);
}
.sw__item { position: relative; display: grid; gap: 16px; align-content: start; min-width: 0; }

/* Editorial index: numeral, hairline, category — a catalogue rhythm that never touches the 4:5 frame */
.sw__index {
  display: flex; align-items: center; gap: 12px; min-height: 18px;
  font-family: var(--mono); font-size: var(--t-meta); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2);
}
.sw__num { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.sw__rule { flex: 1 1 auto; height: 1px; background: var(--line); transform-origin: left; transition: background-color 200ms var(--ease); }
.sw__item:has(.work-card__media:hover) .sw__rule,
.sw__item:has(.work-card__media:focus-visible) .sw__rule { background: var(--fg); }

/* Card refinements in this context */
.sw .work-card { gap: 16px; }
.sw .work-card__body { gap: 6px; }
.sw .work-card__title { font-size: clamp(1.25rem, 1.12rem + .4vw, 1.5rem); line-height: 1.18; letter-spacing: -0.014em; font-variation-settings: "wdth" 90; }
/* Relationship status always on its own line, so baselines stay level across a row whatever the format length */
.sw .work-card__meta { margin-top: 6px; display: grid; justify-items: start; gap: 8px; }
.sw .work-card__media { transition: box-shadow 220ms var(--ease); }
.sw .work-card__media:hover { box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--ink) 70%, transparent); }

/* A missing poster keeps core's note but drops the browser's broken-image glyph */
.sw .work-card__media:has(.work-card__failed) img { visibility: hidden; }

/* Mobile closing link (first three pieces, then this) */
.sw__more { display: none; }

@media (min-width: 1024px) {
  .sw { --sw-stagger: clamp(40px, 4.4vw, 72px); }
  /* Middle column sits a step lower: an editorial offset that keeps rows scannable and ratios identical */
  .sw__item--c2 { top: var(--sw-stagger); }
  .sw__grid { padding-bottom: var(--sw-stagger); }
}
@media (max-width: 1023px) {
  .sw__intro { grid-column: 1 / span 5; }
  .sw__all { grid-column: 6 / -1; }
  .sw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sw__intro { grid-column: 1 / -1; gap: 14px; }
  .sw__all { display: none; }
  .sw__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sw__item:nth-child(n + 4) { display: none; }
  .sw__more {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 48px; padding: 18px 18px 18px 22px; min-height: 92px; border-radius: var(--r-media);
    background: var(--ink); color: var(--paper); text-decoration: none; --focus: var(--ink);
    transition: background-color 160ms var(--ease);
  }
  .sw__more:active { background: var(--ink-3); }
  .sw__more-text { display: grid; gap: 6px; }
  .sw__more-title { font-size: 1.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "wdth" 86; }
  .sw__more-meta { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .03em; color: var(--muted-on-ink); }
  .sw__more-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tomato); color: var(--ink); }
  .sw__more-icon .icon { width: 22px; height: 22px; stroke-width: 2; }
}

/* ---------------------------------------------------------------- H03 One product. Three ways in. */
.tw { position: relative; overflow: clip; }
/* #/the-thinking: the ink tucks just under the header (68px once scrolled; it shrinks from 80 on desktop and grows
   from 64 on mobile mid-scroll), so no band of paper shows and the stage arrives as high as it can */
.tw { scroll-margin-top: calc(64px - var(--header-h) - 16px); }
@media (min-width: 1024px) { .tw.section { padding-top: clamp(96px, 2.4rem + 5vw, 128px); } }
.tw__head {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px;
  align-items: end; margin-bottom: clamp(32px, 3.6vw, 56px);
}
.tw__intro { grid-column: 1 / span 7; display: grid; gap: 18px; justify-items: start; }
.tw__title-2 { display: block; }
.tw__swipe .swipe { bottom: -0.1em; height: 0.3em; }
.tw.is-armed .tw__swipe .swipe { clip-path: inset(0 100% 0 0); }
.tw.is-armed.is-drawn .tw__swipe .swipe { animation: swipe-draw 700ms 200ms var(--ease-out) forwards; }
.tw__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); max-width: 30em; text-wrap: pretty; margin-top: 4px; }

.tw__module { display: flex; flex-direction: column; --tw-pad: clamp(14px, 1.4vw, 20px); container: tw / inline-size; }

/* Brief card: product + brief, shown once, directly above the selector */
.tw-brief {
  grid-column: 8 / -1; margin-left: clamp(0px, 1.4vw, 24px); align-self: end;
  display: grid; gap: 10px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-media);
  background: color-mix(in srgb, var(--paper) 3%, transparent);
}
.tw-brief__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tw-brief__product { font-size: clamp(1.25rem, 1.15rem + .3vw, 1.4375rem); font-weight: 680; line-height: 1.2; letter-spacing: -0.012em; font-variation-settings: "wdth" 88; }
.tw-brief__text { font-size: 1rem; line-height: 1.5; color: var(--fg-2); max-width: 34em; text-wrap: pretty; }
.tw-brief__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .8125rem; line-height: 1.45; color: var(--fg-2); }
.tw-brief__note .icon { width: 16px; height: 16px; margin-top: 1px; }
/* Each sentence wraps as a unit (never "… Not / a client project."), yet can still wrap inside itself when text is enlarged */
.tw-brief__s { display: inline-block; text-wrap: pretty; }

/* Tabs */
.tw-tabs__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 32px; padding-bottom: 12px; }
.tw-tabs { display: grid; border-top: 1px solid var(--line); }
.tw-tab {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 20px;
  width: 100%; min-height: 88px; padding: 16px 10px 16px 2px; margin: 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--fg-2); text-align: left;
  transition: background-color 180ms var(--ease), color 180ms var(--ease); -webkit-tap-highlight-color: transparent;
}
.tw-tab:hover { background: color-mix(in srgb, var(--paper) 4%, transparent); }
.tw-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
.tw-tab__num {
  font-family: var(--mono); font-size: clamp(1.75rem, 1.25rem + 1vw, 2.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--muted-on-ink) 70%, transparent); min-width: 2.1ch;
  transition: color 180ms var(--ease);
}
.tw-tab__text { display: grid; gap: 6px; min-width: 0; }
.tw-tab__name { font-size: clamp(1.125rem, 1.04rem + .3vw, 1.3125rem); font-weight: 640; line-height: 1.15; letter-spacing: -0.012em; font-variation-settings: "wdth" 92; color: var(--fg-2); transition: color 180ms var(--ease); }
.tw-tab__format { font-family: var(--mono); font-size: var(--t-meta); line-height: 1.3; letter-spacing: .02em; color: var(--fg-2); }
.tw-tab__dur { font-family: var(--mono); font-size: var(--t-meta); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-tab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.tw-tab__bar i { display: block; height: 100%; background: var(--tomato); transform-origin: left center; transform: scaleX(0); }
.tw-tab[aria-selected="true"] { color: var(--fg); }
.tw-tab[aria-selected="true"] .tw-tab__num { color: var(--tomato); }
.tw-tab[aria-selected="true"] .tw-tab__name { color: var(--fg); }
.tw-tab[aria-selected="true"] .tw-tab__bar i { transform: scaleX(var(--p, 1)); }
/* Selection is never colour alone (brief §12.2): a full-width rule under the chosen tab (the tomato progress fills over
   it) and a heavier name */
.tw-tab[aria-selected="true"] .tw-tab__bar { background: var(--fg); }
.tw-tab[aria-selected="true"] .tw-tab__name { font-weight: 720; }
.tw-tab:hover .tw-tab__name { color: var(--fg); }

/* Stage: the screening room. The creative is the brightest thing in it. */
.tw-stage {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 20px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: var(--tw-pad);
  border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line);
}
.tw-stage__ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Drawn at quarter size and scaled up: the same soft glow for a fraction of the blur cost */
.tw-stage__ambient img {
  position: absolute; left: 50%; top: 50%; width: 35%; height: 35%; max-width: none; object-fit: cover;
  transform: translate(-50%, -50%) scale(4); filter: blur(14px) saturate(1.25); opacity: 0; transition: opacity 280ms var(--ease);
}
.tw-stage__ambient img.is-active { opacity: .34; }
.tw-stage__ambient img.is-missing { display: none; }
.tw-stage__ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 30%, var(--ink-2) 92%); }

.tw-stage__chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.tw-stage__chrome--top { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .04em; color: var(--muted-on-ink); min-height: 24px; }
.tw-stage__count { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; white-space: nowrap; }
.tw-stage__count b { font-weight: 500; color: var(--paper); }
.tw-stage__rec { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted-on-ink); transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.tw-stage.is-playing .tw-stage__rec { background: var(--tomato); border-color: var(--tomato); }
/* Wraps (never truncates) when text is enlarged; one line at normal sizes */
.tw-stage__meta { min-width: 0; text-align: right; text-wrap: balance; letter-spacing: .02em; }

.tw-stage__screen { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; }
.tw-clip {
  position: relative; width: 100%; aspect-ratio: var(--rw, 4) / var(--rh, 5);
  border-radius: 8px; background: var(--ink);
  box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--ink) 92%, transparent), 0 0 0 1px color-mix(in srgb, var(--paper) 6%, transparent);
}
.tw-layer { position: absolute; inset: 0; margin: 0; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity 280ms var(--ease); }
.tw-layer.is-active { opacity: 1; z-index: 1; }
/* The clip box takes the media's own ratio, so cover never crops (it only absorbs sub-pixel rounding) */
.tw-layer__poster, .tw-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.tw-layer__poster { transition: opacity 240ms var(--ease); }
.tw-layer video { z-index: 2; opacity: 0; transition: opacity 240ms var(--ease); }
.tw-layer.has-frame video { opacity: 1; }
.tw-layer.has-frame .tw-layer__poster { opacity: 0; transition-delay: 240ms; }
.tw-layer.no-preview video { display: none; }
/* Graceful fallback when a poster is missing */
.tw-layer__missing {
  position: absolute; inset: 0; z-index: 3; display: none; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--paper) 4%, transparent) 0 1px, transparent 1px 14px),
    var(--ink);
}
.tw-layer.is-missing .tw-layer__poster { visibility: hidden; }
.tw-layer.is-missing .tw-layer__missing { display: grid; }
.tw-layer.is-missing.has-frame .tw-layer__missing { display: none; }
.tw-layer__missing-n { font-family: var(--mono); font-size: clamp(3.5rem, 2rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--tomato); }
.tw-layer__missing-name { font-size: 1.25rem; font-weight: 680; color: var(--paper); font-variation-settings: "wdth" 88; }
.tw-layer__missing-note { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-on-ink); }

/* Viewfinder crop marks */
.tw-clip__mark { position: absolute; z-index: 4; width: 14px; height: 14px; border: 0 solid color-mix(in srgb, var(--paper) 55%, transparent); pointer-events: none; transition: opacity 200ms var(--ease); }
.tw-clip__mark--tl { left: -9px; top: -9px; border-left-width: 1.5px; border-top-width: 1.5px; }
.tw-clip__mark--tr { right: -9px; top: -9px; border-right-width: 1.5px; border-top-width: 1.5px; }
.tw-clip__mark--bl { left: -9px; bottom: -9px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.tw-clip__mark--br { right: -9px; bottom: -9px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.tw-stage.is-full .tw-clip__mark { opacity: 0; }

.tw-clip__full { position: absolute; inset: 0; z-index: 6; border-radius: inherit; overflow: hidden; }
.tw-clip__full .player { width: 100%; height: 100%; border-radius: inherit; }
.tw-clip__full .player__stage { height: 100%; }

.tw-stage__chrome--bottom { min-height: 44px; }
.tw-ctrl {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.tw-ctrl:hover { background: var(--ink-3); border-color: var(--muted-on-ink); }
.tw-ctrl .icon { width: 16px; height: 16px; }
.tw-stage__watch { margin-left: auto; }
.tw-stage__watch .icon { width: 14px; height: 14px; }
.tw-stage__watch-dur { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .02em; padding-left: 10px; margin-left: 2px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

/* Panels: stacked in one cell so the tallest reserves the height (no jump between concepts) */
.tw-panels { display: grid; margin-top: 32px; }
.tw-panel {
  grid-area: 1 / 1; min-width: 0; display: grid; gap: 22px; align-content: start;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
}
.tw-panel.is-active {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 220ms var(--ease-out) 60ms, transform 220ms var(--ease-out) 60ms, visibility 0s;
}
.tw-panel__kicker { display: inline-flex; align-items: center; gap: 10px; }
.tw-panel__kn { color: var(--tomato); }
.tw-panel__q { margin-top: -8px; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; font-variation-settings: "wdth" 86; text-wrap: balance; max-width: 16em; }
.tw-panel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gutter); padding-top: 20px; border-top: 1px solid var(--line); }
.tw-panel__facts dd { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.tw-hook { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.tw-hook__quote { margin: 0; }
.tw-hook__quote p {
  position: relative; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 700; font-style: italic; line-height: 1.1;
  letter-spacing: -0.02em; font-variation-settings: "wdth" 84; color: var(--paper); text-wrap: balance;
}
.tw-hook__quote p::before { content: "\201C"; color: var(--tomato); margin-right: .04em; }
.tw-hook__quote p::after { content: "\201D"; color: var(--tomato); margin-left: .04em; }
.tw-panel__changed { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.tw-panel__changed-text { font-size: var(--t-lead); line-height: 1.45; color: var(--fg); text-wrap: pretty; max-width: 30em; }

/* Inside the idea (disclosure) */
.tw-idea { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tw-idea__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 0; margin: 0;
  border: 0; background: transparent; color: var(--fg); text-align: left; font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.005em;
}
.tw-idea__btn:focus-visible { outline-offset: 2px; }
.tw-idea__sign { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.tw-idea__sign::before, .tw-idea__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; border-radius: 2px; transition: transform 200ms var(--ease); }
.tw-idea__sign::after { transform: rotate(90deg); }
.tw-idea__btn:hover .tw-idea__sign { background: var(--paper); color: var(--ink); }
.tw-idea__btn[aria-expanded="true"] .tw-idea__sign::after { transform: rotate(0deg); }
.tw-idea__hint { margin-left: auto; font-family: var(--mono); font-size: var(--t-meta); font-weight: 400; letter-spacing: .02em; color: var(--fg-2); white-space: nowrap; }
.tw-idea__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease); }
.tw-idea__panel > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 220ms; }
.tw-idea.is-open .tw-idea__panel { grid-template-rows: 1fr; }
.tw-idea.is-open .tw-idea__panel > div { visibility: visible; transition-delay: 0s; }
.tw-idea__inner { display: grid; gap: 16px; padding: 4px 0 22px; }

.tw-beats { display: flex; gap: 3px; height: 26px; }
.tw-beats__seg {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 7px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--paper) 9%, transparent); color: var(--muted-on-ink);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.tw-beats__seg { container-type: inline-size; }
.tw-beats__seg i { font-style: normal; overflow: hidden; text-overflow: clip; }
/* A beat too short for its label shows the bar alone (never a half-cut "Ho"); the script rows below carry every timestamp */
@container (max-width: 1.3em) { .tw-beats__seg i { visibility: hidden; } }
@container (max-width: 2.6em) { .tw-beats__seg.is-hook i { visibility: hidden; } }
.tw-beats__seg.is-hook { background: var(--tomato); color: var(--ink); font-weight: 500; }
.tw-script { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-family: var(--mono); font-size: .8125rem; line-height: 1.5; }
.tw-script__row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 14px; padding: 9px 0; border-top: 1px dashed var(--line); }
.tw-script__row:first-child { border-top: 0; }
.tw-script__t { color: var(--muted-on-ink); font-variant-numeric: tabular-nums; }
.tw-script__x { color: var(--paper); overflow-wrap: anywhere; }
.tw-script__row.is-hook .tw-script__t { color: var(--tomato); }

.tw__onward { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: -4px; }
.tw__onward-note { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .02em; color: var(--fg-2); }

/* ---- Desktop: stage ~7 columns left (sticky), selector + explanation ~5 columns right ---- */
@media (min-width: 1024px) {
  .tw__module {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    grid-template-rows: auto auto auto 1fr;
  }
  .tw-stage {
    grid-column: 1 / span 7; grid-row: 1 / -1; align-self: start; margin-top: 0;
    position: sticky; top: calc(var(--header-h) + 8px);
    height: clamp(560px, calc(100svh - 128px), 820px);
  }
  .tw-stage__screen { container-type: size; }
  .tw-clip { width: min(100cqw, calc(100cqh * var(--rw, 4) / var(--rh, 5))); }
  .tw-tabs__label, .tw-tabs, .tw-panels { grid-column: 8 / -1; margin-left: clamp(0px, 1.4vw, 24px); }
  .tw-tabs__label { grid-row: 1; margin-top: 0; }
  .tw-tabs { grid-row: 2; }
  .tw-panels { grid-row: 3; }
  /* Numerals and durations align to the column edges; the ring sits clear of the numeral */
  .tw-tab { padding: 16px 0; }
  .tw-tab:focus-visible { outline-offset: 6px; border-radius: 6px; }
}

/* ---- Tablet + mobile: controls first, selected media second, explanation third ---- */
@media (max-width: 1023px) {
  .tw__intro { grid-column: 1 / -1; }
  .tw-brief { grid-column: 1 / -1; margin-left: 0; margin-top: 12px; max-width: 46em; }
  .tw-tabs__label { margin-top: 4px; padding-bottom: 10px; }
  .tw-tabs__count { display: none; } /* three tabs in a row are self-evident; keeps the label on one line */
  .tw-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 0; }
  .tw-tab {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; align-content: start;
    min-height: 0; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; gap: 10px 8px;
  }
  .tw-tab:focus-visible { border-radius: 8px; outline-offset: 2px; }
  /* At 24px and below the numeral is normal-size text: full secondary colour (7:1) */
  .tw-tab__num { grid-column: 1; grid-row: 1; font-size: 1.5rem; color: var(--fg-2); }
  .tw-tab__dur { grid-column: 2; grid-row: 1; align-self: start; }
  .tw-tab__text { grid-column: 1 / -1; grid-row: 2; }
  .tw-tab__bar { bottom: 0; }
  .tw-tab[aria-selected="true"] { background: color-mix(in srgb, var(--paper) 6%, transparent); border-color: color-mix(in srgb, var(--paper) 22%, transparent); }
  .tw-stage { height: clamp(520px, 72svh, 720px); }
  .tw-stage__screen { container-type: size; }
  .tw-clip { width: min(100cqw, calc(100cqh * var(--rw, 4) / var(--rh, 5))); }
  .tw-panels { margin-top: 28px; }
  .tw-panel { max-width: 44em; }
}

@media (max-width: 767px) {
  .tw-brief { padding: 16px 16px 14px; gap: 8px; }
  .tw-brief__product { font-size: 1.1875rem; }
  .tw-brief__text { font-size: .9375rem; }
  .tw-tabs { gap: 6px; }
  .tw-tab { padding: 12px 10px 14px; gap: 8px 4px; }
  .tw-tab__num { font-size: 1.5rem; } /* stays 24px (large text): tomato on the raised selected tab is 4.3:1, which needs 3:1 at this size */
  .tw-tab__name { font-size: 1rem; line-height: 1.2; }
  .tw-tab__format, .tw-tab__dur { display: none; }
  .tw-stage { height: auto; margin-top: 12px; padding: 12px; gap: 12px; border-radius: 12px; }
  .tw-stage__screen { container-type: normal; padding: 8px; }
  .tw-clip { width: 100%; }
  .tw-clip__mark--tl, .tw-clip__mark--tr { top: -7px; } .tw-clip__mark--bl, .tw-clip__mark--br { bottom: -7px; }
  .tw-clip__mark--tl, .tw-clip__mark--bl { left: -7px; } .tw-clip__mark--tr, .tw-clip__mark--br { right: -7px; }
  .tw-stage__meta { display: none; }
  .tw-stage__watch-dur { display: none; }
  .tw-panel__facts { grid-template-columns: minmax(0, 1fr); }
  .tw-idea__hint { display: none; }
}
/* Narrow screens with enlarged text: the swipe phrase may wrap rather than push the page sideways (brief §12.2) */
@media (max-width: 479px) {
  .tw__swipe { white-space: normal; }
  .tw__intro, .tw__intro > * { min-width: 0; max-width: 100%; }
  .tw-stage__chrome--bottom { flex-wrap: wrap; row-gap: 10px; }
  .tw-stage__watch { white-space: normal; min-width: 0; max-width: 100%; text-align: left; line-height: 1.15; padding-block: 8px; }
}
/* Narrow phones: the preview toggle becomes a round icon button (its aria-label already names the action) */
@media (max-width: 400px) {
  .tw-ctrl[data-tw-toggle] { width: 44px; padding: 0; justify-content: center; }
  .tw-ctrl[data-tw-toggle] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  .tw-tab__name { font-size: .9375rem; }
  .tw-stage__watch { padding: 0 16px; }
}
/* Enlarged text (the module is under ~15em of its own text wide, e.g. 320px at 200%): three columns would clip the
   names, so the selector becomes stacked rows, numeral beside name (and script timestamps sit above their lines). Normal text at 320px stays at 17.5em, in columns. */
@container tw (max-width: 15em) {
  .tw-tabs { grid-template-columns: minmax(0, 1fr); }
  .tw-tab { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 12px; }
  .tw-tab__num, .tw-tab__text { grid-row: 1; }
  .tw-tab__text { grid-column: 2; }
  .tw-script__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } /* timestamp above its line */
}
/* Reduced motion: concept selection is an immediate swap without spatial motion (brief §11) */
@media (prefers-reduced-motion: reduce) {
  .tw-panel, .tw-panel.is-active { transform: none; transition: none; }
  .tw-layer, .tw-layer__poster, .tw-layer video, .tw-stage__ambient img, .tw-idea__panel, .tw-idea__panel > div { transition: none; }
}