@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-400-700.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0E0D0C;--graphite:#1B1917;--bone:#EDE8E1;--ash:#A29B93;--rust:#C15F3C;--line:#2C2925;
  --serif:"Instrument Serif",Georgia,serif;--sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:20px;--col:440px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100dvh}
.page{width:100%;max-width:calc(var(--col) + var(--gutter)*2);margin:0 auto;padding:16px var(--gutter) 32px}
.page.wide{--col:560px}
a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--rust)}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* who: the same photo and handle that sign every carousel */
.who{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--sans)}
.who img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1.5px var(--rust);display:block}
.who a{text-decoration:none}

/* the word they just commented, set to the full column width */
.echo{margin-top:18px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.keyword{--size:min(calc((100vw - var(--gutter)*2)/(var(--len)*.5)),calc(var(--col)/(var(--len)*.5)));font:italic 400 var(--size)/.92 var(--serif);color:var(--rust);white-space:nowrap;margin:6px 0 10px -.02em;letter-spacing:-.01em}
h1{font:400 clamp(34px,9.6vw,44px)/1.04 var(--serif);letter-spacing:-.005em}
.bullets{list-style:none;padding:0;margin:14px 0 20px}
.bullets li{position:relative;padding-left:18px;margin-top:7px;font-size:15.5px;line-height:1.35}
.bullets li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--rust)}

/* form: one bordered block, label and input share a row */
.fields{border:1px solid var(--line);border-radius:10px;background:var(--graphite);overflow:hidden}
.field{display:flex;align-items:center;min-height:52px}
.field+.field{border-top:1px solid var(--line)}
.field label{flex:0 0 58px;padding-left:14px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.field input{flex:1;min-width:0;height:52px;border:0;background:transparent;color:var(--bone);font:400 17px/1 var(--sans);padding:0 14px 0 8px;outline:0;border-radius:0}
.field:focus-within{box-shadow:inset 3px 0 0 var(--rust)}
.btn{display:block;width:100%;margin-top:10px;min-height:54px;padding:15px 18px;border:0;border-radius:10px;background:var(--rust);color:var(--ink);font:600 17px/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#CE6C48}
.btn[disabled]{background:var(--graphite);color:var(--ash);cursor:not-allowed;border:1px solid var(--line)}
.privacy{margin-top:10px;font-size:13px;line-height:1.4;color:var(--ash)}
.error{margin-top:10px;font-size:14px;color:var(--bone)}
.done{border:1px solid var(--rust);border-radius:10px;padding:18px}
.done h2{font:400 30px/1.05 var(--serif)}
.done p{margin-top:8px;font-size:15.5px}
[hidden]{display:none!important}

/* setup page */
.lede{margin-top:10px;font-size:17px;line-height:1.45}
.note{margin-top:18px;padding:14px 16px;background:var(--graphite);border-radius:10px;font-size:15px}
.note h2{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:8px}
.note p+p{margin-top:8px}
section{margin-top:38px}
section>h2{font:400 32px/1.05 var(--serif)}
section>p{margin-top:6px;color:var(--ash);font-size:15px}
.steps{list-style:none;padding:0;margin:16px 0 0;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding:0 0 18px 36px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:1px;font:700 14px/1.5 var(--mono);color:var(--rust)}
.steps h3{font:600 16.5px/1.35 var(--sans)}
.steps p{margin-top:3px;font-size:15.5px}
code{font:400 .9em/1.4 var(--mono);background:var(--graphite);padding:.1em .35em;border-radius:4px;overflow-wrap:anywhere}
.code{position:relative;margin-top:8px}
.code small{display:block;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-bottom:5px}
.code pre{background:var(--graphite);border:1px solid var(--line);border-radius:8px;padding:12px 12px 42px;white-space:pre-wrap;overflow-wrap:anywhere}
.code pre code{background:none;padding:0;font-size:13.5px}
.copy{position:absolute;right:6px;bottom:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--ink);color:var(--bone);font:400 11px/1 var(--mono);cursor:pointer}
.tips{list-style:none;padding:0;margin:14px 0 0}
.tips li{padding:12px 0;border-top:1px solid var(--line);font-size:15.5px}
.tips strong{display:block;font-weight:600}
.offer{margin-top:38px;padding:20px 18px;background:var(--graphite);border-radius:12px}
.offer h2{font:400 30px/1.05 var(--serif)}
.offer p{margin:6px 0 14px}
.sources{margin-top:22px;font-size:13px;color:var(--ash)}
footer{margin-top:30px;font:500 14px/1.6 var(--sans);color:var(--ash)}

/* hub: the keywords are the menu */
.hub-lede{margin-top:10px;color:var(--ash)}
.list{list-style:none;padding:0;margin:24px 0 0}
.list li{border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list a{display:block;padding:16px 26px 16px 0;position:relative;text-decoration:none}
.list a::after{content:"\2192";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--rust);font:400 18px/1 var(--mono)}
.list b{display:block;font:italic 400 40px/1 var(--serif);color:var(--rust);letter-spacing:-.005em}
.list span{display:block;margin-top:5px;font-size:15px}

@media (min-width:700px){.page{padding-top:48px}}