/* ==========================================================================
Kloset Worx — Website CSS
Italian-modernist atelier. The system from the brand manual, applied.
========================================================================== */
/* Tylko-style bold-sans type system. Geist 700/800 for display
moments (not italic, not serif — bold confident sans is the
register of tylko, Aesop's product pages, & similar quiet-
luxury product brands). Geist Mono for caps and labels.
Cormorant Garamond removed 2026-05-28: it was a wrong-register
import (World of Interiors editorial), not tylko.
Fonts moved out of @import 2026-06-09 → a parallel in each page
(preceded by preconnect) so the font fetch no longer waits for
site.css to download+parse. Keep both lists in sync if weights change. */
:root {
/* Cream-on-cream palette refinement: bone-2 is the surface, bone is
the paper, ink is the darkest, terra remains the single accent.
Slightly warmer cream than the prior near-white. */
--kw-bone: #faf7f1; /* warm paper (was pure white) */
--kw-bone-2: #f1ece1; /* deeper cream surface */
--kw-paper: #ffffff; /* still pure white where used */
--kw-ink: #1d232c;
--kw-ink-2: #2d3540;
--kw-terra: #7a2f3a;
--kw-terra-deep: #5e222c;
--kw-rule: rgba(29, 35, 44, 0.14);
--kw-rule-strong: rgba(29, 35, 44, 0.32);
--kw-rule-on-ink: rgba(29, 35, 44, 0.14);
--kw-sans: "Geist", "Helvetica Neue", system-ui, sans-serif;
--kw-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
/* --kw-serif removed 2026-05-28: pivoted to tylko-style bold sans
for all display moments. Geist 700/800 carries the headlines. */
--kw-max: 1440px;
--kw-pad: 84px;
--kw-pad-sm: 40px;
}
/* Page surface — warm cream so the editorial register reads
immediately, not "tech-startup white". */
html, body { background: var(--kw-bone); }
/* CG-render mask: removed 2026-05-27.
Replaced 1672137233327 and 1611048268330 site-wide with verified
real photography (Thom Bradley FUJIFILM X-T2, Gabriel Rosenblut
Sony A7 II). The mask block is no longer needed. */
/* Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Give every hash target a little breathing room so #06, #07, #subscribe,
#inquire, etc. don't land jammed against the top of the viewport. */
[id] { scroll-margin-top: 28px; }
body {
font-family: var(--kw-sans);
font-size: 15px;
/* 1.65 — magazine reading rhythm. The earlier 1.5 felt cramped at
long-form scale; 1.65 opens the columns without inflating them. */
line-height: 1.65;
color: var(--kw-ink);
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "ss02", "cv11", "kern", "liga";
text-rendering: optimizeLegibility;
}
/* Headings inherit slightly tighter rhythm; body keeps the openness. */
h1, h2, h3, h4, h5, h6 { line-height: 1.08; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* Type ----------------------------------------------------------------- */
/* Tracking philosophy:
· oversize display -0.038em → -0.030em (optical tightening)
· h2-scale headlines -0.030em (near-display)
· h3 -0.022em
· h4 / dek -0.014em → -0.008em
· body -0.003em (almost zero)
· mono caps +0.18em → +0.34em (positive, by scale)
Where two values are listed the larger negative goes to the larger
size — Geist needs more negative space at scale, less at body. */
.k-cap { font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }
.k-micro { font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1; }
.k-mono { font-family: var(--kw-mono); }
.k-body { font-size: 15px; line-height: 1.65; letter-spacing: -0.003em; }
.k-lede { font-size: 22px; line-height: 1.42; font-weight: 400; letter-spacing: -0.014em; }
.k-h2 { font-size: 56px; line-height: 1.02; font-weight: 500; letter-spacing: -0.032em; }
.k-h3 { font-size: 36px; line-height: 1.06; font-weight: 500; letter-spacing: -0.024em; }
.k-h4 { font-size: 22px; line-height: 1.18; font-weight: 500; letter-spacing: -0.014em; }
.k-hero {
font-size: clamp(72px, 10vw, 156px);
line-height: 0.88;
font-weight: 500;
letter-spacing: -0.042em;
}
.k-dot, .k-x { color: var(--kw-terra); }
/* SVG monogram — the stacked KX. K is currentColor (inherits ink);
the bottom X is terra so the brand reads K-over-X with a strong
accent on the X half. Matches the dot + the lowercase 'x' in the
Worx wordmark for a single, repeated brand gesture. The SVG path
carries stroke="currentColor" as a no-CSS fallback so the X never
renders pure black; the class below overrides it to terra. */
.k-mark__x { stroke: var(--kw-terra) !important; }
/* ----- Magazine-cover display class -------------------------------------
For the rare title that should read at cover scale — care, materials,
studio. clamp(56, 9vw, 168). Tight tracking, generous line-height so
the descenders never crowd a following dek line. */
.k-display {
font-family: var(--kw-sans);
font-size: clamp(56px, 9vw, 168px) !important;
line-height: 0.92 !important;
font-weight: 500;
letter-spacing: -0.044em !important;
text-wrap: balance;
margin-bottom: 48px !important;
}
@media (max-width: 700px) {
.k-display { font-size: clamp(48px, 13vw, 96px) !important; line-height: 0.95 !important; letter-spacing: -0.038em !important; }
}
/* ----- Drop-cap for essay openings ---------------------------------------
Lives on the article's first paragraph. The initial letter floats
left, scaled to roughly 4x the line-height, terra coloured, sitting
on the baseline of the first body line. */
.k-drop::first-letter {
font-family: var(--kw-sans);
float: left;
/* 4x line-height of the article ≈ 4 × (19 × 1.62) ≈ 123px desktop.
Use em so it scales with whatever font-size the paragraph carries. */
font-size: 6.2em;
line-height: 0.86;
font-weight: 500;
color: var(--kw-terra);
margin: 4px 14px 0 -4px;
letter-spacing: -0.04em;
/* Optical baseline lift — Geist's caps sit slightly above the
baseline at this scale; nudging them down by a small em looks
calmer than letting them drift up. */
padding-top: 0.02em;
}
@media (max-width: 700px) {
.k-drop::first-letter { font-size: 4.6em; margin-right: 10px; }
}
/* ----- Marginalia ---------------------------------------------------------
Small italic note that lives in the right gutter of a 680px body
column on desktop. Inline (italic, indented) below the host
paragraph on mobile. */
.k-marg {
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--kw-ink);
opacity: 0.66;
}
@media (min-width: 1100px) {
.k-marg {
float: right;
width: 200px;
margin: 4px -240px 8px 24px;
clear: right;
}
}
@media (max-width: 1099px) {
.k-marg {
display: block;
padding: 14px 18px;
margin: 18px 0;
border-left: 1px solid var(--kw-rule-strong);
}
}
/* ----- Pull-quote ---------------------------------------------------------
Centred, oversize, with a terra dot before and a small mono caps
attribution after. Distinct from .k-pull (which is left-aligned for
the homepage and Signed section). */
.k-pullquote {
text-align: center;
max-width: 880px;
margin: 72px auto;
position: relative;
font-family: var(--kw-sans);
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.22;
letter-spacing: -0.022em;
font-weight: 400;
color: var(--kw-ink);
}
.k-pullquote::before {
content: "";
display: block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--kw-terra);
margin: 0 auto 28px;
}
.k-pullquote__attrib {
display: block;
font-family: var(--kw-mono);
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
opacity: 0.6;
margin-top: 22px;
}
@media (max-width: 700px) {
.k-pullquote { margin: 56px auto; }
}
/* Container ------------------------------------------------------------ */
.k-wrap {
max-width: var(--kw-max);
margin: 0 auto;
padding: 0 var(--kw-pad);
}
@media (max-width: 900px) {
.k-wrap { padding: 0 var(--kw-pad-sm); }
}
/* Section --------------------------------------------------------------- */
/* Section rhythm — opened from 104/64/160 to 128/88/184 to suit the new
magazine register. Mobile (≤900) holds 88/56/128 so the cadence
survives at phone scale without orphaning short sections. */
/* Heyoasis-feel rhythm: more breathing room between sections.
Bumped from 128/88/184 to 152/104/184 — magazine-grade pacing.
--loose stays at 184 (not 216) — anything more turns short closing
CTAs into 55%-empty caverns. */
.k-section { padding: 152px 0; }
.k-section--tight { padding: 104px 0; }
.k-section--loose { padding: 184px 0; }
@media (max-width: 900px) {
.k-section { padding: 104px 0; }
.k-section--tight { padding: 64px 0; }
.k-section--loose { padding: 120px 0; }
}
@media (max-width: 600px) {
/* Phone-scale: tighten so a 26-section page doesn't feel like
six full screens of pure padding. */
.k-section { padding: 80px 0; }
.k-section--tight { padding: 56px 0; }
.k-section--loose { padding: 104px 0; }
}
/* Magazine-cover sustain — when a section follows the cinematic hero
directly, add 12% more vertical breathing above the first content
so the cover register persists past the fold. Applied via the
pagemark wrap on home + offerings; matched on .k-hero-cinema + the
next section directly. */
.k-hero-cinema + .k-wrap > .k-pagemark { padding: 32px 0 24px; }
.k-hero-cinema + .k-section,
.k-hero-cinema + .k-wrap + .k-section {
padding-top: 144px;
}
@media (max-width: 900px) {
.k-hero-cinema + .k-section,
.k-hero-cinema + .k-wrap + .k-section {
padding-top: 100px;
}
}
/* On a white site, the former dark sections become neutral grounds bracketed by hairlines
so the rhythm of the page survives. */
.k-section--ink { background: #ffffff; color: var(--kw-ink); border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }
.k-section--terra { background: #ffffff; color: var(--kw-ink); border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }
.k-section--paper { background: #ffffff; border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }
/* Avoid double hairlines when two bordered sections sit adjacent. */
.k-section--ink + .k-section--ink,
.k-section--ink + .k-section--paper,
.k-section--paper + .k-section--ink,
.k-section--paper + .k-section--paper {
border-top: 0;
/* Adjacent sections share continuity — halve the top padding so the
joined block doesn't read as one giant cavern between content. */
padding-top: 104px;
}
@media (max-width: 900px) {
.k-section--ink + .k-section--ink,
.k-section--ink + .k-section--paper,
.k-section--paper + .k-section--ink,
.k-section--paper + .k-section--paper { padding-top: 72px; }
}
/* A pullq immediately preceding a .k-section is another adjacency
that should compress — the pullq is its own breath; the next section
doesn't need a full magazine break above its first content. */
.k-pullq + .k-section { padding-top: 104px; }
@media (max-width: 900px) { .k-pullq + .k-section { padding-top: 72px; } }
/* Section eyebrow ------------------------------------------------------- */
.k-eyebrow {
display: flex;
align-items: baseline;
gap: 20px;
padding-bottom: 28px;
margin-bottom: 56px;
border-bottom: 1px solid var(--kw-rule);
}
.k-eyebrow__num { color: var(--kw-ink); opacity: 0.4; }
.k-eyebrow__title { flex: 1; opacity: 0.65; }
/* Hairlines ------------------------------------------------------------- */
/* True hairline — 0.5px on devicePixelRatio ≥ 2 (Retina, mobile), 1px
fallback elsewhere. Subpixel rules are the small difference between
a printed magazine and a print-out of one. */
.k-rule { height: 1px; background: var(--kw-rule); border: 0; display: block; }
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
.k-rule { height: 0.5px; }
.k-eyebrow,
.k-section--ink,
.k-section--terra,
.k-section--paper,
.k-nav,
.k-pagemark { border-width: 0.5px; }
.k-spec-list,
.k-spec-list__row { border-width: 0.5px; }
}
/* ==========================================================================
NAVIGATION (injected by chrome.js into #k-nav)
========================================================================== */
.k-nav {
position: relative;
z-index: 50;
border-bottom: 1px solid var(--kw-rule);
background: #ffffff;
}
.k-nav__inner {
max-width: var(--kw-max);
margin: 0 auto;
padding: 22px var(--kw-pad);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 48px;
}
.k-nav__brand { display: flex; align-items: center; gap: 14px; }
.k-nav__wordmark {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.035em;
color: var(--kw-ink);
white-space: nowrap;
}
/* Trademark mark on the wordmark — small, raised, quiet. */
.k-tm {
font-size: 0.42em;
font-weight: 400;
letter-spacing: 0;
vertical-align: super;
line-height: 0;
opacity: 0.7;
margin-left: 0.06em;
}
.k-nav__items {
display: flex;
gap: 36px;
justify-content: center;
}
.k-nav__item {
font-family: var(--kw-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kw-ink);
opacity: 0.72;
position: relative;
padding: 4px 0;
transition: opacity 0.18s;
}
.k-nav__item:hover { opacity: 1; }
.k-nav__item.is-active { opacity: 1; }
.k-nav__item.is-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -8px;
height: 1px;
background: var(--kw-terra);
}
.k-nav__cta {
font-family: var(--kw-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 12px 20px;
border: 1px solid var(--kw-ink);
transition: background 0.18s, color 0.18s;
}
.k-nav__cta:hover { background: var(--kw-ink); color: var(--kw-bone); }
/* Skip link — first focusable element, off-screen until focused */
.k-skip {
position: fixed;
top: 10px;
left: 10px;
z-index: 200;
transform: translateY(-160%);
background: var(--kw-ink);
color: var(--kw-bone);
font-family: var(--kw-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 12px 18px;
transition: transform 0.18s;
}
.k-skip:focus { transform: translateY(0); outline: 2px solid var(--kw-terra); }
/* Mobile toggle hidden on desktop; panel flows inline via display:contents */
.k-nav__toggle { display: none; }
.k-nav__panel { display: contents; }
@media (max-width: 1100px) {
.k-nav__items { gap: 22px; }
.k-nav__item { font-size: 10px; letter-spacing: 0.14em; }
}
@media (max-width: 900px) {
.k-nav__inner { grid-template-columns: 1fr auto; }
.k-nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -10px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--kw-ink);
z-index: 60;
}
.k-nav__bars, .k-nav__bars::before, .k-nav__bars::after {
content: "";
display: block;
width: 22px;
height: 1.5px;
background: currentColor;
transition: transform 0.22s ease, background 0.1s ease;
}
.k-nav__bars { position: relative; }
.k-nav__bars::before { position: absolute; top: -6px; left: 0; }
.k-nav__bars::after { position: absolute; top: 6px; left: 0; }
.k-nav.is-open .k-nav__bars { background: transparent; }
.k-nav.is-open .k-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.k-nav.is-open .k-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }
.k-nav__panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
position: fixed;
inset: 0;
padding: 104px var(--kw-pad-sm) 48px;
background: var(--kw-bone);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
overflow-y: auto;
transition: transform 0.34s cubic-bezier(.16,1,.3,1), opacity 0.3s ease, visibility 0s linear 0.34s;
}
.k-nav.is-open .k-nav__panel {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition: transform 0.38s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
}
.k-nav__items { display: flex; flex-direction: column; gap: 0; justify-content: flex-start; }
.k-nav__item {
font-size: 16px !important;
letter-spacing: 0.14em !important;
padding: 17px 0;
border-bottom: 1px solid var(--kw-rule);
opacity: 0.85;
}
.k-nav__item.is-active::after { display: none; }
.k-nav__item.is-active { color: var(--kw-terra); opacity: 1; }
.k-nav__cta { margin-top: 30px; align-self: flex-start; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.k-nav__panel, .k-nav__bars,
.k-nav__bars::before, .k-nav__bars::after { transition: none; }
}
/* ==========================================================================
FOOTER (injected by chrome.js into #k-footer)
========================================================================== */
.k-foot {
background: var(--kw-ink);
color: var(--kw-bone);
margin-top: 0;
}
.k-foot__inner {
max-width: var(--kw-max);
margin: 0 auto;
padding: 128px var(--kw-pad) 56px;
}
/* Masthead: brand + newsletter --------------------------------------- */
.k-foot__masthead {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 96px;
padding-bottom: 88px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.k-foot__mark { color: var(--kw-bone); margin-bottom: 32px; opacity: 0.92; }
.k-foot__head {
font-size: 52px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 0.96;
color: var(--kw-bone);
}
.k-foot__blurb {
margin-top: 28px;
max-width: 460px;
font-size: 15px;
line-height: 1.7;
opacity: 0.62;
}
.k-foot__news { align-self: start; padding-top: 4px; }
.k-foot__news-note {
margin: 16px 0 24px;
font-size: 14px;
line-height: 1.65;
opacity: 0.6;
max-width: 420px;
}
.k-foot__news-row {
display: flex;
align-items: center;
gap: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
max-width: 440px;
}
.k-foot__news-row input {
flex: 1;
background: transparent;
border: 0;
padding: 12px 0;
font-size: 16px;
color: var(--kw-bone);
outline: none;
}
.k-foot__news-row input::placeholder { color: rgba(255, 255, 255, 0.4); }
.k-foot__news-btn {
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--kw-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kw-bone);
padding: 12px 0 12px 24px;
white-space: nowrap;
transition: opacity 0.18s;
}
.k-foot__news-btn:hover { opacity: 0.6; }
.k-foot__news-btn:disabled { opacity: 0.5; cursor: default; }
/* Link columns ------------------------------------------------------- */
.k-foot__cols {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 40px 36px;
padding: 80px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.k-foot__col-title {
font-family: var(--kw-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--kw-bone);
opacity: 0.62;
margin-bottom: 22px;
}
.k-foot__list { display: flex; flex-direction: column; gap: 12px; }
.k-foot__list a {
opacity: 0.7;
font-size: 14px;
line-height: 1.3;
transition: opacity 0.18s;
}
.k-foot__list a:hover { opacity: 1; }
.k-foot__more {
margin-top: 8px;
font-family: var(--kw-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.55 !important;
}
/* Bottom: legal / social / region ------------------------------------ */
.k-foot__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px 40px;
padding-top: 40px;
font-family: var(--kw-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.k-foot__legal, .k-foot__social {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.k-foot__legal span { opacity: 0.5; }
.k-foot__legal a, .k-foot__social a { opacity: 0.6; transition: opacity 0.18s; }
.k-foot__legal a:hover, .k-foot__social a:hover { opacity: 1; }
.k-foot__region { opacity: 0.6; }
/* Designer credit — full-width final line under the legal/social row,
separated by a hairline. LEADLEADS links to the agency site. */
.k-foot__credit {
flex-basis: 100%;
text-align: center;
padding-top: 26px;
margin-top: 10px;
border-top: 1px solid var(--kw-rule);
opacity: 0.5;
}
.k-foot__credit a {
color: inherit;
opacity: 1;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: color 0.18s, opacity 0.18s;
}
.k-foot__credit a:hover { color: var(--kw-terra); }
@media (max-width: 1100px) {
.k-foot__cols { grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
/* Avoid the blank-right-half between masthead brand and newsletter
between 901 and 1100 by stacking the masthead a step earlier. */
.k-foot__masthead { grid-template-columns: 1fr; gap: 56px; }
.k-foot__news { max-width: 560px; }
}
@media (max-width: 900px) {
.k-foot__inner { padding: 88px var(--kw-pad-sm) 96px; }
.k-foot__masthead { grid-template-columns: 1fr; gap: 48px; padding-bottom: 56px; }
.k-foot__head { font-size: 38px; }
.k-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; padding: 56px 0; }
.k-foot__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
/* Section rhythm on small screens is set in the earlier .k-section
media query (104/64/144). Don't redeclare here — source-order
wins, and the smaller values were undoing the heyoasis bump. */
.k-eyebrow { margin-bottom: 40px; }
}
@media (max-width: 600px) {
/* Pagemark can crowd at narrow widths; wrap and shrink. */
.k-pagemark { flex-wrap: wrap; gap: 6px 16px; font-size: 9px; }
}
@media (max-width: 540px) {
.k-foot__cols { grid-template-columns: 1fr; gap: 36px; }
}
/* Featured-split utility: two-column at desktop, stacked on mobile.
Replaces inline grid-template-columns: 1fr 1fr; gap: 96px on pages
that would otherwise crush both columns on small screens. */
.k-feat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
@media (max-width: 860px) { .k-feat-split { grid-template-columns: 1fr; gap: 40px; } }
/* Editorial detail rows — used on design.html "Details & accessories" to
give each of the seven details a generous, paced rhythm between rows,
with a hairline rule separating one from the next. */
.k-detail { padding: 88px 0; border-top: 1px solid var(--kw-rule); }
.k-detail:first-of-type { border-top: 0; padding-top: 56px; }
@media (max-width: 860px) { .k-detail { padding: 56px 0; } }
/* ==========================================================================
HERO — Cinematic (video background variant)
========================================================================== */
.k-hero-cinema {
position: relative;
overflow: hidden;
background: #0e1116;
/* Use svh (small viewport height), NOT dvh. dvh is *dynamic* — it
grows/shrinks as the mobile address bar hides/shows on scroll, so
a full-height video hero re-fits every frame and visibly "shakes."
svh is the stable smaller height (toolbar-visible), so the hero is
a constant size and never reflows mid-scroll. vh fallback first. */
min-height: 92vh;
min-height: 92svh;
color: var(--kw-paper);
}
.k-hero-cinema__media {
position: absolute;
inset: 0;
z-index: 0;
}
.k-hero-cinema__media video,
.k-hero-cinema__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The film sits above the still fallback so its smooth, baked-in
motion is what shows; the still act behind it is frozen. */
.k-hero-cinema__video { z-index: 1; }
/* PROCESS DRAWING — an honest construction elevation that draws
itself (Act I — Drawn), fills to material (Act II — Milled), then
settles into a room with the maker's mark (Act III — Installed).
One 21s loop, synced to the phase labels below. The