:root {
  --ink: #0F1D24;
  --paper: #F1EEE7;
  --mist: #A9B6BA;
  --slate: #5E6B70;
  --accent: #E59A5B;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); }
body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body.rec { scrollbar-width: none; }
body.rec::-webkit-scrollbar { display: none; }

/* the rig carries the film and its hotspots together, so the camera-follow moves both */
#rig { position: fixed; inset: 0; overflow: hidden; will-change: transform; transform: scale(1.05); }
#stage { position: absolute; inset: 0; width: 100vw; height: 100dvh; display: block; }
#spots { position: absolute; pointer-events: none; }
#story { height: 1300vh; }

.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* loader: the wordmark fills with real preload progress */
#loader {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: var(--ink); transition: opacity 1.2s var(--ease);
}
#loader.done { opacity: 0; pointer-events: none; }
.mark { position: relative; font-weight: 600; font-size: clamp(56px, 12vw, 180px); letter-spacing: -0.04em; line-height: 1; }
.mark .base { color: rgba(241, 238, 231, .12); }
.mark .fill { position: absolute; inset: 0; color: var(--paper); clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease); }

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between;
  align-items: center; padding: var(--s3) var(--s6);
}
.wordmark { color: var(--paper); text-decoration: none; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; }
.nav-link { color: var(--paper); text-decoration: none; font-weight: 500; font-size: 16px; padding: 12px 0; }
.nav-link:hover { opacity: .6; }
.top nav { display: flex; align-items: center; gap: var(--s4); }
.nav-link:focus-visible, .cta:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

.count {
  position: fixed; left: var(--s6); bottom: var(--s4); z-index: 5; font-size: 15px; font-weight: 500;
  color: var(--paper); opacity: .8; font-variant-numeric: tabular-nums;
}

.lines { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
/* the words: see the type system under round 5 */
.cta {
  display: inline-block; margin-top: var(--s4); padding: 16px 32px; border-radius: 24px;
  background: var(--accent); color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(229, 154, 91, .35);
}
.cta:hover { opacity: .85; }

.credit {
  position: fixed; right: var(--s6); bottom: var(--s4); z-index: 5; font-size: 12px; color: var(--mist); opacity: .75;
}

@media (max-width: 760px) {
  .top { padding: var(--s2) var(--s3); }
  .count { left: var(--s3); bottom: var(--s3); }
  .credit { right: var(--s3); bottom: var(--s3); max-width: 55vw; text-align: right; }
  .line, .line[data-side="right"] { left: var(--s3); right: var(--s3); bottom: 12dvh; max-width: none; }
  .line[data-side="center"] { left: var(--s3); right: var(--s3); transform: none; }
  .line h1, .line h2 { font-size: clamp(36px, 11vw, 56px); }
}

/* ---------- desktop interactions (2026-10-20) ---------- */

/* sound toggle: struck through when off, equalizer bars when on (anatomy.md) */
.sound {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--paper);
  font: 500 16px/1 "Hanken Grotesk", system-ui, sans-serif; padding: 12px 0; cursor: pointer;
}
.sound .txt { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7; }
.sound.on .txt { text-decoration: none; opacity: 1; }
.sound .bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound .bars i { width: 2px; height: 3px; background: var(--paper); border-radius: 1px; }
.sound.on .bars i { animation: eq 1.1s ease-in-out infinite alternate; }
.sound.on .bars i:nth-child(2) { animation-delay: -.4s; }
.sound.on .bars i:nth-child(3) { animation-delay: -.8s; }
.sound.on .bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
.sound:hover { opacity: .6; }
.sound:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* film scrubber: one bar per scene, the head fills with the voyage; click or drag to travel */
#scrub {
  position: fixed; left: var(--s6); bottom: calc(var(--s4) - 6px); width: min(38vw, 600px); height: 28px; z-index: 6;
  display: none; cursor: pointer;
}
body.fine #scrub { display: block; }
#scrub .segs { position: absolute; left: 0; right: 0; top: 13px; display: flex; gap: 4px; height: 2px; }
#scrub .seg { flex: 1 1 0; background: rgba(241, 238, 231, .22); border-radius: 1px; }
#scrub .head {
  position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--paper);
  transform-origin: left; transform: scaleX(0); pointer-events: none;
  -webkit-mask: linear-gradient(#000, #000); mix-blend-mode: normal;
}
#scrub .tip {
  position: absolute; bottom: 24px; transform: translateX(-50%); font-size: 13px; font-weight: 500;
  color: var(--paper); white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
