/* ULTIMA — page-level styles. Pieces without a component card (pagehead, metagrid, chap, ctaband,
   skyline, drift, footage) follow the handoff prototype. Tokens: tokens.css. Components: components.css. */

html { background: var(--bg-000); color-scheme: dark; }
[data-theme="day"] { color-scheme: light; }
body { min-height: 100vh; }
img, video, svg { max-width: 100%; }
h1:focus, main:focus { outline: none; }
p { margin: 0; }

.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: calc(var(--z-menu) + 10); }
.skip:focus-visible { top: var(--space-4); }

/* ── Layout primitives ── */
.wrap { padding: 0 var(--gutter); max-width: 1280px; margin: 0 auto; }
.sect { padding: var(--space-24) 0; }
.sect + .sect { padding-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
ul.row, ul.chips { list-style: none; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sect__head { justify-content: space-between; align-items: end; }

/* ── Type ── */
.t-display-xl { margin: 0; font: 700 104px/.92 var(--font-display); letter-spacing: -.03em; }
.t-display-lg { margin: 0; font: 700 72px/.95 var(--font-display); letter-spacing: -.025em; }
.t-h1 { margin: 0; font: 650 48px/1.02 var(--font-display); letter-spacing: -.02em; }
.t-h2 { margin: 0; font: 600 32px/1.1 var(--font-display); letter-spacing: -.01em; }
.t-h3 { margin: 0; font: 600 22px/1.25 var(--font-display); }
.t-lead { margin: 0; font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 60ch; }
.t-body { margin: 0; max-width: var(--measure); }
.t-small { margin: 0; font-size: 15px; line-height: 24px; }
.t-muted { color: var(--ink-muted); }

/* ── Nav extras ── */
.u-nav .u-wordmark i, .sheet .u-wordmark i, .foot .u-wordmark i { flex: none; }

/* ── Hero ── */
.hero { position: relative; min-height: 700px; overflow: hidden; }
.hero__grid { position: relative; z-index: var(--z-content); display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; padding-top: var(--space-16); padding-bottom: var(--space-32); }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero > .skyline { height: 40%; }
.hero__stage { max-width: 420px; width: 100%; justify-self: center; }
.companion { position: relative; }

/* Niko interactions: a transparent button over the stage. Pointer grabs are decided by raycasting in
   src/niko-interact.js, so touches that miss Niko still scroll the page. */
.stage__hit { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; z-index: calc(var(--z-companion) + 1); margin: 0; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: transparent; cursor: default; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.stage__hit.is-over { cursor: grab; }
.stage__help { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--space-2); text-align: center; opacity: 0; transition: opacity var(--dur-2); pointer-events: none; }
.stage__hit:focus-visible ~ .stage__help { opacity: 1; }
.niko-layer { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 5); pointer-events: none; }
.niko-layer canvas, .u-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.niko-dragging, .niko-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* Hero → About: the skyline tapers to ~45% at the boundary and continues as a mirrored reflection
   in the About section (the Refuge's pink water), so tone and texture carry across with no edge.
   src/dusk.js deepens it with scroll. */
.hero__sky { -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.45) 100%); mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.45) 100%); transform-origin: 50% 100%; }
.hero__dusk { position: absolute; inset: 0; z-index: calc(var(--z-skyline) + 1); pointer-events: none; opacity: 0; background: linear-gradient(to bottom, transparent 35%, color-mix(in srgb, var(--bg-000) 65%, transparent) 100%); }
.sect--seam { position: relative; }
.sect--seam > .wrap { position: relative; z-index: 1; }
.seam { position: absolute; left: 0; right: 0; top: -48px; height: calc(var(--sky-h, 320px) * 1.5 + 48px); z-index: var(--z-skyline); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.seam .skyline.seam__sky { top: 48px; bottom: auto; height: var(--sky-h, 320px); opacity: .45; transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.seam__sky svg { transform: scaleY(-1); } /* mirrored: the building bases meet the hero's at the boundary */
.seam__sky .lit { opacity: .35; }
/* Mirror of .hero__dusk below the boundary, driven by the same scroll value, so both sides darken together. */
.seam__dusk { position: absolute; left: 0; right: 0; top: 48px; height: var(--sky-h, 320px); opacity: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-000) 65%, transparent) 0%, transparent 65%); }
.seam .drift { top: 0; }
.seam__dither { position: absolute; left: 0; right: 0; top: 24px; height: 48px; opacity: .22; background: conic-gradient(var(--rose-700) 25%, transparent 0 50%, var(--rose-700) 0 75%, transparent 0) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent); }
.u-stage.has-model .stage__proxy { display: none; }
.u-stage.has-model[data-state="live"] canvas { animation: u-fadein var(--dur-2) var(--ease-out); }
@keyframes u-fadein { from { opacity: 0; } to { opacity: 1; } }
.scrollcue { position: absolute; z-index: var(--z-content); left: var(--gutter); bottom: var(--space-8); color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: center; }

