/**
 * Icosa.
 *
 * A dark stage with one warm light on it. The whole page is ink and paper-white
 * except for the field, which burns in the company's own tint — so the GPU work
 * is the only colour on the site and cannot be mistaken for decoration.
 *
 * The layout is deliberately uneven. Sections start from different edges, sit
 * at different widths and overlap; the repertoire grid gives different cards
 * different spans and aspect ratios. A company that makes asymmetric work
 * should not describe it down a centred column. The unevenness is a small
 * fixed set of positions reused on purpose, not a different arbitrary offset
 * per element, which is the difference between designed and sloppy.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url( '../fonts/publicsans-400-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url( '../fonts/publicsans-400-latinext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Public Sans Mid';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url( '../fonts/publicsans-500-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url( '../fonts/cormorantgaramond-normal-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */

:root {
	--ink: #0b0b0d;
	--ink-2: #131317;
	--ink-3: #1c1c21;
	--rule: #2a2a31;
	--paper: #f2f0ea;
	--paper-2: #b9b6ad;   /* 7.6:1 on --ink */
	--paper-3: #8f8c84;   /* 4.9:1 on --ink, small print only */
	--warm: #dcc79e;

	--display: 'Cormorant Garamond', Georgia, serif;
	--sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mid: 'Public Sans Mid', 'Public Sans', system-ui, sans-serif;

	--gut: clamp( 20px, 5vw, 72px );
	--wide: 1320px;
	--read: 66ch;
	--ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var( --ink );
	color: var( --paper );
	font-family: var( --sans );
	font-size: clamp( 16px, 0.5vw + 14.6px, 18px );
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var( --warm ); text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var( --paper ); }
:focus-visible { outline: 2px solid var( --warm ); outline-offset: 3px; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 80;
	background: var( --paper ); color: var( --ink ); padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- masthead */

.masthead {
	position: sticky; top: 0; z-index: 60;
	padding: 18px 0;
	/* On a page whose hero is a photograph the strip has to carry its own
	   ground: the sub-line measured 3.19:1 over a lit part of the image. */
	background: linear-gradient( var( --ink ) 46%, rgba( 11, 11, 13, 0.72 ) 78%, transparent );
}
.masthead__in {
	max-width: var( --wide ); margin: 0 auto; padding: 0 var( --gut );
	display: flex; align-items: baseline; gap: 14px 36px; flex-wrap: wrap;
}
.mark { text-decoration: none; color: inherit; }
.mark__name {
	display: block; font-family: var( --display ); font-weight: 400;
	font-size: 1.5rem; letter-spacing: 0.01em;
}
.mark__sub {
	display: block; font-size: 0.74rem; letter-spacing: 0.17em;
	text-transform: uppercase; color: var( --paper-2 ); margin-top: 2px;
}
.masthead__nav { margin-left: auto; }
.nav {
	list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
	gap: 4px 28px; font-size: 0.88rem;
}
.nav a { color: var( --paper ); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a:focus-visible, .nav .current-menu-item > a { border-bottom-color: var( --warm ); }

/* ------------------------------------------------------------- the opening */

/*
 * A whole viewport of field. The photograph underneath is a real element
 * because the GPU needs it as a texture; once the canvas is live it is hidden,
 * and when the canvas never comes up it stays and carries the hero on its own.
 */
.opening {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding-block: clamp( 5rem, 16vh, 10rem ) clamp( 3rem, 9vh, 6rem );
	isolation: isolate;
	overflow: hidden;
}
.opening--work { min-height: 82svh; }

.opening__photo {
	position: absolute; inset: 0; z-index: -2; display: block;
	/* Matches the canvas's own fade-in below, so the handover is a crossfade
	   rather than a cut. Without this the photo dropped out instantly the
	   moment the canvas went live while the canvas was still 900ms into
	   fading up from transparent — a visible gap of near-black in between,
	   on top of the separate bug where a late photo could leave that gap
	   permanent. */
	transition: opacity 900ms var( --ease );
}
.opening__photo img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale( 0.35 ) contrast( 1.06 ) brightness( 0.62 );
}
/* Once the field is drawing, the photograph lives inside it instead. */
.opening:has( .field__canvas.is-live ) .opening__photo { opacity: 0; }

.field__canvas {
	position: absolute; inset: 0; z-index: -1;
	width: 100%; height: 100%; display: block;
	opacity: 0; transition: opacity 900ms var( --ease );
}
.field__canvas.is-live { opacity: 1; }

/* A scrim solved against the field's own brightest value, so reversed-out type
   clears 4.5:1 whatever the crowd is doing underneath. */
.opening::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; z-index: -1;
	height: min( 66%, 34rem ); pointer-events: none;
	background: linear-gradient(
		to top,
		rgba( 6, 6, 8, 0.86 ) 0%,
		rgba( 6, 6, 8, 0.72 ) 28%,
		rgba( 6, 6, 8, 0.40 ) 58%,
		rgba( 6, 6, 8, 0 ) 100%
	);
}

