/*
 * framefields.dev
 *
 * The page is an edit suite, and it uses the demo film's own palette: paper
 * and ink for the room, graphite for the tools (the agent, the viewer, the
 * monitors), black for the picture itself. Broadcast yellow ("signal") marks
 * where you are and nothing else: playheads, the active line of code, a
 * flagged frame, focus.
 *
 * Type is Archivo throughout, condensed and heavy for display the way the
 * film sets its titles, with Martian Mono for code and timecode. Corners are
 * small (4px); there are no pills.
 */
:root {
	--paper: #e6e8e6;
	--sheet: #f4f5f3;
	--ink: #000;
	--steel: #4f5256;
	--rule: #bfc2c2;
	--graphite: #1f2022;
	--graphite-2: #2a2b2e;
	--graphite-line: #3a3c3f;
	--on-graphite: #e8e9e7;
	--graphite-dim: #9a9da0;
	--signal: #f5e300;
	--picture: #000;
	--title: #f2f3f2;
	--scene-1: #8d9093;
	--scene-2: #c4c7c7;
	--scene-3: #5b5e61;

	--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--mono: "Martian Mono", ui-monospace, Menlo, monospace;
	--max: 1320px;
	--gutter: 24px;
	--r: 4px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 1.125rem/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }
img, canvas { display: block; max-width: 100%; }
code { font-family: var(--mono); font-stretch: 87.5%; font-size: 0.8em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--signal); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r); z-index: 10; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Display type: Archivo pulled in to its condensed widths. */
.brand, .comp h1, .block h2, .close h2, .cell h3, .frame-no, .vs .ff, .films .title, .gateway-intro h3, .notfound h1 {
	font-family: var(--sans);
	font-weight: 800;
	font-stretch: 68%;
}

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 1.5rem; line-height: 1; letter-spacing: 0.005em; }
.brand svg { width: 22px; height: 22px; }
.nav nav { display: flex; align-items: center; gap: 2px; }
.nav nav a { text-decoration: none; font-size: 1rem; font-weight: 500; padding: 6px 12px; border-radius: var(--r); }
.nav nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.nav .nav-cta { margin-left: 10px; background: var(--ink); color: var(--paper); font-weight: 600; }
.nav .nav-cta:hover { text-decoration: none; background: var(--graphite-2); }

/* hero: an agent session beside the comp it is building */
.hero { padding-top: clamp(4px, 1.5vh, 16px); padding-bottom: clamp(72px, 11vh, 128px); }
.studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px; }
.viewer { min-width: 0; border-radius: var(--r); overflow: hidden; background: var(--graphite); }

/* The agent's transcript. It scrolls inside the panel so the panel keeps the
   viewer's height. */
