/* Blog pages of the redesign prototype ("Spotka w mieście"), only for
   blog*.html. Linked after site.css and directions/journal-tokens.css.

   Look: the "field journal in green" (Sonia, 2026-09-28; reference
   directions/field-journal-green.html). Every colour, face and size comes
   from the --j- tokens, the tape included (--j-tape, --j-tape-shadow); the
   only colour values here are mixes of tokens for the join card's shadow.
   The header and footer are the shared ones (directions/header-snippet.html
   and footer-snippet.html, styled by journal-tokens.css); nothing here.

   - Sections: one continuous beige page (--j-page), no white sheets, frames
     or shadows; a --j-line hairline between two sections is the only mark.
     Each section takes its natural height (no screen-high sections, no
     snapping: Sonia's change to the prompt, 2026-09-28). The index has four
     (masthead with the filter, the essay, the guides, coming up); a post
     has a cover (title, byline, main photo), the article, and an end
     (read next, sign up). The article is not cut into screens: it is read
     top to bottom. (The class name "sheet" is kept from the first pass.)
   - Type: headlines in --j-disp (66% wide, 600, lowercase, --j-head); body in
     --j-text, --j-body; small labels in --j-mono (75% wide, uppercase,
     --j-accent). Place names (h3 in the guides) and the pull quote keep their
     own capitals, so "BUW", "Kino Muranów" and "Zachęta" stay readable.
   - The sign-up box is the page's one action, after the post (or the list
     of posts): a card on --j-soft with a strip of tape, a white rounded
     field and a solid --j-accent button.
   - Photos (approved, catalogued, credited) are taped in at a slight angle.
   - No pen marks: nothing on the blog needs pointing at.
   Prototype only. */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- the journal: one beige page, sections divided by a hairline ----------
   No white sheets, frames, boxes or shadows round sections (Sonia,
   2026-09-28); a section is its content and some room, and the only mark
   between two sections is a --j-line hairline. */
body{background:var(--j-page)}
main.page{--gap:clamp(14px,1.8vw,26px)}
/* the shared header and footer line up with the blog's own column (site.css
   .page: 620px with 20px sides, 17px on a small phone; 1120px with 40px sides
   on a computer), through the variables journal-tokens.css gives for it */
/* one header and footer position on every page (Sonia, 2026-10-06: "the navbar
   has a different position on different pages"): this page no longer moves
   them; on a computer its column is Home's (1180px, --j-pad sides) instead */
@media(min-width:940px){.page{max-width:1180px;padding-left:var(--j-pad);padding-right:var(--j-pad)}}
.sheet,.post .body,.post-end{position:relative;background:none;box-shadow:none;margin:0;padding:clamp(28px,5vw,64px) 0}
.sheet+.sheet,.post .body,.post-end{border-top:1px solid var(--j-line)}
.post{max-width:none;margin:0;padding:0}

/* a strip of tape: the journal's way of holding a photo or a card */
.tape,.sub-box::before,.hero-fig::before,.fig::before,.pub-pic::before,.lead::before,.row::before,.next::before{
  content:"";position:absolute;z-index:3;width:92px;height:26px;pointer-events:none;
  background:var(--j-tape);box-shadow:var(--j-tape-shadow);
  clip-path:polygon(0 12%,3% 0,97% 6%,100% 26%,97% 50%,100% 76%,97% 100%,3% 94%,0 70%,3% 44%)}

/* ---------- the three printed voices ---------- */
.pub h1,.post h1,.body h2,.lead h2,.row h3,.next h3,.soon-h,.sub-box .sub-h,.week th{
  font-family:var(--j-disp);font-stretch:66%;font-weight:600;letter-spacing:-.018em;text-transform:lowercase;color:var(--j-head)}
.pub h1:after,.post h1:after{display:none}
.post-top,.pub-by,.meta,.lead .meta,.row .meta,.author span,.next-h,.next p,.notes h2,.body .place,.body .sep,.soon li span,.tabs button,.kind,.until,.ph .tag,.sub-form button,.act{
  font-family:var(--j-mono);font-stretch:75%;font-weight:400;font-size:11.5px;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;color:var(--j-accent)}
