/*
  Inner pages.

  Two jobs, in this order:

  1. THE SHARED HEADER. Every inner page — the four redesigned here and the
     twelve still served by the parent's templates — renders a .page-header.
     Restyling that one block moves the whole site onto this art direction
     at once, so no page is ever left looking like the old theme while the
     rest moves on.

     The parent's header is a dark full-bleed banner (in skin A, a
     documentary photo under a near-black scrim). This direction replaces it
     with a light editorial header on the page's own background: a mono
     breadcrumb, display type at inner-page scale, and a single hairline
     closing it. The page starts with type, not with a slab of colour.

  2. THE INHERITED COMPONENTS. Everything base.css already draws reads
     var(--token), so the palette and radii come across on their own. What
     needs restating is scale, rhythm and weight — the parent's fixed rem
     sizes and 13 ad-hoc breakpoints against this theme's fluid system.
*/

/* ---------- Shared page header ---------- */
.theme-meridian .page-header{
  background:var(--bg);
  color:var(--ink);
  padding:clamp(var(--s-8), 8vw, 124px) 0 clamp(var(--s-7), 5vw, var(--s-9));
  border-bottom:1px solid var(--line);
  overflow:visible;
}
/* A quiet green wash off the top-right, echoing the homepage hero so inner
   pages read as the same site rather than a different template. */
.theme-meridian .page-header::before{
  content:"";position:absolute;top:-40%;right:-10%;
  width:min(620px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-tint) 0%, rgba(231,240,235,0) 70%);
  pointer-events:none;z-index:0;
}
.theme-meridian .page-header .wrap{
  max-width:var(--maxw);padding-inline:var(--gutter);z-index:1;
}
.theme-meridian .page-header h1{
  color:var(--ink);
  /* Smaller than the homepage hero's --t-h1 on purpose: an inner page is
     navigation, not a first impression, and 5rem of serif above a
     breadcrumb reads as shouting. */
  font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.8rem);
  line-height:1.02;max-width:18ch;margin:0 0 var(--s-5);
}
.theme-meridian .page-header p{
  color:var(--ink-soft);font-size:var(--t-lead);line-height:1.6;
  max-width:58ch;margin:0;
}
.theme-meridian .breadcrumb,
.theme-meridian .breadcrumb a{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2-deep);margin-bottom:var(--s-5);
  text-decoration:none;
}
.theme-meridian .breadcrumb a:hover{color:var(--accent);text-decoration:underline;}

/* Parent skins set a photo background on .page-header via body.skin-*; no
   skin stylesheet loads here, but this is the belt-and-braces guarantee
   that no inherited photo banner can come back. */
.theme-meridian .page-header{background-image:none;}

/* ---------- Eyebrow -> the theme's mono label ----------
   base.css's .eyebrow is a bold sans caps with a rule before it. This
   theme's small-type signature is mono, and the eyebrow appears on a dozen
   inherited pages, so it is restated rather than left as an outlier. */
.theme-meridian .eyebrow{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.16em;color:var(--accent-2-deep);gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.theme-meridian .eyebrow::before{width:var(--s-6);height:1px;opacity:.5;background:currentColor;}

/* ---------- Section rhythm ----------
   base.css sections are a flat 88px. Match the fluid rhythm the new
   sections use so an inherited section and a redesigned one sit at the
   same pace on the same page. */
.theme-meridian section{padding-block:var(--section-y);}
.theme-meridian .section-tight{padding-block:var(--section-y-tight);}
.theme-meridian .wrap{max-width:var(--maxw);padding-inline:var(--gutter);}

/* ---------- Tags ---------- */
.theme-meridian .tag{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;padding:6px var(--s-4);
  background:var(--accent-tint);color:var(--accent);border-color:transparent;
}
.theme-meridian .tag-light{background:rgba(255,255,255,.16);color:#fff;border-color:transparent;}

/* ---------- Generic cards ----------
   One shared treatment for every card grid base.css draws (About's vision
   /mission and values, Programs' pillars, Reports, Career, Supporters,
   News, Offices, Ways to Give, Impact). They differ in content, not in
   their container, so the container is set once. */
.theme-meridian .vm-card,
.theme-meridian .value-card,
.theme-meridian .pillar,
.theme-meridian .laptop-card,
.theme-meridian .cost-card,
.theme-meridian .give-card,
.theme-meridian .office-card,
.theme-meridian .impact-card,
.theme-meridian .report-card,
.theme-meridian .job-card,
.theme-meridian .supporter-card,
.theme-meridian .news-card,
.theme-meridian .team-card,
.theme-meridian .feature-card,
.theme-meridian .policy-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  box-shadow:none;
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.theme-meridian .vm-card:hover,
.theme-meridian .value-card:hover,
.theme-meridian .pillar:hover,
.theme-meridian .laptop-card:hover,
.theme-meridian .cost-card:hover,
.theme-meridian .give-card:hover,
.theme-meridian .office-card:hover,
.theme-meridian .report-card:hover,
.theme-meridian .job-card:hover,
.theme-meridian .supporter-card:hover,
.theme-meridian .news-card:hover,
.theme-meridian .team-card:hover{
  border-color:var(--accent-line);
  box-shadow:var(--shadow-sm);
  transform:translateY(-4px);
}
/* base.css's shared .lift hover would stack a second, heavier shadow and a
   6px rise on top of the 4px one above — one hover treatment, not two. */
.theme-meridian .lift:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px);}

