:root{--site-header:65px;--fire-gradient:linear-gradient(108deg,#ffb21a 0%,#f59408 46%,#e85a19 100%);--paper:#f3f0e8;--panel:#e9e5dc;--ink:#332a26;--muted:#6e6259;--line:#cbc3b6;--fire:#f59408;--focus:#ae3f0e;--gutter:clamp(20px,4vw,80px);color-scheme:light;font-family:'DINDOT',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font-size:18px;line-height:1.5}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-weight:400;line-height:1.04}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{text-decoration-color:var(--focus)}
button,input{font:inherit;color:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
button{border:0;background:transparent}
img{display:block;max-width:100%;height:auto}
input{min-width:0}
input[type=range]{accent-color:var(--ink);min-height:30px;max-width:100%;cursor:pointer}
button,a{border-radius:4px}
:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
[hidden]{display:none!important}
.page-gutter{padding-inline:var(--gutter)}
section[id]{scroll-margin-top:28px}
.micro{font-size:14px;line-height:1.45;font-weight:500;letter-spacing:.02em}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip-link:focus{position:fixed;top:16px;left:16px;z-index:20;padding:12px 20px;background:var(--paper)}
.site-header{position:sticky;top:0;z-index:10;background:var(--paper);padding-top:14px}
/* The header holds one thing: the download, the bottom button in small. */
.nav-bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid transparent;transition:border-color 160ms ease-out}
.site-header[data-stuck] .nav-bar{border-bottom-color:var(--line)}
.header-download{--settle:cubic-bezier(.22,1,.36,1);display:inline-flex;align-items:center;gap:12px;padding:5px 5px 5px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;transition:transform 120ms var(--settle)}
.header-download .download-arrow{width:30px;height:30px;font-size:15px}
.header-download .download-arrow::after{top:19.5px;width:9px;height:1.5px;margin-left:-4.5px;border-radius:.75px}
.header-download:active{transform:scale(.97)}
/* --mark is the wordmark's size; the caption below measures itself in it. */
.hero{--mark:clamp(100px,24.2vw,500px);padding-top:clamp(36px,5vw,72px);padding-bottom:64px}
/* The D's stem starts .0723em inside its box (592 of Medium's 8192 units); the negative margin puts it on the gutter. */
.wordmark{font-size:var(--mark);font-weight:500;letter-spacing:-.04em;line-height:1;margin:0 0 .1em -.0723em;white-space:nowrap}
/* The caption takes its columns from the wordmark's letters: the claim under DIN, the body under DOT, from the
   second D's stem (1.4115 marks from the first) to the T's right edge (1.5729 marks further), or on past the T
   where DOT is narrower than 26em of the body's type. The claim stays between .128 and .15 marks, so the German
   claim's longer line is never wider than DIN. Each paragraph pulls back by its first letter's side bearing
   (.08em: I, F and D in Regular), so its stems stand on the wordmark's, and the two first baselines line up. */
.hero-caption{display:grid;grid-template-columns:calc(var(--mark) * 1.4115) minmax(0,max(calc(var(--mark) * 1.5729),26em));align-items:first baseline;padding-top:30px;font-size:clamp(18px,1.39vw,24px);line-height:1.45}
.hero-caption p{margin-left:-.08em;text-wrap:pretty}
.hero-caption p:first-child{font-size:clamp(calc(var(--mark) * .128),30px,calc(var(--mark) * .15));line-height:1.1;letter-spacing:-.015em}
.weights,.zero,.tester,.glyphs,.in-use,.history{padding-block:80px;border-top:1px solid var(--line)}
.tester{padding-top:0;border-top:0}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
.section-heading h2{font-size:clamp(42px,5.3vw,88px);letter-spacing:-.025em}
.section-heading>p{max-width:400px;font-size:20px;line-height:1.5}
/* Eight faces, one size: weight rises to the right, the italic sits below. */
.weight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
/* Capitals and figures sit .046em below the centre of their line box, so the cells pad .046em less above than below. */
.weight-grid p{--pad:calc(5em / 7);position:relative;text-align:center;padding-block:calc(var(--pad) - .046em) calc(var(--pad) + .046em);font-size:clamp(48px,7vw,124px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.weight-grid p:not(:nth-child(4n)){border-right:1px solid var(--line)}
.weight-grid p:nth-child(-n+4){border-bottom:1px solid var(--line)}
/* DIN 16's angle, as the 1940 sheet ends its slanted alphabet: a line at the italic's 15° from vertical stands on the
   grid's bottom edge and rises past the last 6, and an arc between them carries 75°, set as DINDOT Regular outlines so
   it stays out of the cell's text. It is drawn in thousandths of the cell's em from the font's metrics, which is why
   the padding is in em too: the line crosses the baseline .07em past the text's advance, .16em clear of the 6. Placed
   absolutely, where the text ends and with its foot on the edge's centre line, it leaves the text centred and the
   cell's height alone. Phones have more room beside the 6 and draw the arc and its label larger. */
.angle-mark{position:absolute;bottom:-.5px;width:.53em;height:1.689em;margin-left:-.183em;overflow:visible}
.angle-dim{transform-box:fill-box;transform-origin:0 100%}
.angle-mark path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.angle-mark .label{fill:var(--ink);stroke:none}
.tester-hint{color:var(--muted);margin-left:auto}
/* Zero: the dotted zero as a round solid on a stage, over a panel of controls. Without WebGL the stage sets the
   glyph. One light for all of it, high on the left and a little in front: the solid's shading and contact shadow,
   the highlights on knob, balls and bushings, the slots' inner shadows and every cast shadow, which falls
   down and to the right. */
.zero-device{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.zero-stage{position:relative;aspect-ratio:2/1;background:radial-gradient(55% 70% at 44% 38%,#fbf9f4,rgba(251,249,244,0) 72%)}
.zero-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.zero-stage canvas:active{cursor:grabbing}
.zero-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(220px,32vw,460px);line-height:1;pointer-events:none}
.zero-angle{position:absolute;right:20px;bottom:16px;font-size:13px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none}
.zero-stage:not([data-render="3d"]) .zero-angle{display:none}
.zero-stage[data-render="3d"] .zero-glyph{visibility:hidden}
.zero-stage[data-render="flat"] canvas{display:none}
/* The panel, like 1980s equipment: two levers either side of a machined knob with four detents on a printed 240°
   scale, its sheen fixed to the light and only its pointer turning. */
.zero-panel{display:flex;justify-content:center;align-items:end;gap:clamp(36px,7vw,104px);padding:20px 24px 24px;border-top:1px solid var(--line);background:linear-gradient(180deg,#ebe7de,#ddd7cb);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.panel-group{display:grid;justify-items:center;gap:12px}
.panel-control{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:112px}
.panel-label{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
/* DOT and TURN are levers, as on a control room desk: a black ball on a chrome arm through a slot cut in the
   panel, its rim satin aluminium like the knob, a bushing riding the slot where the arm leaves it,
   and a printed rail beside it with I at the top stop and O at the bottom. Up is on. Pull one past its centre and
   it snaps over. zero.mjs poses the arm, the bushing, the ball and their shadows from the arm's angle; these
   defaults are the lever up. */
/* The pivot sits on the knob's centre line, 48 px times the knob's scale above the controls' foot. */
.lever-mount{position:relative;width:30px;height:120px;margin-bottom:-12px}
.lever-scale{position:absolute;top:0;width:24px;height:120px;overflow:visible}
.lever-mount[data-side="left"] .lever-scale{right:calc(100% - 2px)}
.lever-mount[data-side="right"] .lever-scale{left:calc(100% - 2px)}
.lever{--ball:-32.1px;--ball-scale:1.056;--cross:-10.1px;--arm-top:-32.1px;--arm-height:22.1px;--arm-shade:0.55;--shadow-x:5.9px;--shadow-y:9.9px;--shadow-blur:3.1px;--trail:13.6px;--trail-angle:-154deg;position:absolute;inset:14px 0;display:block;padding:0;border:0;border-radius:11px;background:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.lever-gate{position:absolute;left:50%;top:50%;width:16px;height:64px;margin:-32px 0 0 -8px;border-radius:8px;background:linear-gradient(162deg,#f4f1ec,#c9c2b8 22%,#a39c92 48%,#b9b2a8 70%,#d9d3ca);box-shadow:inset 1px 1px 1px rgba(255,255,255,.95),inset -1px -1px 2px rgba(70,60,50,.4),0 0 0 1px #6f665e,2px 3px 5px rgba(30,24,20,.3),1px 1px 2px rgba(30,24,20,.3)}
.lever-slot{position:absolute;inset:4px;border-radius:4px;background:#070505;box-shadow:inset 2px 3px 3px #000,0 0 0 .5px rgba(60,52,46,.6),.5px .5px 0 rgba(255,255,255,.5)}
.lever-bush,.lever-trail,.lever-cast,.lever-arm,.lever-ball{position:absolute;left:50%;top:50%;pointer-events:none}
.lever-bush{width:11px;height:11px;margin:calc(var(--cross) - 5.5px) 0 0 -5.5px;border-radius:50%;background:radial-gradient(circle,#050403 0 24%,#2a2420 31%,rgba(42,36,32,0) 36%),conic-gradient(from 285deg,#8f867d,#f4f0ea 10%,#9c938a 22%,#4c443e 40%,#8f867d 50%,#d6cfc6 60%,#8f867d 72%,#4c443e 90%,#8f867d);box-shadow:0 0 0 .5px rgba(0,0,0,.7),1px 1.5px 2px rgba(0,0,0,.6)}
.lever-trail{width:5px;height:var(--trail);margin:var(--cross) 0 0 -2.5px;border-radius:3px;background:rgba(30,22,18,.36);transform-origin:50% 0;transform:rotate(var(--trail-angle));filter:blur(1.2px)}
.lever-cast{width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,22,18,.55),rgba(30,22,18,.26) 62%,rgba(30,22,18,0));transform:translate(var(--shadow-x),calc(var(--ball) + var(--shadow-y))) scale(var(--ball-scale));filter:blur(var(--shadow-blur))}
.lever-arm{width:5px;height:var(--arm-height);margin:var(--arm-top) 0 0 -2.5px;border-radius:2.5px;background:linear-gradient(90deg,#2a2420,#8d847b 16%,#fdfbf7 30%,#cfc8be 40%,#5b534c 60%,#a79e94 80%,#3a332e)}
.lever-arm::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#0d0a09;opacity:var(--arm-shade)}
.lever-ball{width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;transform:translateY(var(--ball)) scale(var(--ball-scale));background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.95) 0 .8px,rgba(255,255,255,0) 2px),radial-gradient(ellipse 30% 20% at 38% 30%,rgba(255,250,242,.42),rgba(255,250,242,0) 100%),radial-gradient(circle at 50% 118%,rgba(240,230,216,.3),rgba(240,230,216,0) 48%),radial-gradient(circle at 40% 34%,#4b413b,#2a231f 32%,#1a1513 60%,#0a0807);box-shadow:inset -1.5px -2px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.7)}
.lever:focus-visible,.panel-knob input:focus-visible~.knob{outline:2px solid var(--focus);outline-offset:5px}
.lever:focus-visible{outline-offset:3px}
.panel-knob{--s:1;position:relative;width:calc(160px * var(--s));height:calc(112px * var(--s))}
.knob-scale{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.knob-scale path,.knob-scale line,.lever-scale line{fill:none;stroke:var(--ink);stroke-width:.8;stroke-linecap:round;opacity:.55}
.knob-scale line.major,.lever-scale line.major{stroke-width:1.5;opacity:1}
.knob-scale text,.lever-scale text{font-size:10px;letter-spacing:.04em;text-anchor:middle;dominant-baseline:central;fill:var(--muted);cursor:pointer;transition:fill 160ms}
.knob-scale text[data-on],.lever-scale text[data-on]{fill:var(--ink);font-weight:600}
.knob,.panel-knob input{position:absolute;left:50%;top:57.14%;transform:translate(-50%,-50%)}
.panel-knob input{width:calc(64px * var(--s) + 16px);height:calc(64px * var(--s) + 16px);margin:0;opacity:0;cursor:pointer;z-index:1}
/* Satin aluminium: a knurled skirt and a spun cap. Below 2x a finer knurl and the cap's spinning lines alias into
   moiré, so they wait for a dense screen. */
.knob{--knurl:2.5deg;--spun:none;width:calc(64px * var(--s));height:calc(64px * var(--s));border-radius:50%;background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%,rgba(40,30,24,.28)),repeating-conic-gradient(#9a938a 0 var(--knurl),#cdc7be var(--knurl) calc(2 * var(--knurl)));box-shadow:0 0 0 1px #6f665e,4px 7px 12px rgba(30,24,20,.36),1px 2px 3px rgba(30,24,20,.36)}
@media(min-resolution:2dppx){.knob{--knurl:2deg;--spun:repeating-radial-gradient(circle,rgba(255,255,255,.14) 0 .4px,rgba(80,70,60,.045) .4px .9px)}}
.knob::before,.knob::after{content:'';position:absolute;inset:calc(6px * var(--s));border-radius:50%}
.knob::before{background:var(--spun),conic-gradient(from 285deg,#bdb6ac,#fcfaf6 10%,#cac3b9 22%,#99928a 40%,#bdb6ac 50%,#ece7df 60%,#bdb6ac 72%,#99928a 90%,#bdb6ac);box-shadow:inset 1px 1px 1px rgba(255,255,255,.95),inset -1px -1px 2px rgba(70,60,50,.4),0 0 0 1px rgba(70,62,55,.55),0 1px 2px rgba(40,30,24,.3)}
.knob::after{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.32),rgba(255,255,255,0) 42%);pointer-events:none}
.knob-pointer{position:absolute;inset:0;z-index:1;transform:rotate(var(--turn,-120deg));transition:transform 300ms cubic-bezier(.3,1.35,.5,1)}
.knob-pointer::after{content:'';position:absolute;left:50%;top:calc(10px * var(--s));width:3px;height:calc(15px * var(--s));margin-left:-1.5px;border-radius:2px;background:linear-gradient(90deg,#b4470b,#e8700f 45%,#ffa640);box-shadow:0 0 0 .5px rgba(100,40,6,.65)}
.tester-controls{display:flex;align-items:center;gap:32px;flex-wrap:wrap;border-block:1px solid var(--line);padding:20px 0;margin-bottom:22px;font-size:15px}
.switch{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px}
.switch label{position:relative}
.switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.switch span{display:block;padding:8px 14px;border-radius:5px;font-size:15px;line-height:1.3;-webkit-user-select:none;user-select:none}
.switch label:hover span{background:var(--panel)}
.switch input:checked+span{background:var(--ink);color:var(--paper)}
.switch input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.switch input[value="500"]+span{font-weight:500}
.switch input[value="600"]+span{font-weight:600}
.switch input[value="700"]+span{font-weight:700}
.style-switch span{font-style:italic}
.language-switch span{padding:7px 10px;font-size:14px;letter-spacing:.04em}
/* Only the slider takes the pointer: its caption and readout are plain text, not a label to click. */
.size-control{display:flex;align-items:center;gap:14px;flex:1;min-width:240px}
.size-control>input{flex:1;width:150px;min-width:60px}
.size-control>output{min-width:4em;text-align:right;font-variant-numeric:tabular-nums}
.type-canvas{border-radius:8px;background:var(--panel);padding:36px;min-height:330px}
/* Italic j reaches .11em left of its origin and T, V, W .06em past their advance. Side padding keeps that ink inside the editable box,
   which some browsers clip to; the negative margin keeps the text where it was. */
.type-editor{font:400 104px/1.18 'DINDOT',sans-serif;letter-spacing:-.02em;white-space:pre-wrap;overflow-wrap:anywhere;min-height:250px;padding:12px .14em;margin-inline:-.14em;caret-color:var(--focus)}
.type-editor:focus{outline:0}
.use-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
.use-wide{grid-column:1/-1}
.use-shot a{display:block;border-radius:8px}
.use-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:var(--panel)}
.use-shot figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.history-book img{width:100%;border-radius:8px}
.history-book figcaption{display:grid;grid-template-columns:1fr 2fr;gap:40px;font-size:14px;color:var(--muted);line-height:1.6;padding:20px 0 0}
.history-book figcaption>span:first-child{font-weight:500;color:var(--ink)}
.history-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;margin:72px 0 0;padding:0}
.history-timeline li{display:grid;align-content:start;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.history-timeline li>span{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.history-timeline h3{font-size:26px}
.history-timeline p{font-size:17px}
.history-timeline a{width:fit-content;font-size:14px}
/* A link to an image shows the image on hover or focus; a click still opens it full size. */
.peek{position:relative}
.peek-image{position:absolute;left:0;bottom:calc(100% + 14px);z-index:6;width:min(440px,calc(100vw - 2 * var(--gutter)));padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px -18px rgb(51 42 38 / .45);opacity:0;transform:translateY(6px);transition:opacity 160ms ease-out,transform 160ms ease-out;pointer-events:none}
.peek-image img{width:100%;border-radius:4px}
.peek:hover .peek-image,.peek:focus-visible .peek-image{opacity:1;transform:none}
@media(hover:none){.peek-image{display:none}}
.famous-dins{margin-top:100px}
.famous-dins-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:32px}
.famous-dins-heading h3{font-size:clamp(36px,4.1vw,68px);letter-spacing:-.02em}
.famous-dins-heading p{max-width:420px}
.famous-dins-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.famous-dins-grid li{display:grid;gap:10px;align-content:start;padding:24px;background:var(--panel);border-radius:8px}
.famous-dins-grid svg{display:block;width:100%;height:auto;margin-bottom:14px}
.famous-dins-grid .micro{color:var(--muted)}
.famous-dins-grid h4{font-size:26px;font-weight:500;line-height:1.1}
.famous-dins-grid p{font-size:16px;line-height:1.5}
.section-note{font-size:15px;line-height:1.6;color:var(--muted)}
.history-note{margin-top:50px;max-width:900px}
/* Fire, GetDot's brand gradient. */
.download{background:var(--fire-gradient);color:#2a1a10;padding:48px 44px 40px;border-radius:12px;margin-inline:var(--gutter)}
.download-main{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:36px;border-bottom:1px solid rgb(42 26 16 / .28)}
.download h2{font-size:clamp(70px,12vw,200px);letter-spacing:-.04em;line-height:.9}
.download-button{--settle:cubic-bezier(.22,1,.36,1);display:grid;grid-template-columns:auto auto;align-items:center;column-gap:40px;row-gap:2px;padding:18px 18px 18px 28px;border-radius:16px;background:var(--ink);color:var(--paper);text-decoration:none;transition:transform 120ms var(--settle)}
.download-label{font-size:28px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.download-meta{grid-row:2;font-size:14px;color:#cdc2b4;font-variant-numeric:tabular-nums}
.download-arrow{position:relative;grid-column:2;grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fire-gradient);color:#2a1a10;font-size:26px}
.download-arrow>span{position:relative;top:-.215em;transition:transform 380ms var(--settle)}
.download-arrow::after{content:"";position:absolute;left:50%;top:37.5px;width:16px;height:2.5px;margin-left:-8px;border-radius:1.25px;background:currentColor;clip-path:inset(0 50%);transition:clip-path 380ms var(--settle)}
:is(.download-button,.header-download):is(:hover,:focus-visible) .download-arrow>span{transform:translateY(2px)}
:is(.download-button,.header-download):is(:hover,:focus-visible) .download-arrow::after{clip-path:inset(0);transition-delay:60ms}
.download-button:active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){.download-button,.header-download,.download-arrow>span,.download-arrow::after{transition:none}}
.download-button:focus-visible{outline:2px solid #2a1a10;outline-offset:4px}
.download-note{padding-top:24px;font-size:16px;max-width:640px}
.site-footer{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-block:40px 48px;font-size:14px;color:var(--muted)}
.site-footer>div{display:flex;gap:24px}
@media(min-width:1900px){body{max-width:2000px;margin-inline:auto}
.hero{--mark:465px}
}
@media(max-width:1100px){.famous-dins-grid,.history-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
.history-timeline{row-gap:40px}
}
@media(max-width:1050px){.section-heading>p{max-width:340px}
}
@media(max-width:760px){:root{--site-header:61px}html{scroll-padding-top:64px}
.site-header{padding-top:10px}
.hero{--mark:24.5vw;padding-top:30px;padding-bottom:60px}
.hero-caption{grid-template-columns:minmax(0,1fr);gap:20px;font-size:18px}
.hero-caption p:first-child{font-size:min(34px,10vw)}
.weights,.zero,.tester,.glyphs,.in-use,.history{padding-block:50px}
.tester{padding-top:0}
.section-heading{flex-direction:column;align-items:start;gap:18px;margin-bottom:30px}
.section-heading h2{font-size:44px}
.section-heading>p{max-width:500px;font-size:18px}
.weight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.weight-grid p{font-size:44px}
.angle-dim{transform:scale(1.3)}
.weight-grid p:not(:nth-child(4n)){border-right:0}
.weight-grid p:nth-child(odd){border-right:1px solid var(--line)}
.weight-grid p:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--line)}
.zero-stage{aspect-ratio:1}
.zero-panel{gap:16px;padding:16px 10px 20px}
.panel-knob{--s:.84}
.lever-mount{margin-bottom:-19.7px}
.zero-angle{right:14px;bottom:12px}
.tester-controls{gap:16px 24px}
.size-control{flex:1 1 100%}
.tester-controls>.switch{width:100%}
.tester-controls>.switch label{flex:1}
.tester-controls>.switch span{padding:8px 4px;text-align:center}
.tester-controls>.style-switch{width:auto}
.tester-controls>.style-switch span{padding:8px 18px}
.tester-hint{margin-left:0}
.type-canvas{padding:24px;min-height:280px}
.type-editor{min-height:220px}
.use-gallery{grid-template-columns:1fr;gap:28px}
.history-book figcaption{grid-template-columns:1fr;gap:8px}
.history-timeline{grid-template-columns:1fr;margin-top:48px}
.famous-dins{margin-top:56px}
.famous-dins-heading{flex-direction:column;align-items:start;gap:18px;margin-bottom:24px}
.famous-dins-grid{grid-template-columns:1fr}
.famous-dins-grid svg{max-width:280px;margin:0 auto 10px}
.download{padding:28px 24px 24px}
.download-main{flex-direction:column;align-items:stretch;gap:30px;padding-bottom:30px}
.download h2{font-size:17vw}
.download-button{grid-template-columns:1fr auto}
.site-footer{padding-block:32px 40px}
}
@media(max-width:359px){.angle-dim{transform:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
@media print{.site-header,.tester-controls,.download,.site-footer{display:none!important}
body{background:white}
.page-gutter{padding-inline:0}
.hero{--mark:130px}
.hero-caption{grid-template-columns:minmax(0,1fr);gap:12px}
.hero-caption p:first-child{font-size:28px}
section{break-inside:avoid}
}
/* Credits and license: pages beside the specimen, in its type, rules and header. The header adds one link home,
   which ends in the font's own dot while hovered or focused. Their columns share the thirds of the history
   caption, a third for the name and two for the words. */
.home-link{margin-right:auto;font-size:18px;font-weight:500;letter-spacing:-.01em;text-decoration:none}
.home-link::after{content:'.';opacity:0;transition:opacity 160ms ease-out}
.home-link:is(:hover,:focus-visible)::after{opacity:1}
.site-footer a[aria-current]{color:var(--ink);text-decoration:none}
/* The title pulls back by L's and M's side bearing (.079em in Regular), so its stem stands on the gutter. */
.page-hero{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-block:clamp(40px,6vw,96px) clamp(56px,6vw,96px)}
.page-hero h1{font-size:clamp(64px,9.6vw,168px);letter-spacing:-.035em;line-height:.9;margin-left:-.079em}
.page-lead{width:min(400px,100%);font-size:22px;line-height:1.4;text-wrap:pretty}
.page-section{padding-block:80px;border-top:1px solid var(--line)}
.page-section .section-heading>p{width:min(400px,100%)}
.lineage,.source-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.lineage li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:4px;align-items:baseline;padding-block:22px 36px;border-top:1px solid var(--line)}
.lineage-year{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.lineage h3{grid-column:1;grid-row:2;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.02em}
.lineage-text{grid-column:2;grid-row:1/3;display:grid;gap:6px;max-width:620px}
.lineage-who{font-size:22px;font-weight:500;line-height:1.3}
.lineage-text a{width:fit-content;margin-top:8px;font-size:14px}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.tool-grid>div{display:grid;align-content:start;gap:12px;padding:22px 28px 32px;border-bottom:1px solid var(--line)}
.tool-grid>div:nth-child(3n+1){padding-left:0}
.tool-grid>div:not(:nth-child(3n)){border-right:1px solid var(--line)}
.tool-grid dt{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.tool-grid dd{margin:0;font-size:22px;line-height:1.35}
.tool-grid a{text-decoration-color:var(--line)}
.tool-grid a:hover{text-decoration-color:var(--focus)}
.tool-note{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--muted)}
.source-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:40px;row-gap:10px;align-items:baseline;padding-block:22px 28px;border-top:1px solid var(--line)}
.source-list h3{font-size:20px;font-weight:500;line-height:1.3}
.source-list p{grid-column:2;max-width:620px;font-size:17px}
.source-list a{grid-column:2;width:fit-content;font-size:14px}
.license-summary{padding-bottom:80px}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.summary-grid>div{display:grid;align-content:start;gap:14px;padding:28px 28px 32px;border-radius:8px;background:var(--panel)}
.summary-grid h3{font-size:26px;font-weight:500;line-height:1.1}
.summary-grid p{font-size:18px}
.summary-note{margin-top:20px}
.license-copyright{display:grid;gap:22px}
.copyright-lines{font-size:clamp(22px,2.1vw,32px);line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere}
.copyright-lines a{color:var(--muted);text-decoration-color:var(--line)}
.license-copyright>p:last-child{max-width:620px;font-size:17px;color:var(--muted)}
/* The license as SIL publishes it, word for word: its headings as tracked capitals, which stay beside their
   text while it scrolls, and the conditions' numbers hung in the margin. */
.ofl{border-bottom:1px solid var(--line)}
.ofl-part{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:40px;align-items:baseline;padding-block:26px 40px;border-top:1px solid var(--line)}
.ofl-part>h3{position:sticky;top:84px;font-size:14px;font-weight:600;letter-spacing:.15em;line-height:1.6}
.ofl-head{padding-bottom:26px}
.ofl-head>p,.ofl-body{font-size:18px;line-height:1.65}
.ofl-body{display:grid;gap:1em;max-width:38em}
.ofl dfn{font-style:normal;font-weight:500}
.ofl-conditions{display:grid;gap:1em;list-style:none;margin:0;padding:0}
.ofl-conditions li{position:relative}
.ofl-conditions span{position:absolute;right:calc(100% + .6em);font-weight:500;font-variant-numeric:tabular-nums}
.ofl-caps{font-size:15px;line-height:1.8;letter-spacing:.03em}
@media(max-width:760px){.home-link{font-size:17px}
.page-hero{flex-direction:column;align-items:start;gap:20px;padding-block:28px 48px}
.page-hero h1{font-size:min(64px,16vw)}
.page-lead{font-size:19px}
.page-section{padding-block:50px}
.license-summary{padding-bottom:50px}
.lineage li,.source-list li,.ofl-part{grid-template-columns:minmax(0,1fr)}
.lineage h3,.lineage-text,.source-list p,.source-list a{grid-column:1;grid-row:auto}
.lineage li{grid-template-rows:none;padding-block:18px 28px}
.lineage h3{margin-bottom:8px;font-size:40px}
.lineage-who{font-size:20px}
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-grid>div,.tool-grid>div:nth-child(3n+1){padding:16px 16px 20px}
.tool-grid>div:nth-child(odd){padding-left:0}
.tool-grid>div:not(:nth-child(3n)){border-right:0}
.tool-grid>div:nth-child(odd){border-right:1px solid var(--line)}
.tool-grid>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.tool-grid dd{font-size:18px}
.tool-note{font-size:14px}
.summary-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.summary-grid>div{padding:22px 22px 26px}
.copyright-lines{font-size:20px}
.ofl-part{row-gap:12px;padding-block:22px 30px}
.ofl-part>h3{position:static}
.ofl-head>p,.ofl-body{font-size:17px}
.ofl-conditions li{padding-left:1.8em}
.ofl-conditions span{right:auto;left:0}
}
@media print{.page-section,.license-summary{break-inside:auto}
.ofl-part{break-inside:avoid}
.ofl-part>h3{position:static}
.summary-grid>div{background:none;border:1px solid var(--line)}
}