/* Self-hosted fonts (Archivo variable + Space Grotesk) */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(assets/fonts/archivo-latin-ext-standard-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/space-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 500; src: url(assets/fonts/space-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(assets/fonts/archivo-latin-standard-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/space-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 500; src: url(assets/fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ============ Tokens ============ */
:root {
  --bg: #efe9da;
  --fg: #1b1d22;
  --accent: #ff5a1f;
  --muted: #6b6a64;
  --cream: #efe9da;
  --line: color-mix(in srgb, var(--fg) 18%, transparent);
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "Space Grotesk", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.wrap { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; width: 100%; }
.accent { color: var(--accent); }
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
}
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ============ Loader — same dark stage + light type as the hero ============ */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  background: #0b0b0c; color: #efe9da;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px var(--gutter) 26px;
}
html.pt-in .loader { display: none; }
.loader-top, .loader-tag { font-size: 12px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.loader-top { display: flex; justify-content: space-between; gap: 16px; }
.loader-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: auto; }
.loader-tag { text-align: right; color: #8a8a8a; padding-bottom: .6em; }
.loader-count {
  display: block; overflow: hidden; padding-bottom: .04em;
  font-family: var(--display); font-weight: 300; font-variation-settings: "wdth" 100;
  font-size: clamp(110px, 24vw, 360px); line-height: .82; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.loader-clip { display: inline-block; }
.loader-pct { color: var(--accent); }
.loader-bar { height: 1px; background: rgba(239, 233, 218, .14); margin-top: 22px; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
@media (max-width: 640px) {
  .loader-inner { flex-direction: column; align-items: flex-start; }
  .loader-tag { text-align: left; order: -1; }
  .loader-top, .loader-tag { font-size: 11px; }
}

/* ============ Cursor ============ */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--accent);
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s;
  }
  .cursor.is-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
  .cursor-label {
    font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease);
  }
  .cursor.is-label .cursor-label { opacity: 1; transform: none; }
}

/* ============ Header ============ */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: #efe9da;
}
/* Safari: a fixed header with mix-blend-mode forces the whole page under it to be recomposited on every scroll frame
   (the main cause of the stutter). There it takes the section's theme colour instead, which the theme switch keeps in contrast. */
.is-safari .site-header { mix-blend-mode: normal; color: var(--fg); }
.is-safari.menu-open .site-header { color: #efe9da; }
/* Logo — "Onda" monogram (S flowing into N, one stroke) + name, from the samuele napolano design system.
   Sized in em: change font-size only. Mark = 1.35em tall, 0.54em from the name; stroke never changes. */
.logo { display: inline-flex; align-items: center; gap: .54em; font-size: 22px; line-height: 1;
  font-family: var(--mono); font-weight: 500; letter-spacing: -.035em; text-transform: none; }
.logo-mark { display: block; height: 1.35em; width: auto; flex: none; overflow: visible; }
.logo-mark path { fill: none; stroke: currentColor; stroke-width: 30; stroke-linejoin: round; }
.logo-text { white-space: nowrap; }
.nav { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav-link { position: relative; overflow: hidden; display: inline-block; height: 1.5em; line-height: 1.5; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; box-sizing: content-box; }
.nav-link span { display: block; transition: transform .5s var(--ease); }
.nav-link span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.nav-link:hover span { transform: translateY(-100%); }
.header-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
/* status dot: the pulse is a scaled ring (transform + opacity, GPU-composited) instead of an animated box-shadow that repainted every frame */
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }
@media (max-width: 860px) { .header-meta, .logo-text { display: none; } .nav { gap: 14px; } }

/* ============ Hero ============ */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 96px; padding-bottom: 32px; overflow: hidden; isolation: isolate;
}
.trail { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.trail-img {
  position: absolute; left: 0; top: 0; width: clamp(140px, 16vw, 240px); height: auto; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 6px; opacity: 0; will-change: transform, opacity;
}
.eyebrow { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-title { padding-inline: calc(var(--gutter) * .6); text-align: center; line-height: .8; }
.hero-word {
  display: block; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(44px, 13vw, 250px); letter-spacing: -.045em; white-space: nowrap;
}
.hero-word .char { display: inline-block; padding-bottom: .14em; margin-bottom: -.14em; clip-path: inset(-0.2em -0.4em 0 -0.4em); will-change: transform; }
/* the extra bottom padding keeps round glyph bottoms (and the halo) inside the reveal mask */
.hero-word .ci { display: inline-block; will-change: transform; }
.hero-word--bold { font-size: clamp(64px, 16.4vw, 320px); letter-spacing: -.05em;
  /* 2px halo in the page colour: keeps the word readable when dark trail images pass behind it */
  --halo: var(--bg); --hw: 2px; --hd: calc(var(--hw) * .7);
  text-shadow: var(--hw) 0 var(--halo), calc(var(--hw) * -1) 0 var(--halo), 0 var(--hw) var(--halo), 0 calc(var(--hw) * -1) var(--halo),
               var(--hd) var(--hd) var(--halo), calc(var(--hd) * -1) var(--hd) var(--halo), var(--hd) calc(var(--hd) * -1) var(--halo), calc(var(--hd) * -1) calc(var(--hd) * -1) var(--halo); }
@media (max-width: 760px) { .hero-word--bold { --hw: 1px; } }
.hero-name { font-weight: 200; font-variation-settings: "wdth" 110; font-size: clamp(26px, 5.6vw, 108px); letter-spacing: -.02em; margin-bottom: .12em; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: end; gap: 24px; }
.hero-sub { font-size: clamp(28px, 3.6vw, 56px); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.hero-desc { max-width: 46ch; color: var(--muted); font-size: 16px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 0; }
.scroll-cue svg { width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; animation: bob 2.2s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
@media (max-width: 860px) {
  .hero-bottom { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
}


/* ============ Hero search ============ */
.search { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 8px 0 20px; border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 82%, #fff); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 40px -18px rgba(27, 29, 34, .35); transition: border-color .3s, box-shadow .3s; }
.search:focus-within { border-color: var(--fg); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 50px -18px rgba(27, 29, 34, .45); }
.search-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; color: var(--muted); }
.search-input { flex: 1; min-width: 0; height: 58px; border: 0; background: none; outline: none; font: inherit; font-size: 17px; color: var(--fg); }
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results { margin-top: 10px; max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 86%, #fff); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(27, 29, 34, .45); text-align: left; }
.search-results[hidden] { display: none; }
.sr-item a { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 14px; transition: background .2s; }
.sr-item[aria-selected="true"] a, .sr-item a:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.sr-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--line); }
.sr-title { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.sr-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.sr-snippet { display: block; font-size: 13px; color: color-mix(in srgb, var(--fg) 70%, transparent); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results mark { background: none; color: var(--accent); font-weight: 600; }
.sr-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--muted); transition: transform .3s var(--ease), color .3s; }
.sr-item[aria-selected="true"] .sr-arrow { transform: translateX(4px); color: var(--accent); }
.sr-empty { padding: 16px; font-size: 15px; color: var(--muted); }
.sr-empty button { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
.search-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding: 0 6px; }
.search-tags .label { margin-right: 4px; }
.search-tags button { min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; transition: background .3s, color .3s, border-color .3s; }
.search-tags button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 640px) {
  .search { min-height: 54px; } .search-input { height: 52px; font-size: 16px; }
  .sr-item a { grid-template-columns: 48px 1fr; } .sr-thumb { width: 48px; height: 48px; } .sr-arrow { display: none; }
}



/* EN / IT switch in the header */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px; border-radius: 99px; border: 1.5px solid currentColor; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.lang-switch span { position: relative; padding: 6px 5px; opacity: .45; transition: opacity .3s; }
.lang-switch span.is-on { opacity: 1; }
.lang-switch span.is-on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 2px; height: 1.5px; background: currentColor; }
.lang-switch span + span::before { content: "/"; position: absolute; left: -4px; opacity: .6; }
.lang-switch:hover span { opacity: 1; }

/* Header lens + floating search panel (top right) */
.header-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.search-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; color: inherit; transition: transform .4s var(--ease); }
.search-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-toggle:hover { transform: scale(1.08) rotate(-8deg); }
.search-panel { position: fixed; z-index: 120; top: 12px; right: var(--gutter); width: min(560px, calc(100vw - 2 * var(--gutter))); color: var(--fg); transform-origin: top right; }
.search-panel[hidden] { display: none; }
.search-panel .search { background: color-mix(in srgb, var(--bg) 88%, #fff); }
.search-panel .search-tags { padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, #fff); border: 1px solid var(--line); box-shadow: 0 14px 40px -22px rgba(27, 29, 34, .4); }
.search-results:not([hidden]) + .search-tags { display: none; }
.search-close { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; transition: background .3s; }
.search-close:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.search-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }


/* ============ Mobile header + full-screen menu ============ */
.menu-toggle { display: none; place-items: center; align-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; color: inherit; }
/* whole-pixel bars: fractional heights render with different thickness depending on where they land */
.menu-toggle span { display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .45s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 95; background: #0b0b0c; color: #efe9da; display: flex; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu[hidden] { display: none; }
.mm-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 100%; padding-top: 104px; padding-bottom: 32px; }
.mm-links li { overflow: hidden; border-bottom: 1px solid rgba(239, 233, 218, .14); }
.mm-link { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 120; font-size: clamp(44px, 14vw, 72px); line-height: 1; letter-spacing: -.04em; }
.mm-link i { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: #ff5a1f; }
.mm-foot { display: grid; gap: 28px; }
.mm-foot .label { display: block; margin-bottom: 10px; color: rgba(239, 233, 218, .55); }
.mm-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-lang .label { width: 100%; margin-bottom: 2px; }
.mm-lang-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(239, 233, 218, .25); font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.mm-lang-link.is-on { background: #efe9da; color: #0b0b0c; border-color: #efe9da; }
.mm-contact > a { display: inline-block; padding: 6px 0; font-size: 18px; }
.mm-social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mm-social a { padding: 8px 0; color: rgba(239, 233, 218, .7); }
@media (max-width: 760px) {
  .site-header .nav, .site-header .lang-switch, .header-meta { display: none; }
  .menu-toggle { display: grid; }
  .header-right { gap: 10px; }
  .search-toggle, .menu-toggle { width: 44px; height: 44px; }
  .search-panel { top: 76px; }
}

/* ============ Marquee ============ */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; }
.marquee-track { display: flex; width: max-content; gap: 40px; align-items: center; will-change: transform; }
.marquee span { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 115; font-size: clamp(32px, 5vw, 72px); letter-spacing: -.03em; line-height: 1; text-transform: uppercase; }
.marquee i { font-style: normal; color: var(--accent); font-size: clamp(20px, 2.4vw, 36px); }

/* ============ Section heads ============ */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-block: clamp(80px, 12vw, 160px) 40px; border-bottom: 1px solid var(--line); }
.section-title { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 120; font-size: clamp(56px, 10vw, 160px); line-height: .85; letter-spacing: -.04em; }
.section-note { max-width: 32ch; color: var(--muted); }
.split-lines .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-lines .line-inner { display: inline-block; }

/* ============ Works index ============ */
.works { position: relative; padding-bottom: clamp(80px, 10vw, 140px); }
.work-row {
  position: relative; display: grid; grid-template-columns: 70px 1fr 180px 140px 32px; align-items: center; gap: 16px;
  padding: 28px 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate;
}
.work-row::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.work-row:hover::before, .work-row:focus-visible::before { transform: scaleY(1); }
.work-row:hover, .work-row:focus-visible { color: var(--bg); }
.work-row > * { transition: transform .6s var(--ease), color .3s; }
.work-row:hover .wr-title { transform: translateX(18px); }
.wr-num, .wr-cat, .wr-year { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.wr-title { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(30px, 4.6vw, 72px); letter-spacing: -.03em; line-height: 1; }
.wr-arrow { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: rotate(-45deg); }
.work-row:hover .wr-arrow { transform: rotate(0); }
.work-preview {
  position: fixed; left: 0; top: 0; z-index: 50; width: clamp(240px, 21vw, 320px); aspect-ratio: 3/2; pointer-events: none;
  border-radius: 8px; overflow: hidden; opacity: 0; transform: scale(.6);
}
.work-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .work-row { grid-template-columns: 40px 1fr 24px; padding: 22px 0; }
  .wr-cat, .wr-year { display: none; }
  .work-preview { display: none; }
}

/* ============ Horizontal showcase ============ */
.hscroll { position: relative; overflow: hidden; }
.hscroll-pin { display: flex; flex-direction: column; gap: 28px; padding-block: clamp(72px, 9vw, 120px); }
.hscroll-head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.hp-bar { display: inline-block; width: 160px; height: 2px; background: var(--line); vertical-align: middle; }
.hp-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hscroll-track { display: flex; gap: clamp(16px, 2.4vw, 36px); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hscroll-track.is-dragging a { pointer-events: none; }
.hscroll-track:focus-visible { outline-offset: -2px; }
.h-intro, .h-card { flex: none; scroll-snap-align: start; }
.hscroll-ctrl { display: flex; align-items: center; gap: 12px; }
.hscroll-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .hscroll-hint { display: inline-block; } }
.hs-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.hs-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hs-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hs-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 640px) { .hp-bar { width: 80px; } }
.h-intro { width: min(70vw, 520px); display: flex; align-items: center; }
.h-intro p { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4.6vw, 76px); line-height: 1; letter-spacing: -.03em; }
.h-intro em { font-style: normal; font-weight: 800; font-variation-settings: "wdth" 120; color: var(--accent); }
.h-card { position: relative; width: clamp(240px, 28vw, 440px); flex: none; }
.h-card-img { aspect-ratio: 3/4; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.h-card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease), filter .6s; -webkit-user-drag: none; user-select: none; }
.h-card:hover .h-card-img img { transform: scale(1); }
.h-card-meta { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.h-card h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.02em; line-height: 1.05; margin-top: 4px; }
.h-card h3::after { content: ""; display: block; height: 2px; width: 0; background: var(--card-accent); transition: width .6s var(--ease); margin-top: 8px; }
.h-card:hover h3::after { width: 100%; }


/* ============ Project video (Mercedes commercial) ============ */
.p-video { margin: 0; }
.pv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.pv-el { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pv-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45)); transition: opacity .5s var(--ease); }
/* solid disc, triangle optically centred (its centroid sits on the disc centre) */
.pv-icon { display: grid; place-items: center; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%; background: #f4f1ea; color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .5s var(--ease), background .3s, color .3s; }
.pv-icon svg { width: 40%; height: 40%; fill: currentColor; }
.pv-label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.pv-label i { font-style: normal; opacity: .7; }
.pv-play:hover .pv-icon, .pv-play:focus-visible .pv-icon { transform: scale(1.07); background: var(--accent); color: #fff; }
.pv-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.p-video.is-playing .pv-play { opacity: 0; pointer-events: none; }
.p-video figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* ============ Project ============ */
.project { padding-block: clamp(100px, 14vw, 200px) clamp(40px, 6vw, 80px); }
.p-head { margin-bottom: clamp(40px, 6vw, 80px); }
.p-tag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.p-num { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; }
.p-num i { font-style: normal; color: var(--muted); }
.p-year { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .1em; margin-left: auto; }
.pill { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); }
.p-title { --len: 8; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  /* never wider than the column: the longest word decides (≈0.76em per glyph at this width axis) */
  font-size: min(clamp(52px, 11.5vw, 210px), calc((100vw - 2 * var(--gutter)) / (var(--len) * .76))); line-height: .84; letter-spacing: -.05em; text-transform: lowercase; }
.p-title .line:nth-child(2) .line-inner { color: var(--accent); }
.p-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 6vw, 120px); margin-top: clamp(32px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.p-lede { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.4; letter-spacing: -.01em; max-width: 40ch; }
.p-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; align-content: start; }
.p-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.p-meta dd { font-size: 15px; line-height: 1.35; }
.p-texts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 120px); padding-block: clamp(56px, 8vw, 120px); }
.p-text-col .label { margin-bottom: 16px; color: var(--accent); }
.p-text-col p { font-size: 17px; color: color-mix(in srgb, var(--fg) 82%, transparent); max-width: 58ch; }
.p-quote { padding-block: clamp(80px, 12vw, 180px); }
.p-quote p { font-family: var(--display); font-weight: 600; font-variation-settings: "wdth" 105; font-size: clamp(30px, 5.2vw, 84px); line-height: 1.02; letter-spacing: -.035em; max-width: 20ch; }
.scrub-text .w { opacity: .14; transition: opacity .2s; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); margin-bottom: clamp(48px, 6vw, 96px); }
.feature { padding: 28px 28px 32px 0; border-right: 1px solid var(--line); }
.feature + .feature { padding-left: 28px; }
.feature:last-child { border-right: 0; }
.feature-k { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.feature h4 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; margin: 10px 0 10px; line-height: 1.1; }
.feature p { color: color-mix(in srgb, var(--fg) 75%, transparent); font-size: 16px; }

