:root{--paper:#F6F1E8;--paper-2:#EDE4D5;--card:#FFFDF9;--ink:#23262B;--ink-2:#4B4F57;--muted:#857F75;--line:#D8CCB8;--line-2:#B9AA92;
--blue:#2F7FA8;--blue-dk:#1F4E66;--blue-soft:#E1EEF5;--oak:#C9AE83;--walnut:#3A2A1E;--rose:#A33A4A;
--disp:"Fraunces",Georgia,serif;--body:"Poppins",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue-dk)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* the book */
.book{max-width:1180px;margin:0 auto;padding:26px 22px 60px;display:grid;grid-template-columns:1fr 64px;gap:0}
@media (max-width:860px){.book{grid-template-columns:1fr;padding:14px 12px 40px}}
.page{background:var(--card);border:2px solid var(--walnut);border-radius:6px 0 0 6px;min-width:0;position:relative;padding:34px 48px 40px 78px}
@media (max-width:860px){.page{border-radius:6px;padding:26px 18px 30px}}
/* binder rings (drawn) */
.rings{position:absolute;left:22px;top:40px;bottom:40px;display:flex;flex-direction:column;justify-content:space-between}
.rings i{width:26px;height:26px;border-radius:50%;background:var(--paper-2);border:2px solid var(--walnut);box-shadow:inset 0 2px 0 rgba(0,0,0,.15)}
@media (max-width:860px){.rings{display:none}}
/* index tabs on the right edge */
.tabs{display:flex;flex-direction:column;gap:8px;padding-top:40px}
.tabs a{writing-mode:vertical-rl;text-decoration:none;font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:2px solid var(--walnut);border-radius:0 8px 8px 0;padding:16px 10px;margin-left:-2px}
.tabs a .n{font-family:var(--mono);font-weight:400;color:var(--muted);margin-bottom:8px}
.tabs a:hover{background:var(--blue-soft)}
.tabs a[aria-current="page"]{background:var(--blue-dk);color:#fff}
.tabs a[aria-current="page"] .n{color:#BFDDEE}
@media (max-width:860px){.book{display:flex;flex-direction:column-reverse}.tabs{flex-direction:row;padding:0 0 10px;overflow-x:auto;gap:6px}.tabs a{writing-mode:horizontal-tb;border-radius:8px;margin:0;padding:8px 12px;white-space:nowrap}.tabs a .n{margin:0 6px 0 0}}
/* running head */
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.head .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.head .who b{color:var(--ink);font-weight:500}
.head .plate{font-family:var(--mono);font-size:.7rem;border:2px solid var(--line-2);border-radius:999px;padding:3px 12px;color:var(--ink-2)}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);font-weight:500;margin:0 0 16px}
h1 em{font-style:italic;color:var(--blue-dk)}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;margin:0 0 10px}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:66ch;color:var(--ink-2)}
.lede{font-size:1.1rem;color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ev{display:inline-block;font-family:var(--mono);font-size:.7rem;color:var(--ink-2);background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;line-height:1.7;margin-top:10px}
.sec{margin-top:48px}
/* sample chips (the signature component) */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
@media (max-width:860px){.chips{grid-template-columns:1fr 1fr}}
.chipc{border:2px solid var(--walnut);border-radius:8px;overflow:hidden;background:var(--card);position:relative}
.chipc .wood{height:74px}
.chipc .hole{position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--walnut)}
.chipc .t{padding:12px 14px}
.chipc .n{font-family:var(--disp);font-size:2rem;font-weight:600;line-height:1}
.chipc .l{font-size:.8rem;color:var(--ink-2);margin-top:6px;line-height:1.4}
.w1{background:repeating-linear-gradient(88deg,#A98B5E 0 1px,transparent 1px 7px),linear-gradient(100deg,#C9AE83,#A98B5E)}
.w2{background:repeating-linear-gradient(92deg,#3A2113 0 1px,transparent 1px 6px),linear-gradient(100deg,#5A3620,#3A2113)}
.w3{background:repeating-linear-gradient(86deg,#CDB488 0 1px,transparent 1px 8px),linear-gradient(100deg,#E7D3AE,#CDB488)}
.w4{background:repeating-linear-gradient(90deg,#20160F 0 2px,transparent 2px 9px),linear-gradient(100deg,#3B2A1E,#20160F)}
/* spread: two-page layout */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
@media (max-width:760px){.spread{grid-template-columns:1fr}}
.leaf{border:2px solid var(--line-2);border-radius:8px;padding:20px;background:var(--paper)}
.leaf.now{background:#fff}
.leaf .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.facets{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.facets span{font-size:.84rem;border:2px solid var(--walnut);border-radius:999px;padding:4px 12px}
.facets span.off{border-color:var(--line);color:var(--muted);text-decoration:line-through}
.facets span.on{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}
.quote{border:2px solid var(--blue-dk);border-radius:8px;background:var(--blue-soft);padding:18px 20px;margin-top:22px}
.quote p{font-family:var(--disp);font-style:italic;font-size:1.3rem;color:var(--ink);margin:0 0 6px}
.quote small{font-family:var(--mono);font-size:.7rem;color:var(--ink-2)}
/* atlas */
.atlas{border:2px solid var(--walnut);border-radius:8px;overflow:hidden;margin-top:20px}
.atlas-top{background:var(--walnut);color:#F6F1E8;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.atlas-top b{font-family:var(--disp);font-size:1.4rem;font-weight:500}
.live{font-family:var(--mono);font-size:.76rem;color:#E9DCC6}
.live b{font-family:var(--disp);font-size:1.2rem;color:#fff}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--paper)}
@media (max-width:760px){.filters{grid-template-columns:1fr 1fr}}
.fg{border:2px solid var(--line-2);border-radius:8px;padding:10px;background:#fff}
.fg .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{appearance:none;cursor:pointer;font-family:var(--body);font-size:.8rem;border:2px solid var(--walnut);border-radius:999px;background:#fff;color:var(--ink);padding:3px 10px}
.opt:hover{border-color:var(--blue)}
.opt[aria-pressed="true"]{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:14px}
.pl{border:2px solid var(--walnut);border-radius:8px;overflow:hidden;background:#fff}
.pl .sw{height:86px}
.pl .b{padding:10px 12px}
.pl .nm{font-family:var(--disp);font-size:1.12rem;font-weight:600}
.pl .sp{font-size:.74rem;font-style:italic;color:var(--muted)}
.pl .at{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pl .at span{font-family:var(--mono);font-size:.64rem;border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--ink-2)}
.pl .url{font-family:var(--mono);font-size:.62rem;color:var(--blue);margin-top:6px;word-break:break-all}
.empty{grid-column:1/-1;border:2px solid var(--line-2);border-radius:8px;padding:18px;color:var(--ink-2)}
/* mobile patch */
.gauge{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
@media (max-width:760px){.gauge{grid-template-columns:1fr 1fr}}
.gv{border:2px solid var(--walnut);border-radius:8px;padding:14px;background:#fff;text-align:center}
.gv .v{font-family:var(--disp);font-size:2rem;font-weight:600;color:var(--rose);line-height:1}
.gv .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.edits{display:grid;gap:10px;margin-top:18px}
.ed{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;border:2px solid var(--line-2);border-radius:8px;padding:12px 14px;background:#fff}
.ed .i{width:32px;height:32px;border-radius:50%;border:2px solid var(--blue-dk);display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:var(--blue-dk)}
.ed b{font-weight:600}
.ed .r{font-family:var(--mono);font-size:.7rem;color:#fff;background:var(--blue-dk);border-radius:999px;padding:2px 10px;white-space:nowrap}
@media (max-width:520px){.ed{grid-template-columns:36px 1fr}.ed .r{grid-column:2;justify-self:start}}
.weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media (max-width:760px){.weeks{grid-template-columns:1fr}}
.wk{border:2px solid var(--walnut);border-radius:8px;overflow:hidden;background:#fff}
.wk .top{padding:12px 16px;color:#fff;font-family:var(--disp);font-size:1.3rem}
.wk:nth-child(1) .top{background:var(--blue-dk)} .wk:nth-child(2) .top{background:var(--blue)} .wk:nth-child(3) .top{background:var(--walnut)}
.wk .top small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.wk ul{margin:0;padding:14px 16px 14px 32px}.wk li{font-size:.88rem;color:var(--ink-2);margin:.35em 0}
.method{border:2px solid var(--line-2);border-radius:8px;padding:20px;margin-top:40px;background:var(--paper)}
.turn{display:flex;justify-content:flex-end;margin-top:36px}
.turn a{text-decoration:none;font-weight:600;color:#fff;background:var(--blue-dk);border:2px solid var(--blue-dk);border-radius:999px;padding:11px 20px}
.turn a:hover{background:#fff;color:var(--blue-dk)}
.colophon{margin-top:44px;border:2px solid var(--walnut);border-radius:8px;padding:22px;display:grid;grid-template-columns:1.3fr 1fr;gap:18px;background:var(--paper-2)}
@media (max-width:760px){.colophon{grid-template-columns:1fr}}
.colophon h3{font-size:1.5rem;margin-bottom:6px}
.colophon p{font-size:.88rem}
.colophon .ln{display:flex;flex-direction:column;gap:8px}
.colophon .ln a{font-family:var(--mono);font-size:.8rem;text-decoration:none;color:var(--ink);border:2px solid var(--walnut);border-radius:6px;padding:8px 12px;background:#fff}
.colophon .ln a:hover{border-color:var(--blue);color:var(--blue-dk)}
.colophon .disc{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.8;margin:0}