/* Counterspace Anatomy. Specimen typefaces are bundled under the SIL Open Font License (see fonts/*-LICENSE.txt). */
@font-face{font-family:"EB Garamond";font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Baskerville";font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:400;font-display:swap;src:url(fonts/bodoni-moda-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-weight:400;font-display:swap;src:url(fonts/zilla-slab-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Della Respira";font-weight:400;font-display:swap;src:url(fonts/della-respira-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-weight:400;font-display:swap;src:url(fonts/libre-franklin-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Marcellus";font-weight:400;font-display:swap;src:url(fonts/marcellus-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Pinyon Script";font-weight:400;font-display:swap;src:url(fonts/pinyon-script-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"UnifrakturMaguntia";font-weight:400;font-display:swap;src:url(fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.woff2) format("woff2")}

/* Colors: change these four to restyle the whole piece. */
.csa{
  --ink:#1D1D1D; --text:#5E5E5E; --line:#D4D4D4; --hot:#E78225;
  background:#fff; color:var(--text);
  font-family:"museo-sans","Jost",system-ui,sans-serif; font-size:17px; line-height:1.5;
  margin:0; padding:8px 0 48px; text-align:left;
}
.csa *{box-sizing:border-box}
.csa .csa-wrap{max-width:1040px;margin:0 auto}

.csa .csa-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px}
.csa button,.csa button:hover,.csa button:focus{font:inherit;font-weight:500;font-size:15px;line-height:1.3;color:var(--text);background:none;box-shadow:none;
  text-transform:none;letter-spacing:normal;text-decoration:none;border:0;border-radius:0;min-height:0;padding:4px 0;cursor:pointer;text-align:left}
.csa button:hover{color:var(--ink)}
.csa button:focus-visible,.csa input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.csa .csa-tabs button,.csa .csa-tabs button:hover,.csa .csa-tabs button:focus{border-bottom:2px solid transparent}
.csa .csa-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--hot)}

.csa .csa-stage{position:relative;margin:clamp(28px,4vw,48px) 0 clamp(24px,3vw,40px);cursor:crosshair;touch-action:pan-y}
.csa .csa-stage canvas{display:block;width:100%}

.csa .csa-lower{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px 48px;align-items:start}
.csa .csa-terms{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows,10),auto);grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
.csa .csa-terms li{margin:0;padding:0;list-style:none}
.csa .csa-terms button{width:100%;display:flex;gap:.5em}
.csa .csa-terms .n{font-variant-numeric:tabular-nums;min-width:1.7em}
.csa .csa-terms button[aria-pressed=true]{color:var(--ink)}
.csa .csa-terms button[aria-pressed=true] .n{color:var(--hot)}

.csa .csa-def h3{font-family:inherit;text-transform:none;font-weight:400;font-size:clamp(28px,3.4vw,34px);line-height:1.1;color:var(--hot);margin:0 0 8px}
.csa .csa-def p{color:var(--ink);margin:0 0 8px;max-width:38ch;font-size:18px}
.csa .csa-def p.sub{color:var(--text);font-size:15px}

.csa .csa-word{display:flex;flex-direction:column;gap:2px;margin-top:22px;font-size:14px;max-width:240px}
.csa .csa-word[hidden]{display:none}
.csa .csa-word input,.csa .csa-word input:focus{font:inherit;font-size:17px;color:var(--ink);background:none;box-shadow:none;width:100%;height:auto;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:5px 0}

.csa .csa-view[hidden]{display:none}
.csa .csa-panel + .csa-panel{margin-top:clamp(40px,6vw,72px);padding-top:clamp(8px,2vw,24px);border-top:1px solid var(--line)}
.csa .csa-classes{margin-top:clamp(20px,3vw,32px)}
.csa .csa-classes .csa-word{margin:0 0 clamp(20px,3vw,32px)}
.csa .csa-class{margin:0 0 clamp(32px,5vw,56px)}
.csa .csa-class canvas{display:block;width:100%}
.csa .csa-class-text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px 48px;align-items:start;margin-top:14px}
.csa .csa-class-text h3{font-family:inherit;text-transform:none;font-weight:400;font-size:clamp(28px,3.4vw,34px);line-height:1.1;color:var(--hot);margin:0}
.csa .csa-class-text p{color:var(--ink);margin:0 0 8px;max-width:44ch;font-size:18px}
.csa .csa-class-text p.sub{color:var(--text);font-size:15px}

