/* Arduin: one stylesheet for every page. Fonts are self-hosted (SIL OFL, licences in /assets/fonts). */
/* Arduin, second version: a quiet, photographic page. One dark world (stone in shadow, cold daylight on it),
   with one white room for the knock test, like a measuring lab. Big photographs, few words per screen, light
   display type, hairlines instead of boxes. Motion is slow and stops dead: images settle, lines rise out of
   masks, the route is driven by the scroll, and nothing moves on its own after it lands. */
@font-face { font-family: "Archivo Expanded"; src: url("/assets/fonts/Archivo-Expanded.woff2") format("woff2"); font-weight: 500 800; font-display: block; }
@font-face { font-family: "Atkinson Next"; src: url("/assets/fonts/AtkinsonHyperlegibleNext.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
/* the figures come from Archivo at its normal width (plain zero, the display face's own family), sized to Atkinson's */
@font-face { font-family: "Atkinson Next"; src: url("/assets/fonts/ArchivoFigures.woff2") format("woff2"); font-weight: 400 700; font-display: block; unicode-range: U+0030-0039; size-adjust: 97.7%; }
/* A single dark look on purpose (the stone in a dark room); the lab band carries its own light tokens. */
:root {
  color-scheme: dark;
  --ink: #0E1113; --stone: #151A1D; --slate: #1D2427; --line: #2E373B; --line-2: #435055;
  --fg: #E6E8E4; --body: #C9CFD1; --mut: #A7B1B4; --accent: #8AA0FF; --on-light: #0E1113;
  --bg: var(--ink);
  --display: "Archivo Expanded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --ui: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --pad: clamp(16px, 5vw, 72px);
}
.lab { --bg: #E3E5E1; --stone: #F1F2EF; --fg: #15191B; --body: #2B3235; --mut: #4F5A5E; --line: #BFC5C2; --line-2: #9AA4A7; --accent: #2747D6; --on-light: #F1F2EF; color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { background: var(--ink); color: var(--fg); font: 400 18px/1.7 var(--ui); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ink); }
.wrap { max-width: calc(1440px + 2 * var(--pad)); margin: 0 auto; padding-left: max(var(--pad), var(--gl)); padding-right: max(var(--pad), var(--gr)); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(44px, 7.2vw, 120px); line-height: 0.98; }
h2 { font-size: clamp(32px, 4.4vw, 68px); line-height: 1.04; }
h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: 58ch; color: var(--body); }
a { color: inherit; }
.label { display: block; font: 600 13px/1.3 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
.num { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mut { color: var(--mut); }
.small { font-size: 15px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 600 15px/1 var(--ui); letter-spacing: 0.02em; min-height: 52px; padding: 0 26px; border: 1px solid currentColor; border-radius: 0; color: var(--fg); background: transparent; text-decoration: none; cursor: pointer; }
.btn.solid { background: var(--fg); border-color: var(--fg); color: var(--on-light); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--fg); color: var(--on-light); } .btn.solid:hover { background: transparent; color: var(--fg); } }

/* the lines that rise out of their masks */
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ln > span { display: block; }
.m .ln > span { transform: translateY(112%); }

/* the knock: three bars, then the line runs out and stops */
.klop { display: flex; align-items: center; height: 22px; color: var(--accent); }
.klop i { flex: none; width: 4px; background: currentColor; margin-right: 6px; }
.klop i:nth-child(1) { height: 100%; } .klop i:nth-child(2) { height: 62%; } .klop i:nth-child(3) { height: 38%; }
.klop b { flex: 1; height: 1.5px; background: currentColor; margin-left: -10px; }

/* header: over the photograph at first, solid stone once you scroll */
.top { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20; border-bottom: 1px solid transparent; }
.top.solid { background: var(--ink); border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.logo { display: block; height: 18px; width: auto; flex: none; }
.logo .m { fill: var(--accent); } .logo .w { fill: var(--fg); }
.nav { display: flex; gap: 32px; align-items: center; }
.nav a { text-decoration: none; font: 600 15px/1 var(--ui); letter-spacing: 0.02em; color: var(--fg); padding-block: 14px; }
.nav a:hover { color: var(--accent); }
.tools { display: flex; gap: 14px; align-items: center; }
.lang { display: flex; }
.lang button { font: 600 14px/1 var(--ui); letter-spacing: 0.08em; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--mut); cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.top .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* hero: the pair in the stone room, full bleed */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1120px; overflow: hidden; background: var(--stone); }
.hero .media { position: absolute; inset: 0; cursor: pointer; }
.hero .media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 62% 50%); display: block; transform-origin: 62% 55%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,17,19,.62), rgba(14,17,19,0) 24%), linear-gradient(to top, rgba(14,17,19,.88), rgba(14,17,19,0) 62%), linear-gradient(to right, rgba(14,17,19,.74), rgba(14,17,19,.2) 46%, rgba(14,17,19,0) 70%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; height: 100%; display: grid; align-content: end; padding-block: 0 clamp(28px, 6vh, 64px); pointer-events: none; }
.hero-copy { display: grid; gap: 22px; max-width: min(100%, 1040px); }
/* The copy stays left of the pair. With the cover fit at 62%, a point x into the photo sits at 62% of the hero's
   width less (0.62 - x) x 1.778 x its height, or at x of its width once the hero is wider than 16:9. The left
   cabinet starts at x = 0.475, its stand at 0.53. The headline gets the room up to the cabinet less 56px (the photo
   opens at 1.07x), over its longest line in em ("Steen zingt" is 6.26em, "Stone doesn’t" 7.71em); the kicker
   wraps before the cabinet and the buttons before the stand. */
