/* ============================================================ 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; /* --night = the frontispiece's TRUE ground: royal-deep under the hero's ~30% black star-wash (#0b1533 x .702). The star sections carry their stars on plain royal-deep, so they read bluer than the hero β€” this is the one shade that makes every starred section match the cover. */ --night:#080f24; /* --stars = the hero's EXACT starfield tile. Single source of truth: pasted into every starry-sky block over --royal-deep so they land on the cover's #080f24 WITH the same stars. Base must be royal-deep (never --night): the tile is ~30% black and does the darkening itself β€” --night would double it. */ --stars:url("assets/waag/stars.webp"); --gold:#d9b878; --gold-soft:#e8cf9a; --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} /* ---------- il margine della barra ---------- πŸ”΄ LA BARRA ERA NASCOSTA, e una barra nascosta non riserva niente: dove il sistema del lettore la disegna comunque β€” su macOS con Β«mostra sempreΒ», su Windows 11, ovunque la barra sia in sovrimpressione β€” cade SOPRA la pagina, perche nessuno le ha lasciato il posto. Da qui il conflitto: restringendo la finestra la barra finiva sul testo. Ora la barra c'e, ma vestita da libro: sottile, inchiostro trasparente su fondo trasparente. Cosi il browser le riserva il suo posto e non puo sovrapporsi a niente, per costruzione. `scrollbar-gutter:stable` tiene il posto anche quando la pagina non scorre, cosi passando da una carta corta a una lunga l'impaginato non salta di quindici pixel. Sui fondi profondi (il fascicolo dei contenuti, le carte notturne) l'inchiostro si inverte: una barra scura su fondo scuro sarebbe una barra invisibile. */ html{overflow-x:clip;scrollbar-gutter:stable; scrollbar-width:thin;scrollbar-color:rgba(18,16,14,.3) transparent} html::-webkit-scrollbar,body::-webkit-scrollbar{width:9px;height:9px} html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:transparent} html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{ background:rgba(18,16,14,.3);border-radius:99px; border:2px solid transparent;background-clip:content-box} html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:rgba(18,16,14,.5);background-clip:content-box} /* il fascicolo dei contenuti sta sull'inchiostro: li la barra si schiarisce */ #menu{scrollbar-width:thin;scrollbar-color:rgba(233,225,212,.34) transparent} #menu::-webkit-scrollbar{width:9px} #menu::-webkit-scrollbar-track{background:transparent} #menu::-webkit-scrollbar-thumb{background:rgba(233,225,212,.34);border-radius:99px; border:2px solid transparent;background-clip:content-box} body{font-variant-numeric:oldstyle-nums;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. */ /* TWO coarse emulsion layers drift in opposite senses at different periods, so the grain BOILS (regenerates) instead of sliding β€” the life of real film. transform/opacity only (no blend), stays smooth. */ body::after,body::before{content:"";position:fixed;inset:-120px;z-index:140;pointer-events:none;opacity:.1; background-size:400px;will-change:transform} body::after{ 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.6' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E"); animation:grain-drift .5s steps(3) infinite} body::before{ 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.6' numOctaves='3' seed='19'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E"); animation:grain-drift-b .38s 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)}} @keyframes grain-drift-b{0%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-36px,34px)}100%{transform:translate(28px,42px)}} @media (prefers-reduced-motion:reduce){body::after,body::before{animation:none}} html.flat body::after,html.flat body::before{animation:none} /* ---------- page entrance ---------- NO css animation and NO transform on
, ever: an animated transform (or a lingering keyframe fill) makes
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} /* the pointer is a printer's registration mark β€” a hairline cross with a ringed eye. Over a link the eye fills; over a plate the cross turns and gives way to the cartouche and its word. Difference-blend: legible on paper and on royal alike. Above the grain (z140), as the chrome comment promises. */ /* when the mark is mounted (html.cur-on, set by shared.js) the native pointer withdraws everywhere β€” one hand on the page at a time */ html.cur-on,html.cur-on *{cursor:none!important} #cur{position:fixed;z-index:150;top:0;left:0;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s var(--ease)} #cur .x,#cur .y{position:absolute;top:0;left:0;background:#fff;transition:transform .45s var(--ease),opacity .3s var(--ease)} #cur .x{width:21px;height:1px;transform:translate(-50%,-50%)} #cur .y{width:1px;height:21px;transform:translate(-50%,-50%)} #cur .dot{position:absolute;top:0;left:0;width:5px;height:5px;border:1px solid #fff;border-radius:50%; transform:translate(-50%,-50%);transition:transform .3s var(--ease),background .3s var(--ease),opacity .25s var(--ease)} #cur .ring{position:absolute;top:0;left:0;width:54px;height:54px;border:1px solid #fff;border-radius:50%; display:flex;align-items:center;justify-content:center;opacity:0; transform:translate(-50%,-50%) scale(.24);transition:transform .45s var(--ease),opacity .3s var(--ease)} #cur .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#fff;opacity:0;transition:opacity .25s var(--ease) .06s;white-space:nowrap} /* over plain links: the eye fills, the cross draws in */ #cur.link .dot{background:#fff;transform:translate(-50%,-50%) scale(1.8)} #cur.link .x{transform:translate(-50%,-50%) scaleX(.35);opacity:.75} #cur.link .y{transform:translate(-50%,-50%) scaleY(.35);opacity:.75} /* over a plate (data-cursor): the mark turns and yields to the word */ #cur.big .x,#cur.big .y{transform:translate(-50%,-50%) rotate(45deg) scaleX(.3);opacity:0} #cur.big .dot{opacity:0;transform:translate(-50%,-50%) scale(3)} #cur.big .ring{opacity:1;transform:translate(-50%,-50%) scale(1)} #cur.big .lbl{opacity:1} /* the press comes down. L'occhio DEVE muoversi anche sopra un rimando: li il segno e ridotto al solo occhio pieno, e la pressione toccava soltanto croce e anello, cioe niente di visibile β€” si premeva e non rispondeva nulla. Adesso l'occhio si contrae e torna, e la contrazione e piu svelta della sua entrata: una pressione e un fatto istantaneo, non una dissolvenza. */ #cur.down .x{transform:translate(-50%,-50%) scaleX(.72)} #cur.down .y{transform:translate(-50%,-50%) scaleY(.72)} #cur.down .ring{transform:translate(-50%,-50%) scale(.9)} #cur.down .dot{transform:translate(-50%,-50%) scale(.55);transition-duration:.1s} #cur.link.down .dot{transform:translate(-50%,-50%) scale(1.1);transition-duration:.1s} #cur.big.down .x,#cur.big.down .y{transform:translate(-50%,-50%) rotate(45deg) scaleX(.3)} @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 .wm-short{display:none} .wordmark{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.15em;color:#fff;text-decoration:none;mix-blend-mode:difference;transition:color .3s var(--ease)} /* the running head re-inked over pale grounds (html.hdr-ink, set by shared.js): difference-white vanishes into paper β€” royal, the footer's blue, does not */ html.hdr-ink .wordmark{mix-blend-mode:normal} html.hdr-ink .wordmark{color:var(--royal)} /* .92, not .72: at .72 the running head reads 3.5:1 on paper (measured with axe) β€” under AA. The ink stays a shade below the wordmark, still legible. */ /* ---- the edition selector β€” two abbreviations at the head of the leaf. Set in the running head's own type, one shade smaller, with a point between them; the edition you are reading is STATED (a ), never offered as a link back to itself. A leaf with no Italian counterpart yet shows Ita spent, not clickable, and says why on hover. ---- */ .hd-right{display:flex;align-items:center;gap:clamp(16px,2vw,28px)} nav.lang{display:flex;align-items:baseline;gap:7px;mix-blend-mode:difference; font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase} /* .75, not .55: on the royal grounds (the correspondence leaf) white at .55 reads 3.32:1 against #2846cf, under the 4.5:1 that 10px text owes. Measured with axe; .75 gives 4.85. Do not lower it. */ nav.lang a,nav.lang b,nav.lang span{color:rgba(255,255,255,.75);text-decoration:none;font-weight:400; transition:color .3s var(--ease)} nav.lang b{color:#fff} nav.lang a:hover{color:#fff} nav.lang span[aria-disabled]{opacity:.62;cursor:default} nav.lang i{font-style:normal;color:rgba(255,255,255,.62)} html.hdr-ink nav.lang{mix-blend-mode:normal} /* same measurement as nav.top: on paper the difference-white disappears and anything under .92 royal drops below AA. The point between stays quiet. */ html.hdr-ink nav.lang a,html.hdr-ink nav.lang span,html.hdr-ink nav.lang i{color:rgba(40,70,207,.92)} html.hdr-ink nav.lang b,html.hdr-ink nav.lang a:hover{color:var(--royal)} html.hdr-ink nav.lang span[aria-disabled]{color:rgba(40,70,207,.55)} /* ---- il marchio: rosa dei venti con croce di Amalfi ---- Una geometria sola, inline, ricolorata dal foglio. La regola del brand decide la forma dalla MISURA e non dal gusto: piatta sotto i 64px, le due punte corte in secondo piano sopra. L'inversione segue il fondo: su carta stella royal e croce bianca, su inchiostro stella chiara e croce royal. Aria intorno: mezza larghezza del marchio per lato. */ .brand{display:flex;align-items:center;gap:10px} .rdv{display:block;flex:0 0 auto} /* testatina, 18px: piatta, e fuori dal blend del wordmark */ /* 21px, non 18: il brand avverte che sotto i 16 la croce si chiude, e a 18 su fondo notte si chiudeva quasi (verificato a schermo). 21 la tiene aperta e resta discreta accanto al marchio testuale. */ .rdv-head{width:21px;height:21px} .rdv-head .rdv-stella{fill:#fff;transition:fill .3s var(--ease)} .rdv-head .rdv-croce{fill:#3C51C6;transition:fill .3s var(--ease)} html.hdr-ink .rdv-head .rdv-stella{fill:#3C51C6} html.hdr-ink .rdv-head .rdv-croce{fill:var(--paper)} html.toc-open .rdv-head .rdv-stella{fill:var(--paper)} html.toc-open .rdv-head .rdv-croce{fill:#3C51C6} /* piede: il marchio sta DI FIANCO al nome, non sopra, come in un lockup. 48px, quindi sotto la soglia dei 64 e piatto: la regola del brand decide dalla misura. L'aria fra la massa del simbolo e la prima lettera e mezza larghezza del marchio, come prescritto. */ .foot-brand{display:flex;align-items:center;gap:24px} .foot-brand .sig{margin:0} .rdv-foot{width:48px;height:48px} .rdv-foot .rdv-stella{fill:var(--paper)} .rdv-foot .rdv-croce{fill:#3C51C6} @media (max-width:760px){.foot-brand{gap:19px}.rdv-foot{width:38px;height:38px}} /* ---- the contents control β€” the only other thing in the running head. Two hairlines and a word: the word says what it opens, which a pair of bars alone never did, and the same two lines cross into an x when the sheet is up. Present at every width; the head no longer carries seven chapter links, so nothing folds away on a phone. ---- */ #burger{display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 0; cursor:pointer;mix-blend-mode:difference;color:#fff;font:inherit} #burger .bl{display:flex;flex-direction:column;gap:4px;width:15px} #burger .bl i{display:block;height:1.4px;width:100%;background:currentColor; transition:transform .45s var(--ease)} #burger.x .bl i:nth-child(1){transform:translateY(2.7px) rotate(45deg)} #burger.x .bl i:nth-child(2){transform:translateY(-2.7px) rotate(-45deg)} #burger .bw{position:relative;display:inline-grid;font-family:var(--mono);font-size:11px; letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)} /* both words are laid in the same cell so the head does not shift width when the sheet opens: one is shown, the other waits underneath */ #burger .bw b,#burger .bw em{grid-area:1/1;font-weight:400;font-style:normal; transition:opacity .3s var(--ease)} #burger .bw em{opacity:0} #burger.x .bw b{opacity:0} #burger.x .bw em{opacity:1} #burger:hover .bw{color:#fff} html.hdr-ink #burger{mix-blend-mode:normal;color:var(--royal)} html.hdr-ink #burger .bw{color:rgba(40,70,207,.92)} html.hdr-ink #burger:hover .bw{color:var(--royal)} /* with the sheet up the head sits on ink, whatever the leaf beneath was */ /* with the sheet up the whole head sits on ink: the wordmark kept its royal from the leaf underneath and read ~2:1 against #12100E. */ html.toc-open .wordmark{mix-blend-mode:normal;color:var(--paper)} html.toc-open #burger{mix-blend-mode:normal;color:var(--paper)} html.toc-open #burger .bw{color:rgba(233,225,212,.9)} html.toc-open nav.lang{mix-blend-mode:normal} html.toc-open nav.lang a,html.toc-open nav.lang span,html.toc-open nav.lang i{color:rgba(233,225,212,.75)} html.toc-open nav.lang b,html.toc-open nav.lang a:hover{color:var(--paper)} /* the hover rule for pale grounds outranks the sheet's own by one class and was repainting CLOSE royal on near-black (2.59:1, measured with the pointer resting on the control after the click). Matched, not lowered. */ html.toc-open #burger:hover .bw{color:var(--paper)} /* the closed menu is CLIPPED, and a clip hides nothing from the keyboard: its seven links kept their turn in the tab order, so a reader arriving by Tab walked seven invisible stops before reaching the page (measured 2026-08-02). visibility takes them out of the order; it is delayed on the way out so the panel can still be seen closing. */ #menu{position:fixed;inset:0;z-index:105;background:var(--ink);color:var(--paper); display:flex;align-items:center;padding:clamp(84px,12vh,120px) clamp(24px,6vw,90px) 6vh; overflow-y:auto;visibility:hidden; clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease),visibility 0s .65s} #menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .65s var(--ease),visibility 0s} /* the three gatherings side by side, as a contents page sets them: front matter, the chapters, back matter. The chapters carry the weight; the apparatus is set smaller, the way a book sets it. */ .toc{width:100%;max-width:1280px;margin:0 auto;display:grid;gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,.78fr) minmax(0,1.25fr) minmax(0,.97fr);align-items:start} .gath h2{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:rgba(233,225,212,.62);padding-bottom:12px; border-bottom:1px solid rgba(233,225,212,.22)} .gath ul{list-style:none;padding:0;margin:14px 0 0} .gath li{border-bottom:1px solid rgba(233,225,212,.09)} #menu a{display:flex;align-items:baseline;gap:.62em;text-decoration:none;color:var(--paper); font-family:var(--display);font-weight:600;letter-spacing:-.015em; font-size:clamp(17px,1.6vw,21px);padding:11px 0; opacity:0;transform:translateY(16px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)} #menu .gath:nth-child(2) a{font-weight:700;font-size:clamp(24px,3vw,38px)} #menu.open a{opacity:1;transform:none} #menu.open .gath:nth-child(1) a{transition-delay:.06s} #menu.open .gath:nth-child(2) a{transition-delay:.12s} #menu.open .gath:nth-child(3) a{transition-delay:.18s} #menu a:hover .ti,#menu a:focus-visible .ti{color:var(--royal-soft)} #menu a[aria-current="page"]{color:rgba(233,225,212,.55)} #menu a[aria-current="page"] .ti::after{content:"";display:inline-block;width:22px;height:1px; background:currentColor;vertical-align:middle;margin-left:12px;opacity:.8} /* .55, not .42: the folio marks are 11-13px and at .42 they read 3.42:1 on the sheet's ink (measured with axe), under the 4.5:1 small type owes. */ #menu .menu-no{flex:0 0 2.1em;font-family:var(--serif-display);font-style:italic;font-weight:300; font-size:.62em;color:rgba(233,225,212,.55);text-align:right} #menu .ti{transition:color .3s var(--ease)} @media (max-width:900px){ .toc{grid-template-columns:minmax(0,1fr);gap:26px} #menu{align-items:flex-start} #menu .gath:nth-child(2) a{font-size:clamp(22px,6.4vw,30px)} } /* ---- il telefono girato: qui la risorsa scarsa e l'ALTEZZA ---- Il fascicolo era tarato tutto sulla larghezza. Su un telefono coricato (390px di altezza) il solo margine di testa ne mangiava 84 β€” un quinto dello schermo β€” e delle quindici voci se ne vedevano DUE: l'indice del volume diventava un elenco da percorrere per tre schermate (misurato: 12 voci su 15 sotto la piega a 800x360, 11 su 15 a 844x390). Qui il passo si stringe, e dove la larghezza c'e le tre raccolte tornano affiancate: coricato lo schermo di larghezza ne ha da vendere, ed e esattamente la forma che una pagina d'indice ha sempre avuto. */ @media (max-height:520px){ #menu{padding-top:clamp(52px,14vh,68px);padding-bottom:3vh;align-items:flex-start} .gath h2{font-size:9.5px;padding-bottom:8px;letter-spacing:.2em} .gath ul{margin-top:7px} #menu a{font-size:14.5px;padding:7px 0} #menu .gath:nth-child(2) a{font-size:18px} #menu .menu-no{flex-basis:1.9em} } @media (max-height:520px) and (min-width:600px){ .toc{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,3vw,40px)} } .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} @media (min-width:761px){.chapter-open .shell{padding-left:28px;padding-right:28px}} .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(--night);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)} /* cream at .88 (not .72): on the royal ground .72 measures 3.7:1, under AA. */ .link-quiet{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,225,212,.88);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)} /* correspondence links β€” set as letterpress text, not app chips (the pill register stays on the .btn-plate actions only) */ .socials{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap} .socials a{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;color:var(--paper);padding:2px 0;border-bottom:1px solid rgba(242,237,228,.38);transition:border-color .45s var(--ease)} .socials a:hover{border-color:var(--paper)} .socials a i{font-style:normal;font-size:12px;transition:transform .45s var(--ease)} .socials a:hover i{transform:translate(2px,-2px)} /* ---------- 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:.8;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:.8;margin-right:14px} .fig-ascii.on-deep figcaption{color:rgba(229,219,210,.9)} /* ---------- the catchword β€” the binder's mark at the foot of each leaf ---------- */ .catchrow{max-width:1336px;margin:0 auto;padding:0 28px 26px;display:flex;justify-content:flex-end} /* the catchword carries the reader to the next page: it is a link, so it gets the ink of the text around it and announces itself with the rule on hover. (at .66 it measured 3.2:1 on the royal ground, at .86 still 4.4) */ .catchword{font-family:var(--serif-display);font-style:italic;font-weight:400;font-size:19px;color:inherit;opacity:1;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s var(--ease),opacity .4s var(--ease)} .catchword:hover{opacity:1;border-color:currentColor} @media (max-width:760px){.catchrow{padding:0 20px 22px}} /* ---------- the ribbon marker β€” the book keeps your place ---------- */ #ribbon{position:fixed;top:0;right:clamp(460px,33vw,620px);z-index:120;display:flex;flex-direction:column;align-items:center; text-decoration:none;transform:translateY(-105%);transition:transform .9s var(--ease)} #ribbon.on{transform:translateY(0)} #ribbon i{display:block;width:26px;height:96px;background:var(--royal); clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); box-shadow:0 2px 0 rgba(11,21,51,.25)} #ribbon span{margin-top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);background:var(--paper-2);border:1px solid var(--line);padding:5px 9px;border-radius:2px; opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease);white-space:nowrap} #ribbon:hover span,#ribbon:focus-visible span{opacity:1;transform:translateY(0)} #ribbon:hover i{height:108px;transition:height .4s var(--ease)} @media (prefers-reduced-motion:reduce){#ribbon{transition:none}#ribbon i{transition:none}} /* ---------- footer ---------- */ footer{background:var(--royal);color:rgba(233,225,212,.88);padding:60px 28px;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16)} 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(233,225,212,.88);margin-top:4px} footer .bells{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(233,225,212,.88);margin-top:10px;cursor:help} 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(233,225,212,.88)} footer nav a:hover{color:#fff} .reveal{opacity:0;transform:translateY(16px)} /* ---------- i piani ---------- Le filigrane e le note del margine pendono da --pz, che lo scorrimento scrive: stanno su un piano diverso dal testo e si sfalsano mentre si legge. Solo transform. A moto ridotto la pagina torna piatta. */ section[data-ch]::before{transform:translateY(var(--pz,0px))} .entry::after{transform:translateY(var(--pz,0px))} .ex-portrait .marginal,.manifesto-plate .marginal{transform:translateY(var(--pz,0px))} .thesis .nm{will-change:transform} @media (prefers-reduced-motion:reduce){ section[data-ch]::before,.entry::after, .ex-portrait .marginal,.manifesto-plate .marginal{transform:none!important} /* la chiusa della carta pende dal regista della sua scena: a moto ridotto quel regista non gira, e la riga restava spenta. Stessa cosa per i tre rilevamenti, e per la stessa ragione della rete di stampa: autoAlpha nasconde con visibility, non con la sola opacita. */ .leg-chart .d-arrive,.leg-course h3,.leg-course p,.leg-course .bearing b{ opacity:1!important;visibility:visible!important;transform:none!important} } /* πŸ”΄ la stessa rete mancava alla via MANUALE. Il moto ridotto si ottiene in due modi: la preferenza di sistema (il @media qui sopra) e l'interruttore della pagina (html.flat / html.static, che e anche la strada della stampa a freddo). La toppa stava solo sul primo, quindi con #flat la chiusa della carta β€” "β€” and then it is sailed." β€” restava spenta. Misurato: unico blocco invisibile su 86 della home. */ html.flat .leg-chart .d-arrive,html.static .leg-chart .d-arrive, html.flat .leg-course h3,html.static .leg-course h3, html.flat .leg-course p,html.static .leg-course p, html.flat .leg-course .bearing b,html.static .leg-course .bearing b{ opacity:1!important;visibility:visible!important;transform:none!important} /* ---------- lectio β€” the reading eye ---------- The words that carry a sentence take the royal and a rule that draws from the left, in reading order. THE REST OF THE SENTENCE IS NOT VEILED: it used to step back to .62 and the grey that came out was hard to read, which is a poor bargain for an effect. The emphasis is made by the two words coming FORWARD into the blue, exactly as the italic does on the Logbook's own title, not by the other eighteen going dim. colour + transform only. */ /* la transizione del colore NON deve mangiarsi quella dell'entrata: qui si dichiarano tutte e due, se no le parole della lectio saltavano in posizione invece di salire, e la frase entrava di colpo. */ .lectio .wi{transition:transform .8s var(--ease),color .5s var(--ease)} /* (la vecchia riga che riportava a 1 l'opacita delle parole della lectio e caduta con la velatura: senza di lei il gesto d'entrata sarebbe stato scavalcato, e le parole sarebbero apparse gia in posizione) */ .lectio .wi.lw{position:relative} .lectio.read .wi.lw{color:var(--royal)} .lectio .wi.lw::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:1.5px; background:currentColor;transform:scaleX(0);transform-origin:left center; transition:transform .55s var(--ease)} .lectio .wi.lw.on::after{transform:scaleX(1)} html.flat .lectio .wi.lw::after,html.static .lectio .wi.lw::after{transform:scaleX(1);transition:none} /* on a full ground the royal has nothing to gain against the ink around it: there the lit words stay in the paper colour and keep only their rule */ .on-deep .lectio.read .wi.lw,.leg-chart .lectio.read .wi.lw{color:inherit} /* ---------- stampa β€” the ink is laid on the title ---------- A chapter title does not rise into place: it is PRINTED. The pass goes across each word left to right, in reading order, and the word itself never moves β€” which is the whole difference between a page and a slide. (the hero's own title is not this: it is set and locked, do not touch) */ .stampa .wi{transform:none;clip-path:inset(0 calc((1 - var(--wp,0)) * 100% - var(--wp,0) * 8%) -22% 0)} html.flat .stampa,html.static .stampa{--wp:1} html.flat .stampa .wi,html.static .stampa .wi{clip-path:none} /* ---------- richiamo β€” the dash speaks first ---------- The running label is announced by its own dash: the rule draws out of the margin, and only then does the label follow it in. */ .richiamo{opacity:1} /* la lineetta esce per prima (la sua meta di corsa), la voce la segue */ .richiamo>.rc{display:inline-block; opacity:clamp(0, calc((var(--p,0) - .42) * 2.4), 1); transform:translateX(calc((1 - clamp(0, calc((var(--p,0) - .42) * 2.4), 1)) * -6px))} .richiamo::before{transform:scaleX(clamp(0, calc(var(--p,0) * 1.9), 1));transform-origin:left center} html.flat .richiamo,html.static .richiamo{--p:1} /* ---------- composta β€” the line is set, one line at a time ---------- A ruled table is not printed all at once: each line gets its rule and its text in turn, down the column. */ /* l'inchiostro arriva PRESTO, il movimento continua. Con l'opacita legata a tutta la corsa, un lettore che si fermava con la riga a meta schermo la leggeva a 1,3:1 β€” sotto qualunque soglia. Ora e piena al 29% della corsa, cioe entro pochi pixel dal bordo, e il resto della corsa e solo movimento. */ /* L'INCHIOSTRO NON SFUMA. Legare l'opacita del testo alla corsa vuol dire che un lettore fermo a meta gesto legge a 2,3:1 sul royal β€” e nessuna rampa lo salva, perche il bianco su quel fondo esce dall'AA sotto lo 0,72. Del resto il tipo, in un libro, non compare in dissolvenza: e gia sul foglio. Quello che arriva e il FOGLIO β€” la riga sale al suo posto e il suo filetto si tira. */ .composta{position:relative; transform:translateY(calc((1 - var(--p,0)) * 14px))} /* the rule is the one the element handed over β€” its side, its colour, its weight (see adopt() in shared.js). No .rl-* class means there was nothing to hand over, and nothing is drawn. */ .rl-top::after,.rl-bottom::after{content:"";position:absolute;left:0;right:0; height:var(--rl-w,1px);background:var(--rl-c,currentColor); transform:scaleX(var(--p,0));transform-origin:left center} .rl-top::after{top:calc(-1 * var(--rl-w,1px))} .rl-bottom::after{bottom:0} html.flat .composta,html.static .composta{--p:1} html.flat .rl-top::after,html.static .rl-top::after, html.flat .rl-bottom::after,html.static .rl-bottom::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .stampa .wi{clip-path:none} .g-strike .wi,.g-wipe .wi,.g-margin .wi{transform:none!important;opacity:1!important;clip-path:none!important} .composta{--p:1} .richiamo{--p:1} .rl-top::after,.rl-bottom::after,.richiamo::before{transform:scaleX(1);transition:none} .richiamo>.rc{opacity:1;transform:none;transition:none} } /* ---------- ruled β€” the hairline draws itself ---------- A page is ruled before it is filled: wherever the book sets a rule across the measure, the rule arrives by being drawn, left to right. The element's own border is handed over to this one so nothing shifts by a pixel. */ @media (prefers-reduced-motion:reduce){ .ruled::before{transform:scaleX(1);transition:none} .lectio .wi.lw::after{transform:scaleX(1);transition:none} .lectio.read .wi{opacity:1} } /* ---------- 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 ---------- The clip box breathes around the glyphs: Fraunces italic descenders (y, g) and side overshoots reach well past the em box, and a bare overflow:hidden guillotines them. Padding widens the window, negative margins give the space back, so the metrics of the line never move. The rise grows to 140% to stay fully hidden under the deeper window before the reveal. */ /* πŸ”΄ text-indent:0, e non e un dettaglio. text-indent SI EREDITA e vale per la prima riga di ogni contenitore di blocco: un inline-block E un contenitore di blocco, quindi dentro un paragrafo rientrato (.piece p+p, 2.2em) OGNI PAROLA si portava dentro il proprio rientro. Misurato: la parola "ho" larga 125px invece di 24, il secondo paragrafo delle Stazioni da 365px a 1215, e la rete di stampaProsa che giustamente lo scartava. Una riga qui rimette in piedi l'intera cascata parola per parola su ogni testo rientrato. */ .wm,.wi{text-indent:0} .wm{display:inline-block;overflow:hidden;vertical-align:bottom; padding:.06em .08em .24em;margin:-.06em -.08em -.24em} .wi{display:inline-block;transform:translateY(140%);transition:transform .8s var(--ease)} .wr-on .wi{transform:none} html.flat .wi,html.static .wi{transform:none} /* IL GESTO LIEVE β€” per i blocchi che l'inline-block sfascerebbe (vedi stampaLieve in shared.js). Le parole restano inline: la riga si spezza e si giustifica esattamente come prima, e l'entrata la fa la sola opacita. */ .wf{opacity:0;transition:opacity .75s var(--ease)} .wf-on .wf{opacity:1} html.flat .wf,html.static .wf{opacity:1;transition:none} /* ---------- i quattro gesti d'entrata ---------- Un gesto solo ripetuto su tutta la pagina e monotono: qui ogni genere di blocco entra a modo suo, e il modo dice che cosa e il blocco. Solo transform, opacity e clip-path, cioe roba che sta sulla scheda grafica. A moto ridotto cadono tutti e resta la pagina stampata. */ /* IMPRESSIONE β€” la parola cala da sopra con un soffio di scala in piu, come il carattere che batte sulla carta e rimbalza di un pelo. La maschera va aperta, se no la scala viene tagliata. */ .g-strike .wm{overflow:visible} .g-strike .wi{transform:translateY(-14%) scale(1.07);opacity:0; transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .34s linear} .g-strike.wr-on .wi{transform:none;opacity:1} /* MACCHINA DA SCRIVERE β€” le parole compaiono UNA DOPO L'ALTRA, ferme, con un soffio di salita e un tempo cortissimo: e la cadenza di un rullo, non un sipario. Niente clip-path qui: una parola scoperta a meta e una lettera tagliata, e a paragrafo lungo se ne vedevano venticinque insieme, per cui il testo sembrava mangiato invece che scritto (contate: 69 su 240). Cosi nessuna lettera e mai a meta e si sente il battito. */ .g-wipe .wm{overflow:visible} .g-wipe .wi{transform:translateY(2px);opacity:0; transition:transform .16s linear,opacity .16s linear} .g-wipe.wr-on .wi{transform:none;opacity:1} /* MARGINE β€” le note laterali arrivano da fuori la giustezza, ognuna dal proprio lato, e non salgono affatto. */ .g-margin .wm{overflow:visible} .g-margin .wi{opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease)} .g-from-left .wi{transform:translateX(-18px)} .g-from-right .wi{transform:translateX(18px)} .g-margin.wr-on .wi{transform:none;opacity:1} /* a moto ridotto, e sulla pagina piatta, tutto arriva gia stampato */ html.flat .g-strike .wi,html.static .g-strike .wi, html.flat .g-wipe .wi,html.static .g-wipe .wi, html.flat .g-margin .wi,html.static .g-margin .wi{ transform:none!important;opacity:1!important;clip-path:none!important;transition:none} /* ---------- 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:.62;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:.66} .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:.66;margin-right:10px} /* ---------- starlit β€” the hero's exact starfield (WAAG tile via --stars). The old hand-set data-uri stays as a fallback but is overridden by the --stars line below, so every starry-sky block matches the cover pixel-for-pixel. ---------- */ .starlit{background-image:url("data:image/svg+xml,"); background-image:var(--stars);background-size:700px} /* ---------- 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){ /* nothing folds away any more: the head carries the same two controls at every width, so there is no phone-only arrangement to keep in step */ .hd-right{gap:14px} /* the short title takes over where the full one no longer fits */ .wordmark .wm-full{display:none} .wordmark .wm-short{display:inline} nav.lang{font-size:10.5px;letter-spacing:.12em} #burger .bw{font-size:10.5px} header{padding:14px 18px} /* sotto i 380px il capo torna a toccarsi: il marchio si ritira e resta il titolo breve. Il brand lo prevede, sotto misura si usa il favicon e non il marchio (misurato a 320: con il marchio 0px di spazio, senza 8px). */ @media (max-width:380px){.rdv-head{display:none}} .chapter-open{padding-left:20px;padding-right:20px} /* plate captions: 9px mono was below comfortable reading size on a phone */ .plate-cap{font-size:10.5px} } /* ---------- il corpo minimo della testolina β€” una sola misura per tutto ---------- Il maiuscoletto in mono e la voce piu piccola del libro: sta bene a 9px su uno schermo grande, dove il lettore e a mezzo metro. Sul telefono la stessa riga finiva a 8px reali (misurate: 8px nell'albero, 9px nel lessico delle tavole, 9,5px sul frontespizio) e il carattere spaziato a .2em, in maiuscolo, li dentro non si legge piu: si riconosce. La regola del piatto (.plate-cap a 10,5px) era gia questa, per una riga sola. Qui vale per tutte, con `html` davanti perche il foglio arriva PRIMA dello stile in pagina e senza quel grado in piu perderebbe il confronto. Fino a 900px e non a 760: una tavoletta in verticale si tiene vicino agli occhi quanto un telefono, e sotto i 900 l'impaginato ha gia aperto le sue colonne (l'albero passa a due, misurato: 174-260px per casella), quindi il grado in piu ci sta comodo. Sopra i 900 no: li la pagina e quella da scrivania, e le stesse etichette le vede identiche chi ha una finestra larga uguale. πŸ”΄ Fuori da questa rete restano di proposito le miniature dei volumi β€” il dorso a 6,5px e il numero di lastra a 8px β€” che NON sono testo da leggere: sono la scritta su un libro alto un pollice. Ingrandirle sfonda un dorso largo 22px e rompe l'illusione, che e il punto della figura. */ @media (max-width:900px){ html .tree .nd .rl,html .tree .nd .bk,html .tree .nd .dt, html .tree .gl,html .century .lf .rl,html .century .lf .yrs, html .shelf .cft,html .shelf .cimp,html .shelf-cap span,html .library figcaption b, html nav.lexicon a span.n,html nav.lexicon a span.t, html .frontis .colophon span,html .crest span,html .cue, html .logline span,html .meta .rt,html .meta span, html .fixrow span.k,html .fixrow span.src,html .bigtime span.src, html .ex-sig-cap,html .marginal, html .pers dd span.src,html .plate-cap span{font-size:10.5px} } /* la giustezza del credo non era fermata da niente: quando la griglia passa a una colonna sola la riga prende tutta la carta e arriva a 88 caratteri (misurato a 768px, tavoletta in verticale), il doppio di quanto un occhio tiene senza perdere il rigo tornando a capo. */ @media (max-width:900px){html .creed-grid p{max-width:66ch}} /* ---------- il bersaglio del dito β€” 24px, mai meno ---------- Il puntatore fine e preciso al pixel; un dito no. WCAG 2.2 (2.5.8) chiede 24x24 CSS px per ogni comando che non sia un rimando dentro una riga di prosa β€” quelli restano esenti, e restano come sono. Qui si allarga solo l'AREA: corpo, colore e posizione del testo non si muovono di un pelo, perche a cambiare e l'altezza minima della scatola, non la riga. Misurato prima: 23x16 il cambio d'edizione, 32x18 i rimandi del piede, 24x19 il richiamo RSS β€” tutti sotto misura, su ogni carta. */ @media (pointer:coarse){ nav.lang a,nav.lang span,nav.lang b, footer nav a,.brand a.wordmark, a.rss,a.backlink,a.pgo,p.foot a,a.link-quiet, #booknav a.quick,#booknav button.bk{ display:inline-flex;align-items:center;min-height:24px} /* "Ita" e "Eng" sono larghi 23px: il quadrato lo chiude la larghezza minima, centrata, senza toccare la spaziatura della testatina */ nav.lang a,nav.lang span,nav.lang b{min-width:24px;justify-content:center} /* il piede ha i suoi rimandi in fila: senza questo la fila cresce di otto pixel per ogni riga e il piede si allunga senza motivo */ footer nav{align-items:center} } /* ---------- the reader's hand β€” cite a passage, or write in the margin ---------- Set in the booknav label's own register. A followed citation arrives with its passage printed in royal; a written note is set in pencil. */ #hand{position:fixed;z-index:130;transform:translate(-50%,-135%);display:flex;gap:6px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s var(--ease),visibility 0s .25s} #hand.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s var(--ease)} #hand button{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:8px 14px; cursor:pointer;white-space:nowrap;transition:background .25s var(--ease)} #hand button:hover{background:var(--royal)} #hand-in{font-family:var(--serif);font-style:italic;font-size:14px;background:var(--paper-2); color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 16px; width:min(340px,70vw)} #hand-in:focus{outline:2px solid var(--royal);outline-offset:2px} ::target-text{background:rgba(40,70,207,.16);color:inherit} /* the reader's own gloss β€” pencil, not the printer's royal */ .logpost .prose .gloss.mine{color:rgba(18,16,14,.58)} .logpost .prose .gloss.mine::before{background:rgba(18,16,14,.35)} .logpost .prose .gloss.mine .gx{margin-left:8px;border:0;background:none;color:inherit; font-size:14px;line-height:1;padding:0 2px;vertical-align:baseline;cursor:pointer; opacity:0;transition:opacity .25s var(--ease)} .logpost .prose .gloss.mine:hover .gx,.logpost .prose .gloss.mine .gx:focus-visible{opacity:.8} /* ---------- marginal glosses β€” the argument of the paragraph, in the margin. As the old treatises kept it: a terse italic note beside the passage it serves, set from the passage's own matter (never new claims). On a wide leaf it lives in the right margin (Tufte float, no new machinery); on a narrow one it becomes a quiet ruled line above its paragraph. ---------- */ .logpost .prose .gloss{display:block;font-family:var(--serif);font-style:italic; font-size:13px;line-height:1.5;color:var(--ink-soft);margin:1.5em 0 .55em} .logpost .prose .gloss::before{content:"";display:inline-block;width:18px;height:1px; background:var(--royal);vertical-align:middle;margin:0 9px 3px 0;opacity:.8} /* the gloss stands between paragraphs: the paragraph after it keeps the spacing and indent it would have had after its neighbour */ .logpost .prose .gloss+p{margin-top:0;text-indent:2.2em} @media (min-width:1201px){ .logpost .prose .gloss{float:right;clear:right;width:185px; margin:.3em -224px .6em 24px;text-align:left} .logpost .prose .gloss::before{display:block;width:26px;margin:0 0 7px} .logpost .prose .gloss+p{margin-top:1.15em} } /* ================================================================ L'INSEGNA DELL'EDITORE SU OGNI COPERTINA β€” e su ogni libro. I volumi VII e VIII la portavano gia, impressa in alto sul piatto, e quella posa e la posa buona: centrata, nel terzo alto, sopra il resto. Qui la stessa cosa vale per TUTTI i libri del volume β€” i quattro delle opere, i cinque dello scaffale, i quindici dell'albero genealogico β€” senza ripetere quindici volte la geometria nel markup. Una regola sola, in un foglio solo, perche il componente libro e lo stesso ovunque: chi la porta gia (VII, VIII) e escluso da :has, cosi non ne escono due. La geometria e presa dal file del marchio come MASCHERA: la stella prende l'oro, e la croce e cio che resta fra le punte, quindi lascia vedere il dipinto o la tela sotto β€” che e la regola del marchio, non un effetto. Rapporti misurati sul volume VII: largo il 17.9% del piatto, in alto al 22.3% della sua altezza. In rapporto e non in pixel, cosi un libro grande porta un'insegna grande e la posa resta identica a occhio. ================================================================ */ .book .cover:not(:has(.rdv))::after{ content:'';position:absolute;left:50%;top:22.3%; width:17.9%;aspect-ratio:1;transform:translateX(-50%); /* LA TINTA NON E UNA SOLA. Un editore non timbra tutti i piatti con la stessa foglia: sceglie quella che tiene su QUELLA tela. L'oro resta il valore di casa β€” i fondi di notte β€” ma ogni volume dichiara la sua accanto al colore della tela, con --mark (e --mark-om per il filo d'ombra che le va dietro). Tinte tutte del marchio: oro, inchiostro, royal, carta. Il filo d'ombra e cio che stacca il timbro dal dipinto: una foglia impressa non e mai piatta, e non serve sporcare la tela di velature. */ background:var(--mark,#D9B878); -webkit-mask:url(assets/mark/rdv-mask.svg) center/contain no-repeat; mask:url(assets/mark/rdv-mask.svg) center/contain no-repeat; filter:drop-shadow(0 1px 1.5px var(--mark-om,rgba(11,21,51,.55))); opacity:.96;pointer-events:none;z-index:2} /* i libri dell'albero sono alti come un pollice e il piatto e gia una colonna centrata (numero, iniziali): l'insegna non ci si sovrappone, ci si mette in fila come sui volumi VII e VIII β€” prima l'insegna, poi il numero, poi il nome. `order:-1` la porta in testa alla colonna senza toccare il markup. */ .tree .book .cover:not(:has(.rdv))::after{ position:static;order:-1;transform:none;width:19%;margin-bottom:-2px;opacity:.85} /* il posto senza nome non e rilegato: non si stampa in oro un cartone nudo, si imprime a secco, come il volume VIII */ .tree .book.empty .cover::after{background:var(--ink);opacity:.22} /* i dorsi che ancora non la portavano β€” quelli dell'albero. Il nome e in verticale e riempie il dorso, quindi gli si fa posto sotto invece di posargli l'insegna addosso. */ .tree .book .spine{padding-bottom:15px} .tree .book .spine:not(:has(.rdv))::after{ content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%); width:11px;height:11px;background:#EDE6D8;opacity:.85; -webkit-mask:url(assets/mark/rdv-mask.svg) center/contain no-repeat; mask:url(assets/mark/rdv-mask.svg) center/contain no-repeat} .tree .book.empty .spine:not(:has(.rdv))::after{background:var(--ink);opacity:.3} /* ============ THE CHAPBOOK β€” print the site and an opuscolo comes out ====== The screen edition keeps its machinery (cursor, grain, veil, canvases, rails); the paper edition keeps the text, the captions, the catchwords and the folios. Testatine and page numbers are @page margin boxes β€” printed where the engine knows them (Chrome 131+), clean margins elsewhere. Everything lives inside @media print: zero screen risk. */ @media print{ @page{size:148mm 210mm;margin:18mm 16mm 20mm; @top-center{content:"L’OPERA β€” VINCENZO LAMBIASE"; font-family:"Space Mono",monospace;font-size:7pt;letter-spacing:.24em;color:#000} @bottom-center{content:counter(page); font-family:"EB Garamond",serif;font-style:italic;font-size:9.5pt;color:#000}} /* the first leaf is the cover: no testatina and no folio β€” a frontispiece does not number itself. The slots stay OURS (content:"" β€” an empty box still suppresses the browser's own header/footer). */ @page:first{ @top-center{content:""} @bottom-center{content:""}} html,body{background:#fff!important;color:#000!important} body{font-size:10.5pt;line-height:1.55} /* the post sheets set their prose with a screen clamp (floor 18px) AFTER this file loads β€” the extra specificity brings print back to the body size */ article.logpost .prose{font-size:10.5pt} body::before,body::after{display:none!important} /* .backlink e una freccia all'indietro: su carta non porta da nessuna parte (misurato sul PDF della voce n. 4, stampava «← THE LOGBOOKΒ» in copertina). */ header,#menu,#burger,#cur,#route,#veil,#booknav,#ribbon,.skip,.backlink, .leg-next,video,iframe,#hand,.gloss.mine .gx{display:none!important} /* every word on the page, no matter where its reveal was left */ .reveal,.press,.chapter-open .kicker,.chapter-open .lede,.composta,.logline{opacity:1!important;transform:none!important} /* πŸ”΄ TERZA FALLA NELLA STESSA RETE, e la piu grave: il TITOLO del libro. Le parole del frontespizio stanno in una riga con overflow:hidden e partono da translateY(112%), cioe fuori dal loro riquadro; il gesto le riporta a zero sullo schermo, ma su carta non c'e nessun gesto. La rete qui sopra non nominava `#h1 .ln>span`, e il libretto stampato usciva con la copertina MUTA: l'immagine, e nessun Β«Avia pervia.Β». Misurato sul PDF del 5 settembre MMXXVI. Il