/* The Wending House: folio style. Instruments drawn as illustrations on a manuscript page, in ink on vellum.
   Shared by /cross-ratio/, /planimeters/, /so3-rule/ and any later instrument folios. */
:root{
  --vellum:#ECDFC0; --vellum2:#F3E9D0; --vellum3:#E2D2AC; --edge:#C9B48A;
  --ink:#2A1E14; --ink2:#4A3826; --faded:#7A6650; --rule:#B9A27A;
  --rubric:#9A2C1B; --lapis:#2D4D7C; --verdigris:#3E6E5A; --gold:#A47B2C;
  --wash:rgba(154,44,27,.10); --lapiswash:rgba(45,77,124,.12);
  --fell:"IM Fell English",Georgia,"Times New Roman",serif;
  --fellsc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
  --mottle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .40  0 0 0 0 .18  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23m)' opacity='.35'/></svg>");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --vellum:#1E1912; --vellum2:#262017; --vellum3:#17130D; --edge:#3A2F20;
    --ink:#EADFC4; --ink2:#D2C3A0; --faded:#A8977A; --rule:#5A4A33;
    --rubric:#E07F62; --lapis:#8FB0E6; --verdigris:#7FC0A2; --gold:#D9AE5C;
    --wash:rgba(224,127,98,.14); --lapiswash:rgba(143,176,230,.14);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --vellum:#1E1912; --vellum2:#262017; --vellum3:#17130D; --edge:#3A2F20;
  --ink:#EADFC4; --ink2:#D2C3A0; --faded:#A8977A; --rule:#5A4A33;
  --rubric:#E07F62; --lapis:#8FB0E6; --verdigris:#7FC0A2; --gold:#D9AE5C;
  --wash:rgba(224,127,98,.14); --lapiswash:rgba(143,176,230,.14);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--vellum3)}
body{margin:0;color:var(--ink);font:17px/1.5 var(--fell);
  background:var(--noise),var(--mottle),radial-gradient(120% 90% at 50% 40%,var(--vellum2) 0%,var(--vellum) 55%,var(--vellum3) 100%);
  background-attachment:fixed;padding:22px 16px 48px;-webkit-font-smoothing:antialiased}
a{color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:2px}
.leaf{max-width:1180px;margin:0 auto;position:relative;padding:26px clamp(14px,3vw,44px) 30px;
  border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:5px}
/* running head */
.runhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;font:14px var(--fellsc);letter-spacing:.08em;color:var(--faded);
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:16px}
.runhead a{color:inherit;text-decoration:none}.runhead a:hover{color:var(--rubric)}
h1{font:400 clamp(34px,5.4vw,58px)/1.02 var(--fellsc);margin:6px 0 4px;letter-spacing:.01em}
h1 .rub{color:var(--rubric)}
.incipit{font-size:19px;max-width:66ch;margin:6px 0 14px;text-wrap:pretty}
.incipit::first-letter{float:left;font:400 3.35em/.82 var(--fellsc);color:var(--rubric);margin:.06em .1em 0 0;padding:.04em .08em;
  border:1px solid var(--rubric);background:var(--wash)}
h2{font:400 26px/1.1 var(--fellsc);margin:0 0 6px}
h2 .no{color:var(--rubric);margin-right:.35em}
h3{font:400 18px var(--fellsc);letter-spacing:.06em;color:var(--rubric);margin:0 0 4px}
p{margin:0 0 10px}
.fleuron{text-align:center;color:var(--rubric);font-size:20px;letter-spacing:.6em;margin:18px 0 10px;user-select:none}
/* plate tabs */
.platetabs{display:flex;flex-wrap:wrap;gap:4px 2px;margin:10px 0 14px;border-bottom:1px solid var(--rule)}
.platetabs button{font:16px var(--fellsc);letter-spacing:.05em;color:var(--faded);background:none;border:1px solid transparent;border-bottom:none;
  padding:7px 12px 6px;cursor:pointer;margin-bottom:-1px;border-radius:2px 2px 0 0}