/* ---------- Dark panels ----------
   base.css gives these their own dark backgrounds and heading colours,
   which now survive (system.css deliberately sets no blanket heading
   colour). Only their shape and rhythm need bringing onto this scale. */
.theme-meridian .gap-section,
.theme-meridian .impact-section,
.theme-meridian .price-section{padding-block:var(--section-y);}
.theme-meridian .donate-panel{
  border-radius:var(--radius-lg);padding:clamp(var(--s-6), 4vw, var(--s-8));
  margin-top:var(--s-8);
}
.theme-meridian .mission-strip{background:var(--accent-2);color:var(--accent-dark);}
.theme-meridian .mission-strip p{
  font-family:var(--font-display);font-size:var(--t-h4);font-style:italic;
  margin:0;
}

/* ---------- Pillars (Programs) ---------- */
.theme-meridian .pillar{overflow:hidden;}
.theme-meridian .pillar-head{
  background:var(--accent);padding:var(--s-6) var(--s-6) var(--s-5);
}
.theme-meridian .pillar-head h3{color:#fff;font-size:var(--t-h3);}
.theme-meridian .pillar-head p{color:rgba(255,255,255,.78);font-size:var(--t-sm);margin:0;}
.theme-meridian .pillar-body{padding:var(--s-6);}
.theme-meridian .pillar-steps li{font-size:var(--t-sm);line-height:1.55;}
.theme-meridian .pillar-steps li b{font-family:var(--font-mono);color:var(--accent-2-deep);font-weight:500;}
.theme-meridian .pillar-outcome{
  background:var(--accent-tint);border-radius:var(--radius-sm);
  font-size:var(--t-sm);color:var(--ink-soft);
}
.theme-meridian .pillar-outcome strong{
  display:block;font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s-2);font-weight:500;
}

/* ---------- Laptop program ---------- */
.theme-meridian .laptop-card{overflow:hidden;}
.theme-meridian .laptop-card .lc-body{padding:var(--s-7);}
.theme-meridian .lc-list li{font-size:var(--t-sm);line-height:1.55;}
.theme-meridian .cost-card .amt{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  font-size:clamp(2rem, 1.4rem + 2vw, 2.8rem);letter-spacing:-.03em;
  color:var(--accent);
}
.theme-meridian .cost-card .yr{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Stats (inherited .stat-col / .stat-grid) ---------- */
.theme-meridian .stat-col strong,
.theme-meridian .stat-col .num{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}

/* ---------- Forms ----------
   The markup, validation, nonce and honeypot all stay exactly as the
   parent renders them — this is purely the field's appearance. */
.theme-meridian .form-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--card-radius);box-shadow:none;
  padding:clamp(var(--s-6), 4vw, var(--s-8));
}
.theme-meridian .field label,
.theme-meridian .field-legend{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.theme-meridian .field input,
.theme-meridian .field select,
.theme-meridian .field textarea{
  font-family:var(--font-body);font-size:var(--t-body);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);
  padding:var(--s-4) var(--s-4);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.theme-meridian .field input:focus,
.theme-meridian .field select:focus,
.theme-meridian .field textarea:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-wash);
}
.theme-meridian .form-success{
  background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius-md);color:var(--accent);
}
.theme-meridian .form-error{border-radius:var(--radius-md);}
.theme-meridian .form-note{font-size:var(--t-sm);color:var(--ink-faint);}

/* ---------- Team ---------- */
.theme-meridian .team-card{overflow:hidden;}
.theme-meridian .team-photo{border-radius:0;}
.theme-meridian .team-group h2{
  font-size:var(--t-h3);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line);margin-bottom:var(--s-7);
}

