/* Shared pieces. a.css sets the tokens and the layout. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t4);line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
img{display:block;max-width:100%;height:auto}
h1,h2,p,figure{margin:0}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
figcaption{font-size:var(--t5);line-height:1.45;color:var(--ink-2);margin-top:.75rem;max-width:42em;text-wrap:pretty}

/* header: the sign-up is reachable from the top */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem}
.mark{font-weight:700;text-decoration:none;font-size:var(--t4)}
.top .btn{min-height:2.75rem;padding:.5rem 1.1rem;font-size:var(--t5)}

/* the button looks like a display: amber on near-black */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.8rem 1.5rem;background:var(--night);color:var(--amber);font:inherit;font-weight:600;line-height:1.2;text-decoration:none;border:0;border-radius:var(--radius);cursor:pointer;transition:transform .15s ease-out,background-color .2s ease-out}
.btn:hover{background:#000}
.btn:active{transform:scale(.95)}
.btn-quiet{background:var(--amber);color:var(--night)}
.btn-quiet:hover{background:var(--amber-hi)}
.status{font-size:var(--t5);color:var(--ink-2)}

/* the displays: 7 segments, lit ones amber, unlit ones faintly visible as on the real face */
.panel{display:block;width:100%;height:100%}
.panel .face{fill:var(--face)}
.panel .s{fill:var(--seg-off);transition:fill .12s ease-out}
.panel .s.on{fill:var(--amber)}
.window{display:block;background:var(--face);border-radius:3px;padding:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}

/* the drawn clock: a box in the proportions of the real case (210 x 558 x 49 mm, windows 122 x 43,
   pitch 125). The front is the list of displays; the side and the top are drawn faces of oak. */
.box{--cw:14rem;--d:calc(var(--cw)*.2333);position:relative;width:var(--cw);transform-style:preserve-3d}
.case{list-style:none;margin:0;width:var(--cw);padding:calc(var(--cw)*.333) 0;display:grid;gap:calc(var(--cw)*.39);position:relative;transform:translateZ(0)}
@property --cw{syntax:"<length>";inherits:true;initial-value:14rem}
.case,.face-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.case::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:4px;border:1px solid transparent;background-clip:padding-box!important;background:linear-gradient(90deg,rgba(60,30,8,.16),transparent 9%,transparent 88%,rgba(60,30,8,.2)),url(../img/oak.webp) 50% 0/cover,var(--oak);box-shadow:0 1px 0 rgba(0,0,0,.05),0 40px 60px -42px rgba(50,32,10,.6)}
.face-side{position:absolute;top:-1px;left:calc(100% - 2px);width:calc(var(--d) + 1px);height:calc(100% + 2px);border:1px solid transparent;background-clip:padding-box!important;transform-origin:left center;transform:rotateY(90deg);border-radius:0 3px 3px 0;background:linear-gradient(90deg,rgba(40,18,4,.38),rgba(40,18,4,.5)),url(../img/oak.webp) 20% 0/auto 100%,var(--oak-2)}
.face-top{position:absolute;left:-1px;top:1px;width:calc(100% + 2px);height:var(--d);border:1px solid transparent;background-clip:padding-box!important;transform-origin:center top;transform:rotateX(-90deg);background:linear-gradient(rgba(255,240,215,.18),rgba(40,18,4,.15)),url(../img/oak.webp) 0 0/100% auto,var(--oak)}
.face-core{position:absolute;inset:0;transform:translateZ(-2px);background:var(--oak-2);border-radius:3px}
.face-left{position:absolute;top:-1px;right:calc(100% - 2px);width:calc(var(--d) + 1px);height:calc(100% + 2px);border:1px solid transparent;background-clip:padding-box!important;transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(40,18,4,.5),rgba(40,18,4,.36)),url(../img/oak.webp) 70% 0/auto 100%,var(--oak-2)}
.face-bottom{position:absolute;left:-1px;bottom:1px;width:calc(100% + 2px);height:var(--d);border:1px solid transparent;background-clip:padding-box!important;transform-origin:center bottom;transform:rotateX(90deg);background:linear-gradient(rgba(40,18,4,.45),rgba(40,18,4,.55)),url(../img/oak.webp) 0 100%/100% auto,var(--oak-2)}
.face-back{position:absolute;inset:-1px;border:1px solid transparent;background-clip:padding-box!important;border-radius:4px;transform:translateZ(calc(-1 * var(--d))) rotateY(180deg);background:linear-gradient(rgba(40,18,4,.42),rgba(40,18,4,.42)),url(../img/oak.webp) 30% 0/cover,var(--oak-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:rgba(30,14,2,.55);text-align:center}
.engrave{font-weight:700;font-size:calc(var(--cw) * .09);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,235,200,.25)}
.engrave.small{font-weight:500;font-size:calc(var(--cw) * .05);letter-spacing:.04em;text-transform:none;max-width:70%}
.row{position:relative;height:calc(var(--cw)*.205)}
.row .window{width:calc(var(--cw)*.581);height:100%;margin-inline:auto}
.row .who{position:absolute;right:calc(100% + 1rem);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.55rem;text-align:right;white-space:nowrap;font-size:var(--t5);line-height:1.25}
.who .nm{display:block}
/* day or night where each person is */
.sky{flex:none;display:block;width:2.5rem;height:2.5rem}
.sky-svg{display:block;width:100%;height:100%;overflow:visible}
.sun circle,.sun .rays rect{fill:var(--amber)}
.sun{filter:drop-shadow(0 0 5px rgba(255,170,0,.55))}
.sun-body{transition:transform .6s ease-out}
.rays{transform-box:view-box;transform-origin:20px 20px}
.horizon{fill:var(--ink-2);display:none}
.moon{display:none;fill:var(--moon)}
.moon .star{fill:var(--moon)}
[data-phase=nuit] .sun{display:none}
[data-phase=nuit] .moon{display:block}
[data-phase=matin] .horizon,[data-phase=soir] .horizon{display:block}
[data-phase=matin] .sun-body,[data-phase=soir] .sun-body{transform:translateY(9px)}
[data-phase=soir] .sun circle,[data-phase=soir] .sun .rays rect{fill:var(--dusk)}
@media (prefers-reduced-motion:no-preference){
  [data-phase=jour] .rays{animation:turn 40s linear infinite}
  .moon .star{animation:twinkle 3.2s ease-in-out infinite}
  .moon .star+.star{animation-delay:1.6s}
}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes twinkle{50%{opacity:.25}}
.who strong{display:block;font-size:var(--t4);font-weight:600}
.who .city{color:var(--ink-2)}
.hero-clock,.night-clock{padding-left:6.25rem}

