/* ============================================================
   L'OPERA — shared stylesheet, one source for every chapter.
   Frontispiece register: Fraunces display, royal blue accent,
   paper ground, treatise chrome. brand/visual-identity.md
   ============================================================ */
:root{
  --paper:#E5DBD2; --paper-2:#ECE4D6;
  --ink:#12100E; --ink-soft:#2A2622; --line:rgba(18,16,14,.16);
  --royal:#2846cf; --royal-soft:#5f7bff; --royal-deep:#0b1533;
  --display:"Space Grotesk",sans-serif;
  --serif-display:"Fraunces",Georgia,serif;
  --mono:"Space Mono",monospace;
  --serif:"EB Garamond",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:500;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--royal);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--royal);color:#fff;font-family:var(--mono);font-size:12px;padding:10px 16px;border-radius:2px;transition:top .3s var(--ease)}
.skip:focus{top:16px}
/* living film grain — a patina in FRONT of the whole site (text included).
   Sits above the chrome (only the cursor stays on top); pointer-events none,
   so it is purely a veil. Thicker + coarser than a subtle noise on purpose. */
body::after{content:"";position:fixed;inset:-100px;z-index:140;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:300px;will-change:transform;animation:grain-drift .5s steps(3) infinite}
@keyframes grain-drift{0%{transform:translate(0,0)}33%{transform:translate(-42px,26px)}66%{transform:translate(34px,-38px)}100%{transform:translate(-24px,44px)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
html.flat body::after{animation:none}

/* ---------- page entrance ----------
   NO css animation and NO transform on <main>, ever: an animated transform
   (or a lingering keyframe fill) makes <main> a containing block for
   position:fixed and silently breaks every ScrollTrigger pin.
   The entrance fade is done in shared.js with gsap on opacity + clearProps. */
main{position:relative;z-index:1}
html.leaving main{opacity:0;transition:opacity .3s var(--ease)}

/* ---------- the leaf turns — cross-document view transitions ----------
   Navigating the volume turns a LEAF, not a URL: the new page slides in
   over the old like a plate laid onto the desk, a royal shade under its
   edge; going back, the top leaf lifts off the other way and the previous
   page is found beneath, still in shade. The folio rail and the reading
   thread stay put — they belong to the binding, not to the page.
   Snapshots animate transform/opacity only. Browsers without
   cross-document view transitions keep the quiet fade (html.leaving). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition{background:var(--paper)}
#booknav{view-transition-name:rail}
#route{view-transition-name:route}
::view-transition-old(root){animation:vt-shade .68s var(--ease) both}
::view-transition-new(root){animation:vt-lay .68s var(--ease) both;
  box-shadow:-70px 0 130px -28px rgba(11,21,51,.55)}
@keyframes vt-lay{from{transform:translateX(100%)}}
@keyframes vt-shade{to{transform:translateX(-16%);opacity:.38}}
html.vt-back::view-transition-old(root){z-index:2;animation:vt-lift .68s var(--ease) both;
  box-shadow:-70px 0 130px -28px rgba(11,21,51,.55)}
html.vt-back::view-transition-new(root){animation:vt-unshade .68s var(--ease) both;box-shadow:none}
@keyframes vt-lift{to{transform:translateX(100%)}}
@keyframes vt-unshade{from{transform:translateX(-16%);opacity:.38}}

/* ---------- chrome ---------- */
#route{position:fixed;top:0;left:0;height:2px;width:0;background:var(--royal);z-index:110}
#cur{position:fixed;z-index:118;top:0;left:0;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s var(--ease)}
#cur .ring{position:absolute;top:-20px;left:-20px;width:40px;height:40px;border:1.5px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease),background .3s var(--ease)}
#cur .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .25s var(--ease)}
#cur.big .ring{transform:scale(1.8);background:rgba(255,255,255,.08)}
#cur.big .lbl{opacity:1}
@media (pointer:coarse){#cur{display:none}}

header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px 28px}
/* with the mobile menu open, lift the header above the sheet so the burger
   (now an X) stays tappable to CLOSE it — otherwise the overlay traps you */
header:has(~ #menu.open){z-index:106}
.wordmark{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.15em;color:#fff;text-decoration:none;mix-blend-mode:difference}
nav.top{display:flex;gap:26px;mix-blend-mode:difference}
nav.top a{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;transition:color .3s var(--ease)}
nav.top a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav.top a:hover{color:#fff}
nav.top a:hover::after{transform:scaleX(1);transform-origin:left}
nav.top a[aria-current="page"]{color:#fff}
nav.top a[aria-current="page"]::after{transform:scaleX(1)}
#burger{display:none}
#menu{position:fixed;inset:0;z-index:105;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:0 30px;gap:4px;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease)}
#menu.open{clip-path:inset(0)}
#menu a{font-family:var(--display);font-weight:700;font-size:clamp(36px,10vw,56px);letter-spacing:-.02em;color:var(--paper);
  text-decoration:none;padding:8px 0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#menu.open a{opacity:1;transform:none}
#menu.open a:nth-child(2){transition-delay:.07s}#menu.open a:nth-child(3){transition-delay:.13s}
#menu.open a:nth-child(4){transition-delay:.19s}#menu.open a:nth-child(5){transition-delay:.25s}
#menu .menu-no{font-family:var(--serif-display);font-style:italic;font-weight:300;font-size:.5em;opacity:.4;margin-right:.5em}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.kicker::before{content:"";display:inline-block;width:26px;height:1px;background:currentColor;vertical-align:middle;margin:0 13px 3px 0;opacity:.7}

/* chapter numeral — a big roman watermark, treatise feel */
section[data-ch]{position:relative}
section[data-ch]::before{content:attr(data-ch);position:absolute;top:clamp(28px,6vh,76px);right:clamp(22px,5vw,88px);
  font-family:var(--serif-display);font-weight:300;font-size:clamp(84px,13vw,210px);line-height:.8;
  color:rgba(18,16,14,.06);pointer-events:none;z-index:0;font-optical-sizing:auto;letter-spacing:.01em}
section[data-ch].on-deep::before{color:rgba(233,225,212,.09)}
section[data-ch]>*{position:relative;z-index:1}

/* ---------- chapter opening — the standard page hero ---------- */
.chapter-open{padding:clamp(150px,22vh,220px) 28px clamp(40px,7vh,80px)}
.chapter-open .shell{max-width:1280px;margin:0 auto}
.chapter-open h1{font-family:var(--serif-display);font-weight:350;letter-spacing:-.012em;line-height:1.02;
  font-size:clamp(42px,6vw,92px);margin-top:18px;font-optical-sizing:auto;max-width:18ch}
.chapter-open h1 em{font-style:italic;font-weight:350}
.chapter-open .lede{margin-top:26px;max-width:52ch;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:var(--ink-soft)}
.chapter-open.on-deep{background:var(--royal-deep);color:var(--paper)}
.chapter-open.on-deep .lede{color:rgba(233,225,212,.84)}
/* arrival: kicker and lede rise after the title's words — one choreography
   for every chapter opening (boot adds .go a beat after load) */
.chapter-open .kicker,.chapter-open .lede{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.chapter-open .lede{transition-delay:.18s}
.chapter-open.go .kicker,.chapter-open.go .lede{opacity:1;transform:none}
html.static .chapter-open .kicker,html.static .chapter-open .lede{opacity:1;transform:none;transition:none}

/* ---------- buttons ---------- */
.btn-plate{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:11px 11px 11px 22px;border-radius:999px;text-decoration:none;transition:transform .55s var(--ease)}
.btn-plate i{width:32px;height:32px;border-radius:50%;background:rgba(18,16,14,.1);display:flex;align-items:center;justify-content:center;font-style:normal;transition:transform .55s var(--ease)}
.btn-plate:hover i{transform:translate(3px,-3px)}
.btn-plate.dark{background:var(--ink);color:var(--paper)}
.btn-plate.dark i{background:rgba(229,219,210,.14)}
.btn-plate.royal{background:var(--royal);color:#fff}
.btn-plate.royal i{background:rgba(255,255,255,.16)}
.link-quiet{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,225,212,.72);text-decoration:none;border-bottom:1px solid rgba(233,225,212,.32);padding-bottom:3px;transition:color .35s var(--ease),border-color .35s var(--ease)}
.link-quiet:hover{color:#fff;border-color:#fff}
.link-quiet.on-paper{color:var(--ink-soft);border-color:rgba(18,16,14,.3)}
.link-quiet.on-paper:hover{color:var(--ink);border-color:var(--ink)}

.socials{display:flex;gap:10px;margin-top:36px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;background:var(--ink);color:var(--paper);padding:8px 8px 8px 17px;border-radius:999px;transition:transform .45s var(--ease)}
.socials a i{width:26px;height:26px;border-radius:50%;background:rgba(229,219,210,.14);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;transition:transform .45s var(--ease)}

/* ---------- plate tray — museum double bezel, reused everywhere ---------- */
.tray{position:relative;padding:14px;border-radius:7px;
  background:linear-gradient(158deg,rgba(233,225,212,.12),rgba(233,225,212,.028));
  border:1px solid rgba(233,225,212,.2);
  box-shadow:0 50px 100px -34px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.09)}
.tray .well{position:relative;overflow:hidden;border-radius:2px;background:var(--ink)}
.tray.on-paper{background:linear-gradient(158deg,rgba(18,16,14,.055),rgba(18,16,14,.015));
  border:1px solid var(--line);box-shadow:0 34px 80px -30px rgba(18,16,14,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.plate-cap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,212,.56)}
.plate-cap.on-paper{color:rgba(18,16,14,.55)}

/* ---------- engraving collage — plates & cutouts (public domain) ----------
   Cutouts crop one shared plate via background-position; multiply melts
   the print's paper into the page's paper. The strip plates reassemble on
   scroll — the frontispiece's exploded-earth language, carried inward. */
.plate-strips{position:relative;max-width:920px;margin:11vh auto 0}
.plate-strips .strip{position:relative;overflow:hidden;aspect-ratio:4.5}
.plate-strips .strip img{position:absolute;left:0;top:0;width:100%;height:auto}
.plate-strips figcaption{margin-top:16px;text-align:center;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-soft)}
.plate-strips figcaption b{font-family:var(--mono);font-weight:400;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-right:12px}
.cutout{position:absolute;pointer-events:none;z-index:1}
.cutout.inv{position:relative}
@media(max-width:900px){.cutout{display:none}.cutout.inv{display:block}}

/* ---------- ASCII figure — a numbered engraving in the treatise ---------- */
.fig-ascii{padding:0;margin:0}
.fig-ascii .stagewrap{position:relative;width:min(1280px,100%);margin:0 auto}
/* no halo on paper — print, not vapour; only the deep pages keep a dark vignette */
.fig-ascii.on-deep .stagewrap::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(23,35,84,.5),transparent 70%)}
.fig-ascii canvas{position:relative;width:100%;height:auto;display:block;cursor:crosshair}
.fig-ascii figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink-soft);text-align:center}
.fig-ascii figcaption b{font-family:var(--mono);font-weight:400;font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-right:14px}
.fig-ascii.on-deep figcaption{color:rgba(229,219,210,.75)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(229,219,210,.6);padding:60px 28px;position:relative;z-index:2}
footer .shell{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:baseline}
footer .sig{font-family:var(--serif-display);font-weight:400;color:var(--paper);font-size:23px;letter-spacing:-.01em}
footer p{font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.9;max-width:540px}
footer .motto{font-family:var(--serif);font-style:italic;font-size:15px;color:rgba(229,219,210,.5);margin-top:4px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(229,219,210,.65)}
footer nav a:hover{color:#fff}

.reveal{opacity:0;transform:translateY(16px)}

/* ---------- press — pasted art settles onto the page ----------
   Every collage piece PRESSES into place the first time it crosses into
   view: a small drop and a settling tilt, like a cutout glued by hand.
   --pr (tilt) and --pd (stagger) are set per piece in shared.js. */
.press{opacity:0;transform:translateY(22px) rotate(var(--pr,-2deg));
  transition:opacity .9s var(--ease) var(--pd,0s),transform .9s var(--ease) var(--pd,0s)}
.press.set{opacity:1;transform:translateY(0) rotate(0deg)}
html.static .press{opacity:1;transform:none;transition:none}

/* ---------- word mask — lines set one word at a time, like type ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:bottom}
.wi{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease)}
.go .wi{transform:none}
html.flat .wi,html.static .wi{transform:none}
.chapter-open h1 .wm{padding-bottom:.07em;margin-bottom:-.07em}

/* ---------- booknav — the folio rail (a contents column in the left margin) ---------- */
#booknav{position:fixed;left:clamp(14px,1.9vw,30px);top:50%;transform:translateY(-50%);z-index:96;
  display:flex;flex-direction:column;align-items:center;color:var(--ink);
  transition:color .4s var(--ease)}
#booknav.on-dark{color:var(--paper)}
#booknav .joint{width:1px;height:13px;background:currentColor;opacity:.22;margin:3px 0}
#booknav .bk{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:30px;min-height:20px;padding:0;background:none;border:0;cursor:pointer;color:inherit}
#booknav .bk .num{font-family:var(--serif-display);font-style:italic;font-weight:340;font-size:14px;
  line-height:1;opacity:.42;transition:opacity .25s var(--ease),transform .3s var(--ease),color .3s var(--ease)}
#booknav .bk .pip{width:3.5px;height:3.5px;border-radius:50%;background:currentColor;opacity:.38;
  transition:opacity .25s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
#booknav .bk:hover .num,#booknav .bk:focus-visible .num{opacity:.95}
#booknav .bk:hover .pip,#booknav .bk:focus-visible .pip{opacity:.9;transform:scale(1.7)}
#booknav .bk.on .num{opacity:1;color:var(--royal);transform:scale(1.4)}
#booknav.on-dark .bk.on .num{color:currentColor}
#booknav .bk.on .pip{opacity:1;background:var(--royal);transform:scale(2.1)}
#booknav.on-dark .bk.on .pip{background:currentColor}
#booknav .lbl{position:absolute;left:38px;top:50%;transform:translateY(-50%) translateX(-5px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:999px;
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .2s var(--ease),transform .25s var(--ease)}
#booknav.on-dark .lbl{background:var(--paper);color:var(--ink)}
#booknav .bk:hover .lbl,#booknav .bk:focus-visible .lbl,
#booknav .quick:hover .lbl,#booknav .quick:focus-visible .lbl{opacity:1;transform:translateY(-50%) translateX(0)}
#booknav .quick{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:30px;margin-top:14px;padding:3px 0;color:inherit;text-decoration:none}
#booknav .quick:first-of-type{margin-top:20px}
#booknav .quick svg{display:block;opacity:.35;transition:opacity .2s var(--ease)}
#booknav .quick:hover svg,#booknav .quick:focus-visible svg{opacity:1}
#booknav .quick .lbl{left:38px}
#booknav .bk:focus-visible,#booknav .quick:focus-visible{outline:none}
@media(max-width:900px){#booknav{display:none}}

/* ---------- continue reading ---------- */
.leg-next{padding:6vh 28px 14vh}
.leg-next .shell{max-width:1280px;margin:0 auto;border-top:1px solid var(--line);padding-top:34px;
  display:flex;gap:clamp(18px,4vw,54px);flex-wrap:wrap;align-items:baseline}
.leg-next .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.leg-next a{font-family:var(--serif-display);font-weight:400;font-size:clamp(19px,1.9vw,26px);letter-spacing:-.01em;text-decoration:none;border-bottom:1px solid rgba(18,16,14,.25);padding-bottom:2px;transition:border-color .3s var(--ease)}
.leg-next a:hover{border-color:var(--ink)}
.leg-next a i{font-family:var(--serif-display);font-style:italic;font-size:.72em;opacity:.5;margin-right:10px}

/* ---------- starlit — a hand-set night sky (our own stars, not borrowed) ---------- */
.starlit{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><g fill='%23EDE6D8'><circle cx='208.7' cy='99.3' r='1.05' opacity='0.27'/><circle cx='342.7' cy='235.1' r='0.55' opacity='0.57'/><circle cx='27.7' cy='278.1' r='0.56' opacity='0.28'/><circle cx='272.3' cy='526.6' r='0.61' opacity='0.37'/><circle cx='400.5' cy='603.0' r='0.99' opacity='0.49'/><circle cx='621.0' cy='33.4' r='1.23' opacity='0.42'/><circle cx='95.2' cy='78.4' r='0.76' opacity='0.77'/><circle cx='118.2' cy='371.6' r='1.04' opacity='0.47'/><circle cx='350.2' cy='43.7' r='0.55' opacity='0.36'/><circle cx='434.0' cy='274.2' r='0.77' opacity='0.62'/><circle cx='290.4' cy='193.5' r='1.18' opacity='0.7'/><circle cx='158.3' cy='367.0' r='0.95' opacity='0.82'/><circle cx='465.0' cy='186.0' r='1.33' opacity='0.3'/><circle cx='268.3' cy='482.5' r='0.63' opacity='0.55'/><circle cx='28.8' cy='426.3' r='1.15' opacity='0.61'/><circle cx='557.3' cy='202.3' r='1.09' opacity='0.62'/><circle cx='370.5' cy='292.3' r='1.21' opacity='0.86'/><circle cx='303.6' cy='423.7' r='0.55' opacity='0.7'/><circle cx='413.0' cy='631.6' r='1.2' opacity='0.41'/><circle cx='247.8' cy='426.6' r='0.52' opacity='0.53'/><circle cx='110.2' cy='78.0' r='0.55' opacity='0.74'/><circle cx='85.7' cy='160.5' r='0.83' opacity='0.81'/><circle cx='54.9' cy='287.9' r='0.97' opacity='0.82'/><circle cx='521.8' cy='550.0' r='0.74' opacity='0.5'/><circle cx='230.7' cy='562.8' r='1.31' opacity='0.32'/><circle cx='115.4' cy='150.6' r='0.7' opacity='0.55'/><circle cx='376.3' cy='170.1' r='0.5' opacity='0.5'/><circle cx='237.4' cy='361.9' r='1.31' opacity='0.69'/><circle cx='329.8' cy='394.3' r='1.07' opacity='0.26'/><circle cx='572.5' cy='496.9' r='1.24' opacity='0.76'/><circle cx='252.0' cy='256.2' r='0.59' opacity='0.65'/><circle cx='43.3' cy='46.6' r='0.68' opacity='0.33'/><circle cx='218.9' cy='37.2' r='0.5' opacity='0.32'/><circle cx='68.1' cy='233.8' r='0.52' opacity='0.81'/><circle cx='392.1' cy='97.9' r='0.71' opacity='0.46'/><circle cx='234.2' cy='81.6' r='1.22' opacity='0.9'/><circle cx='298.5' cy='309.8' r='0.57' opacity='0.29'/><circle cx='220.5' cy='171.3' r='1.2' opacity='0.33'/><circle cx='18.6' cy='605.0' r='0.95' opacity='0.32'/><circle cx='347.3' cy='21.1' r='0.95' opacity='0.89'/><circle cx='549.6' cy='444.0' r='0.72' opacity='0.47'/><circle cx='109.6' cy='491.9' r='0.95' opacity='0.75'/><circle cx='212.3' cy='145.0' r='1.19' opacity='0.89'/><circle cx='542.9' cy='513.4' r='1.2' opacity='0.72'/><circle cx='147.3' cy='331.1' r='0.8' opacity='0.24'/><circle cx='21.7' cy='180.6' r='0.72' opacity='0.69'/><circle cx='608.5' cy='286.6' r='1.3' opacity='0.89'/><circle cx='607.6' cy='234.4' r='0.69' opacity='0.37'/><circle cx='128.3' cy='133.2' r='1.03' opacity='0.83'/><circle cx='535.2' cy='307.0' r='1.06' opacity='0.76'/><circle cx='57.6' cy='421.5' r='1.27' opacity='0.75'/><circle cx='478.1' cy='306.1' r='0.65' opacity='0.76'/><circle cx='214.2' cy='510.1' r='1.33' opacity='0.49'/><circle cx='257.7' cy='602.4' r='1.12' opacity='0.34'/><circle cx='84.3' cy='99.5' r='1.27' opacity='0.77'/><circle cx='96.4' cy='526.4' r='1.33' opacity='0.67'/><circle cx='225.5' cy='350.8' r='0.61' opacity='0.23'/><circle cx='617.6' cy='414.6' r='0.95' opacity='0.85'/></g></svg>");
  background-size:640px}

/* ---------- flat + reduced motion ---------- */
html.flat #veil{display:none}
html.flat .reveal,html.static .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  #veil,#cur{display:none}
  .reveal{opacity:1;transform:none}
  .wi{transform:none}
}

/* ---------- responsive commons ---------- */
@media (max-width:760px){
  nav.top{display:none}
  #burger{display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;
    width:44px;height:44px;border-radius:50%;background:rgba(18,16,14,.55);border:1px solid rgba(229,219,210,.25);cursor:pointer}
  #burger span{display:block;width:15px;height:1.6px;background:#fff;transition:transform .45s var(--ease)}
  #burger.x span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
  #burger.x span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}
  header{padding:14px 18px}
  .chapter-open{padding-left:20px;padding-right:20px}
}