/* ---------- Block-editor prose (page.php, single.php) ---------- */
.theme-meridian .entry-content{font-size:var(--t-body);line-height:1.7;}
.theme-meridian .entry-content h2{
  font-size:var(--t-h3);padding-left:var(--s-5);margin-top:2em;
}
.theme-meridian .entry-content h2::before{
  width:3px;border-radius:0;background:var(--accent-2);
}
.theme-meridian .entry-content a{
  color:var(--accent);text-decoration-color:var(--accent-2);
}
.theme-meridian .entry-content blockquote{
  border-left-width:2px;font-size:var(--t-lead);
}

/* ---------- Video ---------- */
.theme-meridian .video-wrap{border-radius:var(--radius-lg);overflow:hidden;}

/* ---------- Godparent ----------
   The one page with a genuinely bespoke hero in the parent. Left as its own
   composition, brought onto this theme's shape and type. */
.theme-meridian .gp-hero h1{font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);line-height:1.04;}
.theme-meridian .gp-hero-card,
.theme-meridian .gp-hero-badge,
.theme-meridian .policy-card,
.theme-meridian .faq-item{border-radius:var(--card-radius);}

/* The two translucent cards that live on dark sections. Kept out of the
   light-card treatment above for the same reason as each other: painting
   them --paper puts near-white panels under their own light text. */
.theme-meridian .gap-card{
  background:rgba(236,239,230,.07);
  border:1px solid rgba(236,239,230,.16);
  border-radius:var(--radius-md);
}
.theme-meridian .gap-card:hover{border-color:rgba(236,239,230,.32);}
.theme-meridian .gap-card .num{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--accent-2);
}

/* Godparent's pricing tiers sit on the dark .price-section as translucent
   panels with light text — deliberately NOT part of the light-card
   treatment above, which would paint them near-white under their own
   white headings. */
.theme-meridian .price-card{
  border-radius:var(--card-radius);
  background:rgba(236,239,230,.07);
  border:1px solid rgba(236,239,230,.16);
}
.theme-meridian .price-card.popular{
  background:rgba(236,239,230,.12);
  border-color:var(--accent-2);
}
.theme-meridian .price-card:hover{
  border-color:rgba(236,239,230,.32);transform:translateY(-4px);
}
.theme-meridian .price-card.popular:hover{border-color:var(--accent-2);}
.theme-meridian .gp-hero-stat strong{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}

/* ---------- Lightbox ---------- */
.theme-meridian .sref-lightbox-img{border-radius:var(--radius-md);}

/* The FAQ expand/collapse indicator. base.css leaves it at a tint that
   measures 2.66:1 — below the 3:1 floor a non-text UI control needs to
   stay perceivable. */
.theme-meridian .faq-q .plus{color:var(--accent);opacity:1;}
.theme-meridian .faq-q{font-size:var(--t-body);}

/* ---------- Office / location row (About) ---------- */
.m-offices{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
  border-top:1px solid var(--line);
}
.m-office{
  display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;
  padding-top:var(--s-6);
}
.m-office h3{margin:0;font-size:var(--t-h4);}
.m-office p{margin:0;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;max-width:32ch;}
.m-office a{
  font-family:var(--font-mono);font-size:var(--t-sm);color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--accent-line);padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.m-office a:hover{border-color:var(--accent);}
@media (max-width:860px){ .m-offices{grid-template-columns:1fr;gap:var(--s-6);} }

/* ---------- Article measure ----------
   Prose caps at a real reading measure and sits offset rather than centred,
   matching the asymmetry the rest of the theme uses. */
.m-article{max-width:72ch;margin-left:0;}
/* Generic pages keep the editorial offset. A single post does not: it puts
   the share rail in that space instead (see .m-post-layout). */
@media (min-width:1100px){
  .m-article{margin-left:clamp(0px, 8vw, 140px);}
  .m-post-layout .m-article{margin-left:0;}
}

/* ---------- News ----------
   These were bare text stacks: a date, a title, an excerpt and a link, on
   the page background with nothing holding them together. They now use the
   same card surface as every other grid in the theme, which is what makes
   the page read as part of the site rather than a default archive. */
/* Column COUNT is not fixed — column WIDTH is. The wrap has no max-width
   (it follows the viewport, per the reference), so any fixed count lets
   cards grow without limit: two columns at 1354px produced 660px cards,
   and the artwork is 300px wide, so they were upscaled past 2x and looked
   soft. Holding the track near 300px keeps cards at roughly the source
   resolution and adds columns on a wider screen rather than inflating the
   ones already there — four across at 1440px, five at 1737px.

   min(100%, 300px) rather than 300px: under a 300px viewport a bare 300px
   track would exceed the container and overflow. */
.m-news{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap:var(--s-5);
}
/* A section holding a single post is the one case that gets the wide
   feature treatment (see home.php) — one card alone in a five-column row
   reads as a mistake. Capped, so its image slot stays near card size. */
.m-news.is-cols-1{max-width:min(100%, 720px);}
.m-news-item{
  display:flex;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  overflow:hidden;
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.m-news-item:hover{
  border-color:var(--accent-line);
  box-shadow:var(--shadow-sm);
  transform:translateY(-4px);
}
/* The newest post leads across the full row with a larger image, so the
   page says what is actually new instead of showing a flat wall of cards. */
/* Only ever inside .is-cols-1, whose 720px cap makes exactly two tracks. */
.m-news-item.is-lead{grid-column:span 2;}
.m-news-link{
  display:flex;flex-direction:column;gap:var(--s-5);
  text-decoration:none;color:inherit;width:100%;
}
.m-news-item.is-lead .m-news-link{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:0;align-items:stretch;
}
/* width:100% and aspect-ratio:auto are both required. .m-media-3x2 sets
   aspect-ratio:3/2; with the height:100% below that becomes a DEFINITE
   height, and an auto width is then computed FROM the ratio (409 x 1.5 =
   613px), which overflowed the 512px grid track and painted the image over
   the text. Pinning the width makes the track authoritative again. */
.m-news-item.is-lead .m-media{
  height:100%;width:100%;aspect-ratio:auto;
  min-height:clamp(220px, 20vw, 330px);
}
.m-news-item.is-lead .m-media img{height:100%;width:100%;object-fit:cover;}
/* Square corners inside the card — the card itself carries the radius. */
.m-news-link .m-media{border-radius:0;position:relative;}
.m-news-body{
  display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-6);flex:1;
}
.m-news-item.is-lead .m-news-body{padding:clamp(var(--s-6), 3vw, var(--s-8));}

/* Type chip, over the image's lower-left. */
.m-news-chip{
  position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:2;
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent-dark);color:var(--panel-dark-text);
  padding:5px var(--s-3);border-radius:999px;
}
.m-news-item.is-lead .m-news-chip{background:var(--accent-2);color:var(--accent-dark);}

/* The read-more row sits on a rule at the card's foot, so every card ends
   on the same line regardless of how long its excerpt runs. */
.m-news-more{
  margin-top:auto;padding-top:var(--s-5);width:100%;
  border-top:1px solid var(--line);
  justify-content:space-between;
}
.m-news-body h2{
  margin:0;font-size:var(--t-h3);
  transition:color var(--dur-fast) var(--ease-out);
}
.m-news-item.is-lead .m-news-body h2{font-size:var(--t-h2);}
.m-news-link:hover h2{color:var(--accent);}
.m-news-excerpt{margin:0;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;}
.m-news-item.is-lead .m-news-excerpt{font-size:var(--t-lead);}

/* ---- Card height ----
   Titles ran 3 to 5 lines and excerpts 3, so a 320px card stood 614-643px
   tall — about 2:1 — and every row came out a different height because the
   height was whatever that card's headline happened to need. Clamping both
   makes the card a fixed recipe (image + date + 3 lines + 2 lines + link),
   so cards match across rows and the grid reads as a grid.

   The feature card is exempt: it has a whole column to fill. */
