/* ==========================================================================
   VINCO — technical-sheet design system
   Grey paper, black type, one orange. 1px rules, boxed controls, bold labels.
   ========================================================================== */
:root {
  --paper: #e4e4e1;
  --paper-2: #dcdcd8;
  --sheet: #f3f3f1;
  --ink: #111111;
  --ink-2: #3a3a38;
  --mute: #7b7b77;
  --hair: rgba(17, 17, 17, 0.16);
  --orange: #ef5a24;
  --orange-ink: #b8400f;
  --font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --g: clamp(18px, 3vw, 56px);
  --nav: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* corners: controls, the small squares inside them, sheets and panels */
  --r: 6px;
  --r-in: 4px;
  --r-box: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: var(--nav); }
/* smooth scroll (Lenis) */
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; }
/* a line of display type that rises through its own mask */
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ln > span { display: block; will-change: transform; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
/* titles: a plain neo-grotesk at medium weight, like the product labels */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
em { font-style: normal; }
::selection { background: var(--orange); color: var(--ink); }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 20px; background: var(--orange); padding: 12px 16px; font-weight: 600; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------- shared atoms */
/* Swiss label pair: a bold uppercase line over a regular one */
.label { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.label > b { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.01em; }
.label.right { text-align: right; }
.bar { display: block; height: 14px; background: var(--ink); }
.eyebrow { font: 700 12px/1.3 var(--font); text-transform: uppercase; letter-spacing: 0.01em; }
.section-header { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-top: 1px solid var(--ink); padding-top: 14px; font: 500 12px var(--font); }
.underlink { margin-top: 26px; }

/* technical box (planificação style): a bold title over a mono line, sections ruled in ink,
   two-column grids of a bold key and a mono value */
.spec { border: 1px solid var(--ink); font: 500 10px/1.45 var(--mono); text-transform: uppercase; color: var(--ink-2); }
.spec-head { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid var(--ink); }
.spec-head > b { font: 700 11px/1.3 var(--font); letter-spacing: 0.02em; color: var(--ink); }
.spec-grid { list-style: none; margin: 0; padding: 9px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.spec-grid li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.spec-grid b { min-width: 38px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.scene-copy .spec { max-width: 330px; margin-top: 22px; background: rgba(228, 228, 225, 0.72); }
.type-spec { max-width: 330px; margin-top: 22px; }
.contact-spec { margin-top: 26px; }
.contact-spec .contact-data { margin: 0; border-top: 0; }
.contact-spec .contact-data > div { padding: 9px 10px; border-bottom: 1px solid var(--hair); }
.contact-spec .contact-data > div:last-child { border-bottom: 0; }
/* call-outs on the exploded assembly */
.callout-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.callout-lines polyline { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.callout-lines polyline.frame { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: none; }
.callout-lines .dot { fill: var(--orange); }
.callout-lines .ring { fill: none; stroke: var(--orange); stroke-width: 1.4; opacity: 0; }
.callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.callout { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 40px 1fr; width: 176px; border: 1px solid var(--ink); background: rgba(228, 228, 225, 0.92); font: 500 10px/1.35 var(--mono); text-transform: uppercase; color: var(--ink-2); opacity: 0; will-change: transform, opacity; }
.callout > b { display: grid; place-items: center; border-right: 1px solid var(--ink); font-weight: 700; color: var(--ink); }
.callout > span { display: flex; flex-direction: column; padding: 6px 9px; font: 700 11px/1.25 var(--font); color: var(--ink); letter-spacing: 0.02em; }
.callout em { font: 500 10px/1.35 var(--mono); font-style: normal; color: var(--ink-2); letter-spacing: 0; }
.callout-done { width: 236px; }
.callout-done > b { background: var(--orange); color: var(--ink); }
/* technical drawings with a cast shadow (Wassily-poster style): the lines draw themselves, then the shadow falls */
.techdraw { margin: 0; }
.techdraw svg { display: block; overflow: visible; }
.td-lines { fill: none; stroke: var(--ink); stroke-width: var(--td-stroke, 3.4); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion .techdraw .td-lines { stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.15s; }
.js-motion .techdraw .td-shadow { opacity: 0; transition: opacity 1.6s ease 1.7s; }
.js-motion .techdraw.seen .td-lines { stroke-dashoffset: 0; }
.js-motion .techdraw.seen .td-shadow { opacity: 1; }
.method .techdraw { display: flex; align-items: flex-end; justify-content: center; height: 200px; margin: -2px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.method .techdraw svg { height: 100%; width: auto; max-width: 100%; }
/* --------------------------------------------------------------- the page's scrollbar (interface.js): the browser's is
   hidden; along the right edge lies a ruler (a hairline with a tick every tenth), its thumb and where you are, in %,
   always there, through every transition. Ink on the paper, light over the dark hero. Inner scrolls stay slim. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.page-scroll { --ps: var(--ink); position: fixed; z-index: 60; top: calc(var(--nav) + 14px); bottom: 16px; right: 0; width: 26px; touch-action: none; }
.nav-on-hero .page-scroll { --ps: #f1efea; }
.ps-track { position: absolute; top: 0; bottom: 0; right: 6px; width: 7px; opacity: 0.42; background: linear-gradient(var(--ps), var(--ps)) right / 1px 100% no-repeat, repeating-linear-gradient(to bottom, var(--ps) 0 1px, transparent 1px 10%) right / 7px 100% no-repeat; transition: opacity 0.3s ease; }
.ps-thumb { position: absolute; top: 0; right: 5px; width: 3px; min-height: 48px; background: var(--ps); cursor: grab; transition: width 0.25s var(--ease-out), right 0.25s var(--ease-out), background-color 0.35s ease; }
.ps-thumb::before { content: ""; position: absolute; inset: 0 -8px; }
.ps-label { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--ps); white-space: nowrap; pointer-events: none; }
.page-scroll:hover .ps-track { opacity: 0.6; }
.page-scroll:hover .ps-thumb, .page-scroll.is-drag .ps-thumb { width: 5px; right: 4px; }
.page-scroll.is-drag .ps-thumb { cursor: grabbing; }
@media (hover: none) {
  .page-scroll { width: 10px; pointer-events: none; }
  .ps-label { display: none; }
}
.site-menu, #project-dialog, .dialog-copy { scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, 0.28) transparent; }
/* --------------------------------------------------------------- navigation: open, an index in the site's idiom (numbered
   words, hairline boxes with square corners, the orange square holding the arrow), light over the dark hero */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav); padding: 0 var(--g); display: flex; align-items: center; color: var(--ink); background: rgba(228, 228, 225, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); --nav-line: rgba(17, 17, 17, 0.3); }
.site-nav { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, -webkit-backdrop-filter 0.45s ease, backdrop-filter 0.45s ease; }
.nav-on-hero .site-nav, .nav-on-retail .site-nav { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* over the dark hero its words and lines turn light; over the orange store its orange turns to ink */
.nav-on-hero .site-nav { color: #f1efea; --nav-line: rgba(241, 239, 234, 0.4); }
.nav-on-retail .site-nav { --nav-line: rgba(20, 10, 5, 0.35); }
.wordmark { display: flex; align-items: center; height: 40px; }
.logo { display: block; width: auto; height: 100%; aspect-ratio: 1569 / 249; fill: currentColor; }
.wordmark > .logo { height: 15px; }
.nav-descriptor { display: flex; align-items: center; height: 26px; margin-left: clamp(16px, 1.8vw, 26px); padding-left: clamp(16px, 1.8vw, 26px); border-left: 1px solid var(--nav-line); font: 500 11px/1.25 var(--font); opacity: 0.66; transition: border-color 0.45s ease; }
.site-nav > nav { display: flex; gap: clamp(22px, 2.6vw, 44px); margin-left: auto; counter-reset: navi; }
.site-nav > nav > a { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.site-nav > nav > a::before { counter-increment: navi; content: counter(navi, decimal-leading-zero); font: 500 10px var(--mono); letter-spacing: 0; opacity: 0.55; }
.site-nav > nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--ease-out); }
.site-nav > nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav sup { font: 500 9px var(--mono); margin-left: 2px; vertical-align: super; letter-spacing: 0; }
.nav-contact { display: flex; align-items: center; gap: 12px; height: 38px; margin-left: clamp(22px, 2.6vw, 44px); padding: 0 5px 0 16px; border: 1px solid var(--nav-line); border-radius: var(--r); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; transition: border-color 0.45s ease; }
.nav-contact > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-in); background: var(--orange); color: #141210; transition: background-color 0.45s ease, color 0.45s ease; }
.nav-contact:hover { border-color: currentColor; }
.nav-on-retail .nav-contact > span { background: var(--ink); color: var(--paper); }
.menu-button { display: flex; align-items: center; gap: 10px; height: 38px; margin-left: 12px; padding: 0; border: 0; background: none; color: inherit; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; }
.menu-button > span { position: relative; display: block; width: 38px; height: 38px; border: 1px solid var(--nav-line); border-radius: var(--r); transition: border-color 0.45s ease; }
.menu-button > span::before, .menu-button > span::after { content: ""; position: absolute; inset: 0; width: 13px; height: 1px; margin: auto; background: currentColor; transition: transform 0.55s var(--ease-out); }
.menu-button > span::after { transform: rotate(90deg); }
.menu-button:hover > span { border-color: currentColor; }
.menu-button[aria-expanded="true"] > span::before { transform: rotate(135deg); }
.menu-button[aria-expanded="true"] > span::after { transform: rotate(225deg); }

/* --------------------------------------------------------------- hero: VINCO, the display in a dark room */
/* the hero: one screen; scrolling in, the curtain comes up and the page cuts to the process (hero.js) */
.editorial-hero { --hero-ink: #f1efea; --hero-soft: rgba(241, 239, 234, 0.62); --hero-word: #cfcdc7; --hero-hold: 0px; position: relative; height: calc(max(100svh, 680px) + var(--hero-hold)); overflow: clip; color: var(--hero-ink); background: #151514; }
/* a dark room: light falling on the middle of the wall, the floor and the corners going to black, a little grain */
.hero-pin { --lw: calc(var(--pw, 100vw) - 2 * var(--g)); position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; background: radial-gradient(52% 46% at 50% 44%, rgba(86, 84, 80, 0.55), rgba(86, 84, 80, 0) 72%), radial-gradient(120% 70% at 50% 112%, #0b0b0a 18%, rgba(11, 11, 10, 0) 62%), linear-gradient(180deg, #232321 0%, #1a1a19 55%, #121211 100%); }
.hero-pin::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px; }
.hero-pin::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
/* the name, the logo right across the top, exactly as wide as the menu; the display stands in front */
.hero-word { position: absolute; z-index: 1; left: var(--g); top: calc(var(--nav) + 3.4svh); width: var(--lw); margin: 0; color: var(--hero-word); pointer-events: none; user-select: none; }
.hw-text { display: block; width: 100%; height: auto; aspect-ratio: 1569 / 249; fill: currentColor; }
/* scrolling in, the words go out of focus and a white curtain comes up in steps, the right side first, over
   everything, the display too: once started it plays through by itself (hero.js adds .is-out), and goes back down at the top */
.hero-curtain { position: absolute; inset: 0; z-index: 5; display: flex; pointer-events: none; }
.hero-curtain > i { flex: 1 0 0; margin-right: -1px; background: var(--paper); transform: translateY(101%); transition: transform 0.95s cubic-bezier(0.65, 0, 0.25, 1); transition-delay: calc(var(--j) * 55ms); }
.hero-curtain > i:last-child { margin-right: 0; }
.is-out .hero-curtain > i { transform: none; transition-duration: 1.05s; transition-delay: calc((6 - var(--j)) * 75ms + 0.12s); }
.hero-word, .hero-copy, .hero-aside { transition: opacity 0.6s ease 0.05s, filter 0.8s ease, translate 0.9s var(--ease-out); }
.is-out .hero-word, .is-out .hero-copy, .is-out .hero-aside { opacity: 0; filter: blur(16px); translate: 0 -22px; pointer-events: none; }
/* the photographed display, big in the middle, its foot going off the bottom of the screen and into the dark (scene.js
   moves it with the scroll, into the Arco's 3D model) */
.hero-displays { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hd { position: absolute; margin: 0; transform-origin: 50% 100%; transform: translateX(-50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); }
.hd > img { display: block; width: auto; height: 100%; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); -webkit-box-reflect: below 1px linear-gradient(transparent 90%, rgba(255, 255, 255, 0.08)); }
.hd::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -10%; bottom: -2.2%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); }
/* the mouse over the display (hero.js): it comes apart into its exploded view, drawn on a canvas over the picture while
   it opens and stands open (the picture hidden under it meanwhile), and back together */
.hd > .hd-explode { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }
.hd1.is-open > .hd-explode { visibility: visible; }
.hd1.is-open > img { visibility: hidden; }
.hd1 { left: 50%; top: calc(var(--nav) + 3.4svh + var(--lw) * 0.035); height: calc(max(100svh, 680px) * 1.28); }
/* the line, bottom left, the name in orange */
.hero-copy { position: absolute; z-index: 4; left: var(--g); bottom: 7.5%; width: min(52vw, 980px); }
/* the dark the display stands in, across the foot of the screen, so the line reads over it (it goes with the line) */
.hero-copy::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--g)); width: var(--pw, 100vw); bottom: calc(-0.075 * max(100svh, 680px)); height: calc(0.46 * max(100svh, 680px)); pointer-events: none; background: linear-gradient(180deg, rgba(18, 18, 17, 0) 0%, rgba(18, 18, 17, 0.5) 42%, rgba(18, 18, 17, 0.9) 100%); }
.hero-copy h1 { font: 500 clamp(28px, min(3.5vw, 6.4svh), 66px)/1.04 var(--font); letter-spacing: -0.035em; color: var(--hero-ink); }
.hero-copy h1 em { font-style: normal; color: var(--orange); }
/* bottom right: a short note and the way to the work */
.hero-aside { position: absolute; z-index: 4; right: var(--g); bottom: 7.5%; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(14px, 2.4svh, 24px); text-align: right; }
.hero-aside > p { font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-soft); }
.hero-cta { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 5px 0 16px; border: 1px solid rgba(241, 239, 234, 0.45); border-radius: var(--r); color: var(--hero-ink); font: 700 11px var(--font); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.hero-cta > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-in); background: var(--orange); color: #141210; }
.hero-cta:hover { background: var(--hero-ink); border-color: var(--hero-ink); color: #141210; }
/* the 3D: one fixed canvas for the Arco's way down to the process (over the photograph, under the menu) */
.hero-canvas { position: fixed; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-copy, .hero-word, .hero-aside { will-change: transform, opacity, filter; }

/* --------------------------------------------------------------- process: one stage */
.experience { position: relative; height: 1435svh; --retail-0: #e8561b; --retail-1: #e2511a; --retail-2: #ec6024; --retail-ink: #140a05; --retail-note: rgba(255, 237, 220, 0.92); }
.scene-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: var(--paper); isolation: isolate; transform: translateZ(0); }
#atelier-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.three-ready #atelier-canvas { opacity: 1; }
.scene-top { position: absolute; top: calc(var(--nav) + 26px); left: var(--g); right: var(--g); z-index: 2; display: flex; justify-content: space-between; gap: 20px; }
.scene-number { position: absolute; right: var(--g); top: calc(var(--nav) + 78px); z-index: 2; display: flex; align-items: flex-start; gap: 8px; }
.scene-number > span { font: 500 clamp(72px, 9vw, 170px)/0.82 var(--display); letter-spacing: -0.05em; }
#scene-count { display: inline-grid; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
#scene-count > span { grid-area: 1 / 1; }
.scene-number small { font: 500 13px var(--mono); color: var(--mute); margin-top: 6px; }
.scene-copy { position: absolute; top: 40%; left: var(--g); width: 38%; max-width: 640px; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; }
.scene-copy.right { left: auto; right: var(--g); width: 31%; }
.scene-copy.is-current { opacity: 1; visibility: visible; pointer-events: auto; }
.scene-copy.copy-out { opacity: 1; visibility: visible; }
.scene-copy .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.scene-copy .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--orange); }
.scene-copy h2 { font: 500 clamp(42px, 4.6vw, 86px)/0.96 var(--display); letter-spacing: -0.04em; }
.scene-copy h2 em { color: var(--mute); }
.scene-description { max-width: 34ch; margin-top: 22px; font-size: clamp(15px, 1.12vw, 18px); line-height: 1.5; color: var(--ink-2); }
.scene-footer { position: absolute; left: var(--g); right: var(--g); bottom: 26px; z-index: 4; display: flex; align-items: center; gap: 16px; }
.scene-chapters { display: flex; flex: 1; }
.scene-chapters button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; margin-left: -1px; border: 1px solid var(--ink); background: transparent; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); transition: background 0.25s, color 0.25s; }
.scene-chapters button:first-child { margin-left: 0; }
.scene-chapters button > span { font: 500 10px var(--mono); color: var(--mute); }
.scene-chapters button[aria-current="step"] { background: var(--ink); color: var(--paper); }
.scene-chapters button[aria-current="step"] > span { color: var(--orange); }
.process-portfolio { display: flex; align-items: center; height: 36px; padding: 0 4px 0 14px; gap: 12px; border: 1px solid var(--ink); border-radius: var(--r); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.process-portfolio > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-in); background: var(--orange); color: var(--ink); }
.process-portfolio:hover { background-color: var(--ink); color: var(--paper); }
.scene-progress { position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--hair); pointer-events: none; }
.scene-progress i { display: block; width: 100%; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }
/* technical drawing over the cutting plan (projected from the 3D plan every frame) */
.dieline { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dl-cut line { stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; }
.dl-crease line { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 6 4; }
.dl-slot polygon { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.dl-dim line { stroke: var(--orange); stroke-width: 0.9; }
.dl-dim line.ext { stroke-width: 0.6; }
.dl-dim line.tick { stroke-width: 1.4; }
.dl-dim text { font: 500 10px var(--mono); fill: var(--ink); letter-spacing: 0.02em; }
.dl-label circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.dl-label text { font: 600 9px var(--mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.dieline-legend { position: absolute; left: var(--g); bottom: 92px; z-index: 2; width: 204px; border: 1px solid var(--ink); background: rgba(228, 228, 225, 0.88); font: 500 10px/1.45 var(--mono); text-transform: uppercase; color: var(--ink-2); opacity: 0; pointer-events: none; }
.dieline-legend p { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid var(--ink); }
.dieline-legend p b { font: 700 11px var(--font); color: var(--ink); letter-spacing: 0.02em; }
.dieline-legend ul, .dieline-legend ol { list-style: none; margin: 0; padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.dieline-legend ul { border-bottom: 1px solid var(--ink); }
.dieline-legend li { display: flex; align-items: center; gap: 8px; }
.dieline-legend i { flex: none; width: 18px; height: 0; border-top: 1.3px solid var(--ink); }
.dieline-legend i.crease { border-top: 1.6px dashed var(--orange); }
.dieline-legend i.slot { width: 14px; height: 6px; border: 1px solid var(--ink); }
.dieline-legend i.dim { border-top-color: var(--orange); }
.dieline-legend ol b { min-width: 24px; font-weight: 600; color: var(--ink); }
.in-retail .dieline-legend { display: none; }
/* store: a line drawing of a shop, drawn around the display, which is the only thing in colour */
.retail-backdrop { position: absolute; inset: 0; opacity: 0; overflow: hidden; will-change: opacity; }
/* the store: a technical drawing projected with the stage camera (store.js); it draws itself as the display
   arrives, the floor first, then the gondola, its shelves and products, then the cotas */
/* the store scene sits on the hero's orange over the whole viewport (opened as a circle from the display, see scene.js) */
.retail-backdrop { background: linear-gradient(180deg, var(--retail-0) 0%, var(--retail-1) 72%, var(--retail-2) 100%); }
.store-ground stop:nth-child(1) { stop-color: var(--retail-0); }
.store-ground stop:nth-child(2) { stop-color: var(--retail-1); }
.store-ground stop:nth-child(3) { stop-color: var(--retail-2); }
.store-plan { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.store-plan path { fill: none; stroke: var(--retail-ink); stroke-width: 0.9px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--draw, 0) * 1.8 - var(--o, 0) * 0.8, 1)); }
.store-plan .room { stroke-width: 1.3px; }
/* on the orange the fine lines need full ink and a little more weight to stay crisp */
.store-plan .fine, .store-plan .prod { stroke-width: 0.8px; }
.store-plan .tile { stroke-width: 0.6px; stroke-opacity: 0.32; }
.store-plan .solid { fill: url(#store-ground); fill-opacity: clamp(0, calc(var(--draw, 0) * 2.4 - var(--o, 0) * 1.4), 1); }
.store-plan .store-shadow { fill: var(--retail-ink); stroke: none; opacity: clamp(0, calc((var(--draw, 0) - 0.5) * 0.5), 0.24); }
.store-dim path { stroke: var(--retail-note); stroke-width: 0.8px; }
.store-dim text { fill: var(--retail-note); font: 500 10.5px var(--mono); letter-spacing: 0.06em; text-anchor: middle; dominant-baseline: central; opacity: clamp(0, calc((var(--draw, 0) - 0.8) * 7), 1); }
.in-retail .scene-number, .in-retail .scene-top .label.right { opacity: 0; transition: opacity 0.4s; }
.scene-copy h2 em, .scene-copy .eyebrow::before, .scene-copy .spec, .scene-description, .scene-top .label, .scene-chapters button, .scene-chapters button > span, .process-portfolio, .scene-progress, .scene-progress i { transition: color 0.5s ease, background-color 0.5s ease; }
.in-retail .scene-copy h2 em { color: rgb(53 53 53 / 92%); }
.in-retail .scene-copy .eyebrow::before, .in-retail .scene-progress i { background: var(--retail-ink); }
.in-retail .scene-copy .spec { background: transparent; color: var(--retail-ink); }
.in-retail .scene-description, .in-retail .scene-top .label { color: var(--retail-ink); }
.in-retail .scene-chapters button, .in-retail .process-portfolio { background-color: transparent; }
.in-retail .scene-chapters button > span { color: rgba(20, 10, 5, 0.62); }
.in-retail .scene-chapters button[aria-current="step"] { background-color: var(--retail-ink); }
.in-retail .scene-chapters button[aria-current="step"] > span { color: var(--retail-0); }
.in-retail .scene-progress { background: rgba(20, 10, 5, 0.18); }
.process-portfolio > span { transition: background-color 0.5s ease, color 0.5s ease; }
.in-retail .process-portfolio > span { background: var(--retail-ink); color: var(--paper); }
.in-retail .process-portfolio:hover { background-color: var(--retail-ink); color: var(--paper); }
.in-retail .process-portfolio:hover > span { background: var(--paper); color: var(--retail-ink); }
.three-failed .experience { height: 100svh; }
.three-failed .typologies { margin-top: 0; }
.three-failed .scene-copy:not([data-scene="0"]) { display: none; }
.three-failed .scene-copy[data-scene="0"] { opacity: 1; visibility: visible; transform: none; }
.three-failed .scene-chapters { display: none; }

/* --------------------------------------------------------------- typologies */
/* the typologies come up over the store, which stays pinned under them (the last screen of .experience) */
.typologies { position: relative; z-index: 2; height: 320svh; margin-top: -100svh; background: var(--paper); }
.type-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; transform: translateZ(0); }
.type-stage > .section-header { position: absolute; top: calc(var(--nav) + 26px); left: var(--g); right: var(--g); z-index: 2; }
.type-figures { position: absolute; inset: 0; pointer-events: none; }
.type-fig { position: absolute; margin: 0; visibility: hidden; transform-origin: 50% 100%; will-change: transform; }
/* the print rises from the floor up, through the drawing */
.type-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; -webkit-mask-image: linear-gradient(to top, #000 calc(var(--fill, 1) * 130% - 30%), transparent calc(var(--fill, 1) * 130%)); mask-image: linear-gradient(to top, #000 calc(var(--fill, 1) * 130% - 30%), transparent calc(var(--fill, 1) * 130%)); }
.type-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: var(--lines, 0); }
/* stroke widths are given in drawing units (--sw = one screen pixel), so the dash that draws the line stays exact */
.type-lines path { fill: none; stroke: var(--ink); stroke-width: calc(var(--sw, 2) * 0.75px); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--draw, 0) * 1.7 - var(--o, 0) * 0.7, 1)); }
.type-lines path.o { stroke-width: calc(var(--sw, 2) * 1.15px); }
.type-copy { position: absolute; left: var(--g); top: 31%; width: 40%; z-index: 2; }
.type-copy h2 { font: 500 clamp(84px, 11.5vw, 216px)/0.9 var(--display); letter-spacing: -0.05em; }
.type-copy > p { max-width: 26ch; margin-top: 24px; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.type-index { position: absolute; left: var(--g); right: var(--g); bottom: 30px; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.type-index button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; margin-left: -1px; border: 1px solid var(--ink); background: transparent; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; text-align: left; transition: background 0.25s, color 0.25s; }
.type-index button:first-child { margin-left: 0; }
.type-index button > span { font: 500 10px var(--mono); color: var(--mute); }
.type-index button[aria-current="step"] { background: var(--ink); color: var(--paper); }
.type-index button[aria-current="step"] > span { color: var(--orange); }
#type-count { font: 500 11px var(--mono); }

/* --------------------------------------------------------------- collection: catalogue */
.collection { position: relative; padding: 72px var(--g) 84px; background: var(--sheet); }
.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 56px 0 30px; }
.collection-heading h2 { font: 500 clamp(52px, 7.6vw, 140px)/0.92 var(--display); letter-spacing: -0.045em; white-space: nowrap; }
.collection-heading h2 sup { font-size: 0.26em; font-weight: 600; letter-spacing: 0; vertical-align: top; margin-left: 6px; position: relative; top: 0.25em; }
.collection-heading p { max-width: 32ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); padding-bottom: 6px; }
.catalog-toolbar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; margin-bottom: 14px; border-top: 1px solid var(--ink); }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 0; font-size: 13px; }
.catalog-filters button { border: 0; background: none; padding: 4px 0; color: var(--mute); }
.catalog-filters button:not(:last-child)::after { content: ","; margin-right: 8px; color: var(--mute); }
.catalog-filters button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.catalog-filters button:hover { color: var(--ink); }
.catalog-count { font: 500 11px var(--mono); color: var(--mute); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
.catalog-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.catalog-image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: var(--r); background: #e6e6e3; }
.catalog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.item-code { position: absolute; left: 12px; top: 12px; font: 500 10px var(--mono); color: var(--ink-2); }
.item-plus { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 36px; height: 36px; background: var(--ink); color: var(--paper); transition: background 0.25s, color 0.25s; }
.catalog-open:hover .item-plus { background: var(--orange); color: var(--ink); }
/* on hover the study's sheet comes up from the foot of its picture through a mask (its measures, its lead time), its
   words after it, and the arrow turns in its square */
.item-plus { z-index: 2; }
.item-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 18px; height: 36px; padding: 0 50px 0 12px; background: var(--ink); color: var(--sheet); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease-out); }
.item-sheet > span { transform: translateY(110%); transition: transform 0.55s var(--ease-out); }
.item-sheet > span:last-child { margin-left: auto; color: var(--orange); }
.catalog-open:hover .item-sheet, .catalog-open:focus-visible .item-sheet { clip-path: inset(0 0 0 0); }
.catalog-open:hover .item-sheet > span, .catalog-open:focus-visible .item-sheet > span { transform: none; transition-delay: calc(var(--j, 0) * 60ms + 90ms); }
@media (hover: none) { .item-sheet { display: none; } }
.catalog-caption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; margin-top: 6px; border: 1px solid var(--ink); font-size: 11px; }
.catalog-caption > strong { padding: 8px 10px; font-weight: 700; letter-spacing: 0.03em; }
.catalog-caption > em { padding: 8px 4px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-caption > span { padding: 8px 12px; background: var(--ink); color: var(--sheet); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.catalog-note { display: flex; justify-content: space-between; gap: 30px; margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--hair); font: 500 11px/1.6 var(--mono); color: var(--mute); }

/* --------------------------------------------------------------- material: technical sheet */
.material-lab { padding: 72px var(--g) 90px; background: var(--paper); }
.material-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 56px 0 36px; }
.material-heading h2 { font: 500 clamp(48px, 6.4vw, 120px)/0.94 var(--display); letter-spacing: -0.04em; }
.material-heading h2 em { color: var(--mute); }
.material-heading p { max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); padding-bottom: 6px; }
.material-sheet { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px); border: 1px solid var(--ink); background: var(--sheet); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.35); }
.material-view { position: relative; min-height: 640px; overflow: hidden; border-radius: calc(var(--r-box) - 1px) 0 0 calc(var(--r-box) - 1px); background: linear-gradient(rgba(17, 17, 17, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(17, 17, 17, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, var(--sheet); }
.material-leaders { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.material-leaders polyline { fill: none; stroke: var(--orange); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.material-leaders circle { fill: var(--orange); }
.material-leaders circle.ring { fill: none; stroke: var(--orange); stroke-width: 1; opacity: 0.45; }
.material-notes .note { z-index: 2; }
.material-ready .material-notes .note > i::after { display: none; }
.js-motion .rv-sheet .material-leaders polyline { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease 0.9s; }
.js-motion .rv-sheet .material-leaders circle { opacity: 0; transition: opacity 0.6s ease 1.7s; }
.js-motion .rv-sheet.seen .material-leaders polyline { stroke-dashoffset: 0; }
.js-motion .rv-sheet.seen .material-leaders circle { opacity: 1; }
.js-motion .rv-sheet.seen .material-leaders circle.ring { opacity: 0.45; }
.material-view canvas, .material-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.material-fallback { opacity: 0; transition: opacity 0.7s; }
.three-failed .material-fallback { opacity: 1; }
.material-ready .material-fallback { opacity: 0; pointer-events: none; }
.material-coordinate { position: absolute; left: 22px; bottom: 20px; font: 500 10px var(--mono); color: var(--ink-2); text-transform: uppercase; }
.material-cross { position: absolute; left: 20px; top: 12px; font: 300 30px var(--font); color: var(--ink); }
/* orange call-outs, as on an architectural detail */
.material-notes .note { position: absolute; display: block; padding-left: 14px; font: 500 10px/1.4 var(--mono); text-transform: uppercase; color: var(--orange-ink); }
.material-notes .note > i { position: absolute; left: 0; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.material-notes .note > i::after { content: ""; position: absolute; top: 3px; height: 1px; background: var(--orange); transform: rotate(var(--rot, 0deg)) scaleX(var(--draw, 1)); }
.material-notes .n1 { left: 7%; top: 16%; padding: 0 14px 0 0; text-align: right; }
.material-notes .n1 > i { left: auto; right: 0; }
.material-notes .n1 > i::after { left: 7px; width: 80px; transform-origin: left; --rot: 34deg; }
.material-notes .n2 { right: 6%; top: 60%; }
.material-notes .n2 > i::after { right: 7px; width: 96px; transform-origin: right; --rot: -26deg; }
.material-notes .n3 { left: 10%; bottom: 19%; padding: 0 14px 0 0; text-align: right; }
.material-notes .n3 > i { left: auto; right: 0; }
.material-notes .n3 > i::after { left: 7px; width: 100px; transform-origin: left; --rot: -24deg; }
/* title block */
.material-info { display: flex; flex-direction: column; border-left: 1px solid var(--ink); font-size: 12px; }
.tb-row { padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.tb-label { display: block; margin-bottom: 8px; font: 500 10px var(--mono); color: var(--mute); text-transform: uppercase; }
.tb-head { display: flex; justify-content: space-between; font: 500 10px var(--mono); text-transform: uppercase; }
.tb-title { display: flex; flex-direction: column; gap: 2px; padding-block: 18px; }
.tb-title > b { font: 500 34px/1 var(--display); letter-spacing: -0.035em; }
.tb-title > span { color: var(--ink-2); }
.material-options { display: grid; }
.material-options button { display: flex; align-items: center; gap: 12px; padding: 9px 0; border: 0; border-top: 1px solid var(--hair); background: none; font: 600 18px var(--font); letter-spacing: -0.03em; color: var(--mute); text-align: left; }
.material-options button:first-child { border-top: 0; }
.material-options button > span { font: 500 10px var(--mono); letter-spacing: 0; }
.material-options button > i { margin-left: auto; font-style: normal; font-size: 14px; }
.material-options button[aria-pressed="true"] { color: var(--ink); }
.material-options button[aria-pressed="true"] > span, .material-options button[aria-pressed="true"] > i { color: var(--orange-ink); }
.material-description h3 { margin-bottom: 8px; font-size: 18px; letter-spacing: -0.03em; }
.material-description p { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.material-specs { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 10px; font: 500 10px/1.4 var(--mono); text-transform: uppercase; color: var(--mute); }
.material-specs > span:nth-child(even) { color: var(--ink); }
.tb-stamp { flex: 1; display: grid; place-items: center; min-height: 120px; border-bottom: 1px solid var(--ink); }
.tb-stamp { font: 600 13px var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-ink); writing-mode: vertical-rl; transform: rotate(180deg); }
.tb-foot { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 0; }
.tb-foot > b { font: 500 46px/0.9 var(--display); letter-spacing: -0.035em; }

/* --------------------------------------------------------------- studio: four cards */
.studio-section { padding: 72px var(--g) 90px; background: var(--paper); }
.studio-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 6vw; margin: 56px 0 40px; }
.studio-intro h2 { font: 500 clamp(42px, 5vw, 92px)/0.96 var(--display); letter-spacing: -0.04em; }
.studio-intro h2 em { color: var(--mute); }
.studio-intro > p { max-width: 40ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.studio-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); background: var(--sheet); }
.method { display: flex; flex-direction: column; min-height: 360px; padding: 22px 22px 18px; border-left: 1px solid var(--hair); }
.method:first-child { border-left: 0; }
.method-n { font: 500 11px var(--mono); color: var(--mute); }
.method h3 { margin-top: 18px; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; letter-spacing: -0.035em; }
.method .tag { align-self: flex-start; margin-top: 16px; padding: 3px 8px; border: 1px solid var(--ink); font-size: 11px; }
.method p { margin-top: 22px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.method footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 22px; font-size: 11px; color: var(--mute); }
.method footer b { display: block; color: var(--ink); font-weight: 600; }
.method:hover { background: #fff; }

/* --------------------------------------------------------------- contact: orange panel */
.contact-section { padding: 30px var(--g) 90px; background: var(--paper); overflow-x: clip; }
.contact-banner { position: relative; overflow: hidden; padding: clamp(28px, 3.4vw, 56px); background: var(--orange); color: var(--ink); }
.contact-banner .label, .contact-banner .label > b { color: var(--ink); }
.contact-banner h2 { position: relative; z-index: 1; max-width: 12ch; margin-top: clamp(40px, 7vw, 110px); font: 500 clamp(46px, 7vw, 128px)/0.94 var(--display); letter-spacing: -0.04em; }
.contact-banner > p { position: relative; z-index: 1; max-width: 44ch; margin-top: 28px; font-size: 16px; line-height: 1.5; }
/* print crop marks at the four corners: the banner reads as a sheet ready for the press */
.contact-banner .pin { position: absolute; width: 22px; height: 22px; border: 0 solid var(--ink); }
.contact-banner .pin.tl { top: 14px; left: 14px; border-width: 1.5px 0 0 1.5px; }
.contact-banner .pin.tr { top: 14px; right: 14px; border-width: 1.5px 1.5px 0 0; }
.contact-banner .pin.bl { bottom: 14px; left: 14px; border-width: 0 0 1.5px 1.5px; }
.contact-banner .pin.br { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; }
.contact-banner .label { padding-left: 14px; }
/* a flat sheet that folds into a counter display: cut edges solid, creases (the vincos) dashed until folded */
.fold-figure { position: absolute; z-index: 0; right: clamp(10px, 3vw, 60px); top: 7%; width: min(52%, 760px); height: 86%; overflow: visible; }
.fold-figure line { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fold-figure line.crease { stroke-dasharray: 6 5; }
.fold-figure line.light { stroke: #2a2a2a; }
.fold-print { font: 700 96px var(--font); letter-spacing: -0.06em; fill: var(--ink); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 6vw; margin-top: 46px; }
.contact-aside > p { max-width: 34ch; margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.contact-data { margin: 30px 0 0; border-top: 1px solid var(--ink); }
.contact-data > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.contact-data dt { font: 500 10px/1.8 var(--mono); text-transform: uppercase; color: var(--mute); }
.contact-data dd { margin: 0; }
.contact-form { margin: 0; padding: 0; min-width: 0; }
.form-heading { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font: 500 22px var(--display); letter-spacing: -0.02em; }
.form-heading > span:last-child { align-self: center; font: 500 10px var(--mono); letter-spacing: 0; color: var(--mute); }
.chips { margin: 22px 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 12px; font: 500 10px var(--mono); text-transform: uppercase; color: var(--mute); }
.chips label { display: inline-block; margin: 0 -1px 8px 0; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 14px; border: 1px solid var(--ink); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; transition: background 0.2s, color 0.2s; }
.chips label:hover span { background: var(--sheet); }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; min-width: 0; }
.field > span { font: 500 10px var(--mono); text-transform: uppercase; color: var(--mute); }
.field input, .field textarea { width: 100%; padding: 12px 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--sheet); font-size: 15px; outline: none; resize: vertical; transition: background 0.2s, border-color 0.2s; }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--orange); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c22; background: #fff3ef; }
.field ::placeholder { color: #9a9a95; }
.form-help { max-width: 60ch; font-size: 12px; line-height: 1.5; color: var(--mute); }
.form-foot { margin-top: 18px; }
.form-foot button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 52px; padding: 0 7px 0 18px; border: 0; border-radius: var(--r); background: var(--ink); color: #fff; font: 700 12px var(--font); text-transform: uppercase; letter-spacing: 0.04em; transition: background-color 0.35s ease; }
.form-foot button:hover { background: #2b2926; }
.form-foot button > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-in); background: var(--orange); color: var(--ink); }
.form-status { margin-top: 14px; font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------------------- footer */
.site-footer { padding: clamp(36px, 5vw, 72px) var(--g) 22px; background: var(--paper); border-top: 1px solid var(--ink); }
.sf-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(24px, 4vw, 64px); }
.sf-logo { display: block; }
.sf-logo > .logo { height: clamp(32px, 3.6vw, 60px); }
.sf-tag { max-width: 30ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sf-nav { display: flex; flex-wrap: wrap; }
.sf-nav a { display: flex; align-items: center; height: 34px; padding: 0 14px; margin-left: -1px; border: 1px solid var(--ink); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; transition: background 0.25s, color 0.25s; }
.sf-nav a:hover { background: var(--ink); color: var(--paper); }
.sf-linear { margin-top: clamp(34px, 4.5vw, 64px); }
.sf-caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 14px; }
/* the linear: technical drawings of the typologies to one scale (--k px a millimetre), on one floor and against one
   ruler; while the footer holds at the foot of the screen they pass from right to left with the scroll (contact.js) */
.sf-sticky { position: sticky; }
.sf-stage { --k: clamp(0.1px, 0.0128vw, 0.19px); position: relative; height: calc(1960 * var(--k)); margin-right: calc(-1 * var(--g)); overflow: hidden; }
.sf-track { position: absolute; left: 84px; bottom: 0; display: flex; align-items: flex-end; gap: clamp(40px, 5.5vw, 96px); padding-right: var(--g); will-change: transform; }
.sf-d { display: block; flex: none; width: auto; max-width: none; height: calc(var(--mm) * var(--k)); }
.sf-grid i { position: absolute; left: 56px; right: 0; bottom: calc(var(--mm) * var(--k)); height: 1px; background: repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.18) 0 4px, transparent 4px 9px); }
.sf-ruler { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 64px; background: linear-gradient(90deg, var(--paper) 78%, rgba(228, 228, 225, 0)); font: 500 9px/1 var(--mono); color: var(--ink-2); }
.sf-ruler::before { content: ""; position: absolute; left: 50px; bottom: 0; width: 1px; height: calc(1800 * var(--k)); background: var(--ink); }
.sf-ruler i { position: absolute; right: 20px; bottom: calc(var(--mm) * var(--k)); transform: translateY(50%); font-style: normal; white-space: nowrap; }
.sf-ruler i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 5px; height: 1px; background: var(--ink); }
.sf-ruler i:last-child { transform: translateY(-3px); }
.sf-ruler i:last-child::after { top: auto; bottom: -3px; }
.sf-floor { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.sf-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(36px, 5vw, 70px); padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); }
.sf-bottom a:hover, .sf-nav a:focus-visible { color: var(--orange-ink); }

/* --------------------------------------------------------------- project dialog */
#project-dialog { width: min(1160px, 94vw); height: min(88svh, 800px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); overflow: hidden; }
#project-dialog[open] { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
#project-dialog::backdrop { background: rgba(17, 17, 17, 0.55); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; right: 14px; top: 14px; z-index: 3; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r); background: var(--ink); color: var(--paper); transition: background-color 0.3s ease, color 0.3s ease; }
.dialog-close::before, .dialog-close::after { content: ""; position: absolute; inset: 0; width: 14px; height: 1.5px; margin: auto; background: currentColor; transform: rotate(45deg); transition: transform 0.55s var(--ease-out); }
.dialog-close::after { transform: rotate(-45deg); }
.dialog-close:hover { background: var(--orange); color: var(--ink); }
.dialog-close:hover::before { transform: rotate(135deg); }
.dialog-close:hover::after { transform: rotate(45deg); }
.dialog-image { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #dfdfdf; border-right: 1px solid var(--ink); }
.dialog-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dialog-code { position: absolute; left: 14px; top: 12px; font: 500 10px var(--mono); color: var(--ink-2); }
/* the sheet scrolls on its own, never sideways */
.dialog-copy { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden auto; overscroll-behavior: contain; padding: 30px 34px 26px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 48px; }
.dialog-type { padding: 5px 9px; border-radius: var(--r-in); background: var(--ink); color: var(--paper); font: 700 10px var(--font); text-transform: uppercase; letter-spacing: 0.04em; }
.dialog-copy h2 { margin: 22px 0 8px; font: 500 clamp(46px, 5.2vw, 76px)/0.92 var(--display); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.dialog-tagline { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.dialog-description { max-width: 48ch; margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.dialog-dims { margin-top: 24px; }
.dialog-dims ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.dialog-dims li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 10px 9px; border-left: 1px solid var(--ink); }
.dialog-dims li:first-child { border-left: 0; }
.dialog-dims li b { font: 500 32px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dialog-spec { margin-top: 12px; }
.dialog-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dialog-data > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border-top: 1px solid var(--hair); }
.dialog-data > div:nth-child(-n + 2) { border-top: 0; }
.dialog-data > div:nth-child(even) { border-left: 1px solid var(--hair); }
.dialog-data dt { color: var(--mute); }
.dialog-data dd { margin: 0; font: 600 12px/1.35 var(--font); text-transform: none; letter-spacing: 0; color: var(--ink); }
.dialog-block { margin-top: 24px; }
.dialog-block h3 { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.dialog-total { font: 500 10px var(--mono); color: var(--mute); }
.dialog-features ol { margin: 0; padding: 0; list-style: none; counter-reset: kp; }
.dialog-features li { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.45; counter-increment: kp; }
.dialog-features li::before { content: "0" counter(kp); font: 500 10px/2 var(--mono); color: var(--orange-ink); }
.dialog-timeline { display: flex; gap: 4px; padding-top: 12px; }
.dialog-step { display: flex; flex-direction: column; gap: 3px; min-width: 74px; flex-basis: 0; }
.dialog-step i { display: block; height: 6px; margin-bottom: 6px; background: var(--ink); transform-origin: left; }
.dialog-step:nth-child(3) i { background: var(--orange); }
.dialog-step b { font: 700 10px var(--font); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.dialog-step span { font: 500 10px var(--mono); color: var(--mute); }
.dialog-cta { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; margin-top: 28px; height: 46px; padding: 0 6px 0 14px; border: 1px solid var(--ink); border-radius: var(--r); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.dialog-cta > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-in); background: var(--orange); color: #141210; }
.dialog-cta { transition: background-color 0.35s ease, color 0.35s ease; }
.dialog-cta:hover { background: var(--ink); color: var(--sheet); }
.dialog-copy small { margin-top: 12px; font: 500 10px var(--mono); color: var(--mute); }

/* --------------------------------------------------------------- motion */
/* the poster assembles on load: photograph, title lines, the orange block wiping in, the rules drawing */
@keyframes rise { from { transform: translateY(108%); } }
@keyframes fadeUp { from { opacity: 0; translate: 0 16px; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes grow { from { scale: 0 1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes wordUp { from { transform: translateY(104%); } }
@keyframes wordClip { from, to { clip-path: inset(-40% -4% 0 -4%); } }
/* masks: a block comes up (or down) through a line at its own edge: it moves and is cut at that line together */
@keyframes maskUp { from { transform: translateY(100%); clip-path: inset(0 0 100% 0); } }
@keyframes maskDown { from { transform: translateY(-100%); clip-path: inset(100% 0 0 0); } }
@keyframes maskAway { to { transform: translateY(100%); clip-path: inset(0 0 100% 0); } }
@keyframes sink { to { transform: translateY(108%); } }
@keyframes displayUp { from { transform: translateY(100%); } }
@keyframes liftIn { from { translate: 0 100%; } }
@keyframes dropAway { to { translate: 0 100%; } }
@keyframes drawIn { from { transform: scaleX(0); } }
@keyframes maskOff { to { transform: translateY(-100%); clip-path: inset(100% 0 0 0); } }
@keyframes lift { to { transform: translateY(-108%); } }
@keyframes wipeUp { from { clip-path: inset(100% 0 0 0); translate: 0 var(--rise, 0.8em); } to { clip-path: inset(0 0 0 0); translate: 0 0; } }
@keyframes wipeDown { from { clip-path: inset(0 0 100% 0); translate: 0 -24px; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }
@keyframes wipeRight { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* arriving: slow, through masks, nothing fades. The menu comes down out of a line at its top, one item after the other */
  .site-nav .wordmark, .nav-descriptor, .site-nav > nav > a, .nav-contact, .menu-button { animation: maskDown 1.5s var(--ease-out) 0.2s backwards; }
  .nav-descriptor { animation-delay: 0.3s; }
  .site-nav > nav > a:nth-child(1) { animation-delay: 0.4s; }
  .site-nav > nav > a:nth-child(2) { animation-delay: 0.48s; }
  .site-nav > nav > a:nth-child(3) { animation-delay: 0.56s; }
  .site-nav > nav > a:nth-child(4) { animation-delay: 0.64s; }
  .nav-contact { animation-delay: 0.74s; }
  .menu-button { animation-delay: 0.82s; }
  .page-scroll { animation: maskDown 1.6s var(--ease-out) 0.9s backwards; }
  /* the name rises out of its own baseline; the line, then the note, out of theirs */
  .hero-word { animation: wordClip 2.2s linear 0.3s backwards; }
  .hw-text { animation: wordUp 2.2s var(--ease-out) 0.3s backwards; }
  .hero-copy .ln > span { animation: rise 1.8s var(--ease-out) 0.85s backwards; }
  .hero-copy .ln:nth-child(2) > span { animation-delay: 1s; }
  .hero-aside > p { animation: maskUp 1.6s var(--ease-out) 1.15s backwards; }
  .hero-aside > .hero-cta { animation: maskUp 1.6s var(--ease-out) 1.3s backwards; }
  /* the display: up from below the screen, with the name */
  .hd > img { animation: displayUp 2.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s backwards; }
  /* the process, cut to from under the curtain (hero.js .stage-in): the Arco comes up from below, the words through
     their masks; back up (.stage-out) they go back down into them */
  .stage-in #atelier-canvas { animation: liftIn 2s cubic-bezier(0.19, 1, 0.22, 1) 0.05s backwards; }
  .stage-in .scene-top .label { animation: maskUp 1.4s var(--ease-out) 0.25s backwards; }
  .stage-in .scene-top .label.right { animation-delay: 0.33s; }
  .stage-in .scene-number { animation: maskUp 1.6s var(--ease-out) 0.3s backwards; }
  .stage-in .scene-chapters button { animation: maskUp 1.2s var(--ease-out) 0.62s backwards; }
  .stage-in .scene-chapters button:nth-child(2) { animation-delay: 0.69s; }
  .stage-in .scene-chapters button:nth-child(3) { animation-delay: 0.76s; }
  .stage-in .scene-chapters button:nth-child(4) { animation-delay: 0.83s; }
  .stage-in .process-portfolio { animation: maskUp 1.2s var(--ease-out) 0.92s backwards; }
  .stage-in .scene-progress { transform-origin: left; animation: drawIn 1.6s var(--ease-out) 0.7s backwards; }
  .stage-out #atelier-canvas { animation: dropAway 0.7s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
  .stage-out .scene-top .label, .stage-out .scene-number, .js-motion .stage-out [data-scene="0"] .eyebrow, .js-motion .stage-out [data-scene="0"] .scene-description, .js-motion .stage-out [data-scene="0"] .spec, .stage-out .scene-chapters button, .stage-out .process-portfolio { animation: maskAway 0.55s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
  .js-motion .stage-out [data-scene="0"] .ln > span { animation: sink 0.55s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
  .stage-out .scene-progress { transform-origin: right; animation: drawIn 0.55s cubic-bezier(0.55, 0, 0.75, 0.2) reverse forwards; }
  #project-dialog[open] .dialog-copy > * { --rise: 26px; animation: wipeUp 1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 340ms); }
  #project-dialog[open] .dialog-step i { animation: grow 1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 120ms + 900ms); }
}
/* scroll reveals (only when motion is allowed: the class is added by script) */
.js-motion .rv-lines .ln > span { transform: translateY(108%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion .rv-lines.seen .ln > span { transform: none; }
.js-motion .rv-rule { border-top-color: transparent; }
.js-motion .rv-rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out); }
.js-motion .rv-rule:not(.seen) > * { clip-path: inset(100% 0 0 0); }
.js-motion .rv-rule.seen::before { transform: none; }
.js-motion .rv-rule.seen > * { animation: wipeUp 1.1s var(--ease-out) 0.25s backwards; }
.js-motion .rv-fade:not(.seen) { visibility: hidden; }
.js-motion .rv-fade.seen { animation: wipeUp 1.2s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 1ms + 120ms); }
.js-motion .rv-card:not(.seen) { visibility: hidden; }
.js-motion .rv-card.seen { --rise: 44px; animation: wipeUp 1.3s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.js-motion .catalog-item.rv-card .catalog-image { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out) calc(var(--i, 0) * 110ms + 60ms); }
.js-motion .catalog-item.rv-card .catalog-image img { scale: 1.16; transition: transform 1s var(--ease), scale 1.8s var(--ease-out) calc(var(--i, 0) * 110ms + 60ms); }
.js-motion .catalog-item.seen .catalog-image { clip-path: inset(0); }
.js-motion .catalog-item.seen .catalog-image img { scale: 1.1; }
.js-motion .rv-sheet:not(.seen) { visibility: hidden; }
.js-motion .rv-sheet.seen { animation: wipeDown 1.4s var(--ease-out) backwards; }
.js-motion .rv-sheet:not(.seen) .tb-row, .js-motion .rv-sheet:not(.seen) .tb-stamp { clip-path: inset(0 100% 0 0); }
.js-motion .rv-sheet.seen .tb-row, .js-motion .rv-sheet.seen .tb-stamp { animation: wipeRight 0.9s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
.js-motion .rv-sheet:not(.seen) .note { clip-path: inset(100% 0 0 0); }
.js-motion .rv-sheet.seen .note { animation: wipeUp 0.9s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 160ms + 1100ms); }
.js-motion .rv-sheet .note > i { scale: 0; transition: scale 0.6s var(--ease-out) calc(var(--i, 0) * 160ms + 700ms); }
.js-motion .rv-sheet .note > i::after { --draw: 0; transition: transform 0.9s var(--ease-out) calc(var(--i, 0) * 160ms + 850ms); }
.js-motion .rv-sheet.seen .note > i { scale: 1; }
.js-motion .rv-sheet.seen .note > i::after { --draw: 1; }
.js-motion .rv-panel { clip-path: inset(36% 0 0 0 round var(--r-box)); transition: clip-path 1.4s var(--ease-out); }
/* the process' chapters: the scroll picks the chapter, its copy then comes in by itself through its masks (and the one
   before leaves upwards through them): interface.js .copy-in / .copy-out */
.js-motion .copy-in .eyebrow { animation: maskUp 1.2s var(--ease-out) 0.42s backwards; }
.js-motion .copy-in .ln > span { animation: rise 1.4s var(--ease-out) 0.5s backwards; }
.js-motion .copy-in .ln + .ln > span { animation-delay: 0.6s; }
.js-motion .copy-in .scene-description { animation: maskUp 1.3s var(--ease-out) 0.7s backwards; }
.js-motion .copy-in .spec { animation: maskUp 1.3s var(--ease-out) 0.82s backwards; }
.js-motion .copy-out .eyebrow, .js-motion .copy-out .scene-description, .js-motion .copy-out .spec { animation: maskOff 0.5s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
.js-motion .copy-out .ln > span { animation: lift 0.5s cubic-bezier(0.55, 0, 0.75, 0.2) forwards; }
.js-motion .copy-out .ln + .ln > span { animation-delay: 0.05s; }
.js-motion .copy-out .scene-description { animation-delay: 0.08s; }
.js-motion .copy-out .spec { animation-delay: 0.12s; }
/* the typologies come up over the store with nothing on them; as they rise their words come in through their masks
   (interface.js .type-in, taken off again below the screen) */
.js-motion .type-stage > .section-header { border-top-color: transparent; }
.js-motion .type-stage > .section-header::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.js-motion .typologies:not(.type-in) .type-stage > .section-header > *, .js-motion .typologies:not(.type-in) .type-copy > *, .js-motion .typologies:not(.type-in) .type-index button, .js-motion .typologies:not(.type-in) .type-figures { clip-path: inset(0 0 100% 0); }
.js-motion .type-in .type-stage > .section-header::before { transform: none; animation: drawIn 1.6s var(--ease-out) 0.05s backwards; }
.js-motion .type-in .type-stage > .section-header > * { animation: maskUp 1.3s var(--ease-out) 0.2s backwards; }
.js-motion .type-in .type-stage > .section-header > :last-child { animation-delay: 0.28s; }
.js-motion .type-in .type-figures { animation: maskUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.15s backwards; }
.js-motion .type-in #type-name { animation: maskUp 1.5s var(--ease-out) 0.3s backwards; }
.js-motion .type-in #type-description { animation: maskUp 1.4s var(--ease-out) 0.46s backwards; }
.js-motion .type-in .type-spec { animation: maskUp 1.4s var(--ease-out) 0.58s backwards; }
.js-motion .type-in .underlink { animation: maskUp 1.3s var(--ease-out) 0.7s backwards; }
.js-motion .type-in .type-index button { animation: maskUp 1.2s var(--ease-out) 0.5s backwards; }
.js-motion .type-in .type-index button:nth-child(2) { animation-delay: 0.56s; }
.js-motion .type-in .type-index button:nth-child(3) { animation-delay: 0.62s; }
.js-motion .type-in .type-index button:nth-child(4) { animation-delay: 0.68s; }
.js-motion .type-in .type-index button:nth-child(5) { animation-delay: 0.74s; }
.js-motion .rv-panel.seen { clip-path: inset(0 0 0 0 round var(--r-box)); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .nav-descriptor { display: none; }
  .site-nav > nav { gap: 22px; }
  .scene-copy.right { width: 36%; }
  .studio-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method:nth-child(3) { border-left: 0; }
  .method:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 900px) {
  .site-nav > nav { display: none; }
  .nav-contact { margin-left: auto; }
  .material-sheet { grid-template-columns: 1fr; }
  .material-info { border-left: 0; border-top: 1px solid var(--ink); }
  .tb-stamp { min-height: 0; padding: 14px; writing-mode: horizontal-tb; transform: none; }
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .sf-top { grid-template-columns: auto minmax(0, 1fr); }
  .sf-nav { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --nav: 58px; }
  .wordmark { height: 36px; }
  .wordmark > .logo { height: 13px; }
  .nav-contact { height: 34px; padding-left: 12px; gap: 10px; font-size: 10px; }
  .nav-contact > span { width: 24px; height: 24px; }
  .menu-button { height: 34px; margin-left: 8px; font-size: 0; gap: 0; }
  .menu-button > span { width: 34px; height: 34px; }
  .label { font-size: 11px; }
  .editorial-hero { height: calc(max(100svh, 720px) + var(--hero-hold)); }
  .hero-pin { min-height: 720px; }
  .hero-word { top: calc(var(--nav) + 26px); }
  .hd1 { top: calc(var(--nav) + 26px + var(--lw) * 0.15); height: calc(max(100svh, 680px) * 0.88); }
  .hero-copy { left: var(--g); right: var(--g); width: auto; bottom: 7%; }
  .hero-copy h1 { font-size: clamp(24px, 7.2vw, 34px); }
  .hero-aside { display: none; }
  .experience { height: 1340svh; }
  .scene-stage { min-height: 680px; }
  .scene-top { top: calc(var(--nav) + 18px); }
  .scene-top .label.right { display: none; }
  .scene-number { top: calc(var(--nav) + 14px); }
  .scene-number > span { font-size: 54px; }
  .scene-copy, .scene-copy.right { top: calc(var(--nav) + 96px); left: var(--g); right: var(--g); width: auto; max-width: none; }
  .scene-copy h2 { font-size: clamp(36px, 10vw, 56px); }
  .dieline-legend { display: none; }
  .scene-copy .spec, .type-spec, .callouts, .callout-lines polyline:not(.frame), .callout-lines .dot { display: none; }
  .dl-dim text { font-size: 9px; }
  .dl-label circle { r: 7px; }
  .dl-label text { font-size: 8px; }
  .scene-description { font-size: 14px; margin-top: 14px; max-width: 32ch; }
  .scene-footer { bottom: 22px; gap: 8px; }
  .scene-chapters { overflow-x: auto; scrollbar-width: none; }
  .scene-chapters button { height: 32px; padding: 0 10px; font-size: 10px; flex-shrink: 0; }
  .scene-chapters button > span { display: none; }
  .process-portfolio { display: none; }
  .typologies { height: 300svh; }
  .type-stage { min-height: 700px; }
  .type-copy { top: calc(var(--nav) + 80px); width: auto; right: var(--g); }
  .type-copy h2 { font-size: clamp(64px, 19vw, 110px); }
  .type-copy > p { font-size: 15px; margin-top: 14px; }
  .type-copy .underlink { display: none; }
  .type-index { bottom: 22px; display: flex; overflow-x: auto; scrollbar-width: none; }
  .type-index button { flex-shrink: 0; height: 34px; padding: 0 10px; font-size: 10px; }
  .collection, .material-lab, .studio-section { padding: 48px var(--g) 60px; }
  .collection-heading, .material-heading { display: block; margin: 34px 0 24px; }
  .collection-heading h2 { font-size: 13vw; white-space: normal; }
  .collection-heading p, .material-heading p { margin-top: 16px; }
  .catalog-toolbar { align-items: flex-start; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; }
  .catalog-caption { grid-template-columns: minmax(0, 1fr) auto; }
  .catalog-caption > em { display: none; }
  .catalog-caption > strong, .catalog-caption > span { padding: 7px 8px; }
  .catalog-note { display: block; }
  .catalog-note > span { display: block; margin-bottom: 8px; }
  .material-heading h2 { font-size: 46px; }
  .material-view { min-height: 380px; border-radius: calc(var(--r-box) - 1px) calc(var(--r-box) - 1px) 0 0; }
  .material-notes .n2 { display: none; }
  .studio-intro { grid-template-columns: 1fr; gap: 18px; margin: 34px 0 26px; }
  .studio-methods { grid-template-columns: 1fr; }
  .method { min-height: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .method:first-child { border-top: 0; }
  .contact-section { padding: 20px var(--g) 60px; }
  .contact-banner h2 { font-size: clamp(40px, 12vw, 64px); }
  .fold-figure { position: relative; right: auto; top: auto; bottom: auto; display: block; width: 100%; height: 300px; margin-top: 18px; }
  .contact-banner > p { max-width: 26ch; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .sf-top { grid-template-columns: 1fr; }
  .sf-track { left: 64px; }
  .sf-caption { flex-direction: column; align-items: flex-start; }
  .sf-bottom { flex-direction: column; gap: 6px; }
  #project-dialog { width: calc(100vw - 24px); height: auto; max-height: 90svh; overflow: hidden auto; }
  #project-dialog[open] { display: block; }
  .dialog-image { height: 340px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .dialog-copy { height: auto; overflow: visible; padding: 22px 18px 20px; }
  .dialog-copy h2 { font-size: 50px; }
  .dialog-dims li b { font-size: 24px; }
}
@media (max-height: 720px) and (min-width: 761px) {
  .scene-copy { top: 36%; }
  .scene-copy h2 { font-size: clamp(40px, 4.2vw, 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-sticky { position: static; }
  .sf-stage { overflow-x: auto; }
  .page-scroll, .ps-thumb { transition: none; }
  .editorial-hero { height: auto; }
  .hero-pin { position: relative; }
  .experience { height: 100svh; }
  .scene-stage { position: relative; }
  .scene-copy { display: none !important; }
  .scene-copy[data-scene="3"] { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .scene-footer { display: none; }
  .typologies { height: 100svh; margin-top: 0; }
  .type-stage { position: relative; }
  .catalog-image img { transition: none; }
  .hero-curtain { display: none; }
}

/* corners, a little soft: rows of tabs round at their two ends, single controls all round, sheets and panels a little more */
.scene-chapters button:first-child, .type-index button:first-child, .sf-nav a:first-child { border-radius: var(--r) 0 0 var(--r); }
.scene-chapters button:last-child, .type-index button:last-child, .sf-nav a:last-child { border-radius: 0 var(--r) var(--r) 0; }
.chips span, .method .tag, .catalog-caption, .dieline-legend, .callout { border-radius: var(--r); }
.field input, .field textarea { border-radius: var(--r-in); }
.spec { border-radius: var(--r); }
.catalog-caption { overflow: hidden; }
.item-plus { border-top-left-radius: var(--r-in); }
.material-sheet, .studio-methods, #project-dialog, .contact-banner { border-radius: var(--r-box); }
.ps-thumb { border-radius: 2px; }

:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4.2 3H9v4.8' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
/* --------------------------------------------------------------- the arrow in its orange square: drawn, so it sits
   dead centre in its square; on hover the square stays where it is and only the arrow turns (from ↗ to →) */
.nav-contact > span, .hero-cta > span, .process-portfolio > span, .dialog-cta > span, .form-foot button > span, .underlink > span, .sf-cta > span, .sm-cta > span, .sm-go, .item-plus { font-size: 0; }
.nav-contact > span::before, .hero-cta > span::before, .process-portfolio > span::before, .dialog-cta > span::before, .form-foot button > span::before, .underlink > span::before, .sf-cta > span::before, .sm-cta > span::before, .sm-go::before, .item-plus::before { content: ""; width: 14px; height: 14px; background: currentColor; mask: var(--arrow) center / 100% 100% no-repeat; transition: transform 0.6s var(--ease-out); margin-top: 0.6vh; }
.form-foot button > span::before { width: 18px; height: 18px; }
.dialog-cta > span::before, .item-plus::before { width: 16px; height: 16px; }
.process-portfolio > span::before, .sm-go::before { width: 13px; height: 13px; }
.nav-contact:hover > span::before, .hero-cta:hover > span::before, .process-portfolio:hover > span::before, .dialog-cta:hover > span::before, .form-foot button:hover > span::before, .underlink:hover > span::before, .sf-cta:hover > span::before, .sm-cta:hover > span::before, .sm-work:hover .sm-go::before, .catalog-open:hover .item-plus::before { transform: rotate(45deg); }
/* the links that were underlined: the same boxed button as the others */
.underlink, .sf-cta, .sm-cta { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 5px 0 16px; border: 1px solid var(--ink); border-radius: var(--r); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; transition: background-color 0.35s ease, color 0.35s ease; }
.underlink > span, .sf-cta > span, .sm-cta > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-in); background: var(--orange); color: #141210; }
.underlink:hover, .sf-cta:hover, .sm-cta:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------- the catalogue (the + in the bar): a sheet comes down
   from the bar over the dimmed page, the bar turning to paper with it: the five typologies drawn to one scale, the six
   studies as a table, the way to a project. It goes back up the same way (interface.js) */
html.menu-open .site-nav { background-color: var(--paper); border-bottom-color: var(--hair); color: var(--ink); --nav-line: rgba(17, 17, 17, 0.3); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.menu-open .nav-contact > span { background: var(--orange); color: #141210; }
html.menu-open .ps-label { opacity: 0; }
.site-menu { position: fixed; z-index: 29; inset: var(--nav) 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.site-menu::-webkit-scrollbar { display: none; }
.site-menu::before { content: ""; position: fixed; inset: var(--nav) 0 0; background: rgba(17, 17, 17, 0.42); }
.sm-sheet { position: relative; padding: 16px var(--g) clamp(20px, 2.2vw, 30px); background: var(--paper); border-bottom: 1px solid var(--ink); border-radius: 0 0 var(--r-box) var(--r-box); }
.sm-sections { display: none; }
.sm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.sm-count { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.sm-block { display: flex; flex-direction: column; min-width: 0; }
.sm-title { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 10px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.sm-title > b { font: 500 10px var(--mono); color: var(--orange-ink); }
.sm-title > span { margin-left: auto; font: 500 10px var(--mono); text-transform: none; letter-spacing: 0; color: var(--mute); }
.sm-types { --k: min(0.13px, calc(100cqw / 1600)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.sm-type { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px; border-left: 1px solid var(--hair); transition: background-color 0.3s ease; }
.sm-type:first-child { border-left: 0; }
.sm-type:hover { background: var(--sheet); }
.sm-n { font: 500 10px var(--mono); color: var(--mute); transition: color 0.3s ease; }
.sm-type:hover .sm-n { color: var(--orange-ink); }
.sm-fig { display: flex; align-items: flex-end; justify-content: center; min-height: calc(1800 * var(--k) + 18px); margin: 0 -12px; padding: 0 12px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.sm-fig img { display: block; flex: none; width: auto; max-width: none; height: calc(var(--mm) * var(--k)); }
.sm-type strong { margin-top: 10px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
.sm-type em { margin-top: 3px; font: 500 10px var(--mono); font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-works { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.sm-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-works li:nth-child(n + 3) { border-top: 1px solid var(--hair); }
.sm-works li:nth-child(even) { border-left: 1px solid var(--hair); }
.sm-work { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) auto 66px 26px; align-items: center; gap: 12px; width: 100%; padding: 6px 7px 6px 6px; border: 0; background: none; color: inherit; text-align: left; font: 500 12px var(--font); cursor: pointer; transition: background-color 0.3s ease; }
.sm-work:hover { background: var(--sheet); }
.sm-thumb { display: block; width: 36px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-in); background: #dcdcd8; }
.sm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sm-work:hover .sm-thumb img { transform: scale(1.08); }
.sm-code, .sm-dims { font: 500 10px var(--mono); color: var(--mute); white-space: nowrap; }
.sm-dims { color: var(--ink-2); }
.sm-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sm-name strong { font: 700 13px var(--font); letter-spacing: 0.01em; white-space: nowrap; }
.sm-name em { font-style: normal; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-tag { justify-self: start; padding: 4px 7px; border-radius: var(--r-in); background: var(--ink); color: var(--sheet); font: 700 10px var(--font); text-transform: uppercase; letter-spacing: 0.04em; }
.sm-go { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-in); background: var(--orange); color: #141210; }
.sm-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; }
.sm-foot > p { font: 500 10px var(--mono); color: var(--mute); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes smOpen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -2px 0); } }
@keyframes smClose { from { clip-path: inset(0 0 -2px 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes fadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .site-menu:not([hidden])::before { animation: fadeIn 0.6s ease backwards; }
  .site-menu:not([hidden]) .sm-sheet { animation: smOpen 0.95s var(--ease-out) backwards; }
  .site-menu:not([hidden]) .sm-anim { animation: maskUp 1.1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }
  .site-menu:not([hidden]) .sm-fig > img, .site-menu:not([hidden]) .sm-fig > svg { animation: liftIn 1.3s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 380ms); }
  .site-menu:not([hidden]) .sm-sections { animation: maskUp 1s var(--ease-out) 0.15s backwards; }
  .site-menu.is-closing::before { animation: fadeOut 0.5s ease forwards; }
  .site-menu.is-closing .sm-sheet { animation: smClose 0.5s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
}
@media (max-width: 900px) {
  .sm-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; counter-reset: smi; }
  .sm-sections a { display: flex; align-items: center; gap: 8px; height: 44px; margin: -1px 0 0 -1px; padding: 0 12px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); font: 700 11px var(--font); text-transform: uppercase; letter-spacing: 0.03em; }
  .sm-sections a::before { counter-increment: smi; content: counter(smi, decimal-leading-zero); font: 500 10px var(--mono); color: var(--mute); }
  .sm-types { grid-template-columns: repeat(6, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .sm-works { grid-template-columns: minmax(0, 1fr); }
  .sm-works li:nth-child(n + 2) { border-top: 1px solid var(--hair); }
  .sm-works li:nth-child(even) { border-left: 0; }
}
@media (max-width: 760px) {
  .sm-head .label { display: none; }
  .sm-head { justify-content: flex-start; }
  .sm-work { grid-template-columns: 36px minmax(0, 1fr) auto 26px; }
  .sm-code, .sm-dims { display: none; }
  .sm-name { flex-direction: column; gap: 1px; }
  .sm-foot { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------- the project sheet's scrollbar: the page's ruler, small,
   from under the close button to the foot (interface.js); the browser's is hidden. On phones the sheet scrolls as one. */
.dialog-copy { scrollbar-width: none; }
.dialog-copy::-webkit-scrollbar { display: none; }
.dialog-rail { --ps: var(--ink); position: absolute; z-index: 2; right: 6px; top: 66px; bottom: 18px; width: 18px; touch-action: none; }
.dialog-rail.is-off { display: none; }
.dialog-rail > i { position: absolute; top: 0; bottom: 0; right: 6px; width: 7px; opacity: 0.38; background: linear-gradient(var(--ps), var(--ps)) right / 1px 100% no-repeat, repeating-linear-gradient(to bottom, var(--ps) 0 1px, transparent 1px 10%) right / 7px 100% no-repeat; transition: opacity 0.3s ease; }
.dialog-rail > b { position: absolute; top: 0; right: 5px; width: 3px; min-height: 36px; border-radius: 2px; background: var(--ps); cursor: grab; transition: width 0.25s var(--ease-out), right 0.25s var(--ease-out); }
.dialog-rail > b::before { content: ""; position: absolute; inset: 0 -7px; }
.dialog-rail:hover > i { opacity: 0.6; }
.dialog-rail:hover > b, .dialog-rail.is-drag > b { width: 5px; right: 4px; }
.dialog-rail.is-drag > b { cursor: grabbing; }
@media (max-width: 760px) {
  .dialog-rail { display: none; }
}

/* the formats' sixth cell: no shape of its own, a box in phantom lines with its three measures left open */
.sm-free-fig { display: block; flex: none; width: auto; height: calc(1500 * var(--k)); overflow: visible; }
.sm-free-fig path { fill: none; vector-effect: non-scaling-stroke; transition: stroke 0.3s ease; }
.sm-free-fig .box path { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sm-free-fig .dim path { stroke: var(--mute); stroke-width: 1; }
.sm-free-fig text { font: 500 13px var(--mono); fill: var(--ink-2); text-anchor: middle; }
.sm-free:hover .box path { stroke: var(--orange-ink); }
.sm-free em { color: var(--orange-ink); }

/* --------------------------------------------------------------- the material: both edges on the one sample; the one under
   the mouse (or named in the sheet) is lit, the other's note and leader step back */
.material-hint { margin-top: 10px; font: 500 10px/1.5 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: 0.02em; }
.material-options button { transition: color 0.35s ease; cursor: default; }
.material-options button > span, .material-options button > i { transition: color 0.35s ease, transform 0.5s var(--ease-out); }
.material-options button > i { display: inline-block; width: 12px; height: 12px; font-size: 0; background: currentColor; -webkit-mask: var(--arrow) center / 100% 100% no-repeat; mask: var(--arrow) center / 100% 100% no-repeat; }
.material-options button[aria-pressed="true"] > i { transform: rotate(45deg); }
.material-view.on-edge { cursor: crosshair; }
.material-notes .note { transition: opacity 0.4s ease; }
.material-notes .note[data-edge] { cursor: crosshair; }
.material-sheet[data-edge="white"] .note.n4, .material-sheet[data-edge="print"] .note.n2 { opacity: 0.38; }
.material-leaders polyline, .material-leaders circle { transition: stroke-opacity 0.4s ease, fill-opacity 0.4s ease; }
.material-sheet[data-edge="white"] .material-leaders .k-edgePrint, .material-sheet[data-edge="print"] .material-leaders .k-edge { stroke-opacity: 0.3; fill-opacity: 0.3; }
.material-notes .n4 { right: 7%; top: 30%; }
.material-notes .n4 > i::after { right: 7px; width: 90px; transform-origin: right; --rot: 22deg; }
@media (max-width: 760px) {
  .material-notes .n4 { display: none; }
}

/* the finish's notes: both kept in place one over the other, so the sheet keeps its height; the one shown comes up through
   its mask as the other goes (interface.js). A soft tint slides to the finish named, and the edge under the mouse is drawn
   over in orange on the sample (scene.js) */
.md-stack { display: grid; }
.md-stack > .md-v { grid-area: 1 / 1; min-width: 0; }
.md-v:not(.is-on) { visibility: hidden; }
.material-options { position: relative; isolation: isolate; }
.material-options::before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: 0; height: 50%; border-radius: var(--r-in); background: var(--paper); transition: transform 0.6s var(--ease-out); }
.material-sheet[data-edge="print"] .material-options::before { transform: translateY(100%); }
.material-options button { padding-left: 0; transition: color 0.4s ease, letter-spacing 0.5s var(--ease-out); }
.material-options button[aria-pressed="true"] { letter-spacing: -0.02em; }
.material-leaders .edge-hl { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.75s var(--ease-out); }
.material-sheet.is-pointing[data-edge="white"] .edge-hl[data-edge="white"], .material-sheet.is-pointing[data-edge="print"] .edge-hl[data-edge="print"] { stroke-dashoffset: 0; }
.material-notes .note[data-edge] { transition: opacity 0.45s ease, transform 0.6s var(--ease-out); }
.material-sheet.is-pointing[data-edge="white"] .note.n2, .material-sheet.is-pointing[data-edge="print"] .note.n4 { transform: translateX(-4px); }

/* --------------------------------------------------------------- shorter screens (laptops): the words of the process and
   of the typologies sit in the room between the heading above and the bar under them (the chapters, the five types),
   centred in it, instead of hanging from a fixed height; the typology's name shrinks with the screen's height, so nothing
   runs into the bar */
@media (min-width: 761px) {
  .scene-copy, .scene-copy.right { top: calc(var(--nav) + 88px); bottom: 92px; display: flex; flex-direction: column; justify-content: center; }
  .type-copy { top: calc(var(--nav) + 100px); bottom: 96px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .type-copy .type-spec { align-self: stretch; }
  .type-copy h2 { font-size: clamp(64px, min(11.5vw, (100svh - 570px) * 1.1), 216px); }
}
/* the page's scrollbar: dragging it never selects or drags anything else */
.page-scroll, .page-scroll * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }