/* ==========================================================================
vonhaus — the art of living
Theme v0.1 (client preview)
Built on the A24 front-page system: warm neutral ramp, 12-col grid,
linear spacing scale, variable-weight grotesk, mono eyebrows, hairlines,
square corners, outlined buttons with a trailing arrow.
========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
/* Colour: A24 warm-neutral ramp, re-tuned to the vonhaus cream */
--ink: #0e0e0d;
--ink-950: #31302e;
--ink-900: #595753;
--ink-800: #6f6d6a;
--ink-700: #8f8b85;
--ink-500: #aba7a0;
--ink-300: #c7c3bd;
--line: #d6d4d1;
--paper-100: #e8e6e2;
--paper-50: #efece6;
--paper: #f5f2ed; /* sampled from the supplied logo background */
--paper-25: #faf8f4;
--white: #ffffff;
/* Brand accent: olive from the leaf in the monogram. One accent only. */
--olive: #6f6a45;
--olive-deep: #4f4b2f;
--olive-soft: #a09b74;
--error: #c2452b;
--success: #3d7a2c;
/* Surfaces (default: paper) */
--bg: var(--paper);
--fg: var(--ink);
--fg-2: var(--ink-800);
--rule: var(--line);
/* Type */
--font-sans: "Inter Tight", "PP Neue Montreal", "Helvetica Neue", Arial, system-ui, sans-serif;
--font-mono: "DM Mono", "PP Neue Montreal Mono", ui-monospace, "SF Mono", Menlo, monospace;
--w-regular: 400;
--w-medium: 500;
--w-semi: 560;
--lh-min: .82;
--lh-tight: .95;
--lh-default: 1.1;
--lh-body: 1.4;
/* Fluid type scale */
--t-display: clamp(4.2rem, 11.5vw, 13.5rem); /* film / hero titles */
--t-world: clamp(3.4rem, 9vw, 10.5rem); /* People. Places. Possibility. */
--t-h1: clamp(3rem, 7vw, 7.5rem);
--t-h2: clamp(2.1rem, 4.2vw, 3.8rem);
--t-h3: clamp(1.5rem, 2.4vw, 2.1rem);
--t-lead: clamp(1.25rem, 1.9vw, 1.7rem);
--t-body: 1.125rem;
--t-small: .9375rem;
--t-ui: .75rem;
--t-eyebrow: .6875rem;
/* Spacing: linear scale, --s-N = N × .2rem (as A24) */
--s-1: .2rem; --s-2: .4rem; --s-3: .6rem; --s-4: .8rem; --s-5: 1rem;
--s-6: 1.2rem; --s-8: 1.6rem; --s-10: 2rem; --s-12: 2.4rem; --s-16: 3.2rem;
--s-20: 4rem; --s-24: 4.8rem; --s-32: 6.4rem; --s-42: 8.4rem; --s-54: 10.8rem; --s-64: 12.8rem;
--tier-s: var(--s-32);
--tier-m: var(--s-42);
--tier-l: var(--s-54);
--tier-xl: var(--s-64);
/* Grid */
--gutter: var(--s-12);
--max-w: 180rem;
--nav-h: 4.4rem;
--vw: 100vw; /* set by JS to the scrollbar-less width */
--frame: 8px; /* A24 panel frame — pure white, as on a24films.com */
--frame-color: #fff;
/* Lines & radii */
--hair: 1px;
--radius: 0;
/* Motion (GSAP curves as tokens) */
--d-fast: .15s; --d-med: .25s; --d-slow: .4s; --d-reveal: .9s;
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
--ease-out-power2: cubic-bezier(.215, .61, .355, 1);
--ease-out-power3: cubic-bezier(.165, .84, .44, 1);
--ease-in-out-power2: cubic-bezier(.645, .045, .355, 1);
--ease-out-slow: cubic-bezier(.04, 1.15, .4, .99);
}
/* Dark surface variant: sections, footer, overlays, film. */
.is-dark,
[data-surface="dark"] {
--bg: var(--ink);
--fg: var(--paper);
--fg-2: var(--ink-500);
--rule: #2f2e2b;
background: var(--bg);
color: var(--fg);
}
/* ---------- 2. Reset / base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--t-body);
line-height: var(--lh-body);
letter-spacing: .002em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
}
img, video { display: block; max-width: 100%; height: auto; }
/* Photos get a placeholder tone while loading; logos and icons stay transparent */
.media img, .hero__media img, .worlds__media img, .film__still img { background: var(--paper-100); color: transparent; }
.is-dark .media img, [data-surface="dark"] .media img { background: var(--ink-950); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
hr { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
::selection { background: var(--olive); color: var(--paper); }
/* Page transitions (Chromium): quiet cross-fade between pages */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
/* ---------- 3. Type ------------------------------------------------------ */
.t-display, .t-world, .t-h1, .t-h2, .t-h3 {
font-weight: var(--w-medium);
text-wrap: balance;
}
.t-display { font-size: var(--t-display); line-height: var(--lh-min); letter-spacing: -.045em; }
.t-world { font-size: var(--t-world); line-height: var(--lh-min); letter-spacing: -.04em; }
.t-h1 { font-size: var(--t-h1); line-height: .9; letter-spacing: -.035em; }
.t-h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.025em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.015em; }
.t-lead { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -.01em; font-weight: var(--w-regular); color: var(--fg); max-width: 34em; text-wrap: pretty; }
.t-body { font-size: var(--t-body); max-width: 38em; text-wrap: pretty; }
.t-small { font-size: var(--t-small); }
.t-muted { color: var(--fg-2); }
.t-olive { color: var(--olive); }
.t-ui {
font-size: var(--t-ui); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
color: var(--fg-2);
}
.eyebrow--olive { color: var(--olive); }
.eyebrow + .t-h1, .eyebrow + .t-h2, .eyebrow + .t-display { margin-top: var(--s-6); }
.prose p + p { margin-top: 1em; }
.prose { max-width: 36em; text-wrap: pretty; }
.prose--lines p + p { margin-top: .35em; } /* founder copy: short lines, stacked */
.prose .lead-line { font-size: var(--t-lead); line-height: 1.2; letter-spacing: -.01em; font-weight: var(--w-medium); margin-bottom: var(--s-8); }
.prose .close-line { font-weight: var(--w-medium); color: var(--olive); margin-top: var(--s-8) !important; }
.protected { color: var(--fg-2); }
/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-12); }
/* Width and offset are set on separate axes so .col-6.off-4 = columns 5–10 */
.col-12 { grid-column-end: span 12; }
.col-10 { grid-column-end: span 10; }
.col-9 { grid-column-end: span 9; }
.col-8 { grid-column-end: span 8; }
.col-7 { grid-column-end: span 7; }
.col-6 { grid-column-end: span 6; }
.col-5 { grid-column-end: span 5; }
.col-4 { grid-column-end: span 4; }
.col-3 { grid-column-end: span 3; }
.off-1 { grid-column-start: 2; }
.off-2 { grid-column-start: 3; }
.off-4 { grid-column-start: 5; }
.off-6 { grid-column-start: 7; }
.off-7 { grid-column-start: 8; }
@media (max-width: 900px) {
:root { --gutter: 1rem; }
.grid > [class*="col-"], .grid > [class*="off-"] { grid-column: 1 / -1; }
.grid > .col-6.sm-half { grid-column: span 6; }
}
.section { padding-block: var(--tier-m); }
.section--s { padding-block: var(--tier-s); }
.section--l { padding-block: var(--tier-l); }
.section--xl { padding-block: var(--tier-xl); }
.section--flush-top { padding-top: 0; }
.section--rule { border-top: var(--hair) solid var(--rule); }
.stack > * + * { margin-top: var(--s-12); }
.stack--s > * + * { margin-top: var(--s-6); }
.stack--l > * + * { margin-top: var(--s-24); }
.page-head { padding-top: calc(var(--nav-h) + var(--s-32)); padding-bottom: var(--tier-s); }
.page-head .t-lead { margin-top: var(--s-10); }
.sticky { position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
.row { display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
/* ---------- 5. Media ----------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--paper-100); }
.is-dark .media, [data-surface="dark"] .media { background: var(--ink-950); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--1x1 { aspect-ratio: 1; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--tall { aspect-ratio: 2 / 3; }
.media--bleed { margin-inline: calc(var(--gutter) * -1); }
.media img { transition: transform 1.2s var(--ease-out-expo); }
a:hover .media img, a:focus-visible .media img { transform: scale(1.025); }
.caption { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-4); }
/* Full-bleed hero with text over image */
.hero {
position: relative; min-height: 100svh; display: flex; align-items: flex-end;
color: var(--paper); background: var(--ink); isolation: isolate;
}
.hero--short { min-height: 78svh; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(14,14,13,.72) 0%, rgba(14,14,13,.25) 38%, rgba(14,14,13,.05) 70%, rgba(14,14,13,.18) 100%);
}
.hero__body { position: relative; width: 100%; padding-block: var(--s-16) var(--s-12); }
.hero__body .t-display, .hero__body .t-h1 { color: var(--paper); }
.hero__meta { display: flex; gap: var(--s-8); flex-wrap: wrap; align-items: baseline; margin-top: var(--s-8); color: rgba(245,242,237,.85); }
/* ---------- 6. Buttons & links ------------------------------------------ */
.btn {
display: inline-flex; align-items: center; gap: .6em;
font-size: var(--t-ui); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
padding: .95em 1.25em; border: var(--hair) solid currentColor; border-radius: var(--radius);
transition: background var(--d-med) var(--ease-out-power2), color var(--d-med) var(--ease-out-power2), transform var(--d-fast);
white-space: nowrap;
}
.btn::after { content: "→"; font-family: var(--font-sans); font-weight: 400; transition: transform var(--d-med) var(--ease-out-expo); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(3px); }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn--fill { background: var(--fg); color: var(--bg); }
.btn--fill:hover { background: var(--olive); border-color: var(--olive); color: var(--paper); }
.btn--olive { color: var(--olive); }
.btn--olive:hover { background: var(--olive); border-color: var(--olive); color: var(--paper); }
.btn--ghost { border-color: transparent; padding-inline: 0; }
.btn--ghost:hover { background: none; color: var(--olive); }
.btn--on-image { color: var(--paper); border-color: rgba(245,242,237,.8); }
.btn--on-image:hover { background: var(--paper); color: var(--ink); }
.btn--lg { font-size: .875rem; padding: 1.1em 1.5em; }
/* The signature quiet route: "Find your place →" */
.route {
display: inline-flex; align-items: center; gap: .5em;
font-size: var(--t-lead); font-weight: var(--w-medium); letter-spacing: -.01em; color: var(--olive);
}
.route::after { content: "→"; transition: transform var(--d-med) var(--ease-out-expo); }
.route:hover::after { transform: translateX(5px); }
.route--small { font-size: var(--t-body); }
.route--light { color: var(--paper); }
.link-ul { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--ink-500); }
.link-ul:hover { text-decoration-color: currentColor; }
/* ---------- 7. Site nav -------------------------------------------------- */
.nav {
position: fixed; inset: var(--frame) 0 auto 0; z-index: 50; height: var(--nav-h);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
padding-inline: var(--gutter);
color: var(--ink);
transition: transform var(--d-slow) var(--ease-out-expo), color var(--d-med);
mix-blend-mode: normal;
}
.nav[data-theme="light"] { color: var(--paper); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__left { justify-self: start; }
.nav__right { justify-self: end; display: flex; gap: var(--s-8); align-items: center; }
.nav__btn { display: inline-flex; align-items: center; gap: .7em; font-size: var(--t-ui); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: .6em 0; }
.nav__burger { width: 20px; height: 10px; position: relative; display: inline-block; }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--d-med) var(--ease-out-expo), top var(--d-med); }
.nav__burger::before { top: 0; } .nav__burger::after { top: 8px; }
.nav__logo { display: block; height: 30px; }
.nav__logo img { height: 100%; width: auto; }
.nav__logo .logo-dark { display: block; }
.nav__logo .logo-light { display: none; }
.nav[data-theme="light"] .logo-dark { display: none; }
.nav[data-theme="light"] .logo-light { display: block; }
.nav__sound { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .85; padding: .5em 0; }
.nav__sound i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.nav__sound[aria-pressed="false"] i { opacity: 1; background: var(--olive-soft); animation: pulse 1.6s ease-in-out infinite; }
.nav__sound:hover { opacity: 1; }
@media (max-width: 600px) { .nav__sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.nav__search { width: 20px; height: 20px; display: inline-grid; place-items: center; }
.nav__search svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
@media (max-width: 600px) { .nav__btn span.label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav__logo { height: 26px; } }
/* Full-screen menu */
.menu {
position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--paper);
display: grid; grid-template-rows: var(--nav-h) 1fr auto; padding-inline: var(--gutter);
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden; transition: opacity var(--d-slow) var(--ease-out-power2), visibility 0s linear var(--d-slow);
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu__bar .nav__logo { justify-self: center; }
.menu__close { justify-self: start; }
.menu__body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); align-content: center; padding-block: var(--s-16); }
.menu__primary { grid-column: 1 / span 8; }
.menu__primary a { display: block; font-size: clamp(2.8rem, 8vw, 7.5rem); line-height: .95; letter-spacing: -.035em; font-weight: var(--w-medium); padding-block: .05em; color: var(--paper); transition: color var(--d-med), transform var(--d-slow) var(--ease-out-expo); }
.menu__primary a:hover, .menu__primary a[aria-current="page"] { color: var(--olive-soft); }
.menu__primary a:hover { transform: translateX(.15em); }
.menu__primary a sup { font-family: var(--font-mono); font-size: .14em; letter-spacing: .1em; vertical-align: top; margin-left: 1.2em; top: 1.6em; position: relative; color: var(--ink-500); }
.menu__secondary { grid-column: 10 / span 3; align-self: end; display: grid; gap: var(--s-4); }
.menu__secondary a { font-size: var(--t-lead); letter-spacing: -.01em; color: var(--paper); }
.menu__secondary a:hover { color: var(--olive-soft); }
.menu__secondary .eyebrow { margin-bottom: var(--s-3); color: var(--ink-500); }
.menu__foot { display: flex; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-8); border-top: var(--hair) solid #2f2e2b; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.menu .is-open-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
.menu.is-open .is-open-stagger > * { opacity: 1; transform: none; }
.menu.is-open .is-open-stagger > *:nth-child(1) { transition-delay: .08s; }
.menu.is-open .is-open-stagger > *:nth-child(2) { transition-delay: .14s; }
.menu.is-open .is-open-stagger > *:nth-child(3) { transition-delay: .20s; }
.menu.is-open .is-open-stagger > *:nth-child(4) { transition-delay: .26s; }
.menu.is-open .is-open-stagger > *:nth-child(5) { transition-delay: .32s; }
@media (max-width: 900px) {
.menu__primary { grid-column: 1 / -1; }
.menu__secondary { grid-column: 1 / -1; margin-top: var(--s-16); }
.menu__foot { flex-direction: column; gap: var(--s-2); }
}
/* Conversational search overlay */
.search {
position: fixed; inset: 0; z-index: 60; background: rgba(245,242,237,.97); color: var(--ink);
display: grid; grid-template-rows: var(--nav-h) 1fr; padding-inline: var(--gutter);
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden; transition: opacity var(--d-slow) var(--ease-out-power2), visibility 0s linear var(--d-slow);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.search.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.search__close { justify-self: end; }
.search__body { align-self: center; max-width: 64rem; width: 100%; margin: 0 auto; padding-bottom: 10vh; }
.search__body .t-h2 { margin-bottom: var(--s-10); }
/* The one search bar */
.convo { position: relative; }
.convo__field {
width: 100%; background: none; border: 0; border-bottom: var(--hair) solid var(--ink);
font: inherit; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.25;
padding: .3em 2.5em .45em 0; color: var(--ink); resize: none; min-height: 1.8em;
}
.convo__field:focus { outline: none; border-bottom-color: var(--olive); }
.convo__field::placeholder { color: transparent; }
.convo__ghost {
position: absolute; left: 0; top: .3em; right: 2.5em; pointer-events: none;
font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.25; color: var(--ink-700);
transition: opacity var(--d-med);
}
.convo__ghost.is-swapping { opacity: 0; }
.convo.is-active .convo__ghost { opacity: 0; }
.convo__go { position: absolute; right: 0; bottom: .55em; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; transition: transform var(--d-med) var(--ease-out-expo); }
.convo__go:hover { transform: translateX(4px); color: var(--olive); }
.convo__hint { margin-top: var(--s-5); font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-900); }
.convo__hint b { font-weight: 500; color: var(--olive); }
.convo--dark .convo__field { color: var(--paper); border-bottom-color: var(--paper); }
.convo--dark .convo__ghost { color: var(--ink-500); }
.convo--dark .convo__hint { color: var(--ink-500); }
/* ---------- 8. Landing film ---------------------------------------------- */
.film {
position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate;
}
.film__layer { position: absolute; inset: 0; }
.film__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.film.has-video .film__video { opacity: 1; }
.film.has-video .film__stills { display: none; }
.film__stills { position: absolute; inset: 0; }
.film__still { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.film__still img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.05); }
/* 4 stills × 6s each, cross-fade, slow drift. Runs on CSS only. */
.film__still:nth-child(1) { animation: filmFade 24s infinite 0s, filmDriftA 24s linear infinite 0s; }
.film__still:nth-child(2) { animation: filmFade 24s infinite 6s, filmDriftB 24s linear infinite 6s; }
.film__still:nth-child(3) { animation: filmFade 24s infinite 12s, filmDriftA 24s linear infinite 12s; }
.film__still:nth-child(4) { animation: filmFade 24s infinite 18s, filmDriftB 24s linear infinite 18s; }
@keyframes filmFade { 0% {opacity:0} 4% {opacity:1} 25% {opacity:1} 30% {opacity:0} 100% {opacity:0} }
@keyframes filmDriftA { 0% {transform: scale(1.08) translate(0,0)} 30% {transform: scale(1.0) translate(-1%,1%)} 100% {transform: scale(1.0) translate(-1%,1%)} }
@keyframes filmDriftB { 0% {transform: scale(1.0) translate(1%,0)} 30% {transform: scale(1.1) translate(0,-1%)} 100% {transform: scale(1.1) translate(0,-1%)} }
.film__grain { position: absolute; inset: -50%; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: grain 1.1s steps(3) infinite; }
@keyframes grain { 0% {transform: translate(0,0)} 33% {transform: translate(-3%,2%)} 66% {transform: translate(2%,-3%)} 100% {transform: translate(0,0)} }
.film__vignette { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(14,14,13,.55) 100%),
linear-gradient(to bottom, rgba(14,14,13,.35), transparent 25%, transparent 70%, rgba(14,14,13,.45)); }
.film__ui { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: var(--s-10) var(--gutter); z-index: 2; }
.film__tag {
font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -.005em; color: rgba(245,242,237,.92); font-weight: var(--w-regular);
opacity: 0; animation: tagIn 2.4s var(--ease-out-slow) 7s forwards;
}
@keyframes tagIn { to { opacity: 1; } }
.film__controls { display: flex; gap: var(--s-6); align-items: center; }
.film__mute { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: rgba(245,242,237,.85); padding: .5em 0; }
.film__mute i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.film__mute[aria-pressed="false"] i { opacity: 1; background: var(--olive-soft); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.film__mute:hover { color: var(--paper); }
.film__down { width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper); border: var(--hair) solid rgba(245,242,237,.45); border-radius: 50%; transition: background var(--d-med), border-color var(--d-med); }
.film__down svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; animation: nudge 2.4s ease-in-out infinite; }
.film__down:hover { background: rgba(245,242,237,.12); border-color: var(--paper); }
@keyframes nudge { 0%,100% {transform: translateY(0)} 50% {transform: translateY(4px)} }
.film__poster-note { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + var(--s-5)); font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: rgba(245,242,237,.5); }
@media (prefers-reduced-motion: reduce) {
.film__still { animation: none !important; }
.film__still:first-child { opacity: 1; }
.film__grain { animation: none; }
.film__tag { animation: none; opacity: 1; }
.film__down svg { animation: none; }
}
/* ---------- 9. Three worlds ---------------------------------------------- */
.worlds { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--paper); background: var(--ink); isolation: isolate; }
.worlds__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.worlds__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; filter: contrast(1.05) saturate(.92); }
.worlds__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,13,.78) 0%, rgba(14,14,13,.3) 45%, rgba(14,14,13,.06) 80%); }
.worlds__body { padding: var(--s-32) var(--gutter) var(--s-12); width: 100%; }
.worlds__list a { display: flex; align-items: baseline; gap: .35em; width: max-content; max-width: 100%; color: var(--paper); transition: color var(--d-med), transform .6s var(--ease-out-expo); }
.worlds__list a:hover { color: var(--olive-soft); transform: translateX(.12em); }
.worlds__list a .t-world { line-height: 1.02; }
.worlds__list a sup { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; color: rgba(245,242,237,.6); position: relative; top: -1.1em; margin-left: .6em; text-transform: uppercase; }
.worlds__foot { display: flex; justify-content: space-between; align-items: end; gap: var(--s-8); margin-top: var(--s-16); flex-wrap: wrap; }
.worlds__foot .t-body { max-width: 24em; color: rgba(245,242,237,.75); }
/* ---------- 10. Cards ---------------------------------------------------- */
.card { display: block; }
.card__meta { display: flex; justify-content: space-between; gap: var(--s-6); align-items: baseline; margin-top: var(--s-5); }
.card__title { font-size: var(--t-h3); font-weight: var(--w-medium); letter-spacing: -.015em; line-height: 1.1; }
.card__sub { color: var(--fg-2); margin-top: .15em; }
.card__facts { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin-top: var(--s-4); }
.card__facts span + span::before { content: " · "; }
.card__price { font-weight: var(--w-medium); white-space: nowrap; }
.card--feature .card__title { font-size: var(--t-h2); letter-spacing: -.025em; }
.card__tag { position: absolute; top: var(--s-5); left: var(--s-5); font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: rgba(14,14,13,.55); padding: .55em .7em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Editorial property grid: 2-up + 1 feature rhythm */
.listing { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s-24); }
.listing > .card { grid-column: span 6; }
.listing > .card--feature { grid-column: span 12; }
.listing > .card--third { grid-column: span 4; }
@media (max-width: 900px) { .listing > .card, .listing > .card--third { grid-column: span 12; } .listing { row-gap: var(--s-16); } }
/* Search result card with explanation */
.result { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s-8); padding-block: var(--s-16); border-top: var(--hair) solid var(--rule); }
.result__media { grid-column: 1 / span 7; }
.result__body { grid-column: 8 / span 5; align-self: end; }
.result__why { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--hair) solid var(--rule); color: var(--fg-2); max-width: 30em; }
.result__why b { font-weight: var(--w-medium); color: var(--olive); }
.result--almost .result__media { grid-column: 1 / span 5; }
.result--almost .result__body { grid-column: 6 / span 6; }
@media (max-width: 900px) { .result__media, .result__body, .result--almost .result__media, .result--almost .result__body { grid-column: 1 / -1; } }
/* Horizontal "walk" strip of documentary images */
.strip { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: 0 0 auto; scroll-snap-align: start; width: min(70vw, 28rem); }
.strip > .is-tall { width: min(52vw, 19rem); }
.strip > .is-wide { width: min(86vw, 40rem); }
/* Person / profile feature */
.profile { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s-10); align-items: start; }
.profile__media { grid-column: 1 / span 5; }
.profile__body { grid-column: 7 / span 6; }
.profile--flip .profile__media { grid-column: 8 / span 5; grid-row: 1; }
.profile--flip .profile__body { grid-column: 1 / span 6; grid-row: 1; }
.profile__name { margin-top: var(--s-5); }
.profile__role { margin-top: var(--s-2); }
@media (max-width: 900px) { .profile__media, .profile__body, .profile--flip .profile__media, .profile--flip .profile__body { grid-column: 1 / -1; grid-row: auto; } }
/* Definition list for facts */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-8) var(--s-6); }
.facts div { border-top: var(--hair) solid var(--rule); padding-top: var(--s-4); }
.facts dt { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.facts dd { margin: .3em 0 0; font-size: var(--t-lead); letter-spacing: -.01em; font-weight: var(--w-medium); }
.list-rule > * { padding-block: var(--s-6); border-top: var(--hair) solid var(--rule); display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-6); }
.list-rule > *:last-child { border-bottom: var(--hair) solid var(--rule); }
.list-rule dt { color: var(--fg-2); } .list-rule dd { margin: 0; }
@media (max-width: 600px) { .list-rule > * { grid-template-columns: 1fr; gap: var(--s-2); } }
/* Big link list (browse by craft, menu-like) */
.biglist a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); padding-block: .32em; border-top: var(--hair) solid var(--rule); font-size: var(--t-h2); font-weight: var(--w-medium); letter-spacing: -.025em; line-height: 1.1; transition: color var(--d-med), padding-left .5s var(--ease-out-expo); }
.biglist a:last-child { border-bottom: var(--hair) solid var(--rule); }
.biglist a:hover { color: var(--olive); padding-left: .25em; }
.biglist a small { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
/* Pills (what can we help with) */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pill { font-size: var(--t-ui); font-weight: var(--w-medium); letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: .9em 1.1em; border: var(--hair) solid var(--ink-300); border-radius: 999px; cursor: pointer; transition: all var(--d-med); }
.pill:hover { border-color: var(--fg); }
.pill[aria-pressed="true"], .pill.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill--tab { border-radius: 0; border: 0; border-bottom: 2px solid transparent; padding: .6em 0; margin-right: var(--s-8); }
.pill--tab[aria-pressed="true"] { background: none; color: var(--fg); border-bottom-color: var(--fg); }
/* Callout / note (from the brief's own styling) */
.note { border-left: 2px solid var(--olive); background: var(--paper-25); padding: var(--s-6) var(--s-8); max-width: 42em; }
.is-dark .note { background: #171716; border-left-color: var(--olive-soft); }
.note .eyebrow { margin-bottom: var(--s-3); color: var(--olive); }
.note p { font-size: var(--t-small); }
/* ---------- 11. Forms ---------------------------------------------------- */
.field { display: grid; gap: .4em; }
.field label { font-size: var(--t-small); color: var(--fg-2); }
.field label em { font-style: normal; color: var(--olive); }
.field input, .field textarea, .field select {
font-size: max(16px, var(--t-lead));
width: 100%; background: none; border: 0; border-bottom: var(--hair) solid var(--ink-500); border-radius: 0;
font: inherit; font-size: var(--t-lead); letter-spacing: -.01em; padding: .35em 0 .5em; color: var(--fg);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--olive); }
.field textarea { resize: vertical; min-height: 4em; }
.field--check { display: flex; gap: .7em; align-items: flex-start; }
.field--check input { width: 1.1em; height: 1.1em; margin-top: .2em; accent-color: var(--olive); }
.field--check label { font-size: var(--t-small); color: var(--fg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12) var(--gutter); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.context-chip { display: inline-flex; align-items: center; gap: .7em; border: var(--hair) solid var(--ink-300); padding: .7em 1em; font-size: var(--t-small); }
.context-chip .eyebrow { color: var(--olive); }
.context-chip button { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.context-chip button:hover { color: var(--fg); }
.confirm { display: none; }
.confirm.is-on { display: block; }
.form.is-sent { display: none; }
.sent-summary { border-top: var(--hair) solid var(--rule); }
.sent-summary div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-6); padding-block: var(--s-5); border-bottom: var(--hair) solid var(--rule); }
.sent-summary dt { color: var(--fg-2); font-size: var(--t-small); } .sent-summary dd { margin: 0; }
/* ---------- 12. Footer --------------------------------------------------- */
.footer { background: var(--ink); color: var(--paper); padding-block: var(--tier-m) var(--s-12); }
.footer a:hover { color: var(--olive-soft); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: var(--s-16); }
.footer__brand { grid-column: 1 / span 4; }
.footer__brand img { height: 68px; width: auto; }
.footer__brand p { margin-top: var(--s-8); color: var(--ink-500); max-width: 20em; font-size: var(--t-small); }
.footer__col { grid-column: span 2; }
.footer__col .eyebrow { color: var(--ink-500); margin-bottom: var(--s-5); }
.footer__col a { display: block; font-size: 1.25rem; letter-spacing: -.01em; padding-block: .12em; }
.footer__col--wide { grid-column: span 4; }
.footer__foot { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--tier-s); padding-top: var(--s-8); border-top: var(--hair) solid #2f2e2b; font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
@media (max-width: 900px) { .footer__brand, .footer__col, .footer__col--wide { grid-column: 1 / -1; } .footer__col { grid-column: span 6; } }
/* ---------- 13. Reveal motion -------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--d-reveal) var(--ease-out-expo), transform 1.1s var(--ease-out-expo); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.media img { transition: none; }
}
/* ---------- 14. Preview-only chrome (remove before launch) --------------- */
.preview-bar {
position: fixed; left: var(--gutter); bottom: var(--s-6); z-index: 40; display: flex; gap: var(--s-2); align-items: center;
background: rgba(14,14,13,.85); color: var(--paper); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: .5rem .5rem .5rem .9rem;
font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
}
.preview-bar span { color: var(--ink-500); margin-right: .4rem; }
.preview-bar button { padding: .5em .7em; border: var(--hair) solid #3a3936; color: var(--ink-500); }
.preview-bar button[aria-pressed="true"] { color: var(--paper); border-color: var(--paper); }
.preview-bar button:hover { color: var(--paper); }
[data-state] { display: none; }
[data-state].is-on { display: block; }
/* Gallery */
.gallery { position: relative; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-5); scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > * { flex: 0 0 min(88%, 72rem); scroll-snap-align: start; }
.gallery__ui { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-5); }
.gallery__count { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.gallery__btns { display: flex; gap: var(--s-3); }
.gallery__btn { width: 40px; height: 40px; border: var(--hair) solid var(--ink-300); display: grid; place-items: center; transition: all var(--d-med); }
.gallery__btn:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }
/* Swatches (theme page) */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-5); }
.swatch { aspect-ratio: 1; border: var(--hair) solid var(--rule); padding: var(--s-4); display: flex; flex-direction: column; justify-content: flex-end; }
.swatch b { font-weight: var(--w-medium); font-size: var(--t-small); }
.swatch code { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .06em; }
.spec { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s-6); align-items: baseline; padding-block: var(--s-8); border-top: var(--hair) solid var(--rule); }
.spec code { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 700px) { .spec { grid-template-columns: 1fr; gap: var(--s-2); } }
.spacing-row { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.spacing-row div { background: var(--olive); }
/* ---------- 15. Frame system (A24 panel gutter) ----------------------------
Every full-bleed panel sits inside a 6px frame of page colour. Stacked
panels overlap by one frame so a single line separates them, and the
lower panel slides over the one above (sticky stacking). */
.frame { border: var(--frame) solid var(--frame-color); } /* opaque, so the line also shows while one panel slides over another */
.frame + .frame, .frame-stack > .frame + .frame { margin-top: calc(-1 * var(--frame)); }
.frame-stack > .frame--pin { position: sticky; top: 0; }
.frame-stack > .frame + .frame { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .frame-stack > .frame--pin { position: relative; } }
/* Framed media: thin bold hairline around an image, as on A24's artwork tiles */
.media--framed { outline: var(--hair) solid var(--fg); outline-offset: calc(-1 * var(--hair)); }
/* ---------- 16. Carousel (A24 titles / in-theaters row) --------------------
Markup:
Slide width is a span of grid columns measured against the content band,
so the row lines up with the page grid and one slide always peeks. */
.carousel {
--span: 5;
--band: calc(min(var(--vw), var(--max-w)) - 2 * var(--gutter));
--col: calc((var(--band) - 11 * var(--gutter)) / 12);
--slide-w: calc(var(--col) * var(--span) + (var(--span) - 1) * var(--gutter));
--inset: max(var(--gutter), calc((var(--vw) - var(--max-w)) / 2 + var(--gutter)));
position: relative; width: var(--vw); margin-left: calc(50% - var(--vw) / 2);
}
.carousel__viewport { overflow: hidden; }
.carousel__track {
display: flex; align-items: stretch; width: max-content;
padding-left: var(--inset); padding-right: var(--inset);
transition: transform .9s var(--ease-out-expo);
touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.carousel__track.is-dragging { transition: none; cursor: grabbing; }
.carousel__slide {
flex: 0 0 var(--slide-w); min-width: 0;
padding-right: var(--gutter); border-right: var(--hair) solid var(--rule);
}
.carousel__slide + .carousel__slide { margin-left: var(--gutter); }
.carousel__slide:last-child { border-right: 0; padding-right: 0; }
.carousel__slide img { -webkit-user-drag: none; pointer-events: none; }
/* Every slide image sits in the same white frame as the panels: a 6px white mat
all the way round, closed by a hairline — so the top and bottom lines travel
with the picture as the row slides, not only the vertical dividers. */
.carousel__slide .media {
border: var(--frame) solid var(--white);
outline: var(--hair) solid var(--rule); outline-offset: 0;
background: var(--white);
}
.is-dark .carousel__slide .media { border-color: var(--frame-color); background: var(--frame-color); }
.carousel__slide .card__meta { margin-top: var(--s-4); }
.carousel--wide { --span: 8; }
.carousel--portrait { --span: 4; }
.carousel--third { --span: 4; }
@media (max-width: 1199px) { .carousel { --span: 6 !important; } .carousel--wide { --span: 10 !important; } }
@media (max-width: 665px) { .carousel { --span: 10 !important; } .carousel--wide { --span: 11 !important; } }
/* Tier heading row: title left, hairline above, arrows right — A24's tier header */
.tier-head {
display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6);
padding-top: var(--s-5); border-top: var(--hair) solid var(--fg); margin-bottom: var(--s-16);
}
.tier-head .t-h2 { letter-spacing: -.03em; }
.tier-head__aside { display: flex; align-items: center; gap: var(--s-8); }
.carousel__arrows { display: flex; gap: var(--s-1); }
.carousel__arrow {
width: 36px; height: 36px; display: grid; place-items: center; color: var(--fg);
border: var(--hair) solid transparent; transition: color var(--d-med), border-color var(--d-med);
}
.carousel__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.carousel__arrow:hover:not(:disabled), .carousel__arrow:focus-visible { color: var(--fg-2); border-color: var(--rule); }
.carousel__arrow:disabled { color: var(--ink-300); cursor: default; }
.is-dark .carousel__arrow:disabled { color: var(--ink-900); }
@media (max-width: 665px) { .carousel__arrows { display: none; } }
/* Slide content: image + title row + muted year/price, as A24's thumb-title */
.thumb { display: block; }
.thumb__text { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); margin-top: var(--s-4); }
.thumb__title { font-size: 1.25rem; font-weight: var(--w-medium); letter-spacing: -.015em; line-height: 1.2; }
.thumb__sub { color: var(--fg-2); font-size: var(--t-small); }
.thumb__meta { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
/* ---------- 17. Standards pass: Laws of UX + accessibility -----------------
Fitts: every control has a ≥44px hit area even when the glyph is small.
Jakob: a visible "Say hello" in the nav; skip link; conventional focus. */
.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-link { position: fixed; top: var(--frame); left: var(--gutter); z-index: 100; background: var(--ink); color: var(--paper); padding: .8em 1.1em; font-size: var(--t-ui); letter-spacing: .06em; text-transform: uppercase; transform: translateY(-200%); transition: transform var(--d-med); }
.skip-link:focus { transform: none; outline: 2px solid var(--olive-soft); }
.nav__btn, .nav__search, .nav__sound, .film__mute, .carousel__arrow, .gallery__btn, .pill, .convo__go, .context-chip button, .menu__close, .search__close { min-width: 44px; min-height: 44px; }
.nav__search { width: 44px; height: 44px; margin-right: -12px; }
.nav__sound, .nav__btn { padding-block: 0; }
.nav__cta { margin-right: var(--s-4); }
.nav__cta .label { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (max-width: 600px) { .nav__cta { display: none; } }
.pill { padding-block: 0; display: inline-flex; align-items: center; }
.footer__col a { min-height: 32px; display: flex; align-items: center; }
.menu__secondary a { min-height: 44px; display: flex; align-items: center; }
.biglist a { min-height: 44px; }
.btn, .route { min-height: 44px; display: inline-flex; align-items: center; }
/* Doherty: pressed feedback within 100ms */
.btn:active, .pill:active, .carousel__arrow:active, .nav__btn:active { transform: translateY(1px); }
/* Goal-gradient: numbered steps in the Say hello form */
.step { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: var(--hair) solid var(--olive); margin-right: .6em; font-size: .9em; vertical-align: middle; }
/* Consent notice (POPIA / Consent Mode): small, bottom-left, never a wall */
.consent { position: fixed; left: auto; right: var(--gutter); bottom: var(--s-6); z-index: 45; width: min(26rem, calc(100vw - 2 * var(--gutter))); background: var(--paper); color: var(--ink); border: var(--hair) solid var(--line); box-shadow: 0 10px 40px rgba(14,14,13,.18); padding: var(--s-8); display: grid; gap: var(--s-6); }
.consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent .btn { min-height: 40px; }
@media (max-width: 600px) { .consent { right: var(--s-4); } }