.m-news-item:not(.is-lead) .m-news-body h2,
.m-news-item:not(.is-lead) .m-news-body h3{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.m-news-item:not(.is-lead) .m-news-excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
.m-news-more{
  display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.m-news-more .m-arrow{--arrow-size:38px;}
.m-news-link:hover .m-arrow{background:var(--accent);border-color:var(--accent);color:#fff;}
.m-news-link:hover .m-media > img{transform:scale(1.04);}

@media (max-width:900px){
  .m-news-item.is-lead .m-news-link{grid-template-columns:1fr;}
  .m-news-item.is-lead .m-media{min-height:clamp(200px, 40vw, 300px);}
}
/* Two up on a phone. auto-fill would give one track here (no room for a
   300px minimum), so the count is stated explicitly. A card is then about
   160px wide, so the body has to get out of its own way: the padding, the
   title and the meta all step down, and the excerpt is dropped — at that
   width it managed three words a line and pushed the read-more link off
   the fold. The image, chip and title still carry the card. */
@media (max-width:720px){
  .m-news{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--s-4);}
  /* The feature still spans the pair, so it is never half a row. */
  .m-news-item.is-lead{grid-column:span 2;}

  .m-news-body{padding:var(--s-4);gap:var(--s-2);}
  .m-news-body h2,
  .m-news-body h3{font-size:1rem;line-height:1.25;}
  .m-news-item:not(.is-lead) .m-news-excerpt{display:none;}
  .m-news-item:not(.is-lead) .m-index{font-size:.62rem;letter-spacing:.06em;}
  .m-news-chip{left:var(--s-3);bottom:var(--s-3);font-size:.58rem;padding:4px var(--s-2);}
  .m-news-more{font-size:.62rem;}
  .m-news-more .m-arrow{width:28px;height:28px;}
  .m-news-more .m-arrow svg{width:13px;height:13px;}
}

/* Below this a two-column card is narrower than its own chip; one up. */
@media (max-width:359px){
  .m-news{grid-template-columns:1fr;}
  .m-news-item.is-lead{grid-column:auto;}
}

/* Pagination */
.theme-meridian .navigation.pagination{margin-top:var(--s-9);}
.theme-meridian .nav-links .page-numbers,
.theme-meridian .pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 var(--s-3);
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--font-mono);font-size:var(--t-sm);
  color:var(--ink);text-decoration:none;margin-right:var(--s-2);
}
.theme-meridian .pagination .page-numbers.current{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

/* ---------- Editor content slot ----------
   Where a bespoke page's own block-editor content renders. Tightened
   vertical rhythm: this sits between designed sections that already carry
   full section padding, so a third full gap would read as a hole. */
.m-editor{padding-block:var(--section-y-tight);}
.m-editor.is-tint{background:var(--surface-2);}
.m-pagelinks{
  margin-top:var(--s-6);font-family:var(--font-mono);font-size:var(--t-sm);
  display:flex;gap:var(--s-3);
}
.m-pagelinks a{color:var(--accent);}

/* ---------- Widgets ----------
   Whatever block or widget an editor drops in inherits the theme's prose
   styling, so a widget area never looks pasted in from another site. */
.m-widget{margin-bottom:var(--s-6);}
.m-widget:last-child{margin-bottom:0;}
.m-widget-title{
  margin:0 0 var(--s-4);font-size:var(--t-h4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
}
.m-widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3);}
.m-widget li a{color:var(--ink);text-decoration:none;font-size:var(--t-sm);}
.m-widget li a:hover{color:var(--accent);}
.m-widget p{color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;}

/* Full-width strip above the footer. */
.m-widget-strip{
  background:var(--accent-2-light);
  padding-block:var(--s-6);
  border-top:1px solid var(--line);
}
.m-widget-strip .m-widget{margin-bottom:0;}
.m-widget-strip .m-widget-title{border-bottom:0;padding-bottom:0;margin-bottom:var(--s-2);}

/* News article + optional sidebar. */
.m-post-layout.has-sidebar{
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:clamp(var(--s-7), 5vw, var(--s-9));align-items:start;
}
.m-post-layout.has-sidebar .m-article{margin-left:0;max-width:none;}
.m-post-sidebar{
  position:sticky;top:clamp(88px,12vh,120px);
  padding:var(--s-6);background:var(--surface-2);
  border-radius:var(--card-radius);
}
@media (max-width:900px){
  .m-post-layout.has-sidebar{grid-template-columns:1fr;}
  .m-post-sidebar{position:static;}
}

/* ---------- Single post ----------
   An article page, not a page with text on it. The body used to sit in a
   72ch column pushed 8vw right, leaving a third of the row empty and
   ending in a bare CTA. The row is now: share rail, measured prose, and
   the widget sidebar when one is active. */

.m-post-header .breadcrumb span{color:var(--muted);}
.m-post-kind{
  display:inline-block;margin:0 0 var(--s-4);
  padding:5px var(--s-3);border-radius:999px;
  background:var(--accent-2);color:var(--accent-dark);
  font-family:var(--font-mono, inherit);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.m-post-header h1{max-width:20ch;}
.m-post-standfirst{
  max-width:56ch;margin:var(--s-5) 0 0;
  font-size:var(--t-lead);line-height:1.55;color:var(--muted);
}
.m-post-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin:var(--s-6) 0 0;color:var(--muted);
  font-family:var(--font-mono, inherit);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
}
/* A dot between the date and the reading time, without an empty element. */
.m-post-meta span + span::before,
.m-post-meta time + span::before{content:"";}

