/* Manuel Odhe v2. Tokens follow the brand proposal (_brand/brand-proposal.html). */

@font-face { font-family: 'Supreme'; src: url('../fonts/supreme-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url('../fonts/supreme-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Supreme'; src: url('../fonts/supreme-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --black: #000000;
  --ink: #FAFAFA;
  --ink-2: #E6E4DF;
  --muted: #A8A6A1;
  --quiet: #8C8C8C;
  --dim: #3A3A3A;
  --line: #2A2A2A;
  --line-2: #161616;
  --white: #FFFFFF;
  --day-ink: #0A0A0A;
  --day-muted: #5C5C5C;
  --dot: #E2163A;
  --panel: #1c1c1c;
  --screen: #111111;

  --f-display: 'Supreme', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --t-name: clamp(5.6rem, 1.2rem + 20vw, 15rem);
  --t-mega: clamp(3rem, 0.9rem + 8.6vw, 11rem);
  --t-xl: clamp(2.5rem, 1.2rem + 5.2vw, 7.25rem);
  --t-row: clamp(2.2rem, 1rem + 4.2vw, 5.4rem);
  --t-l: clamp(1.9rem, 1.3rem + 2.5vw, 3.6rem);
  --t-lead: clamp(1.5rem, 1rem + 1.9vw, 2.75rem);
  --t-m: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);

  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
  --nav-h: 72px;
  --band: 48px;
  --radius-media: 10px;
  --section: clamp(5rem, 3rem + 8vw, 11rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-land: cubic-bezier(0.22, 1.2, 0.36, 1);
  --dur-hover: 0.6s;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--black); color: var(--ink); -webkit-text-size-adjust: none; text-size-adjust: none; scroll-padding-top: var(--nav-h); }
body { font-family: var(--f-body); font-size: var(--t-body); line-height: 1.5; letter-spacing: -0.005em; background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: normal; }
::selection { background: var(--ink); color: var(--black); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#main:focus { outline: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--gutter); top: 12px; z-index: 300; padding: 0.7em 1em; background: var(--ink); color: var(--black); font-weight: 500; translate: 0 -200%; }
.skip-link:focus-visible { translate: none; }

.label { font-family: var(--f-mono); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dot { color: var(--dot); }
sup.reg { font-size: 0.32em; vertical-align: 1.45em; line-height: 0; margin-left: 0.04em; letter-spacing: 0; font-family: var(--f-body); font-weight: 500; }
.inline { display: inline-block; padding: 2px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--quiet); transition: text-decoration-color 0.3s; }
.inline:hover { text-decoration-color: var(--dot); }

/* Line masks for the display reveals (GSAP moves .line__in). */
.line { display: block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line__in { display: inline-block; }

/* SplitText line masks need room for descenders. */
.sl-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* Before the engine runs, intro elements wait hidden; the failsafe shows them if it never does. */
html.js:not(.reduced) [data-intro] { opacity: 0; animation: mo-failsafe 0.01s 3.2s forwards; }
/* Phones paint the display title at once (it is the LCP element); wider screens get the line reveal. */
@media (min-width: 900px) { html.js:not(.reduced) :is([data-hero-title] .line__in, [data-hero-lines] .line__in, [data-panel], [data-hero-name]) { opacity: 0; animation: mo-failsafe 0.01s 3.2s forwards; } }
html.ready :is([data-intro], [data-hero-title] .line__in, [data-hero-lines] .line__in, [data-panel], [data-hero-name]) { animation: none; }
@keyframes mo-failsafe { to { opacity: 1; } }

/* ---------------- Loader (first visit per tab) ---------------- */
.loader { position: fixed; inset: 0; z-index: 200; display: none; background: var(--black); color: var(--ink); }
html.is-first .loader { display: block; animation: mo-loader-failsafe 0.4s 7.5s forwards; }
/* While the first-visit sequence runs, the hero's own failsafe waits for it. */
html.is-first :is([data-intro], [data-hero-title] .line__in, [data-hero-lines] .line__in, [data-panel], [data-hero-name]) { animation-delay: 8s !important; }
/* The mark's letters never depend on an inherited colour; the full stop keeps its red. */
.loader__logo path, .curtain__logo path { fill: var(--ink); }
/* If the script never runs, the loader steps aside on its own. */
@keyframes mo-loader-failsafe { to { opacity: 0; visibility: hidden; } }
html.is-first .nav__logo { opacity: 0; }
.loader__mark { position: absolute; left: 50%; top: 50%; width: min(64vw, 620px); translate: -50% -50%; }
.loader__logo { width: 100%; height: auto; }
.loader__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.loader__count { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------------- Page transition curtain ---------------- */
.curtain { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; }
.curtain__panel { position: absolute; inset: 0; background: var(--black); display: grid; place-items: center; }
/* The curtain carries the whole mark, the same as the preloader, never the dot on its own. */
.curtain__logo { width: min(40vw, 420px); height: auto; color: var(--ink); }

/* ---------------- Navigation ---------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); color: var(--ink); background-color: rgb(0 0 0 / 0); border-bottom: 1px solid transparent; transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out), border-color 0.6s var(--ease-out), translate 0.7s var(--ease-out); }
/* Top of page: transparent over the hero. Scrolled: a solid black bar with a hairline, always. */
html.nav-scrolled .nav { background-color: rgb(0 0 0 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav__inner { height: 100%; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.nav__brand, .foot__brand { justify-self: start; display: inline-block; padding: 12px 0; }
/* Brand links answer by dropping the full stop into place, like the preloader. */
.nav__brand circle, .foot__brand circle { transform-box: fill-box; transform-origin: center; transition: translate 0.5s var(--ease-land); }
.nav__brand:hover circle, .foot__brand:hover circle, .nav__brand:focus-visible circle, .foot__brand:focus-visible circle { translate: 0 -40%; }
.nav__logo { width: 132px; height: auto; }
.nav__links ul { display: flex; gap: clamp(1.25rem, 0.8rem + 1.4vw, 2.5rem); }
.nav__link { position: relative; display: inline-block; padding: 8px 0; font-size: 15px; font-weight: 450; }
.nav__link span { display: inline-block; transition: translate 0.5s var(--ease-out); }
/* The underline draws from the left; the current section keeps it, marked with the red stop. */
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease-out); }
.nav__link::before { content: ''; position: absolute; right: -9px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--dot); scale: 0; transition: scale 0.5s var(--ease-land); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-current::before { scale: 1; }
.nav__status { justify-self: end; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 40px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.nav__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); animation: mo-breathe 3.2s ease-in-out infinite; }
.nav__status:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nav__menu { display: none; justify-self: end; min-height: 44px; padding: 0 0.25rem; font-size: 15px; }
@keyframes mo-breathe { 50% { opacity: 0.35; } }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--black); padding: calc(var(--nav-h) + 2rem) var(--gutter) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu__list a { display: flex; align-items: baseline; gap: 1rem; padding: 0.35rem 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(3rem, 2rem + 6vw, 5rem); letter-spacing: -0.05em; line-height: 1; }
.menu__list small { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); translate: 0 -1.6em; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 15px; color: var(--muted); }
.menu__foot a { min-height: 32px; display: inline-flex; align-items: center; }
html.menu-open .nav { background-color: var(--black); color: var(--ink); border-bottom-color: transparent; }

@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__status { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
  .nav__logo { width: 112px; }
}

/* ---------------- Sections ---------------- */
.page { display: block; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------------- Hero ----------------
   Top band as tall as the panel (copy top-left on the same top line), the name in its own
   evenly padded band between hairlines, then the facts strip. No spacer rows, so no dead space;
   the panel is capped by width and by the height left after the other bands, so the hero
   never exceeds one screen. */
.hero { position: relative; padding: 0 var(--gutter); --name-h: calc((100vw - 2 * var(--gutter)) * 0.0972); --name-pad: clamp(1.5rem, 0.6rem + 2.6vw, 4.25rem); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: start; padding-top: calc(var(--nav-h) + clamp(0.75rem, 0.4rem + 0.8vw, 1.5rem)); padding-bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem); }
.hero__statement { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.1rem, 0.6rem + 3.1vw, 4.6rem); line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase; }
.hero__statement em { color: var(--ink); }
/* The cycling words share one grid cell, so the line is always as wide as the longest word. */
.hero__statement .line:last-child .line__in { display: block; }
.kinetic { display: grid; width: max-content; max-width: 100%; overflow: clip; }
.kinetic__w { grid-area: 1 / 1; white-space: nowrap; }
.kinetic__w + .kinetic__w { visibility: hidden; }
html.motion .kinetic__w + .kinetic__w { visibility: visible; }
.hero__name { margin: 0 calc(-1 * var(--gutter)); padding: var(--name-pad) var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__mark { display: block; }
.hero__logo { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }
.hero__strip { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; }

/* The work panel: square, about a quarter of the width, cutting rapidly through art-directed
   square frames that fill it edge to edge; the caption sits inside over a soft bottom gradient. */
.panel { display: block; --pw: min(26vw, calc(100svh - var(--nav-h) - var(--band) - var(--name-h) - 2 * var(--name-pad) - 6.5rem)); width: max(15rem, var(--pw)); }
.panel__frame { position: relative; display: block; aspect-ratio: 1 / 1; background: #0B0B0B; }
.panel__stage { position: absolute; inset: 0; overflow: hidden; }
.panel__stage picture { display: contents; }
.panel__img, .panel__word { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.panel__img { object-fit: cover; }
.panel__img.is-on, .panel__word.is-on { opacity: 1; }
.panel__word { display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1rem + 2.4vw, 4rem); letter-spacing: -0.045em; color: var(--ink); }
.panel__word::after { content: '.'; color: var(--dot); }
.panel__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.panel__lines rect { fill: none; stroke: var(--line); stroke-width: 1; }
.panel__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--dot); }
.panel__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 1rem; padding: 2.75rem 1rem 0.9rem; color: var(--ink); background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0)); }
.panel__cap > span:first-child { display: inline-flex; gap: 0.75rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__cap [data-reel-num] { color: var(--ink-2); }
.panel__cap .reg { font-size: 0.7em; vertical-align: 0.5em; }
.panel:hover .panel__lines rect, .panel:focus-visible .panel__lines rect { stroke: var(--quiet); }
.panel:hover [data-reel-title] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--dot); }