.opening__in { max-width: var( --wide ); margin: 0 auto; padding: 0 var( --gut ); width: 100%; }
.opening__eyebrow {
	margin: 0 0 1.1rem; font-size: 0.74rem; letter-spacing: 0.2em;
	text-transform: uppercase; color: var( --warm );
}
.opening__line {
	margin: 0; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 2.6rem, 7vw, 5.4rem ); line-height: 0.98;
	letter-spacing: -0.02em; max-width: 15ch; text-wrap: balance;
}
.opening__sub { margin: 1.4rem 0 0; max-width: 48ch; font-size: 1.06rem; }
.opening__now { margin: 1.2rem 0 0; font-size: 0.88rem; color: var( --paper-2 ); }
.opening__now a { color: var( --warm ); }

/* ------------------------------------------------------------- cursor glow */

/* A single soft light that follows the pointer over the whole page — the
   one piece of "GPU-adjacent" polish that costs nothing to run, since it is
   a position on two custom properties rather than a canvas. */
.glow {
	position: fixed; inset: 0; z-index: 65; pointer-events: none;
	opacity: 0; transition: opacity 500ms var( --ease );
	mix-blend-mode: screen;
	background: radial-gradient( 380px circle at var( --gx, 50% ) var( --gy, 50% ), rgba( 220, 199, 158, 0.16 ), transparent 68% );
}
.glow.is-active { opacity: 1; }
.glow.is-down {
	background: radial-gradient( 460px circle at var( --gx, 50% ) var( --gy, 50% ), rgba( 220, 199, 158, 0.27 ), transparent 70% );
}

/* ----------------------------------------------------------------- creed */

/* Two blocks that refuse to line up: the lead sits left and large, the body
   drops and moves right. */
.creed {
	position: relative;
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto;
	padding-inline: var( --gut );
	display: grid; gap: clamp( 1.5rem, 4vw, 3rem );
	grid-template-columns: minmax( 0, 1fr );
}
.creed__field {
	/* Sized and positioned the same way .field__canvas is (width/height set
	   explicitly, not left to inset alone) — a <canvas> is a replaced element
	   with its own intrinsic 300x150 backing size, which an inset with no
	   explicit width can fall back to instead of stretching to fill. */
	position: absolute; inset: -3rem; width: calc( 100% + 6rem ); height: calc( 100% + 6rem );
	z-index: -1; pointer-events: none; display: block;
}
@media ( min-width: 60rem ) {
	.creed { grid-template-columns: 1.15fr 1fr; align-items: start; }
	.creed__body { margin-top: clamp( 3rem, 9vh, 7rem ); }
}
.creed__lead p {
	margin: 0; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 1.5rem, 3.1vw, 2.5rem ); line-height: 1.2;
	letter-spacing: -0.012em;
}
.creed__body p { margin: 0 0 1rem; color: var( --paper-2 ); max-width: 46ch; }

/* ----------------------------------------------------------------- solid */