.m-post-figure{position:relative;z-index:2;margin-top:calc(var(--section-y) * -0.35);}
.m-post-figure .m-media{border-radius:var(--radius-lg);box-shadow:var(--shadow);}
.m-post-figcaption{margin:var(--s-3) 0 0;color:var(--muted);font-size:.9rem;}

.m-post-section{padding-top:clamp(var(--s-8), 6vw, var(--s-10));}

/* Rail + prose. The rail column is fixed so the prose measure does not
   shift between a post that has a sidebar and one that does not. */
.m-post-layout{
  display:grid;grid-template-columns:1fr;gap:var(--s-6);align-items:start;
}
@media (min-width:1000px){
  .m-post-layout{
    grid-template-columns:72px minmax(0, 72ch) 1fr;
    gap:clamp(var(--s-6), 4vw, var(--s-8));
  }
  .m-post-layout.has-sidebar{
    grid-template-columns:72px minmax(0, 66ch) minmax(260px, 1fr);
  }
  .m-post-rail{position:sticky;top:clamp(96px,13vh,132px);}
}
.m-post-layout .m-article{max-width:72ch;}

.m-post-rail .m-label{margin:0 0 var(--s-3);}
.m-share{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;}
.m-share a{
  display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line);
  color:var(--ink);background:var(--paper);
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.m-share a:hover,
.m-share a:focus-visible{
  background:var(--accent-dark);border-color:var(--accent-dark);
  color:var(--panel-dark-text);transform:translateY(-2px);
}
.m-share svg{width:17px;height:17px;}
.m-share a.is-copied{background:var(--accent);border-color:var(--accent);color:var(--accent-dark);}
@media (min-width:1000px){ .m-share{flex-direction:column;} }

.m-post-embed{
  margin:0 0 var(--s-7);border-radius:var(--card-radius);
  cursor:pointer;box-shadow:var(--shadow-sm);
}
.m-post-listen{margin:0 0 var(--s-7);}

/* The imported posts carry bold lead-ins rather than real headings; give
   the prose enough air that they still read as breaks in the text. */
.m-article .entry-content{color:var(--ink);}
.m-article .entry-content p{margin:0 0 var(--s-5);}
.m-article .entry-content > :first-child{margin-top:0;}
.m-article .entry-content img{border-radius:var(--card-radius);}
.m-post-pages{margin-top:var(--s-6);display:flex;gap:var(--s-3);color:var(--muted);}

/* Previous / next within the same media type. */
.m-postnav{padding:0 0 var(--s-8);}
.m-postnav-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-7);
}
/* Explicit placement, so the first post in a series does not stretch its
   single "next" card across the whole row. */
.m-postnav-item.is-prev{grid-column:1;}
.m-postnav-item.is-next{grid-column:2;}
.m-postnav-item{
  display:block;padding:var(--s-5) var(--s-6);
  border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--paper);text-decoration:none;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
}
.m-postnav-item:hover,
.m-postnav-item:focus-visible{
  border-color:var(--accent-dark);box-shadow:var(--shadow-sm);transform:translateY(-2px);
}
.m-postnav-item.is-next{text-align:right;}
.m-postnav-item .m-label{display:block;margin:0 0 var(--s-2);}
.m-postnav-title{
  display:block;font-family:var(--font-display);
  font-size:1.05rem;line-height:1.35;color:var(--ink);
}
@media (max-width:620px){
  .m-postnav-grid{grid-template-columns:1fr;}
  .m-postnav-item.is-prev,
  .m-postnav-item.is-next{grid-column:1;text-align:left;}
}

/* A head aside holding one action, not a paragraph: the button should be
   its own width instead of filling the column. */
.m-head-aside-action{display:flex;justify-content:flex-end;align-items:flex-end;}
.m-head-aside-action .btn{width:auto;}
@media (max-width:820px){ .m-head-aside-action{justify-content:flex-start;} }

/* The rail is 72px wide; the label's decorative rule does not fit beside
   five characters, hence m-label-plain in the markup and nowrap here. */
.m-post-rail .m-label{white-space:nowrap;}

/* ---------- On-site podcast player ----------
   Episodes play here rather than on the podcast host, so this sits on the
   dark panel the podcast section already used. Colours come from the dark
   panel tokens, not from .m-podcast, so the player can be dropped on any
   dark section later. */

.m-player-section{padding-block:clamp(var(--s-9), 7vw, var(--s-11));}
.m-player-head{max-width:46ch;margin-bottom:clamp(var(--s-7), 4vw, var(--s-8));}
.m-player-head h2{color:var(--panel-dark-text);}
.m-player-head .m-lead{color:var(--panel-dark-muted, rgba(255,255,255,.72));}