.csa .csa-glossary dt{color:var(--ink);font-weight:500;margin-top:12px}
.csa .csa-glossary dd{margin:0}

@media (max-width:700px){.csa .csa-lower,.csa .csa-class-text{grid-template-columns:1fr}}
/* on phones the description sits directly under the letters, above the list of terms; the reserved height stops the list jumping as descriptions change length */
@media (max-width:700px){.csa .csa-stage{margin:20px 0 14px}.csa .csa-lower{gap:18px}.csa .csa-lower .csa-def{order:-1;min-height:150px}.csa .csa-def h3{font-size:26px;margin-bottom:4px}.csa .csa-def p{font-size:17px;line-height:1.45;margin-bottom:0}}
@media (max-width:480px){.csa .csa-tabs{gap:4px 16px}.csa .csa-tabs button{font-size:14px}}

/* ---- Spacing ([counterspace_spacing]) ---- */
.csa-spacing .csa-sp-stage{margin:clamp(28px,4vw,48px) 0 clamp(24px,3vw,40px);padding:clamp(18px,3vw,34px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;font-family:"EB Garamond",Georgia,serif;color:var(--hot)}
.csa-spacing .csa-sp-pair{font-size:clamp(130px,26vw,270px);line-height:1;white-space:nowrap;font-kerning:none;font-feature-settings:"kern" 0}
.csa-spacing .csa-sp-caps{font-family:inherit;font-size:clamp(30px,7.2vw,76px);line-height:1.1;color:var(--hot);margin:0 0 14px;white-space:nowrap}
.csa-spacing .csa-sp-line{font-family:inherit;font-size:clamp(19px,3vw,30px);line-height:1.3;color:var(--hot);margin:0}
.csa-spacing .csa-sp-text{font-family:inherit;font-size:21px;line-height:1.3;color:var(--ink);margin:0;max-width:100%}
.csa-spacing .csa-sp-control{min-width:0}
.csa-spacing .csa-sp-slider{display:block;font-size:15px;color:var(--text)}
.csa-spacing .csa-sp-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px}
.csa-spacing .csa-sp-label{color:var(--ink);font-weight:500}
.csa-spacing .csa-sp-out{font-variant-numeric:tabular-nums}
.csa-spacing input[type=range],.csa-spacing input[type=range]:focus{display:block;width:100%;height:28px;margin:8px 0 0;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--hot);cursor:pointer}
.csa-spacing .csa-sp-picks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:16px}
.csa-spacing .csa-sp-picks button,.csa-spacing .csa-sp-picks button:hover,.csa-spacing .csa-sp-picks button:focus{font-family:"EB Garamond",Georgia,serif;font-size:24px;line-height:1.2;font-weight:400;border-bottom:2px solid transparent;padding:2px 0}
.csa-spacing .csa-sp-picks button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--hot)}
.csa-spacing .csa-sp-btn,.csa-spacing .csa-sp-btn:hover,.csa-spacing .csa-sp-btn:focus{margin-top:14px;color:var(--ink);border-bottom:2px solid var(--hot);padding:2px 0}
@media (max-width:700px){.csa.csa-spacing .csa-lower .csa-def{order:0;min-height:0}.csa-spacing .csa-sp-text{font-size:19px}}

