/* ==========================================================================
   GRAVEN — architecture studio
   Design system: Ash / Bone / Concrete / Oxide
   Type: Newsreader opsz 72 (display), Schibsted Grotesk (UI + 700 wordmark), IBM Plex Mono (labels)
   ========================================================================== */

:root {
  --ash: #0E0E0E;
  --ash-2: #161616;
  --ash-3: #1F1F1F;
  --bone: #ECE8E1;
  --bone-2: #DAD6CE;
  --concrete: #8C8984;
  --oxide: #B5472B;

  --bg: var(--ash);
  --fg: var(--bone);
  --muted: var(--concrete);
  --line: rgba(236, 232, 225, 0.14);
  --line-strong: rgba(236, 232, 225, 0.3);

  --serif: "Newsreader", "Times New Roman", serif;
  --display-lh: 1.06;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(1.25rem, 3.2vw, 3.5rem);
  --section: clamp(5rem, 13vh, 11rem);
  --fs-display: clamp(3.25rem, 9.5vw, 11.5rem);
  --fs-h1: clamp(2.75rem, 6.8vw, 8rem);
  --fs-h2: clamp(2rem, 4.6vw, 5.25rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2.5rem);
  --fs-lead: clamp(1.25rem, 2.1vw, 2.1rem);
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --fs-mono: 0.72rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* expo.out */
  --ease-inout: cubic-bezier(0.7, 0, 0.3, 1);          /* power3.inOut-ish */
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  --dur: 0.8s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--oxide); color: var(--bone); }
:focus-visible { outline: 1px solid var(--oxide); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } }

/* ---------- Typography ---------- */
.serif { font-family: var(--serif); font-weight: 400; }
.mono, .eyebrow, .label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow { color: var(--muted); display: inline-flex; align-items: center; gap: 0.75em; }
.eyebrow::before { content: ""; width: 0.5em; height: 0.5em; background: var(--oxide); flex: none; }
.eyebrow.no-dot::before { display: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.display { font-family: var(--serif); font-size: var(--fs-display); line-height: var(--display-lh); letter-spacing: -0.02em; }
.h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: var(--display-lh); }
.h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--display-lh); }
.h3 { font-family: var(--sans); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-family: var(--sans); font-weight: 500; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -0.015em; }
.body-l { font-size: calc(var(--fs-body) * 1.15); line-height: 1.55; }
.muted { color: var(--muted); }
em, .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.oxide { color: var(--oxide); }
.prose p + p { margin-top: 1em; }
.max-c { max-width: 38em; }
.max-m { max-width: 28em; }
.center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }

/* Newsreader display cut: optical size 72, regular weight, never tighter than 1.06 */
.display, .h1, .h2, .display-type, .hero__headline, .pt-card__title, .nav__link, .intro__fact b, .montage__caption,
.tl__main-title, .tl__title, .statement__text, .footer__links a, .footer__tag, .cat-hero__title, .hidx__num, .hidx__name,
.typo__h, .pz__after-h, .facts__num, .narrative__body h3, .plx__title, .next__title, .people__more p, .steps__h, .acc__h,
.contact__city, .contact__big, .swatch__name, .swatch__ratio, .motion-card__name, .poster__title, .hoarding__title {
  font-variation-settings: 'opsz' 72; font-weight: 400;
}

/* Identity: wordmark + lockup (Schibsted Grotesk 700, caps, tracking 0.22em) */
.wordmark { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; line-height: 1; font-variation-settings: normal; }
.wordmark { margin-right: -0.22em; } /* cancel trailing tracking so the word is optically centred */
/* HTML lockup: mark height = --h, cap height = 0.8 --h (font-size = --h × 0.8 / 0.703), gap = stroke × 3, shared baseline */
.lockup { --h: 64px; display: inline-flex; align-items: flex-end; gap: calc(var(--h) * 0.36); color: var(--bone); }
.lockup__mark { width: var(--h); height: var(--h); flex: none; overflow: visible; }
.lockup__word { font-size: calc(var(--h) * 1.138); margin-bottom: -0.14em; white-space: nowrap; }
.wm-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.wm-letter { display: inline-block; will-change: transform; }

/* Hide split targets until GSAP sets them (anti-FOUC) */
[data-split="heading"], [data-reveal], [data-load-reset] { visibility: hidden; }
html.reduced [data-split="heading"], html.reduced [data-reveal] { visibility: visible; }
.no-js [data-split="heading"], .no-js [data-reveal] { visibility: visible; }
/* Masked lines keep room for descenders (g, y, p) and italic overhang */
[data-split] [class*="line-mask"], .split-line, .wm-mask, .nav__link-text {
  padding-bottom: 0.12em; margin-bottom: -0.12em;
  padding-inline: 0.06em; margin-inline: -0.06em;
}
[data-split] [class*="line-mask"] { overflow: clip; }

/* ---------- Layout ---------- */
.page { position: relative; }
main { display: block; position: relative; }
.container { width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { position: relative; padding: var(--section) var(--gutter); }
.section--tight { padding-top: calc(var(--section) * 0.6); padding-bottom: calc(var(--section) * 0.6); }
.section--light { background: var(--bone); color: var(--ash); --fg: var(--ash); --line: rgba(14, 14, 14, 0.14); --line-strong: rgba(14, 14, 14, 0.4); --muted: #6E6B66; }
.section--light ::selection { background: var(--ash); color: var(--bone); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2rem; }
.col-span-3 { --span: 3; grid-column: span 3; }
.col-span-4 { --span: 4; grid-column: span 4; }
.col-span-5 { --span: 5; grid-column: span 5; }
.col-span-6 { --span: 6; grid-column: span 6; }
.col-span-7 { --span: 7; grid-column: span 7; }
.col-span-8 { --span: 8; grid-column: span 8; }
.col-span-9 { --span: 9; grid-column: span 9; }
.col-start-2 { grid-column: 2 / span var(--span, 1); }
.col-start-9 { grid-column: 9 / span var(--span, 1); }
.col-start-4 { grid-column: 4 / span var(--span, 1); }
.col-start-5 { grid-column: 5 / span var(--span, 1); }
.col-start-6 { grid-column: 6 / span var(--span, 1); }
.col-start-7 { grid-column: 7 / span var(--span, 1); }
.rule { height: 1px; background: var(--line); width: 100%; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 5vh, 4rem); }
.section-head .h2 { max-width: 12em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.meta-row dt { color: var(--muted); }
.meta-row dd { margin-top: 0.35em; font-weight: 500; }
figure { position: relative; }
figcaption { margin-top: 0.75rem; color: var(--muted); }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.frame { position: relative; overflow: hidden; background: var(--ash-2); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-11 { aspect-ratio: 1; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-916 { aspect-ratio: 9 / 16; }
.bw { filter: grayscale(1) contrast(1.06) brightness(0.96) sepia(0.14); }
.tone { filter: saturate(0.25) contrast(1.04) sepia(0.12); }

/* ---------- Links & buttons ---------- */
/* adapted from Osmo: underline-link-animation */
[data-underline-link] { text-decoration: none; position: relative; display: inline-block; }
[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: ""; position: absolute; bottom: -0.1em; left: 0; width: 100%; height: 1px;
  background-color: currentColor; transition: transform 0.735s var(--ease-osmo);
  transform-origin: right; transform: scaleX(0) rotate(0.001deg);
}
[data-underline-link="alt"]::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; }
[data-underline-link="alt"]::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); }
  [data-hover]:hover [data-underline-link="alt"]::before, [data-underline-link="alt"]:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; }
  [data-hover]:hover [data-underline-link="alt"]::after, [data-underline-link="alt"]:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.3s; }
}