#scrub:hover .tip { opacity: .9; }
#scrub:hover .segs .seg { background: rgba(241, 238, 231, .35); }

/* hotspots on the held cutaway frames */
.spot-group { position: absolute; inset: 0; opacity: 0; }
.spot-group.live .spot { pointer-events: auto; }
.spot {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; background: none;
  pointer-events: none; cursor: pointer; color: var(--paper);
}
.spot .dot {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 0 rgba(241, 238, 231, .6); animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(241, 238, 231, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(241, 238, 231, 0); } }
.spot .card {
  position: absolute; left: 34px; top: 50%; width: 272px; padding: 8px 8px 14px;
  transform: translate(-6px, -50%); opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease);
  background: rgba(15, 29, 36, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; text-align: left; pointer-events: none;
}
.spot.flip .card { left: auto; right: 34px; transform: translate(6px, -50%); }
.spot.up .card { top: auto; bottom: 50%; transform: translate(-6px, 12px); }
.spot.up:hover .card, .spot.up:focus-visible .card { transform: translate(0, 12px); }
.spot .card .pic { display: block; overflow: hidden; border-radius: 7px; aspect-ratio: 520 / 300; margin-bottom: 12px; background: rgba(255, 255, 255, .06); }
.spot .card canvas { display: block; width: 100%; height: 100%; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.spot:hover .card canvas, .spot:focus-visible .card canvas { transform: scale(1); }
.spot .card strong { display: block; padding: 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.spot .card .t { display: block; padding: 0 8px; font-size: 14px; line-height: 1.45; color: var(--paper); opacity: .85; }
.spot:hover .card, .spot:focus-visible .card { opacity: 1; transform: translate(0, -50%); }
.spot:hover .dot { animation: none; transform: scale(1.3); transition: transform .3s var(--ease); }
.spot:focus-visible { outline: none; }

/* cursor: a ring with the one thing you can do here */
#cursor { display: none; }
body.fine { cursor: none; }
body.fine a, body.fine button, body.fine #scrub { cursor: none; }
body.fine #cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
}
#cursor .ring {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(241, 238, 231, .85); transition: transform .35s var(--ease), background .35s var(--ease);
}
#cursor.small .ring { transform: scale(.35); background: var(--paper); }
body.dragging #cursor .ring { transform: scale(.8, 1.1); }
body.cruising #cursor .ring { transform: scale(1.35); border-style: dashed; animation: spin 6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
#cursor .label {
  position: absolute; left: 30px; top: -8px; font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--paper); text-shadow: 0 1px 12px rgba(15, 29, 36, .6);
}
.cta { transition: transform .5s var(--ease), opacity .2s; }
body.rec #cursor, body.rec #scrub { display: none !important; }

/* ---------- round 3 (2026-10-20) ---------- */

/* the gate: appears once the opening second is loaded */
#loader { flex-direction: column; }
.gate {
  position: absolute; left: 50%; top: calc(50% + clamp(70px, 9vw, 130px)); transform: translate(-50%, 12px);
  display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; pointer-events: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
#loader.ready .gate { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gate-go {
  font: 600 17px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ink); background: var(--paper);
  border: 0; border-radius: 28px; padding: 18px 36px; cursor: pointer; transition: transform .5s var(--ease), opacity .2s;
}
.gate-go:hover { transform: scale(1.04); }
.gate-note { font-size: 14px; color: var(--mist); }
.gate-quiet { background: none; border: 0; color: var(--paper); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: 6px; opacity: .8; }
.gate-quiet:hover { opacity: 1; }
.gate-go:focus-visible, .gate-quiet:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* lens over the film, under the words */
#lens { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }
.dim { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(10, 18, 22, .9), rgba(10, 18, 22, .35)); }
.lines { transform-origin: 50% 50%; }
.top { transform-origin: 50% 0; }
.hud { position: fixed; inset: auto 0 0 0; height: 80px; z-index: 6; pointer-events: none; }
.hud > * { pointer-events: auto; }

/* longer copy per scene */

/* the call to action breathes with the swell: its glow rises and falls with it */
.line.final .cta { box-shadow: 0 8px calc(18px + var(--swell, 0) * 22px) rgba(229, 154, 91, calc(.25 + var(--swell, 0) * .3)); transition: opacity .2s; }

/* past the film the native cursor comes back, for the form and the footer */
body.fine.native { cursor: auto; }
body.fine.native a, body.fine.native button, body.fine.native label { cursor: pointer; }
body.fine.native input, body.fine.native textarea { cursor: text; }
body.native #cursor { opacity: 0; }
#cursor { transition: opacity .3s; }

