/* Article template: the header, lead photograph, reading column, article
   footer and the right rail's layout.
*/

.is-single{ background:var(--white); }
.post{
  --measure: 720px;               /* reading column */
  --rail: 300px;                  /* IAB ad width */
  --rail-gap: clamp(56px, 6.4vw, 112px);
  --single: 850px;                /* the widest a photograph, grid, gallery or video shows in Wide images */
}

/* ---- header ------------------------------------------------------------
   A split masthead: the headline on the left, the standfirst and byline in
   the right column, both aligned to the top. */
.post__head{
  padding:clamp(24px, 2.6vw, 44px) var(--gutter) clamp(40px, 4.4vw, 72px);
}

/* breadcrumb over a hairline; the article's own title trails off if long */
.post__crumbs{
  padding-bottom:clamp(16px, 1.6vw, 22px); margin-bottom:clamp(36px, 4.2vw, 72px);
  border-bottom:1px solid var(--hair);
}
.post__crumbs span{ max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post__head-grid{
  display:grid; grid-template-columns:auto minmax(280px, 440px);
  justify-content:start; align-items:start;
  column-gap:clamp(36px, 4.4vw, 80px);
}
.post__title{
  max-width:10em;
  font:400 clamp(44px, 5.9vw, 104px)/.98 var(--serif); letter-spacing:-.025em;
  color:var(--text); text-wrap:balance;
}

/* the right column sits close to the headline, set off by a hairline, and
   starts level with its first line */
.post__head-aside{
  padding:clamp(6px, .9vw, 16px) 0 4px clamp(24px, 2.4vw, 40px);
  border-left:1px solid var(--hair);
}
.post__dek{
  font:italic 400 clamp(20px, 1.6vw, 26px)/1.38 var(--serif);
  color:var(--text); text-wrap:pretty;
}
.post__byline{ margin-top:clamp(20px, 1.8vw, 28px); }
.post__byline-who{
  font:400 14px/1.4 var(--sans); letter-spacing:.01em; color:var(--label);
}
.post__byline-who a{ font-weight:600; color:var(--text); transition:color .3s var(--ease); }
.post__byline-who a:hover{ color:var(--gold); }
.post__byline-when{
  margin-top:8px;
  font:500 10px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--label);
}
.post__byline-when span{ margin:0 .7em; color:var(--gold); }

/* entrance: breadcrumb, headline, then the right column, each rising a little */
.post__crumbs{ animation:post-rise .9s var(--ease-out) both; }
@keyframes post-rise{ from{ opacity:0; translate:0 18px; } }
.post__title{ animation:post-rise 1.1s var(--ease-out) .12s both; }
.post__head-aside{ animation:post-rise 1.1s var(--ease-out) .32s both; }
@media (prefers-reduced-motion:reduce){
  .post__crumbs, .post__title, .post__head-aside{ animation:none; }
}
@media (max-width:900px){
  .post__head-grid{ grid-template-columns:minmax(0, 1fr); row-gap:26px; }
  .post__title{ max-width:11em; }
  .post__head-aside{ padding:0; border-left:0; max-width:60ch; }
}

/* edition note at the foot of the story, as on the live site */
.post__body > .post__edition{
  margin-top:clamp(32px, 3vw, 44px);
  font:italic 400 18px/1.5 var(--serif); color:var(--label);
}
.post__body > .post__edition a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.post__body > .post__edition a:hover{ color:var(--gold); }

/* ---- lead photograph ------------------------------------------------------ */
.post__lead{ margin:0 var(--gutter); }
.post__lead-frame{
  position:relative; aspect-ratio:2/1; overflow:hidden; background:var(--paper-deep);
  clip-path:inset(0 calc((1 - var(--reveal, 1)) * 50%) 0 0);          /* left → right, assets/js/hero.js */
}
.post__lead-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:left center; transform:scale(calc(1 + (1 - var(--reveal, 1)) * .08));
}
/* as in the homepage hero (hero.css): the opening-on-scroll is a desktop effect, so below
   1000px the photograph is full frame from the first paint; hero.js still runs, this ignores --reveal */