.agent { position: relative; min-width: 0; min-height: 0; background: var(--graphite); color: var(--on-graphite); border-radius: var(--r); overflow: hidden; }
.agent-head { display: flex; align-items: center; gap: 16px; height: 40px; padding-inline: 16px; border-bottom: 1px solid var(--graphite-line); font-size: 0.82rem; color: var(--graphite-dim); }
.agent-head span:first-child { color: var(--on-graphite); font-weight: 600; }
.agent-head span:last-child { margin-left: auto; font: 400 0.7rem var(--mono); font-stretch: 87.5%; }
.log {
	position: absolute;
	inset: 40px 0 0;
	overflow-y: auto;
	scrollbar-width: none;
	padding: 18px 16px 28px;
	font-size: 0.9rem;
	line-height: 1.45;
	scroll-behavior: smooth;
	-webkit-mask-image: linear-gradient(transparent, #000 28px);
	mask-image: linear-gradient(transparent, #000 28px);
}
.log::-webkit-scrollbar { display: none; }
.log > * + * { margin-top: 14px; }
.ask { padding: 12px 14px; background: var(--graphite-2); border-radius: var(--r); }
.ask .who { display: block; font-size: 0.75rem; font-weight: 600; color: var(--graphite-dim); }
.ask p { margin: 4px 0 0; min-height: 1.45em; }
.say, .step { color: var(--on-graphite); }
.step b { font-weight: 600; }
.step > code { color: var(--graphite-dim); font-size: 0.72rem; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 1px; background: var(--on-graphite); vertical-align: 1px; }
.step.run > .dot { background: var(--signal); animation: blink 0.8s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .step.run > .dot { animation: none; } }
.out { margin-top: 4px !important; padding-left: 16px; color: var(--graphite-dim); font-size: 0.82rem; }
.src { display: grid; margin: 8px 0 0; padding: 10px 12px; background: #161719; border-radius: 2px; font: 400 0.66rem/1.65 var(--mono); font-stretch: 87.5%; color: #c4c7c7; overflow: hidden; }
.src .ln { white-space: pre; overflow: hidden; text-overflow: clip; min-height: 1.65em; }
.src .del { color: var(--graphite-dim); text-decoration: line-through; }
.src .add { color: var(--signal); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-left: 16px; }
.grid figure { margin: 0; }
.grid figcaption { padding-top: 3px; font: 400 0.64rem var(--mono); color: var(--graphite-dim); }
.grid .flag .comp { outline: 2px solid var(--signal); outline-offset: 1px; }
.grid .flag figcaption { color: var(--signal); }
.progress { height: 3px; margin: 8px 0 0 16px; background: var(--graphite-line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--on-graphite); }

/* The comp the agent builds: a launch title in the film's own look. */
.comp {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--picture);
	color: var(--title);
}
/* Title- and action-safe guides. They are the editor's, so the finished
   render (and the grid frames) drop them. */
.safe { position: absolute; inset: 5%; border: 1px dashed rgb(255 255 255 / 0.22); pointer-events: none; transition: opacity 0.6s; }
.safe::before { content: ""; position: absolute; inset: 5.5%; border: 1px dashed rgb(255 255 255 / 0.14); }
.comp.final .safe, .comp.thumb .safe { opacity: 0; }
.comp.thumb { border-radius: 2px; }
.comp h1 {
	position: absolute;
	left: 9%;
	right: 26%;
	bottom: 17%;
	margin: 0;
	font-size: 8.4cqw;
	line-height: 0.9;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.word > span { display: inline-block; }
.shape { position: absolute; display: block; }
[data-layer] { transition: opacity 0.3s; }
[data-layer].off { opacity: 0; }
/* The camera holds every layer, so a push-in moves the whole frame. */
.cam { position: absolute; inset: 0; transform-origin: 30% 70%; }
.wipe { position: absolute; inset: 0; z-index: 3; background: var(--signal); }
/* Layout guides: a twelve-column grid the title is set on. */
.guides {
	inset: 0 9%;
	background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px calc(100% / 12));
	border-right: 1px solid rgb(255 255 255 / 0.05);
}
/* Frame corners, after the logo's. */
.brackets { inset: 7.5% 6.5%; }
.brackets i { position: absolute; width: 4.2cqw; aspect-ratio: 1; border: 0 solid var(--title); }
.brackets i:nth-child(1) { left: 0; top: 0; border-width: 0.32cqw 0 0 0.32cqw; }
.brackets i:nth-child(2) { right: 0; top: 0; border-width: 0.32cqw 0.32cqw 0 0; }
.brackets i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 0.32cqw 0.32cqw; }
.brackets i:nth-child(4) { right: 0; bottom: 0; border-width: 0 0.32cqw 0.32cqw 0; }
.slate { left: 9%; top: 13%; margin: 0; font: 400 1.5cqw/1.5 var(--mono); font-stretch: 87.5%; color: rgb(255 255 255 / 0.55); white-space: nowrap; }
.slate b { display: block; font-weight: 500; color: var(--title); }
.rule { left: 9%; bottom: 11.5%; width: 21%; height: 0.75cqw; background: var(--signal); transform-origin: left center; }
.tag {
	--x: 76%;
	--y: 76%;
	left: var(--x);
	top: var(--y);
	padding: 0.55em 0.9em;
	border: 0.22cqw solid var(--signal);
	border-radius: 2px;
	color: var(--signal);
	font: 500 2.3cqw/1 var(--mono);
	font-stretch: 87.5%;
	transition: left 0.7s var(--ease), top 0.7s var(--ease), opacity 0.3s;
}
/* Where the first draft put it: on top of the headline, drawn above it so the
   collision the agent catches is plain to see. */
.tag { z-index: 1; background: var(--picture); }
.tag.bad { --x: 50%; --y: 66%; }
.comp.instant [data-layer], .comp.instant .safe, .comp.instant .sel { transition: none; }

/* Selection box around the layer being worked on. */
.sel { position: absolute; z-index: 4; border: 1px solid var(--title); opacity: 0; pointer-events: none; transition: left 0.3s var(--ease), top 0.3s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.2s; }
.sel.on { opacity: 1; }
.sel i { position: absolute; width: 7px; height: 7px; background: var(--title); border: 1px solid var(--picture); }
.sel i:nth-child(1) { left: -4px; top: -4px; }
.sel i:nth-child(2) { right: -4px; top: -4px; }
.sel i:nth-child(3) { left: -4px; bottom: -4px; }
.sel i:nth-child(4) { right: -4px; bottom: -4px; }
.sel.warn { border: 2px dashed var(--signal); }
.sel.warn i { background: var(--signal); }

/* The comp's timeline: layers, keyframes, a render cache line and a playhead. */
.tl {
	--name: 10rem;
	color: var(--graphite-dim);
	padding: 0 16px 16px;
	font: 400 0.68rem/1 var(--mono);
	font-stretch: 87.5%;
	user-select: none;
}
.tl:focus-visible { outline-offset: -3px; box-shadow: none; }
.tl-head { display: flex; align-items: center; gap: 16px; height: 40px; border-bottom: 1px solid var(--graphite-line); }
.tl-head output { color: var(--on-graphite); font-size: 0.82rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tl-hint { margin-left: auto; font-family: var(--sans); font-stretch: 100%; font-size: 0.82rem; opacity: 0; transition: opacity 0.3s; }
.tl.ready .tl-hint { opacity: 1; }
#replay {
	font: 600 0.82rem var(--sans);
	color: var(--on-graphite);
	background: transparent;
	border: 1px solid var(--graphite-line);
	border-radius: var(--r);
	padding: 5px 12px;
	cursor: pointer;
}
#replay:hover { border-color: var(--graphite-dim); }
.tl-body { position: relative; display: grid; grid-template-columns: var(--name) minmax(0, 1fr); touch-action: none; }
.tl.ready .tl-body { cursor: ew-resize; }
.tl-ruler { grid-column: 2; position: relative; height: 24px; border-bottom: 1px solid var(--graphite-line); }
.tl-ruler span { position: absolute; bottom: 0; height: 100%; padding: 6px 0 0 4px; border-left: 1px solid var(--graphite-line); font-variant-numeric: tabular-nums; }
.tl-ruler span:last-child { padding: 6px 4px 0 0; border-left: 0; border-right: 1px solid var(--graphite-line); transform: translateX(-100%); }
.tl-cache { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--on-graphite); }
.tl-rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 4px 0 0; }
.tl-rows li { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; height: 17px; transition: opacity 0.3s; }
.tl-rows li.off { opacity: 0; }
.tl-name { color: var(--on-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; height: 100%; }
.tl-span { position: absolute; top: 50%; height: 1px; background: var(--graphite-dim); }
.kf { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--on-graphite); transform: rotate(45deg); }
.tl-lane { position: absolute; left: var(--name); right: 0; top: 0; bottom: 0; pointer-events: none; }
.tl-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--signal); }
.tl-playhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