@media (max-width: 899px) {
  .hero__row { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: 2rem; }
  .hero__statement { font-size: clamp(1.9rem, 0.9rem + 4.4vw, 3rem); }
  .panel { width: 100%; }
  }

/* Skills band */
.skills { height: var(--band); display: flex; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: clip; }
.skills__track { display: flex; width: max-content; }
.skills__list { display: flex; flex-shrink: 0; }
.skills__list li { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 1.4rem; white-space: nowrap; }
.skills__list li::after { content: '·'; margin-left: 2.8rem; color: var(--dim); }
html.reduced .skills, html:not(.js) .skills { height: auto; padding: 1rem 0; }
html.reduced .skills__track, html:not(.js) .skills__track { width: auto; flex-wrap: wrap; padding: 0 var(--gutter); }
html.reduced .skills__list[aria-hidden], html:not(.js) .skills__list[aria-hidden] { display: none; }
html.reduced .skills__list, html:not(.js) .skills__list { flex-wrap: wrap; row-gap: 0.6rem; }

/* ---------------- Selected work ----------------
   Header bar, a slow marquee of the section name, then two cards per row split by a hairline.
   Each panel shows the work whole on a muted tone from the project itself. */
.work { padding-top: var(--section); }
.section-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem; padding: 0 var(--gutter) 0.9rem; border-bottom: 1px solid var(--line); }
.section-bar__l { justify-self: start; color: var(--ink); }
.section-bar__c { justify-self: center; text-align: center; }
.section-bar__r { justify-self: end; text-align: right; }
.marquee { overflow: clip; border-bottom: 1px solid var(--line); padding: clamp(0.5rem, 0.2rem + 1vw, 1.5rem) 0; }
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; flex-shrink: 0; }
.marquee__set span { font-family: var(--f-display); font-weight: 400; font-size: clamp(4rem, 1.5rem + 9vw, 13rem); line-height: 1.02; letter-spacing: -0.05em; white-space: nowrap; padding-right: 0.3em; }
html.reduced .marquee__track { width: auto; padding: 0 var(--gutter); }
html.reduced .marquee__set + .marquee__set, html.reduced .marquee__set span + span { display: none; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-width: 0; border-bottom: 1px solid var(--line); }
.card:nth-child(odd) { border-right: 1px solid var(--line); }
.card__link { display: block; height: 100%; padding: clamp(1.75rem, 1rem + 2vw, 3rem) var(--gutter) clamp(1.75rem, 1rem + 2vw, 3rem); }
.card__link:focus-visible { outline-offset: -6px; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-width: 0; }
.card__title { min-width: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); line-height: 1; letter-spacing: -0.035em; }
.card__meta { flex-shrink: 0; }
.card__title .dot { display: inline-block; scale: 0; translate: 0 -0.35em; transform-origin: 50% 85%; transition: scale 0.45s var(--ease-land), translate 0.6s var(--ease-land); }
.card__link:hover .card__title .dot, .card__link:focus-visible .card__title .dot { scale: 1; translate: 0 0; }
.card__line { display: block; margin-top: 0.5rem; color: var(--muted); font-size: 15px; max-width: 48ch; }
/* One neutral panel for every card; the work sits in a rounded screen inside it, or fills it. */
.card__panel { position: relative; display: grid; place-items: center; margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); aspect-ratio: 16 / 11; padding: clamp(1rem, 0.4rem + 2.2vw, 2.75rem); border-radius: 10px; background: var(--panel); overflow: hidden; }
.card__screen { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--screen); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 60px rgb(0 0 0 / 0.35); }
.card--full .card__panel { padding: 0; }
.card--full .card__screen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 10px; box-shadow: none; }
.card__art, .card__film { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__art picture, .card__art img { display: block; width: 100%; height: 100%; }
.card__art img, .card__film { object-fit: cover; }
.card__film { opacity: 0; }
@media (max-width: 899px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card:nth-child(odd) { border-right: 0; }
  .section-bar { grid-template-columns: 1fr auto; }
  .section-bar__c { display: none; }
}

/* ---------------- About ---------------- */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--section) var(--gutter) 0; }
.about__label { grid-column: 1 / span 3; color: var(--ink); padding-top: 0.9rem; }
/* Author line breaks (Customizer) set the measure on wide screens; balance covers the rest. */
.about__lead { grid-column: 4 / span 8; font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1rem + 2.5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--quiet); max-width: 16.5em; text-wrap: balance; }
.about__lead em { color: var(--ink); }
.about__body { grid-column: 4 / span 4; margin-top: 2.5rem; color: var(--muted); max-width: 40ch; }
.about__more { grid-column: 4 / span 4; margin-top: 1.5rem; }
.about__details { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1rem; border-top: 1px solid var(--line); }
.about__details dd { margin-top: 0.4rem; font-size: 16px; }
.about__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(4rem, 3rem + 4vw, 8rem); }
.about__stats li { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.stat__n { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .about__label, .about__lead, .about__body, .about__details, .about__more { grid-column: 1 / -1; }
  .about__lead { margin-top: 1.25rem; max-width: none; }
  .about__lead br { display: none; }
  .about__details, .about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
}

/* ---------------- Contact ---------------- */
.contact { padding: var(--section) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.contact__title { grid-column: 1 / span 10; font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); line-height: 0.92; letter-spacing: -0.05em; color: var(--quiet); }
.contact__title em { color: var(--ink); }
.contact__sub { grid-column: 1 / span 5; margin-top: 2rem; color: var(--muted); max-width: 44ch; }
.contact__email { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.25em; margin-top: clamp(3rem, 2rem + 4vw, 6rem); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.75rem, 0.6rem + 5vw, 6rem); letter-spacing: -0.045em; line-height: 1.05; }
.contact__email span { background: linear-gradient(currentColor 0 0) left 100% / 0% 2px no-repeat; transition: background-size 0.7s var(--ease-out); padding-bottom: 0.06em; }
.contact__email svg { width: 0.6em; height: 0.6em; transition: translate 0.6s var(--ease-out), color 0.4s; }
.contact__email:hover span, .contact__email:focus-visible span { background-size: 100% 2px; }
.contact__email:hover svg, .contact__email:focus-visible svg { translate: 0.12em -0.12em; color: var(--dot); }
.contact__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.5rem; }
.contact__links a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--quiet); transition: text-decoration-color 0.3s; }
.contact__links a:hover { text-decoration-color: var(--ink); }
@media (max-width: 899px) { .contact__title, .contact__sub { grid-column: 1 / -1; } }

/* ---------------- Footer ---------------- */
.foot { border-top: 1px solid var(--line); padding: 2rem var(--gutter) var(--gutter); }
.foot__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.foot__logo { width: 200px; height: auto; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 2rem; }
.foot__links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--muted); transition: color 0.3s; }
.foot__links a:hover { color: var(--ink); }
/* Three columns, the middle one truly centred on the page whatever the sides measure. */
.foot__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.foot__left { justify-self: start; }
.foot__right { justify-self: center; text-align: center; }
.foot__top { justify-self: end; min-height: 32px; display: inline-flex; align-items: center; color: var(--ink); }
.foot__top:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 599px) {
  .foot__logo { width: 160px; }
  .foot__links { justify-content: flex-start; }
  .foot__bar { grid-template-columns: 1fr; justify-items: start; gap: 0.5rem; }
  .foot__right { justify-self: start; text-align: left; }
  .foot__top { justify-self: start; }
}

/* ---------------- Case study ----------------
   Title, a hero film in a frame that grows to full width with scroll, then a sticky story column
   beside a stack of framed films and stills. Frames: one neutral panel, a rounded screen inside. */
.cs__head { padding: calc(var(--nav-h) + clamp(1.5rem, 1rem + 2vw, 3rem)) 0 clamp(1.5rem, 1rem + 2vw, 3rem); }
.cs__head .section-bar { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.cs__head .section-bar, .more .section-bar, .cs-flow .label { font-weight: 700; }
.cs__back { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--quiet); display: inline-block; padding: 0.35rem 0; margin: -0.35rem 0; }
.cs__back:hover { text-decoration-color: var(--dot); }
.cs__title { padding: 0 var(--gutter); font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 1rem + 5.2vw, 7rem); line-height: 0.88; letter-spacing: -0.055em; margin-left: -0.04em; overflow-wrap: anywhere; }
.cs__tagline { padding: 0 var(--gutter); margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); font-size: var(--t-m); font-weight: 300; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-2); max-width: 44ch; }