.solid {
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto;
	padding-inline: var( --gut );
	display: grid; gap: clamp( 1.6rem, 4vw, 3.4rem );
	grid-template-columns: minmax( 0, 1fr );
	align-items: center;
}
@media ( min-width: 62rem ) { .solid { grid-template-columns: 1.05fr 1fr; } }
.solid__figure { display: flex; justify-content: center; }
.solid__stage { position: relative; width: 100%; max-width: 640px; }
.wire--ico { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: -1; pointer-events: none; display: block; }
.solid__head {
	margin: 0 0 0.9rem; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 1.8rem, 3.8vw, 3rem ); line-height: 1.08; letter-spacing: -0.018em;
}
.solid__said p { margin: 0 0 0.9rem; color: var( --paper-2 ); max-width: 50ch; }
.solid__dirs {
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	display: grid; gap: 2px 10px; grid-template-columns: repeat( auto-fit, minmax( 8.5rem, 1fr ) );
	font-size: 0.8rem; color: var( --paper-3 );
}
.solid__dirs li { padding: 3px 0 3px 12px; border-left: 2px solid var( --rule ); }
.solid__dirs li[ data-plane="door" ] { border-left-color: #6c7f9b; }
.solid__dirs li[ data-plane="table" ] { border-left-color: #8a7f63; }
.solid__dirs li[ data-plane="wheel" ] { border-left-color: #7d6470; }

/* ------------------------------------------------------------ kinesphere */

.kine { width: 100%; height: auto; max-width: 640px; overflow: visible; }
.kine__edges line { stroke: var( --rule ); stroke-width: 1; }
.kine__path {
	fill: none; stroke: var( --warm ); stroke-width: 2.2;
	stroke-linejoin: round; stroke-linecap: round;
}
.kine__start { fill: var( --warm ); }
.kine__node { fill: #4a4a54; }
.kine__node.is-on { fill: var( --paper ); }
.kine__node[ data-plane="door" ] { fill: #4c5a6e; }
.kine__node[ data-plane="table" ] { fill: #635c47; }
.kine__node[ data-plane="wheel" ] { fill: #5b4953; }
.kine__node.is-on[ data-plane="door" ],
.kine__node.is-on[ data-plane="table" ],
.kine__node.is-on[ data-plane="wheel" ] { fill: var( --paper ); }
.kine__label {
	/* Paper, not mid-grey. A label can land anywhere on the solid including on
	   the warm phrase line, which is light — mid-grey on it measured 1.11:1.
	   Paper on its own ink halo is legible wherever it falls. */
	fill: var( --paper ); font-family: var( --sans ); font-size: 11px;
	text-anchor: middle; letter-spacing: 0.04em;
	/* A label can land on the warm phrase line, which is far too light to read
	   pale type on. paint-order puts the stroke behind the fill so the halo
	   never eats the letterforms. */
	paint-order: stroke fill;
	stroke: var( --ink ); stroke-width: 4.5px; stroke-linejoin: round; stroke-opacity: 0.95;
}
.kine--foot { max-width: 200px; opacity: 0.75; }

/* ---------------------------------------------------------------- planes */

/* Three panels at three different heights, on purpose. */
.planes {
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto;
	padding-inline: var( --gut );
	display: grid; gap: clamp( 1rem, 2.5vw, 2rem );
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 56rem ) {
	.planes { grid-template-columns: repeat( 3, 1fr ); align-items: start; }
	.plane--table { margin-top: clamp( 2rem, 6vh, 4.5rem ); }
	.plane--wheel { margin-top: clamp( 4rem, 12vh, 9rem ); }
}
.plane {
	position: relative; overflow: hidden;
	border-top: 1px solid var( --rule ); padding-top: 1.1rem;
}
.plane__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.plane__n {
	margin: 0; font-family: var( --display ); font-size: 2.4rem; line-height: 1;
	/* These carry information — they number the three planes — so they cannot
	   use the rule colour, which measured 1.38:1 and is for lines. */
	color: var( --paper-3 );
}
.plane__head { margin: 0.4rem 0 0.5rem; font-family: var( --display ); font-weight: 400; font-size: 1.5rem; }
.plane__note { margin: 0; color: var( --paper-2 ); font-size: 0.94rem; }
.plane__dirs {
	list-style: none; margin: 1rem 0 0; padding: 0;
	font-size: 0.8rem; color: var( --paper-3 );
}
.plane__dirs li { padding: 2px 0; }

/* ----------------------------------------------------------------- works */

.works, .alsowrap {
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto;
	padding-inline: var( --gut );
}
.works__top { display: grid; gap: 0.8rem 3rem; margin-bottom: clamp( 1.8rem, 4vh, 3rem ); }
@media ( min-width: 62rem ) { .works__top { grid-template-columns: 1fr 1.1fr; align-items: end; } }
.works__head, .company__head, .actions__head, .alsowrap__head, .effortwrap__head, .notation__head, .tail__head {
	margin: 0; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 1.8rem, 3.8vw, 3rem ); line-height: 1.08; letter-spacing: -0.018em;
}
.works__note, .company__note, .actions__note { margin: 0; color: var( --paper-2 ); max-width: 54ch; font-size: 0.96rem; }

/*
 * The grid is uneven by design: every third card is tall, every fifth is wide,
 * and the spans come from a small fixed set rather than a value invented per
 * card. On a phone it collapses to one column, because unevenness at 375px is
 * just breakage.
 */
.works__grid {
	display: grid; gap: clamp( 0.8rem, 2vw, 1.6rem );
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 46rem ) { .works__grid { grid-template-columns: repeat( 6, 1fr ); } }

.card { margin: 0; }
@media ( min-width: 46rem ) {
	.card { grid-column: span 3; }
	.card--1 { grid-column: span 4; }
	.card--2 { grid-column: span 2; margin-top: clamp( 1.5rem, 5vh, 3.5rem ); }
	.card--3 { grid-column: span 2; }
	.card--4 { grid-column: span 4; margin-top: clamp( 1rem, 3vh, 2.5rem ); }
	.card--5 { grid-column: span 3; }
}
.card__a { display: block; text-decoration: none; color: inherit; }
.card__shot { position: relative; display: block; overflow: hidden; background: var( --ink-2 ); }
/* A spotlight that follows the pointer, on top of the photograph rather than
   changing it — nothing here can fail a contrast check, since no text sits
   on this layer. */
.card__shot::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	opacity: 0; transition: opacity 280ms var( --ease );
	background: radial-gradient( 62% 62% at var( --sx, 50% ) var( --sy, 50% ), rgba( 255, 246, 230, 0.85 ), transparent 70% );
	/* screen rather than overlay: overlay multiplies where the base is dark,
	   which is most of this grid — the spotlight nearly vanished on the
	   darker photographs. screen only ever lightens, so it reads the same
	   whether the frame under the cursor is a lit stage or a black tutu. */
	mix-blend-mode: screen;
}
.card__a:hover .card__shot::after, .card__a:focus-visible .card__shot::after { opacity: 1; }
.card__shot img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale( 0.3 ) brightness( 0.86 );
	transition: transform 1100ms var( --ease ), filter 600ms var( --ease );
}
.card--1 .card__shot, .card--4 .card__shot { aspect-ratio: 16 / 9; }
.card--2 .card__shot, .card--3 .card__shot { aspect-ratio: 3 / 4; }
.card--5 .card__shot { aspect-ratio: 4 / 3; }
.card__a:hover .card__shot img, .card__a:focus-visible .card__shot img {
	transform: scale( 1.04 ); filter: grayscale( 0 ) brightness( 1 );
}
.card__said { display: block; padding-top: 0.9rem; }
.card__act {
	display: block; font-size: 0.7rem; letter-spacing: 0.2em;
	text-transform: uppercase; color: var( --warm );
}
.card__title {
	display: block; font-family: var( --display ); font-weight: 400;
	font-size: clamp( 1.25rem, 2.1vw, 1.7rem ); line-height: 1.12; margin-top: 0.3rem;
}
.card__a:hover .card__title { text-decoration: underline; }
.card__meta { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var( --paper-3 ); }
.works__all { margin-top: clamp( 2rem, 5vh, 3.5rem ); }

.btn {
	display: inline-block; padding: 0.85rem 1.9rem; border: 1px solid var( --paper-2 );
	color: var( --paper ); text-decoration: none; font-size: 0.84rem;
	letter-spacing: 0.12em; text-transform: uppercase;
	transition: background-color 320ms var( --ease ), color 320ms var( --ease ), border-color 320ms var( --ease );
}
.btn:hover, .btn:focus-visible { background: var( --paper ); color: var( --ink ); border-color: var( --paper ); }
.btn--big { padding: 1.05rem 2.4rem; }

/* --------------------------------------------------------------- reading */

.reading {
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto;
	padding-inline: var( --gut );
	display: grid; gap: clamp( 1.6rem, 4vw, 3.2rem );
	grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 62rem ) { .reading { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.reading__eyebrow {
	margin: 0 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.2em;
	text-transform: uppercase; color: var( --warm );
}
.reading__head { margin: 0; font-family: var( --display ); font-weight: 300; font-size: clamp( 2rem, 4.4vw, 3.4rem ); line-height: 1.05; }
.reading__head a { color: inherit; text-decoration: none; }
.reading__head a:hover { text-decoration: underline; }
.reading__phrase { margin: 1rem 0 0; color: var( --paper-2 ); font-size: 0.94rem; }

/* ---------------------------------------------------------------- effort */

.effort { display: grid; gap: clamp( 1.2rem, 3vw, 2.2rem ); }
.effort__eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var( --paper-3 ); }
.effort__name {
	margin: 0.2rem 0 0.5rem; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 2.4rem, 6vw, 4.2rem ); line-height: 1; color: var( --warm );
}
.effort__note { margin: 0; color: var( --paper-2 ); max-width: 44ch; }
.effort__hedge {
	margin: 0.9rem 0 0; font-size: 0.86rem; color: var( --paper-2 );
	border-left: 2px solid var( --warm ); padding-left: 0.9rem; max-width: 46ch;
}
.effort__scale { margin: 0; }
.effort__row { padding: 0.85rem 0; border-top: 1px solid var( --rule ); }
.effort__row dt { font-family: var( --mid ); font-weight: 500; font-size: 0.94rem; }
.effort__row dd { margin: 0; }
.effort__bar {
	display: grid; grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: 0.7rem; align-items: center; margin-top: 0.4rem;
}
.effort__end { font-size: 0.76rem; color: var( --paper-3 ); white-space: nowrap; }
.effort__end--r { text-align: right; }
.effort__track { position: relative; height: 2px; background: var( --rule ); }
.effort__track i {
	position: absolute; top: 50%; left: var( --at ); width: 11px; height: 11px;
	margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var( --warm );
}
.effort__why { margin-top: 0.45rem; font-size: 0.82rem; color: var( --paper-3 ); max-width: 52ch; }

/* --------------------------------------------------------------- actions */

.actions { position: relative; max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto; padding-inline: var( --gut ); }
.wire--cube { position: absolute; inset: -4% -2%; width: 104%; height: 108%; z-index: -1; pointer-events: none; display: block; }
/* Extra headroom above the grid — the cube the eight actions are the corners
   of is drawn across the whole section, but the grid's own opaque cards
   cover most of it; this is the room it actually gets to be seen in. */
.actions__top { display: grid; gap: 0.8rem 3rem; margin-bottom: clamp( 3.2rem, 9vh, 6rem ); }
@media ( min-width: 62rem ) { .actions__top { grid-template-columns: 1fr 1.2fr; align-items: end; } }
.actions__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var( --rule );
	border-block: 1px solid var( --rule );
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}
.act { background: var( --ink ); padding: 1.2rem 1.2rem 1.4rem; }
.act__name { margin: 0; font-family: var( --display ); font-weight: 400; font-size: 1.5rem; }
.act__mix { margin: 0.35rem 0 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.act__mix span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var( --warm ); }
.act__mix span + span::before { content: "· "; color: var( --paper-3 ); }
.act__note { margin: 0; font-size: 0.88rem; color: var( --paper-2 ); }

/* --------------------------------------------------------------- company */

.company { max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto; padding-inline: var( --gut ); }
.company__top { display: grid; gap: 0.8rem 3rem; margin-bottom: clamp( 1.8rem, 4vh, 3rem ); }
@media ( min-width: 62rem ) { .company__top { grid-template-columns: 1fr 1.2fr; align-items: end; } }
.company__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp( 1rem, 2.4vw, 1.8rem );
	grid-template-columns: repeat( auto-fill, minmax( 11rem, 1fr ) );
}
.who { display: block; }
/* Every third portrait drops, so the row is never a straight line of heads. */
.who:nth-child( 3n ) { margin-top: clamp( 1rem, 3vh, 2.4rem ); }
.who__shot { display: block; overflow: hidden; background: var( --ink-2 ); aspect-ratio: 3 / 4; }
.who__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale( 1 ) brightness( 0.9 ); }
.who__name { display: block; margin-top: 0.7rem; font-family: var( --mid ); font-weight: 500; font-size: 0.98rem; }
.who__role { display: block; font-size: 0.82rem; color: var( --paper-2 ); }
.who__since { display: block; font-size: 0.76rem; color: var( --paper-3 ); }
.who__said { display: block; margin-top: 0.5rem; font-size: 0.84rem; color: var( --paper-2 ); }

/* ---------------------------------------------------------------- facts */

.facts { max-width: var( --wide ); margin: clamp( 2.5rem, 7vh, 5rem ) auto; padding-inline: var( --gut ); }
.facts__list {
	margin: 0; display: grid; gap: 1px; background: var( --rule );
	border-block: 1px solid var( --rule );
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
}
.facts__list > div { background: var( --ink ); padding: 1.1rem 1.1rem 1.2rem; }
.facts__list dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var( --paper-3 ); }
.facts__list dd { margin: 0.3rem 0 0; font-family: var( --display ); font-size: 1.6rem; }