/* night band */
.night{background:var(--night);color:var(--night-ink);padding-block:var(--band);--ink-2:var(--night-ink-2);--focus:var(--amber)}
/* the oak around a display: the border shows the grain */
.big .window{aspect-ratio:auto;padding:4px;border:clamp(18px,3.2vw,40px) solid transparent;border-radius:8px;background:linear-gradient(var(--face),var(--face)) padding-box,url(../img/oak.webp) 50% 30%/cover border-box,var(--oak);box-shadow:0 30px 140px 10px rgba(255,170,0,.16)}
.big .window .panel{aspect-ratio:250/90;height:auto}
.big .who{margin-top:1.25rem;font-size:var(--t4);display:flex;align-items:center;gap:.7rem}
.big .who .nm{display:inline}
.big .who strong{display:inline;font-size:inherit;margin-right:.35rem}


/* the quiz */
.form{display:grid;gap:1.25rem}
.step{border:0;margin:0;padding:0;display:grid;gap:1rem;min-width:0}
.step legend{padding:0;font-size:var(--t3);font-weight:600;line-height:1.3;margin-bottom:1rem;text-wrap:balance}
.count{display:block;font-size:var(--t5);font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-bottom:.4rem}
.hint{font-size:var(--t5);color:var(--ink-2);margin-top:-.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{will-change:transform;display:inline-flex;align-items:center;min-height:3rem;padding:.6rem 1.15rem;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.chip-n span{min-width:3.25rem;justify-content:center;font-variant-numeric:tabular-nums;font-weight:600}
.chip input:checked+span{background:var(--night);color:var(--amber);border-color:var(--night)}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.chip:hover span{border-color:var(--ink)}
.gift-badge{justify-self:start;background:var(--night);color:var(--amber);border-radius:var(--radius);padding:.4rem 1rem;font-size:var(--t5);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gift-line{font-size:var(--t3);line-height:1.4;max-width:28em}
.step-mail label[for=email]{font-weight:600}
.field{display:flex;flex-wrap:wrap;gap:.75rem}
.field input{flex:1 1 15rem;min-height:3.25rem;padding:.75rem 1.1rem;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t5);color:var(--ink-2)}
.consent input{flex:none;width:1.35rem;height:1.35rem;margin:.1rem 0 0;accent-color:var(--night)}
.consent label{font-weight:400}
.nav{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn-line:hover{background:var(--mist)}
.done{display:grid;gap:1rem;justify-items:start}.done>p:first-child{font-weight:600;font-size:var(--t3)}.share-line{color:var(--ink-2);max-width:30em}
.js-quiz .step:not(.on){display:none}
.progress{display:none;gap:.35rem;margin-bottom:.25rem}
.js-quiz .progress{display:flex}
.progress span{width:2.25rem;height:.4rem;border-radius:1rem;background:var(--rule);transition:background-color .35s ease-out,transform .35s cubic-bezier(.16,1,.3,1)}
.progress span.on{background:var(--amber);transform:scaleY(1.25)}
@media (prefers-reduced-motion:no-preference){
  .chip input:checked+span{animation:pop .38s cubic-bezier(.16,1,.3,1)}
  .js-quiz .step.on{animation:stepin .4s cubic-bezier(.2,.9,.3,1)}
  .js-quiz.back .step.on{animation-name:stepback}
  .done{animation:stepin .5s cubic-bezier(.2,.9,.3,1)}
}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.14);box-shadow:0 0 0 6px rgba(255,179,0,.35)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,179,0,0)}}
@keyframes stepin{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stepback{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* FAQ */
.faq{padding-block:0 var(--band)}
.faq .wrap{max-width:54rem}
.faq h2{margin-bottom:1.5rem}
details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:1.15rem 2.75rem 1.15rem 0;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.6rem;top:50%;width:.6rem;height:.6rem;border-right:2px solid;border-bottom:2px solid;transform:translateY(-75%) rotate(45deg);transition:transform .2s ease-out}
details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
details p{padding-bottom:1.35rem;max-width:42em;color:var(--ink-2)}

/* footer */
.foot{background:var(--mist);padding-block:3rem calc(3rem + env(safe-area-inset-bottom,0px));font-size:var(--t5);color:var(--ink-2)}
.foot-in{display:grid;gap:1.5rem}
.notes{grid-column:1/-1;border-top:1px solid var(--rule-strong);padding-top:1.25rem;max-width:56rem}
.notes li,.facts dd,.hint,.consent label{text-wrap:pretty}
.notes-title{font-weight:600;color:var(--ink);margin-bottom:.4rem}
.notes ul{display:grid!important;gap:.3rem!important;list-style:disc!important;padding-left:1.1rem!important}
.foot strong{color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot li a{display:inline-block;padding-block:.6rem}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.panel .s,.btn,summary::after,.chip span{transition:none}}
/* A · Le Mur. White and mist bands, one night band where the product glows.
   Bricolage Grotesque only; size and weight do the work. Amber lives only on near-black, like the LEDs. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --paper:#ffffff; --mist:#f2f2ef; --ink:#141312; --ink-2:#4a4741; --rule:#e2e0db; --rule-strong:#8d887f;
  --night:#0d0c0b; --night-ink:#f2efe9; --night-ink-2:#b5afa5; --amber:#ffb300; --amber-hi:#ffc84a;
  --face:#0a0908; --seg-off:#2b251c; --moon:#7d8699; --dusk:#ff9019; --oak:#cfa775; --oak-2:#b48c5b; --focus:#1858c9;
  --font:"Bricolage Grotesque",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  /* five sizes: headline, section, lead, body, caption */
  --t1:clamp(2.5rem,1.3rem + 3.6vw,4.5rem); --t2:clamp(2rem,1.3rem + 2.9vw,3.75rem); --t3:clamp(1.1875rem,1.05rem + .45vw,1.375rem); --t4:1.125rem; --t5:.875rem;
  --wrap:80rem; --band:clamp(4.5rem,2.5rem + 7vw,9.5rem); --radius:999px;
}
h1,h2{font-weight:700;letter-spacing:-.025em}
h2{font-size:var(--t2);line-height:1.02}

