/* benpage.us — BIG SKY (settled 2026-09-18). Sky above, paper below. Newsreader for headlines (Ben's pick 2026-09-18 over Zilla Slab, which read as a typewriter; Newsreader already carries the frozen article pages, so the site is one family), Atkinson Hyperlegible Next for everything else. Every face self-hosted from /assets/fonts; nothing on this site calls out to another origin. ONE system for the ten hand-written pages: /, /writing, /books, /ai, /ai/limits, /about, /contact, /escape, /business and 404.html. Every one of them carries , which is the only scope token in this file. Ben's rulings on top of the design handoff: - dates never drop below 15px, on any screen; - the app tiles are a clean two-column grid at desktop, one column on a phone: hairline border, no shadow, no corner, the claim the biggest text, the since-line under it, the screen inside the tile where there is one; - the rule where the sky meets the paper uses --horizon-sky (#4E7590), which clears 3:1 on the sky (#6E93B0 does not: 2.48:1). The one exception at the bottom: a minimal floor for the fourteen FROZEN article pages at /writing//, which link this file but carry their own design. They are everything that is NOT .paper, and all they take from here is Big Sky's chrome — the band, the masthead, the nav, the links, the footer. The rules that stand: no gradients, no rounded corners, no icons, no emoji, no modals, no counts as proof, no live clock, no tracking, nothing that moves on its own. */ /* ============================================================ FONTS — all self-hosted from /assets/fonts. No Google Fonts call anywhere. Newsreader is four static woff2 cuts (400, 400 italic, 500, 600 — there is NO heavier face; 600 is the cut Ben chose). Atkinson Hyperlegible Next is one variable file for 200–800 plus one italic, and it is the only family a heavier weight can legally be asked of. Zilla Slab was dropped on 2026-09-18 when Newsreader took the headlines; its two @font-face rules and the preload that still fetched a 26 KB face on every page came out on 2026-09-19. ============================================================ */ @font-face { font-family:"Atkinson Hyperlegible Next"; font-style:normal; font-weight:200 800; font-display:swap; src:url("/assets/fonts/AtkinsonHyperlegibleNext-var.woff2") format("woff2"); } @font-face { font-family:"Atkinson Hyperlegible Next"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/AtkinsonHyperlegibleNext-italic-var.woff2") format("woff2"); } /* Newsreader: the headline face on every page since 2026-09-18, and the frozen article pages' face. */ @font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/Newsreader-latin-400.woff2") format("woff2"); } @font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/Newsreader-latin-400-italic.woff2") format("woff2"); } @font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/Newsreader-latin-500.woff2") format("woff2"); } @font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/Newsreader-latin-600.woff2") format("woff2"); } /* ============================================================ THE TOKENS ============================================================ */ /* Every page on this site is light. Say so, so a phone in dark mode doesn't invert it. */ :root{color-scheme:light} .paper{ --sky:#D3E3F0; /* the band: masthead, page title, the home photo. Flat. */ --horizon:#6E93B0; /* every hairline on white or on the tint (3.25:1 / 3.04:1) */ --horizon-sky:#4E7590;/* the rule where sky meets paper (3.75:1 on the sky) */ --paper:#FFFFFF; --tint:#F3F7FB; --ink:#13212E; --ink2:#3E5163; /* decks, meta, dates */ --blaze:#C03A1D; /* fills only: buttons, current-nav underline, the panel rule */ --link:#A8331A; /* inline text links: same hue, one step darker */ --char:#1A1D21; /* the two dark rooms: the AI panel and the footer */ --onchar:#FFFFFF; --onchar-link:#FFD9C7; --slab:"Newsreader",Georgia,"Times New Roman",serif; --text:"Atkinson Hyperlegible Next","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --max:1200px; --gut:clamp(20px,4.5vw,64px); /* rhythm: 12 24 36 60 96 */ --s1:12px;--s2:24px;--s3:36px;--s4:60px;--s5:96px; --datecol:110px; box-sizing:border-box; -webkit-text-size-adjust:100%;text-size-adjust:100%; background:var(--paper); } .paper *,.paper *::before,.paper *::after{box-sizing:border-box} .paper body{margin:0;background:var(--paper);color:var(--ink); font:400 19px/1.6 var(--text); font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip} .paper img{display:block;max-width:100%;height:auto} /* For text only a screen reader should get: the flip's "Photo 2 of 3" announcement. Not display:none, which would take it out of the accessibility tree too. */ .paper .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .paper figure{margin:0} .paper h1,.paper h2,.paper h3,.paper p,.paper ol,.paper ul,.paper dl,.paper dd{margin:0} .paper ol,.paper ul{list-style:none;padding:0} .paper h1,.paper h2,.paper h3{text-wrap:balance} .paper p{text-wrap:pretty} .paper a{color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:3px} .paper a:hover{text-decoration-thickness:2.5px} .paper :focus-visible{outline:3px solid var(--blaze);outline-offset:3px} .paper button{font:inherit;cursor:pointer} .paper em{font-style:italic} .paper .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .paper .sep{margin-inline:10px} /* the small jobs: the text face at 600, never below 15px */ .paper .nav a,.paper .d,.paper .asof,.paper .note,.paper .when,.paper .meta, .paper figcaption,.paper .field label,.paper .btn, .paper .contact button,.paper .foot,.paper .foot-in,.paper .built,.paper .label{ font-family:var(--text);font-weight:600;font-size:15px;line-height:1.4} /* ============================================================ THE SKY — the masthead and whatever title sits in the band ============================================================ */ .paper .sky{background:var(--sky);border-bottom:1px solid var(--horizon-sky)} .paper .mast-in{display:flex;align-items:baseline;justify-content:space-between; gap:8px 32px;flex-wrap:wrap;padding-block:22px 18px} .paper .wm{font:600 26px/1 var(--slab);color:var(--ink);text-decoration:none; letter-spacing:-.01em;padding-block:9px;display:inline-block} .paper .nav{display:flex;flex-wrap:wrap;gap:0 4px} .paper .nav a{color:var(--ink);text-decoration:none;padding:12px 10px;display:inline-block; border-bottom:3px solid transparent;font-weight:500} .paper .nav a:hover{border-bottom-color:var(--ink)} .paper .nav a[aria-current]{font-weight:600;border-bottom-color:var(--blaze)} /* home hero: headline + the offer on the left, the one tilted print on the right */ .paper .hero{padding-block:var(--s3) 0} .paper .hero-g{padding-bottom:20px;display:grid; grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--s4); grid-template-areas:"head photo" "offer photo";align-items:start} .paper .headline{grid-area:head;font:600 72px/1.04 var(--slab);letter-spacing:-.02em;color:var(--ink)} .paper .offer{grid-area:offer;margin-top:var(--s2);font-size:22px;line-height:1.5;max-width:30em} .paper .offer .ox{font-weight:700} .paper .flip{grid-area:photo;justify-self:end;width:100%; align-self:start;transform:translateY(8px);position:relative;z-index:1} .paper .p-home .ledger-sec{padding-top:calc(var(--s4) + 24px)} /* page titles: the band holds the title (About also holds the headshot) */ .paper .pagehead{padding-block:var(--s2) var(--s4)} .paper .pagehead-g{display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s4);align-items:start} .paper .pagehead-t{display:grid;gap:var(--s2);max-width:40em} .paper .pagehead .pageintro{max-width:32em} .paper .pagehead .claim{margin:0;max-width:16em} .paper .pt{font:600 88px/.96 var(--slab);letter-spacing:-.025em;color:var(--ink)} .paper .headshot{width:260px} .paper .p-about .headshot{margin-bottom:calc(-1 * var(--s4) - 60px);align-self:end} .paper .p-about .ground>.sec:first-child{padding-top:calc(var(--s4) + 72px)} /* ============================================================ PRINTS — one tilted print, on Home. Everywhere else: flat and bordered. ============================================================ */ .paper .print{background:var(--paper)} .paper .print--flat{padding:8px;box-shadow:0 0 0 1px rgba(19,33,46,.28)} .paper .print--tilt{padding:12px 12px 26px;display:block; box-shadow:0 1px 2px rgba(19,33,46,.16),0 12px 28px rgba(19,33,46,.14); transform:rotate(-1.5deg);transform-origin:50% 50%} .paper .print img{width:100%} .paper .flip .frames{cursor:pointer} .paper .flip .frame{aspect-ratio:4/5;object-fit:cover} .paper .flip .frame[hidden]{display:none} .paper .flip .picks{display:flex;justify-content:center;gap:4px;padding-top:14px} .paper .pick{width:44px;height:44px;min-height:44px;border:0;background:none;border-radius:50%; font:600 15px/1 var(--text);color:var(--ink2)} .paper .pick[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .paper .pick:hover{color:var(--ink)} /* ============================================================ THE GROUND ============================================================ */ .paper .ground{padding-bottom:var(--s5)} .paper .sec{padding-top:var(--s4)} .paper .intro-sec{padding-top:var(--s3)} .paper .pageintro,.paper .intro{display:grid;gap:var(--s1);max-width:34em;color:var(--ink)} .paper .pageintro{font-size:20px} .paper .follow-line{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:center; gap:12px 18px;color:var(--ink2);font-size:19px} .paper .btn{display:inline-block;background:var(--blaze);color:#fff;text-decoration:none; font-weight:600;padding:14px 26px;border:0;min-height:48px;line-height:20px} .paper .btn:hover{background:#A8331A} /* exploring: the sheet on the paper, a rule per row */ .paper .ledger{border-top:3px solid var(--ink);background:var(--tint);padding:0 28px 8px} .paper .ledger-head{display:flex;justify-content:space-between;align-items:baseline; flex-wrap:wrap;gap:6px 24px;padding-block:18px 14px} .paper .ledger-head h2{font:600 40px/1.05 var(--slab);letter-spacing:-.015em} .paper .asof{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums} .paper .lrow{display:grid;grid-template-columns:var(--datecol) minmax(0,1fr); column-gap:var(--s2);padding-block:16px;border-top:1px solid var(--horizon);align-items:baseline} .paper .lrow dt{font:600 22px/1.2 var(--slab)} .paper .lrow dd{max-width:42em} /* section heads */ .paper .sh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap; gap:6px 24px;padding-bottom:10px;border-bottom:3px solid var(--ink)} .paper .sh h2{font:600 40px/1.05 var(--slab);letter-spacing:-.015em} .paper .note{color:var(--ink2);font-weight:600} .paper a.note{color:var(--link);padding-block:12px;display:inline-block} /* dated rows: the date in its own column, baseline to the title, a hairline per row */ .paper .log .row{display:grid;grid-template-columns:var(--datecol) minmax(0,1fr); column-gap:var(--s2);padding-block:18px;border-bottom:1px solid var(--horizon);align-items:baseline} .paper .d{font-weight:600;font-size:15px;color:var(--ink2); font-variant-numeric:tabular-nums;white-space:nowrap} .paper .log .w{min-width:0} .paper .log .t{font:600 24px/1.2 var(--slab);color:var(--ink);text-decoration:none} .paper .log .t:hover{text-decoration:underline;text-decoration-thickness:2px} .paper .log .dk{color:var(--ink2)} /* the newest piece + the AI panel */ .paper .pair-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s4);align-items:start} .paper .label{display:block;color:var(--ink2);padding-bottom:10px; border-bottom:3px solid var(--ink);margin-bottom:var(--s2)} .paper .ctitle{font:600 36px/1.08 var(--slab);letter-spacing:-.015em} .paper .ctitle a{color:var(--ink);text-decoration:none} .paper .ctitle a:hover{text-decoration:underline} .paper .deck{margin-top:10px;color:var(--ink2);font-size:20px} .paper .cbody{margin-top:var(--s2);display:grid;gap:var(--s1)} .paper .more{display:inline-block;margin-top:var(--s2);font-weight:600} .paper .osbox{background:var(--char);color:var(--onchar);padding:36px;border-top:4px solid var(--blaze)} .paper .osbox .label{color:var(--onchar);border-bottom-color:var(--onchar)} .paper .osbox .ctitle{color:var(--onchar);font-size:34px} .paper .osbox .cbody{color:var(--onchar);font-size:18px} .paper .osbox .more{color:var(--onchar-link)} .paper .osbox a:focus-visible{outline-color:var(--onchar-link)} /* the closer */ .paper .closer{padding-top:var(--s4)} .paper .ask{font:600 30px/1.3 var(--slab);max-width:26em} .paper .ask+.ask{margin-top:var(--s2)} .paper .backline{font-weight:600;margin-top:var(--s3)} .paper .closer-g{display:grid;grid-template-columns:minmax(0,7fr) 300px;gap:var(--s4);align-items:center} .paper .shot--close{width:100%} /* ============================================================ BOOKS — no date column; the state line carries the date ============================================================ */ .paper .booklist{margin-top:var(--s2)} .paper .book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s4);row-gap:8px;padding-block:18px;border-bottom:1px solid var(--horizon); align-items:start} .paper .btitle{font:600 34px/1.08 var(--slab);letter-spacing:-.015em} .paper .bbody{display:grid;gap:10px;max-width:38em} .paper .state{font-weight:700} .paper .when{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .paper .raise a{font-weight:600} .paper .book--pub{background:var(--tint);padding-inline:24px;margin-top:var(--s2);border-bottom:0} /* ============================================================ BEATS — a head on the left, the prose and its photos on the right ============================================================ */ .paper .beat-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:var(--s4);row-gap:var(--s3)} .paper .beat h2{font:600 40px/1.05 var(--slab);letter-spacing:-.015em} .paper .prose{display:grid;gap:var(--s1);max-width:36em} /* a beat with no head: the prose takes the whole measure */ .paper .prose--wide{grid-column:1/-1;max-width:44em;font-size:21px} .paper .prose a{font-weight:600} .paper .figs{grid-column:2;display:grid;gap:var(--s2);align-items:start} .paper .figs--wide{grid-template-columns:minmax(0,1fr)} .paper .figs--aside,.paper .figs--pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .paper .figs .shot img{aspect-ratio:4/5;object-fit:cover} .paper .figs--wide .shot img{aspect-ratio:3/2} /* ============================================================ CONTACT — plain fields, hairlines, no card, no shadow ============================================================ */ .paper .contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px; max-width:760px;padding:32px;border:1px solid var(--horizon)} .paper .field{display:grid;gap:8px;grid-column:1/-1} .paper .field--half{grid-column:span 1} .paper .field label{font-weight:600;color:var(--ink)} .paper .field input,.paper .field textarea{font:inherit;width:100%;max-width:100%; padding:12px 14px;min-height:50px;border:1px solid var(--horizon);border-radius:0; background:#fff;color:var(--ink);line-height:1.4} .paper .field textarea{min-height:180px;resize:vertical} .paper .field input:hover,.paper .field textarea:hover{border-color:var(--ink2)} .paper .field input:focus,.paper .field textarea:focus{outline:none;border-color:var(--ink); box-shadow:0 0 0 3px rgba(192,58,29,.25)} .paper .contact-actions{grid-column:1/-1;display:grid;justify-items:start;gap:14px;margin-top:6px} .paper .contact button{padding:14px 30px;font-size:15px} .paper .contact-note{color:var(--ink2);font-size:16px;max-width:36em} /* ============================================================ MY AI OS ============================================================ */ .paper .aihead{padding-top:var(--s3)} .paper .aihead-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--s4);row-gap:var(--s3);align-items:start} .paper .explain{display:grid;gap:var(--s1);max-width:36em} .paper .claim{font:600 44px/1.06 var(--slab);letter-spacing:-.018em} .paper .fact{border-top:3px solid var(--ink);padding-top:16px} .paper .fact h2{font:600 26px/1.1 var(--slab);margin-bottom:10px} .paper .fact p{font-size:18px} .paper .shotfig{margin-top:var(--s2);max-width:900px} .paper .shotfig img{width:100%;border:1px solid var(--horizon)} .paper .shotfig figcaption{margin-top:10px;text-align:left;color:var(--ink2);line-height:1.45} .paper .plog .row{padding-block:22px} .paper .pt3{font:600 26px/1.15 var(--slab)} .paper .pt3 a{color:var(--ink);text-decoration:none} .paper .pt3 a:hover{text-decoration:underline} .paper .plog .dk{margin-block:8px 10px;max-width:42em;display:block} .paper .go{font-weight:600} .paper .mark{color:var(--ink2);font-size:16px;margin-bottom:6px;display:block} .paper .prow--lead{background:var(--tint);border-top:1px solid var(--horizon); padding-inline:20px;margin-inline:-20px} /* the apps: a clean two-column grid, a hairline each, no shadow, no corner. The claim is the biggest thing on the tile; the since-line sits under it; the screen, where one exists, sits inside the tile under that. (Ben, 18 Sep) */ .paper .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2);margin-top:var(--s2);align-items:start} .paper .tile{border:1px solid var(--horizon);background:var(--paper);border-radius:0;box-shadow:none; padding:24px;display:grid;gap:8px;align-content:start} .paper .aclaim{font:600 26px/1.15 var(--slab);letter-spacing:-.01em} .paper .tile .meta{display:block;color:var(--ink2);font-weight:600; font-variant-numeric:tabular-nums;font-size:15px} .paper .tile .meta+.meta{font-weight:400;font-size:16px} .paper .tile .aname{font:600 22px/1.2 var(--slab);color:var(--blaze);margin-bottom:6px} .paper .tile .tnote{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink)} .paper .shotfig--tile{margin-top:12px;max-width:none} .paper .limitline{font:600 26px/1.35 var(--slab);max-width:30em} /* the whole sentence is the link (Ben's markup); only the verb carries the underline */ .paper .limitline a{color:var(--ink);text-decoration:none} .paper .limitline a:hover .go{text-decoration-thickness:2.5px} .paper .limitline .go{font:inherit;color:var(--link); text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px} .paper .door .prose{font-size:21px} /* ============================================================ THE DRAFT MARKS — Ben's editing marks. Only /ai/, /ai/limits/, /about/ and /contact/ carry them. They never drop below 15px. ============================================================ */ .paper .draftnote{color:var(--ink2);font-style:italic;font-size:16px;line-height:1.5} .paper .mine{font-family:var(--text);font-size:15px;font-weight:600;letter-spacing:.04em; color:var(--ink);background:var(--sky);box-shadow:inset 0 0 0 1px var(--horizon); padding:.1em .45em;white-space:nowrap} .paper .ask-ben{color:var(--ink2);font-style:italic} /* ============================================================ THE FOOTER — the second dark room ============================================================ */ .paper .foot{background:var(--char);color:var(--onchar)} .paper .foot-in{display:flex;justify-content:space-between;gap:10px 32px;flex-wrap:wrap; padding-block:28px 40px} .paper .foot a{color:var(--onchar-link);text-decoration-thickness:1px} .paper .foot a:focus-visible{outline-color:var(--onchar-link)} .paper .foot .sep{color:#9AA3AC} /* ---------- tablet ---------- */ @media (max-width:899px){ .paper .hero-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "offer" "photo"} .paper .headline{font-size:52px;line-height:1.08} .paper .flip{justify-self:start;width:min(100%,380px);margin-top:var(--s3)} .paper .pt{font-size:64px} .paper .pagehead-g{grid-template-columns:minmax(0,1fr)} .paper .headshot{margin-top:var(--s2);width:220px} .paper .pair-g,.paper .aihead-g,.paper .beat-g,.paper .closer-g,.paper .book{ grid-template-columns:minmax(0,1fr)} .paper .figs{grid-column:1} .paper .beat h2{margin-bottom:-12px} .paper .shot--close{max-width:300px} } /* ---------- phone ---------- */ @media (max-width:560px){ .paper{--s4:48px;--s5:72px} .paper body{font-size:17px;line-height:1.65} .paper .nav a,.paper .note,.paper .asof,.paper .when,.paper figcaption, .paper .field label,.paper .btn,.paper .contact button,.paper .foot-in,.paper .foot a, .paper .sep,.paper .built,.paper .label{font-size:16px} .paper .mast-in{flex-direction:column;align-items:flex-start;gap:6px;padding-block:18px 8px} .paper .nav{margin-left:-7px} .paper .nav a{padding:11px 7px} .paper .hero{padding-block:var(--s2) 40px} .paper .headline{font-size:36px;line-height:1.14;letter-spacing:-.015em} .paper .offer{font-size:17px;line-height:1.5;margin-top:18px} .paper .flip{width:calc(100% - 16px);margin-inline:8px;margin-top:20px;transform:translateY(56px)} .paper .p-home .ledger-sec{padding-top:calc(48px + 56px)} .paper .ledger{padding-inline:16px} .paper .pt{font-size:44px;line-height:1} .paper .pagehead .claim{font-size:26px} .paper .pageintro{font-size:17px} .paper .ledger-head h2,.paper .sh h2,.paper .beat h2{font-size:30px} .paper .lrow{grid-template-columns:minmax(0,1fr);row-gap:4px;padding-block:14px} .paper .log .row{grid-template-columns:minmax(0,1fr);row-gap:6px;padding-block:16px} .paper .d{font-size:15px} /* Ben, 18 Sep: dates never drop to 13 */ .paper .log .t{font-size:22px} .paper .ctitle,.paper .claim{font-size:30px} .paper .osbox{padding:24px} .paper .osbox .ctitle{font-size:28px} .paper .osbox .cbody{font-size:17px} .paper .deck{font-size:18px} .paper .book{grid-template-columns:minmax(0,1fr)} .paper .btitle{font-size:28px} .paper .pt3,.paper .aclaim{font-size:23px} .paper .figs--aside,.paper .figs--pair{grid-template-columns:minmax(0,1fr)} .paper .figs .shot img{aspect-ratio:4/5} .paper .closer-g{grid-template-columns:minmax(0,1fr)} .paper .shot--close{max-width:none;width:calc(100% - 16px);margin-inline:8px} .paper .ask{font-size:24px} .paper .tiles{grid-template-columns:minmax(0,1fr)} /* one column on a phone */ .paper .pagehead{padding-bottom:36px} .paper .tile{padding:20px} .paper .tile .meta{font-size:15px} .paper .tile .meta+.meta{font-size:16px} .paper .shotfig img{max-height:320px;object-fit:cover;object-position:left top} .paper .contact{grid-template-columns:minmax(0,1fr);padding:20px;margin-inline:-4px} .paper .field--half{grid-column:1/-1} .paper .contact button{width:100%;min-height:48px} .paper .contact-note{font-size:16px} .paper .limitline{font-size:22px} .paper .door .prose{font-size:18px} .paper .prow--lead{padding-inline:16px;margin-inline:-16px} .paper .foot-in{flex-direction:column;gap:14px} .paper .foot .sep{margin-inline:8px} /* standalone action links get a 44px target on a phone */ .paper .more,.paper .go,.paper .backline a,.paper .raise a,.paper a.note{ display:inline-flex;align-items:center;min-height:44px} /* inline links that carry the navigation get one too: padding grows the hit box, not the line box, so the desktop look and the phone layout are untouched */ .paper .foot a{padding-block:12px} /* 22px of type + 22px of padding = a 44px target on the /writing/ titles, which were 40px. Padding on an inline box grows the hit area without moving the line, so the list looks the same. */ .paper .log .t{padding-block:11px} /* Inline links inside running prose cannot reach 44px: each of these sits on a one-line paragraph with 12px of grid gap either side, so 3px of leading + 12px of gap + 3px of leading = 18px between one link and the next. 9px a side is the most that can be added before two links in neighbouring paragraphs start overlapping each other, and it takes them from 21-28px to 39-46px. Measured, not guessed. */ .paper .pageintro a,.paper .prose a,.paper .contact-note a{padding-block:9px} .paper .limitline .go{display:inline;min-height:0} } @media (prefers-reduced-motion:reduce){.paper *{transition:none!important;animation:none!important}} /* ============================================================ COMPATIBILITY FLOOR — the fourteen FROZEN article pages at /writing//. They link this file but carry their own inline design. What they take from here is Big Sky's CHROME — the sky band, the masthead, the nav, the link colour and the charcoal footer — wrapped around an article body this file leaves alone (its own measure, its own cream). Nothing here rebuilds them. When the writing store re-renders those pages, this whole block goes. ============================================================ */ html:not(.paper){ --f-paper:#faf9f4; /* matches the cream the article section paints inline */ --f-ink:#13212E; --f-body:#3a352c; --f-soft:#5a5a5a; --f-sky:#D3E3F0; --f-horizon:#4E7590; --f-link:#A8331A; --f-char:#1A1D21; --f-onchar:#FFFFFF; --f-onchar-link:#FFD9C7; --f-slab:"Newsreader",Georgia,"Times New Roman",serif; --f-text:"Atkinson Hyperlegible Next","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --f-col:1060px; color-scheme:light; background:var(--f-paper)} html:not(.paper) body{margin:0;padding:0;color:var(--f-body);background:var(--f-paper); font:400 18px/1.55 var(--f-slab);overflow-x:clip} html:not(.paper) a{color:var(--f-link)} html:not(.paper) .bp-prose a{color:var(--f-link)} html:not(.paper) .page{max-width:38rem;margin:0 auto;padding:34px 20px 56px} html:not(.paper) :focus-visible{outline:3px solid #C03A1D;outline-offset:3px} /* the sky band: full-bleed behind the header, the horizon rule inside it */ html:not(.paper) header.top{max-width:none;margin:0;padding:26px 20px 14px; background:var(--f-sky);border-bottom:1px solid var(--f-horizon)} html:not(.paper) .masthead{max-width:var(--f-col);margin:0 auto; font:600 30px/1 var(--f-slab);letter-spacing:-.01em;color:var(--f-ink)} html:not(.paper) .masthead a{color:inherit;text-decoration:none} html:not(.paper) .rule{max-width:var(--f-col);margin:13px auto 4px; border:0;border-top:1px solid var(--f-horizon)} html:not(.paper) .dateline{max-width:var(--f-col);margin:0 auto; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0 18px; font:600 15px/1.4 var(--f-text);text-transform:none;letter-spacing:0;color:var(--f-ink)} html:not(.paper) .dateline nav{display:flex;flex-wrap:wrap;gap:0 4px;margin-inline:-10px} html:not(.paper) .dateline nav a{margin-left:0;color:var(--f-ink);text-decoration:none; font-weight:500;padding:12px 10px;display:inline-block;border-bottom:3px solid transparent} html:not(.paper) .dateline nav a:hover{border-bottom-color:var(--f-ink)} /* The ask comes AFTER the words, never over them. The "Read along on Substack" line that used to sit under the dateline came off all fourteen frozen pages on 2026-09-19 (the constitution's rule), so .frozen-follow has no users left and its rules are gone with it. The end-of-essay line (.frozen-ask, below) is the one that stays. Three tells the frozen generator baked in as INLINE styles, neutralised here because the pages themselves are frozen. The drop cap wins on specificity alone; the other two are inline, so they need !important to reach. */ html:not(.paper) .bp-prose > p:first-of-type::first-letter{ float:none;font-family:inherit;font-weight:inherit;font-size:inherit; line-height:inherit;padding:0;color:inherit} /* the tag row is the div straight after the prose: "Filed under" + one chip */ html:not(.paper) .bp-prose + div > span:first-child{ text-transform:none!important;letter-spacing:0!important} html:not(.paper) .bp-prose + div > span:nth-child(2){ border-radius:0!important;background:transparent!important; box-shadow:inset 0 0 0 1px rgba(19,33,46,.28)!important} /* the one line that replaced the "leave your email" box with no field */ html:not(.paper) .frozen-ask{margin:64px 0 0;padding-top:26px; border-top:1px solid rgba(19,33,46,.14)} html:not(.paper) .frozen-ask p{margin:0;font:400 21px/1.45 var(--f-slab);color:var(--f-ink)} html:not(.paper) .mine{font-family:var(--f-text);font-size:15px;font-weight:600; letter-spacing:.04em;color:var(--f-link)} /* the charcoal room at the bottom, same as the site's */ html:not(.paper) footer{max-width:none;margin:56px 0 0;padding:26px 20px 34px; background:var(--f-char);color:var(--f-onchar);border-top:0; font:600 15px/1.5 var(--f-text)} html:not(.paper) footer p{max-width:var(--f-col);margin:0 auto 6px} html:not(.paper) footer a{color:var(--f-onchar-link)} @media (max-width:480px){ html:not(.paper) .masthead{font-size:26px} html:not(.paper) body{font-size:17px} html:not(.paper) .dateline{flex-direction:column;align-items:flex-start;gap:2px} html:not(.paper) .dateline nav{margin-inline:0} html:not(.paper) .dateline nav a{padding-inline:0;margin-right:18px} html:not(.paper) .frozen-ask p{font-size:19px} } /* ============================================================ PRINT — white paper, ink text. No sky band, no dark room, no photos bleeding a page of toner. The links print their URL after them, because on paper a blue word is a dead end. ============================================================ */ @media print{ .paper,.paper body,html:not(.paper),html:not(.paper) body{ background:#fff!important;color:#000!important} .paper .sky,.paper .mast,.paper .hero,.paper .pagehead, html:not(.paper) header.top{background:#fff!important;border-bottom:1px solid #000} .paper .foot,html:not(.paper) footer{ background:#fff!important;color:#000!important;border-top:1px solid #000;padding:12px 0} .paper .foot a,html:not(.paper) footer a{color:#000!important} .paper a,html:not(.paper) a{color:#000!important;text-decoration:underline} .paper .osbox,.paper .panel{background:#fff!important;color:#000!important; border:1px solid #000} .paper .osbox a,.paper .panel a{color:#000!important} .paper .nav,.paper .picks,.paper .flip .frames .frame:not(:first-child), .paper .btn,html:not(.paper) .dateline nav{display:none} /* If the reader flipped to photo 2 or 3, frame 1 carries the hidden attribute and frames 2-3 are print-hidden above — so the hero printed as a hole. Frame 1 is the one that prints, whatever is on screen. */ .paper .flip .frame:first-child{display:block!important} .paper .shotfig,.paper figure img{break-inside:avoid;max-width:100%} .paper .sec,html:not(.paper) .page{padding-block:12px} .paper h1,.paper h2,.paper h3,html:not(.paper) .bp-prose h2{break-after:avoid} .paper p,.paper li,html:not(.paper) .bp-prose p{orphans:3;widows:3} .paper .mine,.paper .draftnote,html:not(.paper) .mine{display:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all} }