/* nurture.house — mobile-first responsive stylesheet */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --green:       #3a6e50;
  --green-dark:  #2c5440;
  --green-light: #d4e8dc;
  --accent:      #78aa82;
  --terracotta:  #c17a5a;
  --cream:       #faf8f4;
  --sage:        #8aab8e;
  --moss:        #5a7a5c;
  --clay:        #b08060;
  --slate:       #6a8a80;
  --dark:        #1e2823;
  --mid:         #5a5a5a;
  --light:       #f5f8f5;
  --white:       #ffffff;
  --border:      #dde8de;

  --font-body:   'Georgia', serif;
  --font-ui:     system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:      6px;
  --shadow:      0 2px 12px rgba(30,40,35,0.10);
  --transition:  0.2s ease;

  --container:   1160px;
  --gap:         1.5rem;

  /* Reading column. Shared by the article body, its hero, the meta strip and
     the article footer so the whole page sits on one column - a full-bleed
     hero above a narrower column reads as two unrelated pages stacked.

     Set to the full container width so articles line up with the top bar
     (Ben's call, 2026-09-05). That puts roughly 100 characters on a line,
     which is above the 60-75 that suits sustained reading, so the type size
     and leading below are deliberately generous to compensate: fewer
     characters fit per line as the type grows, and longer lines need more
     leading for the eye to find the next line.

     These three are the levers. Change them here, not in component rules. */
  --measure:      var(--container);

  /* FLUID, not fixed. 22px suits a 1160px column but is far too large on a
     phone - at 375px it leaves only ~30 characters a line. This scales from
     17px on a small phone to 22px once the column is wide enough to need it.
     Mobile is expected to be the majority of traffic, so do not replace this
     with a fixed value. */
  --article-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);

  /* Short mobile lines want tighter leading; long desktop lines want more,
     so the eye can find the start of the next line. Raised at 768px below.

     Both this and --article-size were pulled down on 2026-09-10: at 22px and
     1.85 the laptop view was too loose to settle into (Ben). Mobile was fine
     and is unchanged - the clamp floor and this base value both still apply
     below 768px, so only the desktop end moved. */
  --article-lead: 1.62;

  /* Figures are capped below the column width. At the full 1160px an inline
     image dominates the page, and the source images are only 900px wide. */
  --wide:         52rem;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.7;
}
img, video, audio { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: underline; }
a:hover { color: var(--green-dark); }

/* ── Skip link ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--green); color: var(--white);
  padding: 0.5rem 1rem; font-family: var(--font-ui);
  z-index: 9999; top: 0;
}
.skip-link:focus { left: 0; }

/* ── Container ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
p  { margin-bottom: 1rem; }
ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.section-heading { margin-bottom: 1.5rem; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary  { background: var(--green); color: var(--white); border-color: var(--green); }
.btn--primary:hover  { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.btn--outline  { background: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover  { background: var(--green); color: var(--white); }
.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* ── Header / Nav ──────────────────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-logo {
  text-decoration: none;
  font-family: var(--font-ui);
}
.logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
}
.logo-dot { color: var(--green); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#main-nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  gap: 0.5rem;
}
#main-nav.open { display: flex; }

.nav-link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--dark);
  padding: 0.4rem 0;
}
.nav-link:hover, .nav-link--active { color: var(--green); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  #main-nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    border: none;
    padding: 0;
    gap: 0.25rem;
    align-items: center;
  }
  .nav-link { padding: 0.4rem 0.75rem; border-radius: var(--radius); }
  .nav-link:hover { background: var(--light); }
  .nav-link--active { background: var(--green-light); color: var(--green); }
}

/* ── Homepage ──────────────────────────────────────────────────────────────────
   No masthead. It was a flat green band of text that pushed the first
   photograph most of a screen down, on the one page where a visitor decides
   whether to stay. The strapline is now a single line and the lead article's
   photograph opens the page. */
.home-strapline {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid);
  padding-block: 1.5rem 1.25rem;
  margin: 0;
}