.hero-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-top: 36px; }
.lede { margin: 0; max-width: 32rem; font-size: 1.375rem; line-height: 1.4; color: var(--ink); }
.hero-foot .cmds { justify-self: end; width: 100%; }

/* install commands: one panel, two rows */
.cmds { display: grid; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; max-width: 34rem; }
.cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 12px 12px 16px; min-width: 0; }
.cmd + .cmd { border-top: 1px solid var(--rule); }
.cmd span { grid-column: 1; font-size: 0.82rem; color: var(--steel); }
.cmd code { grid-column: 1; padding-top: 3px; font-size: 0.86rem; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
.copy {
	grid-column: 2;
	grid-row: 1 / span 2;
	font: 600 0.88rem var(--sans);
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: var(--r);
	padding: 9px 16px;
	cursor: pointer;
	min-width: 5.5rem;
}
.copy:hover { background: var(--graphite-2); }

/* reel: the film and its source in the dark room, driven by scroll */
.reel { position: relative; height: 620vh; background: var(--graphite); }
.stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
	gap: 8px;
	padding: 8px;
}
.monitor { background: #161719; color: var(--on-graphite); border-radius: var(--r); min-height: 0; min-width: 0; overflow: hidden; }
.monitor-head { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: 0.85rem; color: var(--graphite-dim); border-bottom: 1px solid var(--graphite-2); }
.monitor-head span { color: var(--on-graphite); font-weight: 600; }
.monitor-head a { color: var(--graphite-dim); }
.monitor-head a:hover { color: var(--on-graphite); }

.source { display: flex; flex-direction: column; }
.code-window {
	--lh: 20px;
	position: relative;
	flex: 1;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent);
	mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent);
}
.code-window::after {
	/* The code playhead: the line the film is at sits here. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 38%;
	height: var(--lh);
	background: rgb(245 227 0 / 0.08);
	border-left: 3px solid var(--signal);
	pointer-events: none;
}
.code {
	margin: 0;
	padding: 0;
	font: 400 11.5px/var(--lh) var(--mono);
	font-stretch: 87.5%;
	color: var(--graphite-dim);
	tab-size: 2;
	will-change: transform;
}
.code .l { display: grid; grid-template-columns: 3px 3.2em minmax(0, 1fr); gap: 0 10px; height: var(--lh); white-space: pre; opacity: 0.38; transition: opacity 0.25s; }
.code .l::before { content: ""; }
.code .l.s1::before { background: var(--scene-1); }
.code .l.s2::before { background: var(--scene-2); }
.code .l.s3::before { background: var(--scene-3); }
.code .l.on { opacity: 1; }
.code .n { text-align: right; color: #5b5e61; user-select: none; }
.code .t { overflow: hidden; color: #c4c7c7; }
.code .kw { color: #fff; font-weight: 600; }
.code .str { color: #e8e9e7; }
.code .num { color: var(--signal); }
.code .com { color: #73767a; font-style: italic; }

.program { display: flex; flex-direction: column; padding: 12px; gap: 12px; }
.screen { position: relative; width: min(100%, calc((100svh - 300px) * 16 / 9)); }
.screen canvas, .screen img { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 2px; }

.timeline { position: relative; width: 100%; height: 64px; user-select: none; }
.ruler { position: relative; height: 20px; border-bottom: 1px solid var(--graphite-2); font: 400 0.64rem var(--mono); font-stretch: 87.5%; color: var(--graphite-dim); font-variant-numeric: tabular-nums; }
.ruler span { position: absolute; bottom: 0; height: 6px; border-left: 1px solid var(--graphite-line); }
.ruler span.sec { height: 10px; border-color: var(--graphite-dim); }
.ruler span b { position: absolute; bottom: 10px; left: 3px; font-weight: 400; }
.tracks { position: relative; height: 44px; }
.clip { position: absolute; height: 16px; border-radius: 2px; font-size: 0.68rem; line-height: 16px; padding-inline: 8px; color: var(--ink); background: var(--graphite-dim); font-weight: 600; white-space: nowrap; overflow: hidden; opacity: 0.45; transition: opacity 0.25s, background-color 0.25s; }
.clip.v1 { top: 6px; }
.clip.v2 { top: 26px; }
.clip.on { opacity: 1; background: var(--on-graphite); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--signal); will-change: transform; }
.playhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

.readout { display: flex; align-items: flex-end; gap: 20px; margin-top: auto; }
.frame-no {
	font-size: clamp(3rem, 17vh, 11rem);
	line-height: 0.78;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	min-width: 3ch;
	color: var(--on-graphite);
}
.readout-meta { display: grid; gap: 2px; padding-bottom: 4px; font-size: 0.9rem; color: var(--graphite-dim); font-variant-numeric: tabular-nums; }
.readout-meta span:first-child { font: 400 0.78rem var(--mono); font-stretch: 87.5%; }
.readout-meta span:last-child { color: var(--on-graphite); font-weight: 600; }

.reel-note { margin: 20px 0 0; max-width: 46rem; font-size: 1rem; color: var(--steel); }

/* blocks */
.block { padding-top: clamp(104px, 15vh, 168px); }
.block h2, .close h2 {
	margin: 0 0 40px;
	font-size: clamp(2.75rem, 6vw, 5.25rem);
	line-height: 0.9;
	letter-spacing: -0.005em;
	max-width: 15ch;
	text-wrap: balance;
}
.block-intro { max-width: 38rem; margin: -18px 0 48px; font-size: 1.1875rem; color: var(--steel); }

/* capabilities: a contact sheet of what the package does */
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; }
.cell { display: flex; flex-direction: column; min-width: 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.cell h3 { margin: 0; font-size: 1.85rem; line-height: 0.95; letter-spacing: 0; }
.cell h3.big { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 0.9; }
.cell p { margin: 10px 0 0; max-width: 34rem; font-size: 1.0625rem; color: var(--steel); }
.cell > img, .cell > video { order: -1; width: 100%; height: auto; margin: 0 0 18px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--graphite); }
/* Media sits above the rule, so the rule separates picture from caption. */
.cell:has(> img, > video) { padding-top: 0; border-top: 0; }
.cell:has(> img, > video) h3 { padding-top: 14px; border-top: 2px solid var(--ink); }
.wide-4 { grid-column: span 4; }
.wide-5 { grid-column: span 5; }
.wide-6 { grid-column: span 6; }
.wide-7 { grid-column: span 7; }
.wide-8 { grid-column: span 8; }
.wide-12 { grid-column: 1 / -1; }
.cell.vision > video { aspect-ratio: 4 / 3; }
.cell > img.shot { aspect-ratio: auto; }
/* effects: one portrait through four shaders */
.cell.effects { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: end; }
.effects-text p { max-width: 26rem; }
.fx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fx figure { margin: 0; }
.fx img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.fx figcaption { padding-top: 8px; font: 400 0.7rem/1.3 var(--mono); font-stretch: 87.5%; color: var(--steel); }
.cell.sheet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: end; }
.contact { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--graphite); border-radius: var(--r); }
.contact img { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* headless browser vs framefields: five aspects side by side */
.versus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.vs { padding: 16px 20px 8px 0; }
.vs + .vs { padding-left: 20px; border-left: 1px solid var(--rule); }
.vs h3 { margin: 0 0 28px; font-size: 0.95rem; font-weight: 600; color: var(--steel); }
.vs .ff { margin: 0; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 0.98; }
.vs .ff.num { font-size: clamp(2rem, 3.2vw, 3rem); font-variant-numeric: tabular-nums; }
.vs .hc { margin: 20px 0 0; color: var(--steel); font-size: 1rem; line-height: 1.4; }
.vs .hc span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); }

