/* Typefaces: see the TYPEFACES block in :root and docs/brand/typography.md. Latin subsets (en dashes and curly quotes included). swap = text shows at once in the fallback and changes face when the file lands. */ @font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/lexend.woff2) format('woff2')} @font-face{font-family:'Scope One';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/scope-one.woff2) format('woff2')} @font-face{font-family:'Caprasimo';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/caprasimo.woff2) format('woff2')} /* --------------------------------------------------------------------------- BRAND PALETTE -- from Brand_Colors_Chart.pdf, Darby + designer, 2026-09. Same colors as the Fraternal Youth cover. Weight, most to least: Azure Blue 7, Magenta 6, Cosmic Periwinkle 5, Teal 4, Light Periwinkle Blue 3, Golden Hour 2, Yellow 1. Azure and Magenta are too light for small text on off-white (3.4:1 and 3.8:1; readable body text needs 4.5:1). So small text uses the -deep shades, and the true brand colors go on fills, borders and large display type, where 3:1 is enough. Cosmic Periwinkle is the only brand color dark enough to be text as-is, which is why it carries the headings and the masthead. DERIVED, not on the chart: --azure-deep, --magenta-deep, --ink-soft, --ink-faint, and the dark-mode surfaces. Each was computed to pass 4.5:1 on every background it sits on. Worth the designer's sign-off. --------------------------------------------------------------------------- */ :root{ /* base colors */ --azure:#1D91C2; --magenta:#D64A97; --cosmic:#564786; --golden:#F6D86B; --teal:#2BB6B2; --peri:#8F9EF9; --yellow:#F8E18F; /* supporting colors */ --mint:#66DDAA; --peri-light:#C5D1FA; /* DERIVED. Mint taken from 63% lightness / 64% saturation down to 50 / 55, and turned toward Teal (hue 154 -> 166). Mint glows against a saturated fill; Teal vanishes into one. This is the last stop between them: at 2.46:1 on the magenta it is the dimmest edge that still reads. Anything darker measures at or below Teal's 2.12:1 and stops being a border. */ --mint-deep:#39C6A5; /* DERIVED 2026-10-22 (Darby). Cosmic Periwinkle darkened, for the top bar, so the wordmark's Light Periwinkle Blue and Fresh Mint stand out on it: 4.8:1 and 7.1:1 (on Cosmic they were 3.2 and 4.7). On the chart. */ --cosmic-deep:#3A2F5E; /* DERIVED 2026-10-22 (Darby). Azure Blue lightened (6.3:1 on Cosmic Deep), what DARB turns on hover. On the chart. */ --azure-light:#6EC6EE; --yellow-light:#FAEBB4; --yellow-lighter:#FCF1D6; /* neutrals */ --offwhite:#FAF9F6; --charcoal:#2E2E2E; /* derived for readable text */ --azure-deep:#17759C; --magenta-deep:#C32C7F; /* DERIVED, for links only. Azure Deep passed at 4.9:1 but read thin in a serif paragraph. Same hue, lightness 35% -> 26%: 7.66:1 on Off-White, 7.18:1 on Lighter Yellow. Buttons stay on Azure Deep. */ --azure-ink:#115673; /* roles -- rules below use these, never the raw colors */ --ink:var(--charcoal); --ink-soft:#55525E; --ink-faint:#6B6778; /* --paper-2 is the raised surface: price cards, the billing switch, embeds. White since 2026-10-23 (was Lighter Yellow) - Darby retired the yellow boxes. Callouts have their own fills, below. */ --paper:var(--offwhite); --paper-2:#FFFFFF; --line:var(--peri-light); --link:var(--cosmic-deep); --link-hover:var(--magenta-deep); --accent:var(--azure-deep); --on-accent:#fff; --heading:var(--cosmic); --display-accent:var(--magenta); --label:var(--magenta-deep); /* Headline hierarchy: the three heaviest brand colors, one per level, then back to the anchor. Magenta (3.77:1) and Azure (3.39:1) only pass as LARGE type, so they are for h2 and h3 at their set sizes and nothing smaller. --heading stays Cosmic for the small uppercase labels. */ --h1:var(--magenta); --h2:var(--azure); --h3:var(--cosmic); --h4:var(--label); --band:var(--cosmic-deep); --band-ink:var(--offwhite); --band-soft:var(--peri-light); --band-accent:var(--yellow-light); /* menu hover + current page (2026-10-22, Darby; was Golden Hour) */ --wordmark-darb:var(--peri); --wordmark-nation:var(--mint); --wordmark-darb-hover:var(--azure-light); --wordmark-nation-hover:var(--peri-light); /* The header's purple and its wordmark pairs, reused (2026-10-22, Darby): footer band, signup box, button and pill hovers, selected text. --band-faint is the dark-mode faint text, 5.9:1 on Cosmic Deep. */ --band-faint:#ABA6BA; --signup-fill:var(--cosmic-deep); --signup-head:var(--mint); --signup-ink:var(--peri-light); --signup-btn:var(--peri); --signup-btn-hover:var(--azure-light); --signup-btn-ink:var(--cosmic-deep); --hover-fill:var(--cosmic-deep); --hover-ink:var(--azure-light); /* Secondary buttons (Buy me a coffee, Read the reviews, Headlines of Hope): Magenta Deep with white, 5.3:1 (2026-10-22, Darby). Same purple hover. */ --btn2-fill:var(--magenta-deep); --btn2-ink:#fff; --rule:var(--magenta); --gold:var(--golden); --hover-border:var(--teal); /* The price tiers fill on hover, and must not be confused with the azure CTA buttons next to them -- a tier is a different kind of thing. Magenta is the second brand weight and carries white at 5.27:1. A tier with no link yet fills too, but with the soft neutral, never the action colour. */ --tier-fill:var(--magenta-deep); --tier-ink:#fff; /* The edge on a hovered live tier. Against the magenta fill: Mint 3.13:1 but it glows, Teal 2.12:1 and you cannot see it, Mint Deep 2.46:1 and calm. This is the bottom of the useful range -- if it still reads too hot, the fix is a lighter edge or no edge, not a darker one. */ --tier-edge:var(--mint-deep); --tier-off-fill:var(--line); --tier-off-ink:var(--ink); /* CALLOUTS (2026-10-23, Darby). Five boxes, one job each - the jobs are in docs/brand/brand-colors.md and posts/_guide.md. Every one has the same Cosmic Deep headline and a 5px edge. Magenta edge on the white Ask card ONLY, so magenta keeps meaning "this is the ask"; each tinted box takes the deep shade of its own fill (Darby, 2026-10-23 - first version had magenta on all five). Every edge is ~3:1 on its own fill, light and dark. Periwinkle Deep, Lilac, Lilac Deep, Sage and Sage Deep were added to the palette for these. Body text on every fill is 11:1+. */ --co-head:var(--cosmic-deep); --co-ask:#FFFFFF; --co-ask-line:var(--peri-light); --co-ask-edge:var(--magenta); --co-note:#EEF1FE; --co-note-line:var(--peri-light); --co-note-edge:#6E7EEB; --co-deeper:#E6F3FA; --co-deeper-line:#B9DEF1; --co-deeper-edge:var(--azure); --co-heads:#F4ECFF; --co-heads-line:#DCC9F7; --co-heads-edge:#9B6BE0; --co-try:#EAF2E3; --co-try-line:#C9DDB8; --co-try-edge:#5E9A40; /* POST-LIST HOVER (2026-10-23, Darby). Rows on /, /writing and /topics cycle through four title colors, and each subtitle takes a contrasting partner. Titles are large type (3:1 is enough); subtitles are small and pass 4.5:1. See HUE_ANCHOR for how a post gets its number. */ /* Revised the same morning: Darby swapped the lilac/periwinkle pair for stronger colors and alternated the pink-blue rows with the purple-green ones. No orange, by Darby's choice. */ --hue1-title:var(--magenta); --hue1-sub:var(--azure-deep); /* 3.8 / 4.9 */ --hue2-title:var(--cosmic); --hue2-sub:#137A76; /* 7.6 / Teal Deep 4.9 */ --hue3-title:var(--azure); --hue3-sub:var(--magenta-deep); /* 3.4 / 5.0 */ --hue4-title:#1F7A55; --hue4-sub:var(--cosmic); /* Forest 5.0 / 7.6 */ --max:44rem; /* ---- TYPEFACES (approved 2026-10-22) ----------------------------------- docs/brand/typography.md. Three faces, each with one job, all served from /assets/fonts/ (static/fonts/ in the repo) so every device shows the same thing and nothing loads from Google. Caprasimo the DarbNation wordmark, and nothing else Scope One titles and headings, h1-h4. One weight only (400), so a heading never asks for bold - the browser would fake it. Lexend everything else: essay text, buttons, nav, prices, labels. Rules use these three role tokens, never a family name. */ --font-wordmark:'Caprasimo',Georgia,serif; --font-title:'Scope One',Georgia,'Times New Roman',serif; --font-body:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* ---- SPACING SCALE ------------------------------------------------------- Nine steps on a 4px base. Full reasoning in docs/brand/layout-spacing.md. No rule below this line uses a raw length for margin, padding or gap. If a gap needs a value that is not on this scale, the scale is wrong -- fix it here, once, rather than inventing a fortieth number in one component. The scale before this existed: 42 different values, so the space between any two things was whatever three unrelated rules happened to add up to. */ --space-3xs:.25rem; /* 4px hairline: label to the thing it labels */ --space-2xs:.5rem; /* 8px inside a control */ --space-xs:.75rem; /* 12px tight pair */ --space-s:1rem; /* 16px heading to its own paragraph */ --space-m:1.5rem; /* 24px DEFAULT. paragraph to paragraph */ --space-l:2rem; /* 32px block to block down a page */ --space-xl:3rem; /* 48px one section to the next */ --space-2xl:4rem; /* 64px page top, and away from the footer */ --space-3xl:6rem; /* 96px reserved for the home hero */ /* ---- TYPE SCALE (2026-10-22, docs/brand/typography.md) ----------------- Nine named sizes. Nothing on the site is smaller than --text-fine (15px, Darby's floor). No rule below uses a raw font-size: if a size is not here, the scale is wrong -- fix it here, once. */ --text-fine:.9375rem; /* 15px THE FLOOR. dates, captions, labels, fine print */ --text-ui:1rem; /* 16px buttons, nav, form, checklists, card blurbs */ --text-body:1.0625rem; /* 17px essay text (16px on phones, see bottom) */ --text-lead:1.3125rem; /* 21px subtitles, page intros */ --text-wordmark:1.8375rem; /* 29.4px the DarbNation masthead only (lead x1.4) */ --text-h4:1.625rem; /* 26px h4, card titles (22 until 2026-10-22, Darby) */ --text-h3:1.9375rem; /* 31px h3 (27 until 2026-10-22) */ --text-h2:2.25rem; /* 36px h2 (32 until 2026-10-22) */ --text-price:2rem; /* 32px big prices - stayed put when headings grew */ --text-price-sm:1.6875rem; /* 27px prices on the small cards */ --text-title:clamp(2.35rem,calc(5.5vw + .25rem),3.4rem); /* 38-54px essay titles */ --text-hero:clamp(2.85rem,calc(8vw + .25rem),4.75rem); /* 46-76px pink headlines */ --gutter:var(--space-m); /* the page's left and right breathing room */ --flow-space:var(--space-m); /* the default gap the flow engine applies */ } @media (prefers-color-scheme:dark){ :root{ --ink:var(--offwhite); --ink-soft:#D9D5E2; --ink-faint:#ABA6BA; --paper:var(--charcoal); --paper-2:#38344A; --line:#4A4560; --link:var(--peri-light); --link-hover:var(--golden); --accent:var(--peri); --on-accent:var(--charcoal); --heading:var(--peri-light); --label:var(--teal); /* On Charcoal: Magenta 3.42:1, Teal 5.46:1, Lighter Periwinkle 8.97:1. Azure would pass too, but Teal is its own family and reads brighter. */ --h1:var(--magenta); --h2:var(--azure); --h3:var(--peri-light); --h4:var(--label); /* Callouts on Charcoal: each fill is its light color's family, darkened. Off-White text 10.4:1+, Lighter Periwinkle heads 7.2:1+. */ --co-head:var(--peri-light); --co-ask:#38344A; --co-ask-line:#4A4560; --co-note:#353A5C; --co-note-line:#4D5480; --co-deeper:#2B3F4D; --co-deeper-line:#3E5A6C; --co-heads:#3E3354; --co-heads-line:#5A4A78; --co-try:#34402F; --co-try-line:#4B5C43; /* Magenta and Azure titles keep their colors on Charcoal (3.4-3.8:1, large type). Cosmic and Forest vanish there, so they go to Light Periwinkle Blue (5.5) and Mint Deep. Subtitles go light: Azure Light 7.1, Teal 5.5, Magenta Light 5.9, Lighter Periwinkle 9.0. */ --hue2-title:var(--peri); --hue4-title:var(--mint-deep); --hue1-sub:var(--azure-light); --hue2-sub:var(--teal); --hue3-sub:#F08BC0; --hue4-sub:var(--peri-light); } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-body);font-size:var(--text-body);line-height:1.7; font-synthesis-weight:none;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)} .wide{max-width:64rem} a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.06em} a:hover{color:var(--link-hover)} /* Links in running text are bold. Not a bare `a`: a post-list row and a card are each one big link, and that would bold every word inside them. */ .prose a,p a,li a{font-weight:700} img{max-width:100%;height:auto;display:block;border-radius:4px} hr{border:0;border-top:1px solid var(--line);--flow-space:var(--space-xl)} /* Substack wraps its rules in a bare
, which made the div the flow child and gave the line 24px instead of 48 (2026-10-22). */ .prose>div:not([class]):has(>hr:only-child){--flow-space:var(--space-xl)} ::selection{background:var(--azure-light);color:var(--cosmic-deep)} /* Browser default margins inside imported Substack markup. Those wrappers nest -- a div holding a figure, an li holding a paragraph -- and a nested child's UA margin collapses up out of its wrapper and lands as a gap the scale never authorised. :where() scores zero specificity, so this reset loses to the flow rules right below it for anything that IS a direct child, and wins for everything nested, which is exactly the split we want. It also clears the 40px side margin a browser puts on
. */ .prose :where(p,ul,ol,li,figure,blockquote,pre,h1,h2,h3,h4,h5,h6){margin:0} /* --------------------------------------------------------------------------- FLOW -- the one thing that puts space between two stacked elements. Heydon Pickering's owl selector carrying Andy Bell's --flow-space custom property. Inside a flow container nothing owns a bottom margin, so the gap between any two siblings is exactly one number and can never accumulate. Change the gap for one element by setting --flow-space ON THAT ELEMENT; custom properties cascade, so that element's own margin picks it up. Components below set margin:0 and keep only their internal padding. A component does not decide how much room it has around it. That is the page's decision, and the page makes it here. --------------------------------------------------------------------------- */ .flow,main,.article,.article header,.hero,.hero .wrap,.prose,.prose>div:not([class]), .efoot,.efoot>section,.book>div,.pricing,footer.site .wrap{ --flow-space:var(--space-m)} .flow>*,main>*,.article>*,.article header>*,.hero>*,.hero .wrap>*,.prose>*, .prose>div:not([class])>*, .efoot>*,.efoot>section>*,.book>div>*,.pricing>*,footer.site .wrap>*,.ehead>*{ margin-block:0} /* A component that is a flow child must never declare its own margin. A class selector scores (0,1,0) against the flow rule's (0,0,1), so a stray margin:0 on .note or .cards silently wins and collapses the gap to nothing. The reset above is the only margin a flow child gets. */ .flow>*+*,main>*+*,.article>*+*,.article header>*+*,.hero>*+*,.hero .wrap>*+*, .prose>*+*,.prose>div:not([class])>*+*,.efoot>*+*,.efoot>section>*+*,.book>div>*+*,.pricing>*+*, footer.site .wrap>*+*,.ehead>*+*{ margin-block-start:var(--flow-space)} /* Page-level blocks sit further apart than paragraphs do. */ main,.article{--flow-space:var(--space-l)} /* A title stays close to its own words. */ .article header{--flow-space:var(--space-2xs)} /* header */ .masthead{border-bottom:1px solid var(--band);background:var(--band); position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(8px)} .masthead .wrap{display:flex;align-items:center;gap:var(--space-m); padding-block:var(--space-xs)} .brand{font-family:var(--font-wordmark);font-weight:400;font-size:var(--text-wordmark);line-height:1.15;letter-spacing:.01em; text-decoration:none;white-space:nowrap} .brand .darb{color:var(--wordmark-darb);transition:color .15s} .brand .nation{color:var(--wordmark-nation);transition:color .15s} /* Hovering either half changes both. */ .brand:hover .darb{color:var(--wordmark-darb-hover)} .brand:hover .nation{color:var(--wordmark-nation-hover)} .nav{margin-left:auto;display:flex;gap:var(--space-s);flex-wrap:wrap} .nav a{font-family:var(--font-body);font-size:var(--text-ui);font-weight:500;color:var(--band-soft); text-decoration:none;letter-spacing:.01em} .nav a:hover,.nav a[aria-current]{color:var(--band-accent)} /* hero. .plain is the section-page variant: no rule under it and no bottom padding, because the flow gap below already spaces it from what follows. Every section page used to carry that as an inline style. */ .hero{padding-block:var(--space-3xl) var(--space-xl); border-bottom:1px solid var(--line);--flow-space:var(--space-s)} .hero.plain{border-bottom:0;padding-block:var(--space-2xl) 0} .hero h1{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h1); font-size:var(--text-hero);line-height:1.02;--flow-space:var(--space-xs)} .hero h1 em{font-style:normal;color:var(--display-accent)} /* :not(.kicker): this rule outranked .kicker and drew the label at 20px. */ .hero p:not(.kicker){font-size:var(--text-lead);color:var(--ink-soft);max-width:34rem} .hero .btn-row{--flow-space:var(--space-m)} .kicker{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--label)} /* "All writing ->" and friends: a quiet link trailing its list. */ .more-link{font-size:var(--text-ui);--flow-space:var(--space-m)} /* The SoundCloud iframe on /music. display:block matters: an iframe is inline by default, so it sits on a text baseline and carries ~9px of descender space under it that no margin accounts for. That was the one gap on the whole site the scale could not explain. */ .sc-player{display:block;border-radius:8px} /* signup */ .signup{background:var(--signup-fill);border:1px solid var(--signup-fill);border-radius:10px; padding:var(--space-m);color:var(--signup-ink)} .signup h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h2); margin:0 0 var(--space-3xs);line-height:1.15;color:var(--signup-head)} .signup p{font-family:var(--font-body);font-size:var(--text-ui);color:var(--signup-ink); margin:0 0 var(--space-xs)} .signup a{color:var(--signup-head)} .signup a:hover{color:var(--signup-btn-hover)} .signup .btn{background:var(--signup-btn);border-color:var(--signup-btn);color:var(--signup-btn-ink)} .signup .btn:hover{background:var(--signup-btn-hover);border-color:var(--signup-btn-hover); color:var(--signup-btn-ink)} .signup form{display:flex;gap:var(--space-2xs);flex-wrap:wrap} /* /subscribe puts a checklist under the form; it sat flush against it. */ .step1 .signup{display:grid;gap:var(--space-s)} .signup input[type=email]{flex:1 1 15rem;min-width:0;font:inherit;font-family:var(--font-body); font-size:var(--text-ui);padding:var(--space-2xs) var(--space-xs);border:1px solid var(--line); border-radius:7px;background:var(--paper);color:var(--ink)} .signup input[type=email]:focus{outline:2px solid var(--signup-btn-hover);outline-offset:-1px; border-color:var(--signup-btn-hover)} .btn{font-family:var(--font-body);font-size:var(--text-ui);font-weight:650;cursor:pointer; padding:var(--space-2xs) var(--space-m);border:1px solid var(--accent);border-radius:7px; background:var(--accent);color:var(--on-accent);text-decoration:none;display:inline-block; line-height:1.5;transition:background .15s,color .15s,border-color .15s} .btn:hover,.btn.ghost:hover{background:var(--hover-fill);border-color:var(--hover-fill);color:var(--hover-ink)} .btn.ghost{background:var(--btn2-fill);border-color:var(--btn2-fill);color:var(--btn2-ink)} /* essay list */ .section-title{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--heading); padding-bottom:var(--space-2xs);border-bottom:1px solid var(--line); --flow-space:var(--space-xl)} .section-title+*{--flow-space:var(--space-2xs)} /* The home page's "Start here": the one section title that is an invitation, not a label, so it is set as a headline with a real button under it. */ .section-title.lead{font-family:var(--font-title);font-size:var(--text-h2);font-weight:400;color:var(--h2); letter-spacing:-.01em;text-transform:none;line-height:1.1} .section-title.lead+*{--flow-space:var(--space-s)} .postlist{list-style:none;padding:0} .postlist li{border-bottom:1px solid var(--line)} /* weight 400: the row is one link, and "li a" links are bold - that made every subtitle bold and louder than its title (fixed 2026-10-22). */ .postlist a{display:block;padding-block:var(--space-m);text-decoration:none;color:inherit;font-weight:400} /* The gap above a list is the flow gap. The first row must not add to it. */ .postlist li:first-child a{padding-block-start:0} .postlist h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h3); line-height:1.25;margin:0 0 var(--space-3xs);transition:color .12s} .postlist p{margin:0;color:var(--ink-soft);font-size:var(--text-ui);transition:color .12s} /* Hover (2026-10-23, Darby): the title takes its row's color and thickens, the subtitle takes the partner color and goes to 500. Scope One has one weight, so the title is thickened with a hairline stroke in its own color - a deliberate exception to "never ask a title for bold", which is about the browser faking a weight. Keyboard focus gets the same. */ .postlist li{--row-title:var(--hue1-title);--row-sub:var(--hue1-sub)} .postlist li.hue2{--row-title:var(--hue2-title);--row-sub:var(--hue2-sub)} .postlist li.hue3{--row-title:var(--hue3-title);--row-sub:var(--hue3-sub)} .postlist li.hue4{--row-title:var(--hue4-title);--row-sub:var(--hue4-sub)} .postlist a:is(:hover,:focus-visible) h3{color:var(--row-title);-webkit-text-stroke:.022em currentColor} .postlist a:is(:hover,:focus-visible) p{color:var(--row-sub);font-weight:500} .postlist time{font-family:var(--font-body);font-size:var(--text-fine);font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint); display:block;margin-bottom:var(--space-3xs)} /* /top-10. The rank comes from CSS counters, so reordering TOP10 in build.py renumbers the page and nothing in the markup has to agree with itself. */ .top10-hero{width:100%;height:auto;border-radius:8px} .ranklist{list-style:none;padding:0;counter-reset:rank} /* The grid sits on the li, not on an anchor, so only the title is clickable. Exactly two grid children: the ::before counter, and one div holding the title and the hook. Put the h3 and the p in the grid directly and the hook drops onto a second row inside the number column. */ .ranklist li{border-bottom:1px solid var(--line);counter-increment:rank; display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:var(--space-s); padding-block:var(--space-m)} .ranklist li:first-child{padding-block-start:0} .ranklist li::before{content:counter(rank);font-family:var(--font-body);font-weight:800; font-size:var(--text-h3);line-height:1.15;letter-spacing:-.04em;color:var(--display-accent)} .ranklist h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h4); line-height:1.25;margin:0 0 var(--space-3xs)} .ranklist h3 a{color:var(--link);text-decoration:none} .ranklist h3 a:hover{color:var(--link-hover);text-decoration:underline} .ranklist p{margin:0;color:var(--ink-soft);font-size:var(--text-ui)} @media(max-width:34rem){.ranklist li{grid-template-columns:1.9rem minmax(0,1fr); gap:var(--space-xs)} .ranklist li::before{font-size:var(--text-h4)}} /* global essay furniture -- wording in posts/_site-copy.md */ /* .ehead is an Ask callout; the box itself comes from .callout below. */ .ehead a{color:var(--link);font-weight:700} /* Set on the paragraphs, not the box: on .ehead it would also change the gap above the box, which belongs to the article. */ .ehead>*{--flow-space:var(--space-s)} /* A divided block spends the flow gap above its rule and its own padding below it. Two numbers, both deliberate, neither one an accident. */ .efoot{padding-block-start:var(--space-xl);border-top:1px solid var(--line); --flow-space:var(--space-xl)} .efoot>section+section{padding-block-start:var(--space-xl); border-top:1px solid var(--line)} .efoot h2{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em; font-size:var(--text-h2);line-height:1.15} .efoot h2+*{--flow-space:var(--space-s)} .efoot h2 a{color:var(--link);text-decoration:underline; text-decoration-thickness:.05em;text-underline-offset:.15em} .efoot h2 a:hover{color:var(--link)} .efoot p{color:var(--ink-soft);--flow-space:var(--space-s)} .efoot img{border-radius:8px;--flow-space:var(--space-m)} .scale-label{font-family:var(--font-body);font-size:var(--text-ui);font-weight:650; letter-spacing:.02em;--flow-space:var(--space-m)} .scale-label+*{--flow-space:var(--space-2xs)} .tiers{display:flex;flex-wrap:wrap;gap:var(--space-2xs)} .tier{font-family:var(--font-body);font-weight:700;font-size:var(--text-ui); padding:var(--space-2xs) var(--space-xs); border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--link); transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s} /* A live tier fills magenta, turns white, lifts 2px and takes a mint edge. Not the azure of the Buy Me a Coffee button beside it: same gesture, different colour, because it is a different thing. The edge is 1px, the border the tier already carries at rest, recoloured. No ring: 2px of turquoise on magenta read as heat however far the colour was dimmed, and the thinner line was what actually fixed it. Nothing here changes the box size either, so nothing shifts under the pointer. */ .tier:hover{border-color:var(--tier-edge);background:var(--tier-fill); color:var(--tier-ink);transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.2)} .tier:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .tier:active{transform:translateY(0);box-shadow:none} /* No payment link yet. Rendered flat so it never looks clickable -- and that has to include hover. .tier.off and .tier:hover score the same specificity (0,2,0), so .tier.off wins on source order and keeps its grey text, but nothing was cancelling .tier:hover's accent background. Grey on azure is 1.06:1 in light mode and 1.06:1 in dark: the amount is invisible, on the exact element somebody is pointing at. A dead tier takes no hover at all. */ .tier.off{color:var(--ink-faint);cursor:default} /* A tier with no link yet fills as well, so the gesture matches, but with the soft neutral instead of the brand colour and with no shadow and half the lift. Side by side the difference is obvious: one is saturated and floating, the other is flat and quiet. Text stays 8.97:1 light, 8.63:1 dark. */ .tier.off:hover{background:var(--tier-off-fill);border-color:var(--tier-off-fill); color:var(--tier-off-ink);transform:translateY(-1px);box-shadow:none} /* A dead tier gets no edge and no ring. That is the tell: a live price wears a mint outline and floats, a price you cannot pay yet is flat and edgeless. */ @media(prefers-reduced-motion:reduce){ .tier{transition:background .15s,border-color .15s,color .15s} .tier:hover,.tier.off:hover{transform:none}} /* article */ .article{padding-block:var(--space-2xl) var(--space-s)} .article h1{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h1); font-size:var(--text-title);line-height:1.06} .article .sub{font-size:var(--text-lead);color:var(--ink-soft);line-height:1.45} .meta{font-family:var(--font-body);font-size:var(--text-fine);font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-faint)} .prose h2{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h2); font-size:var(--text-h2);line-height:1.15;--flow-space:var(--space-xl)} .prose h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h3); font-size:var(--text-h3);line-height:1.2;--flow-space:var(--space-l)} .prose h4{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h4); line-height:1.3;color:var(--h4);--flow-space:var(--space-m)} /* h5/h6 appear only in Headlines of Hope ("Animal edition", "Medical breakthroughs"): category labels inside a volume, so they are set as labels at the floor, not as a fifth heading size. */ .prose :is(h5,h6){font-family:var(--font-body);font-size:var(--text-fine);font-weight:700; letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--label); --flow-space:var(--space-l)} /* Whatever follows a heading belongs to it, so it sits closer. */ .prose :is(h2,h3,h4)+*{--flow-space:var(--space-s)} .prose :is(h5,h6)+*{--flow-space:var(--space-2xs)} .prose ul,.prose ol{padding-left:var(--space-m)} .prose li+li{margin-block-start:var(--space-2xs)} /* Substack wraps every list item's text in a paragraph. The reset above flattens it; this is the gap between two of them in one item. */ .prose li>p+p{margin-block-start:var(--space-2xs)} .prose blockquote{padding-left:var(--space-m); border-left:3px solid var(--rule);color:var(--ink-soft);font-style:italic; --flow-space:var(--space-l)} /* Same reset, same fix: a quote with several paragraphs needs air between them. */ .prose blockquote>*+*{margin-block-start:var(--space-xs)} .prose figure{--flow-space:var(--space-l)} .prose figcaption{font-family:var(--font-body);font-size:var(--text-fine);color:var(--ink-faint); margin-top:var(--space-2xs);line-height:1.45;text-align:center} .prose img{margin-inline:auto} /* Emojis inside essays are Google Noto pictures (2026-10-23), sitting in the line like letters. Wins over the global img block rule and the flow rule (same specificity, later). */ .prose img.emoji{display:inline;width:auto;height:1.2em;margin:0;border-radius:0; vertical-align:-.2em} /* Images side by side: a paragraph of two or more with no blank line between. Equal columns on a wide screen, one column on a phone. */ .prose .media-row{display:flex;gap:var(--space-m);align-items:center; --flow-space:var(--space-l)} .prose .media-row>figure{flex:1 1 0;min-width:0} .prose .media-row img,.prose .media-row video{width:100%} @media(max-width:34rem){.prose .media-row{flex-direction:column;align-items:stretch;gap:var(--space-s)}} /* headlines of hope */ /* .hoh-toc is a Go deeper callout (2026-10-23); its box comes from .callout. */ .hoh-toc h2{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700;letter-spacing:.16em; text-transform:uppercase;margin:0} .hoh-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; gap:var(--space-2xs)} .hoh-toc a{font-family:var(--font-body);font-size:var(--text-fine);font-weight:650;text-decoration:none; padding:var(--space-3xs) var(--space-xs);border:1px solid var(--line);border-radius:99px; background:var(--paper);color:var(--ink-soft)} .hoh-toc a:hover{border-color:var(--hover-fill);background:var(--hover-fill);color:var(--hover-ink)} .vol,.topic{scroll-margin-top:var(--space-xl)} /* topic links: under a post's title, on /writing and on /topics */ .chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2xs)} .chips a{font-family:var(--font-body);font-size:var(--text-fine);font-weight:650;text-decoration:none; padding:var(--space-3xs) var(--space-xs);border:1px solid var(--line);border-radius:99px; background:var(--paper);color:var(--ink-soft)} .chips a:hover{border-color:var(--hover-fill);background:var(--hover-fill);color:var(--hover-ink)} .article header .chips{--flow-space:var(--space-s)} /* A mid-paragraph anchor, e.g. . It has no padding of its own, so it needs to clear the sticky masthead by itself. */ .prose span[id]{scroll-margin-top:var(--space-3xl)} .prose h3.vol{border-top:1px solid var(--line);padding-block-start:var(--space-xl); --flow-space:var(--space-xl)} /* video embeds -- see youtube_embed() in build.py */ .prose .embed{position:relative;aspect-ratio:16/9;border-radius:8px; overflow:hidden;background:var(--paper-2);border:1px solid var(--line); --flow-space:var(--space-l)} .prose .embed.four-three{aspect-ratio:4/3} .prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Only feed readers see this. They strip iframes, and a silent gap in the RSS is worse than a link. On the site the player is right there. */ .prose .embed-fallback{display:none} /* a song (soundcloud_embed) and a video file served from this site */ .prose .embed-audio{--flow-space:var(--space-l)} .prose video{display:block;width:100%;height:auto;border-radius:8px; background:var(--paper-2)} /* cards */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--space-s)} .card{border:1px solid var(--line);border-radius:10px;padding:var(--space-m); background:var(--paper-2);text-decoration:none;color:inherit;display:block} .card:hover{border-color:var(--hover-border)} .card h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h4); margin:0 0 var(--space-3xs);} .card p{font-family:var(--font-body);font-size:var(--text-ui);color:var(--ink-soft);margin:0;line-height:1.5} .card .tag{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--label);display:block;margin-bottom:var(--space-2xs)} /* The featured card on /top-10: square animation left, words right. The image is square already, but object-fit keeps it square if it is ever swapped for something that is not. */ .card.feature{display:grid;grid-template-columns:9.5rem minmax(0,1fr); gap:var(--space-m);align-items:center} .card.feature img{display:block;width:100%;aspect-ratio:1;object-fit:cover; border-radius:8px;background:var(--paper-2)} .card.feature h3{font-size:var(--text-h4);line-height:1.25;margin:0 0 var(--space-3xs)} .card.feature .more{display:inline-block;margin-top:var(--space-2xs);font-family:var(--font-body); font-size:var(--text-ui);font-weight:700;color:var(--link);transition:color .12s} .card.feature:hover .more{color:var(--link-hover)} @media(max-width:34rem){.card.feature{grid-template-columns:1fr;gap:var(--space-s)} .card.feature img{max-width:10rem}} /* --------------------------------------------------------------------------- /subscribe -- the price page. The monthly/yearly switch is a checkbox and two sibling selectors. No JavaScript for prices: both are in the HTML and CSS shows one of them. A static site that needs a script to display a price is a static site with a way to fail, and this is the page that must never fail. Two steps: .step1 is the email form, .step2 (#plans) is the prices. Step 2 shows when it is the #target, and step 1 steps aside. The only script on the page sets that hash after a signup; a plain link to #plans does the same with no script at all. --------------------------------------------------------------------------- */ .step1,.step2{display:flex;flex-direction:column;gap:var(--space-l)} /* :where() on the whole selector, so this scores zero and loses to the flow rule. Without it, it scored (0,1,0), came later, and zeroed the gap between the pink headline and its paragraph on both steps (fixed 2026-10-22). */ :where(.step1,.step2) :where(p,ul){margin:0} .step2{display:none} .step2:target{display:flex} .subscribe:has(.step2:target) .step1{display:none} .step2 .done:empty{display:none} .step2 .done{font-weight:700} /* The perks every price shares, said once instead of five times. The free list under the email box wears the same checkmarks. */ /* .shared is an Ask callout (2026-10-23); its box comes from .callout. */ .shared .perks,.step1 .signup .perks{list-style:none;padding:0; font-family:var(--font-body);font-size:var(--text-ui);line-height:1.5;color:var(--ink-soft); display:grid;gap:var(--space-2xs)} .shared .perks li,.step1 .signup .perks li{display:grid; grid-template-columns:1rem minmax(0,1fr);gap:var(--space-3xs)} .shared .perks li::before,.step1 .signup .perks li::before{content:"\2713"; color:var(--teal);font-weight:800} /* On /subscribe the checklist sits inside the purple signup box. */ .step1 .signup .perks{color:var(--signup-ink)} .step1 .signup .perks li::before{color:var(--signup-head)} .pricing{--flow-space:var(--space-l)} .billing{display:flex;justify-content:center} .billing label{display:inline-flex;gap:var(--space-3xs);cursor:pointer; font-family:var(--font-body);font-size:var(--text-ui);font-weight:650; background:var(--paper-2);border:1px solid var(--line);border-radius:99px; padding:var(--space-3xs)} .billing .seg{padding:var(--space-2xs) var(--space-m);border-radius:99px; color:var(--ink-soft);transition:background .15s,color .15s;white-space:nowrap} .billing .seg small{font-size:var(--text-fine);font-weight:600;opacity:.85} /* Monthly is the state the page loads in, so it wears the fill at rest and hands it over the moment the box is checked. */ .billing .seg.m{background:var(--accent);color:var(--on-accent)} #billing-yearly:checked~.billing .seg.m{background:transparent;color:var(--ink-soft)} #billing-yearly:checked~.billing .seg.y{background:var(--accent);color:var(--on-accent)} #billing-yearly:focus-visible~.billing label{outline:2px solid var(--accent); outline-offset:2px} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--space-s);align-items:stretch} .plans.ends{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))} /* Three rungs (2026-10-22): one row of three, or one column on a phone -- never two-and-an-orphan. */ .plans:not(.ends){grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:34rem){.plans:not(.ends){grid-template-columns:minmax(0,1fr)}} .plan{display:flex;flex-direction:column;gap:var(--space-xs); border:1px solid var(--line);border-radius:10px;padding:var(--space-m); background:var(--paper-2)} .plan :where(h3,p,ul,li){margin:0} .plan.tight{padding:var(--space-s);align-items:stretch;text-align:center} .plan.tight .price{font-size:var(--text-price-sm)} .plan .name{font-family:var(--font-body);font-size:var(--text-ui);font-weight:750; letter-spacing:-.01em;color:var(--label)} .plan .price{font-family:var(--font-body);font-weight:800;letter-spacing:-.04em; font-size:var(--text-price);line-height:1.05;color:var(--ink)} .plan .per{font-size:var(--text-fine);font-weight:650;letter-spacing:0;color:var(--ink-faint)} .plan .line{font-family:var(--font-body);font-size:var(--text-lead);font-weight:650;color:var(--ink)} .plan .perks{list-style:none;padding:0;font-family:var(--font-body);font-size:var(--text-ui); line-height:1.5;color:var(--ink-soft);display:grid;gap:var(--space-2xs)} .plan .perks li{display:grid;grid-template-columns:1rem minmax(0,1fr); gap:var(--space-3xs)} .plan .perks li::before{content:"\2713";color:var(--teal);font-weight:800} /* The action sits on the floor of the card, so a row of cards with different amounts of text still lines its buttons up. */ .plan .act{margin-block-start:auto;padding-block-start:var(--space-2xs)} .plan .btn{display:block;width:100%;text-align:center} /* One card forward, the way the old tier page marked a pick. Border and badge only -- the price is the same kind of thing as the four beside it. */ .plan.popular{border-color:var(--accent);box-shadow:0 5px 18px rgba(0,0,0,.1)} .plan .badge{font-family:var(--font-body);font-size:var(--text-fine);font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--label)} /* No Stripe link behind this price yet. Same rule as .tier.off: it renders flat, it never looks clickable, and it takes no hover. */ .plan .btn.off{background:var(--tier-off-fill);border-color:var(--tier-off-fill); color:var(--tier-off-ink);cursor:default;pointer-events:none} /* Price swapping. Monthly is in the document flow, yearly is hidden, and the checkbox trades them. Both are real text either way, so a reader with CSS off sees two prices rather than none. The button swaps with the price, because monthly and yearly are two different Stripe links. Tying them to the same class is what stops a card ever showing a yearly price above a monthly checkout. */ .only-y{display:none} #billing-yearly:checked~.plans .only-m,#billing-yearly:checked~.only-m{display:none} #billing-yearly:checked~.plans .only-y,#billing-yearly:checked~.only-y{display:block} @media(max-width:34rem){ .billing label{width:100%} .billing .seg{flex:1;text-align:center;padding-inline:var(--space-2xs)} } .book{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:var(--space-xl);align-items:start; padding-block:var(--space-2xl) var(--space-s)} .book h1{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h1); font-size:var(--text-title);line-height:1.05} .book p{font-size:var(--text-body);color:var(--ink-soft);max-width:34rem;--flow-space:var(--space-s)} .book img{border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.16)} .book .btn{margin-right:var(--space-2xs)} .book h2{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;color:var(--h2); font-size:var(--text-h2);line-height:1.08} .book.ebook{border-top:1px solid var(--line);padding-block-start:var(--space-xl); --flow-space:var(--space-xl)} /* The ebook cover's own title band: Golden Hour on Cosmic Periwinkle, 5.7:1. */ .soon{display:inline-block;font-family:var(--font-body);font-size:var(--text-fine);font-weight:700; letter-spacing:.14em;text-transform:uppercase;background:var(--cosmic); color:var(--golden)!important;padding:var(--space-3xs) var(--space-xs);border-radius:99px} /* Affiliate disclosure. Secondary, never faint -- the FTC wants it clear and conspicuous, so no opacity tricks and no shrinking this below .85rem. */ .fine{font-size:var(--text-fine);color:var(--ink-soft);max-width:30rem;--flow-space:var(--space-l)} /* /subscribe's "Already subscribed?", "Most readers choose..." and "No thanks" are lines people act on, not fine print: body size (Darby, 2026-10-22). */ .subscribe .fine{font-size:var(--text-body);max-width:none} @media(max-width:40rem){.book{grid-template-columns:1fr;gap:var(--space-m); padding-block-start:var(--space-xl)} .book>div:first-child{max-width:13rem}} /* --------------------------------------------------------------------------- CALLOUTS (2026-10-23, Darby). One box, five jobs: .ask white support, subscribe, the book - asking for something .note periwinkle editor's notes, warnings, updates, site notes .deeper azure ice series, related essays, sources, start here .heads-up lilac take a breath - a pause mid-essay (not warnings) .try sage steps a reader can do today In a post: > [!ask] Title (Obsidian's callout syntax), see callouts(). The 5px edge is the family resemblance - Darby liked it as a little 3-D lip. Magenta on Ask only; every other box wears its own deep shade. --------------------------------------------------------------------------- */ .callout{--co-bg:var(--co-ask);--co-line:var(--co-ask-line);--co-rim:var(--co-ask-edge); background:var(--co-bg);border:1px solid var(--co-line); border-left:5px solid var(--co-rim);border-radius:10px; padding:var(--space-s) var(--space-m);font-family:var(--font-body); font-size:var(--text-ui);line-height:1.6;color:var(--ink);font-style:normal} .callout.note{--co-bg:var(--co-note);--co-line:var(--co-note-line);--co-rim:var(--co-note-edge)} .callout.deeper{--co-bg:var(--co-deeper);--co-line:var(--co-deeper-line);--co-rim:var(--co-deeper-edge)} .callout.heads-up{--co-bg:var(--co-heads);--co-line:var(--co-heads-line);--co-rim:var(--co-heads-edge)} .callout.try{--co-bg:var(--co-try);--co-line:var(--co-try-line);--co-rim:var(--co-try-edge)} /* Inside the box: paragraph to paragraph is --space-s, title to its words --space-xs. Set on the children, never on the box - on the box it would move the gap above it, which belongs to the page. */ .callout>*{margin-block:0} .callout>*+*{margin-block-start:var(--space-s)} .callout>.co-title+*{margin-block-start:var(--space-xs)} .callout .co-title,.callout strong{color:var(--co-head)} .callout .co-title{font-weight:700} .prose .callout{--flow-space:var(--space-l)} /* The footer is a band in the header's purple (2026-10-22, Darby). */ footer.site{background:var(--band);margin-top:var(--space-2xl); padding-block:var(--space-xl) var(--space-2xl); font-family:var(--font-body);font-size:var(--text-ui);color:var(--band-soft); --flow-space:var(--space-s)} footer.site a{color:var(--band-soft);text-decoration:none;margin-right:var(--space-s)} footer.site a:hover{color:var(--wordmark-darb-hover)} footer.site .fine{font-size:var(--text-fine);color:var(--band-soft);--flow-space:var(--space-s)} footer.site .disclosure{font-size:var(--text-fine);color:var(--band-faint);--flow-space:var(--space-2xs)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @media(max-width:760px){ :root{--text-body:1rem} /* 16px essay text on phones */ .hero{padding-block:var(--space-xl) var(--space-l)} .hero.plain{padding-block:var(--space-xl) 0} .masthead{position:static} .masthead .wrap{flex-direction:column;align-items:flex-start;gap:var(--space-2xs); padding-block:var(--space-2xs)} .nav{margin-left:0;gap:var(--space-xs);width:100%;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-3xs)} .nav::-webkit-scrollbar{display:none} .vol{scroll-margin-top:var(--space-s)} .signup form{flex-direction:column;align-items:stretch} .signup input[type=email]{flex:0 0 auto;width:100%} .signup .btn{width:100%} } .prose .media-row>figure.ar20{flex-grow:0.2}.prose .media-row>figure.ar22{flex-grow:0.22}.prose .media-row>figure.ar24{flex-grow:0.24}.prose .media-row>figure.ar26{flex-grow:0.26}.prose .media-row>figure.ar28{flex-grow:0.28}.prose .media-row>figure.ar30{flex-grow:0.3}.prose .media-row>figure.ar32{flex-grow:0.32}.prose .media-row>figure.ar34{flex-grow:0.34}.prose .media-row>figure.ar36{flex-grow:0.36}.prose .media-row>figure.ar38{flex-grow:0.38}.prose .media-row>figure.ar40{flex-grow:0.4}.prose .media-row>figure.ar42{flex-grow:0.42}.prose .media-row>figure.ar44{flex-grow:0.44}.prose .media-row>figure.ar46{flex-grow:0.46}.prose .media-row>figure.ar48{flex-grow:0.48}.prose .media-row>figure.ar50{flex-grow:0.5}.prose .media-row>figure.ar52{flex-grow:0.52}.prose .media-row>figure.ar54{flex-grow:0.54}.prose .media-row>figure.ar56{flex-grow:0.56}.prose .media-row>figure.ar58{flex-grow:0.58}.prose .media-row>figure.ar60{flex-grow:0.6}.prose .media-row>figure.ar62{flex-grow:0.62}.prose .media-row>figure.ar64{flex-grow:0.64}.prose .media-row>figure.ar66{flex-grow:0.66}.prose .media-row>figure.ar68{flex-grow:0.68}.prose .media-row>figure.ar70{flex-grow:0.7}.prose .media-row>figure.ar72{flex-grow:0.72}.prose .media-row>figure.ar74{flex-grow:0.74}.prose .media-row>figure.ar76{flex-grow:0.76}.prose .media-row>figure.ar78{flex-grow:0.78}.prose .media-row>figure.ar80{flex-grow:0.8}.prose .media-row>figure.ar82{flex-grow:0.82}.prose .media-row>figure.ar84{flex-grow:0.84}.prose .media-row>figure.ar86{flex-grow:0.86}.prose .media-row>figure.ar88{flex-grow:0.88}.prose .media-row>figure.ar90{flex-grow:0.9}.prose .media-row>figure.ar92{flex-grow:0.92}.prose .media-row>figure.ar94{flex-grow:0.94}.prose .media-row>figure.ar96{flex-grow:0.96}.prose .media-row>figure.ar98{flex-grow:0.98}.prose .media-row>figure.ar100{flex-grow:1}.prose .media-row>figure.ar102{flex-grow:1.02}.prose .media-row>figure.ar104{flex-grow:1.04}.prose .media-row>figure.ar106{flex-grow:1.06}.prose .media-row>figure.ar108{flex-grow:1.08}.prose .media-row>figure.ar110{flex-grow:1.1}.prose .media-row>figure.ar112{flex-grow:1.12}.prose .media-row>figure.ar114{flex-grow:1.14}.prose .media-row>figure.ar116{flex-grow:1.16}.prose .media-row>figure.ar118{flex-grow:1.18}.prose .media-row>figure.ar120{flex-grow:1.2}.prose .media-row>figure.ar122{flex-grow:1.22}.prose .media-row>figure.ar124{flex-grow:1.24}.prose .media-row>figure.ar126{flex-grow:1.26}.prose .media-row>figure.ar128{flex-grow:1.28}.prose .media-row>figure.ar130{flex-grow:1.3}.prose .media-row>figure.ar132{flex-grow:1.32}.prose .media-row>figure.ar134{flex-grow:1.34}.prose .media-row>figure.ar136{flex-grow:1.36}.prose .media-row>figure.ar138{flex-grow:1.38}.prose .media-row>figure.ar140{flex-grow:1.4}.prose .media-row>figure.ar142{flex-grow:1.42}.prose .media-row>figure.ar144{flex-grow:1.44}.prose .media-row>figure.ar146{flex-grow:1.46}.prose .media-row>figure.ar148{flex-grow:1.48}.prose .media-row>figure.ar150{flex-grow:1.5}.prose .media-row>figure.ar152{flex-grow:1.52}.prose .media-row>figure.ar154{flex-grow:1.54}.prose .media-row>figure.ar156{flex-grow:1.56}.prose .media-row>figure.ar158{flex-grow:1.58}.prose .media-row>figure.ar160{flex-grow:1.6}.prose .media-row>figure.ar162{flex-grow:1.62}.prose .media-row>figure.ar164{flex-grow:1.64}.prose .media-row>figure.ar166{flex-grow:1.66}.prose .media-row>figure.ar168{flex-grow:1.68}.prose .media-row>figure.ar170{flex-grow:1.7}.prose .media-row>figure.ar172{flex-grow:1.72}.prose .media-row>figure.ar174{flex-grow:1.74}.prose .media-row>figure.ar176{flex-grow:1.76}.prose .media-row>figure.ar178{flex-grow:1.78}.prose .media-row>figure.ar180{flex-grow:1.8}.prose .media-row>figure.ar182{flex-grow:1.82}.prose .media-row>figure.ar184{flex-grow:1.84}.prose .media-row>figure.ar186{flex-grow:1.86}.prose .media-row>figure.ar188{flex-grow:1.88}.prose .media-row>figure.ar190{flex-grow:1.9}.prose .media-row>figure.ar192{flex-grow:1.92}.prose .media-row>figure.ar194{flex-grow:1.94}.prose .media-row>figure.ar196{flex-grow:1.96}.prose .media-row>figure.ar198{flex-grow:1.98}.prose .media-row>figure.ar200{flex-grow:2}.prose .media-row>figure.ar202{flex-grow:2.02}.prose .media-row>figure.ar204{flex-grow:2.04}.prose .media-row>figure.ar206{flex-grow:2.06}.prose .media-row>figure.ar208{flex-grow:2.08}.prose .media-row>figure.ar210{flex-grow:2.1}.prose .media-row>figure.ar212{flex-grow:2.12}.prose .media-row>figure.ar214{flex-grow:2.14}.prose .media-row>figure.ar216{flex-grow:2.16}.prose .media-row>figure.ar218{flex-grow:2.18}.prose .media-row>figure.ar220{flex-grow:2.2}.prose .media-row>figure.ar222{flex-grow:2.22}.prose .media-row>figure.ar224{flex-grow:2.24}.prose .media-row>figure.ar226{flex-grow:2.26}.prose .media-row>figure.ar228{flex-grow:2.28}.prose .media-row>figure.ar230{flex-grow:2.3}.prose .media-row>figure.ar232{flex-grow:2.32}.prose .media-row>figure.ar234{flex-grow:2.34}.prose .media-row>figure.ar236{flex-grow:2.36}.prose .media-row>figure.ar238{flex-grow:2.38}.prose .media-row>figure.ar240{flex-grow:2.4}.prose .media-row>figure.ar242{flex-grow:2.42}.prose .media-row>figure.ar244{flex-grow:2.44}.prose .media-row>figure.ar246{flex-grow:2.46}.prose .media-row>figure.ar248{flex-grow:2.48}.prose .media-row>figure.ar250{flex-grow:2.5}.prose .media-row>figure.ar252{flex-grow:2.52}.prose .media-row>figure.ar254{flex-grow:2.54}.prose .media-row>figure.ar256{flex-grow:2.56}.prose .media-row>figure.ar258{flex-grow:2.58}.prose .media-row>figure.ar260{flex-grow:2.6}.prose .media-row>figure.ar262{flex-grow:2.62}.prose .media-row>figure.ar264{flex-grow:2.64}.prose .media-row>figure.ar266{flex-grow:2.66}.prose .media-row>figure.ar268{flex-grow:2.68}.prose .media-row>figure.ar270{flex-grow:2.7}.prose .media-row>figure.ar272{flex-grow:2.72}.prose .media-row>figure.ar274{flex-grow:2.74}.prose .media-row>figure.ar276{flex-grow:2.76}.prose .media-row>figure.ar278{flex-grow:2.78}.prose .media-row>figure.ar280{flex-grow:2.8}.prose .media-row>figure.ar282{flex-grow:2.82}.prose .media-row>figure.ar284{flex-grow:2.84}.prose .media-row>figure.ar286{flex-grow:2.86}.prose .media-row>figure.ar288{flex-grow:2.88}.prose .media-row>figure.ar290{flex-grow:2.9}.prose .media-row>figure.ar292{flex-grow:2.92}.prose .media-row>figure.ar294{flex-grow:2.94}.prose .media-row>figure.ar296{flex-grow:2.96}.prose .media-row>figure.ar298{flex-grow:2.98}.prose .media-row>figure.ar300{flex-grow:3}.prose .media-row>figure.ar302{flex-grow:3.02}.prose .media-row>figure.ar304{flex-grow:3.04}.prose .media-row>figure.ar306{flex-grow:3.06}.prose .media-row>figure.ar308{flex-grow:3.08}.prose .media-row>figure.ar310{flex-grow:3.1}.prose .media-row>figure.ar312{flex-grow:3.12}.prose .media-row>figure.ar314{flex-grow:3.14}.prose .media-row>figure.ar316{flex-grow:3.16}.prose .media-row>figure.ar318{flex-grow:3.18}.prose .media-row>figure.ar320{flex-grow:3.2}.prose .media-row>figure.ar322{flex-grow:3.22}.prose .media-row>figure.ar324{flex-grow:3.24}.prose .media-row>figure.ar326{flex-grow:3.26}.prose .media-row>figure.ar328{flex-grow:3.28}.prose .media-row>figure.ar330{flex-grow:3.3}.prose .media-row>figure.ar332{flex-grow:3.32}.prose .media-row>figure.ar334{flex-grow:3.34}.prose .media-row>figure.ar336{flex-grow:3.36}.prose .media-row>figure.ar338{flex-grow:3.38}.prose .media-row>figure.ar340{flex-grow:3.4}.prose .media-row>figure.ar342{flex-grow:3.42}.prose .media-row>figure.ar344{flex-grow:3.44}.prose .media-row>figure.ar346{flex-grow:3.46}.prose .media-row>figure.ar348{flex-grow:3.48}.prose .media-row>figure.ar350{flex-grow:3.5}.prose .media-row>figure.ar352{flex-grow:3.52}.prose .media-row>figure.ar354{flex-grow:3.54}.prose .media-row>figure.ar356{flex-grow:3.56}.prose .media-row>figure.ar358{flex-grow:3.58}.prose .media-row>figure.ar360{flex-grow:3.6}.prose .media-row>figure.ar362{flex-grow:3.62}.prose .media-row>figure.ar364{flex-grow:3.64}.prose .media-row>figure.ar366{flex-grow:3.66}.prose .media-row>figure.ar368{flex-grow:3.68}.prose .media-row>figure.ar370{flex-grow:3.7}.prose .media-row>figure.ar372{flex-grow:3.72}.prose .media-row>figure.ar374{flex-grow:3.74}.prose .media-row>figure.ar376{flex-grow:3.76}.prose .media-row>figure.ar378{flex-grow:3.78}.prose .media-row>figure.ar380{flex-grow:3.8}.prose .media-row>figure.ar382{flex-grow:3.82}.prose .media-row>figure.ar384{flex-grow:3.84}.prose .media-row>figure.ar386{flex-grow:3.86}.prose .media-row>figure.ar388{flex-grow:3.88}.prose .media-row>figure.ar390{flex-grow:3.9}.prose .media-row>figure.ar392{flex-grow:3.92}.prose .media-row>figure.ar394{flex-grow:3.94}.prose .media-row>figure.ar396{flex-grow:3.96}.prose .media-row>figure.ar398{flex-grow:3.98}.prose .media-row>figure.ar400{flex-grow:4}.prose .media-row>figure.ar402{flex-grow:4.02}.prose .media-row>figure.ar404{flex-grow:4.04}.prose .media-row>figure.ar406{flex-grow:4.06}.prose .media-row>figure.ar408{flex-grow:4.08}.prose .media-row>figure.ar410{flex-grow:4.1}.prose .media-row>figure.ar412{flex-grow:4.12}.prose .media-row>figure.ar414{flex-grow:4.14}.prose .media-row>figure.ar416{flex-grow:4.16}.prose .media-row>figure.ar418{flex-grow:4.18}.prose .media-row>figure.ar420{flex-grow:4.2}.prose .media-row>figure.ar422{flex-grow:4.22}.prose .media-row>figure.ar424{flex-grow:4.24}.prose .media-row>figure.ar426{flex-grow:4.26}.prose .media-row>figure.ar428{flex-grow:4.28}.prose .media-row>figure.ar430{flex-grow:4.3}.prose .media-row>figure.ar432{flex-grow:4.32}.prose .media-row>figure.ar434{flex-grow:4.34}.prose .media-row>figure.ar436{flex-grow:4.36}.prose .media-row>figure.ar438{flex-grow:4.38}.prose .media-row>figure.ar440{flex-grow:4.4}.prose .media-row>figure.ar442{flex-grow:4.42}.prose .media-row>figure.ar444{flex-grow:4.44}.prose .media-row>figure.ar446{flex-grow:4.46}.prose .media-row>figure.ar448{flex-grow:4.48}.prose .media-row>figure.ar450{flex-grow:4.5}.prose .media-row>figure.ar452{flex-grow:4.52}.prose .media-row>figure.ar454{flex-grow:4.54}.prose .media-row>figure.ar456{flex-grow:4.56}.prose .media-row>figure.ar458{flex-grow:4.58}.prose .media-row>figure.ar460{flex-grow:4.6}.prose .media-row>figure.ar462{flex-grow:4.62}.prose .media-row>figure.ar464{flex-grow:4.64}.prose .media-row>figure.ar466{flex-grow:4.66}.prose .media-row>figure.ar468{flex-grow:4.68}.prose .media-row>figure.ar470{flex-grow:4.7}.prose .media-row>figure.ar472{flex-grow:4.72}.prose .media-row>figure.ar474{flex-grow:4.74}.prose .media-row>figure.ar476{flex-grow:4.76}.prose .media-row>figure.ar478{flex-grow:4.78}.prose .media-row>figure.ar480{flex-grow:4.8}.prose .media-row>figure.ar482{flex-grow:4.82}.prose .media-row>figure.ar484{flex-grow:4.84}.prose .media-row>figure.ar486{flex-grow:4.86}.prose .media-row>figure.ar488{flex-grow:4.88}.prose .media-row>figure.ar490{flex-grow:4.9}.prose .media-row>figure.ar492{flex-grow:4.92}.prose .media-row>figure.ar494{flex-grow:4.94}.prose .media-row>figure.ar496{flex-grow:4.96}.prose .media-row>figure.ar498{flex-grow:4.98}.prose .media-row>figure.ar500{flex-grow:5}