/* Generated from Design/directions/journal.py by Web/theme/tools/port.py. Edit the prototype and re-run, or adopt this file and delete the tool — but do not edit both. */ /* ── THE MASTHEAD ─────────────────────────────────────────────────────────── */ .art-head .wrap,.art-body .wrap,.art-lead .wrap{max-width:820px} .art-head{padding-bottom:0} .art-head h1{font-size:clamp(34px,4.2vw,58px);max-width:20ch;margin-bottom:clamp(28px,3.4vw,44px)} .byline{display:flex;align-items:center;gap:16px} .avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto} .by{font-size:var(--t-detail);color:var(--soft);margin-bottom:3px} .by strong{color:var(--ink);font-weight:600} .when{font-size:13px;letter-spacing:.06em;color:var(--soft)} .topics{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;padding:0;list-style:none} .topics a{display:inline-block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--sage);text-decoration:none;border:1px solid var(--line);border-radius:999px; padding:6px 13px} .topics a:hover{border-color:var(--sage)} .art-lead{padding-top:clamp(40px,5vw,72px);padding-bottom:0} .art-lead figure{margin:0} .art-lead figcaption{border-top:1px solid var(--line);margin-top:14px;padding-top:11px; font-size:13px;color:var(--soft)} /* The standfirst. Italic and larger than the body, set apart above it — the one piece of furniture an essay gets. */ .standfirst{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300; font-size:clamp(20px,2.2vw,27px);line-height:1.5;color:var(--ink);max-width:36ch; margin-bottom:clamp(34px,4vw,54px);padding-bottom:clamp(30px,3.4vw,44px); border-bottom:1px solid var(--line)} /* ── .prose — EVERY ELEMENT AN EDITOR CAN PRODUCE ───────────────────────────── Several of these are unused by this article and deliberately present. The second article will use them, and a prose stylesheet written to fit the first one is a stylesheet that breaks on the second. The measure is 68ch: long enough not to fragment, short enough to read. */ .prose{max-width:68ch;font-size:var(--t-body);line-height:1.85;color:var(--soft)} .prose > * + *{margin-top:24px} .prose p{color:var(--soft)} .prose strong{color:var(--ink);font-weight:600} .prose em{font-style:italic} .prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sage); padding-bottom:1px} .prose a:hover{border-bottom-width:2px} /* Headings inside the flow. Cormorant, so they belong to the page, but set close to the text they head rather than floating between two paragraphs. */ /* `text-wrap:balance` evens the lines instead of filling the first and orphaning whatever is left — "A few questions worth sitting / with" left *with* alone on a line of its own. ⚠ SCOPED TO `.prose` DELIBERATELY. Applying it to headings site-wide would re-break every headline on the home and About pages, and those are locked. Here the headings come out of an editor and nobody is choosing their breaks, which is exactly the case balance is for. */ .prose h2,.prose h3{text-wrap:balance} .prose h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(24px,2.6vw,33px);line-height:1.25;color:var(--ink); margin-top:clamp(40px,4.4vw,62px);max-width:34ch} .prose h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:23px; line-height:1.3;color:var(--ink);margin-top:clamp(32px,3.4vw,44px)} .prose h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage); font-family:Mulish,sans-serif;margin-top:34px} .prose h2 + p,.prose h3 + p,.prose h4 + p{margin-top:14px} /* Lists. Markers in sage, hanging outside the measure so the text edge stays straight — this is where the emoji bullets went. */ .prose ul,.prose ol{padding-left:0;list-style:none;counter-reset:li} .prose li{position:relative;padding-left:30px;margin-top:11px} /* ⚠ MARKER POSITION IS ARITHMETIC, not a guess, and the first attempt got it wrong in a way only a browser showed: both markers floated up near the cap line, so the numbers read as footnote references rather than as a list. `.prose` is 17.5px with line-height 1.85, so the first line box is 32.4px and its optical centre is 16.2px down. The dot is 5px, hence 13.7px. The numeral is given a 32px line box of its own, which centres it in the same band as the text beside it. Both offsets depend on `.prose` staying at 17.5px/1.85 — if that changes, these change with it. */ .prose ul > li::before{content:"";position:absolute;left:4px;top:13.7px;width:5px;height:5px; border-radius:50%;background:var(--sage)} .prose ol > li{counter-increment:li} .prose ol > li::before{content:counter(li);position:absolute;left:0;top:0; font:400 12px/32px Mulish,sans-serif;letter-spacing:.08em;color:var(--sage)} /* A pull quote. The one place the article raises its voice. */ .prose blockquote{margin-top:clamp(34px,3.8vw,50px);padding-left:clamp(20px,2.4vw,34px); border-left:1px solid var(--sage)} .prose blockquote p{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(20px,2.2vw,27px);line-height:1.5;color:var(--ink)} /* Inline images, and the horizontal rule an author may reach for. */ .prose figure{margin-top:clamp(34px,4vw,54px)} .prose img{width:100%;height:auto;display:block} .prose figcaption{border-top:1px solid var(--line);margin-top:12px;padding-top:10px; font-size:13px;color:var(--soft)} .prose hr{border:0;border-top:1px solid var(--line);margin:clamp(40px,4.6vw,64px) 0} .prose code{font:400 .88em/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--paper-2);padding:2px 5px;border-radius:2px} .prose table{width:100%;border-collapse:collapse;font-size:var(--t-detail)} .prose th,.prose td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line)} .prose th{font:400 11px/1.6 Mulish,sans-serif;letter-spacing:.12em;text-transform:uppercase; color:var(--sage)} /* The closing question, asked a second time. */ .coda{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(24px,2.8vw,36px);line-height:1.3;color:var(--ink);max-width:22ch; margin-top:clamp(44px,5vw,76px);padding-top:clamp(34px,3.8vw,50px); border-top:1px solid var(--line)} /* ── THE AUTHOR, AT THE END ──────────────────────────────────────────────── */ .auth{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(24px,3.4vw,52px); align-items:start;margin-top:26px} .auth h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:5px} .auth .role{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage); margin-bottom:18px} .auth p{font-size:var(--t-body);line-height:1.75;color:var(--soft);max-width:56ch} .auth .more{margin-top:20px} /* ── THE LISTING PATTERN ───────────────────────────────────────────────────── The Journal index and the Programs page will both want this. Three columns of dated items, each one entirely a link. */ /* `h1` shares this rule because the theme reuses `.art-more` for the category, tag, date and search listings, where the archive title is the page's ONE h1 — an article's "More to read" is an h2 because the article title above it is already the h1. Same type, different level; no visual change. */ .art-more h1,.art-more h2{margin:12px 0 clamp(32px,4vw,52px);max-width:20ch} .posts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(20px,3vw,48px); padding:0;list-style:none} .posts li{border-top:1px solid var(--line);padding-top:20px} .posts a{text-decoration:none;display:block} /* ⚠ h2 SINCE 0.4.12 — the card headings were h3 with no h2 above them, so the journal index outlined H1 → H3 fifteen times and every archive listing did the same. `svaflo_post_card()` is shared by the index, the category, tag, date and search listings, so one change moves them all — which is the whole reason that card was pulled out of the templates into render.php. The declaration is unchanged apart from the selector: promoting a heading is an outline fix and must cost nothing visually. Without it main.css's bare `h2{font-size:clamp(34px,4.4vw,58px)}` would take over and every card headline would more than double. */ .posts h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(19px,2vw,25px);line-height:1.3;color:var(--ink);margin-bottom:10px} .posts p{font-size:var(--t-detail);line-height:1.7;color:var(--soft);margin-bottom:14px} /* ⚠ `display:block`, AND IT IS NOT COSMETIC. A `` is inline, so when the read-more line was added under it the two ran together on one line — "25 AUGUST 2026Read the article", no space, on every card whose date was short enough to leave room. The doors did not show it because their copy sits in a `

`, which is already block. Found by looking at the page, not by the markup, which was correct throughout. */ .posts .meta{display:block;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--sage)} .posts a:hover h2{color:var(--sage)} /* The arrow that ends the date line. It is the card's only affordance, so it picks up the sage on hover along with the headline — the whole card is one link and both halves should acknowledge the pointer. */ .posts .meta [aria-hidden]{color:var(--sage);transition:opacity .15s ease;opacity:.75} .posts a:hover .meta [aria-hidden]{opacity:1} /* ── THE JOURNAL INDEX — 0.4.99 ───────────────────────────────────────────── A separate shape from `.posts`, on purpose. ⚠ NOTHING HERE TOUCHES `.posts`. That grid is the article footer's "More to read" AND the category, tag, date and search listings, and the note above `svaflo_post_card()` exists to stop those five drifting apart. The index wanted a different shape, so it got its own class and its own rows — not an edit to the shared card. Change one and the other does not move, which is the whole reason both exist. RJ chose this over keeping the grid, 10 September, having seen both rendered at full width: *"I liked the index quality."* ⚠ AND IT IS TALLER THAN THE GRID, NOT SHORTER — fifteen stacked rows against five rows of three. It buys scanning, not compactness. */ .jindex{list-style:none;margin:0;padding:0} .jindex li{border-top:1px solid var(--line)} .jindex li:last-child{border-bottom:1px solid var(--line)} /* Three columns: the date holds a fixed rail so every date starts on the same x, which is the whole point of an index. `baseline` and not `center` — the date and the reading time have to sit on the title's first line, and a row whose standfirst wraps to two lines would otherwise drift them downward. */ /* ⚠ TWO COLUMNS SINCE 0.4.100 — the reading-time rail was removed. See `svaflo_journal_row()` for why: 26 of 27 values read "1 min", the standfirst already says "short pieces", and a blank `head.reading` left an empty 76px rail that read as a fault. */ .jindex a{display:grid;grid-template-columns:112px minmax(0,1fr); gap:0 clamp(18px,2.4vw,34px);align-items:baseline;padding:19px 0; text-decoration:none;color:inherit} .jindex .jdate{font-family:'Mulish',sans-serif;font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--sage);white-space:nowrap} /* ⚠ STATED, LIKE `.posts h2`, AND FOR THE SAME REASON. main.css's bare `h2{font-size:clamp(34px,4.4vw,58px)}` would otherwise take every row title to display size. Promoting the heading level must cost nothing visually. ⚠⚠ AND `max-width:none` IS NOT TIDYING — IT IS THE FIX FOR A REAL DEFECT. This list lives inside `.art-more`, whose own `h1,h2` rule sets `max-width:20ch` and a `clamp(32px,4vw,52px)` bottom margin for the section HEADING. Both leak into every row title: without this, "You know FOMO. You have heard of JOMO…" wrapped over FOUR lines inside a column 700px wide, and each row carried 52px of dead space under its title. Equal specificity, so the leak is silent — the declarations this rule does not mention simply survive. Caught by rendering the list into the live page and photographing it, not by reading the stylesheet. */ .jindex h2{font-family:'Cormorant Garamond',serif;font-weight:300; font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--ink); margin:0 0 4px;max-width:none} .jindex p{font-size:14px;line-height:1.6;color:var(--soft);margin:0;max-width:62ch} .jindex a:hover h2{color:var(--sage)} /* The year rule. One heading per year in the run being shown. With every article in a single year this renders once and reads as a quiet label — expected, and it earns itself the first time a second year appears. */ .jyear{display:flex;align-items:center;gap:18px;margin:0 0 22px} .jyear .y{font-family:'Mulish',sans-serif;font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--sage)} .jyear .l{flex:1;border-top:1px solid var(--line)} .jindex + .jyear{margin-top:clamp(34px,4vw,52px)} /* Older / newer. `.dim` is the end you are already standing at — a span, never a link, so nothing focusable goes nowhere. */ .jpager{margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .jpager .c{font-family:'Mulish',sans-serif;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--soft)} .jpager .k{display:flex;gap:clamp(18px,2.4vw,28px);align-items:center} .jpager a{font-family:'Mulish',sans-serif;font-size:13px;color:var(--ink);text-decoration:none; border-bottom:1px solid rgba(44,48,44,.28);padding-bottom:3px;position:relative} .jpager a:hover{color:var(--terracotta);border-color:var(--terracotta)} .jpager .dim{font-family:'Mulish',sans-serif;font-size:13px;color:rgba(92,99,91,.45)} /* The 44px floor, the same transparent overlay the rest of the site uses so no visible pixel moves. `.jindex a` needs none — its own padding puts every row well past 44px at any width. */ @media (max-width:1023px){ .jpager a::after{content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px} } @media (max-width:760px){ /* One column. The date stops being a rail and becomes the row's first line, which is why it keeps its own margin rather than relying on the grid gap. */ .jindex a{grid-template-columns:1fr;gap:5px;padding:17px 0} .jpager{flex-direction:column;align-items:flex-start;gap:14px} } /* ── THE DERIVED NEIGHBOURS — 0.4.89 ──────────────────────────────────────── `.art-nav` is `.art-more` when its rows are empty and the section has worked out the article either side for itself. Same card, same grid; two rules on top of it. ⚠ TWO COLUMNS, NOT THREE. The shared `.posts` grid is a three-column listing and there are only ever two neighbours, so an untouched grid leaves a third of the row empty with a hairline over nothing — which reads as a card that failed to load rather than as a deliberate pair. ⚠ AND `order:-1` RATHER THAN A SECOND MARKUP SHAPE. `svaflo_post_card()` appends whatever the caller passes to the END of the meta line, because the journal index passes an arrow and an arrow belongs after the date. "Newer" does not: it is the label for the card, and read after "2 September 2026 · 1 min read" it lands as an afterthought. Rather than fork the one shared card renderer — the thing render.php's note exists to prevent — the meta line becomes a column here and the label is ordered above the date. */ .art-nav .posts{grid-template-columns:1fr 1fr} .art-nav .posts .meta{display:flex;flex-direction:column;align-items:flex-start;gap:5px} .art-nav .rel{order:-1;font-style:normal;color:var(--soft)} /* The way back to the whole set, under the pair. `.more` is main.css's and carries its own 44px tap overlay, so nothing is added for the phone. */ .art-nav .more{margin-top:clamp(28px,3.4vw,42px)} @media (max-width:900px){ .posts{grid-template-columns:1fr} /* ⚠ STATED AGAIN FOR `.art-nav`, AND IT IS NOT REDUNDANT. The rule above is `.posts`, one class; `.art-nav .posts` is two and wins on specificity at every width unless it is overridden here by name. Written the obvious way — relying on this block coming later — the pair would have stayed side by side on a phone at 150px a card. The same fault as the `flex-basis:100%` block in gallery.css, which lost to source order for two releases. */ .art-nav .posts{grid-template-columns:1fr} .auth{grid-template-columns:1fr} .auth .photo{max-width:200px} } /* ── LEGAL DOCUMENTS (Privacy, Cookies, Terms) ──────────────────────────── ⚠ IN journal.css BECAUSE THE LEGAL TEMPLATE REUSES `.prose`, AND `.prose` lives here and in audience.css. The stylesheet map in functions.php sends the legal template to this file for exactly that reason. The note there warns that nothing errors when that map is wrong — the page simply renders unstyled — so if this block moves, that map moves with it in the same edit. A legal page is the one place on this site where reading is the whole job. No figures, no cards, one column, and a measure that does not tire. */ .legal-hero .lede { max-width: 32em; } /* The dates and the contact address. A reader has to be able to tell which version they are looking at, so this sits under the opening rather than at the foot where a version line traditionally hides. */ .legal-meta { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 40px; } .legal-meta div { min-width: 0; } .legal-meta dt { font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--sage); margin: 0 0 3px; } .legal-meta dd { margin: 0; font-size: .95rem; color: var(--soft); } /* ── the document ───────────────────────────────────────────────────────── */ /* ⚠ THE DOCUMENT SECTION IS `.legal-doc`, NOT `.legal`, AND THAT IS NOT A PREFERENCE. `main.css` line ~983 has carried `.legal{display:flex; justify-content:space-between;gap:24px;border-top:...;margin-top:clamp(38px, 5vw,60px);padding-top:22px}` since long before this template existed — it is the FOOTER's copyright-and-policy-links strip. 0.4.109 shipped the document under the same class name and inherited every one of those declarations: the section became a flex container, `.wrap` stopped filling and shrank to fit, the whole document sat in the right two-thirds of the page behind a 500px empty gutter, and a stray rule and 60px gap opened above it. Nothing errored. All three policy pages went live like that. A class name is a global. Grep `main.css` before naming a section. ⚠ AND NO `max-width` ON `.legal-doc .wrap`. 0.4.108 set `.legal .wrap{max-width:44em}` to get a reading measure and broke it twice over: `em` resolved against `.wrap`'s own font-size rather than 16px, so 44em came out at 550px instead of the ~700 intended, and `.wrap` still applied its `padding:0 clamp(24px,6vw,84px)` on top, taking the column to 382px — half the width of its own hero. `.wrap` is the site container and is 1180px everywhere else. The measure belongs to `.prose`, which already carries `max-width:68ch`, the measure every journal article uses. Let both do their own job. */ .legal-doc h2 { max-width: 68ch; /* ⚠ MATCHES `.prose`, so headings line up with the body they head. Without it a heading spans the full 1180px container and hangs off to the right of its own paragraphs. */ margin: 52px 0 14px; font-size: 1.5rem; line-height: 1.25; } /* ⚠ NO TOP MARGIN ON THE FIRST HEADING. Without this the document opens with 52px of nothing under the hero rule, which reads as a missing section. */ .legal-doc h2:first-child { margin-top: 0; } .legal-doc .prose > * + * { margin-top: 20px; } /* ⚠ NO LIST RULES HERE, AND THE FIRST VERSION HAD FOUR OF THEM. 0.4.108 wrote `.legal .prose ul,ol{padding-left:1.3em}`, `li{list-style:disc}` and `ol li{list-style:decimal}` on the assumption that `.prose` did not style lists. It does, forty lines above this: `.prose ul,.prose ol{padding-left:0; list-style:none}` with a sage 5px dot drawn by `.prose ul > li::before` and a counter by `.prose ol > li::before`. So every bullet in the privacy policy rendered TWICE — the browser's own disc, then the house dot beside it — and an ordered list would have carried two numbers. Live on 20 September until the page was looked at rather than the markup counted. A list inside `.prose` is already a house list. Leave it alone. */ /* A table is how the cookies policy says what it sets, and it is the clearest shape for it. Kept plain — this is a document, not a dashboard. */ .legal-doc .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 4px 0 0; } .legal-doc .prose th, .legal-doc .prose td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); } .legal-doc .prose th { font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sage); border-bottom-color: var(--ink); } .legal-doc .prose td:last-child, .legal-doc .prose th:last-child { padding-right: 0; } @media (max-width: 640px) { .legal-doc h2 { margin-top: 40px; font-size: 1.32rem; } .legal-meta { gap: 14px 28px; } /* ⚠ THE TABLE GOES TO BLOCKS ON A PHONE RATHER THAN SCROLLING SIDEWAYS. A three-column cookie table at 360px is unreadable either way, but a horizontal scrollbar inside a legal document is a way for a reader to miss a column entirely and not know it. */ .legal-doc .prose table, .legal-doc .prose tbody, .legal-doc .prose tr, .legal-doc .prose td { display: block; width: 100%; } .legal-doc .prose thead { display: none; } .legal-doc .prose tr { padding: 14px 0; border-bottom: 1px solid var(--line); } .legal-doc .prose td { border: 0; padding: 0 0 6px; } .legal-doc .prose td:first-child { font-weight: 600; } }