.home-lead { padding-bottom: 3rem; border-bottom: 1px solid var(--border); }

/* Wider and shallower than the blog index lead: it is the full measure of the
   page here rather than one column of a grid, so a squarer crop would run to
   an unreasonable height on a large screen. A phone gets the squarer crop,
   where 2.16:1 would be a letterbox. See .lead__img for why height is set
   explicitly. */
.lead__img--home { aspect-ratio: 1.6 / 1; }
@media (min-width: 600px) {
  .lead__img--home { aspect-ratio: 2.16 / 1; }
}

.lead__body { max-width: 46rem; margin-top: 1.25rem; }
.lead__kicker {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 0.5rem;
}
.lead__cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--green);
}
.home-lead .lead__link:hover + .lead__body .lead__title a,
.home-lead .lead__title a:hover { color: var(--green); }

/* ── Writing section (homepage) ────────────────────────────────────────────── */
.writing { padding-block: 3.5rem; }

/* ── Page hero (inner pages) ───────────────────────────────────────────────── */
.page-hero {
  padding-block: 3rem;
  color: var(--white);
}
.page-hero--green { background: var(--green); }
.page-hero h1, .page-hero p { color: var(--white); }
.page-hero .eyebrow { color: var(--accent); }

/* Opt-in modifier for pages whose body sits at the reading measure, so the
   heading shares an edge with the prose below. Used by the transcript page.
   NOT applied to .page-hero generally - the blog index, about, resources and
   network pages all want the full container width. */
.page-hero--measured .container { max-width: var(--measure); }

/* ── Service tiles ─────────────────────────────────────────────────────────────
   Lived on the homepage until 2026-09-04; now on the About page, since the home
   page leads with writing. */
.tile-grid--about { margin-top: 1.25rem; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.tile {
  background: var(--light);
  border-radius: var(--radius);
  padding: 1.75rem;
  border-top: 4px solid var(--accent);
}
.tile h3 { margin-bottom: 0.5rem; }
.tile p { color: var(--mid); font-size: 0.95rem; margin: 0; }

/* ── Service icons ──────────────────────────────────────────────────────────── */
.service-icon {
  width: 120px;
  height: 120px;
  color: var(--green-dark);
  transition: color var(--transition);
}
.service-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  transition: background var(--transition);
}
.tile.service-card { text-align: center; }
.service-card:hover .service-icon-chip,
.service-card:focus-visible .service-icon-chip {
  background: var(--cream);
}
.service-card:hover .service-icon,
.service-card:focus-visible .service-icon {
  color: var(--terracotta);
}

/* ── Blog cards ────────────────────────────────────────────────────────────── */
.blog-listing { padding-block: 2rem 4rem; }

/* ── Blog index: editorial front page ───────────────────────────────────────
   One piece leads, three rank beside it, four run along the bottom, and
   anything past the first eight falls through to the ordinary card grid. The
   sidebar is a real aside on desktop and simply stacks underneath the lead on
   narrow screens - no separate mobile ordering to keep in sync. */
.front {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 1rem;
}
@media (min-width: 900px) {
  .front { grid-template-columns: 1.55fr 1fr; gap: 3rem; }
}
.lead__link { display: block; }
/* height:auto is load-bearing, not tidying. Wagtail's {% image %} emits
   width and height attributes, which map to presentational hints. Setting
   only width in CSS leaves the height hint in force, both dimensions are then
   definite, and aspect-ratio is ignored - the 1.9:1 lead renders as a square.
   Same applies to every {% image %} below that is sized by aspect-ratio. */
.lead__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.9 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
/* Imageless posts keep the hero colour, so the lead slot never renders as a
   hole in the page while the back catalogue is still being given photographs.
   The colour comes from .card--{colour} .card__hero, so mirror it here. */
.lead__img--flat { aspect-ratio: 1.9 / 1; }
.card--sage.lead__img--flat { background: var(--sage); }
.card--terracotta.lead__img--flat { background: var(--terracotta); }
.card--cream.lead__img--flat { background: var(--accent); }
.card--moss.lead__img--flat { background: var(--moss); }
.card--clay.lead__img--flat { background: var(--clay); }
.card--slate.lead__img--flat { background: var(--slate); }