.pub-desc,.subtitle,.lead .dek,.row p,.body>p,.body li,.week td,figcaption,.notes li,.notes>p,.note,.help,.sub-p,.sub-fine,.body .when,.body .checked,.week caption{
  font-family:var(--j-text);color:var(--j-body)}

/* pills */
.kind,.until,.ph .tag{display:inline-block;background:var(--j-chip);color:var(--j-chip-ink);border-radius:999px;padding:5px 10px 4px;font-size:10.5px}

/* ---------- index: 1. the masthead ---------- */
/* no logo here: the shared header already shows it (Sonia, 2026-09-28:
   "logo one under the other looks busy"). A taped evening photo of the city
   ("a vibey warsaw image") sits beside the heading on a computer and above
   it on narrower screens; the sign-up card stays with the heading, the
   filter runs underneath. */
.pub{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "h" "desc" "by" "tabs";text-align:left}
.pub h1{grid-area:h;font-size:var(--j-h1);line-height:.86;margin:clamp(34px,5svh,48px) 0 0;max-width:none}
.pub .pub-desc{grid-area:desc}
.pub .pub-by{grid-area:by}
.pub .tabs{grid-area:tabs}
.pub-pic{grid-area:pic;position:relative;margin:0}
.pub-pic .photo{aspect-ratio:16/9;transform:rotate(-1.1deg)}
.pub-pic::before{left:50%;top:-12px;margin-left:-46px;transform:rotate(3deg)}
.pub-pic figcaption{font-size:13px;margin-top:14px}
.pub-desc{font-size:clamp(17px,1.35vw,19px);line-height:1.5;margin-top:clamp(14px,2.4svh,24px);max-width:31em}
.pub-by{margin-top:14px}

/* the join card: the page's one action */
.sub-box{position:relative;background:var(--j-soft);border:1px solid var(--j-line);border-radius:0;padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(22px,2.4vw,32px);
  box-shadow:0 1px 1px color-mix(in srgb,var(--j-head) 8%,transparent),0 20px 40px -26px color-mix(in srgb,var(--j-head) 55%,transparent);text-align:left}
.sub-box::before{left:50%;top:-13px;margin-left:-46px;transform:rotate(-2deg)}
.sub-form{display:flex;align-items:center;gap:10px;max-width:none;margin:0}
.sub-form input{flex:1;min-width:0;min-height:52px;border:1.5px solid var(--j-line);border-radius:999px;background:var(--j-note);font-family:var(--j-text);font-size:17px;color:var(--j-head);padding:0 20px}
.sub-form input::placeholder{color:var(--j-body)}
.sub-form input:focus{outline:none;border-color:var(--j-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--j-accent) 22%,transparent)}
.sub-form button{flex:none;min-height:52px;border:0;border-radius:999px;background:var(--j-accent);color:var(--j-note);padding:0 22px;font-size:12.5px;font-weight:500;letter-spacing:.06em;cursor:pointer}
.sub-form button:hover{background:var(--j-chip-ink)}
.sub-form button:focus-visible{outline:2px solid var(--j-accent);outline-offset:3px}
.sub-fine{font-size:14px;line-height:1.5;color:var(--j-chip-ink);margin-top:12px;max-width:30em}

/* ---------- index: 2 and 3. the essay, then the guides ----------
   The filter sits in the masthead; a sheet whose posts are all filtered
   out is hidden, so no empty sheet is left behind. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(18px,3.4svh,30px) 0 0;border:0}
.sheet.posts:not(:has(li:not([hidden]))){display:none}
.tabs button{min-height:44px;background:none;border:1px solid var(--j-line);border-radius:999px;padding:0 14px;cursor:pointer}
.tabs button:hover{border-color:var(--j-accent)}
.tabs button[aria-pressed="true"]{background:var(--j-chip);border-color:var(--j-chip);color:var(--j-chip-ink)}
.tabs button:focus-visible{outline:2px solid var(--j-accent);outline-offset:2px}
.home{max-width:none;margin:0}
.rows{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3svh,28px)}
.rows li[hidden]{display:none}
.lead,.row{position:relative;display:grid;color:inherit;text-decoration:none}
.lead{gap:18px;padding:0}
.lead h2{font-size:var(--j-h2);line-height:.9;text-wrap:balance}
.lead .dek{font-size:17px;line-height:1.5;margin-top:12px;max-width:30em}
.meta{margin-top:14px}
.meta b{font-weight:500;color:var(--j-accent)}
.row{grid-template-columns:minmax(0,1fr) 88px;gap:16px;align-items:start;padding-top:clamp(16px,2.6svh,24px);border-top:1px solid var(--j-line)}
.row h3{font-size:clamp(24px,min(2.2vw,4svh),30px);line-height:.95;text-wrap:balance}
.row p{font-size:15px;line-height:1.45;margin-top:8px}
.row .meta{margin-top:10px}
.lead:hover h2,.row:hover h3,.next:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lead:focus-visible,.row:focus-visible,.next:focus-visible{outline:2px solid var(--j-accent);outline-offset:6px}
/* the photographer's credit, a little lighter than the caption above it
   (Sonia, 2026-10-02: "move the author undernath in a slightly lighter text") */
