/* Algorithme du Temps · Rêveries des Secondes. International Typographic Style on black (Oct 21 2026, v2).
   One 12-column grid (margin + gutter fixed per viewport), five sizes on a fixed scale, flush-left ragged-right,
   light rules between sections, the renders' own black as the page.
   Families (Nadim, Oct 21): Inter Tight for text AND titles (he tried Jost, then Instrument Serif, and went back to the sans);
   Xanh Mono for figures and data (his pick). ?t=instrument|newsreader|spectral and ?m=space swap them for comparison.
   Earlier states: index-v1-white / v2-jost / v3-black / v4-colour / v5-serif / v6-sans.html (each with its own site-*.css).
   v6: more breathing room (wider margins, more space between and inside sections).
   v7: the palette of the sunset photo (see :root); v6 is kept as index-v6-sans.html + site-v6-sans.css.
   v8: white for the technical sections (.on-white); v7 is kept as index-v7-sunset.html + site-v7-sunset.css. */

:root{
  color-scheme:dark;
  /* v7 palette (Nadim, Oct 21): six colours sampled from the Stills sunset photo (img/placeholder/sun.jpg).
     Grounds: night (the water, now the page), dusk (the sky), sunset (the horizon), earth (the platform).
     Highlights: sun (the disc) for text and actions, ember (its reflection) for data, on dark grounds only. */
  --night:#05070e; --dusk:#5e5d6f; --sunset:#935049; --earth:#3b221d; --sun:#e7b088; --ember:#b24d28;
  --ink:#ececec; --paper:var(--night); --grey:#8f8f8f; --hair:rgba(255,255,255,.14);
  --rule:#cfcfcf; --hi:var(--sun); --data:var(--ember); --dial-grey:#5c5c5c; --black:var(--night);
  --f-body:"Inter Tight",Helvetica,Arial,sans-serif;
  --f-title:"Inter Tight",Helvetica,Arial,sans-serif; --w-title:500; --w-h:500; --tr-d:-.045em; --tr-h:-.03em; --w-l:400; --tr-l:-.015em;
  --f-mono:"Xanh Mono",ui-monospace,monospace; --w-mono:400; --tr-m:0;
  --m:clamp(20px,4.44vw,96px);              /* outer margin (64 at 1440) */
  --g:clamp(14px,1.67vw,32px);              /* gutter (24 at 1440) */
  --bar:48px;
  --sp:clamp(96px,12.5vw,240px);            /* space after a section (180 at 1440) */
  --rg:clamp(40px,4.44vw,80px);             /* space between rows inside a section */
  --open:clamp(44px,5.56vw,104px);          /* space between a section's top rule and its first line (80 at 1440) */
  --t-s:12px;                               /* labels, captions, tables */
  --t-b:clamp(15px,1.11vw,18px);            /* text */
  --t-l:clamp(20px,1.94vw,34px);            /* lead, readouts */
  --t-h:clamp(32px,4.17vw,80px);            /* section headings, figures */
  --t-d:clamp(44px,11vw,212px);             /* display */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-b)/1.45 var(--f-body);
  letter-spacing:.003em;font-feature-settings:"tnum" 1,"ss01" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
i{font-style:normal}                       /* titles are marked by the grotesk alone; no italics in this system */
b{font-weight:600}

