@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/BricolageGrotesque.woff2") format("woff2");font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/InstrumentSans.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/JetBrainsMono.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
:root{--paper:#F2EFE6;--ink:#111110;--signal:#E8402A;--rule:#D6D1C4;--dim:#6B675C;--gutter:clamp(1rem,3vw,3rem);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",Arial,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
body.invert{--paper:#111110;--ink:#F2EFE6;--rule:#3D3A34;--dim:#B8B2A5;color-scheme:dark}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select{font:inherit;color:inherit}
button{border:0;border-radius:0;background:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.skip-link{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.55rem .8rem;background:var(--paper);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.meta,.eyebrow,label,.axis-value,.button,.code,.glyph-char,.site-nav{font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
.shell{padding-inline:var(--gutter)}
.site-header{height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-inline:var(--gutter)}
.wordmark{font-family:"Bricolage Grotesque",sans-serif;font-size:25px;font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 700;text-decoration:none;letter-spacing:-.06em}
.wordmark sup{display:inline-block;margin-left:.22em;color:var(--signal);font:8px/1 "JetBrains Mono",monospace;letter-spacing:0;vertical-align:top}
.site-nav{display:flex;gap:clamp(.8rem,2.5vw,2rem)}
.site-nav a{text-decoration:none}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:.5em}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.page-head{min-height:45vh;padding-block:clamp(4rem,10vw,9rem);align-items:end;border-bottom:1px solid var(--rule)}
.page-head h1{grid-column:1/10;margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(3.8rem,11vw,10rem);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 700;line-height:.82;letter-spacing:-.065em}
.page-head p{grid-column:10/-1;margin:0;color:var(--dim)}
.section{padding-block:clamp(4rem,8vw,8rem);border-bottom:1px solid var(--rule)}
.section-title{grid-column:1/4;margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.5rem,2.5vw,2.6rem);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 700;line-height:1}
.section-body{grid-column:5/11;max-width:62ch}
.section-body>p:first-child{margin-top:0}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.7rem .9rem;border:1px solid currentColor;cursor:pointer;text-decoration:none}
.button:hover{border-color:var(--signal)}
.site-footer{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:2rem var(--gutter);font-size:.85rem;color:var(--dim)}
.site-footer p{margin:0}.site-footer p:first-child{grid-column:1/8}.site-footer p:last-child{grid-column:9/-1;text-align:right}

/* landing */
.hero{height:calc(100svh - 68px);min-height:550px;position:relative;border-bottom:1px solid var(--rule);overflow:hidden}
.hero-letter{position:absolute;inset:-16vh -4vw auto auto;font-family:"Bricolage Grotesque",sans-serif;font-size:min(110vh,82vw);line-height:.9;letter-spacing:-.11em;pointer-events:none}
.hero-copy{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(2rem,6vw,5rem);width:min(53rem,88vw)}
.hero h1{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(3rem,8vw,8rem);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 700;line-height:.84;letter-spacing:-.06em}
.hero p{max-width:38ch;margin:1.4rem 0 0;color:var(--dim)}
.catalogue-head{display:flex;justify-content:space-between;padding:1rem var(--gutter);border-bottom:1px solid var(--rule)}
.catalogue-row{display:block;position:relative;height:clamp(8rem,17vw,16rem);overflow:hidden;border-bottom:1px solid var(--rule);text-decoration:none}
.catalogue-name{display:block;white-space:nowrap;font-size:clamp(5rem,14vw,14rem);line-height:.9;letter-spacing:-.065em;transition:font-variation-settings 240ms ease;transform:translateX(-.03em)}
.catalogue-row[data-family="recursive"] .catalogue-name{font-family:"Recursive",sans-serif;font-variation-settings:"MONO" 0,"CASL" .25,"wght" 500,"slnt" 0,"CRSV" 0}
.catalogue-row[data-family="fraunces"] .catalogue-name{font-family:"Fraunces",serif;font-optical-sizing:none;font-variation-settings:"opsz" 72,"wght" 500}
.catalogue-row[data-family="bricolage-grotesque"] .catalogue-name{font-family:"Bricolage Grotesque",sans-serif;font-optical-sizing:none;font-variation-settings:"opsz" 72,"wdth" 85,"wght" 450}
.catalogue-row[data-family="instrument-serif"] .catalogue-name{font-family:"Instrument Serif",serif}
.catalogue-row[data-family="recursive"]:hover .catalogue-name{font-variation-settings:"MONO" 0,"CASL" 1,"wght" 850,"slnt" -8,"CRSV" 1}
.catalogue-row[data-family="fraunces"]:hover .catalogue-name{font-variation-settings:"opsz" 144,"wght" 850}
.catalogue-row[data-family="bricolage-grotesque"]:hover .catalogue-name{font-variation-settings:"opsz" 96,"wdth" 100,"wght" 750}
.catalogue-meta{position:absolute;right:var(--gutter);bottom:.8rem;padding:.2rem;background:var(--paper);text-align:right}
.arguments{padding-block:clamp(5rem,10vw,10rem)}
.arguments h2{grid-column:1/4;margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(2.5rem,6vw,6rem);font-weight:700;font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 700;line-height:.9;letter-spacing:-.02em}
.arguments div{grid-column:5/12;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.arguments p{margin:0}

/* specimens */
.family-recursive{--specimen:"Recursive"}.family-fraunces{--specimen:"Fraunces"}.family-bricolage-grotesque{--specimen:"Bricolage Grotesque"}.family-instrument-serif{--specimen:"Instrument Serif"}
.specimen{font-family:var(--specimen),serif;font-optical-sizing:none}
.page-head h1.specimen{font-family:var(--specimen),serif}
.waterfall{grid-column:4/-1;overflow:hidden}
.waterfall p{margin:0;white-space:nowrap;line-height:1.25;letter-spacing:-.02em}.waterfall .s72{font-size:72px}.waterfall .s48{font-size:48px}.waterfall .s32{font-size:32px}.waterfall .s24{font-size:24px}.waterfall .s18{font-size:18px}.waterfall .s14{font-size:14px}
.playground{grid-column:4/-1}
.editable{min-height:2.3em;margin:0 0 3rem;font-size:clamp(4rem,11vw,10rem);line-height:.85;letter-spacing:-.045em;overflow-wrap:anywhere}
.axis-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem var(--gutter);padding-top:1.5rem;border-top:1px solid var(--rule)}
.axis-control{display:grid;grid-template-columns:4rem 1fr 4rem;align-items:center;gap:1rem}
.axis-value{text-align:right;font-variant-numeric:tabular-nums}
input[type="range"]{width:100%;height:20px;margin:0;accent-color:var(--signal)}
.css-output{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.css-output pre{margin:0;padding:.9rem;overflow-x:auto;background:transparent;border:1px solid var(--rule);font:12px/1.5 "JetBrains Mono",monospace;text-transform:none}
.button-row{display:flex;flex-wrap:wrap;gap:.7rem}.copy-status{min-height:1.5em;border-left:2px solid var(--signal);padding-left:.5rem}
.glyphs{grid-column:4/-1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.glyph-button{aspect-ratio:1;display:grid;place-items:center;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);font:clamp(1.35rem,3vw,2.5rem)/1 var(--specimen),serif;cursor:pointer}
.glyph-button:hover{color:var(--signal)}
.glyph-dialog{position:fixed;z-index:20;inset:0 0 0 auto;width:min(620px,100%);height:100%;padding:clamp(1rem,4vw,3rem);border:0;border-left:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.glyph-dialog::backdrop{background:rgb(17 17 16/.45)}
.glyph-dialog-head{display:flex;justify-content:space-between;align-items:center}
.glyph-large{display:grid;place-items:center;min-height:60vh;margin:0;font:320px/.8 var(--specimen),serif}
.paragraphs{grid-column:4/-1}.paragraphs p{max-width:62ch}.paragraphs .p24{font-size:24px}.paragraphs .p18{font-size:18px}.paragraphs .p14{font-size:14px}
.credit-block{grid-column:4/11}.credit-block p{max-width:62ch}.credit-block .button{margin-top:1rem}

/* tester */
.tester-page{min-height:100svh;display:grid;grid-template-rows:auto auto 1fr}.tester-toolbar{display:grid;grid-template-columns:2fr repeat(3,1fr) auto auto;gap:1rem;padding:1rem var(--gutter);border-bottom:1px solid var(--rule);align-items:end}.tester-control{display:grid;gap:.35rem}.tester-control select{height:36px;border:1px solid var(--rule);border-radius:0;background:var(--paper)}
.align-buttons{display:flex}.align-buttons .button{min-width:42px;padding:.4rem}.align-buttons .active{border-color:var(--signal);text-decoration:underline;text-decoration-color:var(--signal)}
.tester-stage{padding:clamp(1rem,5vw,5rem);overflow:auto}.tester-text{min-height:60vh;margin:0;outline:0;font-family:"Recursive",sans-serif;font-size:96px;line-height:1;letter-spacing:0;overflow-wrap:anywhere}

@media (max-width:800px){
 .site-header{height:auto;min-height:64px}.site-nav{gap:.8rem}.site-nav a:first-child{display:none}
 .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.page-head h1{grid-column:1/-1}.page-head p{grid-column:1/-1;margin-top:1rem}.section-title{grid-column:1/-1;margin-bottom:2rem}.section-body,.waterfall,.playground,.glyphs,.paragraphs,.credit-block{grid-column:1/-1}
 .catalogue-row{height:8rem}.catalogue-name{font-size:20vw}.catalogue-meta{font-size:9px}
 .arguments h2{grid-column:1/-1;margin-bottom:3rem}.arguments div{grid-column:1/-1;grid-template-columns:1fr}.arguments p+ p{margin-top:1.5rem}
 .axis-controls{grid-template-columns:1fr}.glyphs{grid-template-columns:repeat(5,1fr)}.waterfall{margin-right:calc(var(--gutter) * -1)}
 .css-output{grid-template-columns:1fr}.css-output>div{min-width:0}.button-row{flex-wrap:wrap}
 .site-footer p:first-child,.site-footer p:last-child{grid-column:1/-1;text-align:left}.site-footer p:last-child{margin-top:1rem}
 .tester-toolbar{grid-template-columns:1fr 1fr}.tester-toolbar .tester-control:first-child{grid-column:1/-1}.tester-text{font-size:64px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.catalogue-name{transition:none!important}}