.credit,figcaption .credit{font-family:var(--j-text);font-stretch:100%;text-transform:none;letter-spacing:0;font-size:12px;line-height:1.4;color:color-mix(in srgb,var(--j-body) 80%,var(--j-page));margin-top:6px}
.credit a{color:inherit;text-underline-offset:2px}
/* a credit below a card sits under its photo: the photo is on the right on a phone */
.row+.credit,.next+.credit{text-align:right}
.lead+.credit{margin-top:10px}

/* ---------- index: 3. coming up ---------- */
.soon{padding:0}
.soon-h{font-size:var(--j-h2);line-height:.9}
.soon ul{list-style:none;margin-top:clamp(16px,3svh,28px);border-top:1px solid var(--j-line)}
.soon li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:clamp(12px,2svh,18px) 0;border-bottom:1px solid var(--j-line);
  font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(24px,min(2.4vw,4.4svh),34px);line-height:1;letter-spacing:-.01em;text-transform:lowercase;color:var(--j-head)}
.soon li span{margin:0;font-style:normal}
.later{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6svh,56px)}
.later .note{font-size:17px;margin:0;max-width:none}
.later .text-link{color:var(--j-accent)}

/* ---------- a post: 1. the cover ---------- */
.cover{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4svh,40px)}
.post-top{margin:0 0 clamp(14px,2.4svh,24px)}
.post-top a{display:inline-flex;align-items:center;min-height:44px;margin:-15px 0;color:var(--j-accent);text-decoration:none} /* a 44px tap, the line keeps its height */
.post-top a:hover{text-decoration:underline;text-underline-offset:3px}
.post h1{font-size:var(--j-h1);line-height:.86;max-width:none;text-wrap:balance}
.subtitle{font-size:clamp(17px,min(1.4vw,2.6svh),20px);line-height:1.5;margin-top:clamp(14px,2.6svh,24px);max-width:32em}
.author{display:flex;align-items:center;gap:12px;margin-top:clamp(16px,3svh,26px)}
.author img{width:36px;height:36px;border-radius:50%}
.author b{display:block;font-family:var(--j-text);font-size:14.5px;font-weight:600;color:var(--j-head)}
.author span{display:block;margin-top:3px}
.actions{display:flex;align-items:center;gap:6px;margin:clamp(12px,2.2svh,18px) 0 0;padding:6px 0;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line)}
.act{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;background:none;border:1px solid transparent;cursor:pointer}
.act:hover{border-color:var(--j-line);background:var(--j-note)}
.act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.act[aria-pressed="true"]{color:var(--j-chip-ink)}
.act[aria-pressed="true"] svg{fill:currentColor}
.act:focus-visible{outline:2px solid var(--j-accent);outline-offset:2px}
.act-share{margin-left:auto}