/* -------------------------------------------------------------- notation */

.notation {
	max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto; padding-inline: var( --gut );
	display: grid; gap: clamp( 1.6rem, 4vw, 3.2rem ); grid-template-columns: minmax( 0, 1fr );
}
@media ( min-width: 64rem ) { .notation { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.notation__figure { display: flex; justify-content: center; }
.notation__line { margin: 0.8rem 0 1.4rem; color: var( --paper-2 ); font-size: 0.94rem; }
.notation__steps { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.notation__steps li {
	counter-increment: n;
	display: grid; grid-template-columns: 2rem minmax( 0, 1fr ) auto auto;
	gap: 0.8rem; align-items: baseline;
	padding: 0.55rem 0; border-top: 1px solid var( --rule );
}
.notation__steps li::before { content: counter( n ); color: var( --paper-3 ); font-size: 0.78rem; }
.notation__dir { font-family: var( --mid ); font-weight: 500; font-size: 0.95rem; }
.notation__plane { font-size: 0.74rem; color: var( --paper-3 ); }
.notation__step { font-size: 0.82rem; color: var( --paper-2 ); font-variant-numeric: tabular-nums; }
.notation__caveat { margin: 1.2rem 0 0; font-size: 0.82rem; color: var( --paper-3 ); max-width: 54ch; }

.effortwrap { max-width: var( --wide ); margin: clamp( 4rem, 12vh, 9rem ) auto; padding-inline: var( --gut ); }
.effortwrap__head { margin-bottom: clamp( 1.4rem, 3.5vh, 2.4rem ); }
@media ( min-width: 62rem ) { .effortwrap .effort { grid-template-columns: 0.85fr 1.15fr; } }

/* ------------------------------------------------------- listings, prose */

.listing-top { max-width: var( --wide ); margin: 0 auto; padding: clamp( 3rem, 9vh, 6rem ) var( --gut ) clamp( 1.6rem, 4vh, 2.6rem ); }
.listing-top__head {
	margin: 0; font-family: var( --display ); font-weight: 300;
	font-size: clamp( 2.2rem, 5.5vw, 4rem ); line-height: 1.02; letter-spacing: -0.02em;
}
.listing-top__said { margin: 1rem 0 0; max-width: 56ch; color: var( --paper-2 ); }
.listing-top__find { margin-top: 1.6rem; }

.prose, .say__in {
	max-width: var( --read ); margin-inline: auto; padding-inline: var( --gut );
}
.say { margin-block: clamp( 4rem, 12vh, 9rem ); }
.prose { margin-block: clamp( 2.5rem, 7vh, 5rem ); }
.prose > *:first-child, .say__in > *:first-child { margin-top: 0; }
.prose h2, .say h2 {
	font-family: var( --display ); font-weight: 400;
	font-size: clamp( 1.4rem, 2.6vw, 2rem ); margin: 2em 0 0.5em; letter-spacing: -0.012em;
}
.prose p, .say p { color: var( --paper-2 ); }
.prose li { margin: 0.35em 0; color: var( --paper-2 ); }

.notes { max-width: var( --wide ); margin: 0 auto clamp( 3rem, 8vh, 5rem ); padding-inline: var( --gut ); }
.note { padding: 1.4rem 0; border-top: 1px solid var( --rule ); max-width: var( --read ); }
.note__title { margin: 0; font-family: var( --display ); font-weight: 400; font-size: 1.4rem; }
.note__title a { color: inherit; text-decoration: none; }
.note__title a:hover { text-decoration: underline; }
.note__when { margin: 0.3rem 0 0; font-size: 0.82rem; color: var( --paper-3 ); }
.note__said p { margin: 0.5rem 0 0; color: var( --paper-2 ); }
.empty { max-width: var( --wide ); margin: 0 auto clamp( 4rem, 10vh, 7rem ); padding-inline: var( --gut ); }

.find { display: flex; max-width: 26rem; }
.find__in {
	font: inherit; font-size: 0.94rem; padding: 0.7rem 0.9rem; flex: 1 1 auto;
	background: var( --ink-2 ); color: var( --paper ); border: 1px solid var( --rule );
}
.find__go {
	font: inherit; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 0.7rem 1.3rem; background: var( --paper ); color: var( --ink );
	border: 1px solid var( --paper ); cursor: pointer;
}

.pager { max-width: var( --wide ); margin: 0 auto clamp( 4rem, 10vh, 7rem ); padding-inline: var( --gut ); display: flex; gap: 6px; flex-wrap: wrap; }
.pager .page-numbers { padding: 6px 12px; border: 1px solid var( --rule ); text-decoration: none; color: var( --paper ); font-size: 0.86rem; }
.pager .page-numbers.current, .pager a.page-numbers:hover { background: var( --paper ); color: var( --ink ); border-color: var( --paper ); }

/* ------------------------------------------------------------------ tail */

.tail {
	position: relative; overflow: hidden;
	max-width: var( --wide ); margin: clamp( 5rem, 14vh, 10rem ) auto clamp( 3rem, 8vh, 6rem ); padding-inline: var( --gut );
}
/* A slow closing glow rather than another shader — the last section is a
   single sentence and a button, and an ambient light building behind it
   reads as a curtain about to rise rather than one more effect switched on. */
.tail::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: min( 60rem, 140% ); aspect-ratio: 1; left: 50%; top: 50%;
	transform: translate( -50%, -50% );
	background: radial-gradient( circle, rgba( 220, 199, 158, 0.16 ), transparent 62% );
	animation: tail-breathe 9s ease-in-out infinite;
}
@keyframes tail-breathe {
	0%, 100% { opacity: 0.55; transform: translate( -50%, -50% ) scale( 0.92 ); }
	50% { opacity: 1; transform: translate( -50%, -50% ) scale( 1.04 ); }
}
.tail__head { max-width: 16ch; }
.tail__said { margin: 1rem 0 1.8rem; max-width: 52ch; color: var( --paper-2 ); }

/* ------------------------------------------------------------------ foot */

.foot { border-top: 1px solid var( --rule ); margin-top: clamp( 3rem, 9vh, 6rem ); }
.foot__in {
	max-width: var( --wide ); margin: 0 auto; padding: clamp( 2rem, 6vh, 4rem ) var( --gut ) clamp( 3rem, 8vh, 5rem );
	display: grid; gap: clamp( 1.4rem, 4vw, 3rem ); grid-template-columns: minmax( 0, 1fr );
	align-items: center;
}
@media ( min-width: 52rem ) { .foot__in { grid-template-columns: auto 1fr; } }
.foot__name { margin: 0; font-family: var( --display ); font-size: 1.4rem; }
.foot__where { margin: 0.2rem 0 0; font-size: 0.86rem; color: var( --paper-2 ); }
.foot__nav { margin-top: 1rem; }
.nav--foot { font-size: 0.86rem; gap: 4px 22px; }
.foot__api { margin: 1.2rem 0 0; font-size: 0.78rem; color: var( --paper-3 ); max-width: 60ch; }
.foot__api code { font-family: ui-monospace, Consolas, monospace; color: var( --warm ); }

/* ---------------------------------------------------------------- reveal */

[ data-reveal ] { transition: opacity 620ms var( --ease ), transform 620ms var( --ease ); }
[ data-reveal ].is-hidden { opacity: 0; transform: translateY( 18px ); }

@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	[ data-reveal ].is-hidden { opacity: 1; transform: none; }
	.opening__photo img { filter: grayscale( 0.35 ) contrast( 1.06 ) brightness( 0.62 ); }
}

/* The reason the WebGPU path was not taken, when there is one. Quiet, but
   present: on a machine without a GPU every failure otherwise looks the same. */
.foot__why { display: block; margin-top: 0.3rem; color: var( --paper-3 ); }