/* Mathey Frame. Colours come from tokens.json (dark) and tokens.light.json (light); the four solids
   (cobalt, magenta, acid, crimson) and everything on a photo stay the same in both modes.
   Photos are never washed or filtered. Transforms and opacity are the only animated properties.
   The preview bar is host-owned: its height is only ever READ, through --tovu-theme-preview-height. */

@font-face { font-family: 'Bricolage Grotesque'; src: url("../assets/fonts/bricolage-grotesque-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url("../assets/fonts/hanken-grotesk-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url("../assets/fonts/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bar: var(--tovu-theme-preview-height, 0px);
  --header-h: 60px;
  --top: calc(var(--bar) + var(--header-h));
  --stage: calc(100vh - var(--top));
  --gutter: clamp(18px, 3.4vw, 56px);
  --cap: 72vh;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-wipe: cubic-bezier(.77, 0, .18, 1);
  --spring: cubic-bezier(.2, 1.25, .35, 1);
  --radius: 10px;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --stage: calc(100svh - var(--top)); --cap: 72svh; } }
:root[data-theme="light"] { color-scheme: light; }
html:has(.tovu-theme-preview-host) { --bar: var(--tovu-theme-preview-height, 44px); }

/* ---------- cloak ----------
   kUInetic's own cloak CSS arrives with its footer script, after first paint, so the rule lives here in
   <head>. The second selector list is what frame.js sets up itself. Everything releases after 2s if a
   script dies, and nothing is hidden with JS off (scripting) or under reduced motion. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html[data-kui-cloak] :is([data-kui~=fade-up], [data-kui~="fade-up,"], [data-kui~=split-chars], [data-kui~="split-chars,"]):not([data-kui-state]),
  html.motion:not(.frame-on) :is(.burst-main, .sat, .burst-word, .finder, .burst-lede, .page-title, .plate-hero, .ring-mask, .ring-row figure) {
    opacity: 0; animation: kui-cloak-release 1ms linear 2s forwards;
  }
}
@keyframes kui-cloak-release { to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* Slanted cards and bursting photos may pass the page edge. Clipped here, not on the root, whose overflow
   would propagate to the viewport and only hide the overflow. clip keeps position: sticky working. */
main, .site-footer { overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 3px; }
.lb { cursor: zoom-in; }
.skip-link { position: fixed; left: 12px; top: calc(var(--bar) + 8px); z-index: 60; padding: 10px 16px; background: var(--fg); color: var(--bg); font-size: .875rem; text-decoration: none; transform: translateY(-300%); }
.skip-link:focus { transform: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: var(--bar); z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark, .brand-mark figure { display: block; width: 32px; height: 32px; }
.brand-mark img { width: 32px; height: 32px; object-fit: contain; filter: var(--mark-filter); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; white-space: nowrap; }
.main-nav { display: flex; gap: 24px; margin-left: auto; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; }
.main-nav a, .main-nav .menu-item-label { text-decoration: none; }
.main-nav > .menu-list { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.main-nav .menu-item { position: relative; list-style: none; }
.main-nav .menu-item > a, .main-nav .menu-item > .menu-item-label { display: inline-block; padding: 8px 0; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 transparent; }
.main-nav .menu-item > a:hover, .main-nav .menu-item > a[aria-current="page"], .main-nav .menu-item > .menu-item-label:hover { color: var(--accent-text); }
.main-nav .menu-list .menu-list { position: absolute; top: 100%; left: -14px; min-width: 200px; margin: 0; padding: 8px; list-style: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.main-nav .menu-item:hover > .menu-list, .main-nav .menu-item:focus-within > .menu-list { opacity: 1; visibility: visible; transform: none; }
.main-nav .menu-list .menu-list a { display: block; padding: 7px 10px; }
.main-nav .menu-list .menu-list a:hover { background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.theme-toggle, .nav-toggle, .mnav-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.theme-toggle:hover, .nav-toggle:hover, .mnav-close:hover { border-color: var(--border-strong); background: var(--surface-2); }
.theme-toggle svg { width: 19px; height: 19px; }
:root[data-theme="light"] .icon-sun, :root:not([data-theme="light"]) .icon-moon { display: none; }
.nav-toggle { display: none; }
.site-header.nav-compact .main-nav { display: none; }
.site-header.nav-compact .nav-toggle { display: inline-flex; }
@media (max-width: 900px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; } }
html.mnav-open, html.mnav-open body { overflow: hidden; }
.mnav { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--bg); color: var(--fg); }
.mnav::backdrop { background: rgba(0, 0, 0, .5); }
.mnav-panel { display: flex; flex-direction: column; height: 100%; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--bar) + 10px) 20px 10px; border-bottom: 1px solid var(--border); }
.mnav-body { flex: 1; overflow-y: auto; padding: 12px 20px 32px; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list .mnav-list { padding: 0 0 10px 14px; }
.mnav-list[hidden] { display: none; }
.mnav-row { display: flex; align-items: center; gap: 4px; }
.mnav-link, .mnav-disclose-label { flex: 1; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.mnav-list .mnav-list .mnav-link { font-size: 1.2rem; min-height: 44px; }
.mnav-link[aria-current="page"] { color: var(--accent-text); }
.mnav-disclose { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; }
.mnav-disclose svg { width: 18px; height: 18px; flex: none; transition: transform .18s ease; }
.mnav-disclose[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- the viewfinder motif, shared ---------- */
.vf { position: absolute; inset: clamp(8px, 3%, 18px); z-index: 3; pointer-events: none; }
.vf i { position: absolute; display: block; width: clamp(14px, 11%, 34px); aspect-ratio: 1; border: 0 solid #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,.65)); }
.vf .c1 { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.vf .c2 { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.vf .c3 { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.vf .c4 { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.vf .vf-dot { left: clamp(8px, 4%, 16px); top: clamp(8px, 4%, 16px); width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 1px rgba(0,0,0,.45); aspect-ratio: auto; }
html.frame-on .vf i { opacity: 0; transition: opacity .3s ease .55s, transform .7s var(--spring) .55s; }
html.frame-on .vf .c1 { transform: translate(-14px, -14px); }
html.frame-on .vf .c2 { transform: translate(14px, -14px); }
html.frame-on .vf .c3 { transform: translate(-14px, 14px); }
html.frame-on .vf .c4 { transform: translate(14px, 14px); }
html.frame-on .vf .vf-dot { transform: scale(3); transition-delay: .85s; }
html.frame-on .is-in > div > .vf i, html.frame-on .is-in > .vf i { opacity: 1; transform: none; }
.slant-card { position: absolute; display: block; z-index: -1; inset: -6% -8%; border-radius: 12px; background: var(--tint2, var(--surface-2)); transform: skewX(-9deg); }

/* ---------- home: burst ---------- */
.burst-stage { position: relative; }
.burst-field { position: relative; height: var(--stage); min-height: 460px; overflow: hidden; }
.sat { position: absolute; z-index: 0; left: var(--x); top: var(--y); width: min(calc(var(--w) * 1vw), calc(var(--w) * 1.9svh)); translate: -50% -50%; rotate: var(--r); will-change: transform; }
.sat img { width: 100%; border-radius: var(--radius); }
.burst-main { position: absolute; z-index: 2; left: 50%; top: 3%; height: 68%; aspect-ratio: 1212 / 1482; transform: translateX(-50%); }
.burst-main img { width: 100%; height: 100%; object-fit: cover; }
.burst-word { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: clamp(6px, 2svh, 18px); margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: min(10.6vw, 24svh); line-height: 1; letter-spacing: -.045em; white-space: nowrap; --kui-mask-bleed: .14em; }
.finder { position: absolute; z-index: 3; pointer-events: none; left: 50%; top: 3%; height: 68%; aspect-ratio: 1212 / 1482; transform: translateX(-50%); }
.finder-line { position: absolute; display: block; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.6); }
.finder-t, .finder-b { left: 0; right: 0; height: 1px; transform-origin: left; }
.finder-l, .finder-r { top: 0; bottom: 0; width: 1px; transform-origin: top; }
.finder-t { top: 0; } .finder-b { bottom: 0; } .finder-l { left: 0; } .finder-r { right: 0; }
.finder-focus { position: absolute; left: 44%; top: 27%; display: block; width: 26%; aspect-ratio: 1; border: 1.5px solid #fff; box-shadow: 0 0 1px rgba(0,0,0,.6); }
.finder-dot { position: absolute; left: -6px; top: -6px; display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.burst-lede { max-width: 62ch; margin: 18px auto 0; padding: 0 var(--gutter); font-size: 1.1rem; }
html.frame-on .burst { height: calc(var(--stage) + 210svh); }
html.frame-on .burst-stage { position: sticky; top: var(--top); height: var(--stage); min-height: 460px; }
html.frame-on .burst-field { position: absolute; inset: 0; height: auto; min-height: 0; }
html.frame-on .burst-main { left: 0; top: 0; height: auto; aspect-ratio: auto; transform-origin: 0 0; will-change: transform; }
html.frame-on .finder { inset: clamp(12px, 2.4vw, 30px); height: auto; aspect-ratio: auto; transform: none; }
html.frame-on .finder-focus { left: 0; top: 0; width: clamp(64px, 14svh, 110px); }
html.frame-on .burst-lede { position: absolute; z-index: 4; left: clamp(24px, 4.4vw, 60px); bottom: clamp(24px, 6svh, 56px); margin: 0; max-width: min(46ch, calc(100vw - 2 * clamp(24px, 4.4vw, 60px))); padding: 12px 16px; font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.45; color: #fff; background: rgba(8, 8, 12, .68); opacity: 0; }
@media (max-width: 760px) {
  .sat { left: var(--mx); top: var(--my); width: min(calc(var(--mw) * 1vw), calc(var(--mw) * .62svh)); }
  .burst-main { top: 12%; height: 48%; }
  .finder { top: 12%; height: 48%; }
  .burst-word { font-size: min(19.5vw, 14svh); white-space: normal; line-height: .92; text-align: left; }
}

/* ---------- home: slanted cards ---------- */
.slant { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 5vw, 80px); min-height: calc(var(--stage) * .92); padding: clamp(40px, 9svh, 90px) var(--gutter); }
.slant:nth-child(even) .slant-media { order: 2; }
.slant-media { position: relative; z-index: 0; justify-self: center; width: fit-content; max-width: 100%; isolation: isolate; will-change: transform; }
.slant-photo img { width: auto; max-width: 100%; max-height: min(68svh, 640px); border-radius: var(--radius); }
.slant-title { margin: 0 0 .25em; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 6.6rem); line-height: .94; letter-spacing: -.04em; }
.slant-title a { text-decoration: none; }
.slant-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.slant-title a:hover { color: var(--accent-text); }
.slant-copy p { margin: 0; max-width: 40ch; color: var(--muted); }
.unborn { padding: clamp(56px, 12svh, 130px) var(--gutter); }
.unborn-quote { max-width: 22em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: -.03em; }
@media (max-width: 760px) {
  .slant { grid-template-columns: 1fr; min-height: 0; gap: 44px; }
  .slant:nth-child(even) .slant-media { order: 0; }
  .slant-card { inset: -5% -5%; }
}

/* ---------- home: big words ---------- */
.word { position: relative; display: flex; flex-direction: column; height: var(--stage); min-height: 420px; background: var(--c); color: var(--t); overflow: clip; }
html.frame-on .word { position: sticky; top: var(--top); margin-bottom: 55svh; }
html.frame-on .word:last-child { margin-bottom: 30svh; }
.word-cards { flex: 1; position: relative; min-height: 0; z-index: 0; }
.rise { position: absolute; left: var(--at); bottom: -4%; height: 96%; display: flex; align-items: flex-end; rotate: var(--r); will-change: transform; }
.rise img { width: auto; height: auto; max-height: 100%; max-width: 40vw; border-radius: var(--radius) var(--radius) 0 0; }
.word-band { position: relative; z-index: 1; margin: 0; padding: .02em var(--gutter) .08em; background: var(--c); }
.word-text { display: block; font-family: var(--font-display); font-weight: 800; font-size: min(19vw, 30svh); line-height: .95; letter-spacing: -.05em; text-decoration: none; }
.word-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stage); }
.word-text:focus-visible { outline-color: currentColor; outline-offset: -6px; }
.word:hover .word-text { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }

/* ---------- home: big contact lines ---------- */
.lines { position: relative; z-index: 1; padding: clamp(56px, 12svh, 120px) var(--gutter); background: var(--bg); }
.lines-note { max-width: 44ch; margin: 0 0 clamp(20px, 5svh, 48px); font-size: 1.15rem; }
.line, .lines-social a { display: block; padding: .02em 0 .08em; border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 800; font-size: min(14.4vw, 24svh); line-height: 1; letter-spacing: -.05em; text-decoration: none; }
.line:hover, .lines-social a:hover { color: var(--accent-text); }
.lines-social ul { margin: 0; padding: 0; list-style: none; }
.lines-social li:has(a[href="/privacy"]) { display: none; }

/* ---------- inner pages: heads ---------- */
.page-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fit, min(14vw, 28svh)); line-height: .94; letter-spacing: -.045em; --kui-mask-bleed: .14em; }
.project-head, .bio-head { position: relative; isolation: isolate; }
.project-head:has(.plate-hero), .bio-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3svh, 40px) clamp(24px, 4vw, 64px); align-items: center; min-height: var(--stage); padding: clamp(20px, 4svh, 40px) var(--gutter); background: #15151d; color: #fff; }
.project-head:has(.plate-hero)::before, .bio-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tint, transparent); opacity: 0; transition: opacity .8s ease; }
.project-head.tinted::before, .bio-head.tinted::before { opacity: 1; }
.project-head:has(.plate-hero) .page-title, .bio-head .page-title { grid-column: 1; grid-row: 1; align-self: center; }
.project-head .plate-hero, .bio-head .ring-mask { grid-column: 2; grid-row: 1; justify-self: center; display: flex; flex-direction: column; align-items: center; max-width: 100%; min-width: 0; }
.project-head > :not(.page-title):not(.plate-hero), .bio-head > :not(.page-title):not(.ring-mask) { grid-column: 1 / -1; }
.project-head a, .bio-head a { color: inherit; }
.project-head .lede, .project-head .plates-head, .project-head .story, .project-head .credits { max-width: 70ch; margin: 0; }
.project-head:has(.plate-hero) .story, .project-head:has(.plate-hero) .credits, .bio-head .story { color: #fff; }
.project-head .plate-logo { flex-basis: auto; }
.bio-head blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.14; letter-spacing: -.02em; }
.bio-head .story { margin: 0; max-width: 70ch; }

/* Heads without a hero photo: the title is a big word on a solid band. */
.project-head:not(:has(.plate-hero)) .page-title, .contact-page .page-title { padding: clamp(14px, 3svh, 30px) var(--gutter) clamp(10px, 2svh, 20px); background: var(--c, var(--cobalt)); color: var(--t, var(--white)); }
.project-head:has(+ .gallery-wall) { --c: var(--magenta); --t: var(--ink); }
.project-head:has(+ .plates .video) { --c: var(--crimson); --t: var(--white); }
.contact-page { --c: var(--acid); --t: var(--ink); }
.project-head:not(:has(.plate-hero)) > .story { max-width: 68ch; margin: clamp(16px, 3svh, 28px) auto; padding: 0 var(--gutter); box-sizing: content-box; }
.page-article > section:not([class]) { max-width: 72ch; margin: 0 auto; padding: clamp(32px, 7svh, 72px) var(--gutter); }
.page-article > section:not([class]) h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 6rem); line-height: .96; letter-spacing: -.04em; margin: 0 0 .4em; }
.post-list { padding: var(--gutter); }