.m-player{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.m-player-main{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(var(--s-5), 3vw, var(--s-7));
  align-items:center;padding:clamp(var(--s-5), 3vw, var(--s-7));
}
.m-player-art{
  width:clamp(84px, 11vw, 132px);aspect-ratio:1;
  border-radius:var(--card-radius);overflow:hidden;background:rgba(255,255,255,.08);
}
.m-player-art img{width:100%;height:100%;object-fit:cover;display:block;}
.m-player-now{
  margin:0 0 var(--s-2);color:var(--accent-2);
  font-family:var(--font-mono, inherit);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
}
.m-player-body h3{
  margin:0 0 var(--s-5);color:var(--panel-dark-text);
  font-size:clamp(1.05rem, .9rem + .7vw, 1.6rem);line-height:1.25;
}

.m-player-controls{display:flex;align-items:center;gap:var(--s-5);}
.m-player-btn{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  /* Gold, not --accent: the green (#0F6B4F) only reaches ~2.7:1 against
     this dark panel (#0F231B) and its icon fares no better. Gold clears AA. */
  background:var(--accent-2);color:var(--accent-dark);
  transition:transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.m-player-btn:hover{transform:scale(1.06);}
.m-player-btn svg{width:22px;height:22px;}
/* Only one of the two glyphs is ever shown; is-playing lives on the root
   so the episode list can respond to it too. */
.m-player-pause{display:none;}
.m-player.is-playing .m-player-play{display:none;}
.m-player.is-playing .m-player-pause{display:block;}

.m-player-scrub{flex:1 1 auto;min-width:0;}
.m-player-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:999px;cursor:pointer;background:transparent;
}
/* --played is written by player.js; the gradient is the progress fill. */
.m-player-range::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(to right, var(--accent-2) var(--played,0%), rgba(255,255,255,.2) var(--played,0%));
}
.m-player-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.2);}
.m-player-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent-2);}
.m-player-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-4.5px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent-2);
}
.m-player-range::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent-2);
}
.m-player-range:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;}
.m-player-time{
  display:flex;justify-content:space-between;margin:var(--s-2) 0 0;
  color:rgba(255,255,255,.62);
  font-family:var(--font-mono, inherit);font-size:.72rem;letter-spacing:.06em;
}