/* ---------- photos: taped in at a slight angle ---------- */
.photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:var(--j-soft)}
.thumb{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:var(--j-soft)}
.hero-fig,.fig{position:relative;margin:0}
.hero-fig .photo,.hero-fig .ph{transform:rotate(1.2deg)}
.hero-fig::before{left:14%;top:-12px;transform:rotate(-8deg)}
.fig{margin:clamp(40px,6svh,56px) auto 12px}
.fig .photo,.fig .ph{transform:rotate(-.8deg)}
.fig:nth-of-type(even) .photo,.fig:nth-of-type(even) .ph{transform:rotate(.7deg)}
.fig::before{left:50%;top:-12px;margin-left:-46px;transform:rotate(-3deg)}
figcaption{font-size:14px;line-height:1.5;margin-top:14px;text-align:left}
figcaption .credit{display:block;margin-top:3px}
figcaption .credit a{color:inherit;text-underline-offset:2px}
.lead::before{left:6%;top:-10px;transform:rotate(-6deg)}
.lead .photo{transform:rotate(-1deg)}
.row::before{width:58px;height:18px;right:14px;top:calc(clamp(16px,2.6svh,24px) - 8px);transform:rotate(8deg)}
.row .thumb{transform:rotate(1.4deg)}
.rows li:nth-child(odd) .row .thumb{transform:rotate(-1.2deg)}

/* a frame still waiting for its photo (Obiekto) */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:3/2;border-radius:2px;background:var(--j-soft);color:var(--j-chip-ink);text-align:center;padding:24px 20px;overflow:hidden}
.ph::before{content:"";position:absolute;inset:9px;border:1px dashed var(--j-line);pointer-events:none}
.ph svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;opacity:.75}
.ph-place{font-family:var(--j-text);font-size:17px;line-height:1.3;color:var(--j-chip-ink);max-width:16em;text-wrap:balance}
.ph .tag{position:absolute;left:16px;top:16px}

/* ---------- a post: 2. the article, one long sheet ---------- */
.post .body>*{max-width:680px;margin-left:auto;margin-right:auto}
.post .body>.fig{max-width:760px}
.body>p,.body li{font-size:18px;line-height:1.7}
.body>p{margin-top:22px}
.body>p:first-child{margin-top:0}
.body h2{font-size:var(--j-h2);line-height:.92;margin-top:clamp(52px,8svh,72px);text-wrap:balance}
.body h3{font-family:var(--j-disp);font-stretch:66%;font-weight:600;font-size:clamp(26px,2.2vw,32px);line-height:1;letter-spacing:-.012em;color:var(--j-head);margin-top:40px;text-wrap:balance}
.body h2+p,.body h3+p{margin-top:14px}
.body a{color:var(--j-accent);text-decoration-thickness:1px;text-underline-offset:3px}
.body strong,.body b{color:var(--j-head);font-weight:600}
.body em,.body i{font-style:italic}
.body ul{margin-top:16px;padding-left:1.2em;display:grid;gap:10px}
.body ol{padding-left:1.4em}
.body li::marker{color:var(--j-accent)}
/* a place line holds a whole address, so it is set in the body font, not in
   the small mono capitals kept for short labels (the .until chip stays mono) */
.body .place{margin-top:10px;font-family:var(--j-text);font-stretch:100%;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--j-head)}
.body .checked{font-size:15px;line-height:1.6;margin-top:24px}
.body .sep{text-align:center;letter-spacing:.6em;margin-top:52px}
sup.fn{font-size:.62em;line-height:0;vertical-align:.7em;margin-left:1px}
sup.fn a{font-family:var(--j-mono);font-stretch:75%;font-weight:500;color:var(--j-accent);text-decoration:none}
/* a 44px tap area round the small number; the padding and the negative margin
   cancel out, so the text does not move. More of it sits on the left, over the
   word the note belongs to: on the right it stays inside the 17px page side, so
   a number at the end of a line does not reach past the screen edge. */
sup.fn a{position:relative;z-index:1;padding:16px 14px 16px 24px;margin:-16px -14px -16px -24px}
sup.fn a:hover{text-decoration:underline}
/* No pull quotes: a line repeated out of context read as an unexplained
   quote (Sonia, 2026-10-01). Photos break up the text instead. */
.body .when{font-size:15px;line-height:1.6;margin-top:10px}
.body .date-note{margin-top:28px;padding-top:14px;border-top:1px solid var(--j-line);color:var(--j-muted);font-size:14px;line-height:1.5}
.body .when b{color:var(--j-head);font-weight:600}
.until{margin-left:0}
.body .place .until{margin-top:8px}
.body .help{font-size:17px;line-height:1.6;color:var(--j-chip-ink);background:var(--j-soft);border:1px solid var(--j-line);padding:18px 20px;margin-top:28px}
.body .help a{color:var(--j-chip-ink)}
.body .sub-box{margin-top:44px;margin-bottom:8px}