/* Skyline + drift (decorative) */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: var(--z-skyline); pointer-events: none; }
.skyline svg { width: 100%; height: 100%; display: block; }
.skyline .far { fill: var(--rose-700); opacity: .45; }
.skyline .near { fill: var(--rose-700); opacity: .9; }
.skyline .win { fill: var(--bg-000); opacity: .45; }
.skyline .lit { fill: var(--magenta-glow); opacity: .75; }
.skyline .tw { animation: tw 5s steps(1) infinite; }
@keyframes tw { 0%, 100% { opacity: .75; } 40% { opacity: .15; } 44% { opacity: .75; } }
.drift { position: absolute; inset: 0; z-index: var(--z-skyline); pointer-events: none; }
.drift span { position: absolute; background: var(--rose-500); opacity: .35; animation: drift var(--t) ease-in-out infinite alternate; }
.drift span:nth-child(3n) { background: var(--magenta-glow); opacity: .25; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-36px); } }
.is-paused .skyline .tw, .is-paused .drift span { animation-play-state: paused; }

/* ── Page header ── */
.pagehead { position: relative; overflow: hidden; padding: var(--space-16) 0 var(--space-12); border-bottom: 1px solid var(--line); }
.pagehead .skyline { height: 100%; opacity: .5; }
.pagehead .wrap { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; gap: var(--space-6); }
.crumb { align-self: flex-start; }

/* ── Home chapters ── */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
/* Home About preview: chapter label, then the heading beside the copy (no empty left column). */
.sect.sect--seam { padding: var(--space-16) 0; }
.abp { display: flex; flex-direction: column; gap: var(--space-6); }
.abp__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8) var(--space-16); align-items: end; }
.abp__copy { gap: var(--space-4); }
.abp__more { align-self: flex-start; }
/* Selected work: the project's own logo on a soft accent glow instead of generated art. */
.u-card__art--logo { display: grid; place-items: center; background: radial-gradient(60% 75% at 50% 55%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%), var(--bg-200); }
.u-card__art--logo::before { content: ""; position: absolute; inset: 0; opacity: .5; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.u-card__logo { position: relative; width: 78%; height: 74%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(8, 1, 8, .7)); transition: transform var(--dur-2) var(--ease-out); }
.u-card__logo.is-pixel { width: 46%; height: 60%; image-rendering: pixelated; }
.u-card:hover .u-card__logo, .u-card:focus-visible .u-card__logo { transform: translateY(-4px) scale(1.03); }
/* Toolkit tiles: official logos (3D when WebGL runs, via src/marks.js), each linking to its About view. */
.tools4 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tool { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1), box-shadow var(--dur-2); }
.tool:hover, .tool:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--accent) 55%, transparent); }
.tool__mark { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 1; border-radius: var(--radius-md); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.tool__logo { width: 70%; height: auto; filter: drop-shadow(0 10px 16px rgba(8, 1, 8, .6)); pointer-events: none; }
.tool__logo--code { width: auto; font: 700 30px/1 var(--font-mono); color: var(--lamp-ink); white-space: nowrap; filter: none;
  text-shadow: 1px 1px 0 var(--rose-500), 2px 2px 0 var(--rose-500), 3px 3px 0 var(--rose-700), 4px 4px 0 var(--rose-700), 0 12px 20px rgba(8, 1, 8, .6); }
.tools4.has-3d .tool__logo { visibility: hidden; }
.tools__canvas { position: absolute; inset: 0; z-index: 2; width: 100% !important; height: 100% !important; pointer-events: none; }
.tool__text { display: flex; flex-direction: column; gap: var(--space-2); }
.ctaband { position: relative; overflow: hidden; padding: var(--space-16) var(--space-12); background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; }

/* ── Projects: one section (header, statement, layered deck) over the city (src/projects.js) ── */
.pjx { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-12) 0 var(--space-12); }
.pjx__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pjx__sky { height: 64%; opacity: .6; }
.pjx__dusk { position: absolute; inset: 0; background: radial-gradient(70% 60% at 40% 62%, transparent 0, color-mix(in srgb, var(--bg-000) 55%, transparent) 70%), linear-gradient(transparent 55%, var(--bg-000)); }
.pjx__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6) var(--space-12); }
.pjx__head h1 { margin: 0; }
.pjx__note { margin: 0; max-width: 32ch; }