/* the enquiry, a glass panel over the held sunset */
.enquire { position: relative; z-index: 7; min-height: 100vh; display: flex; align-items: center; padding: 120px var(--s6); }
.enquire-panel {
  width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px;
  padding: 48px; border-radius: 20px; background: rgba(15, 29, 36, .55);
  backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .10);
}
.enquire-intro h2 { font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-size: clamp(40px, 4.4vw, 68px); }
.enquire-intro p { margin-top: var(--s3); font-size: 17px; line-height: 1.55; opacity: .88; }
.enquire-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; border: 0; }
.enquire-form .wide { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 8px; border: 0; min-width: 0; }
.f > span, .f legend { font-size: 13px; font-weight: 500; color: var(--mist); }
.f em { font-style: normal; opacity: .7; }
.f input, .f select, .f textarea {
  font: 400 16px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: var(--paper); background: rgba(241, 238, 231, .06);
  border: 1px solid rgba(241, 238, 231, .16); border-radius: 10px; padding: 13px 14px; outline: none;
  transition: border-color .3s, background .3s;
}
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.f select option { color: var(--ink); }
.f textarea { resize: vertical; min-height: 92px; }
.f input::placeholder, .f textarea::placeholder { color: rgba(241, 238, 231, .4); }
.f input:focus, .f select:focus, .f textarea:focus { border-color: rgba(241, 238, 231, .55); background: rgba(241, 238, 231, .09); }
.f input[aria-invalid="true"] { border-color: var(--accent); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: 10px 18px; border-radius: 22px; border: 1px solid rgba(241, 238, 231, .2); font-size: 15px; transition: background .3s, color .3s, border-color .3s; }
.chips input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.submit-row { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.submit { border: 0; cursor: pointer; font-family: inherit; margin-top: 0; }
.form-error { font-size: 14px; color: var(--accent); }
.enquire-done { grid-column: 2; align-self: center; }
.enquire-done h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; }
.enquire-done p { margin-top: 12px; font-size: 16px; line-height: 1.5; opacity: .85; max-width: 28rem; }
.enquire-done:focus { outline: none; }

.credit { z-index: 6; }

[hidden] { display: none !important; }

/* ---------- round 4 (2026-10-20) ---------- */

/* hotspot: the dot is the button, the card holds more text and a link into the enquiry */
.spot .dot { border: 0; padding: 0; cursor: pointer; }
.spot .card { width: 300px; padding: 8px 8px 16px; }
.spot .card .t { font-size: 14px; line-height: 1.5; }
.spot:hover .card, .spot:focus-within .card { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.spot.up:hover .card, .spot.up:focus-within .card { transform: translate(0, 12px); }
.spot.flip:hover .card, .spot.flip:focus-within .card { transform: translate(0, -50%); }
.spot .dot:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.card-link {
  position: relative; display: inline-block; margin: 14px 8px 0; padding-bottom: 4px;
  font-size: 14px; font-weight: 600; color: var(--paper); text-decoration: none; letter-spacing: -0.005em;
}
.card-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform .45s var(--ease);
}
.card-link:hover::after { transform: scaleX(0); transform-origin: right; animation: underline-in .45s var(--ease) .2s forwards; }
@keyframes underline-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.card-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* the instrument, centred under the header */
.instrument {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 14px; pointer-events: none;
}
.compass { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241, 238, 231, .35); }
.compass .dial { position: absolute; inset: 0; will-change: transform; }
.compass .dial::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(241, 238, 231, .35) 0 1deg, transparent 1deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px);
}
.compass .dial span {
  position: absolute; left: 50%; top: 50%; font-size: 9px; font-weight: 600; color: var(--mist);
  width: 10px; height: 10px; margin: -5px; text-align: center; line-height: 10px;
}
.compass .n { transform: translateY(-12px); color: var(--accent) !important; }
.compass .e { transform: translateX(12px); }
.compass .s { transform: translateY(12px); }
.compass .w { transform: translateX(-12px); }
.compass .lubber { position: absolute; left: 50%; top: -5px; width: 1px; height: 8px; margin-left: -.5px; background: var(--paper); }
.readout { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.readout #compassTime { color: var(--mist); }
body.rec .instrument { top: 28px; }

/* ---------- round 5 (2026-10-20): type system and placement ----------
   Three sizes and nothing between: a big, light-weight headline, a small letterspaced index, and
   body text kept deliberately small (13px) in a narrow column, hung from the index so the block
   reads as one composed piece. Each scene places its block where the shot leaves room, light over
   the sea and ink over the sky; the header and the instrument change tone with it. */
.line { position: absolute; opacity: 0; visibility: hidden; color: var(--paper); }
.line[data-tone="ink"] { color: var(--ink); }
.line[data-tone="light"]::before {
  content: ""; position: absolute; inset: -16vh -12vw -14vh -12vw; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(15, 29, 36, .42), rgba(15, 29, 36, .16) 60%, transparent);
}
.eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: .78;
}
.eyebrow span:first-child { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 14px; }
.eyebrow span:first-child::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .6; }
.line h1, .line h2 { font-weight: 500; letter-spacing: -0.052em; line-height: .9; font-size: clamp(44px, 5.4vw, 98px); }
.line h1 { font-size: clamp(72px, 10vw, 184px); letter-spacing: -0.06em; line-height: .84; }
.line > p:not(.eyebrow) {
  margin: 28px 0 0 78px; max-width: 290px; font-size: 13px; line-height: 1.65; letter-spacing: .004em; opacity: .82;
}
.line .cta { margin: 28px 0 0 78px; font-size: 14px; padding: 14px 28px; }

/* placements */
.line[data-pos="split"] {
  left: var(--s6); right: var(--s6); bottom: 8vh;
  display: grid; grid-template-columns: 1fr 300px; column-gap: 48px; align-items: end;
}
.line[data-pos="split"] .eyebrow { grid-column: 1 / -1; }
.line[data-pos="split"] > p:not(.eyebrow) { margin: 0 0 1.2vw 0; }
.line[data-pos="tr"] { right: 64px; top: 17vh; width: min(560px, 42vw); }
.line[data-pos="rm"] { right: 64px; top: 31vh; width: min(460px, 34vw); }
.line[data-pos="tl"] { left: var(--s6); top: 15vh; width: min(600px, 46vw); }
.line.final { pointer-events: auto; }

/* tone: header, instrument, scrubber and cursor follow the words */
.top a, .top .sound, .readout, .compass, #scrub .tip, #cursor .label, .credit { transition: color .8s var(--ease), border-color .8s var(--ease); }
body[data-tone="ink"] .wordmark, body[data-tone="ink"] .nav-link, body[data-tone="ink"] .sound { color: var(--ink); }
body[data-tone="ink"] .sound .bars i { background: var(--ink); }
body[data-tone="ink"] .readout { color: var(--ink); }
body[data-tone="ink"] .readout #compassTime { color: var(--slate); }
body[data-tone="ink"] .compass { border-color: rgba(15, 29, 36, .4); }
body[data-tone="ink"] .compass .dial::before { background: repeating-conic-gradient(rgba(15, 29, 36, .45) 0 1deg, transparent 1deg 30deg); }
body[data-tone="ink"] .compass .dial span { color: var(--slate); }
body[data-tone="ink"] .compass .lubber { background: var(--ink); }
body[data-tone="ink"] #cursor .ring { border-color: rgba(15, 29, 36, .7); }
body[data-tone="ink"] #cursor.small .ring { background: var(--ink); }
body[data-tone="ink"] #cursor .label { color: var(--ink); text-shadow: none; }
body[data-tone="ink"] .credit { color: var(--slate); }