.lead .post-categories { margin-top: 1rem; }
.lead__title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.18;
  margin: 0.5rem 0 0.75rem;
  text-wrap: balance;
}
.lead__title a { color: var(--dark); text-decoration: none; }
.lead__title a:hover { color: var(--green); }
.lead__intro { color: var(--mid); line-height: 1.65; margin: 0 0 0.75rem; }
.lead__meta { font-family: var(--font-ui); font-size: 0.85rem; color: var(--mid); margin: 0; }

.front__side { border-top: 2px solid var(--green-dark); padding-top: 1rem; }
@media (min-width: 900px) {
  /* Beside the lead the divider reads better as a spine than a lid. */
  .front__side {
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 0 0 0 2rem;
  }
}
.front__heading {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.side-item { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px dotted var(--border); }
.side-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.side-item__title { font-size: 1.05rem; line-height: 1.3; margin: 0.5rem 0 0.35rem; }
.side-item__title a { color: var(--dark); text-decoration: none; }
.side-item__title a:hover { color: var(--green); }
.side-item__intro { font-size: 0.85rem; line-height: 1.55; color: var(--mid); margin: 0; }

.front-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--green-dark);
}
@media (min-width: 768px) { .front-strip { grid-template-columns: repeat(4, 1fr); } }
/* On the homepage a section header already separates this from what is above,
   so the divider rule would be a second line doing the same job. */
.front-strip--plain { border-top: none; margin-top: 0; padding-top: 0; }
.strip-item__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6 / 1;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.strip-item__img--flat { aspect-ratio: 1.6 / 1; }
.card--sage.strip-item__img--flat { background: var(--sage); }
.card--terracotta.strip-item__img--flat { background: var(--terracotta); }
.card--cream.strip-item__img--flat { background: var(--accent); }
.card--moss.strip-item__img--flat { background: var(--moss); }
.card--clay.strip-item__img--flat { background: var(--clay); }
.card--slate.strip-item__img--flat { background: var(--slate); }
.strip-item__title { font-size: 0.95rem; line-height: 1.3; margin: 0.6rem 0 0.2rem; }
.strip-item__title a { color: var(--dark); text-decoration: none; }
.strip-item__title a:hover { color: var(--green); }
.strip-item__cat { font-family: var(--font-ui); font-size: 0.75rem; color: var(--mid); margin: 0; }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.see-all {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
}
.card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.card__hero {
  height: 140px;
}
/* With a hero_image the card hero is an <img> at the same height; without one
   it stays the flat colour block it has always been. object-fit keeps the
   1.9:1 source from distorting into the 140px band. */
.card__hero--img { width: 100%; object-fit: cover; display: block; }
.card__hero-link { display: block; }
.card--sage      .card__hero { background: var(--sage); }
.card--terracotta .card__hero { background: var(--terracotta); }
.card--cream     .card__hero { background: var(--accent); }
.card--moss      .card__hero { background: var(--moss); }
.card--clay      .card__hero { background: var(--clay); }
.card--slate     .card__hero { background: var(--slate); }

.card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card__date {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--mid);
  display: block;
  margin-bottom: 0.4rem;
}
.card__title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.card__title a { text-decoration: none; color: var(--dark); }
.card__title a:hover { color: var(--green); }
.card__intro { font-size: 0.9rem; color: var(--mid); flex: 1; }
.card__author { font-size: 0.8rem; color: var(--accent); font-family: var(--font-ui); margin-top: 0.5rem; }

/* ── Blog post ─────────────────────────────────────────────────────────────── */
.post-hero {
  padding-block: 3rem;
  color: var(--white);
}
.post-hero--sage      { background: var(--sage); }
.post-hero--terracotta { background: var(--terracotta); }
.post-hero--cream     { background: var(--accent); }
.post-hero--moss      { background: var(--moss); }
.post-hero--clay      { background: var(--clay); }
.post-hero--slate     { background: var(--slate); }
.post-hero h1, .post-hero .post-meta { color: var(--white); }