.pjd { --accent: var(--magenta); position: relative; margin-top: var(--space-4); }
.pjd__stage { --w: min(460px, 36vw); position: relative; height: calc(var(--w) * 1.3); overflow: hidden; perspective: 1500px; perspective-origin: 42% 38%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pjd__stage.is-dragging { cursor: grabbing; }
.pjd__deck { position: absolute; left: 33%; top: 64%; z-index: 1; width: 0; height: 0; transform-style: preserve-3d; }
.pjd__plane { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -0.34); width: var(--w); aspect-ratio: 16 / 11; display: block; color: var(--ink); text-decoration: none; transform-style: preserve-3d; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pjd__face { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: var(--bg-200); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: 0 30px 60px -30px rgba(8, 1, 8, .85); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.pjd__plane.is-near:hover .pjd__face { transform: translateZ(26px); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--accent) 50%, transparent); }
.pjd__img, .pjd__art > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pjd__art { position: absolute; inset: 0; }
.pjd__art--mark { display: flex; flex-direction: column; justify-content: flex-end; padding: 6%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%), var(--bg-000); }
.pjd__anchor { position: absolute; left: 10%; right: 10%; top: 7%; bottom: 30%; display: grid; place-items: center; }
.pjd__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.pjd__logo.is-pixel { height: 100%; width: auto; }
.is-pixel { image-rendering: pixelated; }
.pjd.has-3d .pjd__plane.is-front .pjd__logo { visibility: hidden; }
.pjd__cap { position: relative; display: flex; flex-direction: column; gap: var(--space-1); }
.pjd__cap .u-pixel { color: var(--accent); }
.pjd__title { font: 700 clamp(18px, 2vw, 26px)/1.1 var(--font-display); }
.pjd__art--text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: 10%; background: linear-gradient(135deg, var(--rose-700), var(--bg-100)); }
.pjd__art--text .u-pixel { color: var(--lamp-ink); }
.pjd__line { font: 700 clamp(20px, 2.4vw, 34px)/1.1 var(--font-display); }
.pjd__label { position: absolute; left: 12px; bottom: 10px; padding: 2px 8px; background: color-mix(in srgb, var(--bg-000) 78%, transparent); color: var(--ink); }
.pjd__canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.pjd .tkc__arrow { top: 50%; z-index: 3; }
.pjd__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-6); margin-top: var(--space-6); }
.pjd__line2 { max-width: 60ch; }
.pjd__picks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pjd__pick { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1); }
.pjd__pick:hover { color: var(--ink); border-color: var(--line-strong); }
.pjd__pick[aria-current="true"] { color: var(--ink); border-color: var(--accent); background: var(--bg-200); }
.pjd:not(.is-ready) .pjd__stage { height: auto; overflow: visible; perspective: none; }
.pjd:not(.is-ready) .pjd__deck { position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.pjd:not(.is-ready) .pjd__plane { position: relative; left: auto; top: auto; width: auto; }
.pjd:not(.is-ready) .tkc__arrow, .pjd:not(.is-ready) .pjd__meta { display: none; }

/* ── Project detail ── */
.metagrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--line); }
.metagrid dt { margin-bottom: var(--space-1); }
.metagrid dd { margin: 0; font-weight: 600; }
.metagrid__link { min-height: 0; padding: 0; }
.sect--media { padding-bottom: 0; }
.media__alt { margin-top: var(--space-3); }
.u-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chap { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-12); padding: var(--space-16) 0; border-bottom: 1px solid var(--line); }
.chap:last-of-type { border-bottom: 0; }
.notes { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-3); max-width: var(--measure); list-style: square; }
.notes li::marker { color: var(--magenta); }
.nextproj { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); padding: var(--space-16) 0 var(--space-24); border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.nextproj:hover .t-display-lg { color: var(--magenta); }