/* ---------------------------------------------------------------- grid */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-left:var(--m);padding-right:var(--m)}
.g>*{grid-column:1/-1;min-width:0}
@media (min-width:761px){
.c1-1{grid-column:1/2}.c1-2{grid-column:1/3}.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c1-9{grid-column:1/10}.c1-10{grid-column:1/11}.c1-11{grid-column:1/12}.c1-12{grid-column:1/13}.c2-2{grid-column:2/3}.c2-3{grid-column:2/4}.c2-4{grid-column:2/5}.c2-5{grid-column:2/6}.c2-6{grid-column:2/7}.c2-7{grid-column:2/8}.c2-8{grid-column:2/9}.c2-9{grid-column:2/10}.c2-10{grid-column:2/11}.c2-11{grid-column:2/12}.c2-12{grid-column:2/13}.c3-3{grid-column:3/4}.c3-4{grid-column:3/5}.c3-5{grid-column:3/6}.c3-6{grid-column:3/7}.c3-7{grid-column:3/8}.c3-8{grid-column:3/9}.c3-9{grid-column:3/10}.c3-10{grid-column:3/11}.c3-11{grid-column:3/12}.c3-12{grid-column:3/13}.c4-4{grid-column:4/5}.c4-5{grid-column:4/6}.c4-6{grid-column:4/7}.c4-7{grid-column:4/8}.c4-8{grid-column:4/9}.c4-9{grid-column:4/10}.c4-10{grid-column:4/11}.c4-11{grid-column:4/12}.c4-12{grid-column:4/13}.c5-5{grid-column:5/6}.c5-6{grid-column:5/7}.c5-7{grid-column:5/8}.c5-8{grid-column:5/9}.c5-9{grid-column:5/10}.c5-10{grid-column:5/11}.c5-11{grid-column:5/12}.c5-12{grid-column:5/13}.c6-6{grid-column:6/7}.c6-7{grid-column:6/8}.c6-8{grid-column:6/9}.c6-9{grid-column:6/10}.c6-10{grid-column:6/11}.c6-11{grid-column:6/12}.c6-12{grid-column:6/13}.c7-7{grid-column:7/8}.c7-8{grid-column:7/9}.c7-9{grid-column:7/10}.c7-10{grid-column:7/11}.c7-11{grid-column:7/12}.c7-12{grid-column:7/13}.c8-8{grid-column:8/9}.c8-9{grid-column:8/10}.c8-10{grid-column:8/11}.c8-11{grid-column:8/12}.c8-12{grid-column:8/13}.c9-9{grid-column:9/10}.c9-10{grid-column:9/11}.c9-11{grid-column:9/12}.c9-12{grid-column:9/13}.c10-10{grid-column:10/11}.c10-11{grid-column:10/12}.c10-12{grid-column:10/13}.c11-11{grid-column:11/12}.c11-12{grid-column:11/13}.c12-12{grid-column:12/13}
}

/* ---------------------------------------------------------------- type */
.display{font-family:var(--f-title);font-weight:var(--w-title);font-size:var(--t-d);line-height:.9;letter-spacing:var(--tr-d);margin-left:-.04em}
.h{font-family:var(--f-title);font-weight:var(--w-h);font-size:var(--t-h);line-height:1.04;letter-spacing:var(--tr-h);max-width:17em}
.lead{font-family:var(--f-title);font-weight:var(--w-l);font-size:var(--t-l);line-height:1.2;letter-spacing:var(--tr-l)}
.pull,.paper h3,.words li,.beats p,.register .intro,.thanks,.col p:first-of-type{font-family:var(--f-title);font-weight:var(--w-l)!important;letter-spacing:var(--tr-l)!important}
.mono,.sh span,.read dd,.meta dd,.fig b,.formula,.yl,.axis-x,.beats span,.piece .n,.lab,.spec dd,.mk,.keys li::before,.reading li::before,.links a{font-family:var(--f-mono);font-weight:var(--w-mono);letter-spacing:var(--tr-m)}
.sh,.kicker,.cap,.lab,figcaption,.axis-x,.yl,dt{font-size:var(--t-s);line-height:1.34;letter-spacing:.01em}
.sh{font-weight:600}
.sh span{display:inline-block;width:3.2em;color:var(--hi)}
.cap b,.sh{font-weight:600}
.quiet,.lab,figcaption,dt,.yl,.axis-x{color:var(--grey)}
p+p{margin-top:0}

/* ---------------------------------------------------------------- bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--bar);align-items:center;background:rgba(5,7,14,.94);
  border-bottom:1px solid var(--rule);font-size:var(--t-s);letter-spacing:.01em}
.brand{font-weight:600}
.model{color:var(--grey)}
.nav{display:flex;gap:0 clamp(10px,1.2vw,22px);flex-wrap:wrap}
.nav a:hover{color:var(--hi);text-decoration:none}
.act{justify-self:end;font-weight:600;color:var(--hi)}
.act::after{content:" →"}
.index{display:none;font:inherit;font-weight:600;background:none;border:0;padding:0;color:var(--ink);cursor:pointer}
main{padding-top:var(--bar)}

/* ---------------------------------------------------------------- plates (renders sit on their own black) */
.plate{position:relative;background:var(--paper);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten}  /* the renders' pure black takes the ground */
.r1610{aspect-ratio:16/10}.r11{aspect-ratio:1}.r43{aspect-ratio:16/10}
figcaption{margin-top:8px}

