/* ══ CHAPTER PAGES ═══════════════════════════════════════════════════════ Shared by every generated chapter page, and by nothing else. The landing page keeps its own inline CSS: it is one document that must paint on the first byte, where these are hundreds of documents that should share one cached file. Tokens, faces and the ruled sheet are copied from landing/index.html deliberately rather than imported. The two are meant to look like one site — if a token changes there it has to change here too, and that is a smaller cost than making the landing page depend on a stylesheet it currently does not need. */ @font-face{font-family:'Martian Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/martian-mono-latin-700-normal.woff2) format('woff2');} @font-face{font-family:'Martian Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/martian-mono-latin-500-normal.woff2) format('woff2');} @font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dancing-script-latin-700-normal.woff2) format('woff2');} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --pink:#D6156B;--pink-deep:#B81159;--pink-light:#f8bbd0;--pink-wash:#fdf2f6; --vermilion:#d1495b; --bg:#ffffff;--bg-soft:#f4f4f5;--panel:#ffffff; --glass:rgba(0,0,0,0.025);--glass2:rgba(0,0,0,0.045); --seam:rgba(0,0,0,0.11);--seam2:rgba(0,0,0,0.16); --rule:rgba(0,0,0,0.075); --text:#191A1C;--text-soft:#3A3B40;--text-dim:#4C4D53;--text-muted:#5F6067; --fd:'Martian Mono',ui-monospace,monospace; --fb:'Plus Jakarta Sans',system-ui,sans-serif; --fw:'Dancing Script',cursive;--fw-ink:#D6156B; --shadow-btn:0 1px 2px rgba(0,0,0,.14); --ease-out:cubic-bezier(.16,.84,.34,1); --sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px); --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px); --pad:18px;--nav-h:58px;--fs-body:15.5px; color-scheme:light; } @media(min-width:768px){:root{--pad:22px;--nav-h:64px;--fs-body:16px}} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip} /* No background on body. html already paints the page white, and a second white box here sits directly on top of .sheetbg at z-index:-1 — the rules and the margin rule then only show below where body ends, which looks like the sheet failing to load rather than being covered. */ body{color:var(--text);font-family:var(--fb);font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:none} ::selection{background:var(--pink-light);color:var(--text)} :focus-visible{outline:2.5px solid var(--pink);outline-offset:3px;border-radius:6px} [id]{scroll-margin-top:calc(var(--nav-h) + 14px)} .wrap{max-width:820px;margin:0 auto;padding-left:calc(var(--pad) + var(--sa-l));padding-right:calc(var(--pad) + var(--sa-r))} /* The ruled sheet runs the whole document, same as the home page. */ .sheetbg{position:fixed;inset:0;z-index:-1;pointer-events:none; background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px)} .sheetbg::after{content:"";position:absolute;top:0;bottom:0;left:max(calc(var(--sa-l) + 7px),calc(50vw - 430px));width:1.5px;background:var(--vermilion);opacity:.45} /* ══ NAV ══ */ nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--seam);padding-top:var(--sa-t)} .navin{display:flex;align-items:center;gap:10px;height:var(--nav-h);max-width:820px;margin:0 auto;padding-left:calc(var(--pad) + var(--sa-l));padding-right:calc(var(--pad) + var(--sa-r))} .brand{display:flex;align-items:center;gap:9px;min-height:44px} .wordmark{font-family:var(--fw);color:var(--fw-ink);text-transform:lowercase;font-weight:700;font-size:24px;line-height:1.15;white-space:nowrap} .navcta{margin-left:auto} /* ══ BUTTONS ══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:13px 24px;border-radius:3px;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:-.02em;text-align:center;transition:transform .18s var(--ease-out),background .18s ease;-webkit-tap-highlight-color:transparent} .btn-primary{background:var(--pink);color:#fff;box-shadow:var(--shadow-btn)} .btn-ghost{background:transparent;color:var(--text-soft);border:1px solid var(--seam2)} .btn-sm{min-height:44px;padding:10px 16px;font-size:13px;border-radius:3px} @media(hover:hover){.btn-primary:hover{background:var(--pink-deep);transform:translateY(-2px)}.btn-ghost:hover{background:var(--glass2);transform:translateY(-2px)}} .btn:active{transform:translateY(0) scale(.985)} /* ══ PAGE HEAD ══ */ main{padding:clamp(26px,5vw,44px) 0 clamp(52px,9vw,80px)} .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-family:var(--fb);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px} /* the breadcrumb is a