@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@112,600;125,700&family=IBM+Plex+Serif:wght@400;600&family=Source+Sans+3:wght@400;600&display=swap');
/* Palette: cool paper, graphite ink, one rust accent #B8461B (about 4.8:1 on paper). Spacing scale: 8/16/24/32/48/72/112 only. */
:root{--paper:#f7f7f4;--ink:#16181d;--mute:#4f5560;--hair:#d5d7da;--acc:#b8461b;
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:112px;--gut:16px;--pad:max(16px,4vw);--frame:1200px;--fs:18px}
@media(min-width:640px){:root{--gut:24px}}@media(min-width:900px){:root{--fs:19.5px}}
html.lg{--fs:21px}@media(min-width:900px){html.lg{--fs:22px}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs)/1.55 'Source Sans 3',system-ui,sans-serif;font-variant-numeric:lining-nums;overflow-wrap:break-word}
p{margin:0 0 16px}p:last-child{margin-bottom:0}a{color:var(--acc);text-underline-offset:3px;text-decoration-thickness:1px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 16px;z-index:9}.skip:focus{left:8px}
/* ONE FRAME: 4 cols/16px phone, 8 cols/24px from 640, 12 cols/24px from 1024. Gutters in px so text size never moves rails. */
.frame{width:100%;max-width:calc(var(--frame) + 2*var(--pad));margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut)}
@media(min-width:640px){.frame{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(min-width:1024px){.frame{grid-template-columns:repeat(12,minmax(0,1fr))}}
.frame>*{grid-column:1/-1;min-width:0}.sub{display:grid;grid-template-columns:subgrid;column-gap:var(--gut)}
.cap{font-family:Archivo,sans-serif;font-stretch:112%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:17px;line-height:1.3}
h1,h2,h3{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;line-height:1.15;margin:0;text-wrap:wrap}
header.top{padding:var(--s3) 0;border-bottom:1px solid var(--hair)}header.top .frame{align-items:center;row-gap:var(--s2)}
.mark{align-self:center;font-family:Archivo,sans-serif;font-stretch:125%;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:17px;color:var(--ink);text-decoration:none;white-space:nowrap}.mark i{font-style:normal;color:var(--acc)}.mark img{vertical-align:-8px;margin-right:var(--s1)}
header .frame>nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
nav a{color:var(--ink);text-decoration:none;font-size:max(17px,.95rem)}nav a:hover{color:var(--acc)}nav a[aria-current]{color:var(--acc);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media(min-width:640px){header .frame>.mark{grid-column:1/span 4}header .frame>nav{grid-column:5/-1;justify-content:flex-end}}
@media(min-width:1024px){header .frame>.mark{grid-column:1/span 5}header .frame>nav{grid-column:6/-1}}
.ts{display:inline-flex;gap:var(--s1);align-items:baseline}.ts button{font:600 17px/1 'Source Sans 3',sans-serif;background:none;border:0;color:var(--mute);min-width:44px;min-height:44px;padding:0 var(--s1);cursor:pointer;text-underline-offset:6px}.ts button[data-s=lg]{font-size:22px}.ts button[aria-pressed=true]{color:var(--acc);text-decoration:underline;text-decoration-thickness:2px}
main{padding-bottom:var(--s7)}
/* HERO: eyebrow, h1 and dek share the left rail */
.eyebrow{margin-top:var(--s6);margin-bottom:0;color:var(--mute)}
.hero{margin-top:var(--s2);font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;max-width:none}
.dek{margin:var(--s4) 0 0;font-size:1.12em;color:var(--mute);max-width:none}@media(min-width:1024px){.dek{columns:2;column-gap:var(--gut);orphans:1;widows:1}}
/* STATS: 2 cols (last spans) below 640, 5 equal from 640 */
.chorus{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3) var(--gut);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--ink)}
.chorus div{grid-column:span 2}.chorus div:nth-child(n+4){grid-column:span 3}@media(min-width:640px){.chorus{grid-template-columns:repeat(5,minmax(0,1fr))}.chorus div,.chorus div:nth-child(n+4){grid-column:auto}}
.chorus b{display:block;font:600 2.4rem/1 'IBM Plex Serif',serif;font-variant-numeric:tabular-nums lining-nums}.chorus span{display:block;margin-top:var(--s1);color:var(--mute);font-size:17px}
/* FINDER */
.finder{margin-top:var(--s6);row-gap:var(--s1);align-items:end}.finder label{grid-column:1/-1}#q,#c,#n{grid-column:1/-1}
@media(min-width:640px){#q{grid-column:1/span 5}#c{grid-column:6/-1}}@media(min-width:1024px){#q{grid-column:1/span 8}#c{grid-column:9/-1}}
#n{color:var(--mute);font-size:17px;margin:0}
input,select,textarea,button.b{font:inherit;font-size:max(17px,1rem);padding:8px 16px;border:1px solid #9aa0a8;background:#fff;color:var(--ink);border-radius:0;width:100%;min-height:48px}
button.b{width:auto;background:var(--ink);color:#fff;border-color:var(--ink)}button:disabled{opacity:.6}
/* INDEX: 1/2/3 cards (span 4 of 4/8/12). Subgrid rows so each row's parts share baselines. */
.index{margin-top:var(--s4);row-gap:var(--s5)}
.card{grid-column:span 4;display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--ink);align-content:start}
.card>*{margin:0}.card .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s2);align-items:baseline}
.card h3{font-size:1.4rem}.card h3 a{color:var(--ink);text-decoration:none}.card h3 a:hover{color:var(--acc);text-decoration:underline}
.broke b{display:block;color:var(--acc);font-weight:600;margin-bottom:var(--s1)}
.data{font-size:17px;color:var(--mute);font-variant-numeric:tabular-nums}.data dt{display:inline;font-weight:600;color:var(--ink)}.data dd{display:inline;margin:0}.data dd:after{content:"";display:block}
.pd{color:var(--mute);font-style:italic}
.st{white-space:nowrap;font-size:17px;color:var(--mute)}.st:before{content:"";display:inline-block;width:.55em;height:.55em;border:1.5px solid currentColor;border-radius:50%;margin-right:.4em;vertical-align:.05em}
.st.ok{color:var(--acc)}.st.ok:before{background:currentColor}
.slot{grid-column:span 4;grid-row:span 5;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px dashed var(--ink)}
.slot>*{margin:0}.slot p{max-width:56ch}@media(min-width:1024px){.slot{grid-column:span 8}}
@media(max-width:639px){.card,.slot{grid-row:auto;display:flex;flex-direction:column}}
/* HOW THIS IS MADE */
.made{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--ink);row-gap:var(--s3)}
.made h2{grid-column:1/-1;font-size:1.8rem}.made .prose,.made .key{grid-column:1/-1}.made .prose{max-width:66ch}
@media(min-width:1024px){.made .prose{grid-column:1/span 7}.made .key{grid-column:9/-1}}
.key{margin:0}.key dt{margin-top:var(--s2)}.key dt:first-child{margin-top:0}.key dd{margin:var(--s1) 0 0;color:var(--mute)}
/* BUILD PAGE: 8fr table / 4fr meta on the same rails */
.crumb{margin:var(--s5) 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s3);color:var(--mute)}
.btitle{margin-top:var(--s2);font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance;max-width:none}
.table{margin:var(--s5) 0 0}.table dt,.table dd{grid-column:1/-1;margin:0}
.table dt{padding-top:var(--s3);border-top:1px solid var(--hair);color:var(--mute)}.table dd{padding:var(--s1) 0 var(--s3);max-width:72ch}
.side{margin-top:var(--s5);align-self:start;display:grid;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--ink)}.side dl{margin:0}.side dd{margin:var(--s1) 0 0}
@media(min-width:640px){.table dt{grid-column:1/span 3;padding-bottom:var(--s3)}.table dd{grid-column:4/-1;border-top:1px solid var(--hair);padding-top:var(--s3)}}
@media(min-width:1024px){.table{grid-column:1/span 8}.table dt{grid-column:1/span 3}.table dd{grid-column:4/span 5}.side{grid-column:9/-1;position:sticky;top:var(--s3)}}
.subhead{margin-top:var(--s6);font-size:1.8rem}.formwrap{margin-top:var(--s4);display:grid;gap:var(--s3);max-width:72ch}
footer{padding:0 0 var(--s7);color:var(--mute)}footer .frame{row-gap:var(--s4);align-items:start}
footer .frame::before{content:"";grid-column:1/-1;border-top:1px solid var(--ink);margin-bottom:var(--s3)}
footer .fbrand,footer .fm,footer .fnav{grid-column:1/-1}footer .fbrand p{margin-top:var(--s2)}footer .fm .sc{font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:19px;color:var(--ink);margin:0}footer .fm .fst{font-size:16px;margin-top:var(--s1)}
.fnav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}.fnav a{color:var(--ink);text-decoration:none;font-size:17px}.fnav a:hover{color:var(--acc);text-decoration:underline}
@media(min-width:640px){footer .fbrand{grid-column:1/-1}footer .fm{grid-column:1/span 6}footer .fnav{grid-column:7/-1;flex-direction:column}}
@media(min-width:1024px){footer .fbrand{grid-column:1/span 4}footer .fm{grid-column:5/span 6}footer .fnav{grid-column:11/-1}}
.spine{padding-bottom:0}.spinewrap{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:var(--s6);border-top:1px solid var(--ink)}.spinewrap>.sl,.spinewrap>.sr{padding-bottom:var(--s7)}
.sl{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-content:start}.sl>*{grid-column:1/-1}

