/* Ars font choice (arsFont). The chosen font sets --display and --text for titles, headings and reading text;
   buttons, menus, directions, form controls, answer choices and diagram labels keep the standard font. */
/* EB Garamond as the fallback face for the decorative fonts: Ars Greek holds only the Greek blocks (so all Greek is set in Garamond), Ars Fallback holds Garamond's Latin, Latin-extended and Greek (so macrons, breves, ȳ, − and the like fall to Garamond, not to a system font). */
@font-face { font-family: 'Ars Greek'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDc1ZzPJ.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Ars Fallback'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDc1ZzPJ.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Ars Greek'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDg1ZzPJ.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Ars Fallback'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDg1ZzPJ.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Ars Fallback'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDU1ZzPJ.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ars Fallback'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDs1Zw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ars Greek'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR5SDktYw.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Ars Fallback'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR5SDktYw.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Ars Greek'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR2SDktYw.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Ars Fallback'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR2SDktYw.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Ars Fallback'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR7SDktYw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ars Fallback'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{--std-display:'Libre Caslon Display', Georgia, serif; --std-text:'Libre Caslon Text', Georgia, serif}
html[data-font="plain"]{--display:'Ars Greek', 'Atkinson Hyperlegible Next', 'Ars Fallback', var(--std-display); --text:'Ars Greek', 'Atkinson Hyperlegible Next', 'Ars Fallback', var(--std-text)}
html[data-font="plain"] body{font-size-adjust:.54}
html[data-font="garamond"]{--display:'EB Garamond', var(--std-display); --text:'EB Garamond', var(--std-text)}
html[data-font="italic"]{--display:'Ars Greek', 'Felipa', 'Ars Fallback', var(--std-display); --text:'Ars Greek', 'Felipa', 'Ars Fallback', var(--std-text)}
html[data-font="italic"] body{font-synthesis:none; font-size-adjust:.59}
html[data-font="fraktur"]{--display:'Ars Greek', 'UnifrakturMaguntia', 'Ars Fallback', var(--std-display); --text:'Ars Greek', 'UnifrakturMaguntia', 'Ars Fallback', var(--std-text)}
html[data-font="copperplate"]{--display:'Ars Greek', 'Pinyon Script', 'Ars Fallback', var(--std-display); --text:'Ars Greek', 'Pinyon Script', 'Ars Fallback', var(--std-text)}
html[data-font="fraktur"] body, html[data-font="copperplate"] body{font-synthesis:none}
html:is([data-font="fraktur"],[data-font="copperplate"]) body *:not(.directions, .directions *, :is(button:not(.set-card, .cumul-bar), input, select, textarea, option, label, svg, .speak-rate-menu, .set-menu, .font-note, .btn, .btn-row, .opt, .opts, .q-instr, .deck-hint, .recite-opt-note, .recite-menu-list, .tab-lock-card, .ex-opt, .answer-row, table, caption, th, td, kbd, .room-locus, .act-label .n, .prog-cell, .chev, .room-bank, .ex-table, .paradigm, .endings), :is(button:not(.set-card, .cumul-bar), input, select, textarea, option, label, svg, .speak-rate-menu, .set-menu, .font-note, .btn, .btn-row, .opt, .opts, .q-instr, .deck-hint, .recite-opt-note, .recite-menu-list, .tab-lock-card, .ex-opt, .answer-row, table, caption, th, td, kbd, .room-locus, .act-label .n, .prog-cell, .chev, .room-bank, .ex-table, .paradigm, .endings) *){text-transform:none !important; letter-spacing:0 !important; font-variant:normal !important}
html[data-font="copperplate"] body{font-size-adjust:.53; color:#1c140d; -webkit-text-stroke:.35px currentColor}
html[data-font="copperplate"] body.dark{color:#f3ead6}
/* the standard font is kept here */
html[data-font] :is(button:not(.set-card, .cumul-bar), input, select, textarea, option, label, svg, .speak-rate-menu, .set-menu, .font-note, .btn, .btn-row, .opt, .opts, .q-instr, .deck-hint, .recite-opt-note, .recite-menu-list, .tab-lock-card, .ex-opt, .answer-row, table, caption, th, td, kbd, .room-locus, .act-label .n, .prog-cell, .chev, .room-bank, .ex-table, .paradigm, .endings){--display:var(--std-display); --text:var(--std-text); font-size-adjust:none; -webkit-text-stroke:0; font-synthesis:initial}
:where(html[data-font]) :where(label, svg, .speak-rate-menu, .set-menu, .font-note, .btn, .btn-row, .opt, .opts, .q-instr, .deck-hint, .recite-opt-note, .recite-menu-list, .tab-lock-card, .ex-opt, .answer-row, table, caption, th, td, kbd, .room-locus, .act-label .n, .prog-cell, .chev, .room-bank, .ex-table, .paradigm, .endings){font-family:var(--std-text); font-style:normal}
html[data-font] :is(input, select, textarea, .ex-pane-item, .recite-due-btn){font-family:var(--std-text)}
:where(html[data-font="copperplate"]) :where(button:not(.set-card, .cumul-bar), input, select, textarea, option, label, svg, .speak-rate-menu, .set-menu, .font-note, .btn, .btn-row, .opt, .opts, .q-instr, .deck-hint, .recite-opt-note, .recite-menu-list, .tab-lock-card, .ex-opt, .answer-row, table, caption, th, td, kbd, .room-locus, .act-label .n, .prog-cell, .chev, .room-bank, .ex-table, .paradigm, .endings){color:var(--ink)}
/* opening drop caps: each font sets its own capital, tuned so its ink clears lines 1 to 3 */
:is(.intro-note)::first-letter{float:left; font-family:var(--display); font-weight:400; font-style:normal; font-size-adjust:none; text-transform:none; letter-spacing:0; font-size:4.1em; line-height:.8; margin:6px 10px 0 0; padding:0; border:0; background:none; color:var(--accent)}
html[data-font="plain"] :is(.intro-note)::first-letter{font-size:3.7em; line-height:.8; margin:7px 12px 0 0; color:var(--accent)}
html[data-font="garamond"] :is(.intro-note)::first-letter{font-size:4.1em; line-height:.8; margin:6px 12px 0 0; color:var(--ink)}
html[data-font="italic"] :is(.intro-note)::first-letter{font-size:3.6em; line-height:.86; margin:5px 22px 6px 0; padding:0 .04em 0 0; color:var(--ink)}
html[data-font="copperplate"] :is(.intro-note)::first-letter{font-size:4.6em; line-height:.66; margin:16px 34px 6px 2px; color:var(--ink)}
/* Medieval Gothic: a rubricated initial, a red Fraktur capital in a thin ochre frame with a faint tint and four corner dots */
html[data-font="fraktur"] :is(.intro-note)::first-letter{font-size:3.25em; line-height:1; margin:5px 14px 2px 0; padding:.04em .14em .02em; color:#b0301c; border:1px solid #a8822f; background:radial-gradient(circle,#a8822f 1.6px,transparent 2.2px) 2px 2px/6px 6px no-repeat, radial-gradient(circle,#a8822f 1.6px,transparent 2.2px) right 2px top 2px/6px 6px no-repeat, radial-gradient(circle,#a8822f 1.6px,transparent 2.2px) left 2px bottom 2px/6px 6px no-repeat, radial-gradient(circle,#a8822f 1.6px,transparent 2.2px) right 2px bottom 2px/6px 6px no-repeat, rgba(176,48,28,.07)}
html[data-font="fraktur"] body.dark :is(.intro-note)::first-letter{color:#f2a08a; border-color:#d8b46c; background:radial-gradient(circle,#d8b46c 1.6px,transparent 2.2px) 2px 2px/6px 6px no-repeat, radial-gradient(circle,#d8b46c 1.6px,transparent 2.2px) right 2px top 2px/6px 6px no-repeat, radial-gradient(circle,#d8b46c 1.6px,transparent 2.2px) left 2px bottom 2px/6px 6px no-repeat, radial-gradient(circle,#d8b46c 1.6px,transparent 2.2px) right 2px bottom 2px/6px 6px no-repeat, rgba(242,160,138,.10)}
/* the note on the current font, appended as the last element of the main page */
/* Oct 24: font details note in very small, faint print, the last thing on the main page (AA 4.5:1+ against the page). */
.font-note{max-width:36rem; margin:3.5rem auto 1.25rem; padding:0 1rem; font-family:var(--std-text) !important; font-style:normal !important; font-weight:400; font-size:.75rem !important; line-height:1.5 !important; color:#786a58 !important; text-align:center; overflow-wrap:break-word; -webkit-text-stroke:0; font-size-adjust:none}
body.dark .font-note{color:#998076 !important}
.font-note b{color:inherit !important; font-weight:700}
/* the + button and its menu (it replaces the separate dark-mode button, which stays hidden for its logic) */
#dark-toggle[hidden]{display:none !important}
#set-btn{min-width:44px; padding:0 12px; border-radius:0; border:1px solid var(--frame); background:var(--paper); color:var(--ink); font-size:26px; line-height:1.2; box-shadow:none; transition:background-color .25s ease; font-family:var(--std-text); font-weight:400; cursor:pointer; display:flex; align-items:center; justify-content:center}
#set-btn:focus-visible, .set-menu button:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.set-wrap{position:relative; display:flex}
.set-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:70; min-width:260px; max-width:calc(100vw - 24px); background:var(--card); border:1px solid var(--ink); padding:6px 0; color:var(--ink); font-family:var(--std-text) !important; font-size:18px; line-height:1.35; text-align:left}
.set-menu[hidden]{display:none}
.set-menu .set-head{padding:10px 16px 4px; font-size:16px; color:var(--ink-soft); font-variant:small-caps; letter-spacing:.05em}
.set-menu button{display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:10px 16px; text-align:left; font-family:var(--std-text) !important; font-size:18px; line-height:1.3; color:var(--ink); background:transparent; border:0; border-radius:0; box-shadow:none; cursor:pointer; white-space:nowrap; text-transform:none; letter-spacing:0}
.set-menu button:hover{background:var(--hover)}
.set-menu .set-sep{border-top:1px solid var(--frame); margin:6px 0}
.set-check{width:20px; flex:none; text-align:center; font-weight:700}
.set-menu [aria-checked="true"]{background:var(--hover); font-weight:700}
.set-menu [aria-checked="true"] .set-check::before{content:"✓"}
/* each font option is shown in its own face, large for legibility (as in Ars Logica) */
.set-menu .set-fonts button{font-size:22px; line-height:1.25; font-size-adjust:none}
.set-menu .set-fonts [data-font="standard"] span+span{font-family:'Libre Caslon Text', Georgia, serif}
.set-menu .set-fonts [data-font="plain"] span+span{font-family:'Atkinson Hyperlegible Next', sans-serif}
.set-menu .set-fonts [data-font="garamond"] span+span{font-family:'EB Garamond', Georgia, serif; font-size:24px}
.set-menu .set-fonts [data-font="italic"] span+span{font-family:'Felipa', Georgia, serif; font-size:27px; font-weight:400}
.set-menu .set-fonts [data-font="fraktur"] span+span{font-family:'UnifrakturMaguntia', Georgia, serif; font-size:28px; font-weight:400}
.set-menu .set-fonts [data-font="copperplate"] span+span{font-family:'Pinyon Script', Georgia, serif; font-size:33px; font-weight:400; line-height:1.4; -webkit-text-stroke:.3px currentColor}
@media print{ .set-wrap{display:none !important} }
#set-btn:hover, #set-btn[aria-expanded="true"]{background:var(--hover)}
/* long reading text and feedback in the script fonts get more line spacing */
html:is([data-font="italic"],[data-font="copperplate"]) :is(p, li, .feedback, .fb, .verdict, .explain):not(.directions, .directions *){line-height:1.6}
/* phones: wide tables scroll sideways inside themselves instead of widening the page */
@media (max-width:480px){ html[data-font] table{display:block; max-width:100%; overflow-x:auto} html[data-font] body{overflow-wrap:break-word} }
/* arrows, checks and similar symbols: one consistent fallback */
html[data-font] :is(.chev, .set-check){font-family:var(--std-text), 'DejaVu Sans', 'Segoe UI Symbol', sans-serif}
/* directions and instructions (marked .directions in the markup): the standard face at the standard size, whatever font is chosen */
html[data-font] :is(.directions, .directions *):not(kbd, code){--display:var(--std-display); --text:var(--std-text); font-size-adjust:none !important; -webkit-text-stroke:0 !important}
html[data-font] .directions{font-family:var(--std-text)}

/* Medieval Gothic only: woodcut title initial A (du Bellay, Paris 1549, Gallica/BnF, public domain) */
.title-initial{display:none}
html[data-font="fraktur"] header h1 .title-initial{display:inline-block; height:1.85em; width:auto; vertical-align:-.22em;
  margin:0 .03em 0 0; border-radius:4px; box-shadow:0 0 0 1px var(--frame)}
html[data-font="fraktur"] header h1 .title-a{display:none}

/* Studium Institute row at the top of the + menu: the name goes home, the arrow lists the three apps. */
.si-nav{border-bottom:1px solid var(--frame); margin-bottom:6px}
.si-row{display:flex; align-items:stretch}
.si-nav a, .si-nav .si-tog{font-family:var(--std-text) !important; font-size:18px; line-height:1.3; color:var(--ink); background:transparent; border:0; border-radius:0; text-decoration:none; cursor:pointer; text-transform:none; letter-spacing:0; font-variant:normal; font-weight:400}
.si-nav .si-name{flex:1; display:block; padding:10px 16px; white-space:nowrap}
.si-nav .si-tog, .set-menu .si-nav .si-tog{width:auto; flex:none; display:flex; align-items:center; justify-content:center; margin:0; padding:10px 16px}
.si-tog span{display:inline-block; transition:transform .15s}
.si-tog[aria-expanded="true"] span{transform:rotate(180deg)}
.si-nav .si-list{padding:0 0 4px}
.si-nav .si-list a{display:block; padding:8px 16px 8px 36px; font-size:17px; white-space:nowrap}
.si-nav a:hover, .si-nav .si-tog:hover{background:var(--hover)}
.si-nav a:focus-visible, .si-nav .si-tog:focus-visible{outline:3px solid var(--ink); outline-offset:-3px}
.si-nav .si-list a[aria-current]{font-weight:700}

.set-menu{max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto}
/* narrow screens and large zoom: the menu never runs off the left edge */
.set-menu{min-width:min(260px, calc(100vw - 24px))}
@media (max-width:300px){ .set-menu .si-name, .set-menu .si-list a, .set-menu button, .set-menu button span{white-space:normal; min-width:0; overflow-wrap:anywhere} }