.m-player-list{
  list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.m-player-list li + li{border-top:1px solid rgba(255,255,255,.08);}
.m-player-ep{
  width:100%;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  align-items:baseline;justify-content:space-between;
  padding:var(--s-4) clamp(var(--s-5), 3vw, var(--s-7));
  background:none;border:0;cursor:pointer;text-align:left;
  color:rgba(255,255,255,.82);
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.m-player-ep:hover,
.m-player-ep:focus-visible{background:rgba(255,255,255,.07);color:var(--panel-dark-text);}
.m-player-ep.is-active{color:var(--accent-2);}
.m-player-ep-title{font-family:var(--font-display);font-size:1rem;line-height:1.35;}
.m-player-ep-meta{
  display:flex;gap:var(--s-4);color:rgba(255,255,255,.55);
  font-family:var(--font-mono, inherit);font-size:.7rem;letter-spacing:.06em;
}

.m-player-elsewhere{margin-top:clamp(var(--s-6), 4vw, var(--s-8));}
/* The platform links used to be the only way to hear an episode, so they
   were full-width display-type rows. The player now carries that job, so
   these become compact secondary pills. Every inherited property from
   .m-podcast-links (flex column, border-top, --t-h4, border-bottom on the
   anchor) has to be unset by name, or they keep the old weight. */
.m-podcast-links.is-inline{
  flex-direction:row;flex-wrap:wrap;gap:var(--s-3);
  border-top:0;margin-top:var(--s-3);
}
.m-podcast-links.is-inline li{border:0;}
.m-podcast-links.is-inline a{
  padding:9px var(--s-4);border-bottom:0;
  border:1px solid rgba(236,239,230,.26);border-radius:999px;
  font-family:var(--font-body);font-size:.85rem;font-weight:500;
  letter-spacing:0;gap:var(--s-2);
}
.m-podcast-links.is-inline a:hover{
  padding-left:var(--s-4);
  background:rgba(236,239,230,.1);border-color:var(--accent-2);color:var(--accent-2);
}
/* The circular arrow is too heavy at pill size. */
.m-podcast-links.is-inline .m-arrow{display:none;}

@media (max-width:700px){
  .m-player-main{grid-template-columns:1fr;}
  .m-player-art{width:clamp(72px, 22vw, 100px);}
  .m-player-controls{gap:var(--s-4);}
  .m-player-btn{width:48px;height:48px;}
  .m-player-ep{flex-direction:column;gap:var(--s-2);}
}

/* A featured image too small to fill a full-bleed hero (see single.php).
   It keeps its own aspect ratio and sits at the text column's left edge,
   so it reads as a deliberate plate rather than a stretched banner. */
.m-post-figure.is-contained{max-width:min(100%, 520px);margin-top:var(--s-7);}
.m-post-figure.is-contained .m-media{aspect-ratio:auto;height:auto;}
/* position:static is the load-bearing line. .m-media img is absolutely
   positioned by default (it fills a ratio-locked box), so with height:auto
   above the container collapsed to 0 and overflow:hidden clipped the image
   out of existence — the hero rendered as blank space. Returning the image
   to normal flow lets it give the container its height. */
.m-post-figure.is-contained .m-media img{
  position:static;width:100%;height:auto;display:block;object-fit:contain;
}

/* ---------- Newsletter signup ----------
   Replaces the plugin form the old site carried at the foot of every
   article. Dark panel so it reads as a deliberate stop at the end of the
   piece rather than another block of page. */

.m-subscribe{
  background:var(--accent-dark);color:var(--panel-dark-text);
  padding-block:clamp(var(--s-8), 6vw, var(--s-10));
}
.m-subscribe-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(var(--s-6), 5vw, var(--s-9));align-items:start;
}
.m-subscribe-copy h2{color:var(--panel-dark-text);margin:0 0 var(--s-4);}
.m-subscribe-copy .m-lead{color:rgba(236,239,230,.76);margin:0;}

.m-subscribe-fields{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--s-4);
}
.m-subscribe-fields .is-wide{grid-column:1 / -1;}
.m-subscribe-fields p{margin:0;}
.m-subscribe-form label{
  display:block;margin-bottom:6px;
  font-family:var(--font-mono, inherit);
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(236,239,230,.72);
}
.m-subscribe-form input[type="text"],
.m-subscribe-form input[type="email"]{
  width:100%;padding:12px var(--s-4);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-sm, 8px);
  color:var(--panel-dark-text);font-size:1rem;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.m-subscribe-form input::placeholder{color:rgba(236,239,230,.4);}
.m-subscribe-form input:focus-visible{
  outline:none;border-color:var(--accent-2);background:rgba(255,255,255,.12);
}

.m-subscribe-lists{border:0;padding:0;margin:var(--s-5) 0 0;}
.m-subscribe-lists legend{
  padding:0;margin-bottom:var(--s-3);
  font-family:var(--font-mono, inherit);
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(236,239,230,.72);
}
/* The four lists read as a set of choices, not a stack of form rows. */
.m-subscribe-lists label,
.m-subscribe-consent{
  display:flex;align-items:flex-start;gap:var(--s-3);
  margin:0 0 var(--s-2);text-transform:none;letter-spacing:0;
  font-family:var(--font-body);font-size:.92rem;
  color:rgba(236,239,230,.88);cursor:pointer;
}
.m-subscribe-lists input[type="checkbox"],
.m-subscribe-consent input[type="checkbox"]{
  flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--accent-2);
}
.m-subscribe-consent{
  margin:var(--s-5) 0 var(--s-6);
  font-size:.85rem;color:rgba(236,239,230,.7);line-height:1.5;
}
.m-subscribe-form .btn-accent{
  background:var(--accent-2);color:var(--accent-dark);border-color:var(--accent-2);
}
.m-subscribe-error{
  margin:0 0 var(--s-4);padding:10px var(--s-4);
  background:rgba(179,45,46,.22);border:1px solid rgba(255,140,140,.5);
  border-radius:var(--radius-sm, 8px);color:#ffd9d9;font-size:.9rem;
}
.m-subscribe-done{
  padding:var(--s-6);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--card-radius);background:rgba(255,255,255,.06);
}
.m-subscribe-done h3{margin:0 0 var(--s-2);color:var(--accent-2);}
.m-subscribe-done p{margin:0;color:rgba(236,239,230,.8);}

/* The honeypot must be unreachable, not merely invisible: display:none
   would let some bots detect it, and a visible field confuses people. */
.sref-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

@media (max-width:860px){
  .m-subscribe-inner{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .m-subscribe-fields{grid-template-columns:1fr;}
}