/* the free-museum week */
.week{width:100%;border-collapse:collapse;margin-top:18px}
.week caption{text-align:left;font-size:14px;line-height:1.5;padding-bottom:10px}
.week th,.week td{text-align:left;vertical-align:top;padding:14px 12px 14px 0;border-top:1px solid var(--j-line)}
.week th{font-size:24px;line-height:1;width:7em}
.week td{font-size:16px;line-height:1.5}
.week td span{display:block;margin-top:4px;color:var(--j-head)}
.week td span:first-child{margin-top:0}
.week td small{display:block;color:var(--j-body);font-size:13.5px;line-height:1.45;margin-top:2px}
.week tr:last-child th,.week tr:last-child td{border-bottom:1px solid var(--j-line)}

/* footnotes and sources */
.notes{margin-top:56px;padding-top:20px;border-top:1px solid var(--j-line)}
.notes h2{font-size:11.5px;line-height:1.35;margin:0;letter-spacing:.03em}
.notes>p{font-size:14px;margin-top:6px}
.notes ol{margin:14px 0 0;padding-left:1.4em;display:grid;gap:8px}
.notes li{font-size:15px;line-height:1.55;scroll-margin-top:16px}
.notes li::marker{color:var(--j-accent)}
.notes li:target{background:var(--j-soft)}
.notes a{color:var(--j-head);text-underline-offset:2px}
.notes .fn-back{text-decoration:none;color:var(--j-accent);margin-left:4px}
.notes .fn-back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px}