/* Media + grids */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.grid + .grid { margin-top: clamp(12px, 1.6vw, 24px); }
.s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; } .s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; } .s-12 { grid-column: span 12; }
.media { position: relative; cursor: zoom-in; }
.media-inner { overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.media img { width: 100%; height: auto; }
.media.land .media-inner { aspect-ratio: 1600 / 1129; }
.media.port .media-inner { aspect-ratio: 1133 / 1600; }
.media.sq .media-inner { aspect-ratio: 1 / 1; }
.media .media-inner img { height: 100%; object-fit: cover; }
.grid .media.s-12.land .media-inner { aspect-ratio: 16 / 8.5; }
.p-hero .media-inner { aspect-ratio: 16 / 9 !important; }
.media.diagram .media-inner { background: #fbfaf7; }
.media.diagram .media-inner img { object-fit: contain; padding: 4%; }
.media figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
@media (max-width: 860px) {
  .p-intro, .p-texts { grid-template-columns: 1fr; }
  .p-meta { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
  .feature, .feature + .feature { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .grid .media { grid-column: span 12; }
  .grid .media.port.s-4, .grid .media.sq.s-4 { grid-column: span 6; }
  .p-year { margin-left: 0; }
}


/* ============ Nocturne extended page ============ */
.nstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); border-block: 1px solid var(--line); }
.nstats li { padding: 26px 20px 26px 0; }
.nstats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.nstats b { display: block; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 115; font-size: clamp(30px, 3.6vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--accent); }
.nstats span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--fg) 72%, transparent); max-width: 22ch; }
.nsection { padding-block: clamp(80px, 10vw, 150px) clamp(32px, 4vw, 56px); }
.nsection .illus-head, .illus .illus-head { }
.nsection h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 112; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.03em; line-height: 1; margin: 14px 0 0; }
.nsection .label { color: var(--accent); }
.nsection .illus-head p { color: color-mix(in srgb, var(--fg) 80%, transparent); max-width: 52ch; }
.nsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: none; }
.nstep-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--fg) 8%, transparent); margin-bottom: 18px; }
.nstep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nstep:hover .nstep-img img { transform: scale(1.04); }
.nstep-num { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.nstep h4, .nlayer h4 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 10px; }
.nstep p, .nlayer p { font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.nlayers { display: grid; gap: clamp(28px, 3vw, 44px) clamp(16px, 2.4vw, 36px); }
.nlayers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nlayers--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nlayer .illus-media { margin-bottom: 16px; }
.nlayer .illus-media .media-inner { aspect-ratio: 1 / 1 !important; display: grid; place-items: center; }
.nlayers--4 .nlayer .illus-media .media-inner { aspect-ratio: 3 / 4 !important; }
.nlayer .illus-media .media-inner img { max-height: 100%; width: auto; max-width: 100%; }
.nstraps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.nstraps .media { grid-column: auto; }
.nstraps .media .media-inner { aspect-ratio: 4 / 5 !important; }
.ngap { margin-top: clamp(56px, 7vw, 100px); }
.legend-title { display: block; margin-top: 30px; }
.legend-title + .legend { margin-top: 12px; }
.illus-build--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.illus-build--flip .illus-art { order: 2; max-width: 340px; }
@media (max-width: 1100px) {
  .nstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nstats li:nth-child(4) { padding-left: 0; border-left: 0; }
  .nstats li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .nsteps, .nlayers--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlayers--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .illus-build--flip { grid-template-columns: 1fr; }
  .illus-build--flip .illus-art { order: 0; max-width: 260px; }
  .nstraps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nstraps .media:last-child { grid-column: 1 / -1; }
  .nstraps .media:last-child .media-inner { aspect-ratio: 16 / 9 !important; }
}
@media (max-width: 640px) {
  .nstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nstats li:nth-child(n) { padding: 20px 14px 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .nstats li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .nstats li:nth-child(-n+2) { border-top: 0; }
  .nstats li:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .nsteps { grid-template-columns: 1fr; }
  .nstep-img { aspect-ratio: 16 / 10; }
  .nlayers--4, .nlayers--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ About — dark editorial panel ============ */
.about {
  --ab-panel: #0e0e10;            /* panel + photo shadows */
  --ab-ink: #ffffff;              /* labels, names on hover */
  --ab-g1: #c9c9c9;               /* primary grey  (~12:1 on panel) */
  --ab-g2: #959595;               /* secondary grey (~6.6:1 on panel, AA) */
  padding-block: clamp(80px, 10vw, 160px);
  /* Background comes from the page theme (data-bg, cross-faded like the other sections);
     the studio glow fades to transparent well inside the section, so there are no hard edges */
  position: relative; isolation: isolate;
}
.about::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 42% at 50% 50%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 100%); }
.ab-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  background: var(--ab-panel); color: var(--ab-g1);
  border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(8, 10, 14, .7), 0 16px 40px -16px rgba(8, 10, 14, .45);
  font-size: 13px; line-height: 1.45;
}
.ab-panel a { color: inherit; }
.ab-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Photo column: full height, bleeding to the panel edge */
.ab-side { position: relative; isolation: isolate; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: clamp(20px, 2.2vw, 34px); color: var(--ab-ink); }
.ab-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; }
.ab-photo-in { position: absolute; inset: 0; isolation: isolate; }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 30%; filter: grayscale(1) brightness(1.6) contrast(1.22); }
/* Gradient map driven by tokens: grey photo × accent gradient (lights) , lightened to the panel colour (shadows).
   The accent gradient keeps a hint of the original orange → deep red backdrop. */