/* ---- Typesetting details ([counterspace_typesetting]) ---- */
.csa-typesetting .csa-ts-item{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:16px 48px;align-items:start;padding:clamp(24px,4vw,40px) 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.csa-typesetting .csa-ts-item:last-child{border-bottom:1px solid var(--line)}
.csa-typesetting .csa-ts-spec + .csa-ts-spec{margin-top:18px}
.csa-typesetting .csa-ts-label{display:block;font-size:14px;line-height:1.3;color:var(--text);margin-bottom:2px}
.csa-typesetting .csa-ts-spec p{font-family:"EB Garamond",Georgia,serif;font-size:clamp(26px,3.6vw,38px);line-height:1.2;margin:0;font-variant-numeric:normal}
.csa-typesetting .csa-ts-wrong p{color:var(--text)}
.csa-typesetting .csa-ts-right p{color:var(--hot)}
.csa-typesetting .csa-ts-text h3{font-family:inherit;text-transform:none;font-weight:400;font-size:clamp(26px,3vw,32px);line-height:1.15;color:var(--hot);margin:0 0 8px}
.csa-typesetting .csa-ts-text p{color:var(--ink);font-size:18px;line-height:1.5;margin:0;max-width:44ch}
@media (max-width:700px){.csa-typesetting .csa-ts-item{grid-template-columns:1fr}}

/* ---- Glossary ([counterspace_glossary]) ---- */
.csa-glossary-page .csa-az{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 clamp(20px,3vw,36px);font-family:"EB Garamond",Georgia,serif;font-size:24px;line-height:1.3}
.csa-glossary-page .csa-az a{color:var(--text);text-decoration:none;border-bottom:2px solid transparent;padding:0 2px}
.csa-glossary-page .csa-az a:hover,.csa-glossary-page .csa-az a:focus{color:var(--ink);border-bottom-color:var(--hot)}
.csa-glossary-page .csa-g-letter{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 24px;padding:clamp(18px,3vw,28px) 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.csa-glossary-page .csa-g-letter h2{font-family:"EB Garamond",Georgia,serif;font-weight:400;font-size:clamp(56px,8vw,84px);line-height:.9;color:var(--hot);margin:0;text-transform:none}
.csa-glossary-page dl{margin:0}
.csa-glossary-page .csa-g-entry{margin:0 0 18px}
.csa-glossary-page .csa-g-entry:last-child{margin-bottom:0}
.csa-glossary-page dt{font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);margin:0 0 2px}
.csa-glossary-page dd{margin:0;font-size:17px;line-height:1.5;color:var(--ink);max-width:62ch}
.csa-glossary-page .csa-g-see{display:block;font-size:14px;color:var(--text);margin-top:2px}
.csa-glossary-page a.csa-g-see{text-decoration:underline;text-decoration-color:var(--hot);text-underline-offset:3px}
@media (max-width:600px){.csa-glossary-page .csa-g-letter{grid-template-columns:1fr}.csa-glossary-page .csa-g-letter h2{margin-bottom:10px}}

/* linked-to places stop clear of a fixed site header */
.csa,.csa .csa-panel,.csa .csa-class{scroll-margin-top:110px}

/* ---- Landing page ([counterspace_typography]) ---- */
.csa-home .csa-home-intro{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--ink);max-width:54ch;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.csa-home .csa-home-row,.csa-home .csa-home-row:hover,.csa-home .csa-home-row:focus{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:8px 48px;align-items:center;padding:clamp(22px,3.5vw,38px) 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;background:none}
.csa-home .csa-home-row:last-of-type{border-bottom:1px solid var(--line)}
.csa-home .csa-home-row:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.csa-home .csa-home-spec{font-family:"EB Garamond",Georgia,serif;font-size:clamp(60px,10vw,116px);line-height:1;color:var(--hot);white-space:nowrap;overflow:hidden}
.csa-home .csa-home-ink{color:var(--ink)}
.csa-home .csa-home-dim{color:var(--line)}
.csa-home .csa-home-wide{letter-spacing:.16em;font-kerning:none;font-feature-settings:"kern" 0}
.csa-home .csa-home-text{display:block}
.csa-home .csa-home-name{display:inline-block;font-size:clamp(26px,3vw,32px);line-height:1.2;color:var(--ink);border-bottom:2px solid var(--hot);margin-bottom:8px}
.csa-home .csa-home-row:hover .csa-home-name,.csa-home .csa-home-row:focus .csa-home-name{color:var(--hot)}
.csa-home .csa-home-line{display:block;font-size:18px;line-height:1.5;color:var(--ink);max-width:40ch}
.csa-home .csa-home-about{font-size:16px;line-height:1.6;color:var(--text);max-width:62ch;margin:clamp(28px,4vw,44px) 0 0}
.csa-home .csa-home-about a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hot);text-underline-offset:3px}
@media (max-width:700px){.csa-home .csa-home-row,.csa-home .csa-home-row:hover,.csa-home .csa-home-row:focus{grid-template-columns:1fr}.csa-home .csa-home-intro{text-align:left}}