.xf { display: block; min-width: 0; }
.xf__frame { padding: clamp(0.75rem, 0.3rem + 1.6vw, 2rem); border-radius: 10px; background: var(--panel); transition: translate 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.xf__media { transition: scale 0.9s var(--ease-out); }
/* Frames lift a touch on hover and the screen inside eases closer. */
@media (hover: hover) and (pointer: fine) { [data-xf]:hover .xf__frame { translate: 0 -4px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); } [data-xf]:hover .xf__media { scale: 1.015; } }
.xf__screen { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--screen); }
.xf__screen picture { display: contents; }
/* The camera: pushed in by the engine onto the part of the work a chapter is about (data-cam). */
.xf__cam { position: absolute; inset: 0; transform-origin: 0 0; }
.xf__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xf__cap { margin-top: 0.7rem; font-size: 14px; color: var(--muted); }
.xp { padding: clamp(1rem, 0.5rem + 1.5vw, 2rem) var(--gutter) 0; }
.xp .xf { transform-origin: 50% 0; margin: 0 auto; max-width: 100%; }
.xp .xf__frame { padding: clamp(1rem, 0.4rem + 2vw, 2.5rem); }

.cs-flow { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 9.6fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); padding: var(--section) var(--gutter) 0; }
.cs-aside { min-width: 0; }
.cs-static { display: grid; gap: 0; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.cs-problem { margin-top: clamp(3rem, 2rem + 2vw, 4.5rem); }
.cs-problem__h { margin-top: 1.4rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 0.7vw, 1.7rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch; }
.cs-constraints { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.cs-constraints li { display: grid; gap: 0.2rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 15px; }
.cs-constraints strong { font-weight: 600; }
.cs-constraints span { color: var(--muted); font-weight: 300; }
.cs-aside__stick { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; }
.cs-ch { grid-area: 1 / 1; min-width: 0; }
.cs-aside .cs-ch { opacity: 0; pointer-events: none; }
.cs-aside .cs-ch.is-on { opacity: 1; pointer-events: auto; }
.cs-ch__t { display: grid; gap: 0.9rem; font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 1.7vw, 3.1rem); line-height: 0.95; letter-spacing: -0.045em; }
.cs-ch__n { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.cs-ch__p { margin-top: 1.1rem; font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.cs-ch__t + .cs-ch__p { margin-top: 1.5rem; }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cs-facts dd { margin-top: 0.3rem; font-size: 15px; font-weight: 300; overflow-wrap: anywhere; }
.cs-stack { min-width: 0; display: grid; gap: 15px; }
.cs-part { display: grid; gap: 15px; }
.cs-ch--inline { display: none; }
.cs-part__spacer { height: 45svh; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--gutter); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.results li { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); min-width: 0; }
.results__n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-l); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.more { padding-top: var(--section); }

@media (max-width: 1023px) {
  .cs-flow { grid-template-columns: minmax(0, 1fr); }
  .cs-aside__stick { display: none; }
  .cs-aside__stick { position: static; }
  .cs-ch--inline { display: block; margin: 2.5rem 0 0.5rem; }
  .cs-part__spacer { display: none; }
}
@media (max-width: 599px) { .cs-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Case study from Markdown copy ---------------- */
.cs__intro { padding: 0 var(--gutter); display: grid; gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem); margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.cs--md .cs__tagline { padding: 0; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: var(--t-lead); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); max-width: 26ch; }
.cs__lede { font-weight: 300; font-size: var(--t-m); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.cs__stat { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 0.5rem; }
.cs__stat-n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-l); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }

.cs-h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.cs-h2__n { color: var(--quiet); }
.cs-h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.25rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 26ch; }
.cs-h4 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.2; letter-spacing: -0.02em; }
.cs-h4__n { color: var(--quiet); }
.cs--md p:not([class]) { font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.cs--md strong { font-weight: 600; color: var(--ink); }
.cs-lead { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.55rem, 1.05rem + 1.6vw, 2.75rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 30ch; }
.cs-lead strong { font-weight: inherit; }
.cs-principle { display: grid; gap: 0.45rem; padding: 0.15rem 0 0.15rem 1.1rem; border-left: 2px solid var(--dot); max-width: 46ch; }
.cs-principle__l { color: var(--muted); }
.cs-principle__t { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.cs-meta { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 300; color: var(--ink-2); max-width: 70ch; }
.cs-facts2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.4rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.cs-facts2 dd { margin-top: 0.45rem; font-size: 15px; font-weight: 300; line-height: 1.45; overflow-wrap: anywhere; }
.cs-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.cs-trio > div { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.cs-trio dt { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem); line-height: 1; letter-spacing: -0.04em; }
.cs-trio dt .dot { color: var(--dot); }
.cs-trio dd { margin-top: 0.8rem; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.cs-list { display: grid; max-width: 70ch; }
.cs-ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.6rem 1.5rem; max-width: 70ch; }
.cs-ol li { display: grid; grid-template-columns: 2.2rem 1fr; padding: 0.7rem 0; border-top: 1px solid var(--line); font-weight: 300; color: var(--ink-2); }
.cs-ol__n { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--quiet); padding-top: 0.2em; }
.cs-list li { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); font-weight: 300; color: var(--ink-2); }
.cs-list li:last-child { border-bottom: 1px solid var(--line); }
.cs-list li > span:only-child { grid-column: 1 / -1; }
.cs-list strong { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; }
.cs-flowsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; }
.cs-flowsteps li:not(.cs-flowsteps__arrow) { display: grid; gap: 0.5rem; padding: 1rem 1.25rem; border-radius: 10px; background: var(--panel); }
.cs-flowsteps strong { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); letter-spacing: -0.03em; }
.cs-flowsteps__arrow { color: var(--dot); font-size: 1.4rem; }
.cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.cs-step { display: grid; align-content: start; gap: 0.75rem; }
.cs-step__bar { position: relative; display: block; height: 2px; background: var(--line); overflow: hidden; }
.cs-step__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; }
.cs-step__bar i::after { content: ""; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.cs-step__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 2rem); line-height: 1; letter-spacing: -0.04em; }
.cs-step p { font-weight: 300; line-height: 1.55; color: var(--ink-2); }

.cs__visit { margin-top: 0.25rem; }
.cs__visit-a { display: inline-flex; gap: 0.4rem; align-items: baseline; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 99px; transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out); }
.cs__visit-a:hover, .cs__visit-a:focus-visible { border-color: var(--ink); background: rgb(255 255 255 / 0.06); }
.cs-facts2 a.inline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--quiet); }
.cs-facts2 a.inline::after { content: " ↗"; }
.cs-facts2 a.inline:hover { text-decoration-color: var(--dot); }

/* Static sections: heading column and reading column on a 12-column grid. */
.cs-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); padding: var(--section) var(--gutter) 0; }
.cs-sec__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 1.5rem); padding-bottom: 1.5rem; }
.cs-sec__body { grid-column: 6 / -1; min-width: 0; display: grid; align-content: start; gap: 1.15rem; }
.cs-sec__body > .cs-h3:not(:first-child), .cs-sec__body > .cs-trio, .cs-sec__body > .cs-steps, .cs-sec__body > .cs-list, .cs-sec__body > .cs-flowsteps, .cs-sec__body > .cs-facts2 { margin-top: 1.6rem; }
.cs-sec__body > .cs-lead { margin: 1.4rem 0 0.6rem; }
.cs-sec--overview .cs-sec__body > p:first-child { font-weight: 400; font-size: var(--t-m); line-height: 1.4; color: var(--ink); max-width: 46ch; }
.cs-sec--steps, .cs-sec--statement { grid-template-columns: minmax(0, 1fr); }
.cs-sec--steps .cs-sec__head, .cs-sec--statement .cs-sec__head { position: static; grid-column: 1 / -1; }
.cs-sec--steps .cs-sec__body, .cs-sec--statement .cs-sec__body { grid-column: 1 / -1; }
.cs-sec--statement .cs-sec__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 4rem); row-gap: 1.15rem; }
.cs-sec--statement .cs-h3 { grid-column: 1 / -1; margin: 0.5rem 0 clamp(1.5rem, 1rem + 2vw, 3rem); font-size: var(--t-xl); line-height: 0.92; letter-spacing: -0.055em; max-width: 13ch; }
.cs-sec--reflection .cs-sec__body > p:last-child { margin-top: 1.25rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-lead); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink-2); max-width: 26ch; }
.cs-sec--reflection .cs-sec__body > p:last-child strong { font-weight: 800; color: var(--ink); }