/* Soundtrack rows */
.tracks { display: grid; gap: var(--space-3); }
.track { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-md); }
.track__play { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--lamp); color: var(--on-lamp); border: 0; cursor: pointer; flex: none; }
.track__play[aria-pressed="true"] { background: var(--magenta); }
.track__play .is-pause, .clip__toggle .is-pause { display: none; }
.track__play[aria-pressed="true"] .is-play, .clip__toggle[aria-pressed="true"] .is-play { display: none; }
.track__play[aria-pressed="true"] .is-pause, .clip__toggle[aria-pressed="true"] .is-pause { display: inline; }
.track__text { flex: 1; min-width: 0; }
.track__title { font-weight: 600; }
.track__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__player { flex-basis: 100%; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-000); }
.track__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Footage clips: the source is 1280×720; --cx/--cy/--cw/--ch crop it to the game or playlist area. */
.footage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.clip { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.clip__box video { position: absolute; max-width: none; height: auto; width: calc(1280 / var(--cw) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.clip__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity var(--dur-2); }
.clip__box.is-playing .clip__poster { opacity: 0; }
.clip__toggle { position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3); padding: var(--space-2) var(--space-4); background: color-mix(in srgb, var(--bg-000) 82%, transparent); }

/* ── About ── */
/* Hero: header, profile card and bio in one section over the animated city. The city fades out below the
   section (the background runs 240 px into the toolkit section) so there is no hard edge. */
.abh { position: relative; isolation: isolate; padding: var(--space-16) 0 var(--space-12); }
.abh__bg { position: absolute; inset: 0 0 -240px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
.abh__sky { height: 82%; opacity: .75; }
.abh__dusk { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-000) 30%, transparent) 0, color-mix(in srgb, var(--bg-000) 60%, transparent) 55%, var(--bg-000) 100%); }
.abh__in { position: relative; display: flex; flex-direction: column; gap: var(--space-12); }
.abh__head { display: flex; flex-direction: column; gap: var(--space-6); }
.abh__head h1 { margin: 0; }
/* Three columns on desktop: name, role and links | picture | bio. */
.abh__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); grid-template-areas: "id photo bio"; gap: var(--space-12); align-items: center; }
.abh__id { grid-area: id; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; }
.abh__name { font: 400 clamp(28px, 2.8vw, 40px)/1.1 var(--font-pixel); letter-spacing: .06em; color: var(--ink); text-shadow: 0 2px 18px var(--bg-000); }
.abh__links { margin-top: var(--space-4); justify-content: flex-end; }
.abh__photo { grid-area: photo; --pc: var(--lamp); width: clamp(200px, 19vw, 272px); aspect-ratio: 426 / 437; }
.abh__photo img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg-200); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -28px rgba(8, 1, 8, .9); }
.abh__bio { grid-area: bio; }
.abh__bio .bio, .abh__role { text-shadow: 0 2px 18px var(--bg-000); }
.abh + .tk-sect { position: relative; padding-top: var(--space-12); }
.bio { max-width: 24ch; }

/* Toolkit (src/toolkit.js, src/marks.js). A full-width carousel of large media discs with 3D marks, and a
   full-screen view per category. Without scripts, the discs sit in a grid and the panels show as sections. */