/* The coloured band stays full-bleed, but its CONTENT is constrained to the
   reading column so the h1 shares a left edge with the prose below it.
   Overrides .container's 1160px - both are single-class selectors, so this
   wins on source order. */
.post-hero__inner { max-width: var(--measure); }

/* ── Photographic hero ──────────────────────────────────────────────────────
   With a hero_image the header becomes a full-bleed photograph. The stylesheet
   comment at the top of this file warns that a full-bleed band above a
   narrower column reads as two unrelated pages stacked - that is why the
   INNER content still sits on --measure. The photograph bleeds; the type does
   not, so the h1 keeps the same left edge as the prose below it.

   Legibility is handled by a scrim panel behind the text rather than a wash
   over the whole image: a full-width darkening flattens the photograph, and
   the treated images have too little contrast left to spare. The panel is
   sized to its own content, so the picture stays visible either side of it.
   backdrop-filter is progressive - where it is unsupported the flat rgba
   ground alone still clears WCAG AA on white text. */
.post-hero--image {
  position: relative;
  padding-block: 0;
  min-height: clamp(18rem, 34vw, 30rem);
  display: flex;
  align-items: flex-end;
  background: var(--dark);
}
.post-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The panel is the only thing above the photograph, so give the inner wrapper
   the stacking context rather than raising each child separately. */
.post-hero--image .post-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 2.5rem;
}
/* Mobile first: on a phone the panel is simply the full column, because a
   34ch cap there is most of the screen anyway and the inset only squeezes the
   title into more lines. The cap earns its keep once there is picture either
   side of it to show. */
.post-hero--image .post-hero__panel {
  display: inline-block;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(30, 40, 35, 0.72);
  backdrop-filter: blur(3px);
}
@media (min-width: 768px) {
  /* Not a ch cap: ch resolves against the panel's own 16px font, not the h1's
     ~44px, so it comes out far narrower than it reads and a long title stacks
     into five short lines. An absolute cap sized to the heading holds most
     titles to three lines; the percentage keeps at least a third of the
     photograph clear on narrower desktops. */
  .post-hero--image .post-hero__panel {
    max-width: min(34rem, 62%);
    padding: 1.5rem 1.75rem;
  }
}
.post-hero--image .post-hero__panel h1 { margin: 0; text-wrap: balance; }

/* A pill on the panel needs its own edge - the flat category colour it uses on
   the coloured band disappears against the scrim. */
.post-hero--image .category-pill {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
}


.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.post-meta-strip {
  background: var(--light);
  border-bottom: 1px solid var(--border);
  padding-block: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--mid);
}
/* Component-scoped, NOT body-class scoped: a rule like
   `.page-blog-post .container` would also hit the site header and footer. */
.post-meta-strip .container { max-width: var(--measure); }
.post-edited {
  font-style: italic;
  opacity: 0.8;
}

.post-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  opacity: 0.9;
}

/* ── Article reading experience ────────────────────────────────────────────────
   The article used to sit in a 1fr grid cell next to a 280px sidebar inside an
   1160px container, which put body text at roughly 110-120 characters per line
   - nearly double what long-form prose wants. That measure, not padding, was
   the real problem behind the reverted attempts in June 2026.

   .post-body is now a named-column grid: prose sits in the `text` column at a
   proper measure, and figures opt into the wider `wide` column. Every block
   rendered by include_block is a direct child, so it inherits the text column
   by default and only figures break out. */
.article-body {
  max-width: var(--measure);
  margin-inline: auto;
  /* Inline padding matches .container so the prose aligns with the top bar. */
  padding: 3rem 1.25rem 2rem;
  font-size: var(--article-size);
  line-height: var(--article-lead);
}
@media (min-width: 768px) {
  .article-body { padding-inline: 2rem; }
  /* Longer lines need more leading to track - but not as much as 1.85, which
     spaced the prose out faster than it could be read. */
  :root { --article-lead: 1.7; }
}