.ab-tone { position: absolute; inset: 0; pointer-events: none; }
.ab-tone--hi { mix-blend-mode: multiply;
  background: linear-gradient(105deg, color-mix(in oklab, var(--accent) 72%, #ffc98a) 0%, var(--accent) 46%, color-mix(in oklab, var(--accent) 58%, #3d0610) 100%); }
.ab-tone--lo { mix-blend-mode: lighten; background: var(--ab-panel); }
.ab-shade { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, rgba(10, 10, 12, .82), rgba(10, 10, 12, 0)); pointer-events: none; }
.ab-bio { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: #d6d6d6; }
.ab-bio strong { display: block; font-weight: 500; color: var(--ab-ink); }

/* Content: 3-column grid, hierarchy by colour only */
.ab-main { display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(36px, 4.6vw, 72px); padding: clamp(24px, 2.8vw, 44px) clamp(24px, 3.2vw, 52px); min-width: 0; }
.ab-top, .ab-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 52px); }
.ab-lists { row-gap: clamp(32px, 3.8vw, 56px); align-items: start; }
.ab-h { margin: 0 0 6px; font: inherit; font-weight: 500; color: var(--ab-ink); }
.ab-link { color: var(--ab-g2) !important; transition: color .3s; }
.ab-link:hover { color: var(--ab-ink) !important; }
.ab-lede { margin: 0; max-width: 64ch; color: var(--ab-g2); }
.ab-list ul { display: grid; }
.ab-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 2px 0; }
.ab-name { color: var(--ab-g1); transition: color .3s; }
.ab-meta { color: var(--ab-g2); white-space: nowrap; text-align: right; transition: transform .4s var(--ease), color .3s; }
.ab-sub { display: block; color: var(--ab-g2); font-size: 12px; }
.ab-list--experience li + li, .ab-list--education li + li { margin-top: 6px; }
.ab-row:hover .ab-name, a.ab-row:focus-visible .ab-name { color: var(--ab-ink); }
.ab-row:hover .ab-meta, a.ab-row:focus-visible .ab-meta { transform: translateX(-4px); color: var(--ab-g1); }
.ab-new { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--accent); color: #140700; font-style: normal; font-size: 10px; font-weight: 500; line-height: 16px; vertical-align: 1px; letter-spacing: .02em; }
.ab-foot { display: flex; justify-content: flex-end; align-self: end; }
.ab-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 26px; border-radius: 99px; background: var(--accent); color: #140700 !important; font-size: 14px; font-weight: 500;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s; }
.ab-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .45s var(--ease); }
.ab-cta:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--accent) 86%, #fff); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.ab-cta:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .ab-panel { grid-template-columns: 1fr; }
  .ab-side { min-height: clamp(440px, 68vw, 620px); }
  .ab-top, .ab-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-top { row-gap: 24px; }
}
@media (max-width: 600px) {
  .ab-side { min-height: 460px; }
  .ab-top, .ab-lists { grid-template-columns: 1fr; }
  .ab-foot { justify-content: stretch; }
  .ab-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-meta, .ab-cta, .ab-cta svg { transition: none; }
  .ab-row:hover .ab-meta, .ab-cta:hover, .ab-cta:hover svg { transform: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ============ Download CV button ============ */
.btn-cv { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; padding: 10px 22px 10px 10px; border-radius: 99px; position: relative; isolation: isolate;
  border: 1px solid var(--line); transition: border-color .3s; }
.btn-cv-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--bg); overflow: hidden; background: var(--accent); }
.btn-cv-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-cv-text { display: grid; line-height: 1.2; }
.btn-cv-text strong { font-weight: 600; font-size: 16px; }
.btn-cv-text em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.btn-cv:hover { border-color: var(--fg); }
.btn-cv:hover .btn-cv-icon svg { animation: cv-drop .7s var(--ease); }
@keyframes cv-drop { 0% { transform: none; } 45% { transform: translateY(130%); } 46% { transform: translateY(-130%); } 100% { transform: none; } }

