/* =====================================================================
   KINETIC — home + work/archive screens
   ===================================================================== */

/* ---------- Hero: the reel, headline bottom-left, note bottom-right ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(to top, rgba(9,9,12,0.96) 0%, rgba(9,9,12,0.55) 28%, rgba(9,9,12,0) 60%),
		linear-gradient(to bottom, rgba(9,9,12,0.5), transparent 22%);
}
.hero__inner {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 0 var(--gut) clamp(26px, 4vh, 48px);
	display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
}
.hero__title {
	font-size: var(--fs-display); font-weight: 340; line-height: 0.92; letter-spacing: -0.03em;
	max-width: 12ch; color: #fff;
}
.hero__title em, .hero__title .rw__i--em { font-style: italic; font-weight: 300; }
.hero__side { display: grid; gap: 10px; justify-items: end; text-align: right; }
.hero__side .mono { color: rgba(255,255,255,0.7); }
.hero__reel {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid rgba(255,255,255,0.28); border-radius: 100px; padding: 10px 16px;
	font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
	backdrop-filter: blur(8px);
	transition: border-color 0.3s, background 0.3s;
}
.hero__reel:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.hero__reel b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@media (max-width: 720px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__side { justify-items: start; text-align: left; }
}

/* ---------- Content width ----------
   Media never runs edge-to-edge on a wide monitor: every section below the
   hero sits in a centred column (--container), with the gutter outside it. */
.index, .lab, .svc, .about, .state__inner { max-width: calc(var(--container) + 2 * var(--gut)); margin-inline: auto; }

/* ---------- Section heads shared by index + lab ---------- */
.index { padding-top: clamp(48px, 7vw, 96px); }
.lab { padding-top: clamp(56px, 8vw, 120px); }
.index__head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	margin: 0 var(--gut); padding-bottom: 22px; border-bottom: 1px solid var(--border);
}
.index__title { font-size: var(--fs-h2); letter-spacing: -0.02em; }
.index__all { white-space: nowrap; }

/* ---------- Index: masonry of mixed frames ----------
   masonry.js positions .index__item absolutely (shortest column first). Until
   it runs, a plain 3-column grid keeps the page readable. */
.index__grid { --gap: clamp(18px, 2.4vw, 32px); margin: clamp(22px, 3vw, 40px) var(--gut) 0; }
.masonry-fallback, .index__grid:not(.is-masonry) { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
.is-masonry { position: relative; display: block; }
.is-masonry > * { position: absolute; top: 0; left: 0; }
.index__grid .piece__t { font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem); }
@media (max-width: 900px) { .index__grid:not(.is-masonry) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .index__grid:not(.is-masonry) { grid-template-columns: 1fr; } }

/* ---------- Lab strip: one height, each loop at its own width, scrolls sideways ---------- */
.lab__grid {
	--lab-h: clamp(220px, 24vw, 340px);
	display: flex; gap: clamp(12px, 2vw, 28px);
	padding: clamp(22px, 3vw, 40px) var(--gut) 8px;
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.lab__grid > * { flex: 0 0 auto; scroll-snap-align: start; }
/* The tile is exactly as wide as its frame at the strip height; captions wrap inside it. */
.lab__grid .piece--wide   { width: calc(var(--lab-h) * 16 / 9); }
.lab__grid .piece--square { width: var(--lab-h); }
.lab__grid .piece--tall   { width: calc(var(--lab-h) * 9 / 16); }
.lab__grid .piece__media { height: var(--lab-h); width: 100%; }
.lab__grid .piece__cap { grid-template-columns: 1fr; gap: 4px; min-width: 0; }
.lab__grid .piece__m { white-space: normal; text-align: left; }
.lab__grid .piece__t { font-size: 1rem; }
@media (max-width: 720px) {
	.lab__grid { --lab-h: 300px; }
	.lab__grid .piece__cap { grid-template-columns: 1fr; }
}

/* ---------- Statement (paper) ---------- */
.state { margin-top: clamp(72px, 10vw, 140px); background: var(--paper); color: var(--paper-ink); padding: clamp(80px, 12vw, 170px) 0; }
.state__inner { padding: 0 var(--gut); }
.state__eyebrow { color: var(--paper-mute); display: block; margin-bottom: 28px; }
.state__text {
	font-weight: 380; letter-spacing: -0.028em; line-height: 1.02;
	font-size: clamp(2rem, 5.6vw, 5.4rem); max-width: 20ch; text-wrap: balance;
}
.state__text span { opacity: 0.18; transition: opacity 0.25s linear; }
.state__text span.on { opacity: 1; }
.no-js .state__text span { opacity: 1; }

/* ---------- Services ---------- */
.svc { padding: clamp(72px, 10vw, 140px) var(--gut) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
.svc__l .mono { display: block; margin-bottom: 14px; }
.svc__intro { color: var(--text-muted); max-width: 34ch; }
.svc__list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--border); transition: padding-left 0.4s var(--ease); }
.svc__list li:last-child { border-bottom: 1px solid var(--border); }
.svc__list li:hover { padding-left: 12px; }
.svc__list h3 { font-variation-settings: "opsz" 96; font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: -0.02em; }
.svc__list small { text-align: right; max-width: 28ch; }
@media (max-width: 720px) {
	.svc { grid-template-columns: 1fr; }
	.svc__list li { grid-template-columns: 1fr; gap: 6px; }
	.svc__list small { text-align: left; }
}

/* ---------- About teaser ---------- */
.about { padding: clamp(72px, 10vw, 140px) var(--gut) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
.about__lead { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 46ch; letter-spacing: -0.01em; }
.tools { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; color: var(--text-faint); }
.about__more { display: inline-block; margin-top: 34px; }
.about__photo { width: min(100%, 220px); margin-top: 22px; }
@media (max-width: 720px) { .about { grid-template-columns: 1fr; } }

/* ---------- Work archive ---------- */
.work .container, .more-work .container, .page-hero { max-width: calc(var(--container) + 2 * var(--gut)); margin-inline: auto; }