/* NOTE: Wagtail wraps every StreamField block in a <div class="block-{type}">,
   so blocks are NOT direct children of .article-body. Use descendant selectors
   throughout - a `>` child combinator here silently matches nothing. */
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote { margin-bottom: 1.4em; }

.article-body h2 {
  margin-top: 2.2em;
  margin-bottom: 0.55em;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.3;
}
.article-body h3 {
  margin-top: 1.8em;
  margin-bottom: 0.45em;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.35;
}
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin-bottom: 0.4em; }
.article-body > *:last-child, .article-body p:last-child { margin-bottom: 0; }

.article-body a { text-underline-offset: 0.15em; }

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  color: var(--mid);
  font-style: italic;
}

/* Podcast episode and transcript pages still use the older two-column layout.
   Leave these alone - .article-body above is blog posts only. */
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 2.5rem 4rem;
}
@media (min-width: 900px) {
  .post-layout { grid-template-columns: 1fr 280px; align-items: start; }
}
.post-body { min-width: 0; }
.post-body h2, .post-body h3 { margin-top: 2rem; }
.post-body img { border-radius: var(--radius); margin-block: 1.5rem; }

/* Standfirst: larger roman, not italic, no competing left rule. */
/* No max-width: the body runs the full column, so a capped standfirst reads
   as a stray narrow block. It is now a div of paragraphs, not a single p. */
/* Sized for a standfirst that runs to a sentence or two. It does not, in
   practice: the intros are often five or more paragraphs of real prose - see
   the note in blog_post.html - and at the old 28px cap that turned the top of
   an article into a wall of oversized text before the reader reached the body
   at all. Still visibly a lead-in, just no longer shouting. The proper fix is
   editorial rather than CSS; that is the style-guide pass. */
.post-standfirst {
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--mid);
  margin-bottom: 1.6em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--border);
}
.post-standfirst p { margin-bottom: 0.6em; }
.post-standfirst p:last-child { margin-bottom: 0; }

/* Figures sit centred and capped below the column width - at the full 1160px
   an inline image dominates the page, and the source renditions are 900px. */
.article-body .post-figure {
  width: min(var(--wide), 100%);
  margin-inline: auto;
  margin-top: 2.2em;
  margin-bottom: 2.2em;
}
.post-figure img {
  width: 100%;
  border-radius: var(--radius);
}
.post-figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mid);
  margin-top: 0.7rem;
}

.post-references {
  margin-top: 3.5em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.post-references__heading {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 1rem;
}
.post-references__list p,
.post-references__list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 0.7rem;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}
.post-references__list ul { list-style: none; padding: 0; margin: 0; }

/* ── Article footer ───────────────────────────────────────────────────────────
   Tags and author moved here from the old sidebar, which is what was squeezing
   the prose. */
.post-footer {
  border-top: 1px solid var(--border);
  background: var(--cream);
  padding-block: 2.5rem 3.5rem;
  margin-top: 2rem;
}
.post-footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.post-footer__heading {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 0.75rem;
}
.post-tags { margin-bottom: 2rem; }
.post-author p { margin-bottom: 1rem; }
.post-back {
  margin-top: 2rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.tag-cloud { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag {
  background: var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-family: var(--font-ui);
}

/* Sidebar blocks are still used by the podcast and transcript pages. */
.sidebar-block {
  background: var(--light);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.sidebar-block h3 { font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--green); }
.sidebar-block--cta { background: var(--green-light); }

/* ── Category filter ───────────────────────────────────────────────────────── */
.category-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.category-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--light);
  color: var(--dark);
  text-decoration: none;
  border: 1px solid var(--border);
}
.category-pill:hover, .category-pill.active {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

/* ── Podcast teaser / band ─────────────────────────────────────────────────────
   .podcast-band is the homepage treatment: a completed series presented as an
   archive rather than as ongoing output. Shares the teaser's visual language. */
.podcast-teaser,
.podcast-band {
  background: var(--dark);
  color: var(--white);
  padding-block: 4rem;
}
.podcast-teaser__inner,
.podcast-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .podcast-teaser__inner,
  .podcast-band__inner { grid-template-columns: 1fr auto; }
}
.podcast-teaser h2, .podcast-band h2 { color: var(--white); }
.podcast-teaser p, .podcast-band p { color: rgba(255,255,255,0.8); }
.podcast-teaser .eyebrow, .podcast-band .eyebrow { color: var(--accent); }
.podcast-band__text p { max-width: 46ch; margin-bottom: 1.25rem; }
/* Replaced .podcast-badge, which was a decorative block repeating the episode
   count already in the sentence beside it. Cover art when it exists (it waits
   on the wordmark, gl8); a clickable episode list until then. */