/* ---------- plates ---------- */
.plates { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(44px, 9svh, 96px) clamp(20px, 3vw, 48px); max-width: 1440px; margin: 0 auto; padding: clamp(44px, 9svh, 96px) var(--gutter); }
.plate { position: relative; flex: 1 1 calc(50% - 48px); min-width: 0; display: flex; flex-direction: column; align-items: center; }
.plate-wide, .plate-logo { flex-basis: 100%; }
:is(.plate, .gallery-wall figure, .ring-mask) > div { position: relative; isolation: isolate; max-width: 100%; }
:is(.plate, .gallery-wall figure, .ring-mask) img { position: relative; width: auto; max-width: 100%; max-height: var(--cap); border-radius: 4px; }
html.frame-on :is(.plate, .gallery-wall figure, .ring-mask):not(.has-img) > div { min-height: 36svh; min-width: min(280px, 60vw); }
:is(.plate, .gallery-wall figure) figcaption { max-width: 60ch; margin-top: clamp(24px, 4svh, 34px); font-family: var(--font-mono); font-size: .75rem; line-height: 1.5; text-align: center; color: var(--muted); }
.plate.plate-logo img { max-height: 150px; }
.plate-hero img, .ring-mask img { max-height: var(--cap); }
.plates-head { flex-basis: 100%; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.035em; }
.plates > .story { flex-basis: 100%; margin: 0; padding-inline: calc((100% - 68ch) / 2); }
.plate.video { flex: 0 1 min(100%, calc(var(--cap) * 16 / 9)); }
.plate.video iframe { display: block; width: 100%; max-width: 124svh; margin-inline: auto; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 4px; background: var(--surface); }
/* Videos swing straight as they scroll in. Browsers without scroll timelines just show them. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate.video iframe { animation: video-swing 1ms cubic-bezier(.2, .7, .2, 1) both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
  }
}
@keyframes video-swing { from { clip-path: inset(10% 26% 10% 26%); rotate: -4deg; scale: .9; } to { clip-path: inset(0); rotate: none; scale: 1; } }
.plate.video > .vf { inset: -10px; }
.plate.video > .vf i { width: 26px; }
@media (max-width: 700px) {
  .project-head:has(.plate-hero), .bio-head { grid-template-columns: 1fr; min-height: 0; }
  .project-head:has(.plate-hero) .page-title, .bio-head .page-title { grid-column: 1; grid-row: auto; }
  .project-head .plate-hero, .bio-head .ring-mask { grid-column: 1; grid-row: auto; --cap: 58svh; }
  .plate { flex-basis: 100%; }
  .plates > .story { padding-inline: 0; }
  .slant-card { inset: -4% -5%; }
}

/* Curtain wipe: an opaque tint layer scaled away, so the photo itself never animates its paint. */
html.frame-on :is(.plate:not(.plate-logo):not(.video), .gallery-wall figure, .ring-mask) > div::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border-radius: 4px;
  background: var(--tint2, var(--surface-2)); transform-origin: var(--wo, bottom);
  transform: scale(var(--ws, 1)); transition: transform .95s var(--ease-wipe);
}
html.frame-on :is(.plate:nth-child(odd), .gallery-wall figure:nth-child(3n)) > div::after { --wo: right; }
html.frame-on :is(.plate:not(.plate-logo):not(.video), .gallery-wall figure, .ring-mask).is-in > div::after { transform: scaleY(0); }
html.frame-on :is(.plate:nth-child(odd), .gallery-wall figure:nth-child(3n)).is-in > div::after { transform: scaleX(0); }
html.frame-on .plate.video, html.frame-on .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease calc(var(--i, 0) * 70ms), transform .8s var(--ease) calc(var(--i, 0) * 70ms); }
html.frame-on .plate.video.is-in, html.frame-on .rv.is-in { opacity: 1; transform: none; }