/* adapted from Osmo: button-with-slanted-reveal */
.btn {
  --rotate: 20deg; --move: 150%;
  position: relative; display: inline-flex; align-items: center; gap: 0.9em;
  padding: 0.95em 1.6em; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg); overflow: hidden; border-radius: 2px; transition: color 0.45s var(--ease-osmo), border-color 0.45s var(--ease-osmo);
}
.btn__wrap { position: relative; z-index: 1; display: grid; place-items: center; }
.btn__label { transform-origin: 50% 1000%; transition: transform 0.45s var(--ease-osmo); white-space: nowrap; }
.btn__label:not(:nth-of-type(1)) { position: absolute; }
.btn__label:nth-of-type(1) { transform: translate(0, 0) rotate(0); transition-delay: 0.075s; }
.btn__label:nth-of-type(2) { transform: translate(calc(var(--move) * -0.2), calc(var(--move) * 2.5)) rotate(calc(var(--rotate) * -2)); transition-delay: 0s; }
.btn__bg { position: absolute; z-index: 0; inset: auto 0 0 auto; width: 120%; height: 100%; background: var(--bone); transform-origin: 50% 0; border-radius: inherit; transform: rotate(-30deg) translate(0%, 200%); transition: transform 0.45s var(--ease-osmo); }
.btn__arrow { position: relative; z-index: 1; width: 0.9em; height: 0.9em; flex: none; }
.btn--oxide .btn__bg { background: var(--oxide); }
.section--light .btn__bg, .btn--invert .btn__bg { background: var(--ash); }
@media (hover: hover) {
  .btn:hover { color: var(--ash); border-color: var(--bone); }
  .btn--oxide:hover { color: var(--bone); border-color: var(--oxide); }
  .section--light .btn:hover, .btn--invert:hover { color: var(--bone); border-color: var(--ash); }
  .btn:hover .btn__label:nth-of-type(1) { transform: translate(calc(var(--move) * 0.2), calc(var(--move) * -2.5)) rotate(calc(var(--rotate) * 2)); transition-delay: 0s; }
  .btn:hover .btn__label:nth-of-type(2) { transform: translate(0, 0) rotate(0); transition-delay: 0.075s; }
  .btn:hover .btn__bg { transform: translate(0, 0) rotate(0); }
}
.btn:focus-visible .btn__bg { transform: translate(0, 0) rotate(0); }

/* ---------- Loader ---------- */
/* adapted from Osmo: logo-reveal-loader */
.loader { position: fixed; inset: 0; z-index: 1000; display: none; color: var(--bone); }
html.no-loader .loader { display: none !important; }
html.first-visit .loader { display: block; }
.loader__bg { position: absolute; inset: 0; background: var(--ash); }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bone); transform-origin: 0 50%; transform: scaleX(0); }
.loader__container { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; }
.loader__lockup { --h: clamp(40px, 6.4vw, 92px); }
.loader__meta { position: absolute; bottom: 2.25rem; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; color: var(--muted); }
.loader__meta span { display: inline-block; }

/* ---------- Page transition card (cube face + entrance cover) ---------- */
/* adapted from Osmo: 3d-cube-page-transition */
.pt-card { position: fixed; inset: 0; z-index: 900; display: none; background: var(--ash); color: var(--bone); }
html.from-transition .pt-card { display: block; }
.pt-card__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; }
.pt-card__mark { width: clamp(40px, 4.2vw, 56px); height: auto; color: var(--bone); overflow: visible; }
.pt-card__title { font-family: var(--serif); font-size: clamp(3rem, 8vw, 8rem); line-height: var(--display-lh); letter-spacing: -0.02em; }
.pt-card__meta { color: var(--muted); display: flex; align-items: baseline; gap: 1.1rem; }
.pt-card__word { color: var(--bone); font-size: 0.82rem; }
.pt-stage { position: fixed; inset: 0; z-index: 950; overflow: hidden; background: var(--ash); }
.pt-stage .pt-card { display: block; }