.sr{grid-column:1/-1;position:relative;display:grid;align-content:start;gap:var(--s5);border-top:1px solid var(--ink);padding-top:var(--s4)}
.shoplist{margin-top:0;display:grid;grid-template-columns:subgrid;row-gap:var(--s6)}
.shop{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--s2);padding-top:var(--s4)}.shop+.shop{border-top:1px solid var(--ink)}.shop>*{grid-column:1/-1;margin:0}
.shop .meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s1) var(--s2)}.shop h2{font-size:1.8rem;margin-top:var(--s1)}.shop h2 a{color:var(--ink)}
.runs{margin-top:var(--s2)!important}.runs b{display:block;margin-bottom:var(--s1)}
.shop ul{display:grid;grid-template-columns:subgrid;margin:0;padding:0;list-style:none}.shop li{grid-column:1/-1;padding:var(--s1) 0;border-top:1px solid var(--hair)}
@media(min-width:640px){.shop li{grid-column:span 4}}
.sr .slot{grid-column:auto;grid-row:auto;border-top:1px solid var(--ink);padding-top:var(--s3)}.sr .slot:first-child{border-top:0;padding-top:0}
@media(min-width:1024px){.sl{grid-column:1/span 8}.sr{grid-column:9/-1;border-top:0;padding-top:var(--s4)}
.sr::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut) / -2);border-left:1px solid var(--ink)}}
.top nav a,.fnav a,a.mark,.card h3 a,.crumb a{display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}