/* ---------- photo bursts: .ring-row was another theme's strip; here it opens outward, once ---------- */
.ring-band { padding: clamp(24px, 5svh, 48px) var(--gutter); }
.t-row.ring-row, .logo-wall { position: relative; }
.t-row.ring-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
.ring-row figure { position: relative; margin: 0 -7px; }
.ring-row figure:nth-child(3n) { rotate: 3deg; }
.ring-row figure:nth-child(3n+1) { rotate: -2.5deg; }
.ring-row figure:nth-child(4n) { z-index: 1; }
.ring-row img { width: auto; max-width: none; height: clamp(84px, 22svh, 200px); border-radius: 6px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.6); transition: scale .25s var(--ease); }
.ring-row img:hover { scale: 1.06; }
html.frame-on .ring-row figure { opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(.5); transition: opacity .3s ease calc(var(--i, 0) * 45ms), transform .95s var(--spring) calc(var(--i, 0) * 45ms); }
html.frame-on .ring-row.is-in figure { opacity: 1; transform: none; }
@media (max-width: 700px) { .ring-row img { height: clamp(76px, 12svh, 104px); } }

/* ---------- services: stacked solid cards ---------- */
.service { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); padding: clamp(28px, 6svh, 56px) var(--gutter); background: var(--c, var(--surface)); color: var(--t, var(--fg)); }
.service:nth-child(4n+2) { --c: var(--acid); --t: var(--ink); }
.service:nth-child(4n+3) { --c: var(--magenta); --t: var(--ink); }
.service:nth-child(4n) { --c: var(--crimson); --t: var(--white); }
.service:nth-child(4n+1) { --c: var(--surface-2); --t: var(--fg); }
.service h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.8vw, 3.6rem); line-height: 1; letter-spacing: -.035em; }
.service p { margin: 0 0 1em; }
.service .ring-band { grid-column: 1 / -1; padding: 8px 0 0; }
html.frame-on .service { position: sticky; }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; } }

