@charset "UTF-8";

/* Warm black surfaces and original-color film imagery. */
:root {
  --paper: #101010;
  --ink: #ede9e1;
  --muted: #b0aba2;
  --line: #44413c;
  --soft: #1c1b19;
  --white: #ede9e1;
  --glass: #1b1a18eb;
  --edge: #44413c;
  --stage: #171614;
  --stage-ink: #ddd8cf;
  --metal: #242320;
  --shadow: none;
  --ease: cubic-bezier(.2,.7,.2,1);
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", "PingFang SC", monospace;
  --sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.85 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; min-height: 44px; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
img, video { display: block; max-width: 100%; filter: none; }
figure, p, h1, h2, h3, h4, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.25; }
main, section, article, figure, nav, div { min-width: 0; }
[hidden] { display: none !important; }
:where(a, button, summary, [tabindex], input):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
summary { min-height: 44px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.wrap { width: calc(100% - var(--gutter) * 2); max-width: var(--wrap); margin-inline: auto; }
.eyebrow { font: 11px/1.75 var(--mono); letter-spacing: .1em; color: var(--muted); }
.small-note { font-size: 12px; line-height: 1.8; color: var(--muted); }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; background: var(--white); transform: translateY(-160%); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font-size: 12px; text-decoration: underline; text-decoration-color: #8b929d; text-underline-offset: 6px; }
.text-link + .text-link { margin-left: 20px; }
.inline-links, .source-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.inline-links a, .source-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #949aa4; overflow-wrap: anywhere; }
.round-link { display: inline-flex; align-items: center; gap: 26px; margin-top: 30px; font-size: 12px; min-height: 48px; }
.circle { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #a6adb7; border-radius: 50%; background: var(--metal); box-shadow: inset 0 1px #fff; font-size: 21px; transition: transform .25s var(--ease), border-color .25s; }
.round-link:hover .circle { transform: translate(2px,-2px); border-color: #586372; }

/* Navigation */
.site-header { width: calc(100% - var(--gutter) * 2); max-width: var(--wrap); height: 100px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 30; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-size: 26px; letter-spacing: -3px; }
.wordmark span { padding: 0 5px; }
.lang { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; font-size: 11px; letter-spacing: .08em; }
.glass-nav { position: fixed; top: 23px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; max-width: calc(100vw - 170px); padding: 5px; border: 1px solid var(--edge); border-radius: 32px; background: var(--glass); box-shadow: 0 8px 25px #24334b10, inset 0 1px #fff, inset 0 -1px #afb6c055; }
.glass-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; border-radius: 25px; font-size: 12px; white-space: nowrap; transition: background .22s, color .22s; }
.glass-nav a:hover { background: #ffffffb8; }
.glass-nav a.active, .glass-nav a[aria-current="location"] { color: #f3f4f6; background: #303641; }

/* Natural portrait follows a separate, credited opening film. */
.hero { padding-top: 82px; }
.hero-top, .hero-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); }
.hero-top { padding-top: 16px; font: 10px/1.8 var(--mono); letter-spacing: .12em; color: var(--muted); }
.hero-layout { position: relative; isolation: isolate; display: flex; align-items: center; aspect-ratio: 1672 / 941; min-height: 0; padding: 52px 0 64px; }
.hero-copy { position: relative; z-index: 2; width: 45%; padding: 0 0 0 32px; }
.hero-copy .eyebrow { margin-bottom: 28px; font-size: 10px; letter-spacing: .09em; }
.hero h1 { font-size: clamp(48px, 5.2vw, 79px); font-weight: 400; line-height: 1.16; letter-spacing: -.055em; }
.period { margin-left: -.1em; }
.intro { max-width: 365px; margin-top: 30px; color: #535b66; font-size: 13px; line-height: 2; }
.portrait { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; z-index: 1; background: transparent; border: 0; }
.portrait img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; filter: none; opacity: .8; transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0) scale(1.015); transform-origin: center; transition: transform .55s var(--ease); }
.portrait figcaption { display: none; }
.hero-signature { position: absolute; z-index: 3; bottom: 18px; right: 3%; width: auto; text-align: right; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: .15em; white-space: nowrap; color: #65707c; pointer-events: none; }
.hero-signature span { color: inherit; }
.hero-bottom { padding: 20px 0; color: var(--muted); font-size: 11px; }
.hero-bottom > span { overflow-wrap: anywhere; }

/* Section rhythm */
.section-heading { margin-bottom: 42px; max-width: 920px; }
.section-heading .eyebrow, .case-heading .eyebrow { margin-bottom: 18px; }
.section-heading h2 { font-size: clamp(36px, 4.5vw, 64px); letter-spacing: -.045em; line-height: 1.25; }
.section-heading > p:last-child:not(.eyebrow) { margin-top: 18px; max-width: 750px; color: var(--muted); font-size: 14px; }
.case-section, .ads-section, .about-section { padding: 102px 0; border-top: 1px solid #b8bec7; }
.case-section { background: #d6d7d5; }
.ads-section { background: #d9dad8; }
.about-section { background: #d0d2cf; }
.films, .growth, .work { padding-block: 104px; }
.case-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; margin-bottom: 44px; }
.case-heading h2 { font-size: clamp(49px, 6vw, 88px); font-weight: 400; letter-spacing: -.065em; }
.case-lead { max-width: 440px; font-size: 15px; line-height: 1.9; color: var(--muted); }
.serif { font-family: Georgia, serif; }

/* Figma and Shopify page study */
.biora-layout { display: grid; grid-template-columns: .72fr 1.5fr; gap: 64px; align-items: start; }
.biora-description > p { color: #535c67; font-size: 13px; line-height: 2; margin-bottom: 18px; }
.page-tabs { margin: 30px 0 22px; border-bottom: 1px solid var(--line); }
.page-tabs button { display: flex; align-items: center; gap: 22px; width: 100%; padding: 16px 12px; border-top: 1px solid var(--line); background: transparent; text-align: left; color: var(--muted); font-size: 10px; transition: color .2s, background .2s; }
.page-tabs button span { flex: 1; font-size: 15px; }
.page-tabs button:hover { background: #ffffff45; }
.page-tabs button[aria-selected="true"] { background: #343c49; color: #f0f2f5; }
.biora-preview { border-radius: 8px; }
.browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 45px; padding: 8px 16px; border: 1px solid var(--edge); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--metal); color: #535d6b; font: 10px/1.5 var(--mono); }
.browser-bar > span:first-child { font-size: 7px; letter-spacing: 4px; color: #8a929e; white-space: nowrap; }
.browser-bar a { display: flex; align-items: center; min-height: 44px; font-size: 10px; text-align: right; }
.browser-scroll { height: 525px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8e98a5 #dce0e5; background: #f7f7f5; border: 1px solid #bac0ca; box-shadow: 0 16px 40px #28364a0d; }
.browser-scroll img { width: 100%; height: auto; }
.page-scene { width: 100%; height: 525px; object-fit: cover; border: 1px solid #bac0ca; }
.live-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border: 1px solid #bac0ca; border-bottom: 0; background: #e9ecf0; }
.live-preview-tools button { min-height: 44px; padding: 7px 13px; border: 1px solid #b8c0cb; border-radius: 5px; background: transparent; font: 10px/1.6 var(--mono); }
.live-preview-tools button[aria-pressed="true"] { background: #343c49; border-color: #343c49; color: #f0f2f5; }
.live-preview-tools a { margin-left: auto; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.case-live-window { position: relative; width: 100%; height: 565px; overflow: hidden; border: 1px solid #bac0ca; background: #cbd0d7; }
.case-live-frame { position: absolute; top: 0; left: 0; display: block; max-width: none; border: 0; background: #fff; transform-origin: top left; }
.preview-note { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.preview-note span { display: block; margin-top: 5px; font: 10px/1.8 var(--mono); color: #6a737f; }
.design-notes { display: grid; grid-template-columns: .72fr 1.5fr; gap: 64px; margin-top: 66px; padding-top: 36px; border-top: 1px solid var(--line); }
.note-intro h3 { margin-top: 18px; font-size: 27px; line-height: 1.5; letter-spacing: -.025em; }
.notes-list details { border-bottom: 1px solid var(--line); }
.notes-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; font-size: 14px; line-height: 1.7; }
.notes-list summary span { font-size: 20px; font-weight: 300; transition: transform .22s; }
.notes-list details[open] summary span { transform: rotate(45deg); }
.notes-list details p { padding: 0 36px 24px 0; color: var(--muted); font-size: 13px; line-height: 1.95; }

/* Interactive methods: the rail and its selected detail share one surface. */
.skill-lab { margin-top: 72px; }
.lab-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 28px; }
.lab-heading h2, .lab-heading h3 { margin-top: 13px; font-size: clamp(25px, 2.6vw, 36px); letter-spacing: -.035em; }
.lab-heading > p, .lab-heading > div > p:not(.eyebrow) { max-width: 520px; font-size: 13px; color: var(--muted); }
.method-flow { margin: 28px 0 0; }
.flow-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--edge); border-bottom-color: #bfc6d0; border-radius: 10px 10px 0 0; background: #e9edf1b8; box-shadow: var(--shadow); }
.flow-node { position: relative; min-height: 100px; padding: 16px 22px 14px 12px; border: 1px solid #bbc3cf; border-radius: 5px; background: #f2f4f68f; text-align: left; color: #4b5665; transition: background .22s, color .22s, border-color .22s; }
.flow-node small { display: block; font: 10px/1.7 var(--mono); margin-bottom: 8px; color: #6a7584; }
.flow-node > span { display: block; font-size: 13px; line-height: 1.6; }
.flow-node strong, .flow-node b { display: block; font-size: 13px; line-height: 1.6; font-weight: 500; }
.flow-node:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 13px; right: -11px; width: 15px; color: #5b687a; font: 15px/1.4 var(--mono); }
.flow-node:last-child::after { content: "↲"; position: absolute; top: 13px; right: 10px; color: #6b7786; }
.flow-node:hover { background: #fff; border-color: #8f9aa9; }
.flow-node[aria-selected="true"] { color: #f0f3f8; border-color: #343e4d; background: #343e4d; box-shadow: inset 0 1px 0 #6a7789; }
.flow-node[aria-selected="true"] small { color: #c6d0dd; }
.flow-detail { padding: 32px; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 10px 10px; background: #edf0f3c9; box-shadow: 0 15px 30px #27334608; }
.flow-detail h3 { max-width: 860px; font-size: 24px; line-height: 1.5; letter-spacing: -.025em; margin-bottom: 24px; }
.flow-detail > p { max-width: 900px; font-size: 13px; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 32px; }
.detail-grid:has(> dl:nth-child(4)) { grid-template-columns: repeat(4,minmax(0,1fr)); }
.detail-grid dl { padding-top: 16px; border-top: 1px solid #bac2ce; }
.detail-grid dt { margin-bottom: 9px; color: #526073; font: 10px/1.8 var(--mono); letter-spacing: .06em; }
.detail-grid dd { color: #333e4d; font-size: 13px; line-height: 1.95; overflow-wrap: anywhere; }
.detail-grid dd code { padding: 2px 4px; background: #ccd3dc; font: 11px/1.7 var(--mono); }

/* Code is a working surface, not a decorative background. */
.code-lab { margin-top: 30px; border: 1px solid #4a5260; border-radius: 8px; background: var(--stage); color: var(--stage-ink); overflow: hidden; }
.code-tabs { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 1px solid #424955; background: #222730; scrollbar-width: thin; scrollbar-color: #748091 #222730; }
.code-tabs button { flex: 0 0 auto; padding: 12px 20px; border-right: 1px solid #3e4653; background: transparent; color: #b5c0d0; font: 11px/1.6 var(--mono); text-align: left; }
.code-tabs button[aria-selected="true"] { background: #353e4b; color: #fff; box-shadow: inset 0 -2px #bcc9da; }
.code-panel { min-width: 0; }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 20px; border-bottom: 1px solid #333c49; color: #aab6c7; font: 10px/1.7 var(--mono); }
.code-toolbar > span, .code-toolbar > p { overflow-wrap: anywhere; }
.copy-code { flex: 0 0 auto; min-height: 44px; padding: 8px 13px; border: 1px solid #5b6779; border-radius: 4px; background: #2a333f; color: #ecf1f7; font: 11px/1.5 var(--mono); }
.copy-code:hover { background: #3b4758; border-color: #9eacbf; }
.code-panel pre, .code-lab pre { max-width: 100%; margin: 0; padding: 25px 28px 30px; overflow: auto; overscroll-behavior: contain; tab-size: 2; color: #dce5f1; font: 12px/1.85 var(--mono); scrollbar-width: thin; scrollbar-color: #627083 #202731; }
.code-panel code, .code-lab pre code { font: inherit; }
.code-comment, .token.comment { color: #9baabe; }
.code-key, .token.keyword { color: #d8e5f7; }
.code-string, .token.string { color: #c2dbd5; }
.code-lab a, .code-lab button { --focus: #e2ecf9; }
.code-lab :focus-visible { outline-color: #dce8fa; outline-offset: -4px; }
.code-lab .method-note { margin: 0; padding: 20px 28px; border-top: 1px solid #3e4857; border-bottom: 0; color: #b9c4d3; font-size: 12px; }
.repo-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin-top: 25px; }
.repo-links a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100px; padding: 20px 0; border-bottom: 1px solid #aeb8c6; transition: border-color .22s; }
.repo-links a:hover { border-color: #293b55; }
.repo-links strong, .repo-links b { font-size: 13px; font-weight: 500; }
.repo-links span, .repo-links small { margin-top: 8px; font: 11px/1.8 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

/* Film screening room */
.screening-room { display: grid; grid-template-columns: 1.8fr 1fr; gap: 35px; align-items: start; margin-top: 35px; }
.screen-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; max-height: 730px; overflow: hidden; border: 1px solid #4b535e; border-radius: 8px; background: #111316; box-shadow: 0 16px 42px #26354a12; color: #f2f4f7; }
.screen-stage video { width: 100%; height: 100%; max-height: 730px; object-fit: contain; background: #111316; }
.screen-stage > img { width: 100%; height: 100%; object-fit: contain; }
.screen-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: 182px; min-height: 64px; padding: 14px 25px; border-radius: 40px; border: 1px solid #ffffffb0; background: #252b3699; color: #fff; font: 11px/1.5 var(--mono); letter-spacing: .06em; white-space: nowrap; box-shadow: 0 5px 25px #0003; }
.screen-play > span { font-size: 17px; }
.screen-play:hover { background: #465265d9; }
.screen-stage.is-playing .screen-play { display: none; }
.screen-controls { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; color: #455368; font-size: 11px; }
.screen-controls button, .screen-controls a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #a6b1c0; border-radius: 5px; background: #e8edf3; color: #455368; }
.screen-controls button:disabled { color: #8793a2; border-color: #bbc3ce; background: transparent; }
.screen-stage .screen-controls { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.screen-stage .screen-controls button, .screen-stage .screen-controls a { color: #f4f5f7; border-color: #ffffff50; background: #202630c9; }
.screen-info { display: block; padding: 0; }
.screen-info > h3 { margin-top: 15px; }
.screen-info > #film-description { margin-top: 20px; }
.screen-info > .screen-notes { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.screen-info > .screen-controls { margin-top: 22px; }
.screen-info > .eyebrow { grid-area: position; }
.screen-info > h3 { grid-area: title; }
.screen-info > .screen-meta { grid-area: meta; }
.screen-info > #film-description { grid-area: description; }
.screen-info > .screen-notes { grid-area: notes; }
.screen-info > .screen-controls { grid-area: controls; margin-top: 12px; }
.screen-info > [role="status"] { grid-area: status; }
.screen-info h3 { font-size: 26px; letter-spacing: -.035em; }
.screen-info p { font-size: 13px; color: var(--muted); line-height: 1.95; }
.screen-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #627084; font: 10px/1.8 var(--mono); margin: 10px 0 0; }
.screen-notes { color: var(--muted); font-size: 13px; line-height: 1.95; }
.screen-notes p + p { margin-top: 12px; }
.film-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 12px; padding: 15px 0 5px; border-top: 1px solid var(--line); }
.film-select { display: block; padding: 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: left; transition: background .22s, border-color .22s; }
.film-select img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 2px; }
.film-select label, .film-select > span { display: block; padding: 10px 4px 5px; color: #4e5c6e; font-size: 11px; line-height: 1.6; cursor: inherit; }
.film-select small { display: block; font: 9px/1.7 var(--mono); color: #687487; margin-top: 4px; }
.film-select:hover { background: #edf0f4a6; }
.film-select[aria-selected="true"], .film-select[aria-pressed="true"], .film-select.active { background: #f0f3f7b8; border-color: #7d8b9f; box-shadow: inset 0 1px #fff; }
.film-notes { display: block; margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line); }
.film-notes h3 { font-size: 22px; line-height: 1.6; }
.film-notes p { color: var(--muted); font-size: 13px; line-height: 1.95; }
.film-notes .inline-links { margin-top: 20px; }

/* Channel and platform choices */
.channel-tabs, .platform-tabs, .phase-tabs { display: flex; width: fit-content; max-width: 100%; gap: 4px; margin: 30px 0; padding: 5px; border: 1px solid var(--edge); border-radius: 8px; background: #edf1f5a6; box-shadow: var(--shadow); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.channel-tabs button, .platform-tabs button, .phase-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 23px; border-radius: 4px; background: transparent; color: #566173; font-size: 12px; transition: background .22s, color .22s; }
.channel-tabs button:hover, .platform-tabs button:hover, .phase-tabs button:hover { background: #fff9; }
.channel-tabs button[aria-selected="true"], .platform-tabs button[aria-selected="true"], .phase-tabs button[aria-selected="true"] { background: #343e4d; color: #edf2f8; box-shadow: inset 0 1px #667486; }
.channel-panel { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; min-height: 220px; padding-top: 8px; }
.channel-panel h3 { font-size: 29px; line-height: 1.5; letter-spacing: -.03em; }
.channel-panel p { color: var(--muted); font-size: 13px; line-height: 2; margin-bottom: 17px; }
.channel-panel .small-note { display: block; margin-top: 12px; }
.platform-panel { padding: 30px; border: 1px solid var(--edge); border-radius: 8px; background: #edf0f3b8; box-shadow: var(--shadow); }
.platform-panel h3 { font-size: 23px; margin-bottom: 18px; }
.platform-panel > p { font-size: 13px; color: var(--muted); margin-bottom: 20px; max-width: 900px; }
.table-scroll { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8e99a9 #dce1e8; border: 1px solid #aeb9c8; border-radius: 5px; }
.channel-matrix, .ledger-table, .channel-matrix table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; line-height: 1.8; }
.table-scroll table { min-width: 650px; }
.channel-matrix th, .ledger-table th { font-size: 10px; letter-spacing: .03em; font-weight: 500; color: #47566b; background: #d9e0e9; }
.channel-matrix th, .channel-matrix td, .ledger-table th, .ledger-table td { padding: 15px 18px; border-bottom: 1px solid #b7c1ce; vertical-align: top; overflow-wrap: anywhere; }
.channel-matrix td, .ledger-table td { background: #f1f3f670; color: #455265; }
.channel-matrix tr:last-child td, .ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table code { font: 11px/1.75 var(--mono); color: #455368; }
.ledger-table a { text-decoration: underline; text-underline-offset: 4px; }

/* Existing Meta loop interface */
.ad-loop { margin-top: 32px; padding-top: 35px; border-top: 1px solid var(--line); }
.loop-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.loop-heading h3 { font-size: 26px; }
.loop-heading p { color: var(--muted); font-size: 12px; }
.loop-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 8px; border: 1px solid var(--edge); border-radius: 8px 8px 0 0; background: #edf1f5a6; }
.loop-steps button { position: relative; min-height: 100px; padding: 16px 18px 14px 12px; border: 1px solid #bac4d1; border-radius: 4px; background: #ffffff45; text-align: left; color: #536176; }
.loop-steps button > span { display: block; font: 10px/1.6 var(--mono); margin-bottom: 8px; }
.loop-steps button > strong { font-size: 13px; font-weight: 500; line-height: 1.6; }
.loop-steps button::after { content: "→"; position: absolute; right: 8px; top: 13px; font-size: 14px; }
.loop-steps button:last-child::after { content: "↲"; }
.loop-steps button[aria-selected="true"] { color: #edf2f8; background: #343e4d; border-color: #343e4d; }
.loop-detail { display: grid; grid-template-columns: 1fr 1.65fr; gap: 40px; padding: 30px; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 8px 8px; background: #edf1f5b8; }
.loop-detail h4 { font-size: 23px; line-height: 1.5; }
.loop-detail p { font-size: 13px; color: #536176; line-height: 2; }
.loop-detail .small-note { display: block; margin-top: 12px; }
.loop-return { position: relative; height: 19px; margin: 0 8.2%; border-bottom: 1px solid #8d9bad; border-left: 1px solid #8d9bad; }
.loop-return::before { content: "↑"; position: absolute; top: -12px; left: -5px; color: #536176; }
.loop-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.loop-foot a { display: flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }

/* GEO data, operating diagrams and handoffs */
.data-map { margin-top: 32px; border-top: 1px solid var(--line); }
.data-map > h3 { font-size: 23px; margin: 28px 0 20px; }
.signal-row { display: grid; grid-template-columns: .65fr 1.3fr 1.3fr; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.signal-row:has(> span:last-child:nth-child(2)) { grid-template-columns: .7fr 2fr; }
.signal-row > strong, .signal-row > h4 { font-size: 13px; font-weight: 500; }
.signal-row p, .signal-row span { color: var(--muted); font-size: 12px; line-height: 1.9; }
.signal-row code { font: 11px/1.8 var(--mono); overflow-wrap: anywhere; }
.method-note { padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.95; }
.method-note h3, .method-note h4 { color: var(--ink); font-size: 18px; margin-bottom: 12px; }
.method-note .source-links { margin-top: 8px; }
.system-map { margin: 32px 0; padding: 25px 30px; border: 1px solid #aeb9c8; border-radius: 8px; background: #e9edf2b8; box-shadow: inset 0 1px #fff; color: #3b4b61; font-family: var(--mono); }
.system-map > h3, .system-map > h4 { font: 12px/1.8 var(--mono); margin-bottom: 18px; letter-spacing: .05em; }
.system-lane { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 23px; padding: 18px 0; border-top: 1px solid #b8c3d1; font-size: 11px; line-height: 1.8; }
.system-lane > span { position: relative; }
.system-lane > span:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); color: #5b687a; }
.system-lane > strong, .system-lane > b, .system-lane > .lane-label { flex: 0 0 110px; font-weight: 500; color: #526680; }
.system-lane > span:not(.lane-label), .system-lane .system-step { padding: 9px 12px; border: 1px solid #a4b2c4; border-radius: 4px; background: #f4f6f9a6; overflow-wrap: anywhere; }
.system-lane > i, .system-lane > em { font-style: normal; color: #7b8ca3; }
.operating-plan { margin-top: 45px; }
.operating-plan > h3 { font-size: 27px; }
.operating-plan > p { margin-top: 15px; color: var(--muted); font-size: 13px; }
.disclosure { display: block; margin-top: 21px; padding-left: 15px; border-left: 2px solid #97a5b8; color: #5d6a7d; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.geo-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 84px; padding-top: 15px; }
.geo-layout > div > h3 { font-size: 27px; line-height: 1.5; margin: 18px 0; }
.geo-layout > div > p:not(.eyebrow) { font-size: 13px; color: var(--muted); line-height: 2; }
.geo-layout .text-link { margin-top: 15px; }
.geo-steps details { border-top: 1px solid var(--line); }
.geo-steps details:last-child { border-bottom: 1px solid var(--line); }
.geo-steps summary { display: flex; align-items: center; gap: 22px; padding: 20px 0; font-size: 14px; }
.geo-steps summary span { font: 10px/1.7 var(--mono); color: #66748a; }
.geo-steps summary i { margin-left: auto; font-style: normal; font-size: 18px; transition: transform .2s; }
.geo-steps details[open] summary i { transform: rotate(45deg); }
.geo-steps details p { padding: 0 24px 23px 37px; font-size: 13px; color: var(--muted); line-height: 1.95; }
.us-growth { display: grid; grid-template-columns: .55fr 1.5fr .75fr; gap: 38px; margin-top: 76px; padding-top: 38px; border-top: 1px solid var(--line); }
.us-growth h3 { font-size: 26px; line-height: 1.5; margin-bottom: 22px; }
.us-growth p:not(.eyebrow) { font-size: 13px; line-height: 2; color: var(--muted); margin-bottom: 15px; }
.us-questions { display: flex; flex-direction: column; padding-top: 5px; gap: 10px; }
.us-questions span { padding: 14px 10px; border: 1px solid #afbaca; border-radius: 4px; background: #edf1f56b; font-size: 11px; text-align: center; }
.commerce { display: grid; grid-template-columns: 1fr 1.55fr; gap: 70px; margin-top: 65px; padding-top: 38px; border-top: 1px solid var(--line); }
.commerce h3 { font-size: 29px; line-height: 1.5; margin-top: 18px; }
.commerce p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 2; margin-bottom: 18px; }

/* About and footer */
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; }
.about-layout h2 { font-size: clamp(32px,3.4vw,48px); letter-spacing: -.045em; margin-top: 22px; }
.about-layout > div > p:not(.eyebrow) { max-width: 510px; font-size: 13px; line-height: 2; color: #515e70; margin-bottom: 19px; }
.about-layout > div > p.about-intro { font-size: 21px; color: #283549; }
.about-layout .round-link { margin-top: 7px; }
.code-shelf { display: grid; grid-template-columns: 1fr 2fr; gap: 55px; margin-top: 62px; padding-top: 30px; border-top: 1px solid #aab6c6; }
.code-shelf > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; }
.code-shelf a { display: block; min-height: 70px; padding: 15px 0; border-bottom: 1px solid #b0bccb; font-size: 12px; }
.code-shelf a span { display: block; margin-top: 5px; color: #59697f; font: 10px/1.7 var(--mono); overflow-wrap: anywhere; }
.code-shelf a:hover { border-color: #435773; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 26px; color: #5c697d; font-size: 11px; }
footer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
footer > a { color: #31435e; font-size: 12px; }

/* Modal keeps the media dark; the page around it stays silver. */
.media-dialog { width: min(1120px,94vw); max-height: 92dvh; padding: 22px; border: 1px solid #687385; border-radius: 9px; color: #eceff4; background: #202732f5; box-shadow: 0 30px 100px #17223855; overflow: auto; }
.media-dialog::backdrop { background: #667180a6; }
.dialog-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; padding-bottom: 18px; }
.dialog-top h2 { font-size: 19px; }
.dialog-top p { color: #bdc8d9; font-size: 11px; margin-top: 7px; }
.close-dialog { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #8794a7; border-radius: 50%; font-size: 26px; line-height: 1; background: #344053; color: #f0f4fa; }
.media-dialog video { width: 100%; max-height: 70dvh; background: #11151b; }
.media-dialog .dialog-image { width: auto; max-height: 70dvh; margin: auto; object-fit: contain; }
.media-direct { display: inline-flex; align-items: center; min-height: 44px; margin-top: 5px; color: #c5d0df; font-size: 11px; text-decoration: underline; text-underline-offset: 5px; }
.media-dialog :focus-visible { outline-color: #e0eafa; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Compatibility for the previous selected-work markup. */
.work-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.work-card { position: relative; display: block; padding: 0; min-height: 270px; overflow: hidden; background: #bdc6d2; text-align: left; color: #fff; }
.work-card-large { grid-row: span 2; min-height: 560px; }
.work-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-caption { position: absolute; inset: auto 0 0; padding: 26px; background: linear-gradient(transparent,#111920ba); }
.work-caption > span { font: 10px/1.8 var(--mono); }
.work-caption h3 { margin: 10px 0 6px; font-size: 26px; }
.work-caption p { font-size: 11px; }
.work-caption i { position: absolute; right: 22px; bottom: 25px; font-size: 19px; font-style: normal; }
.work-card-loop { background: var(--metal); color: var(--ink); }
.work-card-loop .work-caption { background: none; }
.loop-mark { position: absolute; top: 20px; right: 45px; font-size: 90px; color: #64748b; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0; }
.filters button { padding: 10px 18px; border: 1px solid #aeb9c8; border-radius: 24px; background: transparent; font-size: 12px; }
.filters button[aria-pressed="true"] { background: #343e4d; color: #edf2f8; border-color: #343e4d; }
.film-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 24px; }
.film-image { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16/10; overflow: hidden; background: #bcc6d3; }
.film-image img { width: 100%; height: 100%; object-fit: cover; }
.film.vertical .film-image { aspect-ratio: 4/5; }
.play { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #fff9; border-radius: 50%; background: #1d293b7d; color: #fff; }
.duration { position: absolute; bottom: 12px; left: 13px; padding: 2px 7px; background: #1d293bba; color: #fff; font: 10px/1.6 var(--mono); }
.film-caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 16px; }
.film-caption h3 { font-size: 14px; line-height: 1.6; }
.film-caption > span { color: var(--muted); font-size: 10px; }
.film > p { color: var(--muted); font-size: 12px; line-height: 1.95; margin-top: 9px; }

/* Quiet dark glass; no highlight or color saturation. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-nav, .flow-tabs, .channel-tabs, .platform-tabs, .phase-tabs {
    background-color: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .screen-play, .screen-stage .screen-controls button, .screen-stage .screen-controls a { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
  .media-dialog::backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-nav, .flow-tabs, .channel-tabs, .platform-tabs, .phase-tabs { background: var(--soft); }
  .flow-detail, .platform-panel { background: var(--soft); }
  .screen-play, .screen-stage .screen-controls button, .screen-stage .screen-controls a { background: var(--stage); }
}

/* Tablet */
@media (max-width: 1100px) {
  .hero-layout { padding-block: 44px 56px; }
  .hero h1 { font-size: clamp(44px,5.2vw,63px); }
  .hero-copy { width: 45%; }
  .hero-copy .eyebrow { font-size: 9px; }
  .intro { max-width: 320px; }
  .biora-layout, .design-notes { gap: 35px; grid-template-columns: .85fr 1.4fr; }
  .browser-scroll, .page-scene { height: 440px; }
  .detail-grid:has(> dl:nth-child(4)) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-node { padding-left: 10px; padding-right: 18px; }
  .flow-node strong, .flow-node b { font-size: 12px; }
  .channel-panel, .geo-layout, .commerce { gap: 40px; }
  .us-growth { grid-template-columns: .5fr 1.4fr .75fr; gap: 26px; }
  .film-strip { gap: 7px; }
  .film-select label, .film-select > span { font-size: 10px; }
  .screen-info { grid-template-columns: 1fr 1.3fr; }
}

@media (max-width: 900px) {
  .film-strip { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 14px 0 10px; scrollbar-width: thin; scrollbar-color: #8391a5 #dce3ed; }
  .film-select { flex: 0 0 150px; scroll-snap-align: start; }
  .film-select label, .film-select > span { font-size: 11px; }
}

/* Mobile: rails and tables scroll within their own containers. */
@media (max-width: 760px) {
  .screening-room { grid-template-columns: 1fr; gap: 23px; }
  .signal-row:has(> span:last-child:nth-child(2)) { grid-template-columns: 1fr; }
  :root { --gutter: 20px; }
  html { scroll-padding-top: 92px; }
  body { font-size: 14px; }
  .site-header { height: 124px; align-items: flex-start; padding-top: 10px; }
  .wordmark { font-size: 23px; }
  .glass-nav { top: 62px; max-width: calc(100vw - 24px); width: max-content; padding: 4px; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .glass-nav a { min-height: 44px; padding: 6px 13px; font-size: 11px; }
  .lang { min-height: 44px; font-size: 10px; }
  .hero-top { font-size: 8px; letter-spacing: .07em; padding-top: 13px; gap: 12px; }
  .hero-top > span:last-child { text-align: right; }
  .hero-layout { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; padding: 30px 0 0; }
  .portrait { position: relative; inset: auto; order: 0; width: 100%; max-width: none; height: auto; aspect-ratio: 1672 / 941; margin: 0; }
  .hero-signature { position: relative; inset: auto; order: 0; width: 100%; margin: 12px 0 0; padding: 0 0 22px; font-size: 10px; letter-spacing: .15em; line-height: 1; }
  .hero-copy { width: 100%; padding: 0 0 24px; }
  .hero-copy .eyebrow { font-size: 9px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(39px,10.4vw,63px); line-height: 1.2; }
  .intro { font-size: 13px; max-width: 500px; margin-top: 23px; line-height: 1.95; }
  .intro br { display: none; }
  .round-link { margin-top: 23px; gap: 21px; }
  .hero-bottom { font-size: 10px; gap: 18px; padding: 17px 0; }
  .hero-bottom > span:last-child { font-size: 0; }
  .hero-bottom > span:last-child::after { content: "↓"; font-size: 15px; }
  .case-section, .ads-section, .about-section { padding-block: 65px; }
  .films, .growth, .work { padding-block: 66px; }
  .section-heading { margin-bottom: 29px; }
  .section-heading h2 { font-size: clamp(29px,7.8vw,41px); }
  .section-heading .eyebrow, .case-heading .eyebrow { font-size: 10px; margin-bottom: 16px; }
  .section-heading > p:last-child:not(.eyebrow) { font-size: 13px; margin-top: 15px; }
  .case-heading { display: block; margin-bottom: 28px; }
  .case-heading h2 { font-size: clamp(46px,13vw,72px); }
  .case-lead { font-size: 13px; margin-top: 20px; }
  .case-lead br { display: none; }
  .biora-layout, .design-notes { grid-template-columns: 1fr; gap: 25px; }
  .biora-description > p { font-size: 13px; }
  .page-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 23px 0 15px; border-bottom: 0; }
  .page-tabs button { display: block; padding: 12px 6px; border-block: 1px solid var(--line); font-size: 0; line-height: 1.6; text-align: center; }
  .page-tabs button span { font-size: 12px; }
  .browser-bar { gap: 8px; padding-inline: 10px; font-size: 8px; }
  .browser-bar a { min-height: 44px; font-size: 9px; }
  .browser-scroll, .page-scene { height: 385px; }
  .case-live-window { height: 480px; }
  .preview-note { font-size: 11px; }
  .preview-note span { font-size: 9px; }
  .design-notes { margin-top: 42px; padding-top: 28px; }
  .note-intro h3 { margin-top: 14px; font-size: 25px; }
  .note-intro h3 br { display: none; }
  .notes-list summary { font-size: 13px; padding-block: 18px; }
  .notes-list details p { font-size: 12px; padding-right: 10px; }
  .skill-lab { margin-top: 46px; }
  .lab-heading { display: block; margin-bottom: 23px; }
  .lab-heading h2, .lab-heading h3 { font-size: 27px; margin-top: 12px; }
  .lab-heading > p, .lab-heading > div > p:not(.eyebrow) { margin-top: 15px; font-size: 12px; }
  .flow-tabs { display: flex; gap: 9px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #8391a5 #dce3ed; padding: 8px 8px 12px; }
  .flow-node { flex: 0 0 145px; min-height: 95px; padding: 14px 23px 14px 12px; scroll-snap-align: start; }
  .flow-node strong, .flow-node b { font-size: 12px; }
  .flow-detail { padding: 24px 20px; }
  .flow-detail h3 { font-size: 22px; margin-bottom: 21px; }
  .detail-grid, .detail-grid:has(> dl:nth-child(4)) { grid-template-columns: 1fr; gap: 19px; }
  .detail-grid dd { font-size: 12px; }
  .code-tabs button { font-size: 10px; padding-inline: 15px; }
  .code-toolbar { padding: 10px 13px; gap: 10px; font-size: 9px; }
  .copy-code { font-size: 10px; padding-inline: 10px; }
  .code-panel pre, .code-lab pre { padding: 19px 18px 24px; font-size: 11px; }
  .repo-links { grid-template-columns: 1fr; gap: 0; margin-top: 17px; }
  .repo-links a { min-height: 85px; padding-block: 17px; }
  .screening-room { margin-top: 24px; }
  .screen-stage { aspect-ratio: 4/3; border-radius: 6px; }
  .screen-stage video { width: 100%; height: 100%; }
  .screen-play { min-width: 162px; min-height: 58px; gap: 12px; padding-inline: 20px; font-size: 10px; }
  .screen-controls { gap: 8px; }
  .screen-stage .screen-controls { inset: auto 10px 10px; }
  .screen-controls button, .screen-controls a { padding-inline: 10px; font-size: 10px; }
  .screen-info { grid-template-columns: 1fr; grid-template-areas: "position" "title" "meta" "description" "notes" "controls" "status"; gap: 17px; padding: 24px 0 20px; }
  .screen-info h3 { font-size: 24px; }
  .screen-info p, .screen-notes { font-size: 12px; }
  .screen-meta { font-size: 9px; margin-top: 8px; }
  .film-strip { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 14px 0 10px; scrollbar-width: thin; scrollbar-color: #8391a5 #dce3ed; }
  .film-select { flex: 0 0 140px; scroll-snap-align: start; }
  .film-select label, .film-select > span { font-size: 11px; }
  .film-notes { grid-template-columns: 1fr; gap: 16px; margin-top: 39px; padding-top: 28px; }
  .film-notes h3 { font-size: 21px; }
  .film-notes p { font-size: 12px; }
  .film-notes .inline-links { grid-column: 1; }
  .inline-links, .source-links { gap: 4px 20px; }
  .inline-links a, .source-links a { font-size: 11px; }
  .channel-tabs, .platform-tabs, .phase-tabs { margin: 24px 0; width: 100%; }
  .channel-tabs button { flex: 1 0 auto; padding: 10px 12px; font-size: 11px; }
  .platform-tabs button, .phase-tabs button { padding: 10px 16px; font-size: 11px; }
  .channel-panel { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .channel-panel h3 { font-size: 26px; }
  .channel-panel p { font-size: 12px; }
  .platform-panel { padding: 23px 18px; }
  .platform-panel h3 { font-size: 22px; }
  .platform-panel > p { font-size: 12px; }
  .channel-matrix th, .channel-matrix td, .ledger-table th, .ledger-table td { padding: 12px 14px; font-size: 11px; }
  .ad-loop { padding-top: 28px; margin-top: 29px; }
  .loop-heading { display: block; }
  .loop-heading h3 { font-size: 23px; }
  .loop-heading p { margin-top: 10px; font-size: 11px; }
  .loop-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .loop-steps button { padding-inline: 11px; min-height: 93px; }
  .loop-steps button > strong { font-size: 11px; }
  .loop-detail { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .loop-detail h4 { font-size: 22px; }
  .loop-detail p, .loop-detail .small-note { font-size: 12px; }
  .loop-foot { display: block; font-size: 11px; }
  .loop-foot a { margin-top: 9px; }
  .signal-row { grid-template-columns: 1fr; gap: 8px; padding: 19px 0; }
  .signal-row > strong, .signal-row > h4 { margin-bottom: 3px; }
  .system-map { padding: 21px 17px; }
  .system-lane { gap: 10px; }
  .system-lane > strong, .system-lane > b, .system-lane > .lane-label { flex-basis: 100%; }
  .system-lane > span:not(.lane-label), .system-lane .system-step { padding: 8px 10px; font-size: 10px; }
  .method-note { font-size: 12px; }
  .operating-plan > h3 { font-size: 25px; }
  .disclosure { font-size: 10px; }
  .geo-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 5px; }
  .geo-layout > div > h3 { font-size: 25px; }
  .geo-layout > div > p:not(.eyebrow) { font-size: 12px; }
  .geo-steps summary { gap: 18px; font-size: 13px; padding: 18px 0; }
  .geo-steps details p { font-size: 12px; padding: 0 12px 22px 30px; }
  .us-growth { grid-template-columns: 1fr; gap: 20px; margin-top: 43px; padding-top: 30px; }
  .us-growth h3 { font-size: 25px; }
  .us-growth p:not(.eyebrow) { font-size: 12px; }
  .us-questions { flex-direction: row; gap: 7px; }
  .us-questions span { flex: 1; padding: 12px 6px; font-size: 10px; }
  .commerce { grid-template-columns: 1fr; gap: 23px; margin-top: 42px; padding-top: 30px; }
  .commerce h3 { font-size: 27px; margin-top: 14px; }
  .commerce h3 br { display: none; }
  .commerce p:not(.eyebrow) { font-size: 12px; }
  .text-link { font-size: 11px; }
  .text-link + .text-link { margin-left: 0; margin-right: 17px; }
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-layout h2 { font-size: 35px; margin-top: 17px; }
  .about-layout > div > p:not(.eyebrow) { font-size: 12px; }
  .about-layout > div > p.about-intro { font-size: 20px; }
  .code-shelf { grid-template-columns: 1fr; gap: 18px; margin-top: 42px; padding-top: 26px; }
  .code-shelf > div { gap: 0 20px; }
  .code-shelf a { font-size: 11px; }
  .code-shelf a span { font-size: 9px; }
  footer { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 22px; font-size: 10px; }
  footer > div { gap: 6px 20px; }
  footer > a { font-size: 11px; }
  .media-dialog { padding: 15px; width: 96vw; }
  .dialog-top h2 { font-size: 16px; }
  .dialog-top p { font-size: 10px; }
  .media-dialog video { max-height: 65dvh; }
  .work-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-card, .work-card-large { grid-row: auto; min-height: 0; aspect-ratio: 1.4; }
  .work-card-large { aspect-ratio: 1.05; }
  .film-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 31px 16px; }
  .film:not(.vertical) { grid-column: 1 / -1; }
  .film-caption { display: block; }
  .film-caption h3 { font-size: 12px; }
  .film > p { font-size: 11px; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .glass-nav a { padding-inline: 10px; font-size: 10px; }
  .hero-top > span:last-child { max-width: 135px; font-size: 7px; }
  .hero h1 { font-size: 39px; }
  .hero-signature { font-size: 10px; }
  .channel-tabs button { padding-inline: 8px; font-size: 10px; }
  .loop-steps { gap: 5px; padding: 5px; }
  .loop-steps button { padding-inline: 8px; }
  .loop-steps button > strong { font-size: 10px; }
}

/* Full-width opening; the creator credit stays outside the personal work list. */
.opening-reel { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1280 / 534; min-height: 380px; max-height: 800px; overflow: hidden; background: #242421; color: #fff; }
.opening-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening-reel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,#0002 0%,#0000 45%,#0009 100%); }
.opening-identity { position: absolute; inset: 30px var(--gutter) auto; z-index: 2; display: flex; justify-content: space-between; gap: 24px; font: 11px/1.6 var(--mono); letter-spacing: .12em; }
.opening-bottom { position: absolute; inset: auto var(--gutter) 28px; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.opening-scroll { display: flex; align-items: center; gap: 28px; min-height: 48px; font-size: 18px; }
.opening-scroll span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #fff7; border-radius: 50%; transition: transform .25s var(--ease); }
.opening-scroll:hover span { transform: translateY(4px); }
.opening-tools { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: 10px 24px; }
.film-credit { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; color: #fffd; text-underline-offset: 5px; }
.film-credit:hover { text-decoration: underline; }
#hero-video-toggle { padding: 8px 16px; border: 1px solid #fff6; border-radius: 24px; background: #0003; color: #fff; font-size: 11px; min-width: 112px; }
#hero-video-toggle:hover { background: #fff2; }
.work-list-heading { display: flex; justify-content: space-between; gap: 20px; font: 10px/1.8 var(--mono); letter-spacing: .07em; color: var(--muted); margin-bottom: 20px; }
#films .film-strip { display: block; border-top: 0; padding: 0; margin-bottom: 46px; overflow: visible; }
#films .film-select { position: relative; display: flex; width: 100%; align-items: center; gap: 22px; padding: 32px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
#films .film-select:last-child { border-bottom: 1px solid var(--line); }
#films .film-select > img { display: none; }
#films .film-select > span { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; width: calc(100% - 54px); padding: 0; color: var(--ink); font-size: clamp(27px,3.7vw,52px); line-height: 1.2; letter-spacing: -.045em; transition: transform .25s var(--ease), color .25s; }
#films .film-select small { font: 10px/1.8 var(--mono); color: var(--muted); letter-spacing: 0; }
#films .film-select::after { content: "↗"; font-size: 28px; margin-left: auto; color: var(--muted); }
#films .film-select[aria-pressed="true"]::after { content: "▶"; font-size: 16px; color: var(--ink); }
#films .film-select:hover > span { transform: translateX(10px); color: #777e80; }
.work-hover-preview { z-index: 60; width: min(380px,40vw); aspect-ratio: 16 / 9; overflow: hidden; background: #202326; box-shadow: 0 18px 48px #15171930; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s; }
.work-hover-preview.is-visible { opacity: 1; visibility: visible; }
.work-hover-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .opening-reel { min-height: 380px; aspect-ratio: 1.2; }
  .opening-identity { inset: 24px 20px auto; font-size: 9px; letter-spacing: .06em; }
  .opening-bottom { inset: auto 20px 18px; align-items: start; flex-direction: column; gap: 18px; }
  .opening-scroll { font-size: 15px; gap: 20px; }
  .opening-tools { width: 100%; justify-content: space-between; gap: 8px; }
  .film-credit, #hero-video-toggle { font-size: 10px; }
  .hero { padding-top: 48px; }
  .hero-copy { padding-left: 0; }
  .work-list-heading { font-size: 8px; margin-bottom: 12px; }
  #films .film-strip { margin-bottom: 28px; }
  #films .film-select { gap: 12px; padding: 20px 0; }
  #films .film-select > img { display: block; width: 84px; height: 48px; flex: 0 0 84px; object-fit: cover; border-radius: 0; }
  #films .film-select > span { display: block; width: auto; font-size: 20px; letter-spacing: -.03em; line-height: 1.35; }
  #films .film-select small { display: block; margin: 0 0 5px; font-size: 8px; }
  #films .film-select::after { font-size: 20px; }
  #films .film-select:hover > span { transform: none; }
  .work-hover-preview { width: min(280px,calc(100vw - 32px)); }
}
@media (hover: none), (pointer: coarse) { .work-hover-preview { display: none; } }

/* One warm monochrome treatment for every portfolio interface, including mobile.
   The BioraLab iframe documents and all image/video pixels retain their own colors. */
.case-section, .ads-section, .about-section { background: var(--paper); border-color: var(--line); }
.skip { color: var(--paper); }
.intro, .hero-signature, .biora-description > p, .browser-bar, .preview-note span,
.flow-node, .flow-node small, .flow-node:not(:last-child)::after, .flow-node:last-child::after, .detail-grid dt,
.code-tabs button, .code-toolbar, .code-comment, .token.comment, .code-lab .method-note,
.screen-controls, .screen-controls button, .screen-controls a, .screen-meta,
.film-select label, .film-select > span, .film-select small,
.channel-tabs button, .platform-tabs button, .phase-tabs button,
.channel-matrix td, .ledger-table td, .ledger-table code,
.loop-steps button, .loop-detail p, .loop-return::before, .system-map,
.system-lane > strong, .system-lane > b, .system-lane > .lane-label,
.system-lane > i, .system-lane > em, .system-lane > span:not(:last-child)::after,
.disclosure, .geo-steps summary span, .about-layout > div > p:not(.eyebrow),
.code-shelf a span, footer, .dialog-top p, .media-direct, .loop-mark { color: var(--muted); }
.detail-grid dd, .channel-matrix th, .ledger-table th, .about-layout > div > p.about-intro,
footer > a, .code-key, .token.keyword, .code-string, .token.string,
.opening-reel, .film-credit, #hero-video-toggle, .screen-stage, .screen-play, .copy-code,
.media-dialog, .close-dialog, .play, .duration { color: var(--ink); }
.text-link, .inline-links a, .source-links a { text-decoration-color: var(--muted); }
.browser-bar > span:first-child { color: #918a7e; }
.circle, .glass-nav, .flow-tabs, .flow-detail, .platform-panel, .system-map,
.screen-stage, .film-select, .code-tabs button, .channel-tabs, .platform-tabs, .phase-tabs { box-shadow: none; }
.circle, .browser-bar, .live-preview-tools, .case-live-window, .browser-scroll,
.flow-detail, .platform-panel, .loop-steps, .loop-detail, .system-map,
.system-lane > span:not(.lane-label), .system-lane .system-step, .us-questions span,
.screen-controls button, .screen-controls a, .copy-code, .close-dialog { background: var(--soft); }
.flow-node, .loop-steps button, .code-tabs, .code-toolbar, .channel-matrix th, .ledger-table th,
.detail-grid dd code { background: #282521; }
.channel-matrix td, .ledger-table td { background: var(--soft); }
.code-lab, .code-panel pre, .code-lab pre { background: var(--stage); color: var(--stage-ink); }
.screen-stage, .screen-stage video, .media-dialog video, .film-image,
.work-card, .work-hover-preview { background: var(--paper); }
.media-dialog { background: var(--soft); box-shadow: 0 24px 80px #0009; }
.media-dialog::backdrop { background: #000b; }
.play, .duration, .screen-play, .screen-stage .screen-controls button,
.screen-stage .screen-controls a { background: #171614d9; color: var(--ink); }
.circle, .glass-nav, .page-tabs button, .browser-bar, .browser-scroll, .page-scene,
.live-preview-tools, .live-preview-tools button, .case-live-window,
.flow-tabs, .flow-node, .flow-detail, .detail-grid dl, .code-lab, .code-tabs,
.code-tabs button, .code-toolbar, .copy-code, .code-lab .method-note, .repo-links a,
.screen-stage, .screen-controls button, .screen-controls a,
.channel-tabs, .platform-tabs, .phase-tabs, .platform-panel, .table-scroll,
.channel-matrix th, .channel-matrix td, .ledger-table th, .ledger-table td,
.loop-steps, .loop-steps button, .loop-detail, .loop-return,
.system-map, .system-lane, .system-lane > span:not(.lane-label), .system-lane .system-step,
.disclosure, .us-questions span, .code-shelf, .code-shelf a,
.media-dialog, .close-dialog, .filters button { border-color: var(--line); }
.glass-nav a:hover, .page-tabs button:hover, .flow-node:hover, .copy-code:hover,
.film-select:hover, .channel-tabs button:hover, .platform-tabs button:hover,
.phase-tabs button:hover, .screen-play:hover { background: #35312b; color: var(--ink); }
.glass-nav a.active, .glass-nav a[aria-current="location"],
.page-tabs button[aria-selected="true"], .live-preview-tools button[aria-pressed="true"],
.flow-node[aria-selected="true"], .code-tabs button[aria-selected="true"],
.channel-tabs button[aria-selected="true"], .platform-tabs button[aria-selected="true"],
.phase-tabs button[aria-selected="true"], .loop-steps button[aria-selected="true"],
.film-select[aria-selected="true"], .film-select[aria-pressed="true"], .film-select.active,
.filters button[aria-pressed="true"] { background: #37332e; color: var(--ink); border-color: #756e62; box-shadow: none; }
.flow-node[aria-selected="true"] small { color: var(--ink); }
.screen-controls button:disabled { color: #918a7e; border-color: var(--line); background: transparent; }
.round-link:hover .circle, .repo-links a:hover, .code-shelf a:hover,
.copy-code:hover, .flow-node:hover { border-color: #918a7e; }
.code-lab :focus-visible, .media-dialog :focus-visible { outline-color: var(--ink); }
.code-lab a, .code-lab button { --focus: var(--ink); }
.browser-scroll, .film-strip, .flow-tabs, .code-tabs, .code-panel pre,
.code-lab pre, .table-scroll { scrollbar-color: #756e62 var(--soft); }
#films .film-select:hover > span { color: #c9c1b5; }
#films .film-select { background: transparent; }
.work-hover-preview { box-shadow: 0 18px 48px #0008; }
.work-caption { background: linear-gradient(transparent,#101010ba); }
.opening-reel { background: var(--paper); }

/* Editorial index and a full-width screening room. */
.site-header { position: sticky; top: 0; width: 100%; max-width: none; height: 76px; padding: 0 var(--gutter); background: #101010f2; border-bottom: 1px solid #ffffff12; align-items: center; }
.header-caption { margin-left: auto; margin-right: clamp(28px,6vw,100px); color: var(--muted); font: 9px/1.5 var(--mono); letter-spacing: .1em; }
.header-actions { display: flex; align-items: center; gap: 32px; }
.menu-toggle { display: inline-flex; align-items: center; gap: 28px; padding: 6px 0; min-height: 44px; background: none; color: var(--ink); font-size: 13px; }
.menu-toggle > span { font-size: 24px; line-height: 1; transition: transform .3s var(--ease); }
.menu-toggle:hover > span { transform: rotate(90deg); }
.menu-dialog { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 26px var(--gutter); background: var(--paper); color: var(--ink); overflow-y: auto; }
.menu-dialog::backdrop { background: #101010; }
.menu-top, .menu-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 10px/1.6 var(--mono); color: var(--muted); }
.menu-top { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.menu-dialog .glass-nav { position: static; inset: auto; transform: none; width: 100%; max-width: 1120px; margin: clamp(25px,5vh,60px) auto; padding: 0; display: flex; flex-direction: column; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.menu-dialog .glass-nav a { justify-content: start; gap: 28px; min-height: 64px; padding: 8px 0; border-radius: 0; border-bottom: 1px solid #ffffff16; color: var(--ink); background: transparent; font-size: clamp(30px,5.3vw,72px); font-weight: 400; letter-spacing: -.045em; line-height: 1.2; white-space: normal; }
.menu-dialog .glass-nav a small { align-self: baseline; padding-top: 8px; font: 10px/1.5 var(--mono); color: var(--muted); letter-spacing: 0; }
.menu-dialog .glass-nav a > span:last-child { margin-left: auto; font-size: .6em; opacity: 0; transform: translate(-10px,10px); transition: opacity .2s, transform .2s; }
.menu-dialog .glass-nav a:hover, .menu-dialog .glass-nav a:focus-visible { background: transparent; color: #b4ac9f; }
.menu-dialog .glass-nav a:hover > span:last-child, .menu-dialog .glass-nav a:focus-visible > span:last-child { opacity: 1; transform: none; }
.menu-dialog .glass-nav a[aria-current="location"] small { color: var(--ink); }
.menu-footer { max-width: 1120px; margin: auto; padding: 16px 0; }
.editorial-screen { display: block; margin-top: 70px; }
.screen-title { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; padding: 0 0 26px; }
.screen-title .eyebrow { display: flex; gap: 24px; margin-bottom: 18px; font-size: 10px; }
.screen-title h3 { max-width: 1000px; font-size: clamp(32px,5.3vw,76px); font-weight: 400; line-height: 1.07; letter-spacing: -.055em; }
.screen-title .screen-controls { flex-wrap: nowrap; padding-bottom: 4px; }
.screen-title .screen-controls button { width: 48px; height: 48px; border-radius: 50%; background: transparent; font-size: 22px; }
.editorial-screen .screen-stage { width: 100%; aspect-ratio: 16 / 9; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.editorial-screen .screen-stage video { max-height: none; background: #000; }
.editorial-screen .screen-play { width: 106px; height: 106px; min-width: 0; min-height: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border: 1px solid #fff9; border-radius: 50%; background: #10101065; box-shadow: none; backdrop-filter: blur(5px); transition: transform .25s var(--ease), background .25s; }
.editorial-screen .screen-play > span { font-size: 22px; padding-left: 3px; }
.editorial-screen .screen-play small { font: 9px/1.5 var(--mono); letter-spacing: .1em; }
.editorial-screen .screen-play:hover { transform: translate(-50%,-50%) scale(1.08); background: #101010aa; }
.editorial-screen .screen-info { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-template-rows: auto; gap: 0 12%; padding: 26px 0 0; }
.editorial-screen .film-caption { display: block; margin: 0; }
.editorial-screen .screen-meta { margin: 0 0 10px; font-size: 10px; }
.film-caption > p:not(.screen-meta) { max-width: 530px; }
.film-caption > a { margin-top: 12px; }
.editorial-screen .screen-info > .screen-notes { grid-area: auto; margin: 0; padding: 0; border: 0; }
.editorial-screen .screen-notes summary { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 18px; border-bottom: 1px solid var(--line); font: 11px/1.6 var(--mono); color: var(--ink); }
.editorial-screen .screen-notes summary span { font-size: 22px; transition: transform .2s; }
.editorial-screen .screen-notes[open] summary span { transform: rotate(45deg); }
.editorial-screen .screen-notes > p { margin-top: 18px; }
.editorial-screen #film-status { grid-area: auto; grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .site-header { height: 68px; padding-top: 0; }
  .header-caption { display: none; }
  .header-actions { gap: 26px; }
  .menu-toggle { font-size: 12px; gap: 18px; }
  .menu-dialog { padding-top: 16px; }
  .menu-dialog .glass-nav { margin: 22px 0; }
  .menu-dialog .glass-nav a { min-height: 67px; font-size: clamp(29px,8vw,42px); gap: 20px; }
  .menu-dialog .glass-nav a > span:last-child { opacity: 1; transform: none; }
  .menu-footer { align-items: flex-start; flex-direction: column; gap: 10px; font-size: 9px; }
  .editorial-screen { margin-top: 40px; }
  .screen-title { gap: 16px; padding-bottom: 20px; }
  .screen-title h3 { font-size: clamp(26px,6.7vw,44px); letter-spacing: -.04em; }
  .screen-title .eyebrow { font-size: 8px; gap: 15px; margin-bottom: 12px; }
  .screen-title .screen-controls { gap: 6px; }
  .screen-title .screen-controls button { width: 44px; height: 44px; font-size: 19px; }
  .editorial-screen .screen-play { width: 74px; height: 74px; }
  .editorial-screen .screen-info { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .portrait img { transform: scale(1.015); }
}
@media (forced-colors: active) {
  body { background: Canvas; color: CanvasText; }
  .glass-nav, .flow-tabs, .flow-detail, .channel-tabs, .platform-tabs, .phase-tabs, .platform-panel, .system-map, .code-lab, .screen-stage, .media-dialog { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .glass-nav a.active, [role="tab"][aria-selected="true"], .film-select[aria-pressed="true"], .filters button[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  .hero-signature, .hero-signature span, .eyebrow, .small-note, .flow-node span, .flow-node small, .detail-grid dd, .code-lab pre { color: CanvasText; }
  .flow-node[aria-selected="true"] span, .flow-node[aria-selected="true"] small { color: HighlightText; }
  .portrait, .film-select, .flow-node, .copy-code, .circle { border: 1px solid CanvasText; }
  .flow-node::after, .loop-steps button::after { color: CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}
/* Advertising method: reading depth without another visual system. */
.ad-method .section-heading > .method-note { max-width: 850px; font-size: 12px; }
.ad-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); margin: 0 0 64px; }
.ad-index a { display: flex; align-items: center; gap: 20px; padding: 24px 0; color: var(--ink); font-size: 15px; transition: color .2s; }
.ad-index small { color: var(--muted); font: 10px var(--mono); }
.ad-index a:hover { color: var(--muted); }
.ad-chapter { scroll-margin-top: 110px; margin-top: 72px; }
.ad-chapter > .lab-heading { padding-top: 20px; }
.ad-method .platform-panel { box-shadow: none; }
.ad-method .channel-matrix { font-size: 13px; }
.ad-method .channel-matrix th { width: 19%; font-size: 12px; }
.ad-method .channel-matrix th small { display: block; margin-top: 8px; font-size: 11px; font-weight: 400; color: var(--muted); }
.ad-method .channel-matrix td { min-width: 190px; }
.ad-method .platform-panel > .system-map { margin: 0 0 28px; }
.ad-method .disclosure { font-size: 13px; line-height: 1.9; border-left: 0; padding: 0; border-top: 1px solid var(--line); }
.ad-method .disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; color: var(--ink); cursor: pointer; font-size: 15px; }
.ad-method .disclosure > summary::after { content: "+"; flex: 0 0 auto; color: var(--muted); font-size: 24px; font-weight: 400; }
.ad-method .disclosure[open] > summary::after { content: "−"; }
.ad-method .disclosure > p { max-width: 1000px; margin: 0 0 18px; }
.ad-method .disclosure .table-scroll { margin-bottom: 24px; }
.ad-points { display: grid; gap: 20px; }
.ad-points p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--muted); }
.ad-points strong { color: var(--ink); font-weight: 500; }
.ad-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 26px; margin: 32px 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.ad-equation small { display: block; color: var(--muted); font-size: 12px; min-height: 2.5em; }
.ad-equation strong { display: block; font-size: clamp(36px,4.5vw,64px); font-weight: 400; letter-spacing: -.04em; line-height: 1.25; }
.ad-equation > span { color: var(--muted); font-size: 24px; }
.ad-method .method-flow { margin-top: 42px; }
.ad-method .detail-grid dd { font-size: 14px; line-height: 1.9; }
.ad-sources-inline { margin-top: 22px !important; font-size: 12px; }
.ad-sources-inline a, .ad-source-grid a { text-decoration: underline; text-underline-offset: 4px; }
.ad-source-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; padding: 18px 0; }
.ad-source-grid h4 { font-size: 16px; margin-bottom: 24px; font-weight: 500; color: var(--ink); }
.ad-source-grid p { margin: 0 0 22px; }
.ad-research { margin-top: 64px !important; scroll-margin-top: 110px; }
.ad-code-disclosure .code-lab { margin-top: 0; }
@media (max-width: 760px) {
  .ad-index { margin-bottom: 30px; grid-template-columns: 1fr; }
  .ad-index a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ad-index a:last-child { border: 0; }
  .ad-chapter { margin-top: 44px; scroll-margin-top: 85px; }
  .ad-method .platform-panel { padding: 22px 16px; }
  .ad-method .channel-matrix td { min-width: 210px; }
  .ad-method .platform-tabs { max-width: 100%; }
  .ad-equation { grid-template-columns: 1fr; gap: 14px; margin: 25px 0; }
  .ad-equation > span { font-size: 20px; }
  .ad-equation small { min-height: 0; }
  .ad-equation strong { font-size: 44px; }
  .ad-source-grid { grid-template-columns: 1fr; gap: 20px; }
  .ad-method .disclosure > summary { font-size: 14px; }
}
/* Multimodal work opens the homepage; a single screen replaces the separate film room. */
.multimodal-opening { height: calc(100svh - 76px); min-height: 660px; max-height: 1080px; aspect-ratio: auto; background: #101010; }
.multimodal-opening::after { background: linear-gradient(180deg,#0006 0%,#0000 28%,#0004 48%,#000c 78%,#101010 100%); }
.multimodal-opening .opening-identity { top: 28px; }
.opening-caption { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 208px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 8%; align-items: end; }
.opening-caption h1 { font-size: clamp(55px,6.9vw,108px); letter-spacing: -.055em; font-weight: 400; line-height: 1.06; color: #fff; }
.opening-caption > div > p { font-size: 12px; margin-top: 22px; color: #eee8df; letter-spacing: .1em; }
.opening-current .eyebrow { font-size: 10px; color: #ddd6cd; margin: 0 0 14px; }
.opening-current h2 { font-size: clamp(23px,2.6vw,38px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em; color: #fff; max-width: 520px; }
.opening-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; }
.opening-watch { background: #eee9df; color: #111; min-height: 48px; padding: 12px 22px; display: flex; align-items: center; gap: 18px; font-size: 12px; }
.opening-watch:hover { background: #fff; }
.multimodal-opening #hero-video-toggle { border: 0; border-radius: 0; padding: 8px 0; background: none; font-size: 11px; text-align: left; min-width: 0; min-height: 44px; color: #fff; }
.multimodal-opening #hero-video-toggle:disabled { opacity: .7; }
.opening-selection { position: absolute; z-index: 2; bottom: 0; left: var(--gutter); right: var(--gutter); }
#films .opening-selection .film-strip { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; margin: 0; padding: 0; border: 0; }
#films .opening-selection .film-select { border: 0; border-top: 1px solid #fff5; border-radius: 0; padding: 20px 0 16px; gap: 15px; min-height: 100px; }
#films .opening-selection .film-select[aria-pressed="true"] { border-top: 2px solid #fff; background: none; }
#films .opening-selection .film-select > img { display: block; width: 82px; height: 47px; flex: 0 0 82px; object-fit: cover; border-radius: 0; opacity: .7; }
#films .opening-selection .film-select > span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: auto; font-size: 14px; line-height: 1.35; letter-spacing: -.01em; color: #ddd6cd; }
#films .opening-selection .film-select small { color: #bab2a7; font-size: 9px; }
#films .opening-selection .film-select::after { content: none; }
#films .opening-selection .film-select:hover > span { transform: translateY(-2px); color: #fff; }
#films .opening-selection .film-select[aria-pressed="true"] > img { opacity: 1; }
#films .opening-selection .film-select[aria-pressed="true"] > span { color: #fff; }
.opening-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; border-top: 1px solid #fff2; color: #d2cbbf; font-size: 11px; }
.opening-footer .screen-controls { display: flex; gap: 8px; margin: 0; }
.opening-footer .screen-controls button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #fff; font-size: 22px; }
.opening-footer .screen-controls button:disabled { opacity: .25; }
.opening-production.editorial-screen { margin-top: 0; padding-top: 20px; padding-bottom: 42px; }
.opening-production.editorial-screen .screen-info { padding-top: 0; }
.opening-production .screen-info p { font-size: 12px; }
.opening-production .screen-notes summary { cursor: pointer; }
.opening-production .compact-film-notes { margin-top: 28px; }
.work-home .hero-copy h2 { font-size: clamp(48px,5.2vw,79px); font-weight: 400; line-height: 1.16; letter-spacing: -.055em; }
@media (max-width: 1000px) {
  .opening-caption { gap: 6%; bottom: 220px; }
  #films .opening-selection .film-strip { gap: 18px; }
  #films .opening-selection .film-select { gap: 12px; }
  #films .opening-selection .film-select > img { width: 58px; height: 34px; flex-basis: 58px; }
  #films .opening-selection .film-select > span { font-size: 12px; }
}
@media (max-width: 760px) {
  .multimodal-opening { height: auto; min-height: 0; max-height: none; padding-top: calc(56.25vw + 84px); }
  .multimodal-opening video { top: 58px; height: 56.25vw; object-fit: contain; }
  .multimodal-opening::after { display: none; }
  .multimodal-opening .opening-identity { top: 20px; }
  .opening-caption { position: relative; inset: auto; padding: 0 20px; grid-template-columns: 1fr; gap: 28px; }
  .opening-caption h1 { font-size: clamp(40px,10.5vw,76px); }
  .opening-caption h1 br { display: none; }
  .opening-caption > div > p { font-size: 10px; letter-spacing: .03em; margin-top: 12px; }
  .opening-current h2 { font-size: 22px; max-width: none; }
  .opening-current .eyebrow { font-size: 9px; margin-bottom: 10px; }
  .opening-actions { margin-top: 18px; }
  .opening-selection { position: relative; inset: auto; margin: 30px 20px 0; }
  #films .opening-selection .film-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #films .opening-selection .film-select { align-items: flex-start; min-height: 140px; flex-direction: column; padding-block: 14px; gap: 10px; }
  #films .opening-selection .film-select > img { width: 100%; height: auto; aspect-ratio: 16/9; flex: none; }
  #films .opening-selection .film-select > span { font-size: 12px; gap: 5px; }
  #films .opening-selection .film-select small { font-size: 8px; }
  .opening-footer { min-height: 68px; font-size: 9px; gap: 10px; }
  .opening-footer .screen-controls { gap: 0; }
  .opening-production.editorial-screen { padding-top: 22px; padding-bottom: 20px; }
  .work-home .hero-copy h2 { font-size: clamp(39px,10.4vw,63px); line-height: 1.2; }
}
/* Work-led homepage: diagrams are entrances, full methods live on their own pages. */
.work-home .case-section { padding-bottom: 74px; }
.work-home .biora-description > p { max-width: 460px; }
.work-home .compact-film-notes { grid-template-columns: .55fr 1.45fr; padding-top: 26px; margin-top: 40px; }
.work-home .compact-film-notes > p { font-size: 12px; }
.process-section, .practice-section { padding-block: 80px 110px; border-top: 1px solid var(--line); }
.dtc-method-preview { margin-top: 64px; }
.dtc-method-preview .workflow-schematic { min-height: 240px; }
.platforms-section { padding-top: 80px; border-top: 1px solid var(--line); }
.platform-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.platform-entry { padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; transition: background .25s var(--ease); }
.platform-entry:hover, .platform-entry:focus-visible { background: #24211c; }
.platform-entry > div { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); }
.platform-entry h3 { font-size: clamp(23px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.035em; margin: 28px 0 16px; }
.platform-entry p { font-size: 12px; color: var(--muted); line-height: 1.85; }
.platform-focus { display: flex; flex-wrap: wrap; gap: 20px 36px; padding-top: 24px; color: var(--muted); font: 10px/1.7 var(--mono); }
.shopify-case .case-heading h3 { margin: 0; font-size: clamp(32px, 4.7vw, 64px); font-weight: 400; letter-spacing: -.045em; line-height: 1.2; }
.platforms-section .shopify-case { margin-top: 40px; }
.method-page #shopify > .shopify-case { margin-block: 48px; padding-block: 36px; border-block: 1px solid var(--line); }
.method-page .shopify-case .biora-description > p { max-width: 460px; }
.ad-channel-list { font-size: 11px; line-height: 1.85; color: var(--muted); margin: 0 0 30px; }
.ad-topic-links { margin-top: 30px; }
.ad-topic-links .eyebrow { font-size: 10px; margin-bottom: 14px; }
.ad-topic-links .inline-links { font-size: 12px; }
.about-final .hero { padding-top: 0; }
.about-final .hero-layout { display: block; aspect-ratio: auto; padding: 48px 0; }
.about-final .hero-copy { width: 100%; max-width: 900px; padding: 0; }
.about-final .intro { max-width: 660px; }
.about-resources { display: grid; grid-template-columns: 1fr 1.1fr; gap: 9%; margin-top: 60px; }
.about-story p { color: var(--muted); font-size: 14px; line-height: 1.95; margin: 0 0 20px; max-width: 580px; }
.about-story .about-intro { color: var(--ink); font-size: 23px; line-height: 1.5; margin-bottom: 26px; }
.about-resources .code-shelf { display: block; margin: 0; padding-top: 0; border: 0; min-width: 0; }
.about-resources .code-shelf > .eyebrow { margin: 0 0 24px; }
.about-resources .code-shelf > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 26px; }
.process-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 8px 0 26px; border-bottom: 1px solid var(--line); }
.process-tabs button { display: flex; align-items: center; gap: 20px; padding: 22px 8px; min-height: 66px; background: transparent; text-align: left; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; transition: border-color .25s, color .25s; }
.process-tabs small { font: 10px var(--mono); }
.process-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.process-tabs button:hover { color: var(--ink); }
.process-open { display: block; padding: clamp(24px,3vw,44px); border: 1px solid var(--line); background: #171614; transition: border-color .3s var(--ease); }
.process-open:hover, .process-open:focus-visible { border-color: #b0aba2; }
.diagram-top { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); font: 10px/1.7 var(--mono); letter-spacing: .12em; color: var(--muted); }
.workflow-schematic { padding: 50px 0; min-height: 310px; display: flex; flex-direction: column; justify-content: center; }
.diagram-line { display: flex; gap: 22px; list-style: none; padding: 0; margin: 0; }
.diagram-line li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 17px 13px; min-height: 113px; border: 1px solid #57534c; font-size: 12px; line-height: 1.5; }
.diagram-line li > small { color: var(--muted); font: 9px var(--mono); }
.diagram-line li:last-child { background: #292722; border-color: #8a8377; }
.diagram-line li:not(:last-child)::after { content: "→"; position: absolute; right: -22px; width: 21px; top: 50%; transform: translateY(-50%); text-align: center; color: #9c968b; }
.diagram-route { display: grid; grid-template-columns: 1fr 2.7fr 1.1fr; align-items: center; gap: 42px; }
.diagram-node { display: flex; position: relative; min-height: 78px; align-items: center; justify-content: center; padding: 20px; border: 1px solid #57534c; font-size: 13px; line-height: 1.55; text-align: center; }
.route-source { position: relative; display: grid; gap: 21px; }
.route-source .diagram-node + .diagram-node::before { content: "↓"; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); color: #9c968b; }
.route-source::after, .route-paths::after, .growth-route .route-result:not(:last-child)::after { content: "→"; position: absolute; right: -42px; width: 40px; top: 50%; transform: translateY(-50%); text-align: center; color: #9c968b; }
.route-paths { display: grid; gap: 18px; position: relative; padding: 0 20px; border-inline: 1px solid #777065; }
.route-path { display: grid; grid-template-columns: .55fr 1.2fr auto 1fr; gap: 16px; align-items: center; min-height: 54px; padding: 12px; background: #22201c; font-size: 12px; line-height: 1.5; }
.route-path small { color: var(--muted); font: 9px var(--mono); }
.route-path b { color: #9c968b; font-weight: 400; }
.route-result { position: relative; }
.route-result .diagram-node { border-color: #8a8377; background: #292722; }
.route-result > small { display: block; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.6; margin-top: 12px; }
.diagram-return { display: flex; align-items: center; gap: 20px; justify-content: space-between; border-bottom: 1px solid #777065; padding: 22px 0 12px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.diagram-return > span:first-child { font: 9px var(--mono); letter-spacing: .1em; }
.diagram-return b { font-size: 22px; font-weight: 400; }
.diagram-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 32px; padding-top: 23px; border-top: 1px dashed #777065; font-size: 11px; color: var(--muted); }
.diagram-checks > small { font: 9px var(--mono); letter-spacing: .06em; }
.diagram-checks > span::before { content: "○"; padding-right: 8px; }
.growth-route { grid-template-columns: 1fr 1.2fr 1.1fr 1.1fr; }
.growth-route .route-path { grid-template-columns: 1fr; text-align: center; }
.diagram-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.diagram-caption p { max-width: 620px; color: var(--muted); font-size: 13px; }
.diagram-caption > span { display: flex; gap: 20px; align-items: center; font-size: 13px; min-width: 200px; }
.diagram-caption b { font-size: 24px; font-weight: 400; transition: transform .3s var(--ease); }
.process-open:hover .diagram-caption b { transform: translate(3px,-3px); }
.method-page-header { padding-block: 66px 48px; border-bottom: 1px solid var(--line); }
.method-page-header h1 { font-size: clamp(38px,5.5vw,74px); font-weight: 400; letter-spacing: -.045em; margin: 30px 0 20px; }
.method-page-header > p { max-width: 760px; color: var(--muted); font-size: 14px; }
.method-page main > .ads-section, .method-page main > .growth { border-top: 0; padding-top: 54px; }
.method-page .method-content { padding-block: 46px 90px; }
.method-page .method-content > .skill-lab { margin-top: 0; }
.expert-method { margin: 38px 0 52px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.expert-method > h3 { font-size: clamp(24px,3vw,38px); font-weight: 400; letter-spacing: -.035em; max-width: 880px; }
.expert-method > p:not(.eyebrow) { max-width: 900px; }
.operator-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 32px 0; align-items: start; }
.operator-decision { border-top: 1px solid var(--line); min-width: 0; }
.operator-decision summary { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 17px; }
.operator-decision summary::-webkit-details-marker { display: none; }
.operator-decision summary small { font: 10px var(--mono); color: var(--muted); }
.operator-decision summary > span { margin-left: auto; transition: transform .25s; }
.operator-decision[open] summary > span { transform: rotate(45deg); }
.operator-decision p { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.operator-decision summary:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.promotion-lab { margin: 40px 0; padding: clamp(20px,3vw,40px); border: 1px solid var(--line); background: #171614; }
.promotion-lab > p { max-width: 820px; color: var(--muted); font-size: 14px; }
.promotion-lab .table-scroll { margin-top: 28px; }
.promotion-lab input { display: block; width: 100%; min-width: 72px; max-width: 180px; padding: 10px; min-height: 44px; border: 1px solid #746e65; border-radius: 0; background: #10100f; color: var(--ink); font: 16px var(--mono); }
.promotion-lab input:focus-visible, .promotion-lab button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.promotion-fees { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; margin: 24px 0; }
.promotion-fees label { display: grid; gap: 10px; color: var(--muted); font-size: 12px; }
.promotion-fees button { padding: 12px 0; min-height: 44px; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); }
.promotion-result { padding-top: 22px; border-top: 1px solid var(--line); }
.promotion-result p { font-size: 14px; color: var(--muted); }
.promotion-result [data-mix-totals] { font: clamp(18px,2.2vw,28px)/1.6 var(--mono); color: var(--ink); }
@media (max-width: 760px) { .operator-decisions { grid-template-columns: 1fr; } .expert-method { margin-block: 24px 36px; padding-block: 24px; } .operator-decision summary { font-size: 16px; } }
.method-page .section-heading h2 { font-size: clamp(28px,3vw,42px); }
@media (max-width: 1000px) {
  .diagram-route, .growth-route { gap: 25px; }
  .route-source::after, .route-paths::after, .growth-route .route-result:not(:last-child)::after { right: -25px; width: 24px; }
  .route-paths { padding-inline: 12px; }
  .route-path { padding: 10px; gap: 8px; }
  .diagram-line { gap: 16px; }
  .diagram-line li { padding-inline: 10px; font-size: 11px; }
  .diagram-line li:not(:last-child)::after { right: -16px; width: 15px; }
  .diagram-caption { align-items: flex-start; }
}
@media (max-width: 760px) {
  .work-home .compact-film-notes { grid-template-columns: 1fr; gap: 12px; }
  .process-section, .practice-section { padding-block: 55px 70px; }
  .dtc-method-preview { margin-top: 42px; }
  .dtc-method-preview .workflow-schematic { min-height: 0; }
  .platforms-section { padding-top: 55px; }
  .platform-directory { grid-template-columns: 1fr; }
  .platform-entry { padding: 24px 20px; }
  .platform-entry h3 { margin-top: 20px; font-size: 30px; }
  .platform-focus { gap: 14px 24px; }
  .platforms-section .shopify-case { margin-top: 20px; }
  .about-resources { grid-template-columns: 1fr; gap: 44px; margin-top: 35px; }
  .about-story p { font-size: 13px; }
  .about-story .about-intro { font-size: 21px; }
  .process-tabs { gap: 0; }
  .process-tabs button { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 5px; font-size: 13px; }
  .process-tabs small { font-size: 9px; }
  .process-open { padding: 22px 18px; }
  .diagram-top { font-size: 9px; gap: 14px; padding-bottom: 20px; }
  .workflow-schematic { padding: 28px 0; min-height: 0; }
  .diagram-line { flex-direction: column; gap: 22px; }
  .diagram-line li { flex-direction: row; justify-content: flex-start; align-items: center; min-height: 52px; padding: 14px 18px; font-size: 12px; gap: 20px; }
  .diagram-line li:not(:last-child)::after { content: "↓"; top: auto; bottom: -23px; left: 16px; right: auto; width: 22px; height: 22px; transform: none; }
  .diagram-route, .growth-route { grid-template-columns: 1fr; gap: 30px; }
  .diagram-node { min-height: 54px; padding: 15px; font-size: 12px; }
  .route-source::after, .route-paths::after, .growth-route .route-result:not(:last-child)::after { content: "↓"; right: auto; left: 50%; width: 24px; top: auto; bottom: -29px; transform: translateX(-50%); }
  .route-paths { padding-inline: 0; border-inline: 0; border-block: 1px solid #777065; padding-block: 10px; gap: 10px; }
  .route-path { grid-template-columns: .65fr 1.15fr auto 1fr; font-size: 10px; padding: 11px 8px; }
  .route-result > small { margin-top: 8px; }
  .diagram-return { gap: 14px; margin-top: 8px; }
  .diagram-return > span:nth-child(2) { max-width: 180px; }
  .diagram-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; font-size: 10px; }
  .diagram-checks > small { grid-column: 1 / -1; }
  .diagram-caption { flex-direction: column; gap: 20px; padding-top: 22px; }
  .diagram-caption p, .diagram-caption > span { font-size: 12px; }
  .diagram-caption > span { width: 100%; justify-content: space-between; min-width: 0; }
  .method-page-header { padding-block: 38px 30px; }
  .method-page-header h1 { margin-top: 22px; }
}
/* TikTok video recreation showcase: source color, original framing, native playback. */
.tiktok-recreation { margin: 42px 0 64px; padding: 32px 0 0; border-top: 1px solid var(--line); }
.tiktok-recreation-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tiktok-recreation-heading .eyebrow { margin-bottom: 15px; }
.tiktok-recreation-heading h3 { font-size: clamp(28px,3.8vw,48px); font-weight: 400; letter-spacing: -.04em; line-height: 1.2; margin: 0; }
.tiktok-recreation-heading > span { flex-shrink: 0; font: 10px var(--mono); color: var(--muted); padding-bottom: 5px; }
.tiktok-recreation-intro { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; margin: 30px 0; }
.tiktok-recreation-intro h4 { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.6; }
.tiktok-recreation-intro p { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.tiktok-recreation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.tiktok-recreation-work { margin: 0; min-width: 0; }
.tiktok-recreation-work video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: contain; background: #000; border: 1px solid var(--line); }
.tiktok-recreation-work figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 17px; }
.tiktok-recreation-work figcaption > div { display: grid; gap: 8px; }
.tiktok-recreation-work figcaption small, .tiktok-recreation-work figcaption > span { font: 10px var(--mono); color: var(--muted); }
.tiktok-recreation-work figcaption div > span { font-size: 14px; line-height: 1.5; }
.tiktok-recreation-note { margin: 24px 0 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
@media (max-width: 760px) {
  .tiktok-recreation { margin: 30px 0 44px; padding-top: 24px; }
  .tiktok-recreation-heading { display: block; }
  .tiktok-recreation-heading > span { display: block; margin-top: 16px; }
  .tiktok-recreation-intro { grid-template-columns: 1fr; gap: 12px; margin: 24px 0; }
  .tiktok-recreation-grid { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; }
  .tiktok-recreation-work { flex: 0 0 min(78vw,320px); scroll-snap-align: start; }
}