/* ========================================================================= Societal Socks — THE BLOG. Task P155-#28. Loaded AFTER ../brand.css and site.css, and it adds to them rather than restating them. Everything structural the blog needs already exists: brand.css the black, the periwinkle, Sora / Montserrat / Space Grotesk site.css #topbar, #masthead, .masthead-nav, .wrap, .btn, .eyebrow, h1/h2/h3, .site-foot So there is no colour, no font-family and no button in this file. A blog that looked like a different website would be the usual failure here, and the surest way to avoid it is to have nothing of its own to get wrong. What IS here is the one thing the front page has no equivalent of: a READING column. The home page is a shop window laid out to 1180px; a post is prose, and prose set to 1180px is unreadable. --read is 720px, which is about 70 characters of Montserrat at 18px. ========================================================================= */ :root { --read: 720px; } /* The blog's own pages have no ticker (nor does shop.html) — the ticker is the front page's opening. Without it there is nothing above the black masthead, so the page begins against black and needs no compensation. */ /* ---- THE LISTING, REBUILT ON THE SITE'S OWN SHAPES. Task P155-#68. ------ Toby, 22 Sep 2026: "For the Blog, dont use brown and change the formatting style." `.blog-head` and `.blog-list` are gone. The page head is `.sec.p-hero`, the lead post is `.sec.p-panel`, the rest is `.sec.p-cards` and the closing ask is `.sec.p-cta` - all four declared in section 13 of site.css and all four already carrying every other page on the site. What is left in this file is only what is genuinely the blog's own: the cover aspect ratios, the lead post's two-column arrangement and its type scale. ------------------------------------------------------------------------ */ /* ---- the lead post, inside the panel ------------------------------------ TWO COLUMNS INSIDE THE CARD, cover beside the words. It used to be a full-width stack with the cover above the text and nothing to either side of it, which is the arrangement the grid below already uses - so the newest post looked like a large version of an old one rather than like the lead. minmax(0, 1fr) ON BOTH TRACKS so a wide cover cannot push the words out of the card; the image is `object-fit: cover` inside a fixed 4/3 box, so it is the box that decides the shape and never the file. */ .lead-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(22px, 3vw, 40px); align-items: center; text-decoration: none; color: var(--ink); } .lead-post .cover { aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; } .lead-post .cover img { width: 100%; height: 100%; object-fit: cover; } /* A post with no cover is not a hole: the empty div is removed and the words take the whole card, which is a deliberate one-column lead rather than a two-column one with a grey rectangle in it. */ .lead-post .cover:empty { display: none; } .lead-post .cover:empty + .lead-words { grid-column: 1 / -1; } .lead-post h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 10px 0 0; max-width: 20ch; text-wrap: balance; line-height: 1.1; } .lead-post .stand { margin: 14px 0 0; font-size: 17px; color: var(--ink-soft); max-width: 46ch; } .lead-post:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } @media (max-width: 760px) { .lead-post { grid-template-columns: minmax(0, 1fr); gap: 20px; } .lead-post .cover { aspect-ratio: 16 / 9; } } /* The date line. Space Grotesk, uppercase, the same label style the rest of the site uses for a caption — see .opening-note and .ticker-item. */ .post-meta { font: 700 11.5px/1 var(--alt); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; } .lead-post .post-meta { margin: 0; } .read-on { display: inline-block; margin-top: 20px; font: 700 13px/1 var(--alt); letter-spacing: .04em; border-bottom: 2px solid var(--hue-deep); padding-bottom: 4px; } /* ---- the rest, as the site's own cards ---------------------------------- `.card-grid` and `.card` are site.css's, so the grid, the gap, the hairline and the 4px rule of the hue along the top all come from there. What this adds is only the two things a POST card has that a generic card does not: a cover, and a link wrapping the whole rectangle. EQUAL RECTANGLES, NOT A RAGGED ROW. The old grid was bare `.post-card` anchors on white with no frame, so a post with no cover and a two-line summary left a visible gap where its neighbour's picture was. A framed card that stretches to the row's height reads as deliberate whatever is in it. */ .post-grid { margin-top: 28px; } .post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--hue); padding: 0 0 24px; text-decoration: none; color: var(--ink); } .post-card .cover { aspect-ratio: 16 / 9; background: var(--paper-alt); overflow: hidden; } .post-card .cover img { width: 100%; height: 100%; object-fit: cover; } .post-card .cover:empty { display: none; } .post-card .post-meta { margin: 24px 26px 10px; } .post-card h3 { font-size: 21px; line-height: 1.18; margin: 0 26px; } .post-card p { margin: 12px 26px 0; font-size: 15px; color: var(--ink-soft); } .post-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; } /* The one label above the grid. It was a 1px grey hairline with 84px of air over it; inside `.p-cards` the section already owns that space, so all it needs is to be the section's eyebrow. */ .more-head { margin: 0; } /* ---- the empty state ---------------------------------------------------- It is `.sec.p-centre.bg-ink` now, so the black ground, the padding and the measure all come from site.css. Only the buttons' row is the blog's. */ .blog-empty .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } /* ========================================================================= THE POST ITSELF ========================================================================= */ /* THE READING COLUMN. `.post-wrap` is gone from post.html - the body sits in `.sec.p-split`'s right-hand track, which site.css caps at 680px. --read is kept because the built post's additive furniture below still measures against it. */ .post-wrap { width: 100%; max-width: var(--read); margin: 0 auto; padding: 0 28px; } /* ---- the head of a post, on the solid block ----------------------------- `.sec.p-hero.bg-block` supplies the colour and the padding, and after task P155-#73 that is a flat fill of --hue at full strength - the periwinkle #ab96ff on both blog pages - rather than the cornflower deep. These two rules are the type only: the title is set larger than p-hero's default because a headline is the whole of this band. THE STANDFIRST STOPS BEING WHITE, and that is a contrast fix rather than a preference. It was --on-dark because the ground was dark; on #ab96ff white measures 2.06:1 and fails AA outright. It takes --hue-on-soft, the token the block declares for exactly this, which is #2e2e2e here and 5.52:1. The title takes --hue-on from the block itself: black, 8.54:1. */ .post-head-sec .post-title { font-size: clamp(34px, 5.4vw, 60px); margin: 0; text-wrap: balance; max-width: 20ch; } .post-head-sec .post-stand { margin: 22px 0 0; font-size: 20px; line-height: 1.5; color: var(--hue-on-soft); font-weight: 600; max-width: 52ch; } /* ---- the sticky rail beside the article --------------------------------- `.split-head` is site.css's sticky left column; this fills it. The date used to be a line above the title that scrolled away with it - it stays with the reader now - and the route back to the listing is beside the article rather than only under it. Below 900px site.css stops the column being sticky and stacks it, so on a phone this is a line above the body, which is where both of these were before. */ .post-rail .post-meta { margin: 0; } .post-rail .split-rule { margin: 18px 0 18px; } .back-link { display: inline-block; font: 700 11.5px/1 var(--alt); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; } .back-link:hover { color: var(--ink); border-bottom: 1px solid var(--hue-deep); } /* The cover runs wider than the reading column — the one thing on the page allowed to. It is a picture, not prose. It sits between the head band and the article, so it has its own space above and below. */ .post-cover { max-width: 1120px; margin: 0 auto; padding: 44px 28px 0; } .post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-alt); } /* ---- the body ----------------------------------------------------------- Everything under here is produced by SocSocSite.renderBody() from the Markdown subset Toby writes. The selectors are plain element selectors because the renderer emits plain elements — see site-content.js. */ .post-body { padding: 44px 0 0; font-size: 18px; line-height: 1.75; color: var(--ink-soft); } .post-body > *:first-child { margin-top: 0; } .post-body p { margin: 0 0 1.45em; } .post-body h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 2em 0 .55em; color: var(--ink); } .post-body h3 { font-size: clamp(20px, 2.5vw, 24px); margin: 1.8em 0 .5em; color: var(--ink); } .post-body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .post-body a:hover { background: var(--accent); text-decoration: none; } .post-body strong { font-weight: 700; color: var(--ink); } .post-body ul, .post-body ol { margin: 0 0 1.45em; padding-left: 1.3em; } .post-body li { margin: 0 0 .5em; } .post-body blockquote { margin: 1.8em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--accent); font: 600 21px/1.5 var(--body); color: var(--ink); } .post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; } .post-body img { margin: 1.6em 0; } .post-foot { margin: 62px 0 0; padding: 34px 0 96px; border-top: 1px solid var(--line); } .post-foot .acts { display: flex; flex-wrap: wrap; gap: 10px; } /* ---- the additive furniture around a post ------------------------------- Task P155-#53. Four blocks that are NOT the article: the breadcrumb above it, the contents list before the body, and the key facts and related posts after it. Every one of them is written by tools/build-site.js and appears only on a BUILT post at /blog/ - the staged copy in this directory is client-rendered and has none of them, exactly as it has none of the SEO head. The two blocks that sit below the article are deliberately styled so they do not read as more article: smaller type, a rule above, and in the facts panel a grey band and a line of provenance under the heading. */ .post-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font: 700 11.5px/1.5 var(--alt); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } .post-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); } .post-crumbs a { color: var(--ink-mute); text-decoration: none; } .post-crumbs a:hover { color: var(--ink); border-bottom: 1px solid var(--accent); } .post-crumbs [aria-current="page"] { color: var(--ink); } .post-toc { margin: 44px 0 0; padding: 22px 24px; background: var(--paper-alt); } .post-toc-h { margin: 0 0 12px; font: 700 11.5px/1 var(--alt); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .post-toc ol { margin: 0; padding-left: 1.2em; } .post-toc li { margin: 0 0 .45em; font-size: 15.5px; line-height: 1.45; } .post-toc li:last-child { margin-bottom: 0; } .post-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } /* THE CONTENTS LIST HIGHLIGHTS IN THE PAGE'S OWN COLOUR, like the FAQ jump menu it is a cousin of. Task P155-#81: Toby asked for the FAQ menu's selected and hovered states to be "highlighted yellow instead of purple" and for "the same for all the other similar pages", and this is the site's only other jump-to-a-section menu. It reads --hue and --hue-on rather than --accent, so it follows whatever page it lands on. IT RENDERS IDENTICALLY TODAY AND THAT IS EXPECTED, not a no-op by accident: this block is written by tools/build-site.js onto a BUILT post at /blog/, every post is body.hue-peri, and --hue on a peri page IS --accent #ab96ff. So the pixels do not move; what changes is that the day a post carries another hue, its contents list carries it too. Nothing was deployed to the live domain for this - see the task report. */ .post-toc a:hover { background: var(--hue); color: var(--hue-on); border-bottom-color: transparent; } .post-facts { margin: 62px 0 0; padding: 30px 28px; background: var(--paper-alt); } .post-facts h2 { margin: 0; font-size: clamp(20px, 2.4vw, 24px); color: var(--ink); } .post-facts-note { margin: 10px 0 22px; font-size: 14px; line-height: 1.55; color: var(--ink-mute); } .post-facts-note a { color: var(--ink-mute); } .fact-list { margin: 0; } .fact { display: grid; grid-template-columns: 190px 1fr; gap: 6px 20px; padding: 12px 0; border-top: 1px solid var(--line); } .fact:first-child { border-top: 0; padding-top: 0; } .fact dt { font: 700 12px/1.45 var(--alt); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } .fact dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); } /* The segment pages, under the facts. Task P155-#85 (section 7.4). Written by tools/build-site.js postSegmentLinks(); a row of plain links in the note's own muted voice, so it reads as navigation and not as more of the facts. */ .post-facts-for { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); } .post-facts-for .post-facts-note { margin: 0 0 8px; } .post-facts-for ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .post-facts-for a { font-size: 15px; line-height: 1.5; color: var(--ink); } .post-related { margin: 56px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); } .post-related h2 { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 24px); color: var(--ink); } .post-related ul { list-style: none; margin: 0; padding: 0; } .post-related li + li { border-top: 1px solid var(--line); } .post-related a { display: block; padding: 15px 0; text-decoration: none; } .post-related a:hover .rel-t { background: var(--accent); } .rel-t { display: block; font: 700 17px/1.35 var(--body); color: var(--ink); } .rel-s { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); } @media (max-width: 620px) { /* `.post-top` went with the bespoke head - the section's own responsive padding replaces it, so there is nothing here to trim any more. */ .post-body { font-size: 17px; } .post-foot { padding-bottom: 64px; } .post-cover { padding-top: 26px; } .post-toc, .post-facts { padding-left: 20px; padding-right: 20px; } .fact { grid-template-columns: 1fr; gap: 3px; } } /* ---- a URL that names no post we hold ---------------------------------- The state a DRAFT's address lands on, and the state a mistyped link lands on. They are the same page on purpose: it says nothing at all about whether something exists here unpublished. It is `.sec.p-centre.bg-ink` since task P155-#68, so the black ground, the padding and the centred measure come from site.css and only the two things below are the blog's: the heading size, and the buttons' row. */ .post-missing h2 { font-size: clamp(32px, 5vw, 52px); } .post-missing .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; justify-content: center; } /* Nothing renders until the fetch has answered, so a visitor never sees the empty state flash before the posts arrive. */ [hidden] { display: none !important; } /* ========================================================================= THE BLOG AND A BLOG POST, IN THE PAGE'S COLOUR. Tasks P155-#64 and P155-#68. blog.html is `body class="hue-peri"` and so is post.html, because a post and the list it came from must not change colour when you click through. IT IS PURPLE BECAUSE TOBY ALLOCATED THE PAGES BY HAND. On 22 Sep 2026 he wrote out which colour each page takes and ended the list "Blog - purple". Periwinkle #ab96ff is this palette's purple and the brand's own accent, so task P155-#73 moved both files onto it from `hue-corn`, which now belongs to Our work alone. It was `hue-peach` until P155-#68; Toby, the same day: "For the Blog, dont use brown." The brown was the peach hue's DEEP shade, #714c2d, which P155-#70 has since retired from the palette entirely. Periwinkle's deep is #4d4473. EVERY VALUE BELOW IS A --hue-* OR AN --ink-* VARIABLE. There is no hex code anywhere in this file, which is what makes moving the whole blog between hues a one-word change in two HTML files. WHAT TAKES COLOUR, AND WHAT IT MEASURES (AA wants 4.5:1 for body text, 3:1 for large): * THE PAGE HEAD, both here and on a post. `.sec.p-hero.bg-block` after task P155-#73, so a SOLID BLOCK of the periwinkle #ab96ff at full strength with BLACK type: the h1 at 8.54:1, the lede, the standfirst and the eyebrow in --hue-on-soft #2e2e2e at 5.52:1. It was a pale wash, then the cornflower deep with white type, and it is now the block colour Toby asked for on 22 September. * THE LEAD POST'S PANEL. The section is `.bg-wash` (#f0f7ff) and the card inside it is --hue-tint (#d6e8ff) with a 5px --hue-deep rule down its left edge. Black on the tint is 16.85:1 and --ink-soft is 10.89:1. The card has to sit on the WASH and not on the tint, or it would be the same colour as its own ground and only the edge rule would show. * THE CARD GRID'S GROUND. `.bg-tint` is #d6e8ff, black on it 16.85:1. Each card is WHITE with a 4px rule of --hue along its top, so the grid needs a ground that is not paper. * THE READ-ON MARK and the back link's hover underline take --hue-deep. Both are 2px lines under text that is already black; neither carries meaning on its own. * THE UNDERLINE UNDER A LINK IN THE ARTICLE. The word stays black at 21:1; only the line under it is --hue-deep. * THE CLOSING ASK on the listing is `.bg-ink` - black, white type, 21:1. On a post it is `.bg-accent`, the periwinkle at full strength with black type at 8.54:1. WHAT DELIBERATELY DOES NOT. The cover images and the body text. A post is a column of reading; tinting it would be colour competing with the content rather than organising it. NO BROWN REMAINS ANYWHERE ON EITHER PAGE. The only route peach had onto them was the body class, and there is no hardcoded colour in this file for one to hide in. ========================================================================= */ .post-foot { border-top-width: 4px; border-top-color: var(--hue); } .post-body a { text-decoration-color: var(--hue-deep); text-decoration-thickness: 2px; }