@media (max-width:999px){
  .post__lead-frame{ clip-path:none; }
  .post__lead-frame img{ transform:none; }
}
.post__caption{
  margin-top:16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  font:400 14px/1.5 var(--sans); letter-spacing:var(--ls-body); color:var(--text);
}
.post__caption::before{ content:""; flex:none; align-self:center; width:28px; height:1px; background:var(--gold); }
.post__credit{ color:var(--label); }

/* ---- article column + rail ------------------------------------------------ */
.post__layout{
  display:grid; grid-template-columns:minmax(0, var(--measure)) var(--rail);
  justify-content:center; column-gap:var(--rail-gap);
  padding:clamp(56px, 6vw, 100px) var(--gutter) 0;
  container-type:inline-size;     /* 100cqw = the layout's width, for wide photographs */
}
.post__main{ min-width:0; }
/* a plain page (page.php). Its standfirst is the page's opening line: set larger,
   on two balanced lines, level with the title's last line. With no lead
   photograph the text follows the header closer, and with no article footer
   under it, it leaves the room before the newsletter band a story's footer does. */
.post--page .post__head-grid{ align-items:end; align-items:last baseline; }
.post--page .post__dek{ max-width:13em; font-size:clamp(26px, 2.4vw, 34px); line-height:1.2; text-wrap:balance; }
.post--page .post__layout{ padding-top:clamp(24px, 2.4vw, 40px); padding-bottom:clamp(84px, 8vw, 132px); }

/* ---- body ---------------------------------------------------------------- */
.post__body{
  font:400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing:var(--ls-body); color:var(--text);
}
.post__body > p + p{ margin-top:1.4em; }
.post__body a{
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:1px; text-underline-offset:5px;
  transition:color .3s var(--ease);
}
.post__body a:hover{ color:var(--label); }

/* drop cap on the opening paragraph (in Wide images, a piece of the right column may come first) */
.post__body > p:first-child::first-letter,
.post__body > .post__side:first-child + p::first-letter{
  float:left; margin:.06em .1em 0 0;
  font:600 5.3em/.74 var(--serif); letter-spacing:0; color:var(--text);
}

/* inline figure: the full width of the reading column */
.post__figure{ margin:clamp(44px, 4.4vw, 72px) 0; }
.post__figure img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--paper-deep); }

/* pull quote: Cormorant, between two short gold rules. A quotation set apart in
   the text (a <blockquote> from the editor; embeds such as Instagram's carry a
   class and keep their own look) takes the same form, a size down, since
   some run to several sentences. */
.post__pull,
.post__body > blockquote:not([class]){
  margin:clamp(52px, 5.6vw, 88px) 0;
  display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center;
}
.post__pull::before,.post__pull::after,
.post__body > blockquote:not([class])::before,
.post__body > blockquote:not([class])::after{ content:""; flex:none; width:56px; height:1px; background:var(--gold); }
.post__pull p{
  font:italic 400 clamp(30px, 3vw, 44px)/1.18 var(--serif); letter-spacing:-.01em;
  color:var(--text); text-wrap:balance;
}
.post__body > blockquote:not([class]) p{
  font:italic 400 clamp(24px, 2.3vw, 32px)/1.28 var(--serif); letter-spacing:-.005em;
  color:var(--text); text-wrap:balance;
}

/* end mark, as in print */
.post__end{
  display:inline-block; width:.45em; height:.45em; margin-left:.4em;
  background:var(--gold); vertical-align:.05em;
}

/* ---- article footer --------------------------------------------------------- */
.post__foot{ padding:clamp(52px, 5vw, 76px) 0 clamp(84px, 8vw, 132px); }
.post__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px;
  padding:22px 0; border-top:1px solid var(--hair);
}
.post__row-label{
  flex:none; min-width:92px;
  font:600 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--label);
}
.post__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.post__tag{
  padding:9px 13px; border:1px solid var(--hair);
  font:500 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text);
  transition:border-color .3s var(--ease);
}
.post__tag:hover{ border-color:var(--gold); }
.post__share{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.post__share a{
  padding-bottom:5px; border-bottom:1px solid var(--gold);
  font:500 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text);
  transition:color .3s var(--ease);
}
.post__share a:hover{ color:var(--label); }
.post__author{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:26px; align-items:start;
  padding:36px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.post__avatar{
  width:76px; height:76px; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center;
  font:500 26px/1 var(--serif); letter-spacing:.04em; color:var(--text);
}
.post__author-role{ font:600 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--label); }
.post__author-name{ margin-top:12px; font:600 30px/1.1 var(--serif); color:var(--text); }
.post__author-name a{ color:inherit; transition:color .3s var(--ease); }   /* same hover as the byline */
.post__author-name a:hover{ color:var(--gold); }
.post__author-bio{ margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing:var(--ls-body); color:var(--text); }

