:root {
  --abitaro-ivory:#FFFEF8;
  --abitaro-sand:#EFE8DA;
  --abitaro-gray-sand:#D0CBC0;
  --abitaro-dark-olive:#2D2201;
  --abitaro-pistachio:#F0FCE2;
  --abitaro-olive:#745F37;
  --paper:var(--abitaro-ivory);
  --ink:var(--abitaro-dark-olive);
  --muted:var(--abitaro-olive);
  --accent:var(--abitaro-olive);
  --rule:var(--abitaro-gray-sand);
  color-scheme:light;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Abitaro Sans",sans-serif; font-weight:400; font-size:16px; line-height:1.5; font-kerning:normal; font-variant-ligatures:common-ligatures contextual; font-feature-settings:"ss02" 1,"cv06" 1,"cv13" 1; letter-spacing:normal; overflow-wrap:anywhere; }
::selection { background:var(--abitaro-pistachio); color:var(--ink); }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; font-feature-settings:inherit; color:inherit; }
button,select { border:1px solid var(--rule); background:transparent; border-radius:3px; padding:9px 13px; }
button { cursor:pointer; }
button:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
input[type=checkbox] { accent-color:var(--accent); width:17px; height:17px; margin:0; flex-shrink:0; }
input[type=range] { accent-color:var(--accent); width:100%; margin:10px 0 0; }
.wrap { max-width:1488px; margin-inline:auto; padding-inline:clamp(24px,5vw,80px); }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:104px; border-bottom:1px solid var(--rule); }
.wordmark { display:block; flex-shrink:0; width:128px; text-decoration:none; line-height:1; }
.wordmark img { display:block; width:100%; height:auto; }
nav { display:flex; flex-wrap:wrap; gap:25px; }
nav a,.download { font-size:14px; text-decoration:none; }
.download { border-bottom:1px solid var(--ink); padding-bottom:6px; white-space:nowrap; }
.download span { margin-left:20px; }
.hero { padding-top:46px; }
.eyebrow { color:var(--accent); font-size:14px; font-weight:650; margin:0 0 20px; }
.hero>.eyebrow { display:flex; justify-content:space-between; gap:16px; }
h1 { font-size:clamp(68px,12.2vw,183px); font-weight:200; line-height:1.14; margin:45px 0 36px; }
.hero-bottom { display:grid; grid-template-columns:1.1fr 1fr .65fr; align-items:center; gap:36px; }
.hero-bottom>p:first-child { font-size:clamp(23px,2.55vw,37px); line-height:1.3; margin:0; }
.hero-description { max-width:33ch; color:var(--muted); font-size:17px; }
.hero-glyph { font-size:clamp(70px,9vw,130px); line-height:1; text-align:right; color:var(--accent); }
.hero-foot { display:flex; justify-content:space-between; gap:24px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--rule); padding:48px 0 20px; }
.section { padding-top:88px; padding-bottom:72px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:42px; }
h2 { font-weight:500; font-size:clamp(36px,4.4vw,64px); line-height:1.13; margin:0; }
.section-heading>p { font-size:15px; color:var(--muted); margin:0; max-width:36ch; }
h3 { font-size:23px; font-weight:550; line-height:1.3; margin:0 0 22px; }
.tester-tools { display:grid; grid-template-columns:1.1fr 1fr 1fr auto; align-items:center; gap:32px; padding:22px 0; border-block:1px solid var(--rule); }
.tester-tools label { font-size:13px; }
.tester-tools output { float:right; }
.select-label { display:flex; align-items:center; gap:14px; white-space:nowrap; }
select { min-width:0; width:100%; }
#sample { display:block; width:100%; min-height:230px; padding:35px 0 22px; border:0; border-radius:0; background:transparent; resize:vertical; font-size:64px; font-weight:400; line-height:1.3; overflow-wrap:anywhere; font-kerning:normal; letter-spacing:normal; }
#sample:focus { outline-offset:12px; }
.tester-caption { display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--rule); padding:16px 0; }
.control-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; padding-top:26px; }
.control-groups fieldset { border:0; padding:0; margin:0; min-width:0; }
.control-groups legend { font-size:16px; font-weight:650; padding:0; margin-bottom:14px; }
.control-groups label { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13px; min-height:32px; cursor:pointer; }
.control-groups code { margin-left:auto; color:var(--muted); font-size:10px; }
.control-groups details { margin-top:14px; }
summary { cursor:pointer; font-size:14px; }
.feature-note,.caption { color:var(--muted); font-size:13px; line-height:1.6; max-width:78ch; }
.feature-note { margin:26px 0; }
code,pre { font-feature-settings:normal; font-variant-ligatures:none; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.85em; }
.css-panel { border-block:1px solid var(--rule); padding:15px 0; }
.css-content { display:flex; align-items:start; gap:24px; justify-content:space-between; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.8; }
.css-content button { margin-top:16px; white-space:nowrap; font-size:12px; }
#copy-status:empty { display:none; }
#copy-status { font-size:13px; }
.weight-list>div { display:grid; grid-template-columns:165px 1fr; align-items:baseline; gap:32px; padding:19px 0; border-top:1px solid var(--rule); }
.weight-list>div:last-child { border-bottom:1px solid var(--rule); }
.weight-list>div>span { font-size:14px; }
.weight-list small { display:inline-block; margin-left:14px; color:var(--muted); font-size:12px; }
.weight-list p { font-size:clamp(26px,4.25vw,60px); line-height:1.3; margin:0; }
.reading-band { background:linear-gradient(180deg,var(--abitaro-sand) 0%,var(--paper) 100%); color:var(--ink); padding-block:80px; }
.reading-band .eyebrow,.reading-band .size-label { color:var(--accent); }
.reading-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.reading-grid h2 { font-size:clamp(50px,6vw,84px); }
.reading-deck { font-size:24px; max-width:25ch; margin-top:30px; }
.reading-copy { font-size:20px; line-height:1.65; max-width:50ch; }
.reading-copy>p { margin-top:0; }
.size-label { font-size:12px; margin:0 0 16px; }
.small-copy { font-size:14px; line-height:1.7; border-top:1px solid var(--rule); padding-top:25px; margin-top:30px; }
.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; border-block:1px solid var(--rule); padding:34px 0; margin-bottom:60px; }
.metric-strip>div { font-size:clamp(28px,4vw,58px); line-height:1.2; }
.metric-strip small { display:block; margin-top:20px; color:var(--muted); font-size:12px; }
.metric-strip span { color:var(--accent); }
.numbers-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.fraction-line { font-size:clamp(38px,4.5vw,65px); margin:0 0 14px; }
.fraction-line.smaller { font-size:clamp(31px,3.5vw,48px); }
.encoded-fractions { font-size:24px; line-height:1.8; padding-top:15px; }
table { width:100%; border-collapse:collapse; font-size:20px; }
caption { text-align:left; font-size:12px; color:var(--muted); margin-bottom:16px; }
th,td { border-top:1px solid var(--rule); padding:13px 0; text-align:right; }
th { font-weight:400; }
th:first-child { text-align:left; }
thead th { font-size:12px; color:var(--muted); }
.operator-heading { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-top:64px; }
.inline-toggle { display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; }
.operator-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.operator-grid>div { text-align:center; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:26px 8px 18px; }
.operator-grid .operator { display:block; font-size:49px; line-height:1.3; }
.operator-grid code { color:var(--muted); font-size:12px; }
.feature-table-head,.feature-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; align-items:center; }
.feature-table-head { padding:12px 0; font-size:12px; color:var(--muted); }
.feature-row { padding:20px 0; border-top:1px solid var(--rule); }
.feature-row h3 { font-size:15px; margin:0 0 6px; }
.feature-row code { color:var(--muted); }
.feature-row p { font-size:clamp(22px,3.6vw,50px); margin:0; overflow-wrap:anywhere; }
.feature-row p:last-child { color:var(--accent); }
.alphabet-lines { overflow:hidden; }
.alphabet-lines p { font-size:clamp(19px,3.1vw,43px); line-height:1.65; margin:0; overflow-wrap:anywhere; }
.enclosure-row { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:50px; }
.enclosure-row p { font-size:27px; line-height:1.8; overflow-wrap:anywhere; }
.closing { border-block:1px solid var(--rule); padding-block:50px; display:flex; align-items:end; justify-content:space-between; gap:24px; }
.closing p { font-size:clamp(42px,6vw,86px); line-height:1.15; font-weight:500; margin:0; }
.closing p span { color:var(--accent); }
.closing a { font-size:14px; padding-bottom:8px; white-space:nowrap; }
footer { display:flex; justify-content:space-between; align-items:start; gap:30px; padding-block:35px!important; font-size:12px; color:var(--muted); }
footer p { margin:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; left:20px; top:-100px; z-index:5; background:var(--paper); padding:10px; }
.skip:focus { top:20px; }
@media(max-width:900px) { nav { gap:14px; } .hero-bottom { grid-template-columns:1.1fr 1fr; } .hero-glyph { display:none; } .numbers-grid,.reading-grid { gap:36px; } .weight-list>div { grid-template-columns:130px 1fr; gap:18px; } .weight-list small { margin-left:6px; } .tester-tools { gap:20px; } .control-groups { gap:24px; } }
@media(max-width:650px) { .masthead { flex-wrap:wrap; gap:16px; min-height:0; padding-top:24px; padding-bottom:20px; } nav { order:3; width:100%; justify-content:space-between; gap:12px; } nav a { font-size:12px; } .hero { padding-top:28px; } .hero>.eyebrow { font-size:11px; } h1 { font-size:12vw; margin:35px 0 28px; } .hero-bottom { display:block; } .hero-bottom>p:first-child { font-size:28px; } .hero-description { font-size:16px; max-width:40ch; margin-top:24px; } .hero-foot { font-size:10px; padding-top:24px; } .section { padding-top:55px; padding-bottom:48px; } .section-heading { display:block; margin-bottom:30px; } .section-heading>p { margin-top:18px; } .eyebrow { margin-bottom:14px; font-size:12px; } .tester-tools { grid-template-columns:1fr 1fr; gap:20px; } .select-label { grid-column:1/-1; } .tester-tools button { grid-column:1/-1; justify-self:start; } #sample { min-height:220px; } .tester-caption { flex-direction:column; gap:6px; } .control-groups { grid-template-columns:1fr; gap:24px; } .control-groups label { min-height:38px; } .control-groups fieldset { columns:2; column-gap:24px; } .control-groups legend { column-span:all; } .control-groups label { break-inside:avoid; } .control-groups details { column-span:all; } .control-groups details label { max-width:none; } .weight-list>div { display:block; padding:15px 0; } .weight-list p { margin-top:6px; font-size:29px; } .reading-grid,.numbers-grid { grid-template-columns:1fr; gap:40px; } .reading-band { padding-block:52px; } .reading-copy { font-size:18px; } .metric-strip { grid-template-columns:1fr 1fr; gap:32px; margin-bottom:40px; } .metric-strip>div { font-size:39px; } .operator-heading { display:block; margin-top:38px; } .inline-toggle { margin-bottom:20px; } .operator-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .operator-grid .operator { font-size:40px; } .feature-table-head,.feature-row { grid-template-columns:1.1fr 1fr 1fr; gap:12px; } .feature-row h3 { font-size:12px; } .feature-row code { font-size:10px; } .feature-row p { font-size:23px; } .enclosure-row { grid-template-columns:1fr; gap:20px; } .closing { display:block; padding-block:36px; } .closing a { display:inline-block; margin-top:30px; } footer { flex-wrap:wrap; gap:22px; } footer p { order:3; width:100%; } .css-content { display:block; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .masthead nav,.download,.tester-tools,.control-groups,.css-panel,.skip,.inline-toggle,.feature-note { display:none; } .wrap { padding-inline:24px; } .section { padding-block:32px; } .section-heading { break-after:avoid; } .feature-row,.weight-list>div { break-inside:avoid; } .reading-band { color:var(--ink); background:transparent; border-block:1px solid var(--rule); } .reading-band .eyebrow,.reading-band .size-label { color:var(--muted); } h1 { font-size:100px; } }
/* Hairline sliders; the input keeps a comfortable interaction height. */
input[type=range] { -webkit-appearance:none; appearance:none; height:24px; padding:0; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:1px; background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill,50%),var(--rule) var(--fill,50%),var(--rule) 100%); border:0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-6.5px; border:1px solid var(--accent); border-radius:50%; background:var(--paper); box-shadow:none; }
input[type=range]::-moz-range-track { height:1px; background:var(--rule); border:0; }
input[type=range]::-moz-range-progress { height:1px; background:var(--accent); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:1px solid var(--accent); border-radius:50%; background:var(--paper); box-shadow:none; }
@media(max-width:420px) { .control-groups fieldset { columns:1; } }