/* THE GUIDE — read.mmdv.dev A reading surface first. Paper white, warm-black ink, generous air. Deliberately NOT the zinc UI palette of mmdv.dev: that page is a card you glance at, this one is 160,000 words you sit with. ONE COLUMN VARIABLE. --col is set per page type on , and both the header bar and the content read it, so they can never drift out of alignment — which is exactly what they had done before. ONE ACCENT, amber, and it is reserved: it only ever renders something the READER made — a tick, a highlight, a saved chapter. Editorial emphasis uses a drawn underline instead, so colour on the page always means "you did this". Light is the design. Dark is a real night mode (warm dark, not inverted grey) because people read in bed, but every decision was made on paper. */ /* Two accents, and they never do each other's job. Amber is the reader's own mark — highlights, selection, the progress tally. Fuchsia is the publication's voice — the masthead rule, the marks that open a side note, the focus ring. Nothing decorative is drawn in either. */ *,*::before,*::after{box-sizing:border-box;margin:0} :root{ --bg:#fdfdfb;--ink:#212124;--muted:#5f6163;--line:#e6e5e0;--faint:#f2f1ec; --mark:#8d660c;--mark-fill:#e8c25a;--mark-wash:rgba(246,214,120,.55); --rule:#c9c7bf;--em-wash:rgba(120,104,66,.15); --accent:#d61f69; color-scheme:light; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:ui-serif,Charter,"Bitstream Charter","Iowan Old Style",Georgia,Cambria,serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --measure:34rem;--side:14rem;--gap:2.75rem; --pad:clamp(1.1rem,4.5vw,2rem); --col:46rem; --sat:env(safe-area-inset-top,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#1a1a19;--ink:#e3e1da;--muted:#9a978e;--line:#302f2c;--faint:#232220; --mark:#dcb45c;--mark-fill:#8a6c1c;--mark-wash:rgba(180,142,50,.30);--rule:#4a4843;--em-wash:rgba(214,205,180,.15); --accent:#ff6aa5; color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#1a1a19;--ink:#e3e1da;--muted:#9a978e;--line:#302f2c;--faint:#232220; --mark:#dcb45c;--mark-fill:#8a6c1c;--mark-wash:rgba(180,142,50,.30);--rule:#4a4843;--em-wash:rgba(214,205,180,.15); --accent:#ff6aa5; color-scheme:dark; } :root[data-theme="light"]{ --bg:#fdfdfb;--ink:#212124;--muted:#5f6163;--line:#e6e5e0;--faint:#f2f1ec; --mark:#8d660c;--mark-fill:#e8c25a;--mark-wash:rgba(246,214,120,.55);--rule:#c9c7bf;--em-wash:rgba(120,104,66,.15); --accent:#d61f69; color-scheme:light; } /* ---------- drawn rules and frames ---------- Hairlines are what make a text page read as a blog. These are the same rules drawn with a pen: an SVG stretched across the element, so every divider on the site has a slight wobble. Two variants because a data URI cannot inherit currentColor. */ :root{ --drawn-rule:url("data:image/svg+xml;utf8,"); --drawn-box:url("data:image/svg+xml;utf8,"); } :root[data-theme="dark"], :root:not([data-theme="light"]){ --drawn-rule:url("data:image/svg+xml;utf8,"); --drawn-box:url("data:image/svg+xml;utf8,"); } :root[data-theme="light"]{ --drawn-rule:url("data:image/svg+xml;utf8,"); } .rule-drawn{border:0;height:6px;background:var(--drawn-rule) 0 0/100% 6px no-repeat;margin:0} .boxed{border:14px solid transparent;border-image:var(--drawn-box) 26 round;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth; scroll-padding-top:calc(4.5rem + var(--sat))} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{ background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased; min-height:100dvh;display:flex;flex-direction:column; } @media(min-width:768px){body{font-size:17px}} body.reading{--col:var(--measure)} ::selection{background:var(--mark-wash)} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px} .skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--bg);color:var(--ink); padding:.6rem .9rem;border:1px solid var(--ink);border-radius:0 0 5px 0;font-size:.85rem} .skip:focus{left:0} main{display:flex;flex-direction:column;flex:1} /* ---------- the shared column ---------- Everything that should share a left edge reads --col. On wide screens a reading page shifts the whole composition left by half the margin column, so the TEXT stays optically centred once side notes are in the gutter. */ .bar-in,.wrap,footer.site .in{ width:100%;max-width:calc(var(--col) + 2*var(--pad)); margin:0 auto; padding-left:calc(var(--pad) + var(--sal)); padding-right:calc(var(--pad) + var(--sar)); } .wrap{flex:1} .wrap.narrow{max-width:calc(var(--measure) + 2*var(--pad))} @media(min-width:1160px){ body.reading .bar-in,body.reading .wrap,body.reading footer.site .in{ position:relative;left:calc(-1 * (var(--side) + var(--gap)) / 2); } } /* ---------- shell ---------- */ header.bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40; padding-top:var(--sat); background:var(--bg);background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:saturate(1.4) blur(8px)} @supports not (backdrop-filter:blur(1px)){header.bar{background:var(--bg)}} .bar-in{display:flex;align-items:center;gap:.9rem;padding-top:.28rem;padding-bottom:.28rem;min-height:3rem} .brand{font-size:.85rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;flex:none} /* The link strip is the only thing allowed to give way on a narrow screen. It scrolls; search and the theme control stay pinned and reachable. */ .bar .links{display:flex;gap:.95rem;align-items:center;margin-left:auto; overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none} .bar .links::-webkit-scrollbar{display:none} .bar .links a{font-size:.82rem;color:var(--muted);text-decoration:none;white-space:nowrap; padding-block:.72rem;display:inline-flex;align-items:center} .bar .links a:hover,.bar .links a[aria-current]{color:var(--ink)} .acts{display:flex;flex:none;gap:.1rem} /* At phone widths the row has to hold brand + four links + two 42px controls. Shrinking the link type and the gaps buys the ~25px needed, so nothing is clipped and the strip never has to scroll. Tap height stays 44px. */ @media(max-width:640px){ .bar-in{gap:.5rem} .bar .links{gap:.62rem} .bar .links a{font-size:.775rem} .bar .links a[data-home]{display:none} /* the brand already goes home */ .icon-btn{width:2.35rem;height:2.35rem} .acts{gap:0} } @media(max-width:360px){ .brand{font-size:.8rem} .bar .links{gap:.5rem} .bar .links a{font-size:.74rem} } .icon-btn{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem; background:none;border:none;padding:0;cursor:pointer;color:var(--muted);border-radius:3px} .icon-btn:hover{color:var(--ink)} .icon-btn svg{width:1rem;height:1rem;display:block} .i-sun{display:none} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .i-moon{display:none} :root:not([data-theme="light"]) .i-sun{display:block} } :root[data-theme="dark"] .i-moon{display:none} :root[data-theme="dark"] .i-sun{display:block} :root[data-theme="light"] .i-moon{display:block} :root[data-theme="light"] .i-sun{display:none} /* Reading progress. Amber, because it is the reader's own position — the same rule as the tally and the highlights. */ .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent} .progress span{display:block;height:100%;width:0;background:var(--mark-fill); transition:width .12s linear} @media(prefers-reduced-motion:reduce){.progress span{transition:none}} /* A rest between runs of paragraphs, drawn rather than ruled. */ .breather{height:14px;margin:1.5rem 0;background:no-repeat center/64px 14px; background-image:url("data:image/svg+xml;utf8,")} :root[data-theme="dark"] .breather, :root:not([data-theme="light"]) .breather{ background-image:url("data:image/svg+xml;utf8,")} :root[data-theme="light"] .breather{ background-image:url("data:image/svg+xml;utf8,")} footer.site{border-top:1px solid var(--line);margin-top:4.5rem} footer.site .in{padding-top:1.5rem;padding-bottom:calc(1.5rem + var(--sab)); font-size:.78rem;color:var(--muted);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between} footer.site a{text-decoration:underline;text-underline-offset:3px} /* ---------- headings / prose ---------- Serif is the book's own language — titles, prose, the case, the mechanism, the chapter lists. Sans is the guide talking about the book. */ h1{font-family:var(--serif);font-size:clamp(1.45rem,1.15rem + 1.3vw,1.85rem); font-weight:600;letter-spacing:-.012em;line-height:1.22;text-wrap:balance} h2{font-size:1.02rem;font-weight:600;letter-spacing:-.012em} .lede{font-family:var(--serif);font-size:1.05rem;line-height:1.68;color:var(--muted);max-width:var(--measure)} .prose{font-family:var(--serif);max-width:var(--measure); font-size:clamp(1.055rem,1rem + .25vw,1.12rem);line-height:1.66; hanging-punctuation:first last;text-wrap:pretty} .prose p{margin-top:1em} .prose p:first-child{margin-top:0} .prose em{font-style:italic} .prose strong{font-weight:600} /* Named effects, marked once per chapter: the things you would actually revise from. A bordered block rather than a wash, so it stays distinct from the highlight, the reader's own marks and the figures. */ .prose .term{font-weight:600;font-size:.94em;letter-spacing:.005em; border:1px solid var(--rule);border-radius:3px;padding:.02em .3em .06em; background:color-mix(in srgb,var(--ink) 3.5%,transparent); box-decoration-break:clone;-webkit-box-decoration-break:clone} @supports not (background:color-mix(in srgb,red 3%,transparent)){.prose .term{background:none}} mark.em .term{border-color:transparent;background:none;padding:0} /* Figures a reader scans for: heavier, tabular, with a hairline under them so they read as data rather than as emphasis. */ .prose .num{font-weight:600;font-variant-numeric:tabular-nums; border-bottom:1px solid var(--rule);padding-bottom:.03em} mark.em .num{border-bottom:0} .prose blockquote{margin:1.4em 0;padding-left:1.1rem;border-left:2px solid var(--line); color:var(--muted);font-style:italic} /* Reader highlight: amber, because the reader made it. */ mark.hl{background:var(--mark-wash);color:inherit;padding:.05em 0;border-radius:1px;cursor:pointer} /* Editorial emphasis: a drawn underline, never amber — the accent stays the reader's. The stroke is a data URI so it survives the CSP img-src rule. */ mark.em{color:inherit;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone; padding:.08em .14em .1em;margin:0 -.08em;border-radius:2px; background-color:var(--em-wash); padding-bottom:.16em;background-repeat:repeat-x;background-position:0 100%;background-size:auto 5px; background-image:url("data:image/svg+xml;utf8,")} :root[data-theme="dark"] mark.em, :root:not([data-theme="light"]) mark.em{ background-image:url("data:image/svg+xml;utf8,")} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) mark.em{ background-image:url("data:image/svg+xml;utf8,")}} /* ---------- editorial furniture ---------- A kicker, a headline, a deck and a dateline, in that order — the standard newspaper feature opening, because it is the fastest way an eye finds out what a piece is and whether to read it. */ .kicker{font-family:var(--sans);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline} .kicker .sep{color:var(--rule)} .kicker a{text-decoration:none} .kicker a:hover{color:var(--ink)} .deck{font-family:var(--serif);font-size:clamp(1.06rem,1rem + .34vw,1.22rem);line-height:1.48; color:var(--ink);max-width:var(--measure);margin:.85rem 0 0;font-weight:400;text-wrap:pretty} /* The dateline rule: thick over thin, the oldest trick in newspaper setting. */ .dateline{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap; margin:1.15rem 0 1.5rem;padding-top:.6rem;border-top:1px solid var(--line); font-family:var(--sans);font-size:.745rem;color:var(--muted); box-shadow:0 -3px 0 -2px var(--ink)} .dateline .sep{color:var(--rule)} .dateline .ch-tools{margin-left:auto} /* Drop cap. Suppressed on the codex chapters, whose first line is the law. */ .prose.cap > p:first-of-type::first-letter{ float:left;font-size:3.15em;line-height:.8;padding:.06em .09em 0 0;font-weight:600; font-family:var(--serif);color:var(--ink)} .pullquote{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .6vw,1.3rem);line-height:1.42; font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance; border-top:2px solid var(--ink);border-bottom:1px solid var(--line); padding:.85rem 0;margin:1.9rem 0} @media(min-width:1160px){ body.reading .pullquote{float:right;clear:right;width:var(--side); margin:.4rem calc(-1 * (var(--side) + var(--gap))) 1.2rem 1.4rem; font-size:1.02rem;line-height:1.45} } /* ---------- the fact panel: an infographic box, drawn ---------- */ .facts{margin:1.5rem 0 1.9rem;max-width:var(--measure)} .facts .in{padding:.95rem 1.05rem 1rem} .facts .h{font-family:var(--sans);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem} .facts .h::after{content:"";flex:1;height:6px;background:var(--drawn-rule) 0 0/100% 6px no-repeat;opacity:.7} .facts dl{display:grid;grid-template-columns:auto 1fr;gap:.34rem .9rem;margin:0; font-size:.83rem;line-height:1.45} .facts dt{font-family:var(--sans);color:var(--muted);white-space:nowrap} .facts dd{margin:0;font-family:var(--serif);font-size:.92rem} .facts dd b{font-weight:600} @media(min-width:560px){.facts dl{grid-template-columns:auto 1fr auto 1fr}} /* ---------- margin notes: Tufte on wide, inline on narrow ---------- */ .marginnote{font-family:var(--sans);font-size:.775rem;line-height:1.5;color:var(--muted)} @media(max-width:1159px){ .marginnote{margin:1.3rem 0;padding-left:.9rem;border-left:2px solid var(--line);max-width:var(--measure)} } @media(min-width:1160px){ .marginnote{float:right;clear:right;width:var(--side); margin-right:calc(-1 * (var(--side) + var(--gap)));margin-bottom:1.1rem;margin-top:.35rem} } .marginnote b{color:var(--ink);font-weight:600;display:block;margin-bottom:.15rem} /* ---------- margin annotations ---------- On a wide screen these sit in the gutter and a drawn arrow connects each one to the phrase it is about; both are positioned by script, because where a line wraps is not knowable until the browser has laid the text out. Below 1160px there is no gutter, so they become ordinary inline notes and the arrows are never drawn. */ .annot{font-family:var(--sans);font-size:.79rem;line-height:1.5;color:var(--muted); margin:1.1rem 0;padding-left:.85rem;border-left:2px solid var(--accent);max-width:var(--measure)} .annot b{color:var(--ink);font-weight:600} @media(min-width:1160px){ body.reading .ch-body{position:relative} body.reading .annot{position:absolute;width:var(--side);margin:0;padding:0;border:0; right:calc(-1 * (var(--side) + var(--gap)));opacity:0;transition:opacity .25s ease} body.reading .annot.placed{opacity:1} body.reading .annot::before{content:"";display:block;width:30px;height:3px;margin-bottom:.5rem; background:var(--accent)} } .annot-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none; overflow:visible;color:var(--rule);z-index:1} @media(max-width:1159px){.annot-arrows{display:none}} /* ---------- sketch figures ---------- */ figure.fig{margin:1.9rem 0;max-width:var(--measure);padding:.9rem 0 .2rem; border-top:6px solid transparent;border-image:var(--drawn-rule) 3 stretch} figure.fig svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)} figure.fig figcaption{margin-top:.75rem;padding-top:.6rem;font-family:var(--sans);font-size:.775rem; line-height:1.5;color:var(--muted); background:var(--drawn-rule) 0 0/100% 6px no-repeat} figure.fig figcaption b{color:var(--ink);font-weight:600} .fig-wide{max-width:none} @media(min-width:1160px){ body.reading .fig-wide{width:calc(var(--measure) + var(--gap) + var(--side))} } /* ---------- home: the tick roadmap ---------- */ .masthead{position:relative;border-bottom:1px solid var(--ink); padding-bottom:.95rem;margin-top:2.2rem} .masthead::after{content:"";position:absolute;left:0;bottom:7px; width:min(18rem,44%);height:4px;background:var(--accent)} .masthead .strap{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem} .hero{padding:1.5rem 0 1.6rem} .hero h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.35rem);margin-bottom:.5rem} .hero .sub{font-family:var(--serif);font-size:clamp(1.02rem,.98rem + .2vw,1.1rem); line-height:1.62;color:var(--muted);max-width:33rem;margin-bottom:1.1rem;text-wrap:pretty} .counts{font-size:.82rem;color:var(--muted)} .counts b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .howto{font-size:.87rem;line-height:1.6;color:var(--muted);max-width:33rem;margin-top:.7rem} .howto a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)} .howto a:hover{text-decoration-color:var(--ink)} .resume{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap; border:1px solid var(--line);border-radius:5px;padding:.72rem .9rem;margin:1.4rem 0 0; font-size:.85rem;text-decoration:none} .resume:hover{border-color:var(--muted)} .resume .k{color:var(--muted);font-size:.78rem} .resume .t{font-family:var(--serif);font-weight:600;font-size:.95rem} .tier{margin-top:2.4rem} .tier-h{display:flex;align-items:baseline;gap:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--ink)} .tier-h h2{font-size:.95rem} .tier-h .n{font-size:.78rem;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums} .prow{display:grid;grid-template-columns:1.7rem 1fr;gap:.8rem;align-items:start; padding:.8rem 0;border-bottom:1px solid var(--line);text-decoration:none} .prow:hover .ptitle{color:var(--muted)} .prow .pnum{font-family:var(--mono);font-size:.78rem;color:var(--muted); padding-top:.18rem;text-align:right;font-variant-numeric:tabular-nums} .ptitle{font-family:var(--serif);font-size:1.02rem;font-weight:600} .pfocus{font-size:.81rem;color:var(--muted);margin-top:.18rem;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* A tally, not a progress skeleton. Thirty unread chapters render as a row of short baseline strokes; a chapter you have read grows to full height in the accent. Twelve rows of identical grey blocks read as a page still loading. */ .ticks{display:none;grid-template-columns:repeat(30,1fr);margin-top:.6rem;max-width:15rem; height:14px;align-items:end} .ticks i{display:block;width:2px;height:5px;background:var(--line);justify-self:center; transition:height .18s ease,background .18s ease} .ticks i.on{height:14px;background:var(--mark-fill)} @media(min-width:600px){.ticks{display:grid}} .pmeta{font-size:.75rem;color:var(--muted);margin-top:.42rem;font-variant-numeric:tabular-nums} .pbar{height:3px;background:var(--faint);border-radius:2px;margin-top:.5rem;max-width:15rem;overflow:hidden} .pbar span{display:block;height:100%;background:var(--mark-fill);width:0} @media(min-width:600px){.pbar{display:none}} /* ---------- three doors ---------- */ .doors{display:grid;gap:0;margin-top:2.8rem;border-top:1px solid var(--ink)} @media(min-width:640px){.doors{grid-template-columns:repeat(3,1fr);gap:1.6rem}} .door{padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;display:block} .door h3{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-bottom:.22rem} .door p{font-size:.81rem;color:var(--muted);line-height:1.55} .door:hover h3{color:var(--muted)} /* ---------- chapter ---------- */ .ch-top{display:flex;align-items:center;gap:.6rem;padding:1.6rem 0 0;font-size:.8rem;color:var(--muted)} .ch-top a{text-decoration:none} .ch-top a:hover{color:var(--ink)} .ch-tools{margin-left:auto;display:flex;gap:.15rem} .tool{display:inline-flex;align-items:center;gap:.35rem;background:none;border:1px solid transparent; border-radius:4px;padding:.3rem .52rem;cursor:pointer;color:var(--muted);font:inherit;font-size:.78rem} .tool:hover{color:var(--ink);border-color:var(--line)} .tool[aria-pressed="true"]{color:var(--mark);border-color:var(--line)} .tool svg{width:.95rem;height:.95rem} @media(max-width:430px){.tool .lbl{display:none}.tool{padding:.34rem}} .ch-num{font-family:var(--mono);font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums} .ch-head{padding-top:1.7rem;padding-bottom:0} .ch-head h1{margin:.55rem 0 0;font-size:clamp(1.62rem,1.2rem + 1.9vw,2.25rem);letter-spacing:-.019em} .ch-body{padding-bottom:1rem} .apparatus{margin-top:3rem;padding-top:1.4rem;max-width:var(--measure);clear:both; border-top:2px solid var(--ink);position:relative} .apparatus::before{content:"The working";position:absolute;top:-.62rem;left:0;background:var(--bg); padding-right:.6rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.11em; text-transform:uppercase;color:var(--muted)} @media(min-width:1160px){ body.reading .apparatus{max-width:none;width:calc(var(--measure) + var(--gap) + var(--side)); column-count:2;column-gap:var(--gap);column-rule:1px solid var(--line)} body.reading .apparatus .ap{break-inside:avoid} } .ap{margin-bottom:1.7rem} .ap h2{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.42rem; display:flex;align-items:baseline;gap:.5rem} .ap h2 .s{font-family:var(--mono);font-size:.72rem;color:var(--rule);font-weight:400} .ap .t{font-family:var(--serif);font-size:.97rem;line-height:1.68} ol.beats{list-style:none;counter-reset:b;font-size:.92rem} ol.beats li{counter-increment:b;display:grid;grid-template-columns:1.4rem 1fr;gap:.5rem; padding:.42rem 0;border-bottom:1px solid var(--line);line-height:1.55;font-family:var(--serif)} ol.beats li::before{content:counter(b);font-family:var(--mono);font-size:.75rem;color:var(--muted);padding-top:.2rem} ol.beats li:last-child{border-bottom:0} ol.srcs{list-style:none;counter-reset:s;font-size:.82rem} ol.srcs li{counter-increment:s;display:grid;grid-template-columns:1.4rem 1fr;gap:.5rem;padding:.32rem 0} ol.srcs li::before{content:"[" counter(s) "]";font-family:var(--mono);font-size:.7rem;color:var(--muted);padding-top:.2rem} ol.srcs a{color:var(--muted);text-decoration:none;overflow-wrap:anywhere;font-family:var(--mono);font-size:.755rem;line-height:1.5} ol.srcs .host{color:var(--ink);font-weight:500} ol.srcs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .xref{font-size:.85rem;color:var(--muted);margin-top:.6rem} .xref a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .xref a:hover{text-decoration-color:var(--muted)} .pager{display:grid;gap:1px;border-top:1px solid var(--line);margin-top:3rem;background:var(--line);clear:both} @media(min-width:640px){.pager{grid-template-columns:1fr 1fr}} .pg{background:var(--bg);padding:1rem 0;text-decoration:none;display:block} @media(min-width:640px){.pg.next{text-align:right;padding-left:1.5rem}.pg.prev{padding-right:1.5rem}} .pg .k{font-size:.75rem;color:var(--muted);display:block;margin-bottom:.15rem} .pg .t{font-family:var(--serif);font-size:.95rem;font-weight:500;line-height:1.4} .pg:hover .t{color:var(--muted)} /* ---------- chapter list ---------- */ .clist{border-top:1px solid var(--ink)} .crow{display:grid;grid-template-columns:1.9rem 1fr auto;gap:.8rem;align-items:start; padding:.75rem 0;border-bottom:1px solid var(--line)} .crow .cn{font-family:var(--mono);font-size:.78rem;color:var(--muted);padding-top:.2rem; text-align:right;font-variant-numeric:tabular-nums} .crow a{font-family:var(--serif);text-decoration:none;font-size:1.01rem;font-weight:500;display:block;line-height:1.4} .crow a:hover{color:var(--muted)} .crow .cs{font-size:.8rem;color:var(--muted);margin-top:.14rem;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .crow.done .cn{color:var(--mark)} .dot{width:.9rem;height:.9rem;border:1px solid var(--line);border-radius:2px; background:none;cursor:pointer;padding:0;margin-top:.3rem;flex:none} .dot[aria-pressed="true"]{background:var(--mark-fill);border-color:var(--mark-fill)} .dot:hover{border-color:var(--muted)} /* ---------- search overlay ---------- The UA gives dialog its own `color: CanvasText`, which does not inherit from body. CanvasText follows color-scheme, and color-scheme used to follow the system while the toggle only swapped the custom properties — so anyone whose OS disagreed with their chosen theme got result titles in the ground colour and an apparently empty list. color-scheme now tracks the toggle (above), and the panel states its own colour rather than relying on the UA's. */ dialog.search{border:none;padding:0;background:none;max-width:none;max-height:none;width:100%;height:100%} dialog.search::backdrop{background:rgba(0,0,0,.35)} .sbox{width:100%;max-width:38rem;margin:8vh auto 0;background:var(--bg);color:var(--ink); border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18)} @media(max-width:560px){.sbox{margin-top:3vh;max-width:calc(100% - 1.6rem)}} .sbox input{width:100%;border:none;border-bottom:1px solid var(--line);background:none; padding:.9rem 1rem;font:inherit;font-size:1rem;color:var(--ink);outline:none} .sres{max-height:min(60vh,28rem);overflow-y:auto;-webkit-overflow-scrolling:touch} .sres a{display:block;padding:.62rem 1rem;text-decoration:none;border-bottom:1px solid var(--faint)} .sres a[data-sel]{background:var(--faint)} .sres .st{font-family:var(--serif);font-size:.98rem;font-weight:500;line-height:1.35;color:var(--ink)} .sres .sm{font-size:.75rem;color:var(--muted);margin-top:.1rem} .sres .empty{padding:1rem;font-size:.85rem;color:var(--muted)} /* ---------- highlight popover ---------- */ .hlpop{position:absolute;z-index:60;background:var(--bg);border:1px solid var(--line); border-radius:5px;box-shadow:0 6px 20px rgba(0,0,0,.15);display:none} .hlpop button{background:none;border:none;font:inherit;font-size:.8rem;color:var(--ink); padding:.42rem .72rem;cursor:pointer} .hlpop button:hover{background:var(--faint)} /* ---------- generic list pages ---------- */ .page-h{padding:2.2rem 0 1.4rem} .page-h h1{margin-bottom:.5rem} .rule-top{border-top:1px solid var(--ink)} .stack{display:block} .stack .item{padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;display:block} .stack .item h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:.22rem} .stack .item p{font-size:.85rem;color:var(--muted);line-height:1.55;max-width:var(--measure)} .stack .item .m{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:.3rem} .stack .item:hover h3{color:var(--muted)} /* ---------- attack / defence pairs ---------- */ .pair{border-bottom:1px solid var(--line);padding:1.2rem 0;display:grid;gap:1rem} @media(min-width:720px){.pair{grid-template-columns:1fr 1fr;gap:2rem}} .side{min-width:0} .side .k{font-size:.73rem;color:var(--muted);margin-bottom:.32rem} /* Attack and counter are told apart by rule style rather than by a second hue: colour on this site is reserved for the reader's own marks. */ .atk{border-left:2px solid var(--ink);padding-left:.85rem} .def{border-left:2px dotted var(--muted);padding-left:.85rem} .side a{font-family:var(--serif);text-decoration:none;font-size:.99rem;font-weight:500; display:block;line-height:1.4;margin-bottom:.28rem} .side a:hover{color:var(--muted)} .side .gap{font-family:var(--serif);font-size:.9rem;line-height:1.62;color:var(--muted)} .side .written{font-size:.72rem;color:var(--muted);margin-bottom:.32rem} /* ---------- situation / quiz ---------- */ .q{max-width:var(--measure)} .q .scenario{font-family:var(--serif);font-size:1.05rem;line-height:1.65;margin-bottom:1.2rem;text-wrap:pretty} .opts{display:block;margin-bottom:1rem} .opt{display:block;width:100%;text-align:left;background:none;border:1px solid var(--line); border-radius:5px;padding:.68rem .82rem;margin-bottom:.5rem;font:inherit;font-size:.9rem; color:var(--ink);cursor:pointer;line-height:1.45} .opt:hover{border-color:var(--muted)} .opt.right{border-color:var(--mark-fill);background:var(--mark-wash)} .opt.wrong{border-color:var(--line);color:var(--muted);text-decoration:line-through} .qfoot{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.9rem;line-height:1.55} .qfoot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .qprog{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:.75rem;font-variant-numeric:tabular-nums} .grp{font-size:.82rem;color:var(--muted);margin:1.3rem 0 .1rem} .chips{display:flex;flex-wrap:wrap;gap:.42rem;margin:.6rem 0 1.2rem} .chip{border:1px solid var(--line);border-radius:100px;padding:.34rem .72rem;background:none; font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer;line-height:1.35;text-align:left} .chip[aria-pressed="true"]{border-color:var(--mark-fill);background:var(--mark-wash)} .chip:hover{border-color:var(--muted)} .btn{display:inline-block;border:1px solid var(--ink);border-radius:5px;padding:.52rem .92rem; background:none;font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;text-decoration:none} .btn:hover{background:var(--ink);color:var(--bg)} .btn[disabled]{opacity:.4;cursor:default} .btn[disabled]:hover{background:none;color:var(--ink)} /* ---------- saved ---------- */ .hlitem{border-bottom:1px solid var(--line);padding:.9rem 0} .hlitem .q{font-family:var(--serif);font-size:.95rem;line-height:1.62; border-left:2px solid var(--mark-fill);padding-left:.8rem;margin-bottom:.38rem} .hlitem .src{font-size:.78rem;color:var(--muted)} .hlitem .src a{text-decoration:none} .hlitem .src a:hover{color:var(--ink)} .hlitem .rm{background:none;border:none;color:var(--muted);font:inherit;font-size:.75rem; cursor:pointer;padding:0;margin-left:.6rem;text-decoration:underline} .empty-state{font-family:var(--serif);color:var(--muted);font-size:1rem;line-height:1.68; max-width:var(--measure);padding:1.5rem 0} .kbd{font-family:var(--mono);font-size:.75rem;border:1px solid var(--line);border-radius:3px; padding:.05rem .3rem;color:var(--muted)}