/* ---- right rail ---------------------------------------------------------------- */
.post__rail{ display:flex; flex-direction:column; gap:64px; }

/* ad slots: shared .ad styles live in components/ad.css */
.ad__slot{ max-width:var(--rail); }

/* the half-page slot follows the reader down the article */
.ad--half{ position:sticky; top:calc(66px + 32px); }
@media (max-width:1099px){
  .post__layout{ grid-template-columns:minmax(0, var(--measure)); }
  .post__foot{ padding-bottom:56px; }
  .post__rail{ padding:48px 0 clamp(72px, 9vw, 104px); border-top:1px solid var(--hair); }
  .ad--half{ display:none; }
}
@media (max-width:720px){
  .post__lead{ margin:0; }
  .post__lead-frame{ aspect-ratio:4/3; }
  .post__lead .post__caption{ padding:0 var(--gutter); }
  .post__caption{ font-size:13px; }
  .post__author{ grid-template-columns:1fr; gap:18px; }
  .post__avatar{ width:60px; height:60px; font-size:21px; }
  .post__row-label{ min-width:0; width:100%; }
}

/* ---- story content: what the editor and the old stories produce ---------- */
.post__body > * + :where(h2, h3, h4, ul, ol, blockquote, figure, hr, table, .gallery, .wp-caption, .wp-block-image, .wp-block-embed, iframe){ margin-top:1.6em; }
.post__body > :where(h2, h3, h4) + p{ margin-top:.8em; }
.post__body > :where(h2, h3, h4){ font-family:var(--serif); font-weight:600; color:var(--text); text-wrap:balance; }
.post__body > h2{ font-size:clamp(26px, 2.4vw, 32px); line-height:1.2; margin-top:1.8em; }
.post__body > h3{ font-size:clamp(22px, 2vw, 26px); line-height:1.25; }
.post__body > :where(ul, ol){ padding-left:1.2em; }
.post__body li + li{ margin-top:.5em; }
.post__body li > :where(ul, ol){ margin-top:.5em; padding-left:1.2em; }
/* a heading reached by a link on the page (Privacy's contents) stops clear of the sticky nav */
.post__body [id]{ scroll-margin-top:calc(var(--nav-h) + 32px); }

/* tables (the cookie list on Privacy & Terms): hairline rows under a small-capitals head;
   on phones each row stacks, its first cell as the row's name */