/* ---------- a post: 3. the end ---------- */
.post-end{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.post-end .actions{margin-top:0}
.next-h{margin-top:clamp(22px,4svh,34px)}
.next{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:18px;align-items:center;padding:14px 0 20px;border-bottom:1px solid var(--j-line);color:inherit;text-decoration:none}
.next h3{font-size:clamp(26px,min(2.4vw,4.4svh),34px);line-height:.95;text-wrap:balance}
.next p{margin-top:8px}
.next .thumb{transform:rotate(1.6deg)}
.next::before{width:58px;height:18px;right:18px;top:6px;transform:rotate(9deg)}
.sub-box .sub-h{font-size:clamp(32px,min(3vw,5.4svh),46px);line-height:.92;color:var(--j-chip-ink);margin:0}
.sub-box .sub-p{font-size:16.5px;line-height:1.5;color:var(--j-chip-ink);margin-top:12px}
.sub-box .sub-form{margin-top:clamp(18px,2.6vw,26px)}
.post-end .sub-box{margin-top:clamp(36px,6svh,56px)}

/* Photos woven into the text (Sonia, 2026-10-01: "nie musi byc zawsze osobna
   linijka"). On a computer a .fig.side sits beside the paragraphs, its outer
   edge reaching a little past the text column; on a phone it is a normal
   full-width photo. A new section starts below it. */
.body h2,.body h3,.body .sep,.body .sub-box,.body .notes,.body .help,.post .body>.fig:not(.side){clear:both}
@media(min-width:940px){
  .post .body>.fig.side{width:300px;max-width:none;margin:10px calc((100% - 680px) / 2) 40px 30px;float:right}
  .post .body>.fig.side.left{float:left;margin:10px 30px 40px calc((100% - 680px) / 2)}
  .fig.side figcaption{font-size:13px;margin-top:12px}
  .fig.side::before{width:72px;height:22px;margin-left:-36px;top:-10px}
}
@media(min-width:1180px){
  .post .body>.fig.side{width:340px;margin-right:calc((100% - 680px) / 2 - 110px)}
  .post .body>.fig.side.left{margin-left:calc((100% - 680px) / 2 - 110px);margin-right:34px}
}

/* ---------- a phone ---------- */
@media(max-width:520px){
  .sub-form{flex-wrap:wrap}
  .sub-form input,.sub-form button{flex:1 1 100%}
  .body>p,.body li{font-size:17px}
  .week th{width:6.2em;font-size:18px;padding-right:14px}
  .week td{font-size:15px}
  .act span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .act{padding:0 10px;position:relative}
  .row{grid-template-columns:minmax(0,1fr) 78px;gap:14px}
  .row p:not(.meta),.notes li,.notes>p,.week td,.body .when,.body .checked{font-size:16px}
}

/* ---------- a computer: side by side ---------- */
@media(min-width:940px){
  /* the masthead centred (Sonia, 2026-10-02: "try a centered look for this
     slide"): title, line and byline on the middle axis, the photo below
     them, then the filter. All of it fits the screen ("we need it to fit in
     vp so make the image smaller if needed"): the photo's width follows the
     screen's height, whatever is left after the header and the rest of the
     masthead (--pub-rest, every other height in this block added up). */
  .sheet.pub{padding-block:28px 48px;
    --pub-rest:calc(var(--j-top-h,73px) + 28px + .86 * var(--j-h1) + 22px + 3 * clamp(17px,1.35vw,19px) + 30px + 26px + 52px + 70px + 24px)}
  .pub{grid-template-areas:"h" "desc" "by" "pic" "tabs";justify-items:center;text-align:center}
  .pub h1{margin-top:0;text-wrap:balance}
  .pub .pub-desc{max-width:44em;margin-top:22px;text-wrap:balance}
  .pub-pic{width:100%;margin-top:26px}
  .pub-pic .photo{width:min(100%,820px,max(320px,calc((100svh - var(--pub-rest)) * 16 / 9)));margin-inline:auto;aspect-ratio:16/9}
  .pub-pic::before{z-index:1}
  .pub-pic figcaption{text-align:center;margin-top:12px}
  .pub .tabs{justify-content:center;margin-top:26px}
  .guides .rows{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(44px,7svh,72px)}
  /* the cards in a row line up (Sonia, 2026-10-02: "format it nicer, looks
     messy"): photo, title, description, label and credit each share a row
     across the cards, so titles and labels start at the same height */
  .guides .rows>li{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .guides .row,.guides .row>div{display:contents}
  .guides .row .thumb{grid-row:1}
  .guides .row h3{grid-row:2;align-self:start;font-size:clamp(24px,1.9vw,28px)}
  .guides .row h3+p{grid-row:3;margin-top:10px}
  .guides .row .meta{grid-row:4;margin-top:14px}
  .guides .rows>li>.credit{grid-row:5;text-align:left;margin-top:6px}
  .guides .rows>li:has(.row:focus-visible){outline:2px solid var(--j-accent);outline-offset:6px}
  .lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4.4vw,64px);align-items:center}
  .essays li:has(>.credit){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,4.4vw,64px)}
  .essays li>.lead{grid-column:1/-1}
  .essays li>.credit{grid-column:1}
  .later{grid-template-columns:minmax(0,1fr) minmax(360px,440px);column-gap:clamp(32px,5vw,72px);align-items:center}
  .lead .photo{aspect-ratio:auto;height:clamp(240px,52svh,520px)}
  .lead h2{font-size:var(--j-h1);line-height:.86}
  .row{display:flex;flex-direction:column;gap:0;border-top:0;padding-top:0}
  .row .thumb{order:-1;aspect-ratio:auto;height:clamp(110px,24svh,240px);margin-bottom:16px}
  .row::before{top:-8px;right:auto;left:50%;margin-left:-29px}
  .row h3{margin-top:0}
  .cover{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,72px);align-items:center}
  .cover .hero-fig{align-self:center}
  /* read next on the left, centred against the sign-up card on the right */
  .post-end{grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(32px,5vw,72px);align-items:start}
  .post-end>*{grid-column:1}
  .post-end .actions{grid-row:2}
  .post-end .next-h{grid-row:3}
  .post-end .next{grid-row:4}
  .post-end .next+.credit{grid-row:5}
  .post-end .sub-box{grid-column:2;grid-row:1/7;margin-top:0;align-self:center}
}
/* Sections keep their natural height (Sonia, 2026-09-28: "not all the
   slides need to be viewport ... the blog page looks funny with just a
   heading"): no screen-high sections and no snapping between them, only
   more room above and below on a computer. */
@media(min-width:940px){
  .sheet,.post .body,.post-end{padding-block:clamp(48px,8svh,96px)}
}