/* Shared local reading preferences for the voucher shop and studio. */
.reading-tools{display:none;position:relative;width:100%;min-width:0;margin:0;z-index:1;color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5}
.studio-header{flex-wrap:wrap}
.studio-header .reading-tools{order:4;flex:0 0 100%;width:100%;margin:0}
.reading-js .reading-tools{display:block}
.reading-tools details{position:relative;display:grid;width:100%;justify-items:end}
.reading-tools summary{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;gap:.55em;padding:8px 12px;border:1px solid var(--muted);background:var(--bg);color:var(--ink);box-shadow:0 4px 18px #0002;cursor:pointer;list-style:none;user-select:none}
.reading-tools summary::-webkit-details-marker{display:none}
.reading-tools summary::after{content:"+";color:var(--muted);font-size:18px;line-height:1}
.reading-tools details[open] summary::after{content:"−"}
.reading-tools-mark{font-weight:700;letter-spacing:-.03em}
.reading-tools-label{font-size:15px;font-weight:600}
.reading-panel{position:static;width:min(360px,100%);max-width:100%;box-sizing:border-box;max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;margin-top:10px;padding:18px;border:1px solid var(--muted);background:var(--bg);box-shadow:0 8px 28px #0003;color:var(--ink)}
.reading-panel fieldset{border:0}
.reading-panel legend{margin-bottom:6px;font-size:18px;font-weight:700;line-height:1.3}
.reading-description{margin-bottom:12px;color:var(--muted);font-size:15px;line-height:1.5}
.reading-option{display:flex;min-height:44px;align-items:center;gap:12px;padding:7px 0;cursor:pointer}
.reading-option input{flex:0 0 auto;width:20px;height:20px;accent-color:var(--accent)}
.reading-option span{flex:1 1 auto}
.reading-reset{min-width:88px;min-height:44px;margin-top:12px;padding:8px 14px;border:1px solid var(--muted);background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.reading-tools summary:hover,.reading-reset:hover{border-color:var(--accent)}
html[data-reading-sans]{--serif:var(--ui);--mono:var(--ui)}
html[data-reading-sans] .shop-title-italic{transform:none}
html[data-reading-sans] .studio-header .language-nav [lang="zh-Hans"] .language-short{position:relative;top:-1px}
html[data-reading-large] body.shop-page,html[data-reading-large] body.studio-page{font-size:18px}
html[data-reading-large] .shop-page :is(.shop-intro,.product-excerpt,.bag-line,.order-reading,.note,.micro),html[data-reading-large] .studio-page :is(.workspace,.controls,.note,.micro,.reading .verse){font-size:calc(1em + 2px)}
html[data-reading-spacing] body.shop-page,html[data-reading-spacing] body.studio-page{line-height:1.82}
html[data-reading-spacing] .shop-page :is(p,li,dt,dd,figcaption,.micro,.verse),html[data-reading-spacing] .studio-page :is(p,li,dt,dd,figcaption,.micro,.verse){letter-spacing:.035em;word-spacing:.1em;line-height:1.85}
html[data-reading-measure] .shop-page :is(.shop-intro>p,.product-excerpt,.shop-colophon p,.order-reading .verse),html[data-reading-measure] .studio-page :is(.studio-deck,.note,.verse){max-width:56ch}
html[data-reading-simple] .shop-page .product-grid,html[data-reading-simple] .studio-page .workspace{grid-template-columns:minmax(0,1fr)}
html[data-reading-simple] .shop-page .product-card:nth-child(n){border-inline-start:0;padding-inline:0}
@media(prefers-color-scheme:light){html[data-reading-contrast] :is(body.shop-page,body.studio-page){--ink:#000;--muted:#202020;--line:#707070;--accent:#701b0d;--bg:#fff;--panel:#f3f3f3;--field:#fff}}
@media(prefers-color-scheme:dark){html[data-reading-contrast] :is(body.shop-page,body.studio-page){--ink:#fff;--muted:#e0e0e0;--line:#aaa;--accent:#ff9a7f;--bg:#000;--panel:#181818;--field:#080808}}
@media print{.reading-tools{display:none!important}}

@font-face{font-family:OpenDyslexic;src:url('/assets/fonts/opendyslexic-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url('/assets/fonts/opendyslexic-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url('/assets/fonts/opendyslexic-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url('/assets/fonts/opendyslexic-bold-italic.woff2') format('woff2');font-style:italic;font-weight:700;font-display:swap}

/* Keep the disclosure attached to its trigger on wide screens. */
.reading-tools details[open]{z-index:2}
.reading-panel{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;width:min(360px,100%);margin:0;border-color:var(--line);z-index:2}
.reading-panel fieldset{min-inline-size:0;margin:0;padding:0}
.reading-option{padding:8px 2px;border-top:1px solid var(--line)}
.reading-option span{line-height:1.4}
.reading-tools details[open]>summary{border-color:var(--accent);background:var(--panel)}
.reading-reset{display:block;width:100%}

@media(max-width:760px){
  .reading-tools .reading-panel{position:static;inset:auto;width:min(360px,100%);margin-block-start:10px}
}

html[data-reading-dyslexia] body:is(.shop-page,.studio-page){--serif:'OpenDyslexic',var(--ui),sans-serif;--mono:'OpenDyslexic',var(--ui),sans-serif;font-variant-ligatures:none}

/* Apply spacing to the text blocks themselves so local line-height rules cannot
   swallow the preference. */
html[data-reading-spacing] :is(body.shop-page,body.studio-page) main :is(p,li,dt,dd,figcaption,.micro,.verse,.note){line-height:1.9;letter-spacing:.035em;word-spacing:.1em}
html[data-reading-measure] :is(body.shop-page,body.studio-page) main :is(p,li,dd,figcaption,.micro,.verse,.note,.product-excerpt,.shop-intro,.studio-deck){max-width:50ch}
html:lang(zh)[data-reading-measure] :is(body.shop-page,body.studio-page) main :is(p,li,dd,figcaption,.micro,.verse,.note,.product-excerpt,.shop-intro,.studio-deck),
html:lang(ja)[data-reading-measure] :is(body.shop-page,body.studio-page) main :is(p,li,dd,figcaption,.micro,.verse,.note,.product-excerpt,.shop-intro,.studio-deck){max-width:32em}
html[data-reading-simple] body.shop-page main :is(.shop-masthead,.catalogue-top,.catalogue-tools,.shop-colophon,.order-heading){display:block}
html[data-reading-simple] body.shop-page .product-grid,html[data-reading-simple] body.studio-page .workspace{grid-template-columns:minmax(0,1fr)}
html[data-reading-simple] body.shop-page .product-card:nth-child(n){border-inline-start:0;padding-inline:0}