/* the room that the scroll has opened */
.spot.open .card { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.spot.up.open .card { transform: translate(0, 12px); }
.spot.open .card canvas { transform: scale(1); }
.spot.open .dot { animation: none; transform: scale(1.3); }
.spot-group:hover .spot.open:not(:hover) .card { opacity: 0; pointer-events: none; }

/* grain without blending: a blend over a moving canvas recomposites the screen every frame */
.grain { mix-blend-mode: normal; opacity: .035; }
.spot .card { width: 280px; padding: 7px 7px 16px; border-radius: 10px; }
.spot .card .pic { border-radius: 6px; margin-bottom: 14px; }
.spot .card strong { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.spot .card .t { font-size: 12.5px; line-height: 1.6; opacity: .78; }
.card-link { margin-top: 14px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.line[data-pos="mr"] { right: 64px; top: 31vh; width: min(520px, 38vw); }
.line[data-i="5"] { top: 11vh; }
.line[data-i="2"] { width: min(420px, 27vw); }
.line[data-i="5"] > p:not(.eyebrow) { color: var(--paper); opacity: .86; }
.line[data-pos="top-split"] {
  left: var(--s6); right: 64px; top: 12vh;
  display: grid; grid-template-columns: 1fr 300px; column-gap: 48px; align-items: end;
}
.line[data-pos="top-split"] .eyebrow { grid-column: 1 / -1; }
.line[data-pos="top-split"] > p:not(.eyebrow) { margin: 0 0 .8vw 0; }

/* ---------- round 6 (2026-10-20): one left column, a veil, a real navigation bar ---------- */

/* every block flush left, vertically centred; nothing indented */
.line[data-pos="left"] { left: var(--s6); right: auto; top: 50%; bottom: auto; translate: 0 -50%; width: min(520px, 38vw); display: block; }
.line[data-i="2"], .line[data-i="5"] { top: 50%; width: min(520px, 38vw); }
.line[data-tone="light"]::before { display: none; }
.line > p:not(.eyebrow) { margin: 24px 0 0 0; max-width: 340px; color: var(--paper); }
.line .cta { margin: 28px 0 0 0; }
.line h1, .line h2 { letter-spacing: -0.025em; line-height: .98; font-size: clamp(38px, 4vw, 72px); font-weight: 500; }
.line h1 { font-size: clamp(56px, 6.4vw, 116px); letter-spacing: -0.025em; line-height: .92; }

/* the veil: a soft dark blur on the left third, under the words, fading to nothing */
.veil {
  position: fixed; top: 0; bottom: 0; left: 0; width: 60vw; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(8, 16, 20, .62) 0%, rgba(8, 16, 20, .38) 45%, rgba(8, 16, 20, 0) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%); mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
}

/* navigation bar: wordmark, the voyage, and two real buttons */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 var(--s6);
  background: linear-gradient(180deg, rgba(8, 16, 20, .5), rgba(8, 16, 20, 0));
}
.top .wordmark { justify-self: start; font-size: 22px; }
.nav-links { display: flex; gap: 34px; }
.nav-links a { color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 500; opacity: .78; transition: opacity .3s; }
.nav-links a:hover { opacity: 1; }
.nav-links a:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.btn, .btn.sound {
  height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 20px;
  font: 500 14px/1 "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.btn-ghost, .btn.sound { border: 1px solid rgba(241, 238, 231, .32); color: var(--paper); background: rgba(241, 238, 231, .05); }
.btn-ghost:hover, .btn.sound:hover { border-color: rgba(241, 238, 231, .7); opacity: 1; }
.btn-solid { border: 1px solid var(--paper); background: var(--paper); color: var(--ink); }
.btn-solid:hover { background: #fff; border-color: #fff; }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* the instrument moves to the bottom right, out of the bar */
.instrument { top: auto; bottom: 62px; left: auto; right: var(--s6); transform: none; }
.readout { text-align: left; }

/* cards: a little more title, a quieter link */
.spot .card strong { font-size: 17px; letter-spacing: -0.02em; }
.card-link { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* the enquiry: centred, as wide as the footer's content, close to the footer */
.enquire { min-height: 0; display: block; padding: 18vh clamp(20px, 6vw, 88px) 10vh; }
.enquire-panel { width: 100%; max-width: 1004px; margin: 0 auto; }
.spot.down .card { top: -10px; transform: translate(-6px, 0); }
.spot.down:hover .card, .spot.down:focus-within .card, .spot.down.open .card { transform: translate(0, 0); }

/* ---------- round 7 (2026-10-20): the name bottom left, the rest on the right, a lighter veil ---------- */
.line[data-pos="bottom-left"] { left: var(--s6); right: auto; top: auto; bottom: 9vh; translate: none; width: min(900px, 70vw); }
.line[data-pos="bottom-left"] h1 { font-size: clamp(80px, 11vw, 200px); line-height: .86; letter-spacing: -0.025em; }
.line[data-pos="right"] { left: auto; right: 64px; top: 50%; bottom: auto; translate: 0 -50%; width: min(480px, 34vw); text-align: left; }
.line[data-i="2"], .line[data-i="5"] { width: min(480px, 34vw); }

/* lighter: less dark, less blur, and only as wide as it needs to be */
.veil {
  width: 50vw; transition: left .9s var(--ease), right .9s var(--ease);
  background: linear-gradient(90deg, rgba(8, 16, 20, .34) 0%, rgba(8, 16, 20, .18) 50%, rgba(8, 16, 20, 0) 100%);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.veil[data-side="right"] {
  left: auto; right: 0;
  background: linear-gradient(270deg, rgba(8, 16, 20, .34) 0%, rgba(8, 16, 20, .18) 50%, rgba(8, 16, 20, 0) 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 92%); mask-image: linear-gradient(270deg, #000 30%, transparent 92%);
}
.veil[data-side="right"][data-strength="strong"] {
  background: linear-gradient(270deg, rgba(8, 16, 20, .58) 0%, rgba(8, 16, 20, .32) 50%, rgba(8, 16, 20, 0) 100%);
}