/* "Decameron" arriva da https://www.zetafonts.com/satellite-fonts.php?slg=decameron (font correnti del sito).
   "Decameron Local" e' la copia locale di riserva, usata solo se il CSS remoto non risponde. */
@font-face{font-family:"Decameron Local";src:url(../fonts/Decameron-Variable.woff2) format("woff2-variations"),url(../fonts/Decameron-Variable.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:block}
@font-face{font-family:"Decameron Local";src:url(../fonts/Decameron-Italic-Variable.woff2) format("woff2-variations"),url(../fonts/Decameron-Italic-Variable.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:block}
@font-face{font-family:"Ascendonica";src:url(../fonts/Ascendonica.woff2) format("woff2");font-display:block}
:root{
  --paper:#FBFAF7;--ink:#161112;--red:#EA3834;--wine:#8F090A;--night:#1C060E;--stone:#8B8480;--rule:rgba(22,17,18,.18);--rule-n:rgba(251,250,247,.18);
  --serif:"Decameron","Decameron Local",Garamond,"Times New Roman",serif;--g:clamp(16px,3vw,48px);--nav:48px;--ease:cubic-bezier(.7,0,.2,1);color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav);overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.45;font-variation-settings:"wght" 400;overflow-x:clip;-webkit-font-smoothing:antialiased;counter-reset:sec 1}
p{margin:0}h1,h2,h3,h4{margin:0;font-weight:400}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sc{font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.07em}
.lbl{font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.08em;font-size:15px;line-height:1.3}
.w{padding-inline:var(--g);max-width:1640px;margin-inline:auto}
.band{position:relative;padding-block:clamp(64px,9vw,140px)}
.night{background:var(--night);color:var(--paper)}
.wine{background:var(--wine);color:var(--paper)}
.redb{background:var(--red);color:var(--ink)}
.r{color:var(--red)}
i,em{font-style:italic}

/* slug: number + label, like the slides' small caps lines */
.slug{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;border-top:1px solid currentColor;padding-top:10px;margin-bottom:clamp(30px,5vw,70px)}
.slug>span:first-child{display:flex;align-items:baseline;gap:14px}
.slug .n{font-size:15px;color:var(--red);font-feature-settings:"tnum" 1;counter-increment:sec}
.slug .n::before{content:counter(sec,decimal-leading-zero)}
.redb .slug .n{color:var(--paper)}
.h2{font-size:clamp(48px,7.4vw,128px);line-height:1.04;letter-spacing:-.012em;padding-bottom:.08em;font-variation-settings:"wght" 380}
.h2 i{color:var(--red);font-variation-settings:"wght" 300}
.redb .h2 i{color:var(--paper)}
.lede{font-size:clamp(19px,1.55vw,24px);line-height:1.42;max-width:34em}
.btn{display:inline-flex;align-items:center;gap:.4em;padding:.42em 1em .5em;border:1px solid currentColor;border-radius:999px;background:none;cursor:pointer;font-size:16px;line-height:1.1;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn.hot{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn[aria-pressed=true]{background:currentColor}
.btn[aria-pressed=true] span{color:var(--paper)}
.night .btn[aria-pressed=true] span,.wine .btn[aria-pressed=true] span{color:var(--night)}
.chip{border:0;border-bottom:1px solid transparent;background:none;cursor:pointer;padding:2px 0;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.08em;font-size:15px;color:var(--stone)}
.chip[aria-pressed=true]{color:var(--red);border-bottom-color:var(--red)}
.chip:hover{color:inherit}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:22px;cursor:pointer;color:inherit}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:currentColor}
input[type=range]::-moz-range-track{height:1px;background:currentColor}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--red);margin-top:-7px;border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--red);border:0}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:var(--nav);background:var(--night);color:var(--paper);border-bottom:1px solid var(--rule-n)}
.nav .w{display:flex;align-items:center;gap:20px;height:100%;max-width:none}
.nav .logo{text-decoration:none;font-style:italic;font-size:24px;line-height:1;font-variation-settings:"wght" 400}
.nav .logo span{color:var(--red);font-style:normal;font-size:14px;margin-left:6px}
.nav ul{display:flex;gap:16px;list-style:none;margin:0 0 0 auto;padding:0;overflow-x:auto;scrollbar-width:none}
.nav ul a{text-decoration:none;font-size:15px;white-space:nowrap;color:rgba(251,250,247,.7)}
.nav ul a b{font-weight:400;color:var(--red);margin-right:4px;font-feature-settings:"tnum" 1}
.nav ul a:hover{color:var(--paper)}
.nav .btn{font-size:14px;padding:.3em .9em .38em}
@media (max-width:1100px){.nav ul a span{display:none}}
@media (max-width:760px){.nav ul{display:none}.nav .logo{margin-right:auto}}

/* 01 cover */
#cover{position:relative;height:calc(100svh - var(--nav));min-height:560px;background:var(--night);color:var(--paper);overflow:hidden;cursor:none;touch-action:pan-y;user-select:none}
#smoke{position:absolute;inset:-4%;width:108%;height:108%;filter:blur(18px);opacity:.95}
#tales{position:absolute;inset:0;padding:2vh 1.2vw;font-style:italic;font-size:clamp(12px,1vw,15px);line-height:1.55;color:#f3c9bf;text-align:justify;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle var(--rr,230px) at var(--mx,50%) var(--my,50%),#000 0,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle var(--rr,230px) at var(--mx,50%) var(--my,50%),#000 0,rgba(0,0,0,.55) 45%,transparent 100%);opacity:.75;transition:opacity .6s}
#tales b{font-style:normal;font-weight:400;color:var(--red);font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em}
#glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle var(--rr,230px) at var(--mx,50%) var(--my,50%),rgba(255,170,90,.16),rgba(234,56,52,.06) 45%,transparent 75%)}
#cover.out #tales{opacity:0}#cover.out #glow{opacity:0}
.cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding-inline:var(--g)}
.cv .k{color:var(--red);font-size:clamp(17px,1.7vw,28px);letter-spacing:.06em}
#title{font-style:italic;font-size:clamp(84px,17vw,330px);line-height:1.12;letter-spacing:-.01em;white-space:nowrap;padding:0 .08em .06em;color:var(--paper)}
#title span{display:inline-block;transition:color .25s}
.cv .sub{color:var(--red);font-size:clamp(19px,2.2vw,38px);line-height:1.2;font-variation-settings:"wght" 380}
#flame{position:absolute;left:0;top:0;width:14px;height:22px;margin:-15px 0 0 -7px;will-change:translate;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6d8,#ffb347 45%,rgba(234,56,52,.0) 72%);pointer-events:none;filter:blur(.4px);transform-origin:50% 90%;animation:fl 1.6s ease-in-out infinite alternate}
@keyframes fl{0%{transform:scale(1,1)}50%{transform:scale(.96,1.05)}100%{transform:scale(1.03,.97)}}
#cover.out #flame{opacity:0}
.cbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:12px var(--g) 16px;border-top:1px solid var(--rule-n);background:linear-gradient(transparent,rgba(28,6,14,.85) 40%);cursor:auto;z-index:2}
.cbar .no{color:var(--red);font-size:15px}
#tale{flex:1 1 320px;min-width:0;font-style:italic;font-size:17px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tale b{font-style:normal;font-weight:400;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em;color:var(--red);margin-right:8px}
.cbar .btns{display:flex;gap:8px;flex-wrap:wrap}
.cbar form{display:none;flex:1 1 320px;gap:8px}
.cbar.typing form{display:flex}.cbar.typing #tale{display:none}
.cbar input[type=text]{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--red);color:var(--paper);font:inherit;font-style:italic;font-size:22px;outline:none;padding:2px 0}
.hint{color:rgba(251,250,247,.55);font-size:14px}

/* 02 proem */
.proem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:0;align-items:end}
.proem .big{font-style:italic;color:var(--red);font-size:clamp(64px,11.6vw,214px);line-height:1.02;font-variation-settings:"wght" 330;white-space:nowrap;padding-bottom:.06em}
.proem .t{font-size:16px;line-height:1.48;color:rgba(251,250,247,.86)}
.proem .t .dc{color:var(--red);font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em}
.pa{grid-column:1/span 9}.pb{grid-column:10/span 3;align-self:center}
.pc{grid-column:1/span 6;align-self:start;margin-top:10px}.pd{grid-column:7/span 6;text-align:right}
.pe{grid-column:2/span 9}.pf{grid-column:10/span 3;align-self:center}
.proem .q{grid-column:1/-1;margin-top:clamp(36px,5vw,70px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule-n);padding-top:12px;color:rgba(251,250,247,.6)}
@media (max-width:900px){.proem>*{grid-column:1/-1!important;text-align:left!important}.proem .big{white-space:normal}}

/* 03 cast */
#cast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;padding:0}
.castL{padding:clamp(64px,8vw,120px) var(--g)}
.castL ol{list-style:none;margin:0;padding:0}
.castL li button{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-size:clamp(40px,5.3vw,92px);line-height:1.08;padding-bottom:.04em;font-variation-settings:"wght" 360;transition:transform .35s var(--ease)}
.castL li:nth-child(even) button{font-style:italic;color:var(--red);font-variation-settings:"wght" 340}
.castL li button small{font-size:15px;font-style:normal;color:var(--stone);font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.08em;margin-left:14px;vertical-align:middle}
.castL li button[aria-pressed=true]{transform:translateX(24px)}
.castL li button[aria-pressed=true]::before{content:"→ ";color:var(--red);font-style:normal;margin-left:-1em}
.castR{position:relative;background:var(--wine);color:var(--paper);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,60px)}
#castG{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-style:italic;font-size:min(62vh,40vw);line-height:1;color:var(--red);font-variation-settings:"wght" 380;pointer-events:none;transition:opacity .4s}
#castT{position:relative;max-width:26em}
#castT .nm{font-size:clamp(30px,3vw,48px);line-height:1.1;font-style:italic;padding-bottom:.06em}
#castT .rl{color:#ffb4a8;margin:4px 0 10px}
@media (max-width:900px){#cast{grid-template-columns:1fr}.castR{min-height:70vh}}

/* 04 specimen sheet (no box) */
.sheet{max-width:1240px;margin-inline:auto}
.sheet .ttl{text-align:center;font-size:clamp(22px,2.4vw,36px);letter-spacing:.34em;margin-left:.34em;line-height:1.3}
.sheet .big{text-align:center;font-size:clamp(46px,9vw,160px);line-height:1.1;letter-spacing:.05em;font-variation-settings:"wght" 380;padding-bottom:.04em}
.sheet .sub{text-align:center;font-size:clamp(14px,1.4vw,21px);letter-spacing:.14em;line-height:1.45;text-transform:uppercase;margin:4px auto 0;max-width:64ch}
.sheet .sub em{text-transform:none;letter-spacing:.02em}
.orn{display:flex;align-items:center;gap:14px;margin:clamp(22px,3vw,40px) 0;color:var(--red)}
.orn::before,.orn::after{content:"";flex:1;border-top:1px solid currentColor}
.sheet .lead{font-size:clamp(24px,2.8vw,46px);line-height:1.22;padding-bottom:.05em}
.sheet .lead b{font-weight:400;color:var(--red)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(22px,3vw,40px)}
.blk{position:relative;margin-bottom:clamp(24px,3vw,40px)}
.blk h4{margin:0 0 8px;font-style:italic;font-size:16px;text-align:center}
.blk h4::before{content:"• ";color:var(--red)}
.blk p{padding-bottom:.08em}
.blk .mg{position:absolute;right:calc(-1*clamp(12px,2.5vw,40px));top:0;transform:translateX(50%);color:var(--red);font-style:italic;font-size:15px;opacity:.8}
.sheet .foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:12px;color:var(--stone)}
@media (max-width:860px){.cols{grid-template-columns:1fr}.blk .mg{display:none}}

/* 05 paintings: open book */
.tome{position:relative;aspect-ratio:2;container-type:inline-size;max-width:1440px;margin-inline:auto;perspective:2800px}
.tome .left,.tome .right{position:absolute;top:0;bottom:0;width:50%;background:var(--paper)}
.tome .left{left:0;background:linear-gradient(90deg,var(--paper) 88%,#e7e1d8)}
.tome .right{right:0;background:linear-gradient(270deg,var(--paper) 88%,#e7e1d8)}
.tome .left>.fc{position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 88%,#e7e1d8);display:flex;flex-direction:column;padding:5% 7% 4%;overflow:hidden;color:var(--ink)}
.tome .lf{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.3s var(--ease)}
.tome .lf.turned{transform:rotateY(-180deg)}
.tome .lf .fc{position:absolute;inset:0;backface-visibility:hidden;background:linear-gradient(270deg,var(--paper) 88%,#e7e1d8);padding:5% 7% 4%;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.tome .lf .fc.bk{transform:rotateY(180deg);background:linear-gradient(90deg,var(--paper) 88%,#e7e1d8)}
.pgh,.pgf{display:flex;justify-content:space-between;color:var(--stone);font-size:max(10px,1cqw);font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.08em}
.pgf{margin-top:auto;padding-top:2%}
.endpg{background:var(--wine)!important;color:var(--paper)!important;justify-content:center;align-items:flex-start}
.endpg .t{font-style:italic;font-size:8cqw;line-height:1.1;color:var(--red);padding-bottom:.06em}
.endpg .s{font-size:1.8cqw}
.vt .n{font-size:6cqw;line-height:1.1;color:var(--red);font-style:italic;margin-top:6%;font-variation-settings:"wght" 320}
.vt h3{font-size:3cqw;line-height:1.14;margin:3% 0;padding-bottom:.05em}
.vt .q{font-style:italic;font-size:2.1cqw;line-height:1.25;color:var(--red);margin-bottom:4%;font-variation-settings:"wght" 340}
.vt p{font-size:1.55cqw;line-height:1.45;max-width:36ch}
.plate .pl{flex:1;position:relative;min-height:0;margin:3% 0 2%}
.painting{position:absolute;inset:0;margin:auto;width:100%;height:auto;box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.painting.tall{height:100%;width:auto}
.painting img{display:block;width:100%;height:100%;object-fit:cover}
.plate .cp{font-style:italic;font-size:1.3cqw;line-height:1.3;text-align:center}
.bal{position:absolute;z-index:4;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:12px;padding:.4em .75em .45em;font-size:max(10px,1.05cqw);line-height:1.2;max-width:22ch;font-style:italic;box-shadow:3px 3px 0 var(--ink);transform:scale(0) rotate(-6deg);transform-origin:0 100%;transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.bal::after{content:"";position:absolute;width:12px;height:12px;background:inherit;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);left:22px;bottom:-7px}
.bal b{font-style:normal;font-weight:400;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.05em}
.bal.red{background:var(--red);color:var(--paper)}
.bal.pk{background:#ffd9d2}
.on .bal{transform:scale(1) rotate(-2deg)}
.bookctl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.dots{display:flex;gap:7px}.dots button{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;background:none;padding:0;cursor:pointer}.dots button[aria-current=true]{background:var(--red);border-color:var(--red)}

/* 06 ten days (weights) */
.days{border-top:1px solid var(--red)}
.days .row{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;align-items:center;gap:16px;border-bottom:1px solid var(--red);padding-block:4px;cursor:pointer}
.days .row .l{color:var(--ink);font-size:13px;line-height:1.2}
.days .row .l:last-child{text-align:right}
.days .row p{text-align:center;font-size:clamp(30px,4.6vw,84px);line-height:1.28;white-space:nowrap;overflow:hidden;padding-bottom:.04em}
.days .row:hover p{color:var(--red)}
@media (max-width:760px){.days .row{grid-template-columns:1fr}.days .row .l:last-child{display:none}.days .row p{white-space:normal;text-align:left}}

/* 07 signature letters (glyph viewer) */
#letters{background:var(--paper)}
.lv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);align-items:stretch;min-height:calc(100svh - var(--nav) - 120px)}
.lv .side{display:flex;flex-direction:column;gap:18px;min-width:0}
.lv .cnt{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:10px}
.lv .cnt b{font-feature-settings:"case" 1;font-weight:400;font-size:clamp(56px,6vw,104px);line-height:1;font-style:italic;color:var(--red);font-variation-settings:"wght" 300}
.lv .cnt b small{font-size:.32em;color:var(--stone);font-style:normal;margin-left:6px}
.lv h3{font-size:clamp(34px,3.4vw,58px);line-height:1.08;padding-bottom:.06em}
.lv h3 i{color:var(--red)}
.lv .tx{max-width:28em}
.lv .idx{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.lv .idx button{border:1px solid var(--rule);background:none;min-width:48px;height:48px;padding:0 8px;font-size:26px;line-height:1;cursor:pointer}
.lv .idx button[aria-current=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lv .nav2{display:flex;gap:8px;align-items:center}
.stagev{position:relative;min-width:0;border-left:1px solid var(--rule);padding-left:var(--g)}
#gsvg{display:block;width:100%;height:100%;max-height:calc(100svh - var(--nav) - 160px);min-height:420px;overflow:visible}
#gsvg .ml{stroke:var(--red);stroke-width:3;opacity:.45}
#gsvg .mt{fill:var(--red);font-family:var(--serif);font-size:44px;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em}
#gsvg .gl{fill:var(--ink);transition:fill .4s}
#gsvg.ol .gl{fill:rgba(22,17,18,.06);stroke:var(--ink);stroke-width:3}
#gsvg .pt{display:none}
#gsvg.ol .pt{display:inline}
#gsvg .hd{stroke:var(--stone);stroke-width:2}
#gsvg .on{fill:var(--paper);stroke:var(--ink);stroke-width:3}
#gsvg .off{fill:var(--stone)}
#gsvg .an circle{fill:none;stroke:var(--red);stroke-width:5;stroke-dasharray:14 10;animation:spin 14s linear infinite;transform-box:fill-box;transform-origin:center}
#gsvg .an text{fill:var(--red);font-family:var(--serif);font-style:italic;font-size:64px}
#gsvg .an line{stroke:var(--red);stroke-width:3}
@keyframes spin{to{transform:rotate(360deg)}}
.glyph-in{animation:gin .7s var(--ease)}
@keyframes gin{from{opacity:0;transform:translateY(14px)}}
@media (max-width:900px){.lv{grid-template-columns:1fr}.stagev{border-left:0;padding-left:0}#gsvg{min-height:300px}}

/* 08 italic */
.itr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);align-items:start}
.itr figure{margin:0}
.itr img{display:block;width:100%;height:auto}
.itr figcaption{margin-top:10px;color:var(--stone)}
.cmp>div{border-top:1px solid var(--ink);padding:12px 0 26px}
.cmp .hd{display:flex;justify-content:space-between;gap:10px;color:var(--red);margin-bottom:8px}
.asc{font-family:"Ascendonica",var(--serif);font-size:clamp(24px,2.4vw,38px);line-height:1.34;padding-bottom:.1em}
.dec{font-style:italic;font-size:clamp(22px,2.2vw,34px);line-height:1.34;padding-bottom:.1em}
.rm{font-family:var(--serif);font-style:normal;font-variation-settings:"wght" 400;font-size:.86em}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:clamp(30px,5vw,70px)}
.notes div{border-top:1px solid var(--ink);padding-top:12px}
.notes h4{color:var(--red);font-style:italic;font-size:24px;margin-bottom:6px}
.sl{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;color:var(--stone)}
@media (max-width:900px){.itr,.notes{grid-template-columns:1fr}}

/* 09 alphabet */
.abc{text-align:center;font-size:clamp(40px,6.6vw,118px);line-height:1.24;letter-spacing:.01em;overflow-wrap:anywhere;padding-bottom:.06em}
.abc .alt{color:var(--red)}
.abc.it{font-style:italic}
.abcctl{display:flex;justify-content:center;gap:18px;margin-top:26px;flex-wrap:wrap;align-items:center}
.abcctl .key{color:var(--stone)}.abcctl .key b{font-weight:400;color:var(--red)}

/* 10 in use */
#use{padding-bottom:0}
.strip{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 min(92vw,1180px);margin:0;scroll-snap-align:center;position:relative}
.strip img{display:block;width:100%;height:auto;aspect-ratio:2}
.strip figcaption{position:absolute;left:16px;bottom:14px;background:var(--paper);color:var(--ink);padding:4px 10px 6px;font-style:italic;font-size:16px}
.strip figcaption b{font-weight:400;font-style:normal;color:var(--red);font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em;margin-right:8px}
.usectl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--g) 22px}

/* 11 legibility */
.speed{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);align-items:start}
.speed .wpm{font-size:clamp(80px,11vw,190px);line-height:1;color:var(--red);font-style:italic;font-variation-settings:"wght" 300;font-feature-settings:"tnum" 1}
#speedtxt{font-size:clamp(23px,2.3vw,36px);line-height:1.36}
#speedtxt span{transition:color .12s,background .12s}
#speedtxt span.now{color:var(--paper);background:var(--red)}
#speedtxt span.read{color:var(--stone)}
.ramp{margin-top:clamp(50px,7vw,100px);border-top:1px solid var(--ink)}
.ramp div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:baseline;border-bottom:1px solid var(--rule);padding-block:6px}
.ramp div span{color:var(--red);font-size:14px}
.ramp div p{white-space:nowrap;overflow:hidden;line-height:1.4;padding-bottom:.06em}
@media (max-width:860px){.speed{grid-template-columns:1fr}}

/* 12 languages */
.langs{text-align:center}
.langs .ln{font-size:clamp(44px,7vw,126px);line-height:1.12;padding-bottom:.04em;white-space:nowrap}
.langs .ln:nth-child(even){font-style:italic}
.langs .ln .d{color:var(--red)}
.langctl{display:flex;justify-content:center;gap:14px 20px;flex-wrap:wrap;margin-top:30px}
#langWrap{min-height:4.6em;display:grid;align-content:center}
#langWrap.sw{animation:gin .6s var(--ease)}

/* 13 opentype */
.ot{text-align:center;font-style:italic;font-size:clamp(34px,4.7vw,84px);line-height:1.24}
.ot p{padding-bottom:.04em}
.ot .r{color:var(--red)}
.otctl{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin-top:34px}

/* 14 quotes */
.qs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(30px,4vw,60px) var(--g)}
.qt{grid-column:span 6}
.qt.wide{grid-column:1/-1}
.qt .t{font-size:clamp(30px,3.8vw,64px);line-height:1.16;padding-bottom:.06em}
.qt.wide .t{font-size:clamp(44px,7vw,124px);line-height:1.08}
.qt .t i{color:var(--paper)}
.qt .a{margin-top:12px;border-top:1px solid var(--ink);padding-top:8px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qt .a b{font-weight:400;color:var(--paper)}
@media (max-width:860px){.qt{grid-column:1/-1}}

/* 15 tester */
.tctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:10px 32px;align-items:center;border-top:1px solid var(--ink);padding-top:12px}
.tctl label{display:flex;justify-content:space-between;color:var(--stone)}
.feats{display:flex;gap:6px 18px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--rule)}
#ttext{padding:28px 0 40px;min-height:260px;outline:none;line-height:1.24;overflow-wrap:break-word}
.tfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--rule);padding-top:10px;color:var(--stone)}
.tfoot code{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all}
@media (max-width:760px){.tctl{grid-template-columns:1fr}}

/* 16 glyphs */
.mix{display:grid;grid-template-columns:repeat(5,.64em);justify-content:center;font-size:clamp(84px,24vw,440px);margin:0 auto;padding:0 8px clamp(48px,8vw,130px);overflow:visible}
.mix span{display:flex;align-items:center;justify-content:center;height:.76em;line-height:1;transition:transform .6s var(--ease),color .3s;cursor:pointer;user-select:none;will-change:transform}
.mix span:hover{color:var(--paper)}
.gls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:var(--g);align-items:start;margin-top:clamp(40px,5vw,70px)}
.glgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);max-height:540px;overflow:auto}
.glgrid button{aspect-ratio:1;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:none;font-size:28px;cursor:pointer;padding:0}
.glgrid button:hover,.glgrid button[aria-pressed=true]{background:var(--red);color:var(--paper)}
.glbig{position:sticky;top:calc(var(--nav) + 20px)}
.glbig .c{font-size:clamp(160px,18vw,300px);line-height:1.3;text-align:center;border-bottom:1px solid var(--ink)}
.glbig .m{display:flex;justify-content:space-between;padding-top:8px;color:var(--stone)}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:40px}
.specs div{border-top:1px solid var(--ink);padding-top:10px}
.specs h4{font-style:italic;color:var(--red);font-size:22px;margin-bottom:4px}
@media (max-width:860px){.gls{grid-template-columns:1fr}.glbig{position:static}.specs{grid-template-columns:1fr 1fr}}

/* 17 buy */
.buy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:end}
.buy h2{font-style:italic;font-size:clamp(70px,11vw,200px);line-height:1.04;color:var(--red);font-variation-settings:"wght" 320;padding-bottom:.06em}
.buy h2 span{display:block;color:var(--paper);font-style:normal;font-variation-settings:"wght" 380}
.price div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--rule-n);font-size:20px}
.price{border-top:1px solid var(--rule-n)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
footer{padding-block:34px 50px;border-top:1px solid var(--rule-n)}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);font-size:16px}
.foot h4{color:var(--red);font-style:italic;font-size:20px;margin-bottom:6px}
.foot ul{list-style:none;margin:0;padding:0}
@media (max-width:860px){.buy,.foot{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* --- mobile fixes (2026-11-10) --- */
@media (max-width:480px){
  .sheet .big{font-size:clamp(28px,10vw,46px);letter-spacing:.03em}
  .sheet .ttl{letter-spacing:.2em;margin-left:.2em}
}