.post__body > table{ width:100%; border-collapse:collapse; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); }
.post__body > table + *{ margin-top:1.6em; }
.post__body > table th{
  padding:0 20px 14px 0; border-bottom:1px solid var(--ink); text-align:left; vertical-align:bottom;
  font:600 10px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--label);
}
.post__body > table td{ padding:18px 20px 18px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
.post__body > table :where(th, td):not(:last-child){ min-width:8.5em; }   /* names keep whole words… */
.post__body > table :where(th, td):last-child{ padding-right:0; overflow-wrap:anywhere; }   /* …long web addresses wrap in the last column */
.post__body > table td:first-child{ font-weight:600; }
@media (max-width:720px){
  .post__body > table, .post__body > table :where(tbody, tr, td){ display:block; }
  .post__body > table thead{ display:none; }
  .post__body > table tr{ padding:18px 0; border-bottom:1px solid var(--hair); }
  .post__body > table tr:first-child{ border-top:1px solid var(--hair); }
  .post__body > table td{ padding:0; border:0; }
  .post__body > table td + td{ margin-top:6px; }
}
/* Amazon Polly's "Listen to article" player, which the plugin builds as a one-cell table before
   the text: out of the tables' styling (on phones it squeezed the player to its label's width),
   the label a small-capitals rubric, the player across the column */
.post__body > #amazon-polly-audio-table,
.post__body > #amazon-polly-audio-table :where(tbody, tr, td){ display:block; width:100%; min-width:0; padding:0; border:0; font-weight:400; }
.post__body #amazon-ai-player-label{ margin-bottom:12px; font:600 10px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--label); }
.post__body .amazon-ai-player{ display:block; width:100%; }
.post__body :is(#amazon-polly-subscribe-tab, #amazon-polly-by-tab):empty{ display:none; }
.post__body img{ max-width:100%; height:auto; }
.post__body iframe, .post__body embed, .post__body video{ max-width:100%; }
.post__body hr{ border:0; height:1px; background:var(--hair); }
/* a search box in the reading column (the page-not-found page, searchform.php): under the note, clear of its drop cap */
.post__body > .search-form{ clear:both; max-width:640px; margin:clamp(32px, 3vw, 48px) 0 clamp(80px, 8vw, 136px); }
.post__body .wp-caption, .post__body .post__inline, .post__body .wp-block-image{ max-width:100%; margin-left:0; margin-right:0; }
.post__body .wp-caption img, .post__body .post__inline img{ display:block; width:100%; }
.post__body .wp-caption-text, .post__body .wp-element-caption{ margin-top:12px; font:400 14px/1.5 var(--sans); color:var(--label); }
.post__body .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
@media (min-width:721px){
  .post__body .alignleft{ float:left; max-width:50%; margin:.4em 1.6em 1em 0; }
  .post__body .alignright{ float:right; max-width:50%; margin:.4em 0 1em 1.6em; }
}
.post__body .gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.post__body .gallery-item{ margin:0; }
.post__body .gallery img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.post__body .gallery br{ display:none; }

/* ---- Wide images and Centred galleries (inc/article.php) ----------------------
   Neither has the right column: its pieces float in the margin beside the text
   (.post__side) or sit beside the footer (.post__more), and whatever breaks out
   of the text's column (.post__wide) drops below any piece still beside it. */
:is(.post--wide, .post--galleries) .post__main{ display:flow-root; }   /* holds the floats */

/* Wide images (.post--wide): photographs, galleries and videos break out of the
   text's column to one shared width, 850px (--single, WTM_SINGLE), from the
   text's left edge, so every photo and video in the story ends on the same line;
   captions under them. Below 1100px they're centred, no wider than 850px; on
   phones, photographs and videos run edge to edge. */
.post--wide .post__body > .post__wide{
  clear:right;
  width:min(var(--single), 100% + var(--rail-gap) + var(--rail)); max-width:none;
  margin:clamp(28px, 2.4vw, 40px) 0;      /* a little more than a paragraph break */
}
.post--wide .post__body > .post__wide > a{ display:block; }
.post--wide .post__body > .post__wide img{ display:block; width:100%; height:auto; }
.post--wide .post__body > .post__wide :where(.wp-caption-text, .wp-element-caption){ margin-top:14px; }
/* a photo across a grid (its lead, or one on its own) starts at the text's edge, as the rest do */
.post--wide .post__body > .photo-grid .photo-grid__item--alone{ margin-inline:0; }

/* galleries: three across (two when there are two or four), cropped alike, each with its own caption */
.post--wide .post__body > .gallery.post__wide{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(10px, 1.2vw, 18px); }
.post--wide .post__body > .gallery.post__wide:has(> :nth-child(2):last-child),
.post--wide .post__body > .gallery.post__wide:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.post--wide .post__body > .gallery.post__wide img{ aspect-ratio:3 / 2; }
.post--wide .post__body > .gallery.post__wide :where(.gallery-caption, .wp-caption-text){ margin-top:10px; }

/* photo grids (components/photo-grid.css): two in a row still read as one */
.post--wide .post__body > .photo-grid.post__wide:has(+ .photo-grid){ margin-bottom:0; }
.post--wide .post__body > .photo-grid + .photo-grid.post__wide{ margin-top:var(--grid-gap); }

/* videos: the full width at 16:9, whatever size the embed code gave them (a player on
   its own is the block itself, so its width is the block's) */
.post--wide .post__body > .post__wide--video :where(iframe, video),
.post--wide .post__body > iframe.post__wide--video{
  display:block; height:auto; aspect-ratio:16 / 9; border:0; background:var(--ink);
}
.post--wide .post__body > .post__wide--video :where(iframe, video){ width:100%; }
.post--wide .post__body > .post__wide--video .wp-video{ width:100% !important; }

/* ---- Centred galleries (.post--galleries): The Nod Mag's article grid -----------
   From 768px the story sits in a centred container (1400px wide, then 1140, 960
   and 720px as the screen narrows; 12px in from its edges), split into the text's
   column (75% of it; 70% at 1280px and under) and the column beside it, a hairline
   between them. From 1280px the text keeps to its column's right-hand 83.5%. The
   text stops 60px short of the hairline (20px at 1280px and under) and the pieces
   start as far past it.

   Photo grids and photographs on their own (.post__wide) break out of the text,
   centred on the page: 70% of the screen's width less 20px a side, never narrower
   than the text. Each is a row of its own, its ground covering the hairline, which
   stops 20px above its photos and starts again 20px below. Photos side by side are
   cropped alike to 3:4, 16px apart; a photo across a grid keeps its own shape.
   Videos keep the text's column. Under 768px: the Standard single column, grids
   and photographs the screen's width less 10px a side. */
.post--galleries{
  --box:1400px;      /* the container */
  --col:.75;         /* the text's column, a share of the container */
  --indent:0;        /* the text's left margin, a share of its column */
  --pad:60px;        /* text to hairline, hairline to the pieces */
  --over:46px;       /* text down to a breakout's ground (its photos 20px further)… */
  --under:72px;      /* …and its ground down to the text */
  --tail:45px;       /* the hairline's run under the story's last line */
  --rail-gap:calc(2 * var(--pad) + 1px);
  /* an IAB ad, narrower only where the screen can't hold it */
  --rail:min(300px, (1 - var(--col)) * 100cqw - 1px - var(--pad) + 12px + max(0px, (100vw - var(--box) - 16px) / 2));
}
@media (min-width:1280px){ .post--galleries{ --indent:.165; } }
@media (max-width:1280px){ .post--galleries{ --box:1140px; --col:.7; --pad:20px; --over:86px; --tail:85px; } }
@media (max-width:1199px){ .post--galleries{ --box:960px; } }
@media (max-width:991px){ .post--galleries{ --box:720px; } }
@media (max-width:767px){ .post--galleries{ --col:1; --indent:0; --pad:0px; --over:32px; --under:52px; --rail:300px; } }

@media (min-width:768px){
  .post--galleries .post__layout{ display:block; max-width:var(--box); margin-inline:auto; padding-left:12px; padding-right:12px; }
  .post--galleries .post__main{ width:calc(var(--col) * 100%); padding-right:var(--pad); }
  .post--galleries :is(.post__body, .post__foot){ margin-left:calc(var(--indent) * 100%); }
  /* the hairline, from 60px over the story's first line to just under its last */
  .post--galleries .post__body{ position:relative; }
  .post--galleries .post__body::before{
    content:""; position:absolute; z-index:-1; top:-60px; bottom:calc(-1 * var(--tail));
    left:calc(100% + var(--pad)); width:1px; background:var(--hair); pointer-events:none;
  }
  .post--galleries .post__body:has(> .post__wide:first-child)::before{ top:0; }
  .post--galleries .post__body:has(> .post__wide:last-child)::before{ bottom:0; }
}

.post--galleries .post__body > .post__wide{
  --across:max(70vw - 40px, 100%);
  clear:right;
  width:var(--across); max-width:none;
  /* centred on the container, which is centred on the page */
  margin:var(--over) 0 var(--under) calc(50cqw - var(--indent) * (var(--col) * 100cqw - var(--pad)) - var(--across) / 2);
  padding:20px 0;
  background:var(--white);
}
/* one after another, they share their ground; two grids still read as one (components/photo-grid.css) */
.post--galleries .post__body > .post__wide:has(+ .post__wide){ margin-bottom:0; }
.post--galleries .post__body > .post__wide + .post__wide{ margin-top:0; }
.post--galleries .post__body > .photo-grid:has(+ .photo-grid){ padding-bottom:0; }
.post--galleries .post__body > .photo-grid + .photo-grid{ padding-top:var(--grid-gap); }
.post--galleries .post__body > .photo-grid{ --grid-gap:16px; }
.post--galleries .photo-grid__item:not(.photo-grid__item--alone) > .photo-grid__img{ aspect-ratio:3 / 4; object-fit:cover; }
.post--galleries .post__body > .post__wide--photo > a{ display:block; }
.post--galleries .post__body > .post__wide--photo img{ display:block; width:100%; height:auto; }
.post--galleries .post__body > .post__wide--photo :where(.wp-caption-text, .wp-element-caption){ margin-top:10px; }   /* as a grid photo's */

/* the pieces: in the margin, outside the text's box, so the lines never wrap round them */
.post__side,
.post__more{
  float:right; clear:right; width:var(--rail);
  margin:1.4em calc(-1 * (var(--rail-gap) + var(--rail))) 48px 0;
}
.post__body > .post__side + p{ margin-top:1.4em; }   /* the paragraph it sits beside keeps its spacing */
.post__body > .post__side:first-child{ margin-top:0; }   /* level with the story's start, like the right column */
.post__body > .post__side:first-child + p{ margin-top:0; }
/* the story's link and list styles stay out of the pieces */
.post__body .post__side{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); }
.post__body .post__side a,
.post__body .post__side a:hover{ text-decoration:none; color:inherit; }
.post__body .post__side li + li{ margin-top:0; }
.post__body .post__side img{ max-width:none; }
.post__body .post__side .rail-story__img{ height:84px; }
.post__more{ margin-top:0; display:flex; flex-direction:column; gap:64px; }
.post__more-item.is-placed{ display:none; }          /* already beside the text */
:is(.post--wide, .post--galleries) .ad--half{ position:static; }

@media (max-width:1099px){
  /* no right column: in Wide images, photographs, grids, galleries and videos take the
     layout's width, no wider than 850px, centred; the pieces follow the article */
  .post--wide .post__body > .post__wide{
    width:100cqw; max-width:var(--single); margin-left:calc((100% - min(var(--single), 100cqw)) / 2);
  }
  .post--wide .post__side{ display:none; }
  .post--wide .post__foot{ display:flex; flex-direction:column; }
  .post--wide .post__more{
    order:1; float:none; width:auto; margin:56px 0 0;
    padding-top:48px; border-top:1px solid var(--hair);
  }
  .post--wide .post__more-item.is-placed{ display:block; }
}
/* Centred galleries keeps the column beside the text down to 768px: the half page
   stays in it, and the latest stories keep the column's compact list (components/side-story.css) */
@media (min-width:768px) and (max-width:1099px){
  .post--galleries .ad--half{ display:flex; }
  .post--galleries :is(.post__side, .post__more) .rail-story{ grid-template-columns:84px minmax(0, 1fr); gap:16px; }
  .post--galleries :is(.post__side, .post__more) .rail-story__img{ width:84px; height:84px; aspect-ratio:auto; }
}
@media (max-width:767px){
  /* grids and photographs: the screen's width less 10px a side, one photo a line */
  .post--galleries .post__body > .post__wide{ --across:calc(100cqw + 2 * var(--gutter) - 20px); }
  .post--galleries .photo-grid__cols{ flex-direction:column; align-items:stretch; }
  .post--galleries .photo-grid__col{ display:contents; }
  .post--galleries .post__side{ display:none; }
  .post--galleries .post__foot{ display:flex; flex-direction:column; }
  .post--galleries .post__more{
    order:1; float:none; width:auto; margin:56px 0 0;
    padding-top:48px; border-top:1px solid var(--hair);
  }
  .post--galleries .post__more-item.is-placed{ display:block; }
}
@media (max-width:720px){
  .post--wide .post__body > .post__wide:not(.gallery, .photo-grid){
    width:calc(100cqw + 2 * var(--gutter)); margin-left:calc((100% - 100cqw) / 2 - var(--gutter));
  }
  .post--wide .post__body > .post__wide:not(.gallery, .photo-grid) :where(.wp-caption-text, .wp-element-caption){ padding:0 var(--gutter); }
  .post--wide .post__body > .gallery.post__wide,
  .post--wide .post__body > .gallery.post__wide:has(> :nth-child(2):last-child),
  .post--wide .post__body > .gallery.post__wide:has(> :nth-child(4):last-child){ grid-template-columns:minmax(0, 1fr); row-gap:24px; }
}