/* ---------- Navigation ---------- */
/* adapted from Osmo: bold-full-screen-navigation */
.nav { position: fixed; inset: 0; z-index: 800; pointer-events: none; color: var(--bone); }
/* difference blend lives on .nav (the stacking context) so the lockup inverts over light sections; solid while the menu tile is open */
.nav { mix-blend-mode: difference; }
.nav.is-solid { mix-blend-mode: normal; }
.nav__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--gutter); }
.nav__logo { pointer-events: auto; display: block; width: clamp(128px, 11.5vw, 176px); color: var(--bone); }
.nav__logo svg { width: 100%; height: auto; overflow: visible; }
.nav__meta { display: flex; gap: 2.5rem; color: var(--bone); opacity: 0.85; }
.nav__meta span { opacity: 0.6; }
.nav__toggle { pointer-events: auto; display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0; color: var(--bone); }
.nav__toggle-label { position: relative; display: grid; height: 1.2em; overflow: hidden; }
.nav__toggle-label span { grid-area: 1 / 1; transition: transform 0.6s var(--ease-osmo); }
.nav__toggle-label span:nth-child(2) { transform: translateY(110%); }
[data-navigation-status="active"] .nav__toggle-label span:nth-child(1) { transform: translateY(-110%); }
[data-navigation-status="active"] .nav__toggle-label span:nth-child(2) { transform: translateY(0); }
.nav__burger { position: relative; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nav__burger i { position: absolute; width: 1.5rem; height: 1px; background: currentColor; transform: translate(0, 0) rotate(0.001deg); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.nav__burger i:nth-child(1) { transform: translate(0, -0.3rem) scale(1, 1) rotate(0.001deg); }
.nav__burger i:nth-child(3) { transform: translate(0, 0.3rem) scale(1, 1) rotate(0.001deg); }
.nav__toggle:hover .nav__burger i:nth-child(1) { transform: translate(0, -0.3rem) scale(0.5, 1) rotate(0.001deg); }
.nav__toggle:hover .nav__burger i:nth-child(3) { transform: translate(0, 0.3rem) scale(0.5, 1) rotate(0.001deg); }
[data-navigation-status="active"] .nav__burger i:nth-child(1) { transform: translate(0, 0) rotate(45deg) scale(1, 1); }
[data-navigation-status="active"] .nav__burger i:nth-child(2) { transform: translate(-150%, 0) rotate(0.001deg) scale(1, 1); }
[data-navigation-status="active"] .nav__burger i:nth-child(3) { transform: translate(0, 0) rotate(-45deg) scale(1, 1); }
.nav__tile {
  pointer-events: auto; position: absolute; inset: 0; background: var(--ash); color: var(--bone);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
  transition: clip-path 1s cubic-bezier(0.9, 0, 0.1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
[data-navigation-status="active"] .nav__tile { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.nav__tile::before { content: ""; position: absolute; inset: 0; background: url("../media/montage-light.jpg") center / cover no-repeat; opacity: 0.18; filter: grayscale(1) contrast(1.1); }
.nav__list { position: relative; display: flex; flex-direction: column; gap: 0; }
.nav__li { position: relative; overflow: hidden; border-top: 1px solid var(--line); transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.nav__li:last-child { border-bottom: 1px solid var(--line); }
.nav__link { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 0.15em 0; font-family: var(--serif); font-size: clamp(2.6rem, 7.2vw, 7rem); line-height: 1.1; letter-spacing: -0.02em; transform: translateY(100%) rotate(3deg); transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1); }
.nav__li:nth-child(1) .nav__link { transition-delay: 0.2s; }
.nav__li:nth-child(2) .nav__link { transition-delay: 0.15s; }
.nav__li:nth-child(3) .nav__link { transition-delay: 0.1s; }
.nav__li:nth-child(4) .nav__link { transition-delay: 0.05s; }
.nav__li:nth-child(5) .nav__link { transition-delay: 0s; }
[data-navigation-status="active"] .nav__link { transform: translateY(0%) rotate(0.001deg); }
[data-navigation-status="active"] .nav__li:nth-child(1) .nav__link { transition-delay: 0.3s; }
[data-navigation-status="active"] .nav__li:nth-child(2) .nav__link { transition-delay: 0.35s; }
[data-navigation-status="active"] .nav__li:nth-child(3) .nav__link { transition-delay: 0.4s; }
[data-navigation-status="active"] .nav__li:nth-child(4) .nav__link { transition-delay: 0.45s; }
[data-navigation-status="active"] .nav__li:nth-child(5) .nav__link { transition-delay: 0.5s; }
.nav__link-text { position: relative; display: block; overflow: hidden; }
.nav__link-text span { display: block; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.nav__link-text span:nth-child(2) { position: absolute; top: 100%; left: 0.06em; font-style: italic; color: var(--oxide); }
.nav__link:hover .nav__link-text span { transform: translateY(calc(-100% - 0.12em)); }
.nav__link-index { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; color: var(--muted); }
.nav__link.is-current .nav__link-index::after { content: " — Here"; }
.nav__list:has(.nav__li:hover) .nav__li { opacity: 0.25; }
.nav__list:has(.nav__li:hover) .nav__li:hover { opacity: 1; }
.nav__bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.75rem; display: flex; justify-content: space-between; gap: 2rem; color: var(--muted); }
.nav__bottom p { display: flex; gap: 1em; }
.nav__bottom b { color: var(--bone); font-weight: 500; }

/* ---------- Overlays: grain, grid, cursor ---------- */
/* adapted from Osmo: film-grain-effect (SVG turbulence instead of an image asset) */
.grain {
  position: fixed; inset: -10%; z-index: 998; pointer-events: none; opacity: 0.09;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.88 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 260px repeat;
  mix-blend-mode: screen;
}
.grain[data-grain-animate="true"] { animation: grain 0.6s steps(1, end) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1.5%); }
  40% { transform: translate(1.5%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}
/* adapted from Osmo: animated-grid-overlay-columns */
.grid-overlay { position: fixed; inset: 0; z-index: 997; pointer-events: none; display: none; padding: 0 var(--gutter); }
.grid-overlay__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); height: 100%; overflow: clip; }
.grid-overlay__col { height: 100%; background: var(--oxide); opacity: 0.12; }
@media (max-width: 767px) { .grid-overlay__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-overlay__col:nth-child(n+5) { display: none; } }
.cursor { position: fixed; top: 0; left: 0; z-index: 996; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor__dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--oxide); transition: transform 0.3s var(--ease-out), background 0.3s; }
.cursor__ring { position: absolute; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid var(--concrete); opacity: 0.6; transition: transform 0.5s var(--ease-out), opacity 0.3s; }
.cursor.is-link .cursor__ring { transform: scale(1.6); opacity: 0.9; border-color: var(--bone); }
.cursor.is-link .cursor__dot { transform: scale(0.5); }
.cursor.is-hidden { opacity: 0; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--ash); }
.hero__canvas { position: absolute; inset: 0; }
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to bottom, rgba(14,14,14,0), var(--ash)); pointer-events: none; }
.hero__overlay { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 6.5rem var(--gutter) 2.5rem; pointer-events: none; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; color: var(--muted); }
.hero__headline { align-self: end; font-family: var(--serif); font-size: clamp(3.4rem, 9.2vw, 11rem); line-height: var(--display-lh); letter-spacing: -0.025em; max-width: 9em; }
.hero__headline em { color: var(--bone); }
.hero__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin-top: 2rem; }
.hero__sub { max-width: 26em; color: var(--muted); font-size: var(--fs-body); }
.hero__hud { display: grid; grid-template-columns: repeat(4, auto); gap: 2.5rem; text-align: right; color: var(--muted); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.hero__hud dt { opacity: 0.6; margin-bottom: 0.5em; }
.hero__hud dd { color: var(--bone); font-size: 1.1rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.hero__hud .hud-clock dd { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; }
.hero__hud .hud-phase dd { color: var(--oxide); }
.hero__scroll { position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); width: 1px; height: 3rem; background: var(--line-strong); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: translateY(-100%); animation: scrollhint 2.2s var(--ease-inout) infinite; }
@keyframes scrollhint { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- Intro ---------- */
.intro { padding-top: calc(var(--section) * 0.8); }
.intro__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--line); }
.intro__fact { padding-top: 1.5rem; border-top: 1px solid transparent; }
.intro__fact b { display: block; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 400; line-height: var(--display-lh); margin-top: 0.5rem; }
.intro__fig { margin-top: clamp(3rem, 8vh, 6rem); }

