/* Rubyfpv Editorial: the magazine (/blog/, /blog/category/*) and the reading pages (/blog/stories/*).
   Colours: only the brand.css palette. Every story keeps its own colour block (data-palette); the five old colours map to
     sage → card #F1EDE7 · orange → ink #0E0C10 · brown → garnet #4A1530 · yellow → pink #F8D6E7 · red → white
   with all text ≥ 4.5:1 on its block, headings included: rose #D0538F only for the headings on ink (4.93:1);
   on white the pink is #B8407A (5.18:1).
   The page frame (body, the bar above, the legal line below) is the site's cream #FAF6EF + near-black #25222A, like every
   section page; the story colour lives on the columns (magazine) and on <main> + the footer (reading page).
   Fonts: the three site families from /assets/fonts/fonts.css (the shared nav head loads it): titles Instrument Serif,
   body and labels Instrument Sans (font plan A), Space Mono only for code. Chinese = system fonts; "ZH Punct" (brand.css) draws ，。、：；！？ from PingFang.
   Chinese is never slanted: quotes and emphasis use colour and a rule instead of italics. */
:root {
 --paper:#FAF6EF; --card:#F1EDE7; --white:#FFFFFF; --ink:#25222A; --ink-2:#4A4650; --ink-3:#6B655F;
 --night:#0E0C10; --rose:#D0538F; --rose-press:#B8407A; --garnet:#4A1530; --pink:#F8D6E7;
 --serif:var(--rf-face-serif, "Instrument Serif", "ZH Punct", "Instrument Serif Fallback", "Songti SC", "STSong", serif); --serif-text:var(--rf-face-serif-text, "Instrument Serif", "ZH Punct", "Instrument Serif Fallback", "Songti SC", "STSong", serif);
 --sans:var(--rf-face-sans),"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 --mono:var(--sans); /* labels = the same sans (font plan A) */
 --code:var(--rf-face-code),ui-monospace,Menlo,"PingFang SC",monospace;
 /* story colours: block, text, headings (≥24px), accent (quote rule, emphasis) */
 --article-bg:var(--white); --article-ink:var(--ink); --article-head:var(--ink); --article-accent:var(--garnet);
 --bar-height:34px; --column-width:330px;
}
[data-palette="sage"] { --article-bg:var(--card); --article-ink:var(--ink); --article-head:var(--ink); --article-accent:var(--garnet); }
[data-palette="orange"] { --article-bg:var(--night); --article-ink:var(--pink); --article-head:var(--rose); --article-accent:var(--paper); }
[data-palette="brown"] { --article-bg:var(--garnet); --article-ink:var(--paper); --article-head:var(--paper); --article-accent:var(--pink); }
[data-palette="yellow"] { --article-bg:var(--pink); --article-ink:var(--ink); --article-head:var(--ink); --article-accent:var(--garnet); }
[data-palette="red"] { --article-bg:var(--white); --article-ink:var(--rose-press); --article-head:var(--rose-press); --article-accent:var(--garnet); }
* { box-sizing:border-box; }
html,body { margin:0; color:var(--ink); background:var(--paper); }
body { font-family:var(--sans); -webkit-font-smoothing:antialiased; }
em,i { font-synthesis:none; }
a { color:inherit; text-underline-offset:.16em; }
button,select { font:inherit; color:inherit; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
.skip { position:fixed; top:-100px; z-index:20; background:var(--paper); color:var(--ink); padding:12px; }
.skip:focus { top:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.preview-bar { height:var(--bar-height); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px; background:var(--paper); color:var(--ink); font:12px/1.2 var(--mono); position:relative; z-index:5; }
.preview-bar a { text-decoration:none; }
.masthead { font-weight:700; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }
.edition { margin-left:12px; font-weight:400; color:var(--ink-2); }
.browse-controls { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.browse-controls button { border:0; background:transparent; width:30px; height:32px; font-size:21px; font-family:var(--sans); }
.browse-controls button:disabled { opacity:.35; cursor:default; }
.magazine { height:calc(100dvh - var(--bar-height)); display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-color:var(--ink-3) var(--paper); }
/* scrollbars take the column's own colours (a tint of its text on its block) */
.story-column { flex:0 0 var(--column-width); height:100%; overflow-y:scroll; overflow-x:hidden; padding:28px 30px 70px; background:var(--article-bg); color:var(--article-ink); scroll-snap-align:start; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--article-ink) 35%,var(--article-bg)) var(--article-bg); overscroll-behavior-y:contain; }
.story-column::-webkit-scrollbar { width:12px; }
.story-column::-webkit-scrollbar-track { background:var(--article-bg); }
.story-column::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--article-ink) 35%,var(--article-bg)); border:3px solid var(--article-bg); border-radius:8px; }
.story-header { padding-bottom:10px; }
.story-heading { margin:0; padding:10px 0; text-align:center; font:400 45px/1.05 var(--serif); letter-spacing:-.01em; color:var(--article-head); overflow-wrap:anywhere; text-wrap:balance; }
.story-heading:lang(zh) { letter-spacing:0; line-height:1.15; }
.story-heading a { text-decoration:none; }
.story-heading a:hover { text-decoration:underline; text-decoration-thickness:1px; }
.story-meta { margin:0; padding:0 0 30px; text-align:center; font:400 13px/1.6 var(--mono); letter-spacing:.02em; }
.story-meta a { text-decoration:none; }
.story-meta a:hover { text-decoration:underline; }
.story-body { font:400 16px/1.6 var(--sans); overflow-wrap:anywhere; }
.story-body p { margin:0; padding-bottom:30px; }
.story-body p:lang(zh) { line-height:1.75; }
.story-body>p:first-of-type { font:400 23px/1.22 var(--serif-text); }
.story-body>p:first-of-type:lang(zh) { font-size:19px; line-height:1.6; }
.story-body h3 { font:600 12px/1.4 var(--mono); letter-spacing:.1em; margin:0 0 14px; text-transform:uppercase; }
.story-body figure { margin:10px 0 40px; }
.story-body img { display:block; width:100%; height:auto; }
.story-body figcaption { font:400 13px/1.5 var(--sans); margin-top:10px; }
/* The pull quote: Instrument Serif, set off by a rule in the story's accent. Only English gets the (real) italic. */
.story-body blockquote { margin:10px 0 40px; padding:2px 0 4px 16px; border-left:2px solid var(--article-accent); font:400 24px/1.25 var(--serif-text); font-synthesis:none; }
.story-body blockquote:lang(en) { font-style:italic; }
.story-body blockquote:lang(zh) { font-size:20px; line-height:1.5; }
.story-end { display:block; margin-top:50px; padding-top:16px; border-top:1px solid; font:400 13px/1.5 var(--mono); }
/* Reading page: cream frame, the story colour on <main> and the next-story footer */
.reading-page { background:var(--paper); color:var(--ink); }
.reading-page .preview-bar { background:var(--paper); color:var(--ink); }
.reading-page main,.reading-footer { background:var(--article-bg); color:var(--article-ink); }
.reading-top { padding:70px 6vw 60px; text-align:center; }
.reading-top h1 { font:400 clamp(46px,6.7vw,110px)/1.04 var(--serif); color:var(--article-head); text-wrap:balance; letter-spacing:-.015em; max-width:1200px; margin:26px auto 32px; overflow-wrap:anywhere; }
.reading-top h1:lang(zh) { letter-spacing:0; line-height:1.15; }
.reading-top .story-meta { margin-bottom:0; }
.reading-deck { max-width:760px; margin:0 auto; font:400 26px/1.4 var(--serif-text); }
.reading-deck:lang(zh) { font-size:22px; line-height:1.65; }
.reading-layout { max-width:1440px; margin:auto; padding:72px 5vw 100px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7vw; align-items:start; }
.reading-copy { font:400 20px/1.7 var(--sans); min-width:0; width:100%; overflow-wrap:anywhere; }
.reading-copy p { margin:0 0 1.4em; }
.reading-copy h2 { font:400 42px/1.15 var(--serif); color:var(--article-head); letter-spacing:-.01em; margin:1.7em 0 .7em; scroll-margin-top:110px; }
.reading-copy h3 { font:400 28px/1.25 var(--serif); color:var(--article-head); scroll-margin-top:110px; }
.reading-copy .article-section:first-child h2 { margin-top:0; }
.reading-copy blockquote { border-left:2px solid var(--article-accent); padding:6px 0 6px 25px; margin:42px 0; font:400 29px/1.35 var(--serif-text); }
.reading-copy blockquote p { margin:0; }
.reading-copy em { font-style:normal; color:var(--article-accent); }
.reading-copy ul,.reading-copy ol { padding-left:1.3em; }
.reading-copy li { padding-left:.3em; margin-bottom:.5em; }
.reading-copy pre { border-block:1px solid currentColor; padding:20px 0; overflow:auto; font:14px/1.6 var(--code); }
.reading-copy code { font-family:var(--code); font-size:.75em; overflow-wrap:anywhere; }
.reading-copy pre code { font-size:inherit; }
.reading-copy .media { margin:40px 0; }
.reading-copy .media img { width:100%; height:auto; }
.reading-copy .media figcaption { font-size:14px; }
.reading-media { position:sticky; top:110px; min-width:0; }
.reading-media figure { margin:0 0 40px; }
.reading-media img,.reading-media video { display:block; width:100%; height:auto; }
.reading-media figcaption { font:400 14px/1.5 var(--sans); margin-top:14px; }
.reading-media details { font:400 15px/1.6 var(--sans); border-block:1px solid currentColor; padding:18px 0; }
.reading-media summary { font:600 12px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.reading-media details ol { padding-left:22px; }
.reading-footer { border-top:1px solid; padding:25px 5vw; display:flex; justify-content:space-between; gap:20px; font:400 13px/1.5 var(--mono); }
.reading-footer a { max-width:75%; text-align:right; }
@media (max-width:860px) {
 .reading-media { top:30px; }
 .reading-copy h2,.reading-copy h3 { scroll-margin-top:30px; }
}
@media (max-width:767px) {
 :root { --bar-height:45px; --column-width:calc(100vw - 28px); }
 .preview-bar { padding:0 12px; gap:6px; }
 .masthead { font-size:12px; }
 .edition { display:none; }
 .browse-controls { font-size:11px; gap:0; }
 .browse-controls button { width:28px; height:36px; }
 .magazine { scroll-snap-type:x mandatory; padding-right:28px; }
 .story-column { padding:28px 30px 60px; }
 .reading-top { padding:40px 24px 46px; }
 .reading-deck { font-size:22px; }
 .reading-deck:lang(zh) { font-size:19px; }
 .reading-layout { display:flex; flex-direction:column; padding:40px 24px 70px; gap:40px; }
 .reading-media { position:static; width:100%; order:-1; }
 .reading-copy { font-size:18px; }
 .reading-copy h2 { font-size:34px; }
 .reading-copy blockquote { font-size:25px; }
 .reading-footer { padding:24px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }