@font-face{font-family:"WD Serif";src:url("fonts/EBGaramond-latin.woff2") format("woff2"),url("fonts/EBGaramond.ttf") format("truetype");font-weight:400 600;font-display:swap}
@font-face{font-family:"WD Sans";src:url("fonts/LibreFranklin-latin.woff2") format("woff2"),url("fonts/LibreFranklin.ttf") format("truetype");font-weight:400 700;font-display:swap}
:root{--black:#0a0a0a;--bone:#e9e3d6;--steel:#8f8c86;--line:rgba(233,227,214,.16);--silver:#b4b7bb}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--bone);font:16px/1.6 "WD Sans",-apple-system,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}
.caps{text-transform:uppercase;letter-spacing:.16em;font-weight:500;font-size:12px}
.muted{color:var(--steel)}
.serif{font-family:"WD Serif",Georgia,serif}
nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(10,10,10,.94);border-bottom:1px solid var(--line)}
nav .wm{font-family:"WD Serif",Georgia,serif;letter-spacing:.2em;text-transform:uppercase;font-size:15px}
nav .links a{margin-left:20px}
h1,h2,h3{font-family:"WD Serif",Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.08em;line-height:1.15}
h1{font-size:28px}h2{font-size:26px}h3{font-size:18px;letter-spacing:.12em}
.btn{display:block;width:100%;text-align:center;padding:16px 18px;margin-top:18px;background:var(--bone);color:var(--black);border:0;font:600 13px "WD Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.gen{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);padding:8px 0}

/* the top: the design, alone */
.top{padding:34px 18px 44px;text-align:center}
.art{display:block;width:min(80vw,500px);height:auto;margin:0 auto;color:var(--silver);transition:color .2s,filter .2s}
.art.fire{animation:flash 1.9s ease-out}
@keyframes flash{0%{color:var(--silver);filter:none}7%,34%{color:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,.7)) drop-shadow(0 0 44px rgba(255,255,255,.28))}100%{color:var(--silver);filter:none}}
.flash{background:none;border:0;border-bottom:1px solid var(--line);color:var(--steel);cursor:pointer;padding:2px 0;margin-top:20px;font:500 11px "WD Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.top h1{margin-top:28px}.top .btn{max-width:420px;margin-left:auto;margin-right:auto}

.band{max-width:720px;margin:0 auto;padding:56px 18px;border-top:1px solid var(--line)}
.band>.caps{display:block;margin-bottom:14px}
.def{margin-top:30px}.def:first-of-type{margin-top:0}
.def p{font-family:"WD Serif",Georgia,serif;font-size:25px;line-height:1.3;margin-top:6px}
.stages{list-style:none;margin-top:34px}
.stages li{display:grid;grid-template-columns:46px 1fr;gap:6px;padding:26px 0;border-top:1px solid var(--line)}
.stages .n{font-family:"WD Serif",Georgia,serif;font-size:22px;color:var(--steel);line-height:1.1}
.stages p{margin-top:10px;color:#d6d0c3}
.lead{font-size:17px;color:#d6d0c3;margin-top:12px}
.plain{list-style:none;margin-top:6px}.plain li{padding:12px 0;border-top:1px solid var(--line);color:#d6d0c3}.plain li:first-child{border-top:0}
.list{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}
.list input{background:none;border:1px solid var(--line);color:var(--bone);padding:14px 12px;font:15px "WD Sans",sans-serif;min-width:0}
.list button{background:none;border:1px solid var(--line);color:var(--steel);padding:0 18px;font:600 12px "WD Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}
table.cur{width:100%;border-collapse:collapse;margin-top:16px}table.cur td{padding:11px 0;border-top:1px solid var(--line);vertical-align:top}table.cur td:first-child{width:86px;color:var(--steel);font-variant-numeric:tabular-nums}table.cur a{border-bottom:1px solid var(--line)}

/* product */
main{max-width:1100px;margin:0 auto}
.pdp{display:grid;gap:0}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery img{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5;object-fit:cover}
.pdp .gen{padding-left:18px}
.info{padding:22px 18px 44px}
.price{font-size:20px;margin:8px 0 18px}
.sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 6px}
.sizes button{padding:13px 0;background:none;color:var(--bone);border:1px solid var(--line);font:500 13px "WD Sans",sans-serif;cursor:pointer}
.sizes button[aria-pressed="true"]{background:var(--bone);color:var(--black)}
details{border-top:1px solid var(--line);padding:14px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
details ul{margin:10px 0 0 18px;color:#d6d0c3;font-size:15px}details li{margin:4px 0}
.turn{margin-top:28px}.turn img{aspect-ratio:4/5;object-fit:cover;touch-action:pan-y;user-select:none}
.turn input{width:100%;margin-top:10px;accent-color:var(--bone)}
footer{border-top:1px solid var(--line);padding:24px 18px 44px;font-size:12px;color:var(--steel)}
@media(min-width:860px){h1{font-size:40px}h2{font-size:34px}.top{padding:56px 18px 64px}.band{padding:84px 18px}.def p{font-size:32px}.stages li{grid-template-columns:70px 1fr}.pdp{grid-template-columns:1.25fr 1fr;align-items:start}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:visible}.gallery img{flex:none}.info{position:sticky;top:52px;padding:30px 32px}.pdp .info h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){.art.fire{animation:none;color:#fff}}

/* ---- version 3 (2026-10-08): smaller art, the flash strip, the rating, reviews, product page ---- */
::selection{background:var(--bone);color:var(--black)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
nav .wm{display:flex;align-items:center;gap:10px}nav .mk{width:22px;height:auto;color:var(--bone);flex:none}
.btn{transition:opacity .15s}.btn:hover:not([disabled]){opacity:.86}
.btn.ghost{background:none;color:var(--bone);border:1px solid var(--line)}
.art{width:min(58vw,340px)}
.top{padding:30px 18px 40px}.top h1{margin-top:22px}
.stars{display:inline-flex;gap:2px;vertical-align:-3px;color:var(--bone)}.stars svg{width:15px;height:15px;display:block}
.rating{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#d6d0c3;border-bottom:1px solid transparent}
a.rating:hover{border-bottom-color:var(--line)}
.top .rating{margin-top:16px}
.small{font-size:12px}
/* the strip above the product */
.strip{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 18px;border-bottom:1px solid var(--line)}
.strip .art{width:96px;margin:0;cursor:pointer;flex:none}
.strip p{max-width:170px;line-height:1.5}
/* product */
.media{position:relative}
.count{position:absolute;right:14px;bottom:14px;background:rgba(10,10,10,.72);padding:4px 9px;font-size:11px;letter-spacing:.14em}
.info .rating{margin-top:10px}.info .lead{font-size:16px}
.price{font-size:22px;margin:14px 0 4px}
.sizehead{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.sizehead a{border-bottom:1px solid var(--line);color:var(--steel);font-size:12px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:14px 10px 14px 0}.facts div+div{padding-left:12px;border-left:1px solid var(--line)}
.facts b{display:block;font-weight:500;font-size:13.5px;margin-top:4px;line-height:1.35}
details:first-of-type{border-top:0}
/* reviews */
.rsum{display:flex;align-items:center;gap:18px;margin-top:6px}
.rsum .big{font-family:"WD Serif",Georgia,serif;font-size:58px;line-height:1}
.rsum .stars svg{width:18px;height:18px}
.rev{padding:20px 0;border-top:1px solid var(--line)}.rev:first-child{margin-top:26px}
.rev .who{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--steel)}.rev .who b{color:var(--bone);font-weight:500}
.rev p{margin-top:8px;color:#d6d0c3}
.empty{margin-top:26px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--steel)}
.write{border:0;padding:0;margin-top:22px}.write summary{display:block}.write[open] summary{display:none}
form.rf{display:grid;gap:14px;margin-top:6px}
form.rf label{display:grid;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
form.rf input[type=text],form.rf textarea{background:none;border:1px solid var(--line);color:var(--bone);padding:13px 12px;font:15px/1.5 "WD Sans",sans-serif;letter-spacing:0;text-transform:none;width:100%;border-radius:0}
form.rf textarea{min-height:130px;resize:vertical}
.rate{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.rate input{position:absolute;opacity:0;width:1px;height:1px}
.rate label{display:block;cursor:pointer;color:var(--bone)}.rate label svg{width:30px;height:30px;opacity:.26;transition:opacity .1s}
.rate input:checked~label svg,.rate label:hover svg,.rate label:hover~label svg{opacity:1}
.rate input:focus-visible+label{outline:1px solid var(--bone);outline-offset:3px}
.hp{position:absolute;left:-9999px}
#rmsg{min-height:20px;color:#d6d0c3}
footer{padding:26px 18px 46px}
@media(min-width:860px){.art{width:min(34vw,360px)}.strip .art{width:112px}.strip p{max-width:none}.gallery img:first-child{grid-column:1/-1}.count{display:none}.rsum .big{font-size:72px}}

/* ---- the fire (2026-10-08). A looping clip of flames on black, behind the wordmark. Off unless the page asks for it. ---- */
.artwrap{position:relative;display:inline-block;isolation:isolate}
.artwrap .art{position:relative;z-index:1}
.flames{position:absolute;z-index:0;left:50%;bottom:-17%;width:min(100vw,225%);transform:translateX(-50%);pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to top,transparent 0,#000 16%,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(to top,transparent 0,#000 16%,#000 62%,transparent 100%);mask-composite:intersect}
.flames.on{opacity:.9}
.flames.white{filter:grayscale(1) contrast(1.15) brightness(1.1)}
.strip .artwrap .flames{width:300%;bottom:-18%}

/* ---- the button (2026-10-08). Reflective film: silver at rest, a sheen passing over, white with a halo under the hand. ---- */
.cta{position:relative;display:block;max-width:440px;margin:22px auto 0;padding:18px 16px 15px;background:linear-gradient(180deg,#f3efe5,#d6d0c3);color:#0a0a0a;text-align:center;overflow:hidden;cursor:pointer;
  transition:transform .12s,box-shadow .28s,background .28s;-webkit-tap-highlight-color:transparent}
.cta b{display:block;font:700 clamp(12.5px,3.7vw,15.5px)/1.2 "WD Sans",sans-serif;letter-spacing:.17em;text-transform:uppercase}
.cta span{display:block;margin-top:6px;font:500 11px/1.2 "WD Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.68}
.cta::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-18deg);animation:sheen 4.2s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,58%{left:-60%}100%{left:135%}}
.cta:hover,.cta:focus-visible{background:#fff;box-shadow:0 0 0 1px #fff,0 0 24px rgba(255,255,255,.6),0 0 80px rgba(255,255,255,.24)}
.cta:active{transform:scale(.965)}
.boom{position:fixed;inset:0;width:100vw;height:100vh;z-index:50;pointer-events:none}
.veil{position:fixed;inset:0;background:#0a0a0a;z-index:49;opacity:0;pointer-events:none;transition:opacity .42s ease-in}
.veil.on{opacity:1}
body.shake>section,body.shake>nav{animation:shake .32s linear}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-5px,3px)}30%{transform:translate(6px,-4px)}45%{transform:translate(-4px,-3px)}60%{transform:translate(4px,4px)}80%{transform:translate(-2px,1px)}}
.strip,.strip~main{animation:enter .7s ease-out}
@keyframes enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cta::after{animation:none;display:none}.strip,.strip~main{animation:none}}

/* ---- 2026-10-08, late: the only drop, value first, the price beside the button, a small foot ---- */
.artwrap .art{filter:drop-shadow(0 1px 6px rgba(0,0,0,.9))}
.only{font-family:"WD Serif",Georgia,serif;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);margin-top:12px}
.when{margin-top:6px}
.value{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.value li{padding:12px 0;border-bottom:1px solid var(--line);color:#d6d0c3;font-size:15px;line-height:1.45}
.value b{color:var(--bone);font-weight:600;letter-spacing:.02em}
.buyrow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:stretch;margin-top:14px}
.buyrow .btn{margin-top:0}
.pricebox{display:flex;flex-direction:column;justify-content:center;padding:0 16px 0 2px;border-right:1px solid var(--line)}
.pricebox b{font-family:"WD Serif",Georgia,serif;font-weight:500;font-size:30px;line-height:1.05;margin-top:2px}
.foot{max-width:720px;margin:0 auto;padding:34px 18px 30px;border-top:1px solid var(--line);text-align:center}
.foot .caps{color:var(--steel)}.foot .only{font-size:16px;margin-top:8px}


/* ---- the countdown (2026-10-08). Kyle: a countdown to the release, $100 on preorder, $120 from release. A registrar's
   notice, typeset: the serif at display size, tabular figures, hairlines, the absolute date beside it. Nothing blinks. ---- */
.drop{margin:14px auto 0;max-width:560px}
.clock{display:flex;justify-content:center;border-bottom:1px solid var(--line);padding-bottom:12px}
.clock>div{flex:1;text-align:center;padding:0 4px}.clock>div+div{border-left:1px solid var(--line)}
.clock b{display:block;font:500 clamp(44px,13vw,96px)/1 "WD Serif",Georgia,serif;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em;color:var(--bone);transition:opacity .12s}
.clock span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.18em;color:var(--steel)}
.drop .when{margin-top:12px;line-height:1.7}.drop .when a{border-bottom:1px solid var(--line);margin-left:12px;white-space:nowrap}
.drop .local{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:none}
.drop.done .clock{display:none}
.art.release{animation:flash 3.2s ease-out}
/* the product page strip carries the same clock, one step smaller */
.strip{flex-direction:column;gap:4px;padding:18px 18px 14px}.strip .art{width:120px}
.strip .drop{width:100%;margin-top:6px}.strip .clock b{font-size:clamp(36px,10vw,72px)}
@media(min-width:860px){.strip .art{width:132px}.strip .drop{max-width:620px}}
/* the price row: two facts, no theatre */
.pricebox .pre,.pricebox .post{display:flex;flex-direction:column}
.pricebox .til{font-size:10px;margin-top:4px}.pricebox .from{margin-top:10px}.pricebox b.later{font-size:22px;color:#d6d0c3}
.pricebox{min-width:128px}
/* share: the device's own sheet */
.sharerow{display:flex;align-items:center;gap:14px;margin-top:14px;justify-content:center}
.sharerow .share{display:inline-block;width:auto;margin:0;padding:10px 22px;font-size:11px}
.info .sharerow{justify-content:flex-start}
/* reviews (Kyle, 2026-10-08: smaller; then "right up under the product images... premium... understated but elite").
   An editorial block: a hairline, the label and the control on one line, one rating row, the quiet line, the list. */
.reviews{padding:18px 18px 6px;border-top:1px solid var(--line)}
.rhead{display:flex;justify-content:space-between;align-items:baseline}
.wlink{background:none;border:0;padding:0 0 2px;font:500 11px "WD Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--line);cursor:pointer}
.wlink:hover{color:var(--bone)}
.rrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-top:14px;color:#d6d0c3;font-size:13px}
.rrow .stars{align-self:center}.rrow .stars svg{width:15px;height:15px}
.rrow .num{font:500 24px/1 "WD Serif",Georgia,serif;color:var(--bone);font-variant-numeric:tabular-nums}
.rrow .n{letter-spacing:.02em}
.reviews .empty{margin:14px 0 0;padding:0;border:0;font:400 17px/1.4 "WD Serif",Georgia,serif;color:#bdb7aa}
.reviews .rev{padding:16px 0 0;border-top:0;margin-top:14px;border-top:1px solid var(--line)}.reviews .rev:first-child{margin-top:14px}
.reviews form.rf{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(min-width:860px){.pdp{grid-template-rows:auto 1fr}.media{grid-column:1;grid-row:1}.reviews{grid-column:1;grid-row:2;padding:22px 0 0 0;margin-right:40px}.info{grid-column:2;grid-row:1/3}}

/* 2026-10-08, after the first phone screenshots: the hidden form stays hidden, the date line centres and never orphans the time */
form.rf[hidden]{display:none}
.nw{white-space:nowrap}
.strip .when,.info .when{text-align:center}.info .when{text-align:left}
.drop .when{text-wrap:balance}
/* the second price block is hidden until the release; the button sits level with the price stack, at its own height */
.pricebox .post[hidden]{display:none}
.buyrow{align-items:center}
@media(min-width:860px){.reviews{padding-bottom:48px}}

/* ---- 2026-10-08, late (landing lane): the colour option, quantity, more than one piece ---- */
.gallery[hidden]{display:none}
.colours{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.colours button{display:flex;align-items:center;gap:10px;padding:11px 12px;background:none;color:var(--bone);border:1px solid var(--line);font:500 13px "WD Sans",sans-serif;cursor:pointer;text-align:left}
.colours button i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(233,227,214,.45);flex:none}
.colours button[aria-pressed="true"]{border-color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}
.qty{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.step{display:inline-flex;align-items:center;border:1px solid var(--line)}
.step button{width:40px;height:40px;background:none;border:0;color:var(--bone);font:400 18px "WD Sans",sans-serif;cursor:pointer}
.step output{min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
#lines{list-style:none;margin-top:10px}
#lines li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
#lines li:last-child{border-bottom:1px solid var(--line)}
#lines .step button{width:34px;height:34px;font-size:16px}
#lines .rm{background:none;border:0;border-bottom:1px solid var(--line);color:var(--steel);font:500 11px "WD Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:2px 0}
#ordersum{margin-top:12px;font-family:"WD Serif",Georgia,serif;font-size:22px;min-height:0}
#ordersum:empty{display:none}


/* ==== THE PHONE PASS (2026-10-08). Kyle: "go through everything and verify its all very good looking and carefully aligned
   and the aesthetic is on point for mobile". Measured by mobile_audit.mjs at 320, 360, 375, 390, 430 and 844x390; every
   rule here answers a failure that audit named. The first part applies everywhere and changes nothing at 860 and up that
   a mouse can see; the second part is phones only. One gutter (18px), one spacing scale, seven type sizes. ==== */
:root{--g:18px;--s1:4px;--s2:8px;--s3:12px;--s4:18px;--s5:24px;--s6:36px;--s7:56px;--bar:52px}
html{scroll-padding-top:calc(var(--bar) + 14px)}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
footer{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
.boom{width:100%;height:100%}
h1,h2,h3,.only,.caps,.when{text-wrap:balance}
p,li{text-wrap:pretty}
.pricebox b,#ordersum{font-variant-numeric:tabular-nums lining-nums}
.band img{aspect-ratio:4/5;object-fit:cover}
.gallery{scrollbar-width:none;overscroll-behavior-x:contain}.gallery::-webkit-scrollbar{display:none}
a,button,summary,label{-webkit-tap-highlight-color:transparent}button,summary,.cta{touch-action:manipulation}
/* a field under 16px makes iPhone Safari zoom the page on focus and leave it zoomed */
.list input,form.rf input[type=text],form.rf textarea{font-size:16px}
/* a dot separated line: every item carries its dot in a box that falls outside the clipped left edge when the item starts a line */
.dl{display:block;overflow:hidden}.dl>span{display:block;margin-left:-1.5em}
.di{display:inline-block;white-space:nowrap}.dot{display:inline-block;width:1.5em;text-align:center;white-space:pre}
/* not yet: a control that is waiting is drawn as waiting, not as a faded live one */
.btn[disabled]{opacity:1;background:none;color:var(--steel);border:1px solid var(--line)}
/* touch: a hover style sticks after a tap, so a finger gets a pressed state and the resting look back */
@media(hover:none){.cta:hover{background:linear-gradient(180deg,#f3efe5,#d6d0c3);box-shadow:none}.btn:hover:not([disabled]){opacity:1}a.rating:hover{border-bottom-color:transparent}.wlink:hover{color:var(--steel)}}
.btn:active:not([disabled]),.sizes button:active,.colours button:active,.step button:active{transform:translateY(1px)}
.sizes button,.colours button,.step button,.btn{transition:transform .09s,opacity .15s}
@media(prefers-reduced-motion:reduce){.btn:active:not([disabled]),.sizes button:active,.colours button:active,.step button:active,.cta:active{transform:none}}

@media(max-width:859px){
/* the bar: one line, 52px, solid */
nav{height:var(--bar);padding:0 var(--g);background:#0a0a0a}
nav .wm{min-height:44px;white-space:nowrap;font-size:clamp(11.5px,3.5vw,15px);letter-spacing:.16em}nav .mk{width:20px}
nav .links{display:flex;margin-right:-6px}
nav .links a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:0;padding:0 6px;font-size:clamp(11px,3.1vw,12px);letter-spacing:.14em}
/* type: 11 micro, 12 label, 14 meta, 16 body, 18 minor title, 20 figure, 26 title; the clock and the main button stay fluid */
h1,h2,.def p,.pricebox b{font-size:26px}
.only,.foot .only,.reviews .empty,.stages .n{font-size:18px}
.pricebox b.later,#ordersum,.rrow .num{font-size:20px}
.lead,.info .lead,.value li,details ul,#lines li,.reviews form .small{font-size:16px}
.rating,.rrow,.rev .who,.sizes button,.colours button,.info>.small{font-size:14px}
.btn,.flash,.sharerow .share,.wlink,#lines .rm,.cta span,.count,.drop .local{font-size:12px}
.clock span,.pricebox .til{font-size:11px;letter-spacing:.14em}
/* a text control: the same quiet underlined label, with a 44px box for the thumb */
.flash,.wlink,#lines .rm,.sizehead a,.drop .when a{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(233,227,214,.3);text-decoration-thickness:1px;text-underline-offset:6px}
/* the landing's first screen: art, name, clock, date, button, whole, inside 667px */
.top{padding:var(--s2) var(--g) var(--s6)}
.art{width:min(44vw,210px)}
.top .flash{margin-top:0}.top h1{margin-top:0}.only{margin-top:var(--s1)}
.drop{margin-top:var(--s3)}
.clock{padding-bottom:10px}.clock b{font-size:clamp(40px,12vw,56px)}.clock span{margin-top:6px}
.cta{margin-top:var(--s4)}
.top .rating{margin-top:var(--s2);min-height:44px}
.sharerow{margin-top:0}.sharerow .share{display:inline-flex;align-items:center;min-height:44px;padding:0 24px}
.info .sharerow{margin-top:var(--s3)}
/* the release line: label, day, time and the calendar link are items that wrap whole; the separators are spacing here */
.when{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:14px;row-gap:0;line-height:1.7}
.when>span[data-state-text]{display:contents}.when .sep{display:none}.when .nw{color:var(--bone)}
.when .local{flex-basis:100%;text-align:center}.when .local:empty{display:none}
.drop .when{margin-top:10px}.drop .when a{margin:-12px 0 -12px 0}
.info .when{justify-content:flex-start}
/* the product strip: the mark and the clock on one line, the date under it, so the picture owns the screen */
.strip{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--s4);row-gap:var(--s2);padding:10px var(--g) var(--s3)}
.strip .art{width:60px}.strip p{max-width:none}
.strip .drop{display:contents}
.strip .clock{border-bottom:0;padding-bottom:0}.strip .clock b{font-size:clamp(28px,8.6vw,36px)}.strip .clock span{margin-top:var(--s1)}
.strip .when{grid-column:1/-1;margin-top:0}
/* the product column */
.reviews{padding:var(--s4) var(--g) var(--s1)}.rhead{align-items:center}.wlink{margin:-12px 0}
.rrow{margin-top:var(--s3)}.reviews .empty{margin-top:var(--s3)}
.rate{gap:0;margin-left:-7px}.rate label{padding:7px}
.info{padding:var(--s5) var(--g) var(--s6)}
.info .rating{display:none}
.value{margin-top:var(--s4)}
.colours{gap:var(--s2)}.colours button{min-height:48px}
.sizehead{align-items:center;margin-top:var(--s3)}
.sizes{gap:6px;margin:var(--s1) 0 0}.sizes button{min-height:48px;padding:0}
.qty{margin-top:var(--s4)}.step button{width:48px;height:48px}
#more{margin-top:var(--s2) !important}
#lines .step button{width:44px;height:44px}
.buyrow{margin-top:var(--s4)}.btn{min-height:52px}
details{padding:0}summary{display:flex;align-items:center;justify-content:space-between;min-height:52px}
summary::after{content:"+";font:400 18px "WD Sans",sans-serif;letter-spacing:0;color:var(--steel)}details[open]>summary::after{content:"\2212"}
details ul{margin:0 0 var(--s4) var(--s4)}
/* the five stages: the numeral sits over the title, so the page keeps one left edge */
.stages li{display:block;padding:var(--s5) 0}.stages .n{display:block;margin-bottom:6px;letter-spacing:.08em}.stages p{margin-top:var(--s2)}
.foot{padding:var(--s6) var(--g)}
}
@media(max-width:360px){.sizes{gap:4px}#lines li{grid-template-columns:1fr auto}#lines li>span{grid-column:1/-1}}
/* phone pass, after the first look: hidden stays hidden, the share button centres, a little air over the art */
[hidden]{display:none !important}
[data-share-msg]:empty{display:none}
@media(max-width:859px){.top{padding-top:var(--s3)}.strip{padding:var(--s2) var(--g) 10px;row-gap:6px}}
/* phone pass: four equal clock cells that cannot push the page sideways; the narrowest phones get a smaller mark beside it */
.clock>div{flex:1 1 0;min-width:0}
@media(max-width:360px){.strip{column-gap:10px}.strip .art{width:44px}.strip .clock>div{padding:0 1px}.strip .clock span{letter-spacing:.02em}.clock span{letter-spacing:.08em}}
@media(max-width:859px){.lead .dl{margin-top:var(--s1)}.lead .dl a{display:inline-flex;align-items:center;min-height:44px}}
/* phone pass, the 320 wide look: the wordmark clears the links, the saved line's stepper keeps its size, the price note stays on one line */
@media(max-width:859px){#lines .step{justify-self:start}.pricebox .til{white-space:nowrap}}
@media(max-width:360px){.pricebox .til{letter-spacing:.06em}.strip .art{width:40px}.strip .clock>div{padding:0 3px}.strip .clock span{letter-spacing:0}}
@media(max-width:340px){nav .wm{font-size:11px;letter-spacing:.11em;gap:8px}nav .mk{width:18px}}
/* phone pass, Kyle 2026-10-08: "make sure the calendar and timer are centred and carefully designed". On a phone the release
   notice is one centred stack on both pages: the clock, the label, the day and the time on one line, the calendar control. */
@media(max-width:859px){
.when{display:flex;flex-direction:column;align-items:center;flex-wrap:nowrap;row-gap:0;line-height:1.6;text-align:center}
.when>span[data-state-text]{display:block}.when .rl{display:block;font-size:11px;letter-spacing:.2em}
.when .sep{display:inline}.when .rl+.sep{display:none}
.drop .when{margin-top:var(--s3)}
.drop .when a{margin:var(--s3) 0 0;min-height:44px;padding:0 var(--s4);border:1px solid var(--line);text-decoration:none;color:var(--bone);font-size:12px}
.info .when{align-items:flex-start;text-align:left}
.strip{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3) var(--g) var(--s4)}
.strip .art{width:52px}.strip .drop{display:block;width:100%;margin-top:0}
.strip .clock{border-bottom:1px solid var(--line);padding-bottom:10px}.strip .clock b{font-size:clamp(34px,10vw,44px)}.strip .clock span{margin-top:6px}
.strip .when{margin-top:var(--s3)}
}
@media(max-width:360px){.when .nw{letter-spacing:.07em;font-size:11px}.strip .art{width:44px}.strip .clock>div{padding:0 4px}.strip .clock span{letter-spacing:.08em}}
/* THE DEFINITIONS (Kyle 2026-10-08: "those are important definitions... that should mean something... lets just get it right").
   A dictionary entry: the headword in the serif at title size, its part of speech, one numbered sense per line, the last
   sense of DROPOUT in bone. One left edge. The same block serves the landing and the About page. */
.lexband{padding-top:var(--s6);padding-bottom:var(--s6)}
.lex{margin-top:var(--s4)}.lexband>.lex:first-child{margin-top:0}
.entry+.entry{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.entry dt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s3)}
.entry dt .caps{flex-basis:100%;margin-bottom:var(--s2)}
.entry .hw{font:500 26px/1.1 "WD Serif",Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.entry .pos{font:400 14px/1 "WD Sans",sans-serif;color:var(--steel)}
.entry ol{list-style:none;margin-top:var(--s3);counter-reset:sense}
.entry li{display:grid;grid-template-columns:26px 1fr;align-items:baseline;padding:3px 0;font:400 20px/1.35 "WD Serif",Georgia,serif;color:#bdb7aa;counter-increment:sense}
.entry li::before{content:counter(sense);font:500 11px/1 "WD Sans",sans-serif;letter-spacing:.06em;color:var(--steel);font-variant-numeric:tabular-nums}
.entry li.key{color:var(--bone)}
@media(min-width:860px){.lexband{padding-top:72px;padding-bottom:72px}.lex{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:56px}.entry+.entry{margin-top:0;padding-top:0;border-top:0}.entry .hw{font-size:34px}.entry li{font-size:23px;grid-template-columns:30px 1fr}}
/* Kyle 2026-10-08: "for the mobile version they should almost be side by side because stacked it takes up the whole screen".
   A pair of entries (the landing) sits in two columns on a phone with a hairline between; three entries (About) stay stacked. */
@media(max-width:859px){
.lex:has(>.entry:nth-child(2):last-child){display:grid;grid-template-columns:1fr 1fr}
.lex:has(>.entry:nth-child(2):last-child) .entry{padding-right:var(--s3)}
.lex:has(>.entry:nth-child(2):last-child) .entry+.entry{margin-top:0;padding:0 0 0 var(--s4);border-top:0;border-left:1px solid var(--line)}
.lex:has(>.entry:nth-child(2):last-child) .hw{font-size:20px;letter-spacing:.08em}
.lex:has(>.entry:nth-child(2):last-child) dt{column-gap:var(--s2)}
.lex:has(>.entry:nth-child(2):last-child) .pos{font-size:12px}
.lex:has(>.entry:nth-child(2):last-child) ol{margin-top:var(--s2)}
.lex:has(>.entry:nth-child(2):last-child) li{grid-template-columns:16px 1fr;font-size:16px;line-height:1.3;padding:4px 0}
}
@media(max-width:360px){.lex:has(>.entry:nth-child(2):last-child) .hw{font-size:18px;letter-spacing:.05em}.lex:has(>.entry:nth-child(2):last-child) .entry+.entry{padding-left:var(--s3)}}