/* ---------------------------------------------------------------- hero */
.hero{padding-top:24px;padding-bottom:var(--sp);row-gap:0;align-items:end}
.hero .kicker{grid-row:1;padding-bottom:clamp(32px,6vw,112px)}
.hero h1{grid-row:2;padding-bottom:clamp(32px,4.44vw,80px)}
.hero-text{grid-row:3;align-self:start}
.hero .plate{grid-row:3}
.hero .lead{margin-bottom:32px;max-width:14em}
.meta div,.read div{border-top:1px solid var(--hair);padding:7px 0 8px;display:flex;justify-content:space-between;gap:12px}
.meta div:last-child,.read div:last-child{border-bottom:1px solid var(--hair)}
.meta dt,.meta dd{font-size:var(--t-s)}
.meta dd{text-align:right}

/* ---------------------------------------------------------------- sections */
.sec{border-top:1px solid var(--rule);padding-top:var(--open);padding-bottom:var(--sp);row-gap:var(--rg);align-items:start}
.sec>.sh{grid-row:1}
.sec>.h{grid-row:1}
.sec.head{padding-bottom:var(--rg)}
.sec.cont{border-top:0;padding-top:var(--rg)}
.side{display:flex;flex-direction:column;gap:24px}
.side p{max-width:26em}
.sec p:not(.lead):not(.sh):not(.cap):not(.lab):not(.formula):not(.axis-x){max-width:30em}

/* 01 live */
.live{aspect-ratio:1}
.live svg{width:100%;height:100%}
.read dt{color:var(--grey)}
.read dd{font-size:calc(var(--t-l)*.86);line-height:1.15;text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- scroll sequences */
.scrolly{position:relative;height:300vh}
.dialsc{height:420vh}
.pin{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));align-content:center;row-gap:16px;overflow:hidden}
canvas.frames{width:100%;height:100%;background:var(--black)}
.wide{height:calc(100vh - var(--bar) - 210px)}
.wide.tall{height:calc(100vh - var(--bar) - 96px)}
.dialsc .pin{align-items:end}
.sq{aspect-ratio:1;max-height:calc(100vh - var(--bar) - 48px);justify-self:start;width:100%}
.beats{position:relative;align-self:end;min-height:11em}
.beats p{position:absolute;left:0;right:0;bottom:0;opacity:0;visibility:hidden;font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em}
.beats span{display:block;font-size:var(--t-s);font-weight:600;color:var(--hi);letter-spacing:.01em;margin-bottom:8px}
.panel{display:flex;flex-direction:column;gap:20px;align-self:end}
.chart{position:relative;height:180px;margin-left:32px;border-left:1px solid var(--rule)}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .yl{position:absolute;left:-32px;transform:translateY(-50%)}
.chart .dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--data);left:0;top:50%}
.chart .dot.back{background:var(--paper);border:2px solid var(--data)}
.axis-x{display:flex;justify-content:space-between;margin:-12px 0 0 32px}
.axis-x span:nth-child(2){color:var(--ink)}
svg .axis{stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
svg .axis.one{stroke:var(--ink);stroke-dasharray:2 3}
svg .trace{fill:none;stroke:var(--data);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
svg .backshade{fill:var(--data);opacity:.2}
svg .cursor{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.cap{max-width:24em}

/* 03 figures */
.fig b{display:block;font-size:calc(var(--t-h)*.82);line-height:1;padding-top:12px;border-top:1px solid var(--rule)}
.fig p{font-size:var(--t-s);margin-top:10px;max-width:22em}

/* 04 */
.formula{font-size:calc(var(--t-h)*.62);line-height:1.15;padding-top:16px;border-top:1px solid var(--rule)}
.more a,.go,.links a,.foot a{color:var(--hi)}

/* 05 dial key */
.marked .mk,.keys li::before{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--data);color:var(--night);
  font-size:var(--t-s);font-weight:700}
.mk{position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(5,7,14,.8)}
.keys{counter-reset:k;align-self:end}
.keys li{counter-increment:k;position:relative;padding:12px 0 14px 40px;border-top:1px solid var(--hair)}
.keys li:last-child{border-bottom:1px solid var(--hair)}
.keys li::before{content:counter(k);position:absolute;left:0;top:10px}

/* 06 details */
.cont figure figcaption{max-width:24em}

/* ---------------------------------------------------------------- 07 specifications and 14 questions */
:where(.spec,.faq)>*{grid-column:1/-1}
.spec,.faq{grid-column:1/-1;display:grid;grid-template-columns:subgrid;border-top:1px solid var(--rule);padding:12px 0 48px}
.sec>.spec:first-of-type,.sec>.faq:first-of-type{margin-top:0}
.spec h3,.faq h3{font-size:var(--t-s);font-weight:600;letter-spacing:.01em}
.spec dl{display:grid;grid-template-columns:subgrid}
.spec dl div{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding:0 0 9px;margin-bottom:9px;border-bottom:1px solid var(--hair)}
.spec dl div:last-child{border-bottom:0;margin-bottom:0}
.spec dt{grid-column:1/4;font-size:var(--t-b);color:var(--grey);letter-spacing:.003em}
.spec dd{grid-column:4/-1;max-width:40em;font-size:calc(var(--t-b)*.86);line-height:1.5}
.sec>.spec,.sec>.faq{row-gap:0}
#specifications,#questions{row-gap:0}
#specifications>.h,#questions>.h{margin-bottom:var(--rg)}

.qs details{border-bottom:1px solid var(--hair)}
.qs details:first-child summary{padding-top:0}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:9px 0 10px;font-weight:500}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-weight:400;color:var(--hi)}
.qs details[open] summary::after{content:"−"}
.qs summary:hover{color:var(--hi)}
.qs details p{padding:0 0 18px;max-width:36em}