.tk-sect { padding-bottom: var(--space-16); }
.tk-sect__hint { margin: 0; }
.tkc { --accent: var(--lamp); position: relative; margin-top: var(--space-8); }
.tkc__stage { --s: min(500px, 42vw); position: relative; height: calc(var(--s) + 64px); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tkc__stage.is-dragging { cursor: grabbing; }
.tkc__rail { position: absolute; inset: 0; }
.tkc__item { position: absolute; left: 50%; top: 0; width: var(--s); margin-left: calc(var(--s) / -2); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--ink); text-decoration: none; transform-origin: 50% calc(var(--s) / 2); -webkit-tap-highlight-color: transparent; }
.tkc__item:focus { outline: none; }
.tkc__disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--bg-200); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 40px 90px -40px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer; }
.tkc__item:focus-visible .tkc__disc { outline: 3px solid var(--focus-ring); outline-offset: 6px; }
.tkc__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform var(--dur-3) var(--ease-out); pointer-events: none; }
.tkc__item.is-active:hover .tkc__bg { transform: scale(1.18); }
.tkc__bg--code { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lamp) 18%, transparent), transparent 60%), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px, var(--bg-100); }
.tkc__shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--bg-000) 20%, transparent) 0, color-mix(in srgb, var(--bg-000) 78%, transparent) 72%), linear-gradient(transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent)); }
.tkc__mark { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 12px 24px rgba(8, 1, 8, .6)); pointer-events: none; }
.tkc__mark--code { width: auto; font: 700 calc(var(--s) * .19)/1 var(--font-mono); color: var(--lamp-ink); white-space: nowrap; }
.tkc.has-3d .tkc__mark { visibility: hidden; }
.tkc__label { display: inline-flex; align-items: baseline; gap: var(--space-2); font: 700 22px/1.1 var(--font-display); transition: opacity var(--dur-2); }
.tkc__label .u-pixel { color: var(--magenta); }
.tkc__item:not(.is-active) .tkc__label { opacity: .5; }
.tkc__canvas { position: absolute; inset: 0; z-index: 20; display: block; width: 100%; height: 100%; pointer-events: none; }
.tkc__arrow { position: absolute; top: calc(var(--s) / 2); z-index: 30; width: 60px; height: 60px; margin-top: -30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg-000) 72%, transparent); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color var(--dur-1), background-color var(--dur-1); }
.tkc__arrow:hover { border-color: var(--magenta); background: var(--bg-200); }
.tkc__arrow--prev { left: max(var(--gutter), calc(50% - 620px)); }
.tkc__arrow--next { right: max(var(--gutter), calc(50% - 620px)); }
.tkc__meta { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-8); margin-top: var(--space-8); }
.tkc__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); min-width: 0; }
.tkc__pos { color: var(--ink-muted); }
.tkc__pos b { color: var(--magenta); font-weight: 400; }
.tkc__name { font: 700 32px/1.1 var(--font-display); letter-spacing: -.01em; }
.tkc__dots { display: flex; }
.tkc__dot { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.tkc__dot i { width: 8px; height: 8px; background: var(--line-strong); transition: width var(--dur-2) var(--ease-out), background-color var(--dur-1); }
.tkc__dot[aria-current="true"] i { width: 24px; background: var(--magenta); box-shadow: var(--glow-window); }
.tkc:not(.is-ready) .tkc__stage { height: auto; overflow: visible; }
.tkc:not(.is-ready) .tkc__rail { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.tkc:not(.is-ready) .tkc__item { position: static; width: auto; margin: 0; }
.tkc:not(.is-ready) .tkc__mark--code { font-size: 40px; }
.tkc:not(.is-ready) .tkc__arrow, .tkc:not(.is-ready) .tkc__meta { display: none; }

/* Full-screen view */
.tkf { --accent: var(--lamp); }
.tkf:not(.is-ready) .tkf__bar { display: none; }
.tkf:not(.is-ready) .tkf__panel { padding-top: var(--space-16); border-top: 1px solid var(--line); margin-top: var(--space-16); }
.tkf.is-ready { position: fixed; inset: 0; z-index: calc(var(--z-transition) - 3); overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(42rem 42rem at var(--mx, 50%) var(--my, 42%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--rose-700) 45%, transparent), transparent), var(--bg-000); }
.tkf__bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--gutter); background: linear-gradient(var(--bg-000) 55%, transparent); }
.tkf__panel { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-16); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); grid-template-areas: "info stage media"; gap: var(--space-12); align-items: center; }
.tkf.is-ready .tkf__panel { min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); }
.tkf__info { grid-area: info; }
.tkf__title { margin: 0; }
.tkf__title:focus { outline: none; box-shadow: none; }
.tkf__info .t-lead { margin: 0; }
.tkf__info .track { background: var(--bg-100); }
.tkf__sub { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.tkf__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tkf__links a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 48px; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.tkf__links a:hover { color: var(--magenta); }
.tkf__stage { grid-area: stage; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.tkf__mark { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; display: grid; place-items: center; touch-action: pan-y; }
.tkf__mark.has-3d { cursor: grab; }
.tkf__mark.is-grabbing { cursor: grabbing; }
.tkf__mark::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.tkf__flat { position: relative; width: 56%; height: auto; }
.tkf__flat--code { width: auto; font: 700 clamp(56px, 8vw, 120px)/1 var(--font-mono); color: var(--lamp-ink); }
.tkf__mark.has-3d .tkf__flat { visibility: hidden; }
.tkf__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tkf__credit { margin: 0; text-align: center; }
.tkf__media { grid-area: media; display: flex; flex-direction: column; gap: var(--space-3); }
.tkf__item { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tkf__item .u-media { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 35%, transparent); }
.tkf__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tkf__demo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg-000); }
.tkf__pick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tkf__pickbtn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1); }
.tkf__pickbtn:hover { color: var(--ink); }
.tkf__pickbtn[aria-pressed="true"] { color: var(--ink); border-color: var(--lamp-ink); background: var(--bg-200); }
.tkf__pending { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-3); }
.tkf__pending p { margin: 0; }
.tk-open { overflow: hidden; }
.tkf__brand { display: flex; align-items: center; gap: var(--space-4); }
.tkf__section { color: var(--ink-muted); }
.tkf__close { white-space: nowrap; }
.tkf__facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0; }
.tkf__facts dt { margin-bottom: 2px; }
.tkf__facts dd { margin: 0; font-weight: 600; }
.tkf__flat.is-pixel { width: 44%; }

