:root{
--paper:#efe5cc;
--paper-2:#e7dbbf;
--ink:#2a2317;
--ink-soft:#5c5138;
--garnet:#7c2d43;
--line:rgba(42,35,23,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(124,45,67,.2)}
html{background:var(--paper)}
body{
background:var(--paper);
color:var(--ink);
font-family:"IM Fell English",Georgia,serif;
overflow-x:hidden;
}
.grain{
position:fixed;
inset:0;
z-index:80;
pointer-events:none;
opacity:.5;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 0 0.19 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:90;
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 34px;
}
.brand{
display:flex;
gap:11px;
align-items:center;
text-decoration:none;
color:var(--ink);
font-family:"IM Fell English SC","IM Fell English",Georgia,serif;
font-size:20px;
letter-spacing:.1em;
}
.topnav{
display:flex;
align-items:center;
gap:26px;
font-family:"IM Fell English SC","IM Fell English",Georgia,serif;
font-size:15px;
letter-spacing:.06em;
}
.topnav a{color:var(--ink);text-decoration:none;opacity:.82;transition:opacity .15s ease}
.topnav a:hover{opacity:1}
.topnav a.btn{color:var(--paper);opacity:1}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5em;
padding:12px 24px;
font-family:"IM Fell English SC","IM Fell English",Georgia,serif;
font-size:16px;
letter-spacing:.07em;
color:var(--paper);
background:var(--ink);
border:0;
border-radius:0;
cursor:pointer;
text-decoration:none;
transition:background .18s ease,transform .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:var(--ink)}
.btn-ink:hover{background:#3a3120}
.btn-garnet{background:var(--garnet)}
.btn-garnet:hover{background:#8f3550}
.btn-sm{padding:8px 16px;font-size:14px}
.btn.block{display:flex;width:100%}
.btn-text{
font-family:"IM Fell English SC","IM Fell English",Georgia,serif;
font-size:16px;
letter-spacing:.05em;
color:var(--garnet);
text-decoration:none;
align-self:center;
padding-bottom:6px;
}
/* Soulignement ondulé tracé main au survol (encre, pas de règle droite) */
.btn-text:hover,.topnav a:not(.btn):hover,.foot a:hover{
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='7' viewBox='0 0 60 7'%3E%3Cpath d='M2 4.5 Q 9 1.5, 16 4 T 30 4 T 44 4 T 58 3.5' fill='none' stroke='%237c2d43' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/60px 7px;
}
.topnav a:not(.btn){padding-bottom:5px}
.foot a{padding-bottom:4px}
.btn-text:hover{color:#8f3550}
/* ---- Lettres animées : .l = un caractère ; lv-* = « casse » (une lettre
   glisse en italique ou petites capitales toutes les 0,5 s, cf. type.js) */
.l{display:inline-block;will-change:transform,opacity}
.l.lv-i{font-style:italic}
.l.lv-sc{font-family:"IM Fell English SC",Georgia,serif}
.l.lv-i,.l.lv-sc{animation:sortpop .32s ease}
@keyframes sortpop{50%{transform:scale(1.07)}}
/* ---- Chapitres du scrub : phrases composées lettre à lettre pendant la
   course, alternées gauche/droite pour laisser respirer la plante */
.chap{
position:absolute;
top:0;
bottom:0;
z-index:60;
display:flex;
flex-direction:column;
justify-content:center;
max-width:min(600px,42vw);
opacity:0;
pointer-events:none;
will-change:transform,opacity;
}
.chap.side-l{left:max(34px,5.5vw)}
.chap.side-r{right:max(34px,5.5vw)}
.chap.up{justify-content:flex-start;padding-top:17vh;right:max(34px,3vw);max-width:min(560px,40vw)}
.chap.up .chap-h{font-size:clamp(40px,5.4vw,68px)}
.chap.on .cta a{pointer-events:auto}
.chap-in{position:relative}
/* La main du collectionneur : encre cursive pour les notes de marge */
.hand{
font-family:"La Belle Aurore",cursive;
text-transform:none;
}
/* ---- Objets posés sur la feuille (encre de la planche, jamais de photo) */
/* Sceau de cire = logo (mêmes classes internes que le cachet du chapitre) */
.brand-seal{
width:27px;
height:27px;
flex:none;
transform:rotate(-8deg);
transition:transform .25s ease;
filter:drop-shadow(1px 1.5px 1px rgba(42,35,23,.2));
}
.brand:hover .brand-seal{transform:rotate(4deg)}
.brand-seal .mono{font-size:40px}
/* Scotch jauni d'herbier : fibres froissées, bords sombres, bouts déchirés */
.tape{
position:absolute;
width:104px;
height:26px;
background:
repeating-linear-gradient(104deg,rgba(255,252,238,.15) 0 2px,rgba(120,95,45,.06) 2px 4px,transparent 4px 9px),
linear-gradient(90deg,rgba(146,116,58,.30) 0,rgba(216,193,134,0) 8%,rgba(216,193,134,0) 92%,rgba(146,116,58,.30) 100%),
linear-gradient(180deg,rgba(221,199,140,.55),rgba(198,175,115,.42));
mix-blend-mode:multiply;
clip-path:polygon(0 12%,5% 0,11% 9%,16% 2%,90% 4%,95% 0,100% 14%,97% 40%,100% 62%,96% 100%,89% 92%,14% 97%,7% 100%,2% 84%,3% 46%);
box-shadow:inset 0 1px 0 rgba(255,252,238,.3),inset 0 -1px 2px rgba(120,95,45,.28);
pointer-events:none;
z-index:3;
}
/* Papillons à l'encre : ailes garnet lavé, corps encre */
.bfly{
position:absolute;
left:0;
top:0;
width:88px;
pointer-events:none;
will-change:transform;
z-index:56;
opacity:0;
}
.bfly.bspec{z-index:0;left:auto;opacity:1}
.bfly path,.bfly circle{stroke:#2f2a1c;stroke-width:1.3;fill:none;stroke-linecap:round}
.bfly .fw{fill:rgba(124,45,67,.30)}
.bfly .hw{fill:rgba(124,45,67,.16)}
.bfly.ink .fw{fill:rgba(42,35,23,.15)}
.bfly.ink .hw{fill:rgba(42,35,23,.08)}
.bfly .vn{opacity:.5;stroke-width:.9}
.bfly .body{fill:#2f2a1c;stroke:none}
.bfly .wing{transform-box:fill-box;will-change:transform}
.bfly .wl{transform-origin:100% 50%}
.bfly .wr{transform-origin:0% 50%}
/* Spécimen épinglé (statique, punaise au corps) */
.bspec{position:absolute;pointer-events:none}
.bspec::after{
content:"";
position:absolute;
left:50%;
top:48%;
width:7px;
height:7px;
margin:-3.5px 0 0 -3.5px;
border-radius:50%;
background:#241d12;
box-shadow:2px 3px 2px rgba(42,35,23,.3);
}
/* Clé ancienne, scotchée sous le premier chapitre */
.obj-key{
position:relative;
width:158px;
margin:28px 0 0 1em;
transform:rotate(-5deg);
pointer-events:none;
}
.obj-key svg{display:block;width:100%;height:auto;overflow:visible}
.obj-key path,.obj-key circle,.obj-key ellipse{stroke:#2f2a1c;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.obj-key .shaft{stroke-width:3.4}
.obj-key .bit{fill:rgba(42,35,23,.08)}
.tape-key{left:34%;top:-4px;width:88px;transform:rotate(8deg)}
/* Cachet de cire, frappé au-dessus du chapitre « Scellé » */
.seal{
position:absolute;
top:-58px;
left:-10px;
width:76px;
transform:rotate(-9deg);
opacity:.94;
pointer-events:none;
filter:drop-shadow(1px 2px 1.5px rgba(42,35,23,.22));
}
.seal .wax,.brand-seal .wax{fill:#7c2d43;stroke:#5d1f31;stroke-width:2}
.seal .ring,.brand-seal .ring{fill:none;stroke:rgba(239,229,204,.35);stroke-width:1.6;stroke-dasharray:2.5 3.5}
.seal .mono,.brand-seal .mono{font-family:"IM Fell English SC",Georgia,serif;font-size:34px;fill:rgba(239,229,204,.92);text-anchor:middle}
/* Engrenages gravés (les systèmes) — tournent avec le scroll */
.gears{
position:absolute;
right:26px;
top:58px;
width:196px;
pointer-events:none;
opacity:.85;
}
.gears circle,.gears line{stroke:#2f2a1c;fill:none;stroke-width:2}
.gears .teeth{stroke-width:14;stroke-dasharray:13 10.04}
.gears .teeth.s{stroke-width:12;stroke-dasharray:10.5 8.35}
.gears .hub{fill:#efe5cc}
.gears .gA,.gears .gB{transform-box:fill-box;transform-origin:center;will-change:transform}
/* Sphinx tête-de-mort épinglé : les ailes respirent lentement */
.moth path,.moth circle,.moth ellipse{stroke:#2f2a1c;stroke-width:1.3;fill:none;stroke-linecap:round}
.moth .mfw{fill:rgba(42,35,23,.20)}
.moth .mhw{fill:rgba(176,138,64,.30)}
.moth .mpat{opacity:.55;stroke-width:.9}
.moth .mbody{fill:rgba(42,35,23,.85);stroke:none}
.moth .mstripes{stroke:rgba(239,229,204,.5);stroke-width:1.2}
.moth .mskull{fill:#e9dfc4;stroke-width:.9}
.moth .meye{fill:#2f2a1c;stroke:none}
.moth .mjaw{stroke-width:.9}
.moth .mant{stroke-width:1;opacity:.8}
.moth .mw{transform-box:fill-box;animation:mothbreath 4.6s ease-in-out infinite}
.moth .ml{transform-origin:100% 42%}
.moth .mr{transform-origin:0% 42%}
@keyframes mothbreath{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.952)}}
/* Pétales qui se détachent du bouquet à la fin de la course */
.petal{
position:absolute;
left:0;
top:0;
width:17px;
z-index:55;
pointer-events:none;
opacity:0;
will-change:transform,opacity;
}
.petal path{fill:rgba(124,45,67,.34);stroke:#2f2a1c;stroke-width:1}
.petal .pv{fill:none;stroke-width:.8;opacity:.5}
/* Fleuron gravé : séparateur de sections (pointillés + feuille garnet) */
.fleuron{display:flex;justify-content:center;margin:0 0 46px}
.fleuron svg{width:180px;height:26px}
.fleuron line{stroke:#2f2a1c;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:.5 6.5;opacity:.7}
.fleuron .fl{fill:rgba(124,45,67,.55);stroke:#5d1f31;stroke-width:1}
.fleuron .fc{fill:none;stroke:#2f2a1c;stroke-width:1;opacity:.7}
.foot-fl{margin:56px 0 -26px}
/* Rien n'est droit sur une planche : chaque bloc penche un peu, chacun
   dans son sens (le .chap externe appartient au JS, .chap-in est libre) */
.chap.first .chap-in{transform:rotate(-1.1deg)}
.chap.up .chap-in{transform:rotate(.85deg)}
.chap:not(.first):not(.up) .chap-in{transform:rotate(-.7deg)}
.chap-h .ln2{display:inline-block}
.chap.first .chap-h .ln2{margin-left:.6em}
.chap.up .chap-h .ln2{margin-left:-.4em}
.chap:not(.first):not(.up) .chap-h .ln2{margin-left:.75em}
.chap.first .chap-sub{margin-left:1.1em}
.chap.up .chap-sub{margin-left:.45em}
.chap:not(.first):not(.up) .chap-sub{margin-left:1.5em}
.chap.first .cta{margin-left:1.3em}
/* Parafe de plume sous le titre : se trace quand le chapitre est en place */
.flourish{
width:min(238px,46%);
height:auto;
margin:8px 0 0 .9em;
overflow:visible;
}
.flourish path{
fill:none;
stroke:var(--garnet);
stroke-width:1.5;
stroke-linecap:round;
opacity:.75;
stroke-dasharray:260;
stroke-dashoffset:260;
transition:stroke-dashoffset 1.15s cubic-bezier(.3,.6,.3,1) .55s;
}
.chap.on .flourish path{stroke-dashoffset:0}
.chap-h{
font-weight:400;
font-size:clamp(42px,6.2vw,78px);
line-height:.98;
letter-spacing:-.01em;
color:var(--ink);
text-shadow:0 0 .5px rgba(42,35,23,.35);
}
.chap-h .l{opacity:0}
.chap-sub{
margin-top:22px;
font-size:18.5px;
line-height:1.5;
color:var(--ink-soft);
max-width:26em;
opacity:0;
}
.chap .cta{
margin-top:30px;
display:flex;
align-items:center;
gap:22px;
flex-wrap:wrap;
opacity:0;
}
/* La note finale est un billet de papier scotché à la planche */
.chap-fin{
position:absolute;
left:max(34px,5.5vw);
top:50%;
transform:translateY(-50%) rotate(-1.4deg);
z-index:60;
font-size:23px;
letter-spacing:.04em;
color:var(--ink-soft);
opacity:0;
pointer-events:none;
background:linear-gradient(180deg,rgba(252,248,236,.85),rgba(246,239,219,.75));
padding:14px 22px 12px;
box-shadow:0 1px 3px rgba(42,35,23,.12),0 0 0 1px rgba(42,35,23,.05);
}
/* Indice de scroll : simple fil pointillé qui respire, aucun texte */
.hint{
position:absolute;
left:50%;
bottom:4.5vh;
width:1px;
height:54px;
z-index:61;
background:repeating-linear-gradient(to bottom,var(--ink) 0 2px,transparent 2px 8px);
animation:hintdrift 2.6s ease-in-out infinite;
}
@keyframes hintdrift{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
/* Révélations au viewport (bas de page + tarifs) ; --tw = inclinaison propre
   de chaque bloc (rien n'est droit), --dy/--da/--ink = dérive par lettre */
[data-reveal]{opacity:0;transform:translateY(18px) rotate(var(--tw,0deg));transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:translateY(0) rotate(var(--tw,0deg))}
[data-reveal="split"]{opacity:1;transform:rotate(var(--tw,0deg));transition:none}
.rl{opacity:0;transform:translate(.08em,.5em) rotate(calc(var(--da,0deg) + 3.5deg));transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in .rl{opacity:var(--ink,1);transform:translate(0,var(--dy,0em)) rotate(var(--da,0deg))}
.track{height:540vh}
.stage{
position:sticky;
top:0;
height:100vh;
overflow:hidden;
perspective:1400px;
}
/* Le quadrillage de carte couvre TOUTE la planche (multiply : il marque le
   papier et disparaît sur le feuillage) — même trame que la section produit */
.stage::after{
content:"";
position:absolute;
inset:0;
z-index:45;
pointer-events:none;
mix-blend-mode:multiply;
background:
repeating-linear-gradient(0deg,rgba(42,35,23,.05) 0 1px,transparent 1px 104px),
repeating-linear-gradient(90deg,rgba(42,35,23,.05) 0 1px,transparent 1px 104px);
}
/* Grand mot en filigrane derrière le bouquet, en fin de course */
.bigword{
position:absolute;
left:50%;
top:44%;
z-index:50;
transform:translate(-50%,-50%) rotate(-2.2deg);
font-style:italic;
font-size:15.5vw;
line-height:1;
letter-spacing:.03em;
color:var(--ink);
white-space:nowrap;
mix-blend-mode:multiply;
opacity:0;
pointer-events:none;
will-change:opacity,transform;
}
/* Études de marge : croquis d'encre posés aux coins de la planche */
.study{
position:absolute;
z-index:52;
pointer-events:none;
opacity:.55;
}
.study path,.study circle{stroke:#2f2a1c;stroke-width:1.3;fill:none;stroke-linecap:round}
.study .hatch{stroke-width:.85;opacity:.55}
.study .sd{fill:rgba(42,35,23,.25)}
.study.s-pod{left:46px;top:104px;width:62px;transform:rotate(-6deg)}
.study.s-leaf{right:44px;bottom:11vh;width:122px;transform:rotate(8deg)}
.rig{
position:absolute;
inset:0;
will-change:transform;
}
.film{
position:absolute;
inset:0;
display:grid;
place-items:center;
will-change:transform;
}
.film > *{grid-area:1/1}
.filmc, .poster{
width:max(100vw, 178vh);
height:auto;
aspect-ratio:16/9;
transform-origin:50% 92%;
}
.dust{
position:fixed;
left:0;
top:0;
pointer-events:none;
z-index:78;
border-radius:50%;
filter:blur(3px);
opacity:0;
}
.d1{width:24px;height:24px;background:radial-gradient(circle,rgba(62,48,24,.55),rgba(62,48,24,0) 70%)}
.d2{width:13px;height:13px;background:radial-gradient(circle,rgba(250,242,216,.9),rgba(250,242,216,0) 70%)}
.d3{width:34px;height:34px;background:radial-gradient(circle,rgba(62,48,24,.4),rgba(62,48,24,0) 70%)}
.page{
position:relative;
z-index:2;
background:var(--paper);
}
.band{
position:relative;
max-width:1120px;
margin:0 auto;
padding:118px 34px;
}
/* Quadrillage de carte ancienne, à peine visible, sous la section produit */
#produit::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:calc(50% - 50vw);
width:100vw;
z-index:-1;
background:
repeating-linear-gradient(0deg,rgba(42,35,23,.05) 0 1px,transparent 1px 104px),
repeating-linear-gradient(90deg,rgba(42,35,23,.05) 0 1px,transparent 1px 104px);
}
.band.alt::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:calc(50% - 50vw);
width:100vw;
z-index:-1;
background:var(--paper-2);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.eyebrow{
font-family:"IM Fell English SC",Georgia,serif;
font-size:13px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--garnet);
margin-bottom:14px;
}
.band-h{
font-weight:400;
font-size:clamp(30px,4.4vw,50px);
line-height:1.05;
letter-spacing:-.01em;
color:var(--ink);
margin-bottom:54px;
--tw:-.65deg;
text-shadow:0 0 .5px rgba(42,35,23,.35);
}
.pillars{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:34px;
align-items:start;
}
/* Spécimens épinglés à la main : hauteurs et inclinaisons dépareillées */
.pillar:nth-child(1){--tw:-.4deg}
.pillar:nth-child(2){--tw:.3deg;margin-top:20px}
.pillar:nth-child(3){--tw:-.25deg;margin-top:7px}
.pillar:nth-child(4){--tw:.45deg;margin-top:28px}
/* Chaque pilier est une fiche de papier scotchée sur la planche */
.pillar{
position:relative;
background:linear-gradient(180deg,rgba(252,248,236,.66),rgba(248,242,224,.5));
padding:16px 16px 14px;
box-shadow:0 1px 2px rgba(42,35,23,.08),0 0 0 1px rgba(42,35,23,.04);
}
.pillar .pn{
font-family:"IM Fell English SC",Georgia,serif;
font-size:19px;
letter-spacing:.08em;
color:var(--ink);
padding-top:16px;
border-top:2px solid var(--ink);
margin-bottom:12px;
}
.pillar .pd{
font-size:15.5px;
line-height:1.55;
color:var(--ink-soft);
}
.tiers{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:26px;
align-items:start;
}
.tier{
padding:34px 30px;
background:var(--paper);
border:1px solid var(--line);
}
.tier:nth-child(1){--tw:-.5deg;margin-top:14px}
.tier:nth-child(3){--tw:.45deg;margin-top:22px}
.tier{position:relative}
.tier.feature{
background:var(--ink);
color:var(--paper);
border-color:var(--ink);
}
.tier-badge{
display:inline-block;
font-family:"IM Fell English SC",Georgia,serif;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--garnet);
margin-bottom:16px;
transform:rotate(-1.9deg);
}
.tier.feature .tier-badge{color:#e6a6b4}
.tier-name{
font-family:"IM Fell English SC",Georgia,serif;
font-size:22px;
letter-spacing:.08em;
margin-bottom:12px;
}
.tier-price{
margin-bottom:24px;
display:flex;
align-items:baseline;
gap:9px;
}
.tier-price .amt{font-size:42px;line-height:1}
.tier-price .per{font-size:14px;color:var(--ink-soft)}
.tier.feature .tier-price .per{color:rgba(239,229,204,.7)}
.tier-list{list-style:none;margin:0 0 30px;padding:0}
.tier-list li{
font-size:15px;
line-height:1.5;
padding:9px 0;
border-top:1px solid var(--line);
}
.tier-list li:first-child{border-top:0}
.tier.feature .tier-list li{border-top-color:rgba(239,229,204,.16)}
.tarif-foot{
margin-top:36px;
text-align:center;
font-size:14px;
font-style:italic;
color:var(--ink-soft);
}
.band-cta{
margin-top:54px;
display:flex;
align-items:center;
gap:22px;
flex-wrap:wrap;
}
/* ---- Page tarifs : le bouquet final de la séquence sert de fond (même
   papier #efe5cc → raccord invisible), balancé très lentement */
body.tarifs .page{background:transparent}
.bloom-bg{
position:fixed;
z-index:0;
left:16vw;
top:52%;
width:120vw;
max-width:none;
pointer-events:none;
user-select:none;
transform-origin:50% 82%;
animation:bloomsway 16s ease-in-out infinite alternate;
}
@keyframes bloomsway{
from{transform:translateY(-52%) rotate(-.45deg)}
to{transform:translateY(-52%) rotate(.55deg)}
}
.tarif-hero{padding-top:calc(118px + 8vh);padding-bottom:44px}
.tarif-hero .band-h.xl{
font-size:clamp(52px,8.4vw,110px);
line-height:.96;
margin-bottom:26px;
--tw:-1.1deg;
}
.tarif-lede{
font-size:19px;
font-style:italic;
color:var(--ink-soft);
}
.tarif-lede.hand{
font-style:normal;
font-size:25px;
margin-left:1.4em;
--tw:-1.3deg;
}
.tarif-body{padding-top:24px}
.foot{
max-width:1120px;
margin:0 auto;
padding:44px 34px 64px;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
flex-wrap:wrap;
font-family:"IM Fell English SC",Georgia,serif;
font-size:14px;
letter-spacing:.06em;
color:var(--ink-soft);
}
.foot a{color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--garnet)}
.foot em{font-style:italic}
.foot .muted{opacity:.7}
@media (max-width:900px){
.topbar{padding:16px 20px}
.brand{font-size:17px}
.topnav{gap:16px;font-size:14px}
.band{padding:88px 22px}
.pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tiers{grid-template-columns:1fr;gap:20px}
.chap,.chap.side-l,.chap.side-r,.chap.up{left:22px;right:22px;max-width:none;justify-content:flex-end;padding-top:0;padding-bottom:13vh}
.chap-h{font-size:clamp(36px,9vw,54px)}
.chap-sub{font-size:16.5px}
.gears,.bspec,.moth{display:none}
.obj-key{margin-top:18px;width:130px}
.seal{width:60px;top:-44px}
.bloom-bg{width:210vw;left:-40vw;opacity:.6}
}
@media (max-width:560px){
.topnav a:not(.btn){display:none}
.chap-sub{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
.track{height:100vh}
.hint,.chap-fin,.chap{display:none}
.chap.first{display:flex;opacity:1;pointer-events:auto}
.chap.first .chap-h .l,.chap.first .chap-sub,.chap.first .cta{opacity:1}
.chap.first .cta a{pointer-events:auto}
.chap.first .flourish path{stroke-dashoffset:0;transition:none}
.bloom-bg{animation:none;transform:translateY(-52%)}
.moth .mw{animation:none}
}