dindot-characters{display:block;font-family:'DINDOT',sans-serif;font-size:16px;font-weight:400;color:#332a26;--char-weight:400;--char-style:normal;--char-feature:normal;--char-x-height:.5068em;--char-columns:15;--char-size:34px;--char-preview-size:240px;min-width:0}
.char-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.char-switch{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid #cbc3b6;border-radius:8px}
.char-switch label{position:relative}
.char-switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.char-switch span{display:block;padding:8px 14px;border-radius:5px;font-size:15px;line-height:1.3;-webkit-user-select:none;user-select:none}
.char-switch label:hover span{background:#e9e5dc}
.char-switch input:checked+span{background:#332a26;color:#f3f0e8}
.char-switch input:focus-visible+span{outline:2px solid #ae3f0e;outline-offset:2px}
.char-controls input[value="500"]+span{font-weight:500}
.char-controls input[value="600"]+span{font-weight:600}
.char-controls input[value="700"]+span{font-weight:700}
.char-italic span{font-style:italic}
.char-search{flex:1;max-width:420px;margin-left:auto;min-width:0;font:400 16px 'DINDOT',sans-serif;color:#332a26;border:1px solid #cbc3b6;background:#f3f0e8;padding:10px 14px;border-radius:8px;min-height:44px}
.char-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}
.char-layout>div{min-width:0}
.char-group+.char-group{margin-top:40px}
.char-group h3{font:500 14px/1.4 'DINDOT',sans-serif;letter-spacing:.02em;color:#6e6259;margin:0 0 12px}
.char-grid{display:grid;grid-template-columns:repeat(var(--char-columns),minmax(0,1fr));grid-template-columns:repeat(var(--char-columns),round(down,calc((100% - 1px) / var(--char-columns)),1px));justify-content:start}
dindot-characters .char-tile{display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:0;background:transparent;
  /* Each tile draws its top and left lines inside and its right and bottom lines outside, so neighbours share one hairline. */
  box-shadow:1px 0 0 #cbc3b6,0 1px 0 #cbc3b6,1px 1px 0 #cbc3b6,inset 1px 0 0 #cbc3b6,inset 0 1px 0 #cbc3b6;color:inherit;cursor:pointer}
.char-tile:hover{background:#e9e5dc}
.char-tile[aria-pressed=true]{background:#332a26;color:#f3f0e8}
.char-tile:focus-visible{outline:2px solid #ae3f0e;outline-offset:-2px}
/* A character wider than 1.45em (Ⅶ, Ⅷ, Ⅻ) shrinks to that width, so it keeps the tile's margins. */
.char-shape{font-size:min(var(--char-size),calc(var(--char-size) * 1.45 / var(--char-width,1)));font-weight:var(--char-weight);font-style:var(--char-style);font-feature-settings:var(--char-feature);line-height:1;white-space:pre}
.char-preview{position:sticky;top:calc(var(--site-header,0px) + 24px);border:1px solid #cbc3b6;border-radius:8px;background:#f3f0e8;overflow:hidden;min-width:0}
.char-preview-canvas{overflow:hidden;padding:20px 0;border-bottom:1px solid #cbc3b6;container-type:inline-size}
/* Guides at cap height, x-height and baseline. With every vertical metric at 1.0254em up and 0.2422em down,
   a 1.35 line puts the baseline 1.0666em below the top of the line box. */
.char-large{display:block;font-size:var(--char-preview-size);font-weight:var(--char-weight);font-style:var(--char-style);font-feature-settings:var(--char-feature);line-height:1.35;white-space:pre;text-align:center;
  background:linear-gradient(#d8d0c3,#d8d0c3) 0 calc(1.0666em - .6904em)/100% 1px no-repeat,linear-gradient(#d8d0c3,#d8d0c3) 0 calc(1.0666em - var(--char-x-height))/100% 1px no-repeat,linear-gradient(#b5ab9c,#b5ab9c) 0 1.0666em/100% 1px no-repeat}
/* A glyph wider than the canvas (Ⅷ, Ⅻ) shrinks to fit; the padding keeps the canvas's height and centres it. */
@supports(width:1cqw){.char-large{font-size:min(var(--char-preview-size),calc((100cqw - 32px) / var(--char-width,1)));padding-block:calc((var(--char-preview-size) - 1em) * .675);background-origin:content-box}}
.char-info{display:grid;gap:8px;padding:20px 22px 22px}
.char-info h3{font:400 16px/1.4 'DINDOT',sans-serif;overflow-wrap:anywhere;letter-spacing:0;margin:0}
.char-info p{font-size:14px;color:#6e6259;line-height:1.5;margin:0;font-variant-numeric:tabular-nums}
.char-info .char-switch{margin-top:10px;justify-self:start}
.char-info .char-switch span{padding:6px 10px;font-size:14px}
.char-empty{font-size:15px;line-height:1.6;color:#6e6259;margin:0}
.char-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.char-space{position:relative;min-width:var(--space-width);height:1em;display:inline-block!important;margin:0 auto;border-bottom:1px dashed #b54411;background:linear-gradient(90deg,#b54411 1px,transparent 1px,transparent calc(100% - 1px),#b54411 calc(100% - 1px))}
.char-preview .char-space{min-width:var(--space-width);height:.75em}
.char-space::before,.char-space::after{content:"";position:absolute;top:0;height:100%;width:1px;background:#b54411}
.char-space::before{left:0}
.char-space::after{right:0}
@media(max-width:1240px){dindot-characters{--char-size:30px;--char-preview-size:120px}
.char-layout{grid-template-columns:1fr;gap:24px}
.char-preview{position:sticky;top:var(--site-header,0px);z-index:2;order:-1;display:grid;grid-template-columns:minmax(120px,40%) 1fr;align-items:center}
.char-preview-canvas{padding:8px 0;border-bottom:0;border-right:1px solid #cbc3b6}
.char-info{padding:14px 16px}
}
@media(max-width:760px){dindot-characters{--char-columns:5;--char-size:40px}
}
@media(max-width:560px){dindot-characters{--char-size:30px;--char-preview-size:100px}
.char-controls{margin-bottom:28px}
.char-controls>.char-switch:not(.char-italic){width:100%}
.char-controls>.char-switch label{flex:1}
.char-controls>.char-switch span{padding:8px 4px;text-align:center}
.char-search{max-width:none;flex-basis:100%}
.char-group+.char-group{margin-top:28px}
}
@media print{.char-controls,.char-groups{display:none!important}
.char-layout{display:block}
.char-preview{position:static;break-inside:avoid}
}
/* Until the tiles render, after the catalogue loads, hold the browser's height, so the sections
   under it start where they will end up and their lazy images wait. */
dindot-characters:not(:has(.char-tile)){min-height:2000px}
@media(max-width:760px){dindot-characters:not(:has(.char-tile)){min-height:1300vw}
}