/* ── Contact ── */
/* Contact: one section. The city sits behind the heading and fades out behind the email and form. */
.cx { position: relative; isolation: isolate; padding: var(--space-16) 0 var(--space-24); }
.cx__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cx .skyline.cx__sky { top: 0; bottom: auto; height: 560px; opacity: .6; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.cx__dusk { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-000) 20%, transparent) 0, color-mix(in srgb, var(--bg-000) 55%, transparent) 260px, var(--bg-000) 620px); }
.cx .drift { bottom: auto; height: 640px; }
.cx__in { position: relative; display: flex; flex-direction: column; gap: var(--space-12); }
.cx__head { display: flex; flex-direction: column; gap: var(--space-6); }
.cx__head h1 { margin: 0; }
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
.cx__ways { padding-top: var(--space-8); }
.mailbig { font: 600 30px/1.15 var(--font-display); overflow-wrap: anywhere; color: var(--ink); }
.socials { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.socials a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; border-bottom: 1px solid var(--line); text-decoration: none; }
.socials a:hover { color: var(--magenta); }
/* Form card with depth: two offset sheets behind it, a pointer tilt and a focus rail (src/contact.js, GSAP).
   The card flattens while a field has focus, so text never sits on a tilted plane. */
.fstage { position: relative; padding: 0 24px 24px 0; perspective: 1400px; }
.fstage__layer { position: absolute; inset: 0 24px 24px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-100) 55%, transparent); transform: translate3d(12px, 12px, 0); opacity: .6; pointer-events: none; }
.fstage__layer + .fstage__layer { transform: translate3d(24px, 24px, 0); opacity: .3; }
.fcard { position: relative; background: color-mix(in srgb, var(--bg-100) 94%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); transform-origin: 50% 50%;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 40px 80px -40px rgba(8, 1, 8, .95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fcard__rail { position: absolute; left: -2px; top: 0; width: 4px; height: 0; border-radius: 2px; background: var(--magenta); box-shadow: 0 0 14px var(--magenta-glow); opacity: 0; pointer-events: none; }
.form { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
.form .u-field input, .form .u-field textarea { background: var(--bg-000); transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-2); }
.form .u-field input:hover, .form .u-field textarea:hover { background: var(--bg-200); }
.form .u-field label { transition: color var(--dur-1); }
.form .u-field:focus-within label { color: var(--magenta); }
.form .u-field input:focus, .form .u-field textarea:focus { background: var(--bg-100); border-color: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--magenta) 60%, transparent); }
.form .u-field.is-error input:focus, .form .u-field.is-error textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
/* After the handoff: an envelope closes over the letter. Its resting state (closed) is the CSS below, so it
   reads the same without GSAP or with reduced motion. */
.fdone { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.fdone[hidden] { display: none; }
.fdone h2:focus { outline: none; box-shadow: none; }
.fdone .draft { align-self: stretch; }
.env { position: relative; align-self: center; width: 168px; height: 112px; margin: var(--space-4) 0; perspective: 600px; }
.env > span { position: absolute; display: block; }
.env__back { inset: 0; z-index: 1; background: var(--rose-700); border: 2px solid var(--rose-500); border-radius: 4px; }
.env__letter { z-index: 2; left: 14px; right: 14px; top: 10px; height: 86px; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--ink); border-radius: 3px; }
.env__letter i { display: block; height: 6px; background: color-mix(in srgb, var(--bg-000) 30%, transparent); }
.env__letter i:nth-child(2) { width: 78%; }
.env__letter i:nth-child(3) { width: 52%; }
.env__front { inset: 0; z-index: 3; background: var(--rose-500); border-radius: 4px; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env__flap { left: 0; right: 0; top: 0; height: 62%; z-index: 4; background: color-mix(in srgb, var(--rose-500) 70%, var(--magenta)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.env__stamp { right: 14px; bottom: 14px; z-index: 5; width: 18px; height: 18px; background: var(--lamp); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lamp) 60%, var(--rose-700)); }
.env__spark { left: 50%; top: 30%; z-index: 6; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--lamp); opacity: 0; }
.env__spark:nth-child(even) { background: var(--magenta-glow); }
.form__submit { align-self: flex-start; }
.draft { margin: 0; padding: var(--space-4); background: var(--bg-000); border: 1px solid var(--line); font: 500 13px/20px var(--font-mono); color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Footer ── */
.foot { position: relative; z-index: var(--z-content); border-top: 1px solid var(--line); background: var(--bg-100); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-12) var(--gutter); max-width: 1280px; margin: 0 auto; }
.foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0; padding: 0; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot a:hover { color: var(--magenta); }