.hero { container-type: inline-size; }
.hero .wrap {
  --h: clamp(620px, 100svh, 1120px);
  --inset: calc(max(var(--pad), var(--gl)) + max(0px, (100cqw - 1440px - 2 * var(--pad)) / 2));
  --cab: min(62cqw - 0.2578 * var(--h), 47.5cqw);
  --stand: min(62cqw - 0.16 * var(--h), 53cqw);
  --room: calc(var(--cab) - var(--inset) - 56px);
}
.hero h1 { font-size: clamp(36px, min(7.2cqw, var(--room) / 6.3), 120px); }
.hero h1:lang(en) { font-size: clamp(36px, min(7.2cqw, var(--room) / 7.75), 120px); }
.hero-copy .label { text-wrap: balance; max-width: calc(var(--cab) - var(--inset) - 24px); }
.hero-copy .sub { font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--mut); }
/* the buttons and the readout stay in the copy's column, clear of the pair on the right */
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 4vh, 36px); margin-top: clamp(28px, 5vh, 48px); pointer-events: auto; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .ctas { max-width: calc(var(--stand) - var(--inset) - 24px); }
.readout { display: grid; gap: 10px; min-width: min(320px, 100%); }
.readout .ms { display: flex; align-items: baseline; gap: 10px; }
.readout .num { font-size: clamp(36px, 3.4vw, 52px); line-height: 1; color: var(--accent); min-width: 2.2ch; }

/* the statement: read it and the words light up */
.say { padding-block: clamp(120px, 22vh, 240px); }
.say p { font: 500 clamp(26px, 3.3vw, 50px)/1.24 var(--display); letter-spacing: -0.015em; max-width: 30ch; color: var(--fg); }
.say p .w { opacity: var(--o, 1); }

/* full-bleed photographs with a caption that sits on the stone */
.plate-img { position: relative; height: clamp(420px, 86vh, 900px); overflow: hidden; background: var(--stone); }
.plate-img img { position: absolute; left: 0; width: 100%; height: 118%; top: -9%; object-fit: cover; display: block; }
.caption { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); padding-block: clamp(56px, 9vh, 104px) clamp(96px, 16vh, 180px); align-items: start; }
.caption .txt { display: grid; gap: 22px; min-width: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 22px 20px 0 0; display: grid; gap: 6px; align-content: start; }
.facts .num { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: var(--fg); }
.facts span:last-child { font-size: 15px; color: var(--mut); line-height: 1.4; }

