:root { --ink:#0d0b09; --bone:#efe7da; --mute:#a3978a; --line:#efe7da26; --accent:#e0652a; --leave:620; --e:cubic-bezier(.2,.8,.2,1); --serif:'Instrument Serif',Georgia,serif; --sans:'Archivo','Helvetica Neue',sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:#0d0b09; overflow-x:clip; }
body { background:radial-gradient(90% 70% at 62% 38%, #2b211a, #0d0b09 72%) fixed #0d0b09; color:var(--bone); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button, input { font:inherit; color:inherit; }
html.has-cur, html.has-cur * { cursor:none !important; }

/* Layers: ghost type (1) < WebGL canvas (2) < copy (3) */
#c { position:fixed; inset:0; width:100%; height:100vh; height:100lvh; z-index:2; pointer-events:none; }
html.no-gl #c { display:none; }
.over { position:relative; z-index:3; } .ghost { position:relative; z-index:1; }
section { position:relative; }

.k-cur i { position:absolute; width:10px; height:10px; margin:-5px; border-radius:50%; background:var(--bone); transition:transform .35s var(--e), background .3s; mix-blend-mode:difference; }
.k-cur.on i { transform:scale(5); } .k-cur.label i { transform:scale(8.5); background:var(--accent); mix-blend-mode:normal; }
.k-cur span { position:absolute; transform:translate(-50%,-50%); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .2s; }
.k-cur.label span { opacity:1; }

/* Curtain: a baseline sweep */
.curtain { position:fixed; inset:0; z-index:100; background:#0d0b09; display:grid; place-items:center; clip-path:inset(0); transition:clip-path .85s cubic-bezier(.76,0,.2,1); }
html.ready .curtain { clip-path:inset(0 0 0 100%); pointer-events:none; }
html.leaving .curtain { animation:sweep .58s cubic-bezier(.76,0,.2,1) forwards; transition:none; }
@keyframes sweep { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
.curtain-in { text-align:center; }
.curtain-in b { display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(64px,11vw,150px); line-height:1; }
.curtain-in span { font-size:11px; letter-spacing:.34em; color:var(--mute); font-variant-numeric:tabular-nums; }
html:not(.first) .curtain-in span { visibility:hidden; }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:95; display:flex; align-items:center; gap:34px; padding:22px 4vw; transition:transform .5s var(--e); }
html.down:not(.menu-open) .nav { transform:translateY(-130%); }
.logo { font-family:var(--serif); font-style:italic; font-size:34px; line-height:1; margin-right:auto; }
.nav nav { display:flex; gap:30px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.nav nav a { position:relative; padding:6px 0; opacity:.7; transition:opacity .25s; }
.nav nav a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e); }
.nav nav a:hover, .nav nav a[aria-current] { opacity:1; } .nav nav a:hover::after, .nav nav a[aria-current]::after { transform:scaleX(1); transform-origin:left; }
.btn { display:inline-flex; align-items:center; gap:10px; border-radius:60px; padding:16px 28px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--bone); color:var(--ink); border:0; transition:background .3s, color .3s, box-shadow .3s; white-space:nowrap; }
.btn:hover { background:var(--accent); color:var(--ink); }
.btn.line { background:none; color:var(--bone); box-shadow:inset 0 0 0 1px var(--line); } .btn.line:hover { box-shadow:inset 0 0 0 1px var(--bone); background:none; color:var(--bone); }
.nav .btn { padding:11px 20px; font-size:11px; }
.burger { display:none; width:46px; height:46px; border-radius:50%; background:none; border:1px solid var(--line); position:relative; }
.burger i { position:absolute; left:13px; right:13px; height:1px; background:var(--bone); top:18px; transition:transform .35s var(--e), top .35s var(--e); } .burger i + i { top:26px; }
html.menu-open .burger i { top:22px; transform:rotate(45deg); } html.menu-open .burger i + i { transform:rotate(-45deg); }
.menu { position:fixed; inset:0; z-index:90; background:#0d0b09f5; display:flex; flex-direction:column; justify-content:center; padding:0 7vw; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
html.menu-open .menu { opacity:1; visibility:visible; }
.menu a { font-family:var(--serif); font-style:italic; font-size:clamp(56px,16vw,120px); line-height:1.02; translate:0 34px; opacity:0; transition:translate .6s var(--e), opacity .4s, color .2s; }
html.menu-open .menu a { translate:0; opacity:1; transition-delay:calc(.08s + var(--n) * .06s); }
.menu a:hover, .menu a[aria-current] { color:var(--accent); }

/* Type */
h1, h2, .serif { font-family:var(--serif); font-weight:400; line-height:.92; letter-spacing:-.015em; }
h1 { font-size:clamp(64px,9.4vw,170px); } h2 { font-size:clamp(48px,6.4vw,112px); }
h1 em, h2 em { font-style:italic; color:var(--accent); transition:color .6s; }
.kicker { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin-bottom:22px; }
.kicker::before { content:''; width:34px; height:1px; background:var(--accent); transition:background .6s; }
.lede { font-size:clamp(16px,1.25vw,19px); color:#d9cfc1; max-width:31em; margin-top:26px; }
.row { display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap; margin-top:34px; }
.price { font-family:var(--serif); font-size:34px; }
.beat { min-height:150vh; display:flex; align-items:center; padding:0 4vw; }
.beat.first { min-height:100vh; min-height:100svh; }
.beat .copy { width:min(44%,600px); } .beat.r .copy { margin-left:auto; }
.beat.low { align-items:flex-end; padding-bottom:14vh; }
.scrim::before { content:''; position:absolute; inset:-140px -200px; z-index:-1; background:radial-gradient(closest-side, #0d0b09f5 48%, #0d0b0900); pointer-events:none; }
.scrim .lede { text-shadow:0 1px 14px #0d0b09, 0 0 2px #0d0b09; }
.scrim { position:relative; }
.hint { position:absolute; left:4vw; bottom:30px; z-index:3; font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:14px; }
.hint i { width:46px; height:1px; background:var(--line); position:relative; overflow:hidden; } .hint i::after { content:''; position:absolute; inset:0; background:var(--accent); animation:slide 1.8s ease-in-out infinite; }
@keyframes slide { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.figs { display:flex; gap:clamp(22px,4vw,60px); margin-top:38px; flex-wrap:wrap; }
.figs b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(44px,5vw,84px); line-height:1; font-variant-numeric:tabular-nums; }
.figs b i { font-style:italic; font-size:.4em; color:var(--accent); margin-left:4px; }
.figs div > span { font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.list { list-style:none; margin-top:30px; border-top:1px solid var(--line); }
.list li { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.list li span { color:var(--mute); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.no { font-family:var(--serif); font-style:italic; font-size:clamp(70px,9vw,150px); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--mute); display:block; margin-bottom:10px; }

/* Colourways */
.swatches { display:flex; gap:12px; }
.swatches button { width:44px; height:44px; border-radius:50%; border:0; background:var(--c); box-shadow:0 0 0 1px var(--line), inset 0 -6px 10px #0005, inset 0 6px 10px #fff2; position:relative; transition:transform .35s var(--e); }
.swatches button::after { content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--bone); opacity:0; transform:scale(.8); transition:opacity .3s, transform .35s var(--e); }
.swatches button:hover { transform:scale(1.08); } .swatches button.on::after { opacity:1; transform:none; }
.pinned { height:280vh; } .pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:3; }
.pin.back { z-index:1; } .pin.back + .pin { margin-top:-100vh; margin-top:-100svh; }
.ways .gname { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-size:clamp(120px,25vw,440px); line-height:.8; white-space:nowrap; color:var(--accent); opacity:.85; transition:color .6s; transform:translateY(-17vh) scale(calc(.8 + var(--p) * .16)); }
.ways .head { position:absolute; top:13vh; left:4vw; right:4vw; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.ways .head h2 { font-size:clamp(40px,4.6vw,80px); }
.ways .foot { position:absolute; bottom:7vh; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:18px; }
.ways .foot p { font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); }
.ways .foot p b { color:var(--bone); font-weight:600; }

.cta { min-height:120vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:16vh 4vw 0; overflow:clip; }
.cta .wm { position:absolute; left:0; right:0; top:26vh; font-family:var(--serif); font-style:italic; font-size:clamp(130px,30vw,540px); line-height:.8; white-space:nowrap; text-align:center; color:var(--bone); opacity:.92; z-index:1; transform:translateY(calc((1 - var(--p)) * 12vh)); }
.cta h2 { font-size:clamp(34px,3.6vw,60px); }

/* Anatomy spec sheet */
.specs { min-height:140vh; padding:14vh 4vw 0; }
.sheet { display:grid; grid-template-columns:repeat(5,1fr); margin-top:46px; border-top:1px solid var(--line); }
.sheet div { padding:24px 18px; border-right:1px solid var(--line); } .sheet div:first-child { padding-left:0; } .sheet div:last-child { border:0; }
.sheet small { font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
.sheet b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.8vw,64px); line-height:1.05; margin-top:8px; white-space:nowrap; }
.sheet b i { font-style:italic; font-size:.4em; color:var(--accent); margin-left:4px; }

/* Customiser */
.make { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:110px 4vw 50px; }
.make .copy { width:min(40%,470px); }
.make h1 { font-size:clamp(56px,6.6vw,118px); }
.field { display:grid; gap:8px; margin-top:22px; }
.field > span, .field > label { font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; }
.field b { color:var(--bone); font-weight:600; }
.inputs { display:grid; grid-template-columns:1fr 92px; gap:12px; }
input.t { width:100%; background:#efe7da0d; border:1px solid var(--line); border-radius:14px; padding:15px 16px; font-size:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; outline:0; transition:border-color .3s, background .3s; }
input.t:focus { border-color:var(--accent); background:#efe7da17; } input.t::placeholder { color:#efe7da55; font-weight:400; letter-spacing:.04em; text-transform:none; }
.note { font-size:13px; color:var(--mute); margin-top:12px; min-height:20px; }
.drag { position:absolute; right:4vw; bottom:34px; font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); z-index:3; }
#orderDone { margin-top:18px; color:var(--bone); max-width:30em; } #orderDone:empty { display:none; }
form.order { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; } form.order input.t { flex:1 1 220px; text-transform:none; font-weight:400; letter-spacing:0; }

/* Lab */
.out { margin-top:20px; font-family:var(--serif); font-style:italic; font-size:24px; color:var(--accent); min-height:36px; }

footer { position:relative; z-index:3; padding:70px 4vw 34px; border-top:1px solid var(--line); background:#0d0b09; }
footer .cols { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px 40px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
footer .cols div { display:flex; gap:28px; flex-wrap:wrap; } footer a:hover { color:var(--accent); }
footer .big { font-family:var(--serif); font-style:italic; font-size:clamp(40px,5vw,84px); line-height:1; color:var(--bone); margin-bottom:44px; max-width:14em; }

@media (max-width:860px) {
  .nav { padding:16px 5vw; } .nav nav, .nav .btn { display:none; } .burger { display:block; }
  .beat, .beat.r { align-items:flex-start; padding:15vh 5vw 0; } .beat.first { padding-top:13vh; } .beat.low { align-items:flex-start; padding-bottom:0; }
  .beat .copy, .beat.r .copy { width:100%; margin:0; }
  .hint, .drag { display:none; }
  .lede { margin-top:18px; } .row { margin-top:24px; }
  .ways .head { top:11vh; flex-direction:column; align-items:flex-start; } .ways .gname { font-size:21vw; transform:translateY(-14vh) scale(calc(.9 + var(--p) * .2)); }
  .sheet { grid-template-columns:1fr 1fr; } .sheet div { border-right:0; border-bottom:1px solid var(--line); padding:14px 0 !important; }
  .specs { padding-top:12vh; }
  .make { align-items:flex-end; padding:0 5vw 24px; } .make .copy { width:100%; }
  .make h1 { font-size:44px; } .make .kicker, .make .lede { display:none; } .field { margin-top:14px; } .make .row { margin-top:16px; }
  .cta .wm { top:30vh; }
  footer .cols { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .curtain, .menu { transition:none; } .hint i::after { animation:none; } }