/* ---------- bio ---------- */
.highlights { padding: clamp(44px, 9svh, 96px) var(--gutter); }
.highlights ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: clamp(18px, 4svh, 36px) 0 0; padding: 0; list-style: none; }
.highlights li { padding: 12px 0; border-top: 1px solid var(--border); }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(44%, 150px), 1fr)); gap: clamp(18px, 3vw, 36px) clamp(16px, 2.6vw, 34px); align-items: center; justify-items: center; padding: clamp(36px, 8svh, 80px) var(--gutter); background: var(--surface); }
.logo-wall { background: #000; }
.logo-wall img { width: auto; max-width: 100%; max-height: clamp(48px, 10svh, 84px); object-fit: contain; }
.plate-hero .slant-card, .ring-mask .slant-card { inset: -3% -7%; }
.plates { row-gap: clamp(60px, 12svh, 120px); }
html.frame-on .logo-wall figure { opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(.6) rotate(var(--lr, 6deg)); transition: opacity .35s ease calc(var(--i, 0) * 40ms), transform .85s var(--spring) calc(var(--i, 0) * 40ms); }
html.frame-on .logo-wall.is-in figure { opacity: 1; transform: none; }
.link-row { flex-basis: 100%; margin: 0; }
.link-row a { display: block; padding: .02em 0 .08em; border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 800; font-size: min(12vw, 20svh); line-height: 1; letter-spacing: -.05em; text-decoration: none; }
.link-row a:hover { color: var(--accent-text); }

/* ---------- gallery: slanted cards, a long run ---------- */
.gallery-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(56px, 11svh, 110px) clamp(32px, 4vw, 64px); align-items: center; padding: clamp(44px, 9svh, 96px) clamp(36px, 5vw, 72px); }
.gallery-wall figure { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.gallery-wall img { max-height: 62svh; }
@media (max-width: 1000px) { .gallery-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gallery-wall { grid-template-columns: 1fr; } .gallery-wall img { max-height: 70svh; } }

/* ---------- contact page ---------- */
.contact-page .lede { max-width: 68ch; margin: clamp(16px, 3svh, 28px) auto; padding: 0 var(--gutter); box-sizing: content-box; font-size: 1.15rem; }
.contact-page .link-row { padding: 0 var(--gutter); }
.contact-form { max-width: 760px; margin: 0 auto; padding: clamp(32px, 7svh, 72px) var(--gutter); }
.contact-form form { display: grid; gap: 20px; }
.contact-form label { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.contact-form input:not([type="hidden"]), .contact-form textarea { width: 100%; padding: 10px 2px; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1.5px solid var(--border-strong); border-radius: 0; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--accent-text); box-shadow: 0 1.5px 0 var(--accent-text); }
.contact-form button { justify-self: start; min-height: 48px; padding: 10px 30px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--accent-fg); background: var(--accent); border: 0; cursor: pointer; }
.contact-form button:hover { transform: translateY(-2px); }