.hero{padding-block:clamp(2.5rem,1rem + 5vw,5.5rem) var(--band)}
.hero-in{display:grid;gap:3.5rem;align-items:center}
.hero h1{font-size:var(--t1);line-height:1;letter-spacing:-.03em;max-width:13em}
.lead{font-size:var(--t3);line-height:1.45;color:var(--ink-2);max-width:29em;margin-top:1.75rem}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:2.25rem}
.hero-clock{justify-self:center;padding-left:8.25rem}
.hero-clock .box{--cw:clamp(12.5rem,8rem + 9vw,16.5rem)}
/* the clock turns slowly, showing its oak side; still for those who ask for less motion */
.stage{perspective:1500px;perspective-origin:30% 40%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:6px;padding-block:1rem}
.stage.grabbing{cursor:grabbing}
.stage .box{transform:rotateY(-18deg) rotateX(2deg)}
.stage .who{opacity:var(--labels,1)}
@media (prefers-reduced-motion:no-preference){
  .stage:not(.js-turn) .box{animation:sway 18s ease-in-out infinite}
}
.turn-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem;font-size:var(--t5);color:var(--ink-2);transition:opacity .6s ease-out}
.turn-hint svg{width:1.5rem;height:.75rem}
.turn-hint.gone{opacity:0}
@keyframes sway{
  0%,100%{transform:rotateY(-22deg) rotateX(2deg) translateY(0)}
  50%{transform:rotateY(-7deg) rotateX(.5deg) translateY(-8px)}
}

