/* ========================================================================== 680 NORTH -- EDITORIAL READING STANDARD 3 October 2026 Loaded after style.css. See 680North-Article-Typography-Standard.md One head rhythm, one title size and one reading scale for the whole site. Prata stays display only. Inter stays interface only. Long-form body copy is set in Source Serif 4, which is what separates an article from a form. Never hand-type a font-size, a line-height, a measure or a head gap in a template. Give the long-form container class="prose" and it inherits all of this. If a value genuinely has to change, change the token here. ========================================================================== */ :root{ --font-text:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif; /* Head rhythm. --head-pad-top and --crumb-pad are unchanged in style.css. */ --crumb-gap:clamp(14px,1.5vw,22px); --kick-gap:clamp(8px,.9vw,13px); --h1-gap:clamp(14px,1.4vw,20px); /* One title size for every page on the site. */ --h1-page:clamp(26px,2.5vw + 8px,38px); /* The reading scale. 36rem is about 72 characters of Source Serif at 19.5px. Set in rem, not ch: ch resolves against each element's own font, so a ch measure makes a Prata subhead run far wider than the text beneath it. That is the bug this replaces. */ --read-fs:clamp(17.5px,.55vw + 14px,19.5px); --read-lh:1.62; --read-measure:36rem; --read-gap:1.05em; } /* --- 1. The gap under the breadcrumb, site-wide -------------------------- */ .crumbs{margin-bottom:var(--crumb-gap)} .main.ct .crumbs{margin-bottom:0} /* --- 2. One headline size ------------------------------------------------ */ .article-col h1,.lede h1{font-size:var(--h1-page)} .article-col h1{line-height:1.14;letter-spacing:.005em;margin-top:var(--kick-gap);text-wrap:balance} .article-col > .byline{margin-top:var(--h1-gap)} .article-col > .article-art{margin-top:clamp(18px,1.8vw,26px)} /* --- 3. The reading surface ---------------------------------------------- */ .prose{ font-family:var(--font-text); font-size:var(--read-fs); line-height:var(--read-lh); color:var(--text); font-optical-sizing:auto; font-kerning:normal; -webkit-font-smoothing:antialiased; hanging-punctuation:first allow-end; margin-top:clamp(22px,2vw,30px); } .prose > p,.prose > ul,.prose > ol,.prose > dl, .prose > h2,.prose > h3,.prose > h4,.prose > blockquote{max-width:var(--read-measure)} .prose > figure,.prose > img,.prose > table,.prose > hr, .prose > .wp-block-image,.prose > .wp-block-embed,.prose > iframe{max-width:none} .prose > p{margin:0 0 var(--read-gap);text-wrap:pretty} .prose strong,.prose b{font-weight:600;color:var(--text)} /* Drop cap. Articles only, and only when the piece opens on a paragraph. * * Chris, 4 October 2026: "arrange the A to be filled in the indent so the A is * just a little higher than the t and hits the bottom to the bookstore line." * * Solved against the live page rather than guessed. Body is 19.5px on a 31.59px * line. Prata's cap height is .83em, Source Serif's t rises .61em. The three * numbers below are the only ones that satisfy all of it: * * font-size 4.96em -> cap height 80px. Chris, second pass: "a tad taller than the * top of the paragraph". The cap now clears the t by 5px * and still finishes on the third line's baseline. * padding-top .127em -> drops the glyph onto that third baseline. Raising the * font-size moves the foot down by .815em, so this comes * DOWN whenever the size goes up. Measured 0.1px off. * margin-bottom -.23em -> holds the float's margin box near 87px, inside the * 63.2 to 94.8 window that indents exactly three lines. * At -.49em it drops to two. margin-right .114em is the * 11px gutter Chris asked for, up from 6.5px. * Do not round any of these. * * line-height MUST stay 1. The old .69 made the inline box shorter than the em * box, so half-leading went negative and the glyph floated 35px above the text. */ .single-post .prose > p:first-child::first-letter{ float:left; font-family:var(--font-display);font-weight:400; font-size:4.96em;line-height:1; color:var(--sage-ink); margin:0 .114em -.23em 0;padding-top:.127em; } /* Standfirst, for when the copy desk wants one. */ .prose > p.standfirst{font-size:1.15em;line-height:1.5;color:var(--text-dim);margin-bottom:1.15em} /* --- 4. Two clearly different subhead levels ----------------------------- */ .prose h2{ font-family:var(--font-display);font-weight:400; font-size:clamp(21px,1vw + 13px,26px); line-height:1.22;letter-spacing:.005em;color:var(--text); margin:clamp(34px,3.2vw,46px) 0 .5em;text-wrap:balance; } .prose h2::before{content:"";display:block;width:34px;height:2px;background:var(--sage);margin:0 0 .6em} .prose h3{ font-family:var(--font-ui);font-weight:600; font-size:.76em;letter-spacing:.11em;text-transform:uppercase; color:var(--sage-ink);line-height:1.35; margin:clamp(26px,2.4vw,34px) 0 .45em; } .prose h2 + p,.prose h3 + p,.prose h2 + ul,.prose h3 + ul{margin-top:0} /* --- 5. Lists, quotes, rules, captions, links ---------------------------- */ .prose ul,.prose ol{margin:0 0 var(--read-gap);padding-left:1.3em} .prose li{margin:0 0 .42em;padding-left:.1em} .prose li::marker{color:var(--sage-ink)} .prose ul > li::marker{content:"\25AA\00a0\00a0"} .prose li > ul,.prose li > ol{margin:.42em 0 0} .prose blockquote{ margin:clamp(30px,3vw,42px) 0;padding:0 0 0 clamp(18px,2vw,28px); border-left:2px solid var(--sage); font-family:var(--font-display);font-weight:400; font-size:clamp(19px,.7vw + 14px,24px);line-height:1.34;color:var(--text); } .prose blockquote p{margin:0 0 .5em;max-width:none;font-size:inherit;line-height:inherit;font-family:inherit} .prose blockquote p:last-child{margin-bottom:0} .prose blockquote cite{ display:block;margin-top:.75em;font-style:normal;font-family:var(--font-ui); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint); } .prose hr{border:0;border-top:2px solid var(--sage);width:44px;margin:clamp(32px,3vw,44px) 0} .prose figure{margin:clamp(26px,2.6vw,38px) 0} .prose figcaption{margin-top:9px;font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--text-faint);max-width:var(--read-measure)} .prose a{ color:var(--text);text-decoration:underline; text-decoration-color:var(--sage);text-decoration-thickness:1px; text-underline-offset:.16em;text-decoration-skip-ink:auto; transition:text-decoration-color .15s ease; } .prose a:hover{text-decoration-color:var(--text)} /* --- 6. The footer bleed, when the footer sits outside .wrap ------------- Shopping and Entertainment print .site-foot as a child of , not of .wrap, so the gutter-aware bleed rule never matches them and an older hardcoded -22px bleed applies instead. With no .wrap padding to cancel it the footer ends up 44px wider than the page, which is a real horizontal scrollbar at every width. Neutralise the bleed when there is no .wrap. */ body > .site-foot{ margin-left:0;margin-right:0; padding-left:var(--wrap-gutter);padding-right:var(--wrap-gutter); } /* --- 7. The author box is square ----------------------------------------- */ .author-box{align-items:flex-start} .author-avatar{width:clamp(84px,7vw,104px);aspect-ratio:1 / 1;height:auto;align-self:flex-start;border-radius:0} .author-avatar img{aspect-ratio:1 / 1;width:100%;height:100%;object-fit:cover} .author-badge{border-radius:0} @media (max-width:560px){ .author-box{flex-direction:column} .author-avatar{width:88px} } /* =========================================================================== THE SHEET Chris, 3 October 2026: "Can we add like a background to the post so it pops off the background. Give it some definition and seperation from the background." He picked the Ruled treatment from the three on offer. Measured before: .article-col, .article-grid, .article-wrap and .prose ALL computed to rgba(0,0,0,0). The story was printed straight onto --ground, and the only element on the page carrying a surface was the author box. The theme already owns five surfaces, darkest first: --band, --ground, --sheet, --raised, --thumb. style.css calls --sheet the post surface. The article is the one thing that should have been on it. This puts it there. Scoped to .article-wrap .article-col deliberately. That is the story, Terms and Privacy. The news index carries an .article-col string with no .article-wrap around it and must not pick this up. =========================================================================== */ :root{ --sheet-lift:rgba(28,31,35,.06); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --sheet-lift:rgba(0,0,0,.34); } } :root[data-theme="dark"]{ --sheet-lift:rgba(0,0,0,.34); } .article-wrap .article-col{ --sheet-pad:clamp(18px,3.2vw,40px); background:var(--sheet); border:1px solid var(--edge-soft); border-top:3px solid var(--sage); /* the ruled edge */ box-shadow:0 1px 2px var(--sheet-lift); padding:var(--sheet-pad); } /* The photograph runs to the edge of the sheet. This is the whole difference between a printed page and a box with a picture in it. The caption is pulled back onto the measure so it still reads as a caption. */ .article-wrap .article-col > .article-art{ margin-left:calc(var(--sheet-pad) * -1); margin-right:calc(var(--sheet-pad) * -1); width:auto; max-width:none; } .article-wrap .article-col > .article-art figcaption{ padding-left:var(--sheet-pad); padding-right:var(--sheet-pad); } /* The author box already sits on --raised. On --sheet that step is too small to read, so it takes a hairline instead of relying on tone alone. */ .article-wrap .article-col .author-box{ border:1px solid var(--edge-soft); } /* --- 8. The section head, with and without a breadcrumb ----------------- 4 October 2026. The breadcrumb now prints only on deep pages and on the News landing. On a section landing it repeated what the top nav and the rail already say, and it left a thin strip of text where the page should open. With the crumb gone the column has no head gap of its own, so the row gets one. Padding the row rather than the column keeps the rail and the first block in the column starting on the same line. See 680North-Section-Head-Rhythm.md. */ :root{ --head-gap-bare:clamp(20px,2.2vw,32px); } .main:not(:has(> .crumbs)){padding-top:var(--head-gap-bare)} /* :has() cannot be nested inside :has(), so the row is matched by the absence of a crumb anywhere inside it. */ .cols:not(:has(.crumbs)){padding-top:var(--head-gap-bare)} .cols:not(:has(.crumbs)) > .main{padding-top:0} /* --- 9. THE ALIGNMENT MARK ---------------------------------------------- Chris, 4 October 2026: "align the 680 North TV up as high as the sidebar divider. Use that sidebar divider for the alignment mark for the height of every new page." So a section landing opens on ONE line: the line where the sidebar divider starts. The rail heading and the first block in the content column both sit on it, and neither brings a top gap of its own. The gap from the nav is the row padding above, nothing else. A filled band (the outdoors hero, the shopping band) puts its own top edge on the line and keeps its inside padding, which is right: the band is the ink. A transparent wrapper (.sl, .art-note) loses its top padding, because its ink is the text. New section pages must follow this: do not give the first block in the column a top margin or padding. The line is the line. */ .cols:not(:has(.crumbs)) > .main{display:flow-root} .cols:not(:has(.crumbs)) > .main > :first-child, .cols:not(:has(.crumbs)) > .main > :first-child > :first-child, .cols:not(:has(.crumbs)) > .main > .pl-sr:first-child + *, .cols:not(:has(.crumbs)) > .main > :first-child > .pl-sr:first-child + *{margin-top:0} .cols:not(:has(.crumbs)) > .main > .sl:first-child, .cols:not(:has(.crumbs)) > .main > .pl-sr:first-child + .sl, .cols:not(:has(.crumbs)) > .main > :first-child > .sl:first-child, .cols:not(:has(.crumbs)) > .main > .art-note:first-child{padding-top:0} .cols:not(:has(.crumbs)) > .rail-l > .blk:first-child{padding-top:0}