.platetabs button:hover{color:var(--ink)}
.platetabs button.on{color:var(--ink);border-color:var(--rule);background:var(--vellum2)}
.platetabs button .no{color:var(--rubric);margin-right:.3em}
/* a plate: the drawing, and the margin beside it */
.plate{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px 28px;align-items:start}
.plate[hidden]{display:none}
@media (max-width:920px){.plate{grid-template-columns:1fr}}
.drawing{min-width:0;display:flex;flex-direction:column;gap:8px}
.drawing svg.fig{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(var(--vellum2),var(--vellum2)) padding-box;border:1px solid var(--rule);box-shadow:inset 0 0 40px rgba(120,90,40,.12)}
.caption{font-style:italic;color:var(--ink2);font-size:15.5px;text-align:center;margin:2px 0 0}
.caption b{font:400 15px var(--fellsc);font-style:normal;color:var(--rubric);letter-spacing:.06em}
/* the margin: glosses keyed to the drawing by sigla */
.margin{display:flex;flex-direction:column;gap:12px;font-size:15.5px;line-height:1.45;border-left:1px solid var(--rule);padding-left:18px}
@media (max-width:920px){.margin{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:12px}}
.gloss{color:var(--ink2);transition:color .15s}
.gloss .sig{color:var(--rubric);font-style:normal;margin-right:.25em;font-family:var(--fellsc)}
.gloss em{color:var(--ink)}
.gloss.on{color:var(--ink)}
.gloss.on .sig{background:var(--wash)}
[data-g].lit{filter:drop-shadow(0 0 3px var(--rubric))}
/* the reckoning: results written in by hand */
.reckon{font:400 17px/1.45 var(--hand);color:var(--lapis);border:1px dashed var(--rule);padding:8px 11px;background:rgba(255,255,255,.12)}
.reckon .big{font-size:30px;line-height:1.1;color:var(--rubric);display:block}
.reckon .dim{color:var(--faded);font-size:14.5px}
.reckon .ok{color:var(--verdigris)}
/* controls drawn as part of the page */
.dials{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;font-size:15px}
.dials label{font:15px var(--fellsc);letter-spacing:.04em;color:var(--ink2)}
.dials output{font:16px var(--hand);color:var(--lapis);min-width:5.5ch;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--ink2);border-radius:1px}
input[type=range]::-moz-range-track{height:2px;background:var(--ink2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;background:var(--vellum2);border:1.5px solid var(--rubric);transform:rotate(45deg)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--vellum2);border:1.5px solid var(--rubric);border-radius:0;transform:rotate(45deg)}
.row{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
button.q{font:15px var(--fellsc);letter-spacing:.05em;color:var(--ink);background:transparent;border:1px solid var(--ink2);padding:6px 11px 5px;cursor:pointer;border-radius:1px}
button.q:hover{color:var(--rubric);border-color:var(--rubric)}
button.q.on,button.q.prime{background:var(--rubric);border-color:var(--rubric);color:var(--vellum2)}
button.q:disabled{opacity:.4;cursor:not-allowed}
select.q,input.q{font:15px var(--fell);color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--ink2);padding:3px 2px;border-radius:0}
select.q option{background:var(--vellum2);color:var(--ink)}
:focus-visible{outline:1.5px dashed var(--rubric);outline-offset:3px}
label.chk{font-size:15px;display:inline-flex;gap:6px;align-items:center;color:var(--ink2)}
input[type=checkbox]{accent-color:var(--rubric)}
/* the commentary below the plates */
.commentary{columns:2 340px;column-gap:36px;column-rule:1px solid var(--rule);margin-top:6px;font-size:16.5px}
.commentary p{break-inside:avoid}
.commentary p:first-of-type::first-letter{font:400 2.4em/.8 var(--fellsc);float:left;color:var(--rubric);margin:.05em .08em 0 0}
.commentary h2{column-span:all;margin:4px 0 10px}
.commentary b{font-weight:400;font-family:var(--fellsc);letter-spacing:.03em;color:var(--ink)}
.colophon{margin-top:20px;padding-top:10px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--faded);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px}
.colophon a{color:var(--faded)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* svg drawing conventions: set these on elements, not presentation attributes, so the night page re-inks them */
.ink{stroke:var(--ink);fill:none}
.ink2{stroke:var(--ink2);fill:none}
.faded{stroke:var(--faded);fill:none}
.rub{stroke:var(--rubric);fill:none}
.lap{stroke:var(--lapis);fill:none}
.ver{stroke:var(--verdigris);fill:none}
.fink{fill:var(--ink);stroke:none}
.fink2{fill:var(--ink2);stroke:none}
.ffaded{fill:var(--faded);stroke:none}
.frub{fill:var(--rubric);stroke:none}
.flap{fill:var(--lapis);stroke:none}
.fver{fill:var(--verdigris);stroke:none}
.fgold{fill:var(--gold);stroke:none}
.fvel{fill:var(--vellum2);stroke:none}
.fwash{fill:var(--wash);stroke:none}
.flwash{fill:var(--lapiswash);stroke:none}
svg text{font-family:var(--fell);fill:var(--ink)}
svg text.sc{font-family:var(--fellsc)}
svg text.hand{font-family:var(--hand);fill:var(--lapis)}
svg text.rubt{fill:var(--rubric)}
svg text.fadedt{fill:var(--faded)}
.grab{cursor:grab}.grab:active{cursor:grabbing}
.nsgrab{cursor:ns-resize}

/* ---- added for the second round: subtitle, running-head neighbours, Try this, worked tables, the cabinet ---- */
.subtitle{font:italic 400 clamp(18px,2.4vw,23px)/1.3 var(--fell);color:var(--ink2);margin:0 0 10px}
.folionav{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center}
.folionav a[rel]{color:var(--faded);font-size:13px}
@media (max-width:620px){.folionav a[rel]{display:none}}
.reckon hr{border:none;border-top:1px dashed var(--rule);margin:7px 0}
.reckon .nw{white-space:nowrap}
.try{margin:0;padding:0 0 0 1.5em;font-size:15.5px;color:var(--ink2);counter-reset:t;list-style:none}
.try::before{content:"Try this";display:block;margin:0 0 4px -1.5em;font:15px var(--fellsc);letter-spacing:.06em;color:var(--rubric)}
.try li{counter-increment:t;position:relative;margin:0 0 7px}
.try li::before{content:counter(t,lower-roman) ".";position:absolute;left:-1.5em;color:var(--rubric);font-family:var(--fellsc)}
.try li.done{color:var(--faded)}
.try li.done::after{content:" ✓";color:var(--verdigris);font-family:var(--hand)}
.try .tset{font:13px var(--fellsc);letter-spacing:.04em;color:var(--rubric);background:none;border:none;border-bottom:1px dotted var(--rubric);padding:0;margin-left:.4em;cursor:pointer}
table.worked{border-collapse:collapse;font-size:15px;margin:4px 0 8px;width:100%}
table.worked th{font:400 13.5px var(--fellsc);letter-spacing:.05em;color:var(--rubric);text-align:left;border-bottom:1px solid var(--rule);padding:3px 6px}
table.worked td{border-bottom:1px dotted var(--rule);padding:3px 6px;vertical-align:top}
table.worked td.n{font-family:var(--hand);color:var(--lapis);text-align:right;white-space:nowrap}
.keyhint{font-size:13.5px;color:var(--faded);font-style:italic}
svg [role=slider]:focus{outline:none}
svg [role=slider]:focus-visible{filter:drop-shadow(0 0 2.5px var(--rubric)) drop-shadow(0 0 1px var(--rubric))}
.cabinet{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:10px 0}
.cabinet a{display:block;color:inherit;text-decoration:none;border:1px solid var(--rule);padding:12px 14px 14px;background:rgba(255,255,255,.08)}
.cabinet a:hover{border-color:var(--rubric)}
.cabinet .no{font:14px var(--fellsc);letter-spacing:.08em;color:var(--rubric)}
.cabinet h2{margin:2px 0 4px}
.cabinet p{font-size:15.5px;color:var(--ink2);margin:0}
.cabinet svg{width:100%;height:auto;display:block;margin:4px 0 8px}