.night-in{display:grid;gap:3.5rem;align-items:center}
.night-text p{color:var(--night-ink-2);max-width:31em;margin-top:1.25rem}
.trip{display:grid;gap:1.5rem;width:100%}
.route-wrap{position:relative}
.route{display:block;width:100%;height:auto;overflow:visible}
.route .stars circle{fill:var(--night-ink);opacity:.35}
.route .arc{fill:none;stroke:var(--night-ink-2);stroke-opacity:.45;stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.route .trail{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 4px rgba(255,170,0,.7))}
.route .pin{fill:var(--night-ink);transition:fill .4s}
.route .pin.here{fill:var(--amber)}
.route .ring{fill:none;stroke:var(--amber);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.route .plane path{fill:var(--amber);filter:drop-shadow(0 0 5px rgba(255,170,0,.8))}
.ends{display:flex;justify-content:space-between;gap:1rem;margin-top:-.25rem}
.end{display:flex;align-items:center;gap:.5rem;font-size:var(--t5);color:var(--night-ink-2);font-variant-numeric:tabular-nums}
.end strong{color:var(--night-ink);font-weight:600;font-size:var(--t4);margin-right:.3rem}
.end .sky{width:2rem;height:2rem}
.end-to{flex-direction:row-reverse;text-align:right}
.solo{width:100%;max-width:30rem;justify-self:center}
@media (prefers-reduced-motion:no-preference){.route .stars circle{animation:twinkle 4s ease-in-out infinite}.route .stars .tw1{animation-delay:-1s}.route .stars .tw2{animation-delay:-2s}.route .stars .tw3{animation-delay:-3s}}

.bleed{background:var(--paper)}
.bleed img{width:100%;height:clamp(22rem,62vw,50rem);object-fit:cover;object-position:50% 40%}
.bleed figcaption{padding-top:.25rem}

.evening{background:var(--night);color:var(--night-ink);padding-block:var(--band)}
.evening-in{display:grid;gap:2.5rem;align-items:center}
.evening-photo img{width:min(100%,calc(min(86vh,54rem) * 1300 / 2511));height:auto;margin-inline:auto;border-radius:3px}
.evening-line{font-size:var(--t2);font-weight:700;line-height:1.05;letter-spacing:-.025em;max-width:11em;text-wrap:balance}
.night .moon,.evening .moon{--moon:#b9c2d6}


.story{padding-block:calc(var(--band) * .55) var(--band)}
.story h2{max-width:16em}
.story-grid{display:grid;gap:2rem;margin-top:3rem}
.ph img{width:100%;border-radius:3px}
.story-text p{max-width:33em}
.story-text p+p{margin-top:1rem}
.sign{font-weight:600;margin-top:1.25rem}

.privacy{background:var(--mist);padding-block:var(--band)}
.privacy h2{max-width:14em}
.flow{container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.75rem,2vw,1.5rem);margin-top:3rem;max-width:56rem}
.phone{position:relative;width:clamp(6.5rem,5rem + 6vw,10rem);aspect-ratio:9/16;border:2px solid var(--ink);border-radius:1.4rem;background:var(--paper);padding:2.2rem .7rem .7rem;display:flex;flex-direction:column;gap:.6rem}
.notch{position:absolute;top:.55rem;left:50%;width:32%;height:.45rem;border-radius:1rem;background:var(--ink);transform:translateX(-50%)}
.phone ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.phone li{display:flex;align-items:center;gap:.4rem;font-size:clamp(.6875rem,.6rem + .3vw,.8125rem);line-height:1.2;color:var(--ink-2)}
.lock{flex:none;width:.85rem;height:.85rem;fill:var(--ink-2);color:var(--ink-2)}
.flow-label{font-size:var(--t5);color:var(--ink-2);line-height:1.3}
.phone .flow-label{font-size:.6875rem;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.wire{position:relative;height:5.5rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;container-type:inline-size}
.wire::before{content:"";position:absolute;left:0;right:0;top:1.6rem;border-top:2px dashed var(--rule-strong)}
.packet{position:absolute;left:0;top:.65rem;padding:.35rem .7rem;border-radius:var(--radius);background:var(--night);color:var(--amber);font-size:clamp(.6875rem,.6rem + .35vw,.875rem);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.dest{display:grid;justify-items:center;gap:.6rem}
.dest .window{width:clamp(6.5rem,5rem + 6vw,10rem);aspect-ratio:250/90;border:clamp(8px,1.2vw,14px) solid transparent;border-radius:6px;background:linear-gradient(var(--face),var(--face)) padding-box,url(../img/oak.webp) 50% 40%/cover border-box,var(--oak)}
.dest .panel{aspect-ratio:250/90;height:auto}
@media (prefers-reduced-motion:no-preference){
  .flow.on .packet{animation:send 3.8s cubic-bezier(.6,0,.3,1) infinite}
}
@keyframes send{0%{transform:translateX(0);opacity:0}12%{opacity:1}78%{transform:translateX(calc(100cqw - 100%));opacity:1}92%,100%{transform:translateX(calc(100cqw - 100%));opacity:0}}
.facts{display:grid;gap:2rem;margin:3rem 0 0}
.facts dt{font-size:var(--t3);font-weight:600;line-height:1.25}
.facts dd{margin:.5rem 0 0;color:var(--ink-2);max-width:26em}

.quiz{padding-block:var(--band)}
.quiz-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "clock" "main";gap:0 1.25rem;align-items:start}
.quiz-head{grid-area:head}.quiz-main{grid-area:main}.quiz-clock{grid-area:clock}
.quiz h2{max-width:12em}
.quiz-intro{font-size:var(--t3);color:var(--ink-2);margin:1rem 0 2.5rem;max-width:28em}
/* The preview of your clock: always four displays, the names to their left as on the hero clock */
.quiz-clock{margin:0 0 2rem;justify-self:center;padding-left:7.25rem}
.box-pv{--cw:7.5rem;transform:rotateY(-16deg)}
.box-pv.celebrate{animation:spin 1.3s cubic-bezier(.45,0,.2,1)}
@keyframes spin{from{transform:rotateY(-16deg)}to{transform:rotateY(344deg)}}
@keyframes rowin{0%{transform:scale(.4);opacity:0}65%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.quiz-clock{perspective:900px}
.box-pv .row{height:calc(var(--cw)*.205)}

@media (max-width:39.99em){.flow{grid-template-columns:1fr 1fr;grid-template-areas:"phone dest" "wire wire";row-gap:1.25rem}.phone{grid-area:phone;width:9.5rem;aspect-ratio:9/12}.dest{grid-area:dest;align-self:center}.wire{grid-area:wire}}
@media (max-width:29.99em){.hero-clock{padding-left:7.5rem}.hero-clock .box{--cw:10.75rem}.row .who{gap:.4rem}.sky{width:2.1rem;height:2.1rem}}
@media (min-width:40em) and (max-width:59.99em){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:60em){
  .hero-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(3rem,6vw,7rem)}
  .night-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,6vw,6rem)}
  .evening-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(3rem,6vw,6rem)}
  .story-grid{grid-template-columns:5fr 4fr 3fr;grid-template-areas:"wall text text" "wall glue sand";gap:2.5rem 2rem;align-items:start}
  .ph-wall{grid-area:wall}.story-text{grid-area:text}.ph-glue{grid-area:glue}.ph-sand{grid-area:sand}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .quiz-in{grid-template-columns:minmax(0,1fr) 25rem;grid-template-areas:"head head" "main clock";column-gap:clamp(3rem,6vw,7rem)}
  .quiz-clock{position:sticky;top:5.5rem;margin:0;padding-left:9rem}
  .box-pv{--cw:10rem}
  .foot-in{grid-template-columns:1fr auto}
}