/* ============ Contact ============ */
.contact { padding-top: clamp(100px, 14vw, 200px); overflow: hidden; }
.contact-title { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(48px, 10vw, 180px); line-height: .86; letter-spacing: -.05em; margin: 20px 0 48px; }
.contact-mail {
  display: inline-flex; align-items: center; gap: 16px; padding: 12px 0;
  font-size: clamp(22px, 3.6vw, 56px); font-weight: 300; letter-spacing: -.02em; border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.contact-mail svg { width: clamp(28px, 3vw, 48px); height: auto; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.5; transition: transform .5s var(--ease); }
.contact-mail:hover svg { transform: rotate(45deg); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: 99px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; transition: color .4s; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); border-radius: inherit; transition: transform .5s var(--ease); z-index: -1; }
.btn:hover { color: #fff; border-color: var(--accent); }
.btn:hover::before { transform: none; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(80px, 12vw, 160px); padding-block: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.to-top { padding: 8px 0; }
/* Giant sign-off: the horizontal logo of the design system (monogram 1.35em, 0.54em gap, name in Space Grotesk 500, lowercase),
   scaled with font-size only so the whole lockup spans the content width; inverse-ink on the dark contact section */
.footer-giant { --fg-size: calc((100vw - 2 * var(--gutter)) / 10.7);
  display: flex; align-items: center; justify-content: center; gap: .54em;
  font-family: var(--mono); font-weight: 500; font-size: var(--fg-size); line-height: 1; letter-spacing: -.035em;
  color: var(--fg); white-space: nowrap; padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(20px, 3vw, 44px); }
.fg-mark { display: block; height: 1.35em; width: auto; flex: none; overflow: visible; }
.fg-mark path { fill: none; stroke: currentColor; stroke-width: 30; stroke-linejoin: round; }
.fg-name { display: block; flex: none; padding-bottom: .12em; margin-bottom: -.12em; overflow: hidden; }   /* room for the p descender during the rise */


/* ============ Download page ============ */
.download { padding-top: clamp(110px, 12vw, 170px); }
.dl-head { margin-bottom: clamp(40px, 6vw, 80px); }
.dl-head .label { margin-bottom: 20px; }
.dl-lede { margin-top: 28px; max-width: 46ch; }
.dl-list { border-top: 1px solid var(--line); }
.dl-item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.dl-cover { display: grid; place-items: center; padding: clamp(20px, 3vw, 40px); border-radius: 14px; background: color-mix(in srgb, var(--fg) 6%, transparent); min-height: clamp(260px, 30vw, 420px); }
.dl-cover img { display: block; border-radius: 4px; }
.dl-cover--sheet img { width: 100%; box-shadow: 0 18px 40px -18px rgba(27, 29, 34, .45); transition: transform .8s var(--ease); }
.dl-item:hover .dl-cover--sheet img { transform: translateY(-6px) rotate(-1deg); }
/* book: spine shading + lift on hover */
.dl-book { position: relative; width: min(64%, 240px); aspect-ratio: 170 / 240; border-radius: 3px 8px 8px 3px; overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(27, 29, 34, .55), 0 2px 6px rgba(27, 29, 34, .15); transform: perspective(900px) rotateY(-14deg) rotateX(4deg); transition: transform .9s var(--ease), box-shadow .9s var(--ease); }
.dl-book img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dl-book::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .18) 4%, rgba(0, 0, 0, .06) 7%, transparent 14%, transparent 85%, rgba(255, 255, 255, .08)); }
.dl-item:hover .dl-book { transform: perspective(900px) rotateY(-4deg) rotateX(1deg) translateY(-6px); box-shadow: 0 34px 60px -22px rgba(27, 29, 34, .6), 0 2px 6px rgba(27, 29, 34, .15); }
.dl-num { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--accent); }
.dl-name { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 115; font-size: clamp(32px, 4.4vw, 68px); line-height: .95; letter-spacing: -.035em; margin: 10px 0 16px; }
.dl-text { max-width: 52ch; color: color-mix(in srgb, var(--fg) 78%, transparent); font-size: 17px; }
.dl-meta { display: block; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dl-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.dl-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dl-btn:hover { border-color: var(--fg); }
.dl-btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.dl-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dl-btn--primary:hover svg { animation: cv-drop .7s var(--ease); }
.dl-note { margin-top: 28px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.nav-link[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
@media (max-width: 860px) {
  .dl-item { grid-template-columns: 1fr; }
  .dl-cover { min-height: 0; }
  .dl-book { width: min(52%, 220px); }
}

/* ============ Lightbox ============ */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(10, 10, 11, .94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 24px; color: #efe9da; }
.lightbox[hidden] { display: none; }
.lb-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: calc(100svh - 48px); }
.lb-figure img { max-height: calc(100svh - 110px); width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; }
.lb-figure figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; text-align: center; }
.lightbox button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(239, 233, 218, .25); display: grid; place-items: center; transition: background .3s; }
.lightbox button:hover { background: rgba(239, 233, 218, .12); }
.lightbox svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lb-close { position: absolute; top: 20px; right: 20px; }
@media (max-width: 640px) { .lightbox { grid-template-columns: 1fr; } .lb-prev, .lb-next { position: absolute; bottom: 20px; } .lb-prev { left: 20px; } .lb-next { right: 20px; } }



/* ============ Technical illustrations (no frame, lines straight on the page) ============ */
.illus { display: grid; gap: clamp(96px, 12vw, 180px); padding-top: clamp(96px, 12vw, 180px); }
.media.illus-media { cursor: zoom-in; }
.media.illus-media .media-inner { background: none; border-radius: 0; aspect-ratio: auto !important; overflow: visible; }
.media.illus-media .media-inner img { padding: 0; height: auto; object-fit: contain; }
.illus h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 112; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.03em; line-height: 1; margin: 14px 0 18px; }
.illus p { color: color-mix(in srgb, var(--fg) 80%, transparent); max-width: 52ch; }
.illus .label { color: var(--accent); }
.illus-build { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.illus-build .illus-art { max-width: 420px; justify-self: center; width: 100%; }
.legend { margin-top: 32px; border-top: 1px solid var(--line); counter-reset: none; }
.legend li { display: grid; grid-template-columns: 48px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.legend span { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent); padding-top: 3px; }
.illus-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 120px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.illus-head .label { grid-column: 1; }
.illus-head h3 { grid-column: 1; margin-bottom: 0; }
.illus-head p { grid-column: 2; grid-row: 1 / span 2; }
.illus-configs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); }
.illus figcaption { margin-top: 18px; }
.illus-op { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: center; }
.illus-op .op-open { grid-column: 1 / span 7; }
.illus-op .op-rolled { grid-column: 9 / span 4; }
.illus-op .op-back { grid-column: 5 / span 7; margin-top: clamp(-80px, -4vw, -24px); }
@media (max-width: 860px) {
  .illus-build, .illus-head { grid-template-columns: 1fr; }
  .illus-head p { grid-column: 1; grid-row: auto; }
  .illus-build .illus-art { max-width: 360px; }
  .illus-configs { grid-template-columns: 1fr; }
  .illus-op .op-open, .illus-op .op-back { grid-column: 1 / -1; margin-top: 0; }
  .illus-op .op-rolled { grid-column: 3 / span 8; }
}