.podcast-cover {
  width: 100%;
  height: auto;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.podcast-mini { list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .podcast-mini { min-width: 20rem; } }

.podcast-mini__item + .podcast-mini__item { border-top: 1px solid rgba(255,255,255,0.18); }
.podcast-mini__link {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--white);
  transition: background var(--transition);
}
.podcast-mini__link:hover,
.podcast-mini__link:focus-visible { background: rgba(255,255,255,0.1); }

.podcast-mini__num {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--accent);
}
.podcast-mini__title { font-size: 0.92rem; line-height: 1.35; }
.podcast-mini__dur {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}

/* ── Explore row (homepage) ────────────────────────────────────────────────────
   Going blog-led moved the service tiles to About, which was right, but it
   left the homepage exiting to only two places - blog and podcast. This is the
   way back to the rest of the site, as four quiet cards rather than the tile
   farm the front page used to be. */
.explore { padding-block: 3.5rem; }
.explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .explore-grid { grid-template-columns: repeat(4, 1fr); } }

.explore-card {
  position: relative;
  display: block;
  padding: 1.35rem 1.4rem 2.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.explore-card:hover,
.explore-card:focus-visible {
  border-color: var(--green);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.explore-card__title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
  transition: color var(--transition);
}
.explore-card:hover .explore-card__title { color: var(--green); }
.explore-card__blurb {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--mid);
  margin: 0;
}
/* Pinned to the foot so the arrow sits on one line across all four cards
   regardless of how the blurbs wrap. */
.explore-card__cta {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--green);
}

/* ── Episode list ──────────────────────────────────────────────────────────── */
.episode-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.episode-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--light);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  flex-wrap: wrap;
}
.episode-card__number {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 0.2rem;
  min-width: 3rem;
}
.episode-card__body { flex: 1; min-width: 0; }
.episode-card__title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.episode-card__title a { text-decoration: none; color: var(--dark); }
.episode-card__title a:hover { color: var(--green); }
.episode-card__duration {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--mid);
}