/* Photos open to the full width as they scroll in; visible at every moment, static where unsupported */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bleed img{animation:open linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes open{from{clip-path:inset(0 5% round 14px)}to{clip-path:inset(0 0 round 0)}}

/* the footer's pages */
.doc{padding-block:clamp(2.5rem,1rem + 5vw,5rem) var(--band)}
.doc>*{max-width:50rem}
.doc h1{font-size:var(--t2);line-height:1.05;letter-spacing:-.025em;font-weight:700;margin-bottom:1.5rem}
.doc h2{font-size:var(--t3);font-weight:700;margin:2.75rem 0 .75rem;letter-spacing:-.01em}
.doc h3{font-size:var(--t4);font-weight:600;margin:1.75rem 0 .4rem;text-wrap:balance}
.doc p,.doc li{max-width:36em;color:var(--ink-2);text-wrap:pretty}
.doc p+p{margin-top:.75rem}
.doc ul{padding-left:1.2rem;display:grid;gap:.45rem;margin:.5rem 0}
.doc strong{color:var(--ink)}
.doc .muted{font-size:var(--t5)}
.doc .log{list-style:none;padding:0;border-left:2px solid var(--rule);margin-left:.4rem}
.doc .log li{position:relative;padding-left:1.25rem}
.doc .log li::before{content:"";position:absolute;left:-.45rem;top:.5rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--paper)}
.doc .log.next li::before{background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule-strong),0 0 0 3px var(--paper)}
.doc .log strong{display:block}
.doc input[type=email]{min-height:3.25rem;padding:.75rem 1.1rem;font:inherit;border:1px solid var(--rule-strong);border-radius:var(--radius);width:min(100%,24rem)}
.doc .button{display:inline-flex;min-height:3.25rem;align-items:center;padding:.8rem 1.5rem;background:var(--night);color:var(--amber);font:inherit;font-weight:600;border:0;border-radius:var(--radius);cursor:pointer;margin-top:1rem}