/* ---------- Montage ---------- */
.montage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ash-2); }
.montage__clip { position: absolute; inset: 0; opacity: 0; }
.montage__clip.is-active { opacity: 1; }
.montage__clip video { width: 100%; height: 100%; object-fit: cover; }
.montage__clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,14,0.75), rgba(14,14,14,0) 45%), linear-gradient(to bottom, rgba(14,14,14,0.45), rgba(14,14,14,0) 30%); }
.montage__ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 6.5rem var(--gutter) 2.5rem; pointer-events: none; }
.montage__ui-top, .montage__ui-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.montage__ui-top { align-items: flex-start; }
.montage__caption { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: var(--display-lh); min-height: 1.1em; }
.montage__caption-num { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; color: var(--oxide); display: block; margin-bottom: 0.75rem; }
.montage__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: var(--line); }
.montage__progress-bar { position: absolute; inset: 0; background: var(--bone); transform-origin: 0 50%; transform: scaleX(0); }
.montage__counter { font-variant-numeric: tabular-nums; }

/* ---------- Selected work list ---------- */
/* adapted from Osmo: directional-list-hover + image-preview-cursor-follower */
.work-list { position: relative; }
.work-list__head { display: grid; grid-template-columns: 4rem 1fr 1fr 0.6fr 5rem; gap: 1.5rem; padding: 0 0 1rem; color: var(--muted); }
.work-row { position: relative; display: grid; grid-template-columns: 4rem 1fr 1fr 0.6fr 5rem; gap: 1.5rem; align-items: center; padding: 1.6rem 0; border-top: 1px solid var(--line); overflow: hidden; transition: color 0.5s var(--ease-out); }
.work-row:last-child { border-bottom: 1px solid var(--line); }
.work-row > * { position: relative; z-index: 1; }
.work-row__tile { position: absolute; inset: 0; z-index: 0; background: var(--bone); transform: translateY(-100%); transition: transform 0.5s var(--ease-out); will-change: transform; }
.work-row__name { font-family: var(--sans); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2.4rem); letter-spacing: -0.02em; line-height: 1; }
.work-row__name em { font-size: 0.6em; margin-left: 0.5em; vertical-align: 0.18em; color: var(--muted); }
.work-row__num { color: var(--muted); }
.work-row__loc, .work-row__type { color: var(--muted); font-size: var(--fs-body); }
.work-row__year { text-align: right; color: var(--muted); }
@media (hover: hover) {
  .work-row:hover { color: var(--ash); }
  .work-row:hover .work-row__num, .work-row:hover .work-row__loc, .work-row:hover .work-row__type, .work-row:hover .work-row__year, .work-row:hover .work-row__name em { color: #5a5752; }
  body:has(.work-row:hover) .work-row:not(:hover) { color: var(--muted); }
}
.work-row__visual { display: none; }
.work-follower { position: fixed; top: 0; left: 0; z-index: 90; width: 22rem; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; border-radius: 3px; display: none; }
@media (hover: hover) and (min-width: 992px) { .work-follower { display: block; } }
.work-follower__inner { position: relative; width: 100%; height: 100%; opacity: 0; transform: scale(0); transition: opacity 0.15s ease, transform 0.6s var(--ease-osmo); }
.work-follower [data-follower-visual] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.work-follower [data-follower-visual] img { width: 100%; height: 100%; object-fit: cover; }
.work-follower__label { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; padding: 0.5em 0.8em; background: var(--ash); color: var(--bone); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
@media (hover: hover) and (min-width: 992px) {
  body:has([data-follower-collection]:hover) .work-follower__inner { opacity: 1; transform: scale(1); }
}
.work-list__cta { display: flex; justify-content: flex-end; margin-top: 2.5rem; }

/* ---------- Timeline (MWG 073) ---------- */
/* adapted from MWG 073 */
.tl { position: relative; }
.tl__pin { height: 500vh; overflow: hidden; }
.tl__container { position: relative; height: 100vh; width: max-content; display: flex; }
.tl__container::after { content: ""; position: absolute; width: 100vw; height: 1px; background: rgba(14,14,14,0.25); top: 50%; right: 0; z-index: 2; }
.tl__section { position: relative; height: 100%; width: 100vw; display: flex; color: var(--ash); background: var(--bone); }
.tl__section:nth-child(2) { background: var(--bone-2); }
.tl__section:nth-child(3) { background: var(--ash); color: var(--bone); }
.tl__section:nth-child(4) { background: var(--concrete); color: var(--ash); }
.tl__left { width: 50%; padding: 6.5rem var(--gutter) 0; position: relative; }
.tl__left .eyebrow { position: absolute; top: 50%; transform: translateY(-50%); }
.tl__section:nth-child(3) .eyebrow { color: var(--bone); }
.tl__main-title { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4rem); line-height: var(--display-lh); max-width: 8em; }
.tl__right { width: 50%; padding: 6.5rem 14vw 0 0; position: relative; }
.tl__right::after { content: ""; position: absolute; width: 11px; height: 11px; top: calc(50% - 5px); left: 0; background: var(--ash); }
.tl__section:nth-child(3) .tl__right::after { background: var(--oxide); }
.tl__label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.tl__content { font-family: var(--sans); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em; margin-top: 1rem; max-width: 20em; }
.tl__title { position: absolute; bottom: 0; left: 0; font-family: var(--serif); font-size: 17vw; line-height: var(--display-lh); width: max-content; transform-origin: 0 -2.3vw; padding: 0 0 0 var(--gutter); margin: 0 0 -2.3vw; z-index: 4; letter-spacing: -0.03em; }
@media (max-width: 1024px) { .tl__right { padding: 6.5rem var(--gutter) 0 0; } }
@media (max-width: 768px) {
  .tl__left { display: none; }
  .tl__right { padding: 6rem 1.25rem 1rem 25%; width: 100%; }
  .tl__right::after { left: 25%; }
  .tl__content { font-size: 1.15rem; }
  .tl__title { padding-left: 1.25rem; font-size: 24vw; }
}

/* ---------- Statement (highlight text) ---------- */
.statement { padding-top: calc(var(--section) * 1.2); padding-bottom: calc(var(--section) * 1.2); }
.statement__text { font-family: var(--serif); font-size: clamp(1.9rem, 4.1vw, 4.4rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 20em; }
.statement__text .char { will-change: opacity; }
.statement__sign { margin-top: 3rem; display: flex; gap: 3rem; }

/* ---------- Press ---------- */
.press__row { display: grid; grid-template-columns: 1fr 2fr 5rem; gap: 2rem; align-items: baseline; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.press__row:last-child { border-bottom: 1px solid var(--line); }
.press__pub { font-weight: 500; font-size: 1.1rem; }
.press__quote { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.8rem); font-style: italic; line-height: 1.2; }
.press__year { text-align: right; color: var(--muted); }

/* ---------- Footer ---------- */
/* adapted from Osmo: footer-parallax-effect */
.footer-wrap { position: relative; overflow: hidden; background: var(--ash-2); }
.footer { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 5rem; min-height: 88svh; padding: var(--section) var(--gutter) 1.75rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
.footer__col { display: flex; flex-direction: column; gap: 1.5rem; }
.footer__col .eyebrow { margin-bottom: 0.5rem; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.footer__links a { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1.15; }
.footer__address { line-height: 1.6; color: var(--bone); }
.footer__address span { color: var(--muted); display: block; }
.footer__clock { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; }
.footer__clock b { font-weight: 500; color: var(--bone); font-size: 1.4rem; letter-spacing: 0.02em; display: block; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.footer__tag { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.8rem); line-height: 1.1; max-width: 12em; }
.footer__bottom { display: flex; flex-direction: column; gap: 2rem; }
.footer__wordmark { width: 100%; }
.footer__wordmark svg { width: 100%; height: auto; color: var(--bone); }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--muted); }
.footer__dark { position: absolute; inset: 0; background: var(--ash); opacity: 0; pointer-events: none; }

/* ---------- Work page: category hero ---------- */
.cat-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ash); }
.cat-hero__label { position: absolute; top: 6.5rem; left: var(--gutter); color: var(--muted); z-index: 3; }
.cat-hero__index { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 0.6rem; }
.cat-hero__index button { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; color: var(--concrete); opacity: 0.55; transition: opacity 0.4s, color 0.4s, transform 0.4s var(--ease-out); text-align: left; display: flex; gap: 0.8em; align-items: center; }
.cat-hero__index button i { display: block; width: 0; height: 1px; background: var(--oxide); transition: width 0.5s var(--ease-out); }
.cat-hero__index button.is-active { color: var(--bone); opacity: 1; }
.cat-hero__index button.is-active i { width: 1.6rem; }
.cat-hero__index button:hover { opacity: 1; }
.cat-hero__title { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; text-align: center; font-family: var(--serif); font-size: clamp(3.4rem, 12vw, 14rem); line-height: var(--display-lh); letter-spacing: -0.03em; }
.cat-hero__title span { display: block; }
.cat-hero__tiles { position: absolute; inset: 0; z-index: 1; }
.tile { position: absolute; width: 12vw; min-width: 104px; max-width: 220px; border-radius: 12px; overflow: hidden; background: var(--ash-3); will-change: transform; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.tile__inner { width: 100%; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile--a { aspect-ratio: 4 / 5; }
.tile--b { aspect-ratio: 1; }
.tile--c { aspect-ratio: 3 / 2; }
.cat-hero__set { position: absolute; inset: 0; visibility: hidden; }
.cat-hero__set.is-active { visibility: visible; }
.cat-hero__meta { position: absolute; right: var(--gutter); bottom: 2.5rem; z-index: 3; text-align: right; color: var(--muted); max-width: 22em; }
.cat-hero__meta b { display: block; color: var(--bone); font-weight: 500; font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; margin-bottom: 0.4rem; }
.cat-hero__hint { position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); z-index: 3; color: var(--muted); }

/* ---------- Work page: horizontal index ---------- */
/* adapted from Osmo: horizontal-scrolling-sections */
.hidx { position: relative; }
.hidx__wrap { display: flex; flex-flow: row; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hidx__panel { flex: none; width: 78vw; height: 100vh; height: 100svh; padding: 6.5rem var(--gutter) 2.5rem; display: flex; align-items: flex-end; position: relative; border-right: 1px solid var(--line); }
.hidx__panel:first-child { width: 42vw; align-items: center; }
.hidx__panel-inner { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; }
.hidx__num { position: absolute; top: calc(5.2rem - 0.13em); left: 0; font-family: var(--serif); font-size: clamp(8rem, 22vw, 24rem); line-height: var(--display-lh); color: transparent; -webkit-text-stroke: 1px var(--line-strong); letter-spacing: -0.04em; pointer-events: none; }
.hidx__img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ash-2); }
.hidx__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.hidx__panel:hover .hidx__img img { transform: scale(1); }
.hidx__text { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.5rem; }
.hidx__name { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 4.6rem); line-height: var(--display-lh); letter-spacing: -0.02em; }
.hidx__meta { display: grid; grid-template-columns: auto auto; gap: 0.4rem 2rem; color: var(--muted); }
.hidx__meta b { color: var(--bone); font-weight: 400; }
.hidx__intro { max-width: 14em; }
@media (max-width: 767px) {
  .hidx__wrap { flex-flow: column; min-height: 0; }
  .hidx__panel, .hidx__panel:first-child { width: 100%; height: auto; padding: 4rem var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); }
  .hidx__panel-inner { grid-template-columns: 1fr; }
  .hidx__num { position: static; font-size: 6rem; margin-bottom: 1rem; }
}