/* ── Audio player ──────────────────────────────────────────────────────────── */
.audio-player {
  background: var(--light);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.episode-duration {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* ── Transcript ────────────────────────────────────────────────────────────── */

/* Card link from an episode page through to its full transcript page. */
.transcript-link {
  display: block;
  margin-block: 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.transcript-link:hover,
.transcript-link:focus-visible {
  background: var(--green-light);
  border-left-color: var(--terracotta, var(--green));
}
.transcript-link__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.2rem;
}
.transcript-link__label::after {
  content: " \2192";
}
.transcript-link__meta {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.45;
}

/* ── Talks ────────────────────────────────────────────────────────────────────
   Video is embedded from YouTube or Vimeo, never uploaded. Wagtail's oEmbed
   returns a FIXED-SIZE iframe (typically 480x270), which overflows a phone and
   forces horizontal scroll. Force a responsive 16:9 box around it. */
.talk-video {
  margin-bottom: 2rem;
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.talk-video iframe,
.talk-video object,
.talk-video embed,
.talk-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.talk-meta {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  opacity: 0.9;
  margin-top: 0.5rem;
}
.talk-transcript {
  margin-top: 3em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.talk-transcript .post-footer__heading { margin-bottom: 1rem; }

/* Standalone transcript page. Shares .article-body with blog posts, so it
   inherits the reading measure, type size and vertical rhythm. */
.transcript-return {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.transcript-body > p:first-child { margin-top: 0; }
.transcript-episode-link { font-size: 1.05rem; }

/* The transcript's references use .references-block rather than the blog's
   .post-references, so give it the same quieter treatment. */
.article-body .references-block {
  margin-top: 3em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.article-body .references-block h2 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-top: 0;
  margin-bottom: 1rem;
}
.article-body .references-block p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 0.7rem;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}

.references-block {
  border-top: 2px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* ── Community CTA ─────────────────────────────────────────────────────────── */
.community-cta {
  background: var(--green-light);
  padding-block: 3.5rem;
  text-align: center;
}
.community-cta h2 { margin-bottom: 0.75rem; }
.community-cta p  { max-width: 520px; margin-inline: auto; margin-bottom: 1.5rem; }

/* ── Generic page content area ─────────────────────────────────────────────── */
.page-content { padding-block: 2rem 4rem; }

/* ── About page ────────────────────────────────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 2.5rem 4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .page-layout--with-aside { grid-template-columns: 240px 1fr; }
}
.about-photo {
  border-radius: var(--radius);
  width: 100%;
}
.about-section { margin-bottom: 2.5rem; }
.about-section--tinted {
  background: var(--light);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* ── Resources ─────────────────────────────────────────────────────────────── */
.resources-section { margin-bottom: 3rem; }
.presentation-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.presentation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--light);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.presentation-item__event { color: var(--mid); }
.presentation-item__date { display: block; font-size: 0.85rem; color: var(--mid); font-family: var(--font-ui); margin-top: 0.25rem; }
.reading-section-heading { margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--green); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.reading-item { padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.reading-item:last-child { border-bottom: none; }
.reading-item__notes { font-size: 0.85rem; color: var(--mid); margin-top: 0.25rem; }

/* ── Contact form ──────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dark);
  background: var(--white);
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(58,110,80,0.15);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-errors { color: #c0392b; font-size: 0.85rem; margin-top: 0.25rem; list-style: none; padding: 0; }

/* ── Contact layout ────────────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 2rem 4rem;
}
@media (min-width: 780px) {
  .contact-layout { grid-template-columns: 1fr 280px; align-items: start; }
}
.contact-info {
  background: var(--light);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: 0.95rem;
}
.contact-info__heading {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--green);
}
.contact-info__subheading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.contact-info__email { margin-bottom: 0.5rem; }
.contact-info__links { list-style: none; padding: 0; margin: 0; }
.contact-info__links li { margin-bottom: 0.4rem; }
.contact-info__newsletter { margin-top: 1.5rem; }
.contact-info__newsletter p { font-size: 0.875rem; color: var(--mid); margin-bottom: 0.75rem; }

/* ── Contact thanks ────────────────────────────────────────────────────────── */
.contact-thanks {
  padding-block: 4rem;
  text-align: center;
  max-width: 600px;
}
.thanks-icon { font-size: 3rem; color: var(--green); margin-bottom: 1rem; }
.contact-thanks__back { margin-top: 1.5rem; }

/* ── Search ────────────────────────────────────────────────────────────────── */
.search-input {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  width: 100%;
  max-width: 480px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.search-results { list-style: none; padding: 0; margin-top: 1rem; }
.search-results li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }

/* ── Signup / network ──────────────────────────────────────────────────────── */
.signup-section {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--green-light);
  border-radius: var(--radius);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.8);
  padding-block: 3rem 1.5rem;
  margin-top: 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-brand .logo-text { color: var(--white); font-size: 1.2rem; }
.footer-brand p { font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7; }
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
@media (min-width: 640px) { .footer-nav { align-items: flex-end; } }
.footer-nav-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.footer-nav-link:hover { color: var(--white); }
.footer-credit {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  text-align: center;
}

/* ── Richtext content ──────────────────────────────────────────────────────── */
.richtext h2, .richtext h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.richtext blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--mid);
  margin-block: 1.5rem;
}