/* Privacy and legal notice on one page: the contents on the left, smaller text, the notice as a table */
.legal{padding-block:clamp(2rem,1rem + 3vw,3.5rem) var(--band);display:grid;gap:1.75rem 4rem;font-size:.9375rem;line-height:1.6}
.legal-head h1{font-size:clamp(1.75rem,1.35rem + 1.5vw,2.5rem);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.legal-head .muted{font-size:var(--t5);color:var(--ink-2);margin-top:.75rem;max-width:46em;text-wrap:pretty}
.toc{font-size:var(--t5);padding-block:.75rem;border-block:1px solid var(--rule)}
.toc p{font-weight:600;color:var(--ink);margin-bottom:.25rem}
.legal .toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.1rem}
.toc a{display:inline-block;padding-block:.35rem;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline}
.legal-body{max-width:44rem;min-width:0}
.legal-body section+section{margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--rule)}
.legal h2{font-size:1.125rem;font-weight:700;letter-spacing:-.005em;line-height:1.3;margin-bottom:.6rem;text-wrap:balance}
.legal h3{font-size:inherit;font-weight:600;color:var(--ink);margin:1.4rem 0 .25rem}
.legal p,.legal li,.legal dd{color:var(--ink-2);text-wrap:pretty}
.legal p+p{margin-top:.6rem}
.legal ul{padding-left:1.1rem;display:grid;gap:.3rem;margin:.4rem 0}
.legal strong,.legal a{color:var(--ink)}
.legal a{overflow-wrap:anywhere}
.legal .brief{background:var(--mist);border-radius:.75rem;padding:1.25rem 1.5rem 1.4rem;font-size:1rem}
.legal .brief+section{border-top:0;padding-top:0}
.notice{margin:.25rem 0 0}
.notice div{display:grid;gap:.15rem 2rem;padding-block:.9rem;border-top:1px solid var(--rule)}
.notice div:first-child{border-top:0;padding-top:.25rem}
.notice dt{font-weight:600;color:var(--ink);line-height:1.4}
.notice dd{margin:0}
@media (min-width:40em){.notice div{grid-template-columns:12rem minmax(0,1fr)}}
@media (min-width:60em){
  .legal{grid-template-columns:12.5rem minmax(0,44rem);grid-template-areas:"head head" "toc body";align-items:start}
  .legal-head{grid-area:head}.legal-body{grid-area:body}
  .toc{grid-area:toc;position:sticky;top:5.5rem;padding-block:0;border-block:0}
  .toc p{margin-bottom:.5rem}
  .legal .toc ul{flex-direction:column;border-left:1px solid var(--rule)}
  .toc a{display:block;padding:.3rem 0 .3rem .9rem;margin-left:-1px;border-left:2px solid transparent}
  .toc a:hover{text-decoration:none;border-left-color:var(--ink)}
}

/* The real site's extras: skip link, language link, the robots' trap field, form errors */
.skip{position:absolute;left:1rem;top:-4rem;z-index:20;padding:.6rem 1rem;background:var(--night);color:var(--amber);border-radius:var(--radius);text-decoration:none;font-weight:600}
.skip:focus{top:calc(.5rem + env(safe-area-inset-top,0px))}
.top-act{display:flex;align-items:center;gap:.25rem 1.1rem}
.top .lang{font-size:var(--t5);color:var(--ink-2);text-decoration:none;padding-block:.6rem}
.top .lang:hover{color:var(--ink);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{color:#a3290f;font-weight:600;margin-top:.75rem;max-width:32em}
.form.sending [type=submit]{opacity:.6;pointer-events:none}
@media (max-width:29.99em){.top .lang{display:none}}

/* Step 1: a first name and a city per display (they stay in the browser); step 2: the right number */
.pcards{display:grid;gap:.9rem}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.35rem .5rem;align-items:center}
.pcard-n{grid-column:1/-1;font-size:var(--t5);font-weight:600;color:var(--ink-2)}
.pcard input,.pcard select{min-height:3rem;width:100%;min-width:0;padding:.6rem 1rem;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius)}
.pcard input::placeholder{color:var(--ink-2);opacity:.7}
.pcard input:focus-visible,.pcard select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.how{display:grid;gap:.6rem;margin-top:1rem}
.mine-line{font-size:var(--t3);font-weight:600;line-height:1.3;max-width:28em}

/* The case's front edge is rounded over, as on the real oak: rounder corners, light along the top and
   left of the edge and shade along the bottom and right; the side faces curve and catch the same light
   where they meet the front. The display windows are set into the wood: a shadow under the top of each
   opening, a thin light lip at its bottom. */