/* sections */
.sec { padding-block: clamp(104px, 16vh, 176px); display: grid; gap: clamp(48px, 7vh, 80px); }
.sec-head { display: grid; gap: 22px; max-width: 900px; }
.lab { background: var(--bg); color: var(--fg); }

/* knock test, in the white room */
.test { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.trial { display: grid; gap: 18px; padding: 32px 40px 0 0; min-width: 0; }
.trial + .trial { padding: 32px 0 0 40px; border-left: 1px solid var(--line); }
.trial header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.trial canvas { width: 100%; height: 180px; display: block; }
.axis { display: flex; justify-content: space-between; font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }
.trial .res { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.trial .res .num { font-size: clamp(56px, 6vw, 96px); line-height: 0.95; }
.trial .res .num.stone { color: var(--accent); }
.trial .btn { justify-self: start; }
.trial .btn.solid, .ab .btn.solid { background: var(--accent); border-color: var(--accent); color: #F1F2EF; }
@media (hover: hover) and (pointer: fine) { .trial .btn.solid:hover, .ab .btn.solid:hover { background: transparent; color: var(--accent); } }
.ab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: center; border-top: 1px solid var(--line); padding-top: 40px; }
.ab .ctrl { display: grid; gap: 18px; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--fg); width: max-content; max-width: 100%; }
.seg button { font: 600 15px/1 var(--ui); letter-spacing: 0.02em; min-height: 48px; padding: 0 20px; border: 0; background: transparent; color: var(--fg); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ab canvas { width: 100%; height: 240px; display: block; min-width: 0; }
.credit { font-size: 14px; color: var(--mut); line-height: 1.5; }

/* from quarry to cabinet: the photographs hold still and change under the words as you scroll */
.route { position: relative; background: var(--ink); }
.route .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.route .frame { position: absolute; inset: 0; margin: 0; background: var(--stone); }
.route .frame + .frame { clip-path: inset(100% 0 0 0); }
.route .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the edge of the photograph coming up: its sawn edge catching the light, and the soft shadow it lays on the one it covers */
.route .seam { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(64px, 10svh, 112px); background: linear-gradient(to top, rgba(14,17,19,.68), rgba(14,17,19,.3) 30%, rgba(14,17,19,0)); visibility: hidden; pointer-events: none; }
.route .seam::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: rgba(227,229,225,.32); }
.route .shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(14,17,19,.82), rgba(14,17,19,.42) 44%, rgba(14,17,19,0) 72%), linear-gradient(to top, rgba(14,17,19,.6), rgba(14,17,19,0) 42%), rgba(14,17,19,.18); pointer-events: none; }
.route .hud { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.route .hud .wrap { height: 100%; display: grid; align-content: end; padding-block: 104px clamp(28px, 6vh, 64px); }
.route .kg { display: flex; align-items: baseline; gap: 14px; justify-self: end; clip-path: inset(-40% -10% 0 -10%); } /* the counter drops out below its own bottom edge (site.js) */
.route .kg .num { font-size: clamp(56px, 8.6vw, 148px); line-height: 0.9; color: var(--fg); white-space: nowrap; }
.route .kg .x { font: 400 0.42em/1 var(--ui); vertical-align: 0.5em; padding-inline: 0.28em; color: var(--mut); font-style: normal; }
.route .kg .unit { font-size: 16px; line-height: 1.35; color: var(--mut); max-width: 14ch; }
.route .steps { position: relative; z-index: 3; list-style: none; margin: -100svh 0 0; padding: 0; }
.route .step { height: 112svh; display: grid; align-content: center; }
.route .step > .wrap { width: 100%; }
.route .step:first-child { height: 100svh; }
.route .step .card { display: grid; gap: 16px; max-width: 34ch; }
.route .step:first-child .card { max-width: 40ch; gap: 20px; }
.route .step:first-child h2 { margin-bottom: 20px; }
.route .step .n { font: 600 13px/1 var(--ui); letter-spacing: 0.16em; color: var(--mut); font-variant-numeric: tabular-nums; }
.route .step h3 { font-size: clamp(28px, 3vw, 44px); }
.route .step p { color: var(--body); }
.plate { border: 1px solid var(--line-2); padding: 20px; display: grid; gap: 6px; font-size: 15px; font-variant-numeric: tabular-nums; max-width: 380px; color: var(--body); background: rgba(14,17,19,.78); }
.plate strong { font: 500 17px/1.3 var(--display); color: var(--fg); }

/* the range, at true size on one floor */
.gamma { background: var(--stone); }
.lineup { position: relative; display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: end; gap: clamp(8px, 3vw, 48px); height: clamp(380px, 62vh, 640px); border-bottom: 1px solid var(--line-2); }
.rod { position: relative; height: 100%; align-self: stretch; }
.rod .rl { position: absolute; right: 0; bottom: 0; width: 1px; background: var(--mut); }
.rod i { position: absolute; right: 0; width: 7px; height: 1px; background: var(--mut); transform: translateY(50%); }
.rod i.M { width: 14px; }
.rod b { position: absolute; right: 22px; font: 600 13px/1 var(--ui); color: var(--mut); transform: translateY(50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.model { display: flex; justify-content: center; align-items: flex-end; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; min-width: 0; }
.model img, .model .ph { display: block; height: calc(var(--h) * 100%); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
/* the packshots are the cabinet's front, cut from the photograph: a soft contact shadow stands them on the floor */
.model img { border-radius: 2px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }
.model svg { display: block; height: calc(var(--h) * 100%); width: auto; max-width: 100%; aspect-ratio: var(--ar); overflow: visible; }
.model svg * { fill: none; stroke: var(--mut); stroke-width: 1; vector-effect: non-scaling-stroke; }
.model svg .cab { fill: var(--slate); stroke: var(--line-2); }
.model svg .cap { fill: var(--line); }
.names { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 48px); }
.names button { display: grid; justify-items: center; gap: 4px; padding: 20px 0 0; border: 0; background: none; color: var(--mut); cursor: pointer; font: inherit; min-height: 44px; }
.names button .num { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.names button span:last-child { font-size: clamp(17px, 1.3vw, 20px); font-variant-numeric: tabular-nums; }
.names button[aria-pressed="true"] { color: var(--fg); }
.names button[aria-pressed="true"] .num { color: var(--accent); }
.detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.detail .left { display: grid; gap: 26px; min-width: 0; }
.swatches { display: flex; gap: 24px; flex-wrap: wrap; }
.sw { display: grid; justify-items: center; gap: 12px; border: 0; background: none; color: var(--mut); cursor: pointer; font: 600 14px/1.2 var(--ui); padding: 4px; }
.sw i { display: block; width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 2px; background: #3A4246 center / cover; outline: 1px solid var(--line-2); outline-offset: 5px; }
.sw[aria-pressed="true"] { color: var(--fg); }
.sw[aria-pressed="true"] i { outline: 2px solid var(--accent); }
.spec { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.spec dt, .spec dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; }
.spec dt { color: var(--mut); padding-right: 28px; }
.spec dd { color: var(--body); }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price .num { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; }

/* listen */
/* the room: the photograph fades into the page and the heading sits under it, clear of the bench (your seat) */
.room-band .shot { position: relative; height: clamp(420px, 76vh, 820px); overflow: hidden; background: var(--stone); -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent); mask-image: linear-gradient(to bottom, #000 74%, transparent); }
.room-band .shot img { position: absolute; left: 0; width: 100%; height: 118%; top: -9%; object-fit: cover; display: block; }
.room-band .wrap { display: grid; gap: 20px; padding-block: clamp(8px, 2vh, 24px) 0; }
.room-band + .wrap > .sec { padding-top: clamp(48px, 8vh, 88px); }
.listen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.listen .left { display: grid; gap: 28px; min-width: 0; }
.plan { display: block; width: 100%; max-width: 404px; height: auto; }
.plan .wall { fill: none; stroke: var(--fg); stroke-width: 2; }
.plan .hair { fill: none; stroke: var(--mut); stroke-width: 1; stroke-dasharray: 3 4; }
.plan .spk { fill: var(--accent); }
.plan .you { fill: var(--fg); }
.plan .win { stroke: var(--ink); stroke-width: 5; }
.plan text { fill: var(--mut); font: 600 15px var(--ui); font-variant-numeric: tabular-nums; }
.plan text.k { fill: var(--fg); }
.where { display: grid; gap: 4px; font-size: 16px; color: var(--body); }
form { display: grid; gap: 32px; min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0; min-width: 0; }
legend { font: 600 13px/1.3 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); padding: 0; margin-bottom: 14px; }
.days, .slots, .models { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.slots, .models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; border-bottom: 1px solid var(--line); }
.opt + .opt { border-left: 1px solid var(--line); }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt > span { display: grid; gap: 2px; min-height: 64px; padding: 12px 16px; font-size: 16px; font-variant-numeric: tabular-nums; align-content: center; color: var(--mut); }
.opt > span b { font-weight: 600; color: var(--body); }
.opt > span span { font-size: 15px; }
.opt input:checked + span { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); background: var(--slate); }
.opt input:checked + span b { color: var(--fg); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font: 600 13px/1.3 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
.field input { font: 400 18px/1.4 var(--ui); padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--fg); width: 100%; min-height: 52px; }
.field input::placeholder { color: #7D888C; }
.field input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.err { color: var(--fg); font-size: 15px; border-left: 2px solid var(--accent); padding-left: 12px; }
.ticket { scroll-margin-top: 88px; background: #F1F2EF; color: #15191B; padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; --accent: #2747D6; --fg: #15191B; --on-light: #F1F2EF; }
.ticket h3 { font-size: clamp(24px, 2.2vw, 32px); }
.ticket .row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #BFC5C2; padding-top: 12px; font-size: 16px; }
.ticket .row span:first-child { color: #4F5A5E; }
.ticket .note { font-size: 14px; color: #4F5A5E; }
.ticket .btn { justify-self: start; }

footer { border-top: 1px solid var(--line); padding-block: 72px 56px; }
footer .big { display: block; width: 100%; height: auto; }
footer .big .m { fill: var(--accent); } footer .big .w { fill: var(--fg); }
footer .cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 32px; }
footer p, footer li { font-size: 15px; color: var(--mut); line-height: 1.6; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

@media (max-width: 1100px) { .nav { display: none; } }
@media (max-width: 900px) {
  body { font-size: 17px; }
  .caption, .detail, .listen, .ab, footer .cols { grid-template-columns: minmax(0, 1fr); }
  .test { grid-template-columns: minmax(0, 1fr); }
  .trial, .trial + .trial { padding: 28px 0 32px; border-left: 0; }
  .trial + .trial { border-top: 1px solid var(--line); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .route .hud .wrap { padding-block: 88px 24px; align-content: start; }
  .route .step { height: 100svh; align-content: end; padding-bottom: max(104px, 15svh); }
  .route .kg { justify-self: start; }
  .route .shade { background: linear-gradient(to top, rgba(14,17,19,.92), rgba(14,17,19,.25) 72%), linear-gradient(to bottom, rgba(14,17,19,.7), rgba(14,17,19,0) 34%); }
  .lineup, .names { grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 10px; }
  .rod b { right: 16px; }
  .lineup { height: clamp(300px, 56vh, 460px); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .days .opt:nth-child(3) { border-left: 0; }
}
/* a tall screen: the photograph takes the top of the hero, whole pair in view, and fades into the stone under
   the words, so the headline never sits on a speaker */
@media (max-aspect-ratio: 4/5) {
  .hero { height: auto; min-height: 0; max-height: none; }
  .hero::after { display: none; }
  .hero .media { position: relative; inset: auto; height: min(62svh, 120vw); }
  .hero .media img { object-position: 88% 50%; -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent); mask-image: linear-gradient(to bottom, #000 66%, transparent); }
  .hero .wrap { height: auto; margin-top: -6svh; }
  .hero h1, .hero h1:lang(en) { font-size: clamp(44px, 7.2vw, 120px); }
  /* portrait screens: keep each photograph's subject in the narrow crop */
  .plate-img img { object-position: 71% 50%; }
  .route .frame[data-step="1"] img { object-position: 62% 50%; }
  .route .frame[data-step="2"] img { object-position: 60% 50%; }
  .route .frame[data-step="3"] img { object-position: 79% 50%; }
  .room-band .shot img { object-position: 70% 50%; }
  .hero-copy .label, .hero .ctas { max-width: none; }
}
@media (max-width: 560px) {
  .top .btn { display: none; }
  .hero-foot { flex-direction: column; align-items: stretch; }
  .slots, .models { grid-template-columns: minmax(0, 1fr); }
  .slots .opt + .opt, .models .opt + .opt { border-left: 0; }
}
/* ---------- Multi-page additions (the site at arduin.alessiowinkel.com) ---------- */
/* the published artifact's wrapper supplied this; a standalone page needs it for the ticket and the error line */
[hidden] { display: none !important; }
/* a page's own title, set at the size of the section headings it replaces */
h1.as-h2 { font-size: clamp(32px, 4.4vw, 68px); line-height: 1.04; }
.nav a[aria-current="page"] { color: var(--accent); }
.menu-btn { display: none; font: 600 14px/1 var(--ui); letter-spacing: 0.02em; min-height: 44px; padding: 0 16px; border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; }
.menu { background: var(--ink); border-bottom: 1px solid var(--line); }
.menu .wrap { display: grid; justify-content: normal; gap: 0; padding-block: 4px 24px; min-height: 0; }
.menu a { font: 500 clamp(26px, 6vw, 36px)/1.15 var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--fg); padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu a[aria-current="page"] { color: var(--accent); }
body.menu-open .top { background: var(--ink); border-bottom-color: var(--line); }
@media (max-width: 1100px) { .menu-btn { display: inline-flex; align-items: center; } }
@media (min-width: 1101px) { .menu { display: none !important; } }
/* home: the ways on, two by two, hairlines instead of boxes */
.next .sec { padding-top: clamp(56px, 9vh, 104px); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); }
.way { display: grid; gap: 18px; text-decoration: none; color: var(--fg); min-width: 0; }
.way .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.way .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.0001); }
.way .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.way h3 { font-size: clamp(24px, 2.2vw, 34px); }
.way .arr { flex: none; width: 34px; height: 12px; color: var(--accent); align-self: center; }
.way p { color: var(--mut); }
@media (hover: hover) and (pointer: fine) { .way:hover h3 { color: var(--accent); } }
@media (max-width: 900px) { .ways { grid-template-columns: minmax(0, 1fr); } }
/* home: the launch film */
.film { margin: 0; display: grid; gap: 16px; min-width: 0; }
.film .screen { aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--line); }
.film video { display: block; width: 100%; height: 100%; background: #000; }
.film figcaption { color: var(--mut); max-width: 62ch; }
footer a { text-underline-offset: 4px; }
footer .case a { color: var(--accent); }
/* 404 */
.nf { min-height: 100svh; display: grid; align-content: center; padding-block: 120px 80px; }
.nf .wrap { display: grid; gap: 24px; }