/* ---------- Work page: typo scroll preview ---------- */
/* adapted from Osmo: big-typo-scroll-preview-infinite (non-infinite variant) */
.typo { position: relative; overflow: clip; padding: var(--section) 0; background: var(--bone); color: var(--ash); }
.typo__list { display: flex; flex-direction: column; }
.typo__item { width: 100%; border-top: 1px solid rgba(14,14,14,0.12); }
.typo__item:last-child { border-bottom: 1px solid rgba(14,14,14,0.12); }
.typo__link { display: flex; justify-content: center; align-items: baseline; gap: 0.4em; width: 100%; padding: 0.08em 0; color: inherit; }
.typo__h { text-align: center; font-family: var(--serif); font-size: 8vw; line-height: var(--display-lh); letter-spacing: -0.03em; white-space: nowrap; transition: color 0.5s; }
.typo__num { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; color: var(--oxide); }
[data-typo-scroll-item="active"] .typo__h { position: relative; z-index: 2; color: var(--bone); mix-blend-mode: difference; }
.typo__media { position: fixed; top: 50%; left: 50%; width: 17.5vw; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); overflow: hidden; pointer-events: none; opacity: 0; --po: 1.5em; transition: clip-path 1.2s var(--ease-out), opacity 0.3s; clip-path: polygon(calc(0% + var(--po)) calc(0% + var(--po)), calc(100% - var(--po)) calc(0% + var(--po)), calc(100% - var(--po)) calc(100% - var(--po)), calc(0% + var(--po)) calc(100% - var(--po))); z-index: 1; }
.typo__media.is--3-2 { aspect-ratio: 3 / 2; width: 26vw; }
.typo__media.is--1-1 { aspect-ratio: 1; width: 20vw; }
[data-typo-scroll-item="active"] .typo__media { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
.typo__media img { width: 100%; height: 100%; object-fit: cover; }
.typo__media p { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); padding: 0.4em 0.7em; background: rgba(14,14,14,0.6); color: var(--bone); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(8px); }
@media (max-width: 991px) { .typo__h { font-size: 11vw; } .typo__media { width: 52vw; } .typo__media.is--3-2 { width: 72vw; } .typo__media.is--1-1 { width: 60vw; } }

/* ---------- Project page ---------- */
/* adapted from Osmo: image-to-background-zoom */
.pz { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100svh; padding: 9rem var(--gutter) 0; overflow: clip; background: var(--ash); }
.pz__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-bottom: clamp(2rem, 6vh, 4rem); }
.pz__start { position: relative; width: min(64vw, 900px); aspect-ratio: 3 / 2; border-radius: 4px; }
.pz__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: var(--ash-2); will-change: width, height, transform; }
.pz__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pz__dark { position: absolute; inset: 0; background: var(--ash); opacity: 0; }
.pz__cap { position: absolute; left: 1.5rem; bottom: 1.25rem; color: var(--bone); display: flex; gap: 2rem; }
.pz__end { width: 100vw; height: 100dvh; margin-top: 10vh; }
.pz__after { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: 0 0 calc(50dvh - 10em); }
.pz__after-h { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 6.5rem); line-height: var(--display-lh); letter-spacing: -0.02em; text-align: center; max-width: 11em; margin-top: 20vh; }

/* adapted from Osmo: number-odometer */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid var(--line); }
.facts__item { padding-top: 1.5rem; }
.facts__num { font-family: var(--serif); font-size: clamp(3rem, 6.5vw, 7rem); line-height: var(--display-lh); letter-spacing: -0.02em; margin-top: 0.75rem; }
.facts__num small { font-family: var(--mono); font-size: 0.22em; letter-spacing: 0.1em; margin-left: 0.4em; vertical-align: 0.5em; color: var(--muted); }
[data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
[data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; }
[data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; }

.narrative { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
.narrative__aside { position: sticky; top: 7rem; align-self: start; }
.narrative__aside dl { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 2rem; }
.narrative__aside dt { color: var(--muted); }
.narrative__body { font-size: calc(var(--fs-body) * 1.2); line-height: 1.55; max-width: 34em; }
.narrative__body .lead { margin-bottom: 1.5em; }
.narrative__body h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: var(--display-lh); margin: 2em 0 0.6em; }

/* adapted from Osmo: parallax-image-layers */
.plx { position: relative; width: 100%; overflow: hidden; background: var(--ash-2); }
.plx__header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 10em var(--gutter); }
.plx__visuals { position: absolute; top: 0; left: 0; width: 100%; height: 120%; overflow: hidden; }
.plx__layers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.plx__layer-img { position: absolute; top: -17.5%; left: 0; width: 100%; height: 117.5%; object-fit: cover; pointer-events: none; }
.plx__layer-card { position: absolute; left: 60%; top: 55%; width: 24vw; min-width: 200px; aspect-ratio: 4 / 5; overflow: hidden; }
.plx__layer-card img { width: 100%; height: 100%; object-fit: cover; }
.plx__layer-title { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; display: flex; align-items: center; justify-content: center; }
.plx__title { font-family: var(--serif); font-size: clamp(5rem, 16vw, 18rem); line-height: var(--display-lh); letter-spacing: -0.03em; color: var(--bone); mix-blend-mode: screen; }
.plx__caption { position: absolute; left: var(--gutter); bottom: 12%; color: var(--bone); max-width: 20em; }
.plx__fade { position: absolute; z-index: 30; left: 0; bottom: 0; width: 100%; height: 25%; background: linear-gradient(to bottom, rgba(14,14,14,0), var(--ash)); }

.materials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.material { display: flex; flex-direction: column; gap: 1rem; }
.material__swatch { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ash-2); }
.material__swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.material:hover .material__swatch img { transform: scale(1.06); }
.material__name { font-weight: 500; font-size: 1.15rem; }
.material__spec { color: var(--muted); }

.process-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1.5rem; align-items: end; }
.process-grid figure:nth-child(3) { grid-row: span 2; }

.next { position: relative; display: block; padding: var(--section) var(--gutter); overflow: hidden; border-top: 1px solid var(--line); }
.next__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.next__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.3); }
.next__inner { position: relative; display: flex; flex-direction: column; gap: 1.5rem; }
.next__title { font-family: var(--serif); font-size: clamp(3rem, 9vw, 10rem); line-height: var(--display-lh); letter-spacing: -0.03em; }
.next__title em { display: block; font-size: 0.55em; color: var(--muted); font-style: italic; }
.next:hover .next__bg { opacity: 1; }
.next__row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }

/* ---------- Studio page ---------- */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.25rem; }
.person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ash-2); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.92) sepia(0.14); transition: transform 1.2s var(--ease-out), filter 0.8s; }
.person:hover .person__photo img { transform: scale(1.04); filter: grayscale(1) contrast(1.1) brightness(1) sepia(0.14); }
.person__name { margin-top: 1rem; font-weight: 500; font-size: 1.1rem; }
.person__role { color: var(--muted); }
.people__more { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); aspect-ratio: 4 / 5; padding: 1.5rem; }
.people__more p { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.1; }

/* adapted from Osmo: sticky-steps-basic */
.steps { position: relative; }
.steps__list { display: flex; flex-direction: column; gap: 30dvh; padding: calc(50dvh - 9em) 0 calc(50dvh - 9em); }
.steps__item { position: relative; }
.steps__text { width: 50%; padding-right: 6em; display: flex; flex-direction: column; gap: 1.5rem; }
.steps__h { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5.5rem); line-height: var(--display-lh); letter-spacing: -0.02em; }
.steps__p { color: var(--muted); font-size: calc(var(--fs-body) * 1.15); line-height: 1.5; max-width: 26em; }
.steps__media { position: absolute; top: 0; right: 0; width: 50%; height: 100%; padding-left: 3em; }
.steps__sticky { position: sticky; top: 0; min-height: 100dvh; display: flex; align-items: center; width: 100%; }
.steps__visual { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 76vh; overflow: hidden; background: var(--ash-2); }
.steps__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps__visual figcaption { position: absolute; left: 1.25rem; bottom: 1rem; color: var(--bone); mix-blend-mode: difference; }
@media (min-width: 992px) {
  [data-sticky-steps-item-status] .steps__visual { transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; opacity: 0; visibility: hidden; }
  [data-sticky-steps-item-status="before"] .steps__visual, [data-sticky-steps-item-status="active"] .steps__visual { opacity: 1; visibility: visible; }
  [data-sticky-steps-item-status] .steps__text { transition: opacity 0.5s ease-in-out; opacity: 0.25; }
  [data-sticky-steps-item-status="active"] .steps__text { opacity: 1; }
}
@media (max-width: 991px) {
  .steps__list { gap: 6rem; padding: 2rem 0; }
  .steps__text { width: 100%; padding: 0 0 2rem; }
  .steps__sticky { position: relative; min-height: 0; }
  .steps__media { position: relative; width: 100%; height: auto; padding: 0; }
}

/* adapted from Osmo: accordion-css-animation */
.acc { position: relative; }
.acc__item { border-top: 1px solid var(--line); }
.acc__item:last-child { border-bottom: 1px solid var(--line); }
.acc__top { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.6rem 0; cursor: pointer; }
.acc__num { color: var(--muted); }
.acc__h { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 3rem); line-height: var(--display-lh); }
.acc__icon { position: relative; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; transition: transform 0.6s var(--ease-osmo), background 0.4s, border-color 0.4s; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: currentColor; transition: transform 0.6s var(--ease-osmo); }
.acc__icon::before { width: 0.9rem; height: 1px; }
.acc__icon::after { width: 1px; height: 0.9rem; }
[data-accordion-status="active"] .acc__icon { background: var(--bone); color: var(--ash); border-color: var(--bone); }
[data-accordion-status="active"] .acc__icon::after { transform: rotate(90deg); }
.acc__bottom { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-osmo); overflow: hidden; }
[data-accordion-status="active"] .acc__bottom { grid-template-rows: 1fr; }
.acc__bottom-wrap { min-height: 0; overflow: hidden; }
.acc__content { display: grid; grid-template-columns: 4rem 1fr 1fr; gap: 1.5rem; padding: 0 0 2.2rem; }
.acc__content > *:first-child { grid-column: 2; }
.acc__content p { color: var(--muted); max-width: 30em; line-height: 1.55; }
.acc__content ul { display: flex; flex-direction: column; gap: 0.4rem; }
.acc__content li { padding: 0.35rem 0; border-top: 1px solid var(--line); }