/* films: the launch film large, the rest beside it */
.films { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto); gap: 24px 32px; }
.films .lead { grid-row: 1 / span 3; align-self: start; }
.films a { display: grid; gap: 12px; text-decoration: none; }
.films li:not(.lead) a { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 20px; }
.thumb { display: block; overflow: hidden; background: var(--graphite); border-radius: 2px; }
.thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.films .title { font-size: 1.5rem; line-height: 1; }
.films .lead .title { font-size: 2.1rem; }
.films a:hover .title { text-decoration: underline; text-decoration-thickness: 2px; }
.films a:hover .thumb { outline: 2px solid var(--ink); outline-offset: 3px; }

/* AI Gateway */
.gateway-header { margin-bottom: 8px; }
.gateway-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 48px;
	align-items: start;
	padding-top: 16px;
	border-top: 2px solid var(--ink);
	margin-bottom: 64px;
}
.gateway-intro h3 { margin: 0 0 14px; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 0.95; }
.gateway-intro p { margin: 0 0 24px; color: var(--steel); font-size: 1.0625rem; max-width: 32rem; }
.gateway-points { list-style: none; padding: 0; margin: 0 0 32px; display: grid; font-size: 1rem; line-height: 1.45; border-top: 1px solid var(--rule); }
.gateway-points li { padding: 11px 0; border-bottom: 1px solid var(--rule); color: var(--steel); }
.gateway-points li strong { color: var(--ink); font-weight: 600; }
.gateway-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn-gateway-primary, .btn-gateway-secondary {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--r);
	text-decoration: none;
	border: 1px solid var(--ink);
}
.btn-gateway-primary { background: var(--ink); color: var(--paper); }
.btn-gateway-primary:hover { background: var(--graphite-2); text-decoration: none; }
.btn-gateway-secondary { color: var(--ink); }
.btn-gateway-secondary:hover { background: var(--sheet); text-decoration: none; }
.gateway-code { background: var(--graphite); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.gateway-code-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--graphite-line); font: 400 0.74rem var(--mono); font-stretch: 87.5%; color: var(--graphite-dim); }
.gateway-code-head span:first-child { color: var(--on-graphite); }
.gateway-code-body { margin: 0; padding: 18px 20px 22px; font: 400 0.8rem/1.7 var(--mono); font-stretch: 87.5%; color: #c4c7c7; overflow-x: auto; tab-size: 2; }
.gateway-code-body code { font-size: inherit; font-family: inherit; }
.gateway-code-body .kw { color: #fff; font-weight: 600; }
.gateway-code-body .str { color: var(--on-graphite); }
.gateway-code-body .num { color: var(--signal); }
.gateway-code-body .fn { color: #fff; }
.gateway-features { gap: 24px; }
.gateway-features .cell h3 { font-size: 1.6rem; margin-bottom: 8px; }
.gateway-features .cell p { font-size: 1rem; line-height: 1.5; margin-top: 0; }

/* closing install: the film's end slate */
.close {
	margin-top: clamp(120px, 17vh, 190px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: end;
	padding: clamp(32px, 5vw, 72px);
	background: var(--picture);
	color: var(--title);
	border-radius: var(--r);
	max-width: calc(var(--max) - 2 * var(--gutter));
}
.close h2, .close-head h2 { margin: 0; max-width: 11ch; }
.close-lede { margin: 18px 0 0; font-size: 1.15rem; line-height: 1.45; color: var(--graphite-dim); max-width: 28rem; }
.close .cmds { background: var(--graphite); border-color: var(--graphite-line); color: var(--on-graphite); }
.close .cmd + .cmd { border-color: var(--graphite-line); }
.close .cmd span { color: var(--graphite-dim); }
.close .copy { background: var(--on-graphite); color: var(--ink); }
.close .copy:hover { background: #fff; }
.close :focus-visible { outline-color: var(--title); }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-top: 96px; padding-block: 24px 48px; border-top: 1px solid var(--rule); font-size: 0.95rem; }
.footer p { margin: 0; color: var(--steel); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* 404 */
.notfound { padding-block: 12vh 20vh; }
.notfound h1 { margin: 0 0 24px; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.9; max-width: 12ch; }

@media (max-width: 1100px) {
	.studio { grid-template-columns: minmax(0, 1fr); }
	.agent { order: 1; height: 420px; }
	.hero-foot { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.hero-foot .cmds { justify-self: start; }
	.versus { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0 20px; }
	.vs, .vs + .vs { padding: 16px 0 24px; border-left: 0; border-top: 2px solid var(--ink); }
	.vs:last-child { grid-column: 1 / -1; }
	.gateway-showcase { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 960px) {
	:root { --gutter: 16px; }
	.nav nav a { padding: 6px 9px; }
	.comp { aspect-ratio: 4 / 5; }
	.comp h1 { left: 9%; right: 9%; bottom: 14%; font-size: 13.4cqw; }
	.guides { inset: 0 9%; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px calc(100% / 6)); }
	.slate { top: 11%; font-size: 2.6cqw; }
	.rule { bottom: 8%; width: 34%; height: 1.2cqw; }
	.brackets i { width: 7cqw; }
	.tag { --x: 62%; --y: 30%; font-size: 4cqw; }
	.tag.bad { --x: 30%; --y: 72%; }
	.tl { --name: 8.5rem; padding-inline: 12px; font-size: 0.64rem; }
	.tl-hint { display: none; }
	.tl-ruler .minor { color: transparent; }
	#replay { margin-left: auto; }
	.cmd code { font-size: 0.8rem; white-space: normal; overflow-wrap: anywhere; }
	.reel { height: 520vh; }
	.stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 6px; gap: 6px; }
	.program { order: -1; padding: 8px; gap: 8px; }
	.screen { width: 100%; }
	.timeline { height: 56px; }
	.ruler b { display: none; }
	.readout { margin-top: 0; }
	.frame-no { font-size: 3.2rem; }
	.monitor-head { padding: 8px 12px; }
	.code-window { --lh: 18px; }
	.code { font-size: 10.5px; }
	.caps { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.caps > * { grid-column: 1; }
	.cell.sheet, .cell.effects { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.versus { grid-template-columns: minmax(0, 1fr); }
	.films { grid-template-columns: minmax(0, 1fr); }
	.films .lead { grid-row: auto; }
	.close { grid-template-columns: minmax(0, 1fr); margin-inline: var(--gutter); }
	.block { padding-top: 96px; }
	.gateway-code-body { font-size: 0.72rem; padding: 14px 16px; }
}
@media (max-width: 480px) {
	.nav nav { gap: 0; }
	.nav nav a { padding: 6px 7px; font-size: 0.95rem; }
	/* Blog, GitHub and npm are in the footer too; the bar keeps to one line on a phone. */
	.nav .nav-extra { display: none; }
	.brand { font-size: 1.3rem; }
	.lede { font-size: 1.2rem; }
}
@media (max-width: 960px) and (max-height: 700px) {
	.timeline { display: none; }
}