/* Hero square (assets/js/square.js): grounds cut between black, off-white and grey; ink follows. */
.sq { --sq-bg: #0B0B0B; --sq-ink: #fafafa; container-type: size; background: var(--sq-bg); color: var(--sq-ink); overflow: hidden; }
.sq__still { position: absolute; inset: 0; width: 100%; height: 100%; color: rgb(250 250 250 / 0.85); }
.sq__still rect { stroke: rgb(250 250 250 / 0.35); }
.sq__bg { position: absolute; inset: 0; background: var(--sq-bg); }
.sq__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sq__svg * { transform-box: view-box; }
.sq__b, .sq__word, .sq__vid, .sq__3d, .sq__tools { visibility: hidden; opacity: 0; }
.sq__ln { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sq__ln--b { stroke-width: 3; }
.sq__anc { fill: var(--sq-bg); stroke: currentColor; stroke-width: 2; transform-box: fill-box; }
.sq__hl { stroke: currentColor; stroke-width: 1; opacity: 0.6; }
.sq__hc { fill: var(--sq-bg); stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; }
.sq__tip { fill: currentColor; }
.sq__gl { stroke: rgb(0 0 0 / 0.14); stroke-width: 1; }
.sq__wire { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 6 6; }
.sq__card { filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.18)); }
.sq__bit { fill: none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.sq__word { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.05em; padding: 8cqw; font-family: var(--f-display); font-weight: 800; font-size: 12.5cqw; line-height: 0.95; letter-spacing: -0.05em; text-align: center; color: var(--sq-ink); }
.sq__mask { display: block; overflow: clip; padding-bottom: 0.08em; }
.sq__in { display: inline-block; }
.sq__ch { display: inline-block; white-space: pre; }
.sq__ul { display: block; width: 70%; height: 0.9cqw; margin-top: 2.5cqw; background: var(--dot); transform-origin: 0 50%; }
.sq__vid { position: absolute; inset: 0; display: grid; place-items: center; }
.sq__phone, .sq__browser { position: absolute; overflow: hidden; background: #000; }
.sq__phone { width: 34cqw; aspect-ratio: 1280 / 880; border-radius: 3cqw; box-shadow: 0 0 0 1px #2b2d31; }
.sq__browser { width: 80cqw; aspect-ratio: 1280 / 880; border-radius: 2cqw; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); padding-top: 4cqw; background: #161616; }
.sq__browser i { position: absolute; left: 2.5cqw; top: 1.5cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #3a3a3a; box-shadow: 1.8cqw 0 #3a3a3a, 3.6cqw 0 #3a3a3a; }
.sq__phone { width: 82cqw; }
.sq__phone video, .sq__browser video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sq__3d { position: absolute; inset: 0; display: grid; place-items: center; perspective: 120cqw; background: radial-gradient(60% 50% at 50% 45%, #1d1d1d, #0B0B0B 70%); }
.sq__m3 { position: relative; width: 52cqw; aspect-ratio: 129 / 76; transform-style: preserve-3d; }
.sq__slab { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq__sphere { position: absolute; left: 70cqw; top: 54cqw; width: 11cqw; height: 11cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8aa0 0%, #E2163A 35%, #7a0718 100%); box-shadow: 0 2cqw 4cqw rgb(0 0 0 / 0.5); }
.sq__tools { position: absolute; inset: 0; }
.sq__tool { position: absolute; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; filter: invert(1); object-fit: contain; }

/* Animated graphics inside case frames (inc/graphics.php). One frame colour, white linework, the
   product's own accent only where it carries meaning. */
.xf__screen--g { background: #0e0e0e; }
.xf__screen--phones { background: #0e0e0e; }
.xf__screen--phones > .xf__cam { display: flex; justify-content: center; align-items: center; gap: 5%; padding: 4% 6%; }
/* a phone 88% of the frame's height: width = 0.88 x (10/16) / 2.164 of the frame's width */
.xf__screen--phones .cs-phone { flex: 0 0 25.4%; margin: 0 !important; }
.g { position: absolute; inset: 0; display: grid; place-items: center; }
.g > svg { width: 100%; height: 100%; }
.g svg * { transform-box: fill-box; transform-origin: center; }
.g svg [data-a="pop"] { transform-box: view-box; transform-origin: 0 0; } /* GSAP bakes the 50% 50% origin into its SVG matrix; a CSS origin here would apply it twice */
.g-grid line { stroke: rgb(255 255 255 / 0.05); stroke-width: 1; }
.g-axis { stroke: rgb(255 255 255 / 0.55); stroke-width: 2; }
.g-mono { font-family: var(--f-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.08em; fill: var(--muted); }
.g-mono--hi { fill: var(--ink); }
.g-mono--ink { fill: #0e0e0e; }
.g-label { font-family: var(--f-body); font-size: 30px; fill: var(--ink-2); }
.g-name { font-family: var(--f-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; fill: var(--ink); }
.g-dot { fill: var(--ink); }
.g-gap { fill: rgb(232 242 99 / 0.05); stroke: #E8F263; stroke-width: 2; stroke-dasharray: 10 8; }
.g-sentry { fill: #E8F263; }
.g-ring { fill: none; stroke: #E8F263; stroke-width: 2; opacity: 0.6; animation: g-ring 2.4s var(--ease-out) infinite; }
@keyframes g-ring { from { scale: 0.5; opacity: 0.8; } to { scale: 1.6; opacity: 0; } }
.g-wire { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 2; }
.g-wire--fill { fill: rgb(255 255 255 / 0.04); }
.g-wire--dash { stroke-dasharray: 12 10; stroke: rgb(255 255 255 / 0.35); }
.g-line { stroke: rgb(255 255 255 / 0.3); stroke-width: 10; stroke-linecap: round; }
.g-pin { fill: var(--dot); }
.g-pin-n { font-family: var(--f-mono); font-weight: 700; font-size: 22px; fill: #fff; }
.g-tag { fill: var(--ink); }
.g-pal { position: absolute; inset: 0; display: grid; align-content: center; gap: 4cqh; padding: 5cqh 7cqw; font-size: 2.3cqh; }
.g-pal__row { position: relative; display: grid; grid-template-columns: 5.5em repeat(3, minmax(0, 1fr)); align-items: center; gap: 4%; }
.g-pal__k { font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-sw { display: grid; gap: 0.35em; }
.g-sw__c { display: block; aspect-ratio: 2.2 / 1; border-radius: 8px; }
.g-sw--black .g-sw__c { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.g-sw__n { font-weight: 500; color: var(--ink); }
.g-sw__h { font-family: var(--f-mono); color: var(--muted); }
.g-pal__x { position: absolute; left: 5.5em; top: 38%; width: calc((100% - 5.5em) / 3); height: 2px; background: var(--dot); transform-origin: 0 50%; rotate: -8deg; }
.g-pal__type { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4%; padding-top: 4%; border-top: 1px solid rgb(255 255 255 / 0.12); }
.g-ty { position: relative; display: grid; gap: 0.3em; font-size: 4em; line-height: 1; color: var(--ink); }
.g-ty small { font-family: var(--f-mono); font-size: 0.2em; letter-spacing: 0.06em; color: var(--muted); }
.g-ty--serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--quiet); }
.g-ty--serif i { position: absolute; left: -6%; top: 0.5em; width: 1.6em; height: 2px; background: var(--dot); transform-origin: 0 50%; rotate: -12deg; }
.g-ty--sup { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; }
.g-ty--int { font-family: var(--f-body); font-weight: 400; }
.g-ty--mono { font-family: var(--f-mono); font-weight: 500; font-size: 3.4em; }

.g-tick { stroke: rgb(255 255 255 / 0.3); stroke-width: 2; }
.g-sp { fill: #FFD700; }
.g-node { fill: #2a2a2a; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; }
.g-ring--y { stroke: #FFD700; }
.g-cards { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5%; padding: 7%; align-content: center; }
.g-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-card { position: relative; display: grid; align-content: start; gap: 0.6em; padding: 7% 8%; min-height: 0; aspect-ratio: 16 / 8; border-radius: 10px; background: #181818; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: clamp(10px, 1.1vw, 18px); overflow: hidden; transition: translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.g-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.g-card__n { font-family: var(--f-mono); font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-card__i { font-size: 1.6em; line-height: 1; color: #FFD700; }
.g-card__t { font-family: var(--f-display); font-weight: 800; font-size: 1.55em; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.g-card__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #FFD700; transform-origin: 0 50%; }
.g-card__bar--d { background: #F2AF89; }
.g-card--hi { background: #F2AF89; box-shadow: none; }
.g-card--hi .g-card__n { color: #3a2b22; }
.g-card--hi .g-card__t { color: #111; }
.g-tiers { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4%; padding: 10% 9%; align-content: center; font-size: clamp(10px, 1.1vw, 18px); }
.g-tier { display: grid; gap: 0.7em; padding: 10% 10% 12%; border-radius: 10px; background: #181818; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.g-tier b { font-family: var(--f-display); font-weight: 800; font-size: 2.2em; letter-spacing: -0.04em; line-height: 1; }
.g-tier ul { display: grid; gap: 0.4em; padding-top: 0.6em; border-top: 1px solid rgb(255 255 255 / 0.1); color: var(--ink-2); }
.g-tier--hi { background: #F2AF89; color: #111; box-shadow: none; }
.g-tier--hi .g-card__n { color: #3a2b22; }
.g-tier--hi ul { color: #2a1f19; border-color: rgb(0 0 0 / 0.15); }
.g-swot { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3%; padding: 6% 8%; font-size: clamp(9px, 1vw, 16px); }
.g-swot__q { position: relative; display: grid; align-content: start; gap: 0.5em; padding: 6% 7%; border-radius: 10px; background: #181818; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); overflow: hidden; }
.g-swot__q b { position: absolute; right: 6%; top: -6%; font-family: var(--f-display); font-weight: 800; font-size: 5.5em; line-height: 1; color: rgb(242 175 137 / 0.18); }
.g-swot__q ul { display: grid; gap: 0.35em; color: var(--ink-2); }
.g-sb { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, min(28cqw, 40cqh)); justify-content: center; gap: 2.5cqh; align-content: center; }
.g-sb img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; background: #f4f3ef; }
.g-dmp { position: absolute; inset: 0; display: grid; align-content: center; gap: 6%; padding: 6% 7%; }
.g-dmp__sw { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2%; font-size: clamp(9px, 2.3cqh, 16px); }
.g-dmp__sw div { display: grid; gap: 0.4em; }
.g-dmp__sw span { display: block; aspect-ratio: 1; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.g-dmp__sw small { color: var(--ink-2); }
.g-dmp__sw code { font-family: var(--f-mono); color: var(--muted); }
.g-dmp__type { width: 78%; height: auto; aspect-ratio: 1800 / 996; justify-self: start; }
/* Go Live, rebuilt: the product's modal over a dimmed stream. */
.g-gl { position: absolute; inset: 0; font-size: clamp(7px, 0.82vw, 13px); color: #eee; }
.g-gl__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 20%, #2c2a22 0%, #121212 60%); }
.g-gl__btn { position: absolute; left: 6%; top: 8%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1.2em; border-radius: 99px; background: #FFD700; color: #111; font-weight: 700; }
.g-gl__rec { width: 0.8em; height: 0.8em; border-radius: 50%; background: #e2163a; }
.g-gl__modal { position: absolute; left: 50%; top: 50%; width: 46%; translate: -50% -50%; display: grid; gap: 0.55em; padding: 2.2em 2em 1.8em; border-radius: 12px; background: #1d1d1f; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 80px rgb(0 0 0 / 0.6); }
.g-gl__h { display: flex; gap: 0.9em; align-items: center; margin-bottom: 0.5em; }
.g-gl__h b { display: block; font-size: 1.3em; } .g-gl__h small { color: #9a9a9a; }
.g-gl__ic { width: 2.4em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle, #e2163a 30%, #4a1a1f 32%); }
.g-gl label { font-weight: 600; font-size: 0.9em; }
.g-gl__f { position: relative; padding: 0.7em 0.9em; border-radius: 6px; background: #2a2a2d; color: #ddd; }
.g-gl__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.g-gl__tg span { display: block; } .g-gl__tg small { color: #888; } .g-gl__on { position: absolute; left: 0.9em; bottom: 0.7em; color: #FFD700 !important; background: #2a2a2d; }
.g-gl__lay { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.g-gl__opt { position: relative; display: grid; justify-items: center; gap: 0.4em; padding: 0.7em 0.4em 0.6em; border-radius: 6px; background: #2a2a2d; box-shadow: inset 0 0 0 1px #3a3a3d; font-size: 0.82em; }
.g-gl__opt--def { box-shadow: inset 0 0 0 1px #3a3a3d; }
.g-gl__pos { position: relative; width: 3.2em; height: 1.9em; border-radius: 3px; background: #111; }
.g-gl__pos::after { content: ""; position: absolute; width: 0.7em; height: 0.7em; border-radius: 2px; background: #FFD700; }
.g-gl__pos--0::after { display: none; } .g-gl__pos--1::after { right: 0.2em; top: 0.2em; } .g-gl__pos--2::after { left: 0.2em; top: 0.2em; } .g-gl__pos--3::after { right: 0.2em; bottom: 0.2em; } .g-gl__pos--4::after { left: 0.2em; bottom: 0.2em; } .g-gl__pos--5::after { right: 0; top: 0; width: 0.9em; height: 100%; }
.g-gl__sel { position: absolute; left: calc((100% - 1.2em) / 3 + 0.6em); top: 0; width: calc((100% - 1.2em) / 3); height: calc(50% - 0.3em); border-radius: 6px; box-shadow: inset 0 0 0 2px #FFD700; pointer-events: none; }
.g-gl__act { display: grid; grid-template-columns: 1fr auto; gap: 0.8em; margin-top: 0.6em; }
.g-gl__start { padding: 0.8em; border-radius: 6px; background: linear-gradient(90deg, #e2163a, #f04a24); color: #fff; font-weight: 700; text-align: center; }
.g-gl__cancel { padding: 0.8em 1.2em; border-radius: 6px; background: #2a2a2d; }
.g-gl__live { position: absolute; right: 6%; top: 8%; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.9em; border-radius: 6px; background: #e2163a; color: #fff; font-weight: 800; letter-spacing: 0.08em; }
.g-gl__live span { width: 0.6em; height: 0.6em; border-radius: 50%; background: #fff; animation: g-blink 1s steps(2) infinite; }
@keyframes g-blink { 50% { opacity: 0.2; } }

.g-link { stroke: rgb(255 255 255 / 0.28); stroke-width: 2; }
.g-spoke { stroke: #fff; stroke-width: 2.5; }
.g-overlap { fill: rgb(226 22 58 / 0.06); stroke: var(--dot); stroke-width: 2; stroke-dasharray: 10 8; }
.g-mono--red { fill: var(--dot); }
.g-node2 { fill: #1b1b1b; stroke: rgb(255 255 255 / 0.5); stroke-width: 2; }
.g-node2--resource { fill: #232323; }
.g-node2--workflow { stroke-dasharray: 6 5; }
.g-label--node { font-size: 26px; }
.g-hub { fill: #fff; }
.g-name--ink { fill: #0e0e0e; }

/* Graphics sized to their frame: font sizes follow the frame (container units), so nothing clips. */
.xf__screen--g { container-type: size; }
.g-map { position: absolute; inset: 0; font-size: 2.6cqh; }
.g-map__axis { position: absolute; left: 8%; right: 8%; top: 60%; height: 2px; background: rgb(255 255 255 / 0.55); transform-origin: 0 50%; }
.g-map__end { position: absolute; top: 65%; font-family: var(--f-mono); font-size: 0.85em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-map__end--l { left: 8%; } .g-map__end--r { right: 8%; }
.g-map__pt { position: absolute; top: 60%; translate: -50% -100%; padding-bottom: 1.6em; }
.g-map__in { display: grid; justify-items: center; gap: 0.6em; }
.g-map__pt i { position: absolute; left: 50%; margin-left: -0.45em; bottom: -0.45em; width: 0.9em; height: 0.9em; border-radius: 50%; background: #fff; }
.g-map__marks { display: flex; gap: 0.6em; }
.g-mark { width: 3.2em; height: 3.2em; filter: invert(1); }
.g-map__lbl { font-size: 1.1em; color: var(--ink-2); white-space: nowrap; }
.g-map__pt--hi .g-map__lbl { font-family: var(--f-display); font-weight: 800; color: #fff; font-size: 1.4em; }
.g-map__pt--hi i { width: 1.4em; height: 1.4em; margin-left: -0.7em; bottom: -0.7em; background: #FFD700; box-shadow: 0 0 0 0.6em rgb(255 215 0 / 0.18); animation: g-pulse 2s ease-in-out infinite; }
.g-map__sp { display: block; width: 3.6em; }
.g-map__sp img { display: block; width: 100%; height: auto; }
@keyframes g-pulse { 50% { box-shadow: 0 0 0 1.1em rgb(255 215 0 / 0); } }
.g-goals { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqh; padding: 5cqh 5cqw; font-size: 2.2cqh; }
.g-goal { display: grid; grid-template-rows: 1fr auto; gap: 1em; padding: 1.2em; border-radius: 10px; background: #181818; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); min-height: 0; overflow: hidden; transition: translate 0.5s var(--ease-out); }
.g-goal:hover { translate: 0 -4px; }
.g-goal__t { font-family: var(--f-display); font-weight: 800; font-size: 1.25em; letter-spacing: -0.03em; }
.g-goal__ui { position: relative; min-height: 0; border-radius: 8px; background: #0e0e0e; overflow: hidden; display: grid; place-items: center; }
.g-ui-live__btn, .g-ui-live__on { position: absolute; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1em; border-radius: 99px; font-weight: 700; }
.g-ui-live__btn { background: #FFD700; color: #111; animation: g-live-a 3s infinite; }
.g-ui-live__on { background: #e2163a; color: #fff; letter-spacing: 0.08em; animation: g-live-b 3s infinite; }
.g-ui-live__btn i, .g-ui-live__on i { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
.g-ui-live__btn i { background: #e2163a; }
@keyframes g-live-a { 0%, 40% { opacity: 1; scale: 1; } 46% { scale: 0.92; } 52%, 100% { opacity: 0; scale: 0.9; } }
@keyframes g-live-b { 0%, 50% { opacity: 0; scale: 0.8; } 58%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
.g-ui-react { background: radial-gradient(80% 70% at 30% 30%, #3a2f22, #121212 70%); }
.g-ui-react__count { position: absolute; left: 0.7em; top: 0.6em; display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8em; font-weight: 700; padding: 0.2em 0.6em; border-radius: 6px; background: rgb(0 0 0 / 0.55); }
.g-ui-react__count i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #e2163a; animation: g-blink 1s steps(2) infinite; }
.g-ui-react b { position: absolute; bottom: -1em; color: #FFD700; font-size: 1.4em; animation: g-float 2.6s ease-in infinite; }
.g-ui-react b:nth-of-type(1) { left: 20%; } .g-ui-react b:nth-of-type(2) { left: 40%; animation-delay: 0.5s; color: #fff; } .g-ui-react b:nth-of-type(3) { left: 58%; animation-delay: 1s; } .g-ui-react b:nth-of-type(4) { left: 74%; animation-delay: 1.5s; color: #e2163a; } .g-ui-react b:nth-of-type(5) { left: 86%; animation-delay: 2s; }
@keyframes g-float { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: 0.6em -7em; opacity: 0; } }
.g-gem { position: absolute; width: 2.2em; height: 3em; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); animation: g-gem 2.4s ease-in-out infinite; }
.g-gem--g { left: 22%; top: 18%; background: linear-gradient(160deg, #e9ff8a, #7bd400 60%, #3c7a00); }
.g-gem--y { left: 44%; top: 10%; background: linear-gradient(160deg, #fff3a6, #ffc400 60%, #a86f00); animation-delay: 0.3s; }
.g-gem--r { left: 66%; top: 18%; background: linear-gradient(160deg, #ffb3a6, #ff3b1f 60%, #8f1300); animation-delay: 0.6s; }
@keyframes g-gem { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.5em; } }
.g-ui-gems__coins { position: absolute; bottom: 0.8em; display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: #ddd; }
.g-ui-gems__coins i { width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a6, #FFD700 50%, #b88a00); }
.g-ui-gems__coins b { color: #FFD700; }
.g-ui-kpi { grid-template-columns: 1fr 1fr; gap: 0.6em; padding: 0.8em; align-content: start; place-items: stretch; }
.g-ui-kpi span { display: grid; gap: 0.2em; padding: 0.5em 0.6em; border-radius: 6px; background: #161616; box-shadow: inset 0 0 0 1px rgb(255 215 0 / 0.25); }
.g-ui-kpi small { font-family: var(--f-mono); font-size: 0.55em; color: #888; letter-spacing: 0.1em; }
.g-ui-kpi b { font-family: var(--f-mono); font-weight: 500; }
.g-ui-kpi svg { grid-column: 1 / -1; width: 100%; height: 2.2em; }
.g-ui-kpi path { fill: none; stroke: #FFD700; stroke-width: 2; vector-effect: non-scaling-stroke; }
.g-team { position: absolute; inset: 0; display: grid; align-content: center; gap: 8cqh; padding: 0 7cqw; font-size: 2.4cqh; }
.g-team__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.g-team__card { display: grid; justify-items: center; gap: 0.7em; padding: 1.2em 0.6em; border-radius: 10px; background: #181818; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); text-align: center; color: var(--ink-2); }
.g-team__card.is-me { box-shadow: inset 0 0 0 1.5px #FFD700; color: #fff; }
.g-team__av { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: #2a2a2a; font-family: var(--f-display); font-weight: 800; color: #fff; }
.g-team__card.is-me .g-team__av { background: #FFD700; color: #111; }
.g-team__line { position: relative; height: 4em; }
.g-team__track { position: absolute; left: 0; right: 0; top: 0.5em; height: 2px; background: rgb(255 255 255 / 0.15); }
.g-team__track i { position: absolute; inset: 0; background: #FFD700; transform-origin: 0 50%; }
.g-team__st { position: absolute; top: 0; translate: -50% 0; font-family: var(--f-mono); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.g-team__st:nth-child(2) { translate: 0 0; } .g-team__st:last-child { translate: -100% 0; }
.g-team__in { display: grid; justify-items: center; gap: 0.6em; }
.g-team__st:nth-child(2) .g-team__in { justify-items: start; } .g-team__st:last-child .g-team__in { justify-items: end; }
.g-team__st i { width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.g-pres { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 2.5cqh; padding: 5cqh; font-size: 2.3cqh; }
.g-pres__stream { position: relative; border-radius: 8px; overflow: hidden; background: radial-gradient(70% 60% at 35% 40%, #4b3a24, #1a1611 60%, #0d0d0d), #111; }
.g-pres__stream::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 14px); }
.g-pres__live { position: absolute; left: 0.8em; top: 0.8em; z-index: 2; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.6em; border-radius: 6px; background: #e2163a; color: #fff; font-weight: 800; font-size: 0.8em; letter-spacing: 0.08em; }
.g-pres__live i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; animation: g-blink 1s steps(2) infinite; }
.g-pres__viewers { position: absolute; right: 0.8em; top: 0.8em; z-index: 2; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.25em 0.6em; border-radius: 6px; background: rgb(0 0 0 / 0.6); font-size: 0.8em; }
.g-pres__viewers i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #FFD700; animation: g-pulse 2s ease-in-out infinite; }
.g-pres__fx b { position: absolute; bottom: 0; left: calc(12% + var(--i) * 8%); color: #FFD700; font-size: 1.6em; animation: g-float 3s ease-in calc(var(--i) * 0.3s) infinite; opacity: 0; }
.g-pres__fx b:nth-child(3n) { color: #fff; } .g-pres__fx b:nth-child(4n) { color: #e2163a; }
.g-pres__chat { display: grid; align-content: start; gap: 0.6em; padding: 0.8em; border-radius: 8px; background: #141414; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 0.85em; color: #ddd; overflow: hidden; }
.g-pres__h { font-family: var(--f-mono); font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.g-pres__chat b { color: #FFD700; font-weight: 700; }
/* Go Live fits its frame at every size (font follows the frame's height). */
.g-gl { font-size: 2.25cqh !important; }
.g-gl__modal { inset: 0; margin: auto; translate: none !important; height: fit-content; width: 76cqh !important; max-height: 94cqh; }

/* Phone showcase: clean bezels on the neutral panel, staggered, each screen looping. */
.cs-show { padding: var(--section) var(--gutter) 0; }
.cs-show__label { margin-bottom: 1.25rem; font-weight: 700; }
.cs-show__stage { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.6vw, 32px); padding: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(1rem, 0.5rem + 2vw, 3rem); border-radius: 10px; background: var(--panel); overflow: hidden; }
.cs-phone { flex: 0 1 clamp(120px, 13vw, 250px); min-width: 0; }
.cs-phone:nth-child(even) { margin-top: clamp(2rem, 1rem + 4vw, 6rem); }
.cs-phone:nth-child(odd) { margin-bottom: clamp(2rem, 1rem + 4vw, 6rem); }
.cs-phone__bezel { position: relative; padding: 3.4%; border-radius: 15% / 7%; background: #0b0c0e; box-shadow: 0 0 0 1.5px #2b2d31, inset 0 0 0 1px #3a3d42, 0 30px 70px rgb(0 0 0 / 0.5); transition: translate 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.cs-phone__bezel::after { content: ""; position: absolute; z-index: 2; top: 4.6%; left: 50%; width: 30%; aspect-ratio: 92 / 27; translate: -50% 0; border-radius: 99px; background: #000; }
.cs-phone__screen { position: relative; aspect-ratio: 390 / 844; border-radius: 12.5% / 5.8%; overflow: hidden; background: #000; }
.cs-phone__screen video, .cs-phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) { .cs-phone:hover .cs-phone__bezel { translate: 0 -10px; box-shadow: 0 0 0 1.5px #3a3d42, inset 0 0 0 1px #3a3d42, 0 44px 90px rgb(0 0 0 / 0.6); } }
@media (max-width: 599px) {
  .cs-show__stage { flex-wrap: wrap; gap: 14px; padding: 2rem 1.25rem; }
  .cs-phone { flex: 0 0 calc(50% - 7px); }
  .cs-phone:nth-child(even) { margin-top: 2.5rem; }
  .cs-phone:nth-child(odd) { margin-bottom: 0; }
}

/* Flow: the sticky column swaps panels in place while the matching media scroll by. */
.cs-flow2 { display: grid; grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); column-gap: clamp(2rem, 1rem + 3vw, 5rem); padding: var(--section) var(--gutter) 0; }
@media (max-width: 1279px) { .cs-flow2 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); } }
.cs-flow2__text { position: sticky; top: calc(var(--nav-h) + 1rem); max-height: calc(100svh - var(--nav-h) - 2rem); display: grid; align-items: start; align-self: start; min-width: 0; }
.cs-pn { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; min-width: 0; opacity: 0; pointer-events: none; }
.cs-pn.is-on { opacity: 1; pointer-events: auto; }
.cs-pn--tall { align-self: start; align-content: start; translate: 0 var(--sy, 0px); }
@media (max-width: 1023px) { .cs-pn--tall { translate: none; padding-top: 0; } }
.cs-flow2__head { grid-column: 1 / -1; margin-bottom: clamp(2rem, 1rem + 2vw, 3.5rem); }
.cs-flow2__head .cs-h2, .cs-pn .cs-h2 { text-wrap: nowrap; }
@media (max-width: 1279px) { .cs-flow2__head .cs-h2, .cs-pn .cs-h2 { text-wrap: balance; } }
.cs-pn .cs-h2 { margin-bottom: 0.4rem; font-size: clamp(1.5rem, 0.55rem + 1.3vw, 2.5rem); }
.cs-pn p:not([class]) { font-size: clamp(0.98rem, 0.94rem + 0.15vw, 1.05rem); line-height: 1.55; max-width: 70ch; }
.cs-pn .cs-h3 { font-size: clamp(1.3rem, 1rem + 0.9vw, 1.9rem); }
.cs-pn .cs-h4 { margin-top: 0.5rem; }
/* In the sticky column a list item reads as a bold lead-in and its text, stacked at full width. */
.cs-pn .cs-list { max-width: 70ch; }
.cs-pn .cs-meta { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
.cs-pn .cs-list li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.85rem 0; }
.cs-pn .cs-list li span, .cs-pn p:not([class]) { max-width: 70ch; }
.cs-flow2__media { display: grid; gap: 15px; min-width: 0; }
.cs-pm { display: grid; gap: 15px; min-width: 0; }
.cs-pm__spacer { height: 60svh; }
.cs-flow2--flat, .cs-flow2--flat .cs-flow2__text { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .cs-flow2--flat .cs-flow2__text, .cs-flow2--flat .cs-flow2__media { display: contents; }
  .cs-flow2--flat .cs-pn { order: var(--o); opacity: 1; pointer-events: auto; max-width: 62ch; margin-top: 3rem; }
  .cs-flow2--flat .cs-pm { order: var(--o); margin-top: 1.5rem; }
  .cs-flow2--flat .cs-pm__spacer { display: none; }
}
@media (max-width: 1023px) {
  .cs-sec { grid-template-columns: minmax(0, 1fr); }
  .cs-sec__head { position: static; grid-column: 1 / -1; }
  .cs-sec__body { grid-column: 1 / -1; }
  .cs-sec--statement .cs-sec__body { grid-template-columns: minmax(0, 1fr); }
  .cs-trio, .cs-steps { grid-template-columns: minmax(0, 1fr); }
  .cs-flow2 { display: flex; flex-direction: column; }
  .cs-flow2__text, .cs-flow2__media { display: contents; }
  .cs-flow2__head { order: -1; margin-bottom: 0; }
  .cs-pn { order: var(--o); opacity: 1; pointer-events: auto; margin-top: 3rem; width: 100%; max-width: 100%; }
  .cs-pm { width: 100%; }
  .cs-pm { order: var(--o); margin-top: 1.5rem; }
  .cs-pm__spacer { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) { .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .cs-list li, .cs-meta { grid-template-columns: minmax(0, 1fr); }
  .cs-flowsteps { flex-direction: column; align-items: stretch; }
  .cs-flowsteps__arrow { rotate: 90deg; align-self: center; }
}

/* ---------------- About page ---------------- */
/* Hero: headline, lead and quote as one composition with the portrait just behind the headline's end. */
.ab-hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); align-items: end; padding: calc(var(--nav-h) + clamp(2rem, 1rem + 3vw, 4rem)) var(--gutter) 0; }
.ab-hero__text { position: relative; z-index: 2; grid-column: 1 / span 8; grid-row: 1; align-self: center; padding-bottom: clamp(2rem, 1rem + 4vw, 5rem); }
.ab-hero__label { font-weight: 700; }
.ab-hero__label .dot { color: var(--dot); }
.ab-hero__title { margin-top: clamp(1rem, 0.6rem + 1.4vw, 2rem); font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 1rem + 5.4vw, 7.4rem); line-height: 0.92; letter-spacing: -0.055em; max-width: 9ch; }
.ab-hero__lead { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--ink-2); max-width: 26ch; }
.ab-quote { margin: clamp(1.75rem, 1rem + 2vw, 3rem) 0 0; padding-left: 1.1rem; border-left: 2px solid var(--dot); max-width: 34ch; }
.ab-quote p { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.ab-quote .dot { color: var(--dot); }
.ab-quote figcaption { margin-top: 0.8rem; color: var(--muted); }
.ab-photo { position: relative; margin: 0; }
.ab-photo picture, .ab-photo img { display: block; width: 100%; height: auto; }
/* The cut-out sits straight on the black page; its lower edge fades out where the frame cuts the torso. */
.ab-photo--hero { z-index: 1; grid-column: 7 / -1; grid-row: 1; align-self: end; justify-self: center; width: min(100%, 34rem); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }
.ab-bio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); padding: var(--section) var(--gutter) 0; }
.ab-bio__text { display: grid; gap: 1.2rem; }
.ab-bio__text p { font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.ab-bio__text p:first-child { font-weight: 400; font-size: var(--t-m); line-height: 1.42; color: var(--ink); }
.ab-bio__side { display: grid; align-content: start; gap: 2.5rem; }
.ab-facts { display: grid; gap: 1.1rem; }
.ab-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ab-facts dd { font-weight: 300; }
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.ab-stats li { display: grid; gap: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ab-stats .stat__n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-l); line-height: 1; letter-spacing: -0.045em; }
.ab-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ab-skills li { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; color: var(--ink-2); }
.ab-bring { padding: var(--section) var(--gutter) 0; }
.ab-grid { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 1100px) { .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ab-grid { grid-template-columns: minmax(0, 1fr); } }
.ab-card { display: grid; align-content: start; gap: 0.9rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 10px; background: var(--panel); transition: translate 0.6s var(--ease-out), background-color 0.6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ab-card:hover { translate: 0 -4px; background: #222; } }
.ab-card__n { color: var(--quiet); font-weight: 700; }
.ab-card__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.75rem); line-height: 1.05; letter-spacing: -0.035em; }
.ab-card p { font-weight: 300; line-height: 1.55; color: var(--ink-2); }
/* Beyond the screen: heading and paragraph at a comfortable measure, interests as chips, then the
   closing line as the section's statement. */
.ab-beyond { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: end; padding: var(--section) var(--gutter) 0; }
.ab-beyond__text { display: grid; align-content: start; gap: 1.2rem; }
.ab-beyond__text p { font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.ab-chips li { padding: 0.45rem 0.9rem; border-radius: 99px; background: var(--panel); font-size: 14px; color: var(--ink); transition: background-color 0.4s var(--ease-out), translate 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ab-chips li:hover { background: #262626; translate: 0 -2px; } }
.ab-statement { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 1rem + 3.4vw, 4.8rem); line-height: 0.98; letter-spacing: -0.05em; color: var(--ink); max-width: 16ch; }
.ab-statement .dot { color: var(--dot); }
.page--about .contact { margin-top: var(--section); }
@media (max-width: 1023px) {
  .ab-hero, .ab-bio, .ab-beyond { grid-template-columns: minmax(0, 1fr); }
  .ab-hero__text, .ab-photo--hero { grid-column: 1 / -1; grid-row: auto; }
  .ab-hero__text { padding-bottom: 1rem; }
  .ab-photo--hero { width: min(100%, 26rem); }
  .ab-bio__side { margin-top: 3rem; }
  .ab-statement { margin-top: 3rem; }
}

/* Download resume: a link with an arrow-down, in the nav, menu, contact and footer. */
.resume-link { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.resume-link svg { width: 0.95em; height: 0.95em; transition: translate 0.4s var(--ease-out); }
.resume-link:hover svg, .resume-link:focus-visible svg { translate: 0 2px; }
.resume-menu { position: relative; display: inline-flex; }
.resume-menu__btn { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.resume-menu.is-open .resume-menu__btn svg { translate: 0 2px; }
.resume-menu__list { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; min-width: min(17.5rem, calc(100vw - 2 * var(--gutter))); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: rgb(14 14 14 / 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.55); font-family: var(--f-body, inherit); font-size: 15px; letter-spacing: 0; text-transform: none; }
.resume-menu.is-up .resume-menu__list { top: auto; bottom: calc(100% + 10px); }
.contact__links .resume-menu__list { right: auto; left: 0; }
.resume-menu.is-left .resume-menu__list { right: auto; left: 0; }
.resume-menu.is-right .resume-menu__list { left: auto; right: 0; }
.resume-menu__list:not([hidden]) { animation: rm-in 0.28s var(--ease-out); }
@keyframes rm-in { from { opacity: 0; translate: 0 -6px; } }
.resume-menu.is-up .resume-menu__list:not([hidden]) { animation-name: rm-in-up; }
@keyframes rm-in-up { from { opacity: 0; translate: 0 6px; } }
.resume-menu__list li { display: block; }
.resume-menu .resume-menu__item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.55rem 0.8rem; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color 0.2s; }
.resume-menu__item:hover, .resume-menu__item:focus-visible { background: rgb(255 255 255 / 0.07); outline: none; }
.resume-menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--ink); }
.resume-menu__f { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.resume-menu__item svg { width: 0.95em; height: 0.95em; color: var(--dot); transition: translate 0.4s var(--ease-out); }
.resume-menu__item:hover svg, .resume-menu__item:focus-visible svg { translate: 0 2px; }
.contact__links .resume-menu__btn { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--quiet); transition: text-decoration-color 0.3s; }
.contact__links .resume-menu__btn:hover { text-decoration-color: var(--ink); }
.foot__links .resume-menu__btn { color: var(--muted); transition: color 0.3s; }
.foot__links .resume-menu__btn:hover, .foot__links .resume-menu.is-open .resume-menu__btn { color: var(--ink); }
.nav__resume .resume-menu__btn { min-height: 40px; }
.nav__resume .resume-menu__btn:hover, .nav__resume.is-open .resume-menu__btn { color: var(--dot); }
@media (prefers-reduced-motion: reduce) { .resume-menu__list:not([hidden]) { animation: none; } }
.nav__right { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 0.5rem + 1.2vw, 2rem); }
.nav__resume { min-height: 40px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.nav__resume:hover { color: var(--dot); }
@media (max-width: 899px) { .nav__right { display: none; } }

/* Reading sections sit in a centred column on wide screens; the wordmark band, marquees, hero
   media frames and the work grid stay full-bleed. */
:root { --cap: 1440px; }
:is(.cs__head, .cs-sec, .cs-flow2, .cs-show, .ab-hero, .ab-bio, .ab-bring, .ab-beyond, .about, .contact) { max-width: calc(var(--cap) + 2 * var(--gutter)); margin-inline: auto; }

/* ---------------- 404 and plain pages ---------------- */
.lost { min-height: 100svh; padding: calc(var(--nav-h) + 6rem) var(--gutter) var(--section); }
.lost__title { margin-top: 1.25rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-mega); line-height: 0.9; letter-spacing: -0.05em; }
.lost__body { margin-top: 1.5rem; color: var(--muted); max-width: 40ch; }
.lost__list { margin-top: 4rem; border-bottom: 1px solid var(--line); }
.lost__list a { display: flex; align-items: baseline; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); font-family: var(--f-display); font-weight: 500; font-size: var(--t-m); letter-spacing: -0.02em; transition: padding-left 0.6s var(--ease-out); }
.lost__list a:hover, .lost__list a:focus-visible { padding-left: 0.5rem; }
.plain { padding: calc(var(--nav-h) + 6rem) var(--gutter) var(--section); max-width: 52rem; }
.plain__title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-l); letter-spacing: -0.04em; line-height: 1; }
.plain__body { margin-top: 2rem; color: var(--ink-2); }
.plain__body > * + * { margin-top: 1rem; }
.plain__body a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------------- Motion off ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .nav { transition: background-color 0.2s linear, color 0.2s linear !important; }
}

/* Red, in a few deliberate places only: the chapter dash and full stop (as in the logo), the
   Visit site arrow, the stat underline and the step numbers. */
.cs-h2__d { color: var(--dot); }
:is(.cs-flow2__head, .cs-sec__head) .cs-h2::after { content: "."; color: var(--dot); }
.cs__visit-a span[aria-hidden] { color: var(--dot); }
.cs__stat-n { text-decoration: underline; text-decoration-color: var(--dot); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em; }
.cs-flowsteps .label { color: var(--dot); }

/* One marquee per case study, across its first still: the project name in Supreme. */
.xf__marq { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2; overflow: hidden; pointer-events: none; padding: 0.4em 0; background: linear-gradient(180deg, rgb(10 10 10 / 0), rgb(10 10 10 / 0.55) 30%, rgb(10 10 10 / 0.55) 70%, rgb(10 10 10 / 0)); container-type: inline-size; }
.xf__marq-track { display: flex; width: max-content; font-family: var(--f-display); font-weight: 800; font-size: 7.5cqi; line-height: 1; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.xf__marq-track span { padding-right: 0.5em; }
.xf__marq-track span::after { content: "."; color: var(--dot); }

/* ---------------- Pointer ----------------
   Drawn by assets/js/cursor.js on fine pointers only. html.has-cur is set only once it has drawn,
   so the system cursor is never hidden without a replacement. Text fields keep the caret. */
html.has-cur, html.has-cur * { cursor: none !important; }
html.has-cur :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"]) { cursor: text !important; }
.cur { position: fixed; inset: 0 auto auto 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
/* The dot and ring layer inverts whatever is under it, so it reads on black and on the light square. */
.cur--x { mix-blend-mode: difference; }
.cur.is-on { opacity: 1; }
.cur.is-text { opacity: 0; }
.cur__dot, .cur__ring, .cur__blob, .cur__red { position: absolute; left: 0; top: 0; will-change: transform; }
.cur__dot::before, .cur__ring::before, .cur__red::before { content: ""; position: absolute; border-radius: 50%; transition: scale 0.35s var(--ease-out), opacity 0.2s; }
.cur__dot::before { left: -4px; top: -4px; width: 8px; height: 8px; background: #fff; }
.cur__ring::before { left: -17px; top: -17px; width: 34px; height: 34px; border: 1px solid #fff; }
.cur__red::before { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: var(--dot); scale: 0; }
/* Links and buttons: the ring opens, the dot becomes the red full stop. */
.cur.is-link .cur__ring::before { scale: 1.65; opacity: 0.7; }
.cur.is-link .cur__dot::before { scale: 0; }
.cur.is-link .cur__red::before { scale: 1; }
/* Work and media: a disc with a label, the red stop dropping in after it. */
.cur__blob::before { content: ""; position: absolute; left: -55px; top: -55px; width: 110px; height: 110px; border-radius: 50%; background: var(--ink); scale: 0; transition: scale 0.5s var(--ease-land); }
.cur__label { position: absolute; left: 0; top: 0; translate: -50% -50%; display: inline-flex; align-items: baseline; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0a0a0a; white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.cur__stop { display: inline-block; width: 6px; height: 6px; margin-left: 1px; border-radius: 50%; background: var(--dot); opacity: 0; translate: 0 -22px; transition: translate 0.55s var(--ease-land) 0.14s, opacity 0.15s 0.14s; }
.cur.is-label .cur__blob::before { scale: 1; }
.cur.is-label .cur__label { opacity: 1; transition-delay: 0.08s; }
.cur.is-label .cur__stop { opacity: 1; translate: 0 0; }
.cur.is-label .cur__ring::before, .cur.is-label .cur__dot::before { scale: 0; }
/* Pressed: a quick squash. */
.cur.is-down .cur__ring::before, .cur.is-down.is-label .cur__blob::before { scale: 0.86 0.78; transition-duration: 0.12s; }
.cur.is-down.is-link .cur__ring::before { scale: 1.4 1.25; }
.cur.is-down .cur__dot::before, .cur.is-down.is-link .cur__red::before { scale: 0.7; }
@media (prefers-reduced-motion: reduce) { .cur__ring, .cur__blob { display: none; } .cur__dot::before, .cur__red::before { transition: none; } }
@media not ((hover: hover) and (pointer: fine)) { .cur { display: none; } }

/* Graphics shown as still frames: their looping accents rest, so only the chosen frames keep moving. */
.g--sp-landscape *, .g--sp-golive *, .g--ls-landscape * { animation: none !important; }

/* SharePlay 04: the founder's recording, centred in the frame, at most 1.5x its 560px width. */
.g-rec { position: absolute; inset: 0; display: grid; place-items: center; padding: 4%; }
.g-rec__v { display: block; width: min(100%, 840px); height: auto; max-height: 100%; aspect-ratio: 560 / 290; object-fit: contain; border-radius: 6px; }

/* Lightbox (assets/js/lightbox.js). */
[data-lb] { cursor: zoom-in; }
[data-lb]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 10px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { --px: clamp(3.5rem, 2rem + 4vw, 6.5rem); --py: clamp(3.25rem, 2rem + 3vw, 5rem); --sw: calc(100vw - 2 * var(--px)); --sh: calc(100svh - 2 * var(--py)); position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgb(0 0 0 / 0.94); color: var(--ink); overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.lb[hidden] { display: none; }
.lb__stage { display: grid; place-items: center; width: var(--sw); height: var(--sh); }
.lb__media { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; }
.lb__i, .lb__v { display: block; width: min(var(--sw), calc(var(--sh) * var(--lb-r, 1.6)), calc(var(--lb-w, 1920px) * 1.5)); height: auto; aspect-ratio: var(--lb-r, 1.6); object-fit: contain; border-radius: 8px; background: var(--screen); }
.lb__g { position: relative; width: min(var(--sw), calc(var(--sh) * 1.6)); aspect-ratio: 16 / 10; container-type: size; border-radius: 8px; overflow: hidden; background: #0e0e0e; }
.lb__count { position: absolute; left: 50%; bottom: calc(var(--py) / 2); translate: -50% 50%; margin: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.lb__btn { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgb(0 0 0 / 0.6); color: var(--ink); cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
.lb__btn:hover { background: var(--ink); color: var(--black); border-color: var(--ink); }
.lb__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lb__btn svg { width: 1.25rem; height: 1.25rem; }
.lb__btn--prev { left: calc((var(--px) - 3rem) / 2); }
.lb__btn--next { right: calc((var(--px) - 3rem) / 2); }
@media (max-width: 599px) { .lb { --px: 0.75rem; --py: 4.5rem; } .lb__btn { top: auto; bottom: calc(var(--py) / 2); translate: 0 50%; } .lb__btn--prev { left: 1rem; } .lb__btn--next { right: 1rem; } }