/* fontTLV: ink on paper. Black and white only (15.11.2026). */
@font-face{font-family:"Frank TLV";src:url(/assets/fonts/FrankTLV-Regular.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+0020-0040,U+005B-0060,U+007B-007E,U+2010-2027}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/LibreCaslonText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/LibreCaslonText-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--paper:#f4f1ea;--ink:#16140f;--mute:#6b665c;--rule:#d8d2c5;--card:#faf8f3;
  --serif:"Frank TLV","Libre Caslon Text","Times New Roman",serif;--latin:"Libre Caslon Text","Times New Roman",serif;--ui:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --w:72rem;--gut:max(16px,env(safe-area-inset-left,0px))}
@media (prefers-color-scheme:dark){:root{--paper:#15130f;--ink:#efe9dc;--mute:#a19a8b;--rule:#34302a;--card:#1c1a15;color-scheme:dark}}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1875rem/1.6 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
img{max-width:100%;display:block}
.wrap{max-width:var(--w);margin-inline:auto;padding-left:var(--gut);padding-right:max(16px,env(safe-area-inset-right,0px))}
.ui{font-family:var(--ui);font-size:.82rem;letter-spacing:.02em}
.lat{font-family:var(--latin)}
.mute{color:var(--mute)}

/* header */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo img{height:30px;width:auto}
.logo .d{display:none}
@media (prefers-color-scheme:dark){.logo .l{display:none}.logo .d{display:block}}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--ui);font-size:.9rem}
.nav a{text-decoration:none}.nav a:hover,.nav a[aria-current]{text-decoration:underline}

/* hero */
.hero{padding-block:clamp(48px,9vw,120px) clamp(32px,6vw,72px)}
.hero h1{font-weight:400;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1.05;margin:0 0 .3em;text-wrap:balance}
.hero p{font-size:clamp(1.15rem,2vw,1.4rem);max-width:34em;margin:0}
.kicker{font-family:var(--ui);font-size:.85rem;color:var(--mute);margin:0 0 18px}

/* sections */
section{padding-block:clamp(36px,6vw,72px);border-top:1px solid var(--rule)}
h2{font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h3{font-weight:400;font-size:1.5rem;margin:0 0 .3em}
p{max-width:38em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.card{background:var(--card);border:1px solid var(--rule);padding:22px;min-width:0;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.card .big{font-size:clamp(2.6rem,6vw,3.6rem);line-height:1.1}
.tag{display:inline-block;font-family:var(--ui);font-size:.75rem;border:1px solid currentColor;padding:2px 8px;letter-spacing:.04em}
.verse{font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.45;max-width:none}

/* tester */
.tester{display:grid;gap:12px}
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:var(--ui);font-size:.85rem}
.controls input[type=range]{width:min(16rem,60vw);accent-color:var(--ink)}
.sample{font-family:"Frank TLV",serif;font-size:var(--sz,64px);line-height:1.35;outline:none;border:1px solid var(--rule);background:var(--card);padding:.35em .5em;min-height:2em;overflow-wrap:anywhere}
.sample:focus{border-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:.95rem;padding:12px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn[aria-disabled=true]{background:transparent;color:var(--ink);cursor:default}
.specimen{font-size:clamp(1.05rem,1.6vw,1.2rem);columns:2 22rem;column-gap:3rem}
.specimen p{max-width:none;margin:0 0 1em}
.abc{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.4;word-spacing:.15em;max-width:none}

/* footer */
footer{border-top:1px solid var(--rule);padding-block:28px;font-family:var(--ui);font-size:.85rem;color:var(--mute)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* coming soon */
.soon{min-height:100svh;display:grid;place-items:center;text-align:center;padding:24px}
.soon img{width:min(30rem,82vw);margin-inline:auto}
.soon p{margin:28px auto 0;font-size:1.25rem}

/* waitlist */
.wl{display:grid;gap:10px;max-width:40rem;margin-top:18px}
.wl .row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.wl label{display:grid;gap:4px;font-family:var(--ui);font-size:.85rem;flex:1 1 14rem;min-width:0}
.wl input[type=email],.wl input[type=tel]{font:1rem var(--ui);padding:11px 12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:0;width:100%}
.wl input:focus{outline:2px solid var(--ink);outline-offset:1px}
.wl .ck{display:flex;gap:8px;align-items:flex-start;flex:none}
.wl .ck input{margin-top:3px;accent-color:var(--ink)}
.wl .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.wl.removing .join-only{display:none}
.wl button[disabled]{opacity:.5}

/* catalogue and font pages */
.spec{display:block;width:100%;height:auto;max-height:9rem;color:var(--ink)}
.fontcard .sp{min-height:4.2rem;display:flex;align-items:center}
.fontcard .sp .spec{max-height:3.6rem;width:auto;max-width:100%}
.fontcard h3{margin:4px 0 0}
.specbox{padding-block:12px;border-bottom:1px solid var(--rule)}
.specbox .spec{max-height:none}
.two{display:grid;gap:32px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.facts{margin:0;display:grid;gap:12px;font-family:var(--ui);font-size:.9rem;align-content:start}
.facts div{border-top:1px solid var(--rule);padding-top:8px}.facts dt{color:var(--mute)}.facts dd{margin:2px 0 0}
.list{max-width:38em;padding-inline-start:1.2em}.list li{margin-bottom:.4em}
.manifesto p{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.6;max-width:32em}