/* ============ Page transition curtain ============ */

/* ============ Project pages ============ */
.p-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .3s, gap .4s var(--ease); }
.p-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.p-back:hover { color: var(--fg); gap: 16px; }
.project-page .project { padding-top: clamp(110px, 12vw, 170px); }

.next { padding-block: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.next-link { display: grid; grid-template-columns: 1fr minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.next-meta { display: flex; flex-direction: column; gap: 18px; }
.next-title { display: block; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(48px, 9vw, 170px); line-height: .86; letter-spacing: -.05em; text-transform: lowercase; color: var(--fg); transition: color .4s; }
.next-title .word { display: inline-block; white-space: nowrap; }
.next-title .char { display: inline-block; clip-path: inset(-0.2em -0.4em 0 -0.4em); }
.next-link:hover .next-title { color: var(--accent); }
.next-cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.next-cta svg { width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .5s var(--ease), background .3s, border-color .3s; }
.next-link:hover .next-cta svg { transform: translateX(8px); background: var(--accent); border-color: var(--accent); color: #fff; }
.next-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.next-img img { width: 100%; height: 100%; object-fit: cover; }
.footer-mini { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(80px, 10vw, 140px); padding-block: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.footer-mini a { padding: 8px 0; transition: color .3s; }
.footer-mini a:hover { color: var(--accent); }
@media (max-width: 860px) { .next-link { grid-template-columns: 1fr; } }

/* ============ JS-only initial states ============ */
.js .split-lines .line-inner { transform: translateY(105%); }
.js [data-fade] { opacity: 0; transform: translateY(24px); }
.js .hero-fade { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .split-lines .line-inner, .js [data-fade], .js .hero-fade { opacity: 1 !important; transform: none !important; }
  .scrub-text .w { opacity: 1; }
}

/* Exploded drawings on small screens: keep them compact (the base one is very tall) */
@media (max-width: 860px) {
  .illus .illus-build .illus-art { max-width: 240px; margin-inline: auto; }
  .illus .illus-build--flip .illus-art { max-width: 190px; }
}
@media (max-width: 400px) {
  .illus .illus-build .illus-art { max-width: 210px; }
  .illus .illus-build--flip .illus-art { max-width: 165px; }
}

/* ============ Project carousels (Nocturne) ============ */
.ncar { padding-top: clamp(64px, 8vw, 110px); }
.ncar-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.ncar-head .label { color: var(--accent); }
.ncar-head h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 112; font-size: clamp(26px, 3vw, 44px); letter-spacing: -.03em; line-height: 1; margin-top: 12px; }
.ncar-track { display: flex; gap: clamp(12px, 1.6vw, 22px); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.ncar-track::-webkit-scrollbar { display: none; }
.ncar-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ncar-track.is-dragging .media { pointer-events: none; }
.ncar-track:focus-visible { outline-offset: -2px; }
/* film strip: every image at the same height, width follows its own proportions */
.ncar .media { flex: none; width: min-content; scroll-snap-align: start; }
.ncar .media .media-inner { height: clamp(280px, 44vw, 560px); width: max-content; aspect-ratio: auto !important; }
.ncar .media .media-inner img { height: 100%; width: auto; max-width: none; -webkit-user-drag: none; user-select: none; }
.ncar .media figcaption { white-space: normal; }
@media (max-width: 640px) {
  .ncar-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .ncar-head .hscroll-ctrl { align-self: stretch; justify-content: flex-end; }
  /* night sequence and technical views: swipe sideways instead of a long single column */
  .nsteps, .nlayers--4, .nlayers--5 { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .nsteps::-webkit-scrollbar, .nlayers::-webkit-scrollbar { display: none; }
  .nsteps > li, .nlayers > li { scroll-snap-align: start; }
  .nlayers--4, .nlayers--5 { grid-auto-columns: 62%; }
  .nstep-img { aspect-ratio: 4 / 5; }
}
/* grid children must be allowed to shrink, otherwise a horizontally scrolling row widens the whole page */
.illus > .illus-block, .illus-block > *, .nsection > * { min-width: 0; }
/* technical views: fixed frames (the generic .illus-media rule would collapse them to 0 height) */
.nlayers .nlayer .media.illus-media .media-inner { aspect-ratio: 1 / 1 !important; display: block; }
.nlayers--4 .nlayer .media.illus-media .media-inner { aspect-ratio: 3 / 4 !important; }
.nlayers .nlayer .media.illus-media .media-inner img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* ============ Nomad: materials board (photo + leather / canvas swatches) ============ */
.mat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(12px, 1.6vw, 24px); }
.mat-photo .media .media-inner { aspect-ratio: 2000 / 1648 !important; }
.mat-swatches { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); min-height: 0; }
.mat-swatches .media { display: flex; flex-direction: column; min-height: 0; }
.mat-swatches .media .media-inner { flex: 1; min-height: 0; aspect-ratio: auto !important; }
.mat-swatches .media .media-inner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .mat { grid-template-columns: 1fr; }
  .mat-swatches { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .mat-swatches .media .media-inner { flex: none; aspect-ratio: 1 / 1 !important; }
}
/* swatches never dictate the height: images are laid out absolutely inside their frames */
.mat .media { grid-column: auto; }
.mat-swatches .media .media-inner { position: relative; }
.mat-swatches .media .media-inner img { position: absolute; inset: 0; }
/* video "window fill" fallback when the Fullscreen API is not granted */

/* ============ Hero v3 — dark, light uppercase type, card deck (overrides the earlier hero rules) ============ */
.hero { justify-content: space-between; padding-top: 88px; padding-bottom: 26px; }
.hero-stage { position: relative; flex: 1; display: grid; place-items: center; padding-inline: var(--gutter); }
.hero .hero-title { position: relative; z-index: 2; width: min(100%, 1560px); padding: 0; text-align: left; line-height: .84; }
.hero .hero-word { display: block; font-weight: 300; font-variation-settings: "wdth" 100; text-transform: uppercase;
  font-size: clamp(52px, 10.4vw, 200px); letter-spacing: -.05em; white-space: nowrap; text-shadow: none; margin: 0; }
.hero .hl-1 { padding-left: 4%; }
.hero .hl-2 { padding-left: 21%; }
.hero .hl-3 { padding-left: 37%; }
.hero-deck { position: absolute; z-index: 1; left: 52%; top: 50%; width: clamp(140px, 15vw, 250px); aspect-ratio: 3 / 4; transform: translate(-50%, -78%); pointer-events: none; }
.deck-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); will-change: transform; }
.hero-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; font-size: 12px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.hero-tag { text-align: center; }
.hero-scroll { justify-self: end; display: inline-flex; gap: 10px; align-items: center; padding: 8px 0; }
.hero-scroll i { font-style: normal; display: inline-block; animation: bob 2.2s var(--ease) infinite; }
@media (max-width: 640px) {
  .hero .hero-word { font-size: 14.2vw; letter-spacing: -.045em; }
  .hero .hl-1 { padding-left: 0; }
  .hero .hl-2 { padding-left: 10%; }
  .hero .hl-3 { padding-left: 19%; }
  .hero-deck { left: 60%; width: 27vw; transform: translate(-50%, -105%); }
  .hero-foot { grid-template-columns: 1fr auto; font-size: 11px; }
  .hero-tag { grid-column: 1 / -1; grid-row: 1; text-align: left; }
}

/* ============ Project head with photo backdrop (Nocturne) ============ */
.p-head--backdrop { position: relative; isolation: isolate; }
/* the photo lives in the block above the intro (back link, tags, title): it can never reach the description */
.p-head--backdrop .p-head-top { position: relative; isolation: isolate; }
.p-backdrop {
  position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
  /* full-bleed, from the top of the page down to the bottom of the title */
  top: calc(-1 * clamp(100px, 14vw, 200px)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--bd-fill, #dcdadb);       /* ≈ the photo's own backdrop, fills the space around the shifted photo */
  /* horizontal fade (soft on both sides) and vertical fade (solid from the top of the page, fading out below the title) */
  --bd-h: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  --bd-v: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .5) 82%, transparent 100%);
  /* soft fades at the sides and towards the bottom so it melts into the page */
  -webkit-mask-image: var(--bd-h), var(--bd-v);
  -webkit-mask-composite: source-in;
          mask-image: var(--bd-h), var(--bd-v);
          mask-composite: intersect;
}
/* the subject sits at --bd-x of the photo's width: shift the photo so that point lands on the page centre */
.p-backdrop-in { position: absolute; top: 0; height: 100%; aspect-ratio: var(--bd-ar, 16 / 9); left: 50%; transform: translateX(calc(-1 * var(--bd-x, 50%))); }
.p-backdrop img { width: 100%; height: 100%; object-fit: cover; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
/* veil in the page colour (dark pages: keeps light type readable over bright photos) */
.p-backdrop::after { content: ""; position: absolute; inset: 0; opacity: var(--bd-tint, 0);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 22%, color-mix(in srgb, var(--bg) 72%, transparent) 62%, color-mix(in srgb, var(--bg) 60%, transparent) 100%); }
.p-head--backdrop .p-intro { position: relative; }
/* side variant: photo anchored to the right edge, clear of the title, fading in only from the left */
.p-backdrop--side { background: none; --bd-h: linear-gradient(#000, #000); }
.p-backdrop--side .p-backdrop-in { left: var(--bd-side, 50%); right: 0; width: auto; aspect-ratio: auto; transform: none; }
/* long, eased fade: barely there behind the title, full strength only on the far right */
.p-backdrop--side img { object-position: var(--bd-x) 50%;
  --bd-fade: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .1) 14%, rgba(0, 0, 0, .35) 28%, rgba(0, 0, 0, .7) 42%, #000 56%);
  -webkit-mask-image: var(--bd-fade); mask-image: var(--bd-fade); }
/* veil only where the header sits; the photo itself stays bright */
.p-backdrop--side::after { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 14%, color-mix(in srgb, var(--bg) 15%, transparent) 34%, transparent 55%); }
@media (min-width: 641px) and (max-width: 1100px) {
  /* tablet / narrow laptop: wider box and a longer, gentler fade towards the title */
  .p-backdrop--side .p-backdrop-in { left: 12%; }
  .p-backdrop--side img { --bd-fade: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .05) 14%, rgba(0, 0, 0, .16) 28%, rgba(0, 0, 0, .34) 42%, rgba(0, 0, 0, .58) 56%, rgba(0, 0, 0, .82) 70%, #000 84%); }
}
@media (max-width: 640px) {
  /* phone: no side fade — the photo spans the full width (the crop shows the darker bike, not the white wall) */
  .p-backdrop--side .p-backdrop-in { left: 0; }
  .p-backdrop--side img { -webkit-mask-image: none; mask-image: none; }
  .p-backdrop--side::after { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 18%, color-mix(in srgb, var(--bg) 62%, transparent) 42%, color-mix(in srgb, var(--bg) 58%, transparent) 58%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
}
/* small labels over a bright photo: soft halo in the page colour */
.p-head--backdrop .p-num, .p-head--backdrop .p-back { text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg); }
/* year moves next to the project number, on the plain side, away from the photo's subject */
.p-head--backdrop .p-num { order: 0; }
.p-head--backdrop .p-year { order: 1; margin-left: 0; color: var(--muted); }
.p-head--backdrop .p-year::before { content: "·"; margin-right: 16px; }
.p-head--backdrop .pill { order: 2; }
/* line drawings start scaled up for their reveal: never let that spill past the page edge */
.illus { overflow-x: clip; }
/* phone: the year would sit on the photo's subject — it's already listed under "Year" in the project details */
@media (max-width: 640px) { .p-head--backdrop .p-year { display: none; } }