.awards__row { display: grid; grid-template-columns: 5rem 1fr 1fr auto; gap: 2rem; align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.awards__row:last-child { border-bottom: 1px solid var(--line); }
.awards__name { font-weight: 500; font-size: 1.1rem; }
.awards__proj { color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.awards__result { color: var(--oxide); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact__office { padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; }
.contact__city { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5.5rem); line-height: var(--display-lh); }
.contact__big { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 4.8rem); line-height: var(--display-lh); }

/* ---------- Brand page ---------- */
.brand-hero { min-height: 70svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 9rem; }
.spec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.logo-card { border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 3; padding: 1.5rem; }
.spec > .logo-card.col-span-3 { aspect-ratio: auto; min-height: 18rem; }
.logo-card--light { background: var(--bone); color: var(--ash); border-color: transparent; }
.logo-card--oxide { background: var(--oxide); color: var(--bone); border-color: transparent; }
.logo-card svg { width: 100%; height: auto; }
.logo-card__art { display: flex; align-items: center; justify-content: center; flex: 1; padding: 1.5rem 0; }
.logo-card__art--mark svg { width: 38%; }
.logo-card__art--word svg { width: 80%; }
.logo-card__art--lockup svg { width: 86%; overflow: visible; }
.logo-card svg { overflow: visible; }
.logo-card__replay { letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxide); }
.logo-card__art--construct { gap: clamp(1rem, 3vw, 2.5rem); padding: 0.5rem 0; }
.logo-card__art--construct .construct { width: auto; height: 100%; max-height: 22rem; aspect-ratio: 1; flex: none; }
.construct__notes { display: flex; flex-direction: column; gap: 0.6rem; color: var(--muted); min-width: 11em; }
.construct__notes b { display: block; color: var(--bone); font-weight: 500; }
.logo-card__art--clear svg { width: 92%; }
.sizes { display: flex; align-items: flex-end; gap: clamp(0.75rem, 1.6vw, 1.4rem); }
.sizes__item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0; }
.sizes__item svg, .sizes__item img { width: auto; flex: none; }
.sizes__item figcaption { margin: 0; color: var(--muted); }
.logo-card__cap { display: flex; justify-content: space-between; color: var(--muted); }
.logo-card--light .logo-card__cap, .logo-card--oxide .logo-card__cap { color: inherit; opacity: 0.75; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.swatch { aspect-ratio: 4 / 5; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); }
.swatch__name { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: var(--display-lh); }
.swatch__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.swatch__ratio { font-size: 2rem; font-family: var(--serif); }
.ratio-bar { display: flex; height: 10px; width: 100%; overflow: hidden; margin-top: 2rem; }
.type-spec { display: flex; flex-direction: column; }
.type-spec__row { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: baseline; padding: 2rem 0; border-top: 1px solid var(--line); }
.type-spec__row:last-child { border-bottom: 1px solid var(--line); }
.type-spec__sample { line-height: var(--display-lh); overflow-wrap: anywhere; }
.motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.motion-card { border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: 16rem; }
.motion-card__track { position: relative; height: 2.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.motion-card__dot { position: absolute; top: 50%; left: 0; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; background: var(--oxide); }
.motion-card__name { font-family: var(--serif); font-size: 1.8rem; line-height: var(--display-lh); }
.motion-card__spec { color: var(--muted); }
.imagery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.imagery figure:nth-child(1) { grid-column: span 2; }
.imagery .frame { aspect-ratio: 4 / 5; }
.imagery figure:nth-child(1) .frame { aspect-ratio: 8 / 5; }
.apps { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start; }
.poster { position: relative; aspect-ratio: 50 / 70; background: var(--ash-2); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; border: 1px solid var(--line); }
.poster__img { position: absolute; inset: 0; }
.poster__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.7); }
.poster__top { position: relative; display: flex; justify-content: space-between; }
.poster__mark { width: 2.6rem; height: auto; color: var(--bone); }
.poster__title { position: relative; font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 7rem); line-height: var(--display-lh); letter-spacing: -0.03em; }
.poster__title em { color: var(--oxide); }
.poster__foot { position: relative; display: flex; justify-content: space-between; color: var(--bone); }
.apps__col { display: flex; flex-direction: column; gap: 1.5rem; }
.card { aspect-ratio: 85 / 55; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); }
.card--front { background: var(--bone); color: var(--ash); border-color: transparent; }
.card--back { background: var(--ash); color: var(--bone); }
.card__mark { width: 1.9rem; height: auto; }
.card__name { font-weight: 500; }
.card__role { opacity: 0.6; }
.card__lines { display: flex; justify-content: space-between; align-items: flex-end; }
.card__word { width: 30%; height: auto; overflow: visible; }
.hoarding { position: relative; aspect-ratio: 16 / 7; background: var(--bone); color: var(--ash); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.hoarding__stripe { position: absolute; top: 0; bottom: 0; right: 0; width: 7%; background: repeating-linear-gradient(135deg, var(--oxide) 0 14px, var(--bone) 14px 28px); }
.hoarding__title { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: var(--display-lh); letter-spacing: -0.02em; max-width: 9em; }
.hoarding__row { display: flex; justify-content: space-between; align-items: flex-end; padding-right: 10%; }
.hoarding__lockup { width: 34%; height: auto; overflow: visible; }
.hoarding .mono { color: #5a5752; }

/* ---------- Generic page hero (inner pages) ---------- */
.page-hero { position: relative; min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 9rem var(--gutter) 3rem; }
.page-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.page-hero .display { max-width: 7.5em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
  .materials { grid-template-columns: repeat(2, 1fr); }
  .motion-grid { grid-template-columns: 1fr 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .nav__meta { display: none; }
  .grid-12 > [class*="col-span-"], .grid-12 > [class*="col-start-"] { grid-column: 1 / -1; }
  .hero__hud { grid-template-columns: repeat(2, auto); gap: 1.25rem 2rem; text-align: left; }
  .hero__bottom { grid-template-columns: 1fr; }
  .hero__sub { display: none; }
  .work-list__head { display: none; }
  .work-row { grid-template-columns: 3rem 1fr 4rem; }
  .work-row__loc, .work-row__type { display: none; }
  .narrative { grid-template-columns: 1fr; }
  .narrative__aside { position: static; }
  .contact { grid-template-columns: 1fr; }
  .apps { grid-template-columns: 1fr; }
  .imagery { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid figure:nth-child(3) { grid-column: span 2; grid-row: auto; }
  .press__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .press__year { text-align: left; }
  .cat-hero__meta { display: none; }
  .tile { width: 22vw; min-width: 88px; }
  .acc__content { grid-template-columns: 1fr; }
  .acc__content > *:first-child { grid-column: auto; }
  .acc__top { grid-template-columns: 2.5rem 1fr auto; }
  .awards__row { grid-template-columns: 3rem 1fr auto; }
  .awards__proj { grid-column: 2; }
  .type-spec__row { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media (max-width: 767px) {
  :root { --fs-mono: 0.68rem; }
  .hero__overlay { padding-top: 5.5rem; }
  .hero__top p:last-child { display: none; }
  .hero__headline { font-size: clamp(3rem, 15vw, 5rem); max-width: none; }
  .hero__hud { grid-template-columns: 1fr 1fr; }
  .hero__hud .hud-elev { display: none; }
  .hero__scroll { display: none; }
  .intro__facts { grid-template-columns: 1fr; gap: 0; }
  .intro__fact { border-top: 1px solid var(--line); padding: 1.25rem 0; }
  .intro__facts { border-top: 0; }
  .montage__caption { font-size: 1.6rem; }
  .montage__ui { padding-top: 5.5rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer { min-height: 0; gap: 3.5rem; }
  .people { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .materials { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .motion-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .spec { gap: 0.75rem; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cat-hero__index { top: auto; bottom: 6.5rem; transform: none; flex-direction: row; gap: 1.2rem; }
  .cat-hero__index button i { display: none; }
  .cat-hero__btn-label { display: none; }
  .cat-hero__index button { font-size: 0.9rem; }
  .cat-hero__tiles { top: 5%; }
  .cat-hero__hint { bottom: 2.75rem; }
  .plx__layer-card { left: 55%; width: 34vw; }
  .pz__cap { display: none; }
  .page-hero { min-height: 60svh; padding-top: 7.5rem; }
  .nav__bottom { flex-direction: column; gap: 0.5rem; }
  .nav__link { font-size: clamp(2.4rem, 11vw, 4rem); }
  .imagery { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid figure:nth-child(3) { grid-column: auto; }
  .nav__bar { padding: 1rem var(--gutter); }
  .card { aspect-ratio: 85 / 55; }
}

/* Brand spec grid + identity applications on smaller screens */
.page-hero__row { flex-wrap: wrap; }
.poster__top { gap: 1rem; }
.poster__top p { text-align: right; }
@media (max-width: 991px) {
  .spec > .col-span-6 { grid-column: span 12; }
  .spec > .col-span-3 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .spec > .col-span-3 { grid-column: span 12; min-height: 15rem; }
  .logo-card { padding: 1.1rem; }
  .logo-card__cap { gap: 1rem; }
  .logo-card__art--construct { flex-direction: column; align-items: stretch; }
  .logo-card__art--construct .construct { width: 100%; height: auto; max-height: none; }
  .construct__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .logo-card--construct { aspect-ratio: auto; }
  .poster { padding: 1.25rem; }
  .card__word { width: 40%; }
  .hoarding { aspect-ratio: auto; gap: 1.5rem; padding: 1.25rem; }
  .hoarding__title { font-size: 1.7rem; padding-right: 10%; }
  .hoarding__lockup { width: 48%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain[data-grain-animate="true"] { animation: none; }
  .hero__scroll::after { animation: none; transform: none; }
  .nav__tile, .nav__link, .nav__link-text span, .work-row__tile, .btn__label, .btn__bg, .typo__media { transition-duration: 0.01s; }
}

/* Hero fallback (no WebGL) */
.hero__canvas.is-fallback { background: url("../media/montage-concrete.jpg") center / cover no-repeat; }
.hero__canvas.is-fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,14,14,0.55), rgba(14,14,14,0.25) 45%, var(--ash)); }

/* Brand page extras */
.ratio-bar span { display: block; height: 100%; }
.section--light .type-spec__row { border-color: rgba(14,14,14,0.14); }
.section--light .acc__item { border-color: rgba(14,14,14,0.14); }
.section--light .acc__icon { border-color: rgba(14,14,14,0.4); }
.section--light [data-accordion-status="active"] .acc__icon { background: var(--ash); color: var(--bone); border-color: var(--ash); }
.section--light .acc__content li { border-color: rgba(14,14,14,0.14); }
.section--light .acc__content p { color: #5a5752; }
.section--light .section-head { border-color: rgba(14,14,14,0.14); }
.section--light .process-grid figcaption, .section--light .mono.muted { color: #6E6B66; }
.section--light .frame { background: #DAD6CE; }
.people__more p { color: var(--muted); }
.meta-row { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; }