.box{--r:calc(var(--cw) * .055)}
.case::before{border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,238,210,.16),inset calc(var(--cw) * .014) calc(var(--cw) * .016) calc(var(--cw) * .022) rgba(255,238,210,.32),inset calc(var(--cw) * -.016) calc(var(--cw) * -.018) calc(var(--cw) * .026) rgba(45,20,5,.34),0 1px 0 rgba(0,0,0,.05),0 40px 60px -42px rgba(50,32,10,.6)}
.face-side{border-radius:var(--r) 3px 3px var(--r);background:linear-gradient(90deg,rgba(255,238,210,.2),transparent 22%),linear-gradient(90deg,rgba(40,18,4,.38),rgba(40,18,4,.5)),url(../img/oak.webp) 20% 0/auto 100%,var(--oak-2)}
.face-left{border-radius:3px var(--r) var(--r) 3px;background:linear-gradient(270deg,rgba(255,238,210,.14),transparent 22%),linear-gradient(90deg,rgba(40,18,4,.5),rgba(40,18,4,.36)),url(../img/oak.webp) 70% 0/auto 100%,var(--oak-2)}
.face-top{border-radius:var(--r) var(--r) 3px 3px;background:linear-gradient(rgba(255,238,210,.3),transparent 26%),linear-gradient(rgba(255,240,215,.18),rgba(40,18,4,.15)),url(../img/oak.webp) 0 0/100% auto,var(--oak)}
.face-bottom{border-radius:3px 3px var(--r) var(--r)}
.face-core,.face-back{border-radius:var(--r)}
.row .window{position:relative;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 -1.5px 0 rgba(30,12,2,.5),0 1.5px 0 rgba(255,238,210,.6),0 0 0 1px rgba(30,12,2,.22)}
.row .window::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 calc(var(--cw) * .016) calc(var(--cw) * .022) rgba(0,0,0,.78),inset 0 -1px 0 rgba(255,255,255,.05)}
.unknown{color:#8a4b00;margin-top:.75rem}
.pcard input::placeholder{color:var(--ink-2);opacity:.7}

/* « Autre » is a pill like the others; click it and type. Once typed in, it looks chosen. */
.other{display:inline-flex}
.other input{min-height:3rem;width:7.5rem;padding:.6rem 1.15rem;font:inherit;line-height:1.2;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius);cursor:text;transition:width .25s ease-out,background-color .15s ease-out}
.other input::placeholder{color:var(--ink);opacity:1}
.other input:hover{border-color:var(--ink)}
.other input:focus{width:min(22rem,calc(100vw - 3rem));outline:3px solid var(--focus);outline-offset:3px}
.other input:focus::placeholder{color:var(--ink-2)}
.other input:not(:placeholder-shown){width:min(22rem,calc(100vw - 3rem))}
.other input:not(:placeholder-shown):not(:focus){background:var(--night);color:var(--amber);border-color:var(--night)}

/* The quiz preview turns like the hero clock; the sign-up's pitch for the card; the gift section's link to it */
#pv-stage{padding-block:.5rem}

/* The card to give: an A6 card folded from an A5 sheet (210 × 148 mm, on A4 landscape), the back on
   the left and the front on the right, as printed. Each half is a size container, so the card is drawn
   in cqw and prints to scale (100cqw = 105 mm); its padding sits on the inner .gp, so it is measured
   against the half too. Where the room is narrow, the front comes first and
   the back below it. The inside is the sheet's blank side. */