/* ============ Mercedes — light, minimal page (line drawings + spec rows) ============ */
.mc-block { padding-top: clamp(96px, 12vw, 180px); }
.mc-block--tight { padding-top: clamp(40px, 5vw, 64px); }
.mc-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 72px); }
.mc-head .label { color: var(--muted); }
.mc-head h3 { font-family: var(--display); font-weight: 500; font-variation-settings: "wdth" 100; font-size: clamp(32px, 4vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 14px 0 0; }
.mc-head p { margin-top: 18px; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--fg) 72%, transparent); max-width: 52ch; }
.mc-car { margin: 0 auto; max-width: 1180px; }
.mc-car img { width: 100%; height: auto; }
/* spec rows: value left, label right, hairline between — half width, aligned right */
.mc-specs { width: min(100%, 560px); margin: clamp(32px, 5vw, 64px) 0 0 auto; border-top: 1px solid var(--line); }
.mc-specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc-specs b { font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.mc-specs span { font-size: 13px; color: var(--muted); text-align: right; }
.mc-specs--wide { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 4vw, 56px); border-top: 0; }
.mc-specs--wide li { border-top: 1px solid var(--line); }
/* view switcher */
.mc-views { max-width: 1180px; margin: 0 auto; }
.mc-stage { position: relative; aspect-ratio: 16 / 9; }
.mc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.mc-stage img.is-on { opacity: 1; transform: none; }
.mc-tabs { display: flex; justify-content: center; border-top: 1px solid var(--line); margin-top: 24px; }
.mc-tabs button { flex: 1; max-width: 180px; padding: 16px 8px 4px; font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; border-top: 1px solid transparent; margin-top: -1px; cursor: pointer; transition: color .3s, border-color .3s; }
.mc-tabs button:hover { color: var(--fg); }
.mc-tabs button[aria-selected="true"] { color: var(--fg); border-top-color: var(--fg); }
.mc-tabs button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.mc-note { max-width: 56ch; margin: 0 0 clamp(28px, 4vw, 48px); font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--fg) 72%, transparent); }
.ncar--wide .media .media-inner { height: clamp(150px, 30vw, 440px); }
.mc-credits .p-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.mc-credits .p-meta dd { font-size: 16px; }
#mercedes .ncar-head .label { color: var(--muted); }
#mercedes .ncar-head h3 { font-weight: 500; font-variation-settings: "wdth" 100; }
@media (max-width: 860px) {
  .mc-specs--wide { grid-template-columns: 1fr; }
  .mc-credits .p-meta { grid-template-columns: 1fr 1fr; }
  .mc-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .mc-tabs button { flex: none; padding-inline: 14px; }
}
@media (max-width: 520px) { .mc-credits .p-meta { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mc-stage img { transition: none; } }
#mercedes .mc-block + .ncar { padding-top: 0; }
#mercedes .mc-block + .ncar:not(:has(h3)) .ncar-head > div:first-child { visibility: hidden; }   /* no repeated label right under the section title */
/* Mercedes (light page): on phones the photo spans the full width — a stronger light veil behind the small labels */
@media (max-width: 640px) {
  #mercedes .p-backdrop--side::after { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 14%, color-mix(in srgb, var(--bg) 18%, transparent) 30%, color-mix(in srgb, var(--bg) 12%, transparent) 60%, transparent 100%); }
}
.p-head--backdrop .p-num i { color: inherit; opacity: .7; }
/* car + drawings: one compact section — text and specs on the left, view switcher on the right */
.mc-car-block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mc-car-block .mc-head { margin-bottom: clamp(24px, 3vw, 40px); }
.mc-car-block .mc-specs { width: 100%; margin: 0; }
.mc-car-block .mc-views { max-width: none; margin: 0; }
.mc-car-block .mc-stage { aspect-ratio: 16 / 10; }
.mc-car-block .mc-tabs button { padding-inline: 4px; }
@media (max-width: 960px) {
  .mc-car-block { grid-template-columns: 1fr; }
  .mc-car-block .mc-stage { aspect-ratio: 16 / 10; }
}
/* drawing viewer as a native scroll-snap strip (JS adds .is-scroll; without JS the fade/tab version stays) */
.mc-stage.is-scroll { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mc-stage.is-scroll::-webkit-scrollbar { display: none; }
.mc-stage.is-scroll img { position: static; flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; opacity: 1; transform: none; transition: none;
  scroll-snap-align: center; -webkit-user-drag: none; }
.mc-stage.is-scroll.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
/* Mercedes: the photo sits higher, so the car rests above the title instead of behind the letters */
#mercedes .p-backdrop--side .p-backdrop-in { height: 70%; }
#mercedes .p-backdrop--side img {
  -webkit-mask-image: var(--bd-fade), linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: var(--bd-fade), linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-composite: intersect; }
@media (max-width: 640px) {
  #mercedes .p-backdrop--side img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }
}
@media (max-width: 640px) {
  .p-head--backdrop .p-back { color: var(--fg); text-shadow: 0 0 12px var(--bg), 0 0 4px var(--bg), 0 0 2px var(--bg); }
}

/* ============ Glide MK1 — reuses the Mercedes parts on a dark page ============ */
#glide .mc-head .label, #glide .ncar-head .label { color: var(--accent); }
#glide .mc-stage img { object-fit: contain; }
.gl-mat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.gl-mat .mc-specs { width: 100%; margin: 0; }
.gl-mat-art { margin: 0; justify-self: center; max-width: 420px; }
.gl-mat-art img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
@media (min-width: 861px) { .gl-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#glide .nstep-img { aspect-ratio: 16 / 10; background: #000; }
.gl-lines { max-width: 1180px; margin: 0 auto; }
.gl-lines .mc-stage, .gl-lines .mc-stage.is-scroll { aspect-ratio: 3 / 1; }
.gl-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); max-width: 1000px; margin: 0 auto; }
.gl-screen { margin: 0; }
.gl-screen-frame { border-radius: clamp(18px, 2.4vw, 32px); overflow: hidden; background: #000; border: 1px solid var(--line); aspect-ratio: 540 / 946; }
.gl-screen-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-screen figcaption { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
@media (max-width: 960px) {
  .gl-mat { grid-template-columns: 1fr; }
  .gl-mat-art { max-width: 320px; }
}
@media (max-width: 860px) {
  .gl-screens { grid-template-columns: repeat(3, minmax(220px, 70vw)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .gl-screen { scroll-snap-align: start; }
  .gl-lines .mc-stage, .gl-lines .mc-stage.is-scroll { aspect-ratio: 2 / 1; }
}
/* exploded view: no hard bottom edge — the render dissolves into the black page */
.gl-mat-art img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%);
                          mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%); }
/* plan-view line drawings: the PNG is only a mask, the colour is the page's text colour (light on black, dark on light) */
.gl-line { display: block; position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; opacity: .9;
  background: var(--fg); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
  -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; padding: 4% 6%; box-sizing: border-box; }
.gl-line img, .mc-stage.is-scroll .gl-line img { opacity: 0; width: 100%; height: 100%; object-fit: contain; }   /* the img only carries alt text and size; the colour comes from the mask */
.mc-stage:not(.is-scroll) .gl-line { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.mc-stage:not(.is-scroll) .gl-line.is-on { opacity: .9; }

/* CV preview is now a portrait A4 sheet */
.dl-cover--sheet img { width: auto; max-width: 100%; max-height: clamp(300px, 34vw, 480px); }

/* ============ Vòltia & Rotonda — light page built from the Sofable presentation ============ */
#voltia .mc-head .label, #voltia .ncar-head .label, #carretto .mc-head .label, #nami .mc-head .label { color: var(--accent); }
#voltia .nstep-img { background: #e4e4e4; }
#carretto .nstep-img { background: #e6e4e1; }
#voltia .mc-stage, #carretto .mc-stage, #nami .mc-stage { border-radius: 10px; overflow: hidden; }
#voltia .mc-views:not(.vt-lines) .mc-stage img, #carretto .mc-views:not(.vt-lines) .mc-stage img, #nami .mc-views:not(.vt-lines) .mc-stage img { object-fit: cover; }
.vt-wide { margin-top: clamp(40px, 6vw, 96px); }
.vt-wide img { display: block; width: 100%; height: auto; border-radius: 10px; }
.vt-wide figcaption, .vt-portrait figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
/* dimensioned drawings: larger than the text column, drawn in the text colour (see .gl-line) */
.vt-draw { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vt-lines { max-width: none; margin: 0; }
.vt-lines .mc-stage, .vt-lines .mc-stage.is-scroll { aspect-ratio: 3 / 2; border-radius: 0; }
.vt-lines .gl-line { padding: 2% 3%; }
/* posture studies */
.vt-poses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-pose-art { position: relative; aspect-ratio: 5 / 4; margin-bottom: 18px; }
.vt-pose-art .gl-line { position: absolute; inset: 0; padding: 0; }
/* portrait render beside a text column */
.vt-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.vt-feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.vt-portrait { margin: 0; justify-self: center; width: min(100%, 460px); }
.vt-portrait img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Rotonda Slim palette */
.vt-colors { margin-top: clamp(28px, 3vw, 44px); }
.vt-colors h4 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.vt-colors p { margin-top: 6px; font-size: 15px; color: color-mix(in srgb, var(--fg) 72%, transparent); }
.vt-colors .mc-specs { width: 100%; margin: 18px 0 0; }
.vt-colors i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 10px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.vt-colors span { font-family: var(--mono); letter-spacing: .04em; }
@media (max-width: 960px) {
  .vt-draw, .vt-feature, .vt-feature--flip { grid-template-columns: 1fr; }
  .vt-feature--flip .vt-portrait { order: 2; }
  .vt-portrait { width: min(100%, 380px); }
}
@media (max-width: 640px) {
  .vt-poses { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .vt-lines .mc-stage, .vt-lines .mc-stage.is-scroll { aspect-ratio: 4 / 3; }
}
.vt-ctx img[src*="vt-living"] { object-position: 18% 50%; }   /* keep the chair, on the left of the room, inside the crop */
/* Carretto: tall subject — the photo stops above the second title line, so the cart stands beside "carretto" */
#carretto .p-backdrop--side .p-backdrop-in { height: 72%; }
#carretto .p-backdrop--side img {
  -webkit-mask-image: var(--bd-fade), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: var(--bd-fade), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
          mask-composite: intersect; }
@media (max-width: 640px) {
  #carretto .p-backdrop--side img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); }
}
/* grid children may shrink: a viewer with many tabs must scroll its tab row, not widen the page */
.vt-draw > *, .vt-feature > *, .mc-car-block > * { min-width: 0; }
@media (max-width: 640px) {
  #carretto .p-backdrop--side img { object-position: 40% 50%; }   /* bring the cart, on the right of the wide photo, into the phone frame */
}
/* two portrait renders side by side beside a text column */
.vt-feature--duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vt-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); }
.vt-duo .vt-portrait { width: 100%; }
@media (max-width: 960px) {
  .vt-feature--duo { grid-template-columns: 1fr; }
  .vt-feature--duo .vt-duo { order: 2; }
}

/* ============ Nami ============ */
#nami .nstep-img { background: #d3dbe1; }
@media (min-width: 861px) { .nm-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm-exploded { position: relative; width: min(100%, 440px); }
.nm-exploded .gl-line { position: absolute; inset: 0; padding: 0; }
.nm-legend { margin-top: clamp(24px, 3vw, 40px); columns: 2; column-gap: 28px; }
/* prototype photos are portrait: a narrower, 3:4 viewer beside the text */
.nm-proto .mc-views { width: min(100%, 460px); justify-self: center; margin: 0; }
.nm-proto .mc-stage, .nm-proto .mc-stage.is-scroll { aspect-ratio: 3 / 4; }
/* exploded view: the drawing is top-heavy, so sit it on the bottom of the text (legend) instead of centring the box */
@media (min-width: 961px) { .nm-exploded { align-self: end; } }

/* ============ before / after slider ============ */
.ba { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ba-after, .ba-before { position: absolute; inset: 0; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); pointer-events: none; }
.ba-handle i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: transform .3s var(--ease); }
.ba-handle svg { width: 20px; height: 20px; fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba:hover .ba-handle i, .ba.is-active .ba-handle i { transform: scale(1.08); }
.ba-tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 99px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .82); color: #1a2129; pointer-events: none; }
.ba-tag--l { left: 14px; } .ba-tag--r { right: 14px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba:has(.ba-range:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }