@font-face{font-family:StudyFell;src:url('/type-study/fell-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:StudyFell;src:url('/type-study/fell-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:StudyMono;src:url('/type-study/space-mono.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:StudyGrotesque;src:url('/type-study/bricolage.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
html[data-type=fell]{--study-display:StudyFell,Georgia,serif}
/* ss01 belongs to the body font; in IM Fell it substitutes historical long s. */
html[data-type=fell] :is(h1,h2,h3,.ro-t){font-feature-settings:'ss01' off}
html[data-type=mono]{--study-display:StudyMono,monospace}
html[data-type=grotesque]{--study-display:StudyGrotesque,sans-serif}
html[data-type]:not([data-type=original]) :is(h1,h2,h3),
html[data-type]:not([data-type=original]) :is(h1,h2,h3) em,
html[data-type]:not([data-type=original]) .ro-t{font-family:var(--study-display)!important;font-weight:400!important;font-synthesis:none;text-shadow:none!important}
html[data-type=mono] :is(h1,h2,h3),html[data-type=mono] :is(h1,h2,h3) em,
html[data-type=grotesque] :is(h1,h2,h3) em{font-style:normal!important}
html[data-type=fell] .opening h1{font-size:clamp(70px,7.3vw,110px);letter-spacing:-.04em;line-height:1.02}
html[data-type=mono] h1{font-size:clamp(40px,5vw,72px);line-height:1.15;letter-spacing:-.055em}
html[data-type=mono] .opening h1{font-size:clamp(54px,5.4vw,80px);line-height:1.16;letter-spacing:-.065em;margin-bottom:45px}
html[data-type=mono] h2{font-size:clamp(24px,3vw,40px);line-height:1.3;letter-spacing:-.055em}
html[data-type=mono] h3,html[data-type=mono] .ro-t{font-size:clamp(18px,2.2vw,28px);line-height:1.4}
html[data-type=grotesque] :is(h1,h2,h3){font-variation-settings:'wdth' 100,'opsz' 72;letter-spacing:-.025em}
html[data-type=grotesque] .opening h1{font-size:clamp(70px,7.2vw,108px);line-height:1.05;letter-spacing:-.025em}
html[data-type]:not([data-type=original]) .opening h1 em{font-size:1em}
.type-study{position:fixed;z-index:1000;left:24px;bottom:18px;max-width:calc(100% - 48px);background:#fffffff5;border:1px solid #c8c8c0;padding:0;box-shadow:0 3px 15px #00000008;color:#222;font:10px/1.6 var(--font-mono)}
.type-study[hidden]{display:none}
.type-study summary{padding:10px 14px;cursor:pointer;font:9px/1.5 var(--font-mono);margin:0!important}
.type-study summary span{margin-left:10px;color:#65655e}
.type-study-options{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 10px;max-width:470px}
.type-study button{font:9px/1.5 var(--font-mono);padding:8px 10px;border:1px solid transparent;background:none;color:#333}
.type-study button[aria-pressed=true]{border-color:#333;color:#000}
.type-study button:hover{background:#f1f1ec}
@media(max-width:650px){
html[data-type=fell] .opening h1{font-size:clamp(55px,13vw,78px)}
html[data-type=mono] .opening h1{font-size:clamp(38px,10.5vw,58px)}
html[data-type=grotesque] .opening h1{font-size:clamp(51px,12vw,72px)}
html[data-type=mono] h1{font-size:36px;overflow-wrap:anywhere}
.type-study{left:12px;bottom:12px;max-width:calc(100% - 24px)}
.type-study-options{gap:0}.type-study button{font-size:8px;padding:8px}
}