/* 08 trace */
.trace .chart.tall{height:clamp(160px,18vw,300px)}
.axis-x.five{position:relative;display:block;height:1.4em;margin-top:6px}
.axis-x.five span{position:absolute;transform:translateX(-50%)}
.axis-x.five span:nth-child(1){left:0;transform:none}.axis-x.five span:nth-child(2){left:20%}.axis-x.five span:nth-child(3){left:40%}
.axis-x.five span:nth-child(4){left:60%}.axis-x.five span:nth-child(5){left:80%}.axis-x.five span:nth-child(6){left:100%;transform:translateX(-100%)}
.axis-x.five span:nth-child(2){color:var(--grey)}

/* 09 bureau */
.col h3{font-size:var(--t-s);font-weight:600;padding-top:10px;border-top:1px solid var(--rule);margin-bottom:16px}
.col p+p{margin-top:12px}
.col p:first-of-type{font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em;max-width:16em}
.words{align-self:start}
.words li{font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em;border-top:1px solid var(--hair);padding:6px 0 7px}
.words li:last-child{border-bottom:1px solid var(--hair)}
.words.not li{color:var(--grey)}

/* 10 research */
.doc img{width:100%;height:auto;opacity:.92}
.papers{display:flex;flex-direction:column;gap:64px}
.paper{border-top:1px solid var(--rule);padding-top:10px}
.paper h3{font-size:var(--t-l);font-weight:500;line-height:1.18;letter-spacing:-.015em;margin:12px 0 16px;max-width:28em}
.paper blockquote{color:var(--grey);max-width:34em;margin-bottom:12px}
.reading{border-top:1px solid var(--rule);padding-top:10px}
.reading ol{counter-reset:r;margin-top:12px}
.reading li{counter-increment:r;position:relative;padding-left:2.4em!important;font-size:var(--t-s);padding:6px 0;border-top:1px solid var(--hair);max-width:62em}
.reading li::before{content:counter(r);position:absolute;left:0}

/* 11 creator */
.pull{font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em;max-width:30em}

/* 12 film */
.video{aspect-ratio:16/9;background:var(--black)}
.video video{width:100%;height:100%;object-fit:cover;background:var(--black)}

/* ---------------------------------------------------------------- 13 allocation */
.series .cap{margin-top:10px}
.pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.piece{aspect-ratio:1;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between}
.piece .n{font-size:calc(var(--t-l)*.8);line-height:1}
.piece .s{font-size:var(--t-s);color:var(--grey)}
.register{display:flex;flex-direction:column;gap:18px}
.register .intro{font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em;max-width:18em;margin-bottom:8px}
.register label{display:block}
.register label>span{display:block;font-size:var(--t-s);color:var(--grey);margin-bottom:2px}
.register input,.register select,.register textarea{width:100%;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:6px 0 8px;outline:0;-webkit-appearance:none;appearance:none}
.register select{background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 6px center/6px 6px no-repeat,
  linear-gradient(-45deg,transparent 50%,var(--ink) 50%) right 0 center/6px 6px no-repeat}
