/* Base reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Bodera (Rantau Type) is a commercial font, not on Google Fonts. Drop the licensed web files into fonts/ next to this page
   and they load automatically; until then headings fall back to Bodoni Moda. */
@font-face{font-family:"Bodera";src:url("fonts/Bodera.woff2") format("woff2"),url("fonts/Bodera.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodera";src:url("fonts/Bodera-Italic.woff2") format("woff2"),url("fonts/Bodera-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
/* Layout: full-bleed WebGL stage pinned behind a scrolling story. Chapters ride on the left (bottom sheet on phones); scrolling drives the explode. */
/* Single light look by choice: a watch presented on a pale studio sweep. */
:root{
  --ink:#e9ecef;
  --ink-2:#fbfcfd;
  --rhodium:#151a21;
  --soft:#3f4752;
  --muted:#66707c;
  --accent:#9a5a3e;
  --em:#4b5e22; /* italic headline words follow the selected strap: olive by default */
  --ruby:#d0234a;
  --line:rgba(21,26,33,.14);
  --glass:rgba(251,252,253,.8);
  --f-display:"Bodera","Bodoni Moda","Didot","Bodoni 72",Georgia,serif; /* Bodera is a licensed font: add fonts/Bodera.woff2 to use it */
  --f-body:"Abyssinica SIL",Georgia,"Times New Roman",serif;
  --f-mono:"Google Sans Flex","JetBrains Mono",system-ui,sans-serif; /* utility face for labels, eyebrows and buttons */
  color-scheme:light;
}
html,body{background:var(--ink);color:var(--rhodium)}
body{font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}

#stage{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 90% at 62% 40%,var(--ink-2) 0%,var(--ink) 62%)}
#c{position:relative;display:block;width:100%;height:100%;touch-action:pan-y;cursor:default}
html.turnable #c{touch-action:none;cursor:grab}
html.turning #c{cursor:grabbing}
.turnhint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.card p.credit{margin:18px 0 0;font:400 11px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--muted)}
.credit a{color:var(--rhodium);text-decoration:none;border-bottom:1px solid var(--em);padding-bottom:1px;transition:color .2s ease}
.credit a:hover,.credit a:focus-visible{color:var(--em)}
.turnhint span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rhodium);
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.lbl.on{opacity:1;pointer-events:auto;cursor:pointer}
/* "Click me" signifier: a frosted tag in the page's label language, tied to the topmost part label by a hairline
   leader that ends in a pulsing dot. Shown while the watch is taken apart, until a part is opened. */
#clickme{position:absolute;left:0;top:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .35s ease}
#clickme.on{opacity:1}
#clickme button{position:absolute;left:46px;top:-4px;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-transform:none;letter-spacing:0;padding:10px 16px 11px 14px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-left:2px solid var(--em);border-radius:2px;color:var(--rhodium);cursor:pointer;white-space:nowrap;transition:border-color .3s ease,transform .3s ease}
#clickme button:hover{border-color:var(--rhodium);border-left-color:var(--em);transform:translateY(-1px)}
#clickme b{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
#clickme small{font:400 13px/1.2 var(--f-body);color:var(--soft)}
#clickme svg{position:absolute;left:0;top:0;overflow:visible}
#clickme path{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
#clickme .dot{fill:var(--em)}
#clickme .ring{fill:none;stroke:var(--em);stroke-width:1;transform-origin:2px 52px;transform-box:view-box}
@media (prefers-reduced-motion:no-preference){#clickme.on .ring{animation:ping 1.8s ease-out infinite}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.lbl::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--muted))}
.lbl:hover span,.lbl.sel span{color:var(--accent)}

.topbar{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 24px 0;pointer-events:none}
.mark{font-family:var(--f-display);font-size:17px;letter-spacing:.02em}
.mark i{color:var(--muted);font-style:italic;font-size:14px;margin-left:8px}
.chap{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.chap b{color:var(--rhodium);font-weight:500}

#story{position:relative;z-index:1;pointer-events:none;padding-inline:24px}
.ch{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.card{pointer-events:auto;max-width:380px;padding:22px 24px;background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:2px}
.hero .card{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding-left:0}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1,h2{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0 0 12px;line-height:1.05}
h1{font-size:clamp(44px,7vw,76px);letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--em);transition:color .6s ease}
h2{font-size:clamp(28px,3.4vw,38px)}
.card p{margin:0 0 10px;color:var(--soft);max-width:60ch}
.card p:last-child{margin-bottom:0}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.swatch{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;text-transform:none;letter-spacing:.02em;font-family:var(--f-body);font-size:13px}
.swatch i{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(255,255,255,.25)}
.swatch[aria-pressed="true"]{border-color:var(--rhodium)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
.cue{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:22px!important}
.cue::after{content:"";display:inline-block;width:1px;height:22px;background:var(--muted);margin-left:12px;vertical-align:middle;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

button{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rhodium);
  background:transparent;border:1px solid var(--line);border-radius:2px;padding:11px 14px;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--rhodium)}
button:focus-visible,.lbl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


#info{position:fixed;z-index:5;top:72px;right:24px;width:320px;max-width:calc(100% - 32px);padding:20px 22px;
  background:var(--glass);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:2px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#info h3{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 8px;text-wrap:balance}
#info p{margin:10px 0 0;color:var(--soft);font-size:14px}
#info .eyebrow{margin:0;color:var(--accent)}
#infoClose{position:absolute;top:10px;right:10px;padding:6px 8px;border:none;font-size:16px;line-height:1;letter-spacing:0}

@media (max-width:760px){
  .topbar{padding-inline:16px}
  .mark i{display:none}
  #story{padding-inline:16px}
  .ch{align-items:flex-end;padding-bottom:24px}
  .hero{align-items:flex-end}
  .card{max-width:none;width:100%;padding:18px}
  .hero .card{background:var(--glass);border-color:var(--line);padding:18px}
  h1{font-size:44px}
  .hero .spec{display:none}
  .cue{margin-top:14px!important}
  #info{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:16px;right:16px;width:auto;max-width:none}
  /* Phones: the screen splits in two. The watch is framed in the top half; each chapter's text block fills the
     bottom half, and scrolling snaps one chapter at a time so the next block locks into place. */
  html{scroll-snap-type:y mandatory}
  .ch{scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
  .ch,.hero{align-items:flex-end;justify-content:flex-start}
  #story{padding-inline:0!important}
  .ch{padding-bottom:0!important}
  #story .card{box-sizing:border-box;width:100%;max-width:none;height:50svh;overflow-y:auto;border-radius:0;border-width:1px 0 0;
    padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column;justify-content:flex-start;padding:14px 16px;font-size:14px;line-height:1.5}
  .card p{margin-bottom:6px}
  h1{font-size:46px}
  h2{font-size:34px}
  .eyebrow{margin-bottom:6px}
  .swatches{gap:8px;margin-top:10px}
  .swatch{font-size:0;padding:4px;border-radius:50%}
  .swatch i{width:26px;height:26px}
  .swatch[aria-pressed="true"]{border-color:var(--rhodium);box-shadow:0 0 0 1px var(--rhodium)}
  .turnhint{margin-top:10px;padding-top:8px}
  .turnhint span{font-size:8px}
  /* utility (mono) text, 2px smaller than desktop */
  .eyebrow,.chap,.cue,.lbl{font-size:9px}
  .spec,button{font-size:10px}
  .turnhint button{padding:8px 10px}
}
@media (min-width:761px) and (max-width:1180px){
  /* Tablets: same split as phones. The watch fills the top half; each chapter's text block docks in the bottom half
     and scrolling snaps one chapter at a time. Type stays at desktop sizes. */
  html{scroll-snap-type:y mandatory}
  #story{padding-inline:0!important}
  .ch,.hero{align-items:flex-end;justify-content:flex-start;scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh;padding-bottom:0!important}
  #story .card,#story .hero .card{box-sizing:border-box;width:100%;max-width:none;height:50svh;overflow-y:auto;border-radius:0;border-width:1px 0 0;
    background:var(--glass);border-color:var(--line);padding:32px 48px calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;justify-content:flex-start}
  #story .card>*{max-width:640px}
  h1{font-size:60px}
  #info{top:auto;bottom:calc(50svh + 16px);right:24px}
}
}
@media (prefers-reduced-motion:reduce){.cue::after{animation:none}.lbl{transition:none}}