/* ── Phone menu sheet ── */
.sheet { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-000); padding: 0 var(--space-4) var(--space-8); transform: translateY(-100%); transition: transform var(--dur-2) var(--ease-out); }
.sheet.is-open { transform: none; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.sheet nav { display: flex; flex-direction: column; margin-top: var(--space-8); border-top: 1px solid var(--line); }
.sheet nav a { display: flex; justify-content: space-between; align-items: baseline; min-height: 72px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 700 40px/1 var(--font-display); letter-spacing: -.02em; }
.sheet nav a[aria-current="page"] { color: var(--magenta); }
.sheet .u-jp { font-size: 13px; }
.sheet__foot { margin-top: auto; padding-top: var(--space-8); }
.menu-open { overflow: hidden; }

/* ── Page transition (overlay spans the viewport) ── */
.u-wipe { position: fixed; }
.is-arriving .u-wipe span { opacity: 1; }
.is-arriving-fade .u-wipe { background: var(--bg-000); opacity: 1; }
.is-arriving-fade .u-wipe span { display: none; }
/* Safety net: if the script never runs, the overlay still gets out of the way. */
.is-arriving .u-wipe, .is-arriving-fade .u-wipe { animation: u-wipe-safety 0s 1.5s forwards; }
@keyframes u-wipe-safety { to { visibility: hidden; } }

/* ── Home intro (first Home visit per session; see src/intro.js) ── */
.intro { display: none; }
.intro-pending .intro { display: block; position: fixed; inset: 0; z-index: calc(var(--z-transition) - 5); overflow: hidden; }
.intro__bg { position: absolute; inset: 0; background: #000; }
.intro__canvas { position: absolute; inset: 0; }
.intro__canvas canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
.intro__greeting { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-6); text-align: center; pointer-events: none; }
.intro__jp { margin: 0; font: 400 clamp(28px, 4.6vw, 56px)/1.35 var(--font-jp); letter-spacing: .06em; color: var(--lamp-ink); text-shadow: 0 0 28px rgba(255, 212, 107, .35); opacity: 0; word-break: keep-all; overflow-wrap: anywhere; } /* break only after 「！」 */
.intro__en { margin: 0; font: 500 clamp(15px, 1.5vw, 19px)/1.5 var(--font-sans); color: var(--ink-muted); opacity: 0; }
.intro__skip { position: absolute; right: var(--space-6); bottom: var(--space-6); background: color-mix(in srgb, #000 70%, transparent); }
.intro-running { overflow: hidden; }
/* Safety net: without the script, the black screen gets out of the way. */
.intro-pending:not(.intro-running) .intro { animation: u-intro-safety 0s 4s forwards; }
@keyframes u-intro-safety { to { visibility: hidden; } }
/* While the intro owns the canvas, the stage stays empty so Niko can land in it. */
.u-stage.is-intro > :not(canvas) { visibility: hidden; }
.u-stage.has-model .u-stage__tag { display: none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .skyline .tw, .drift span { animation: none !important; }
  .sheet, .clip__poster, .pjd__face { transition-duration: 1ms !important; }
  .pjd__plane.is-near:hover .pjd__face { transform: none; }
  .u-stage canvas { animation: none !important; }
  .tkc__bg, .tkc__dot i, .tkc__label { transition: none !important; }
  .tkc__item.is-active:hover .tkc__bg { transform: scale(1.12); }
  .tool, .u-card__logo { transition-duration: 1ms !important; }
  .tool:hover, .tool:focus-visible, .u-card:hover .u-card__logo, .u-card:focus-visible .u-card__logo { transform: none; }
  .intro { display: none !important; }
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  :root { --gutter: var(--space-8); }
  .t-display-xl { font-size: 80px; }
  .tools4 { grid-template-columns: repeat(2, 1fr); }
  .metagrid { grid-template-columns: repeat(2, 1fr); }
  .tkc__stage { --s: min(440px, 52vw); }
  .pjd__stage { --w: min(420px, 50vw); }
  .pjd__meta { grid-template-columns: minmax(0, 1fr) auto; }
  .pjd__open { grid-column: 1 / -1; justify-self: start; }
  .abh__grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "photo id" "bio bio"; gap: var(--space-8) var(--space-12); }
  .abh__id { align-items: flex-start; text-align: left; }
  .abh__links { justify-content: flex-start; }
  .abh__photo { width: 200px; }
  .abp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .cx__ways { padding-top: 0; }
  .tkf__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info stage" "media media"; }
}

/* ── Phone ── */
@media (max-width: 719px) {
  :root { --gutter: var(--space-4); }
  .u-nav { height: 64px; }
  .u-nav__links, .u-nav .nav__hello { display: none; }
  .u-nav__menu { display: inline-flex; }
  .sect { padding: var(--space-16) 0; }
  .t-display-xl { font-size: 56px; }
  .t-display-lg { font-size: 44px; }
  .t-h1 { font-size: 34px; }
  .t-h2, .u-card__title { font-size: 26px; }
  .t-lead { font-size: 17px; line-height: 27px; }
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-16); }
  .hero__stage { max-width: 260px; }
  .hero__cta .u-btn { flex: 1 1 100%; }
  .scrollcue { display: none; }
  .cards2, .contact, .chap, .ctaband, .footage { grid-template-columns: 1fr; gap: var(--space-6); }
  .tools4 { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .tool { padding: var(--space-4); }
  .metagrid { grid-template-columns: 1fr 1fr; }
  .tkc__stage { --s: 68vw; height: calc(var(--s) + 56px); }
  .tkf__section { display: none; }
  .abh { padding-top: var(--space-12); }
  .abh__grid { grid-template-columns: 1fr; grid-template-areas: "photo" "id" "bio"; gap: var(--space-6); }
  .abh__photo { width: 168px; }
  .abh__links .u-btn { flex: 1 1 0; }
  .abh__links { align-self: stretch; }
  .sect.sect--seam { padding: var(--space-12) 0; }
  .abp__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .tool__mark { width: 72px; }
  .tool__logo--code { font-size: 22px; }
  .cx { padding: var(--space-12) 0 var(--space-16); }
  .cx__in { gap: var(--space-8); }
  .fstage { padding: 0 12px 12px 0; }
  .fstage__layer { inset: 0 12px 12px 0; transform: translate3d(6px, 6px, 0); }
  .fstage__layer + .fstage__layer { transform: translate3d(12px, 12px, 0); }
  .fdone { padding: var(--space-6) var(--space-4); }
  .fdone .row .u-btn { flex: 1 1 100%; }
  .pjx { padding-top: var(--space-12); }
  .pjx__head { flex-direction: column; align-items: flex-start; }
  .pjd__stage { --w: 66vw; height: calc(var(--w) * 1.5); }
  .pjd__deck { left: 42%; top: 60%; }
  .pjd__meta { grid-template-columns: 1fr; gap: var(--space-4); }
  .pjd__open { grid-column: auto; justify-self: stretch; }
  .pjd:not(.is-ready) .pjd__deck { grid-template-columns: 1fr 1fr; }
  .tkc__arrow { width: 48px; height: 48px; margin-top: -24px; }
  .tkc__label { font-size: 18px; }
  .tkc__meta { grid-template-columns: 1fr auto; gap: var(--space-4); }
  .tkc__name { font-size: 26px; }
  .tkc__open { grid-column: 1 / -1; }
  .tkc:not(.is-ready) .tkc__rail { grid-template-columns: 1fr 1fr; }
  .tkf__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "info" "media"; gap: var(--space-8); padding-top: 0; }
  .tkf.is-ready .tkf__panel { min-height: 0; }
  .tkf__mark { max-width: 260px; }
  .ctaband { padding: var(--space-8) var(--space-6); }
  .ctaband .u-btn { width: 100%; }
  .form { padding: var(--space-6) var(--space-4); }
  .form__submit { align-self: stretch; }
  .mailbig { font-size: 24px; }
  .pagehead { padding: var(--space-12) 0 var(--space-8); }
  .nextproj { flex-direction: column; align-items: flex-start; padding: var(--space-12) 0 var(--space-16); }
  .foot__in { flex-direction: column; align-items: flex-start; }
  .intro__skip { right: var(--space-4); bottom: var(--space-4); }
}