.register textarea{resize:vertical}
.register input:focus,.register select:focus,.register textarea:focus{border-bottom:2px solid var(--hi);padding-bottom:7px}
.register .check{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}
.register .check input{width:16px;height:16px;padding:0;margin:2px 0 0;border:1px solid var(--ink);-webkit-appearance:checkbox;appearance:auto;accent-color:var(--hi)}
.register .check span{font-size:var(--t-s);color:var(--ink);margin:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.register button{font:inherit;font-weight:600;background:var(--btn,var(--sun));color:var(--btn-ink,var(--night));border:0;border-radius:0;padding:16px 18px;text-align:left;cursor:pointer}
.register button::after{content:" →"}
.register button:hover{background:var(--ink);color:var(--paper)}
.register button:disabled{opacity:.5}
.msg{color:var(--err,#ff7a6e);font-size:var(--t-s)}
.msg:empty{display:none}
.thanks{font-size:var(--t-l);line-height:1.18;letter-spacing:-.015em}
.register:not(.done) .thanks{display:none}
.register.done label,.register.done button,.register.done .intro{display:none}
.terms{border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.terms p{font-size:var(--t-s);color:var(--grey)}

/* 15 press + footer */
.links li{border-top:1px solid var(--hair);padding:7px 0 8px}
.links li:last-child{border-bottom:1px solid var(--hair)}
.foot{border-top:1px solid var(--rule);padding-top:var(--open);padding-bottom:40px;row-gap:28px;font-size:var(--t-s);align-items:end}
.foot .display{font-size:var(--t-d);padding-bottom:12px}

/* ---------------------------------------------------------------- phone: 4 columns */
@media (max-width:760px){
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bar{grid-template-columns:1fr auto auto;column-gap:20px}
  .bar>*{grid-column:auto}
  .model{display:none}
  .index{display:block}
  .nav{display:none;position:fixed;top:var(--bar);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;padding:8px var(--m) 16px}
  .nav.open{display:flex}
  .nav a{font-size:var(--t-l);letter-spacing:-.015em;padding:6px 0;border-bottom:1px solid var(--hair)}
  .hero .kicker{grid-column:span 2;padding-bottom:28px}
  .hero .kicker.c7-9{display:none}
  .hero .plate{grid-row:3}
  .hero-text{grid-row:4;margin-top:24px}
  .hero .lead{max-width:none}
  .sec>.h{grid-row:2}
  .sec{row-gap:24px}
  .side{margin-top:8px}
  .fig{grid-column:span 2}
  .fig b{font-size:32px}
  .fig p{font-size:var(--t-s)}
  .herosc .wide{height:38vh}
  .herosc .pin{row-gap:14px}
  .wide.tall{height:calc(100svh - var(--bar) - 140px)}
  .dialsc .pin{align-content:start;padding-top:12px;row-gap:12px}
  .dialsc .sq{order:-2;max-height:none;width:100%}
  .dialsc .panel{order:-1;gap:10px}
  .panel .read{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .panel .read div:nth-last-child(2){border-bottom:1px solid var(--hair)}
  .panel .read dd{font-size:14px}
  .panel .read div{align-items:baseline}
  .dialsc .axis-x span:nth-child(2){display:none}
  .dialsc .chart{height:72px}
  .beats{min-height:4.6em}
  .beats p{font-size:18px}
  .beats span{margin-bottom:4px}
  .spec dl,.faq .qs{margin-top:10px}
  .spec dt{grid-column:1/-1;font-size:var(--t-s)}
  .spec dd{grid-column:1/-1}
  .cont figure{grid-column:span 4}
  .words li{font-size:20px}
  .casesc .wide.tall,.howsc .wide.tall{height:72vw}
  .o1{order:1}.o2{order:2}.o3{order:3;margin-top:24px}.o4{order:4}
  .piece .s{display:none}
  .piece{padding:6px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* black ground details */
::selection{background:var(--sun);color:var(--night)}
.register input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--paper) inset}
.register select option{background:var(--paper);color:var(--ink)}
.meta dd{font-size:13px}
.yl,.axis-x,.lab,.beats span{font-size:13px}

/* comparison switches */
html[data-t=instrument]{--f-title:"Instrument Serif",serif;--w-title:400;--w-h:400;--w-l:400;--tr-d:-.015em;--tr-h:-.005em;--tr-l:0}
html[data-t=newsreader]{--f-title:"Newsreader",serif;--w-title:300;--w-h:300;--tr-d:-.02em;--tr-h:-.01em}
html[data-t=spectral]{--f-title:"Spectral",serif;--w-title:200;--w-h:300;--tr-d:-.02em;--tr-h:-.01em}
html[data-t=notodisplay]{--f-title:"Noto Serif Display",serif;--w-title:200;--w-h:300;--tr-d:-.02em;--tr-h:-.01em}
html[data-m=space]{--f-mono:"Space Mono",monospace;--tr-m:-.01em}

/* coloured grounds. v4 (Oct 21): "dark and muted ... to break the monotony". v7 (Oct 21): the sunset photo's own colours.
   Dusk and sunset are mid-tones, so on them grey text and the highlight become light tints (each >= 4.5:1) and
   data takes the sun, since ember disappears on them. The renders stay on night. */
.on-dusk{background:var(--dusk);--paper:var(--dusk);--grey:#d6d4dc;--hi:#f2d4be;--data:var(--sun);--dial-grey:#8d8c9c}
.on-sunset{background:var(--sunset);--paper:var(--sunset);--grey:#efdcd6;--hi:#f4dbc9;--data:var(--sun);--dial-grey:#b98580}
.on-earth{background:var(--earth);--paper:var(--earth);--grey:#a8968e;--dial-grey:#6b5049}
.on-dusk,.on-sunset,.on-earth,.on-white{border-top-color:transparent}
/* v8 (Oct 21, Nadim: "bring back white as a background color, but we keep black as the main. White for the 'boring'
   technical sections"): the spec sheet, the allocation sheet, and 04 up to the 3D module (heading + aperture sequence).
   The module taken apart was re-captured on white and rejected ("ugly"): it stays on black.
   On white the sun is too pale to read, so ember carries every highlight and the button. */
.on-white{background:#fff;color:var(--ink);color-scheme:light;--paper:#fff;--ink:var(--night);--grey:#6b6b6b;--hair:rgba(0,0,0,.14);
  --rule:#2a2a2a;--hi:var(--ember);--data:var(--ember);--dial-grey:#bdbdbd;--btn:var(--ember);--btn-ink:#fff;--err:#b3261e}
/* 04 on white (Nadim, Oct 21): the heading and the aperture sequence with its captions. The render stays as rendered, on its
   own black, set as a 16:9 plate on the white page instead of filling the screen (Seq.draw darkens over white = the frame). */
.apsc.on-white .wide.tall{height:auto;aspect-ratio:16/9;width:min(100%,calc((100vh - var(--bar) - 150px) * 16 / 9));justify-self:start}
@media (max-width:760px){.apsc.on-white .wide.tall{width:100%}}

/* ---------------------------------------------------------------- photography (Oct 21, v5). Placeholders from the Stills
   2026 report, labelled on the image; tensions: polished render beside candid/surreal photography, small photos in an empty
   grid, and one break used twice as a motif (a photo hanging across a section edge). The watch stays the largest image. */
.ph{position:relative;margin:0;overflow:hidden;background:#111}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph .tag{position:absolute;left:6px;bottom:6px;right:6px;font:400 11px/1.25 var(--f-mono);letter-spacing:0;color:#e8e8e8;font-style:normal}
.ph .tag{text-shadow:0 0 3px #000,0 0 8px #000}
.hero-ph{aspect-ratio:3/4;align-self:start}
.side-ph{aspect-ratio:3/4;align-self:start}
.bureau-ph{display:flex;flex-direction:column;gap:var(--g);align-self:start}
.bureau-ph .small{width:66%;aspect-ratio:324/392}
.bureau-ph .ph:not(.small){aspect-ratio:608/425}
.hang{position:relative;z-index:3;align-self:start;aspect-ratio:811/714;margin-top:calc(-1 * var(--open) - 44%)}
.hang.tall{aspect-ratio:3/4;margin-top:calc(-1 * var(--open) - 66%)}
.press-ph{aspect-ratio:1600/713}
.beats .bimg{display:block;aspect-ratio:3/2;margin-bottom:14px;width:100%}
.beats .bimg .tag{font-size:10px}
@media (min-width:761px){
  .hero .hero-ph{grid-row:1/3}
  .cont .side-ph{grid-row:1/4}
  #bureau .bureau-ph{grid-row:2/4}
  #creator .portrait{grid-row:2/4}
  .press-ph{grid-row:2}
}
@media (max-width:760px){
  .hero .hero-ph{grid-row:5;grid-column:3/5;margin-top:24px}
  .side-ph,.bureau-ph,.cont .side-ph{grid-column:1/3}
  .hang{grid-column:3/5;grid-row:1;margin-top:calc(-1 * var(--open) - 30%)}
  .hang.tall{margin-top:calc(-1 * var(--open) - 40%)}
  .beats .bimg{display:none}
  .press-ph{grid-column:1/4}
}

/* ---------------------------------------------------------------- v9 (Oct 22 2026): the new renders. Nadim: "integrate the new renders
   on the website. Don't replace the current renders. Add to them. Add especially where images of the watch are lacking ... an image
   section like Moss Worldtimer ... full-width sections with our best new renders to break text-heavy sections ... auto-rotate between
   images (with an irregular rhythm to mimic our wandering seconds, even going back)". All renders carry photographic grain. */
.shot{margin:0;position:relative;overflow:hidden;background:var(--paper)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--rg);align-items:start}
.collage .k1{grid-column:1/8;grid-row:1/3;z-index:1}
.collage .k2{grid-column:8/13;grid-row:1;margin-top:calc(var(--rg) * 2.2)}
.collage .k3{grid-column:9/13;grid-row:2;margin-top:var(--rg);z-index:2}
.collage .k4{grid-column:2/6;grid-row:3;margin-top:calc(-1 * var(--rg) * 1.4);z-index:2}
.collage .k5{grid-column:6/9;grid-row:3;margin-top:calc(var(--rg) * 2)}
.collage .k6{grid-column:9/13;grid-row:3;margin-top:calc(var(--rg) * .6)}
.band{margin:0;border-top:0;line-height:0;background:var(--paper)}
.band img{display:block;width:100%;height:auto}
/* the Rêveries stack (Oct 22 2026): every card keeps its own aspect ratio (--ar) and scale (--s), centred; the next card is laid
   on top as the hand moves on and lifted off when it turns back */
.rotor{position:relative;margin:0;aspect-ratio:5/4;overflow:hidden;background:var(--paper);container-type:size}
.rotor .card{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);
  width:min(calc(var(--s) * 100cqw), calc(var(--s) * 100cqh * var(--ar)));aspect-ratio:var(--ar);
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 18px 50px rgba(0,0,0,.45)}
.rotor .card img{display:block;width:100%;height:100%;object-fit:cover}
.rotor .card.on{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}
.rotor .card.ph{position:absolute;overflow:visible}
.rotor-read{align-self:end}
.rotor-read p{max-width:24em;margin-bottom:24px}
@media (max-width:760px){
  .collage{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}
  .collage .k1{grid-column:1/5;grid-row:auto}
  .collage .k2{grid-column:2/5;grid-row:auto;margin-top:-20%}
  .collage .k3{grid-column:1/3;grid-row:auto;margin-top:0}
  .collage .k4{grid-column:3/5;grid-row:auto;margin-top:30%}
  .collage .k5{grid-column:1/3;grid-row:auto;margin-top:-10%}
  .collage .k6{grid-column:2/5;grid-row:auto;margin-top:0}
  .rotor{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){.rotor .card,.rotor .card.on{transition:none}}
.shot-cap{align-self:end}
.stackcol{display:flex;flex-direction:column;gap:var(--rg)}
.stackcol .doc{margin:0}
.side-shot{margin-top:var(--rg)}

/* Nadim, Oct 26 2026: the realistic sequences are rendered 2400 wide (the dial 1620) and shown at most half that, so retina screens
   stay crisp; served at full size on every screen with more compression (assets/site.js) */
.herosc .wide,.casesc .wide{max-width:1200px;justify-self:center;width:100%}
.apsc .wide{max-width:1200px}
.dialsc .sq{max-width:810px}

/* ---------------------------------------------------------------- Oct 26 2026, Nadim's notes (v11 kept as index-v11-pre-notes1026.html
   + assets/site-v11-pre-notes1026.css/js) */
.xanh,.abstract,.script p{font-family:var(--f-mono);font-weight:var(--w-mono);letter-spacing:var(--tr-m)}
.hero .lead .xanh{display:block;margin-top:.35em}
/* 02 plays in real time once on screen, instead of being scrubbed by the scroll */
.play.dialsc{height:auto;position:relative}
.play .pin{position:relative;top:auto}
/* Nov 2 2026 (Nadim: "make the restart button a bit more obvious"): an outlined button in the highlight colour */
.restart{align-self:flex-start;font:inherit;font-size:var(--t-s);font-weight:600;color:var(--hi);background:none;border:1px solid var(--hi);
  padding:9px 16px;cursor:pointer;letter-spacing:.01em;margin-top:14px}
.restart::before{content:"↺ "}
.restart:hover{background:var(--hi);color:var(--night)}
/* 05: the numbers on the dial pulse */
/* Nov 2 2026 (Nadim): the circle's own colour pulses, no glow outside it */
@keyframes mkglow{0%,100%{background:var(--data)}50%{background:var(--sun)}}
.marked .mk{animation:mkglow 2.4s ease-in-out infinite}
/* all five pulse together (Nadim, Nov 2 2026) */
@media (prefers-reduced-motion:reduce){.marked .mk{animation:none}}
/* 09: the black-acrylic collage, raw, over 7 of the 12 columns */
#bureau .collage.raw{grid-row:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--g);row-gap:0;align-items:start}
.collage.raw .shot{background:none}
.collage.raw .k1{grid-column:1/6;grid-row:1/3;z-index:1;margin:0}
.collage.raw .k2{grid-column:5/8;grid-row:1;margin-top:28%;z-index:2}
.collage.raw .k3{grid-column:6/8;grid-row:2;margin-top:12%;z-index:1}
.collage.raw .k4{grid-column:1/4;grid-row:3;margin-top:-22%;z-index:2}
.collage.raw .k5{grid-column:4/6;grid-row:3;margin-top:6%;z-index:3}
.collage.raw .k6{grid-column:5/8;grid-row:3;margin-top:-30%;z-index:1}
#bureau .col{grid-row:2;align-self:end}
#bureau .col .words{margin-top:28px}
/* 10: the engraving square with the sphere laid over it; the papers side by side, their abstracts in Xanh */
.duo{position:relative;padding-bottom:30%}
.duo .doc{aspect-ratio:1;overflow:hidden;margin:0;width:82%}
.duo .doc img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:1}
.duo .shot{position:absolute;right:0;bottom:0;width:52%;z-index:2}
.duo figcaption{position:absolute;left:0;bottom:0;width:44%;margin:0}
#research .papers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);row-gap:64px}
#research .reading{grid-column:1/-1}
.paper h3{max-width:none}
.abstract{font-size:calc(var(--t-b)*.94);line-height:1.5;color:var(--grey);margin-bottom:16px}
/* 12: the opening of the script */
.script{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair);padding-top:12px}
.script p{font-size:var(--t-b);line-height:1.4}
/* 15: two images */
.press-a,.press-b{grid-row:2}
.press-b{margin-top:var(--rg)}
/* footer: the symbol */
.foot .sym{justify-self:end;align-self:end;color:var(--hi)}
.foot .sym svg{width:56px;height:56px}
@media (max-width:760px){
  #bureau .collage.raw{grid-column:1/-1;grid-row:auto}
  #bureau .col{grid-row:auto}
  #research .papers{grid-template-columns:1fr}
  .duo{grid-column:1/-1}
  .press-a{grid-column:1/3}.press-b{grid-column:3/5}
  .foot .sym{grid-column:4/5}
}
/* the Rêveries stack, raw: no shadow, no border (Nadim, Oct 26 2026: "No shadow or border. Just a raw collage.") */
.rotor .card{box-shadow:none}
/* 09 holds the Rêveries stack (the timed overlay), raw */
#bureau .rotor{grid-row:2}
@media (max-width:760px){#bureau .rotor{grid-row:auto}}
/* Oct 26 2026 (Nadim): "Specs: make each section expandable" — each group is a <details>, closed by default */
details.spec{display:block;padding:0}
details.spec>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:12px 0 14px}
details.spec>summary::-webkit-details-marker{display:none}
details.spec>summary::after{content:"+";grid-column:12;justify-self:end;color:var(--hi)}
details.spec[open]>summary::after{content:"−"}
details.spec>summary:hover{color:var(--hi)}
details.spec>dl{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-bottom:40px}
details.spec:last-of-type{border-bottom:1px solid var(--rule)}
@media (max-width:760px){
  details.spec>summary,details.spec>dl{grid-template-columns:repeat(4,minmax(0,1fr))}
  details.spec>summary::after{grid-column:4}
  details.spec>dl{margin-top:0}
}

/* 09: our values (Nov 2 2026, replaces the five words) */
#bureau .col p+h3{margin-top:28px}
.values li{border-top:1px solid var(--hair);padding:8px 0 9px}
.values li:last-child{border-bottom:1px solid var(--hair)}
.values b{font-weight:600}
.col p+.values{margin-top:14px}