/* the card's page: the boxes, then the card and its print button; side by side on a wide screen */
.cardpage{padding-block:clamp(2.5rem,6vw,4.5rem) var(--band)}
.cp-in{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
.cp-head h1{font-size:var(--t2);line-height:1.05;letter-spacing:-.025em;font-weight:700}
.cp-intro{margin-top:1rem;font-size:var(--t3);color:var(--ink-2);max-width:32em}
.cp-form{display:grid;gap:1rem;align-content:start}
.cp-form h2{font-size:var(--t3);font-weight:700}
.cp-form h2:not(:first-child){margin-top:1.25rem}
.cp-out{display:grid;gap:1rem;justify-items:start;align-content:start}
@media (min-width:64em){
  .cp-in{grid-template-columns:minmax(0,22rem) minmax(0,1fr);column-gap:clamp(3rem,5vw,5rem)}
  .cp-head{grid-column:1/-1}
  .cp-out{position:sticky;top:calc(env(safe-area-inset-top,0px) + 5.5rem)}
}
/* after signing up: the picture of their clock, to send */
.pic{display:grid;gap:1rem;justify-items:start;margin-top:1.75rem;width:100%}
.pic h3{font-size:var(--t3);font-weight:700}
.pic-canvas{display:block;width:min(100%,19rem);height:auto;aspect-ratio:1080/1350;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 48px -24px rgba(20,15,10,.45)}
.pic-act{display:flex;flex-wrap:wrap;gap:.75rem}
.gc-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem .75rem;align-items:center;max-width:30rem}
.gc-fields label{font-size:var(--t5);font-weight:600;color:var(--ink-2)}
.gc-fields input{min-height:2.75rem;min-width:0;padding:.5rem 1rem;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius)}
.gc-fields input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gsheet-wrap{container:sheet/inline-size;margin:0;width:100%}
.gsheet{position:relative;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#fff 47%,#f1ede7 50%,#fff 53%);border:1px solid var(--rule);box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 48px -24px rgba(40,30,15,.35);-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* where to fold: two short marks on the middle line, at the top and the bottom edge */
.gsheet::before,.gsheet::after{content:"";position:absolute;left:50%;height:4%;border-left:1px solid #b9b3a9}
.gsheet::before{top:0}.gsheet::after{bottom:0}
.gpage{container-type:inline-size;aspect-ratio:105/148;position:relative;color:#141312;line-height:1.3;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.gp{position:absolute;inset:0;display:flex;flex-direction:column;padding:10cqw 9cqw 8cqw}
.gf-label{display:block;font-size:3.1cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8a8378}
.gf-name{display:block;margin-top:1.2cqw;font-size:7.6cqw;font-weight:650;line-height:1.12;text-wrap:balance;overflow-wrap:anywhere}
.gf-from .gf-name{font-size:5.4cqw;font-weight:600}
.gf-mid{margin-block:auto;padding-block:6cqw}
.gf-clock{list-style:none;margin:0;padding:4.6cqw 0;position:relative;display:grid;grid-template-columns:31cqw minmax(0,1fr);column-gap:5.5cqw;row-gap:3.5cqw;align-items:center}
.gf-clock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:31cqw;border-radius:2.2cqw;background:linear-gradient(90deg,rgba(60,30,8,.16),transparent 12%,transparent 85%,rgba(60,30,8,.2)),url(../img/oak.webp) 50% 0/cover,var(--oak)}
.gf-row{display:contents}
.gf-row .window{position:relative;z-index:1;width:23cqw;padding:.5cqw;border-radius:.9cqw;justify-self:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 -.3cqw 0 rgba(30,12,2,.5),0 .3cqw 0 rgba(255,238,210,.6)}
.gf-row .panel{height:auto;aspect-ratio:250/90}
.gf-who{min-width:0;font-size:3.6cqw;line-height:1.25;color:#5b5750;overflow-wrap:anywhere}
.gf-who strong{display:block;font-size:4.7cqw;font-weight:650;color:#141312}
.gf-when{margin-top:3.8cqw;font-size:3.3cqw;color:#8a8378}
.gb-text{display:grid;gap:2.6cqw;margin-block:auto;max-width:74cqw;font-size:4.7cqw;line-height:1.45;color:#3d3a35;text-wrap:pretty}
.gb-mark{display:flex;align-items:center;gap:2.4cqw;font-size:3.2cqw;letter-spacing:.04em;color:#8a8378}
/* a small drawn clock: an oak strip with four displays */
.gb-clock{width:4cqw;height:10cqw;border-radius:.7cqw;background:linear-gradient(#1a1714,#1a1714) 50% 12%/62% 15% no-repeat,linear-gradient(#1a1714,#1a1714) 50% 37%/62% 15% no-repeat,linear-gradient(#1a1714,#1a1714) 50% 63%/62% 15% no-repeat,linear-gradient(#1a1714,#1a1714) 50% 88%/62% 15% no-repeat,url(../img/oak.webp) 50% 0/cover,var(--oak)}
@container sheet (max-width:34rem){
  .gsheet{grid-template-columns:minmax(0,21rem);gap:1.25rem;background:none;border:0;box-shadow:none}
  .gsheet::before,.gsheet::after{content:none}
  .gsheet .gpage{background:#fff;border:1px solid var(--rule);box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 48px -24px rgba(40,30,15,.35)}
  .gsheet .gfront{order:-1}
}
#print-sheet{display:none}
@media print{
  /* The card prints on its own named page, A4 landscape; other pages keep the printer's settings. */
  @page card{size:A4 landscape;margin:0}
  /* Only the card's sheet prints (the display drawings' shapes stay, for its digits). */
  .print-card body>*:not(#print-sheet):not(.defs){display:none!important}
  .print-card body{page:card}
  .print-card #print-sheet{display:block;padding-top:22mm}
  .print-card #print-sheet .ps-note{width:210mm;margin:0 auto 4mm;font-size:9pt;color:#6f6a62}
  .print-card #print-sheet .gsheet{width:210mm;height:148mm;margin:0 auto;background:#fff;border:.3mm dashed #9a958c;box-shadow:none}
  .print-card #print-sheet .gsheet::before,.print-card #print-sheet .gsheet::after{height:5mm;border-left:.25mm solid #9a958c}
  .print-card #print-sheet .gpage{width:105mm;height:148mm;aspect-ratio:auto}
}
}