/* ---------- project nav: the next page's word, its photo rising behind it ---------- */
.project-nav { display: flex; flex-direction: column; margin-top: clamp(32px, 6svh, 64px); }
.project-nav a { text-decoration: none; }
.project-nav span { display: block; font-family: var(--font-mono); font-size: .75rem; line-height: 1.4; font-weight: 400; letter-spacing: .02em; }
.project-nav a[rel="prev"] { padding: 14px var(--gutter); border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.project-nav a[rel="prev"]:hover { color: var(--accent-text); }
.project-nav a[rel="next"] { position: relative; isolation: isolate; overflow: clip; display: block; padding: 0 var(--gutter) .06em; background: var(--tint, var(--cobalt)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: min(12vw, 22svh); line-height: .98; letter-spacing: -.05em; }
.project-nav a[rel="next"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(1.1em + 28px); z-index: -1; background: var(--tint, var(--cobalt)); }
.nav-ring { position: relative; z-index: -2; width: fit-content; max-width: 100%; margin: clamp(18px, 4svh, 40px) auto 0; rotate: -3deg; will-change: transform; }
.nav-ring img { width: auto; max-height: min(44svh, 70vw); border-radius: var(--radius) var(--radius) 0 0; }
.project-nav a[rel="next"] span { padding-top: 6px; }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto; gap: 24px clamp(24px, 5vw, 72px); padding: clamp(28px, 6svh, 56px) var(--gutter); background: var(--bg); border-top: 1px solid var(--border); font-size: .9rem; }
.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-menu > ul { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer-menu > ul > li > a, .footer-menu > ul > li > .menu-item-label { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); text-decoration: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent-text); }
.site-footer li { padding: 2px 0; }
@media (max-width: 860px) { .site-footer { grid-template-columns: 1fr; } }

/* ---------- lightbox: kUInetic's dialog; only the fuzz, the fit and the colours are the theme's ---------- */
dialog.kui-lightbox[open] { background: rgba(8, 8, 12, .55); color: #fff; overflow: hidden; --kui-lightbox-arrow-fg: #fff; --kui-lightbox-arrow-bg: rgba(0, 0, 0, .66); }
dialog.kui-lightbox::backdrop { -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); }
dialog.kui-lightbox .kui-lightbox-gallery img,
dialog.kui-lightbox .kui-lightbox-gallery img.is-tall,
dialog.kui-lightbox .kui-lightbox-gallery img.is-fit { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: calc(100svh - 2 * var(--kui-lightbox-pad, 48px) - 76px); object-fit: contain; border-radius: 4px; }
dialog.kui-lightbox .kui-lightbox-gallery figcaption { font-family: var(--font-mono); font-size: .75rem; color: #fff; }
dialog.kui-lightbox .kui-lightbox-close { width: 44px; height: 44px; }
dialog.kui-lightbox:focus, dialog.kui-lightbox :not(button):focus { outline: none !important; }
dialog.kui-lightbox button:focus { outline: none; }
dialog.kui-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { scroll-behavior: auto !important; }
  .ring-row img { transition: none; }
}