/* ============================================================
   ruthiebaigent.co.uk — the one and only stylesheet
   ============================================================

   1. Colours, fonts and spacing   everything is set once here, in :root
   2. Basics                       the page itself, links, images
   3. Small pieces                 labels, headings, buttons, body text
   4. Header and footer            the same on every page
   5. Page sections                banner, titles, streams, panels, lists, cards...
   6. Journal                      articles, the Lent series, the archive
   7. Contact form
   8. Smaller screens              three breakpoints: 1000px, 900px/720px, 560px
   9. Print

   Reading tips
   - One rule per line. Search for a class name you saw in the HTML (e.g. ".post-row").
   - var(--green) means "the green colour defined in :root". Change it there and it changes everywhere.
   - "stream-*" classes give each journal stream its own accent colour (section 6).
*/

/* ---------- 1. Colours, fonts and spacing ---------- */
:root {
  --paper: #eef0ea;        /* page background */
  --tint: #e1e6dd;         /* soft panels and hover backgrounds */
  --input: #f6f7f3;        /* form fields */
  --green: #2c4a36;        /* brand green: buttons, footer, links */
  --green-deep: #1f3627;   /* button hover */
  --ink: #1f2b24;          /* headings */
  --body: #2a3a2f;         /* body text */
  --muted: #5b6a5f;        /* small labels, captions */
  --rule: #c9d0c4;         /* thin lines */
  --chip: #9fae9f;         /* outlines of small buttons */
  --field: #b5bfb1;        /* form field borders */
  --placeholder: #cfd6cb;  /* behind pictures while they load */
  --footer-text: #dfe5dc;
  --footer-muted: #a9bcae;
  --footer-rule: #4a6652;
  --accent: var(--green);  /* changed per journal stream, see section 6 */

  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: 56px;          /* side margin; smaller on phones (section 8) */
}

/* The fonts live in the fonts/ folder. */
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/libre-caslon-text-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/libre-caslon-text-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/libre-caslon-text-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/public-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/public-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/public-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }

/* ---------- 2. Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--green); color: var(--paper); }
.page { max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--green); color: var(--paper); padding: 8px 12px; z-index: 10; }

/* ---------- 3. Small pieces ---------- */
.meta { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.meta b { font-weight: 400; color: var(--accent); }
.h1 { font: 400 60px/1.02 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.standfirst { font: italic 400 21px/1.5 var(--serif); color: var(--body); }
.link { font: 500 14px var(--sans); color: var(--green); }
.btn { display: inline-block; align-self: flex-start; padding: 13px 22px; background: var(--green); color: var(--paper); font: 500 15px var(--sans); border-radius: 2px; border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--green-deep); }
.btn-small { padding: 11px 18px; font-size: 14px; }
.gutter { padding-left: var(--gutter); padding-right: var(--gutter); }
.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
/* Body text: paragraphs, lists, quotes. ".text large" is the bigger size used on the practice pages. */
.text { font: 400 17px/1.65 var(--sans); color: var(--body); text-wrap: pretty; }
.text > * + * { margin-top: 16px; }   /* space between paragraphs */
.text.large { font-size: 18px; line-height: 1.7; max-width: 640px; }
.text.large > * + * { margin-top: 20px; }
.text a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.text h2 { font: 400 28px/1.3 var(--serif); color: var(--green); padding-top: 8px; }
.text h3 { font: 400 22px/1.3 var(--serif); }
.text ul, .text ol { margin: 0; padding-left: 1.3em; }
.text blockquote { margin: 24px 0; padding: 0; font: italic 400 24px/1.4 var(--serif); color: var(--green); display: flex; flex-direction: column; gap: 10px; }
.text blockquote cite { font: normal 400 12px/1.5 var(--mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
/* A heading with a link on the right, e.g. "From the Journal ... All writing →" */
.heading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; }
.heading-row h2:not(.meta) { font: 400 30px var(--serif); }
.heading-row h2 a { color: var(--accent); }
.heading-row span { font: 400 13px var(--sans); color: var(--muted); }

/* ---------- 4. Header and footer ---------- */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px var(--gutter); position: relative; }
.site-header.ruled { border-bottom: 1px solid var(--rule); }
.logo { display: flex; align-items: center; gap: 14px; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 54px; height: auto; flex: none; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-name { font: 700 22px var(--serif); color: var(--green); }
.logo-place { font: 400 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.site-nav { display: flex; gap: 28px; font: 500 14px var(--sans); white-space: nowrap; }
.site-nav a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { text-decoration: none; border-bottom-color: var(--green); }
.site-nav a[aria-current] { color: var(--green); border-bottom-color: var(--green); }
.menu-button { display: none; background: none; border: 1px solid var(--green); color: var(--green); font: 500 14px var(--sans); padding: 8px 14px; border-radius: 2px; cursor: pointer; }

.site-footer { background: var(--green); color: var(--footer-text); font: 400 14px/1.6 var(--sans); padding: 48px var(--gutter) 28px; display: flex; flex-direction: column; gap: 36px; }
.footer-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer-columns > div { display: flex; flex-direction: column; gap: 4px; }
.footer-brand { font: 400 24px var(--serif); color: #fff; margin-bottom: 2px; }
.footer-label { font: 400 12px var(--mono); color: var(--footer-muted); margin-bottom: 6px; letter-spacing: .06em; }
.footer-label.spaced { margin-top: 14px; }
.footer-strong { color: #fff; font-weight: 500; }
.footer-strong.spaced { margin-top: 6px; }
.footer-cta { margin-top: 10px; font: italic 400 17px/1.4 var(--serif); color: #fff; max-width: 440px; }
.footer-legal { border-top: 1px solid var(--footer-rule); padding-top: 20px; font-size: 13px; color: var(--footer-muted); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- 5. Page sections ---------- */
/* Banner photo */
.hero { padding: 0 var(--gutter); }
.hero img { width: 100%; height: 480px; object-fit: cover; object-position: 50% 45%; background: var(--placeholder); }
/* Page title row: small label + title on the left, italic line on the right */
.title-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; padding: 44px var(--gutter) 56px; align-items: end; }
.title-row .kicker { display: flex; flex-direction: column; gap: 12px; }
.page-heading:not(.rule-bottom) { padding: 64px var(--gutter) 40px; }
.page-heading.no-standfirst { grid-template-columns: minmax(0, 1fr); }
/* Home page welcome */
.intro { padding: 48px var(--gutter) 64px; align-items: start; }
.intro-title { font-size: 58px; line-height: 1.05; }
.intro-title em { color: var(--green); }
.intro-side { display: flex; flex-direction: column; gap: 18px; }
.intro-more summary { cursor: pointer; list-style: none; font-size: 15px; }
.intro-more summary::-webkit-details-marker { display: none; }
.intro-more[open] summary { display: none; }
/* The four journal streams */
.streams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.streams a { padding: 28px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--rule); }
.streams a:first-child { padding-left: var(--gutter); }
.streams a:last-child { padding-right: var(--gutter); border-right: 0; }
.streams a:hover, .streams a[aria-current] { text-decoration: none; background: var(--tint); box-shadow: inset 0 3px 0 var(--accent); }
.streams a:hover .stream-name, .streams a[aria-current] .stream-name { color: var(--accent); }
.stream-name { font: 400 30px var(--serif); color: var(--green); }
.stream-description { font: 400 14px/1.4 var(--sans); color: var(--muted); }
.streams.compact a { padding-top: 24px; padding-bottom: 24px; gap: 4px; }
.streams.compact .stream-name { font-size: 26px; }
/* Three practice panels */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.panels a { padding: 40px 32px 44px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--rule); }
.panels a:first-child { padding-left: var(--gutter); }
.panels a:last-child { padding-right: var(--gutter); border-right: 0; }
.panels a:hover { text-decoration: none; background: var(--tint); }
.panel-name { font: 400 32px var(--serif); color: var(--green); }
.panel-text { font: 400 16px/1.6 var(--sans); color: var(--body); }
/* Text with the "at a glance" panel beside it */
.text-and-facts { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; padding: 56px var(--gutter); }
.facts { display: flex; flex-direction: column; align-self: start; border-top: 2px solid var(--green); position: sticky; top: 24px; }
.fact { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fact-text { font: 400 16px/1.5 var(--sans); }
.cta-box { display: flex; flex-direction: column; gap: 12px; padding: 24px; margin-top: 24px; background: var(--tint); }
.cta-box p { font: 400 20px/1.35 var(--serif); }
.related { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 28px var(--gutter); border-top: 1px solid var(--rule); font: 400 15px/1.6 var(--sans); color: var(--body); }
.related .stream-word { font: 400 22px var(--serif); color: var(--accent); }
.related .post-link { text-decoration: underline; text-decoration-color: var(--rule); }
/* A photo beside some text */
.image-text { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; padding: 72px var(--gutter); align-items: center; }
.image-text.photo-portrait { grid-template-columns: 400px minmax(0, 1fr); align-items: start; padding: 64px var(--gutter); }
.image-text img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--placeholder); }
.image-text.photo-portrait img { aspect-ratio: 4 / 5; object-position: 30% 50%; }
.text-column { display: flex; flex-direction: column; gap: 20px; }
.text-heading { font: 400 40px var(--serif); }
.big-quote { font: italic 400 30px/1.35 var(--serif); text-wrap: pretty; }
.work-with { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: var(--tint); margin-top: 8px; }
.work-with p { font: 400 16px/1.6 var(--sans); }
/* Two columns of text */
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.columns section { display: flex; flex-direction: column; gap: 16px; padding: 44px 48px 52px; }
.columns section:first-child { padding-left: var(--gutter); border-right: 1px solid var(--rule); }
.columns section:last-child { padding-right: var(--gutter); }
.columns .text { font-size: 16px; line-height: 1.7; }
.columns blockquote { font-size: 19px; line-height: 1.5; }
.column-heading { font: 400 32px var(--serif); color: var(--green); }
/* Pictures with captions */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 0 var(--gutter) 64px; align-items: start; }
.gallery figure { padding: 20px; background: var(--tint); }
.gallery img { width: auto; max-width: 100%; max-height: 420px; margin: 0 auto; }
/* YouTube videos */
.videos { display: flex; flex-direction: column; gap: 20px; padding: 40px var(--gutter) 56px; }
.videos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--tint); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Cards (picture + title) */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding: 56px var(--gutter) 40px; }
.card { display: flex; flex-direction: column; gap: 12px; }
.card-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--placeholder); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card-title { font: 400 24px/1.2 var(--serif); }
.card-excerpt { font: 400 15px/1.55 var(--sans); color: var(--body); }
/* Lists of articles (one row each) */
.post-list { display: flex; flex-direction: column; padding: 0 var(--gutter) 56px; }
.post-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 140px; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--rule); }
.post-row:last-child { border-bottom: 1px solid var(--rule); }
.post-title { font: 400 22px/1.3 var(--serif); }
.post-stream { font: 500 13px var(--sans); color: var(--accent); text-align: right; }
.year-group { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.year-group + .year-group { margin-top: 40px; }
.year-head { font: 400 15px var(--mono); color: var(--muted); letter-spacing: .06em; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.year-head .count { font-size: 12px; }
/* Home page: latest articles beside one featured card */
.latest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; padding: 48px var(--gutter) 64px; align-items: start; }
.latest-list { display: flex; flex-direction: column; }
.latest-list > .meta { padding-bottom: 10px; }
.lent-tile { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding: 22px 24px; background: var(--tint); border-left: 3px solid var(--accent); }
.lent-tile-title { font: 400 24px/1.2 var(--serif); color: var(--accent); }
.lent-tile-text { font: 400 14px/1.5 var(--sans); color: var(--body); }
/* Clickable blocks: underline their title on hover instead of the whole block */
.card:hover, .post-row:hover, .week-days a:hover, .article-nav a:hover, .lent-tile:hover, .series-band:hover, .stream-series:hover { text-decoration: none; }
.card:hover .card-title, .post-row:hover .post-title, .week-days a:hover .day-title, .article-nav a:hover .article-nav-title, .series-band:hover .series-band-link, .stream-series:hover .series-link, .panels a:hover .link { text-decoration: underline; text-underline-offset: 4px; }
.lent-tile:hover, .series-band:hover, .article-nav a:hover { background: #d8dfd4; }

/* ---------- 6. Journal ---------- */
/* Each stream has its own accent colour, used for labels, quotes and the drop cap. */
.stream-body { --accent: #8a4a3c; }
.stream-spirit { --accent: #5e4a7d; }
.stream-thought { --accent: #3e5a74; }
.stream-earth { --accent: #7a5a22; }
/* Journal front page */
.feature { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 40px var(--gutter) 56px; }
.feature .kicker { gap: 14px; }
.feature-title { font-size: 64px; }
.feature-side { display: flex; flex-direction: column; gap: 16px; }
.feature-lines { font-size: 20px; white-space: pre-line; }
.feature-cta { font: 500 15px var(--sans); color: var(--green); }
.feature-cta span { color: var(--muted); font-weight: 400; }
.series-band { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin: 8px var(--gutter) 48px; padding: 28px 32px; background: var(--tint); border-left: 3px solid var(--accent); }
.series-band-text { display: flex; flex-direction: column; gap: 6px; }
.series-band-title { font: 400 30px/1.15 var(--serif); color: var(--accent); }
.series-band-description { font: 400 15px/1.5 var(--sans); color: var(--body); max-width: 560px; text-wrap: pretty; }
.series-band-link { font: 500 14px var(--sans); color: var(--green); white-space: nowrap; }
.archive-note { padding-top: 20px; font-size: 15px; }
/* Stream pages and the archive */
.stream-head, .archive-head { padding-top: 64px; }
.stream-side, .archive-side { display: flex; flex-direction: column; gap: 12px; }
.archive-years { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 13px var(--mono); color: var(--green); letter-spacing: .04em; }
.archive-list { padding-top: 40px; }
/* The Lent series strip shown on articles and the Spirit stream page */
.series-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 0 var(--gutter); padding: 20px 24px; background: var(--tint); border-left: 3px solid var(--accent); }
.series-strip > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.series-title { font: 400 20px/1.3 var(--serif); }
.series-nav { display: flex; gap: 8px; }
.series-nav a, .series-nav span { font: 500 13px var(--sans); color: var(--green); padding: 8px 12px; border: 1px solid var(--chip); border-radius: 2px; white-space: nowrap; }
.series-nav span { opacity: .45; }
.series-nav a:hover { text-decoration: none; background: var(--paper); }
.stream-series { margin-bottom: 16px; }
.stream-series .series-link { border: 0; padding: 0; }
/* An article */
.article-head { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 72px var(--gutter) 48px; text-align: center; }
.article-title { font-size: 60px; line-height: 1.05; max-width: 860px; }
.article-subtitle { font: italic 400 22px/1.45 var(--serif); color: var(--body); max-width: 720px; text-wrap: balance; }
.article-byline { font: 500 14px var(--sans); color: var(--green); }
.byline-dot, .reading-time { color: var(--muted); font-weight: 400; }
.article-figure { margin: 24px var(--gutter) 0; }
.article-figure img { width: 100%; height: 480px; object-fit: cover; object-position: 50% 40%; background: var(--placeholder); }
.article-layout { display: grid; grid-template-columns: 200px minmax(0, 640px) 1fr; gap: 48px; padding: 56px var(--gutter); }
.article-aside { display: flex; flex-direction: column; gap: 10px; font: 400 13px/1.5 var(--sans); color: var(--muted); position: sticky; top: 24px; align-self: start; }
.aside-stream { font: 400 22px var(--serif); color: var(--accent); }
.aside-category { text-decoration: underline; text-decoration-color: var(--rule); }
.aside-share { margin-top: 14px; }
.copy-link { align-self: flex-start; background: none; border: 1px solid var(--chip); color: var(--green); font: 500 13px var(--sans); padding: 7px 12px; border-radius: 2px; cursor: pointer; }
.copy-link:hover { background: var(--tint); }
/* The article text itself (what was written in the editor) */
.article-body { display: flex; flex-direction: column; gap: 22px; font: 400 19px/1.75 var(--serif); color: var(--body); text-wrap: pretty; min-width: 0; overflow-wrap: break-word; }
.article-body > * { margin: 0; }
.article-body > p:first-child:not(:has(> strong:first-child, > em:first-child, > a:first-child))::first-letter { float: left; font-size: 3.9em; line-height: .82; padding: .08em .1em 0 0; color: var(--accent); }
.article-body h2 { font: 400 28px/1.35 var(--serif); color: var(--green); padding-top: 12px; }
.article-body h3 { font: 400 23px/1.35 var(--serif); }
.article-body a { color: var(--green); text-decoration: underline; text-decoration-color: var(--chip); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body blockquote { padding-left: 20px; border-left: 2px solid var(--accent); font-style: italic; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li + li { margin-top: 6px; }
.article-body figure { margin: 12px 0; }
.article-body figure img { width: auto; max-width: 100%; height: auto; background: var(--placeholder); }
.article-body figcaption, .article-figure figcaption { font: 400 12px/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.article-body hr { border: 0; border-top: 1px solid var(--rule); }
.article-body table { border-collapse: collapse; font-size: 16px; }
.article-body td, .article-body th { border: 1px solid var(--rule); padding: 6px 10px; vertical-align: top; }
/* Below an article: previous/next, more from the stream, invitation */
.article-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.article-nav a { padding: 28px var(--gutter); display: flex; flex-direction: column; gap: 6px; }
.article-nav > :first-child { border-right: 1px solid var(--rule); }
.article-nav .later { text-align: right; }
.article-nav-title { font: 400 22px/1.3 var(--serif); }
.more-stream { padding: 40px var(--gutter) 8px; }
.article-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 40px var(--gutter) 48px; }
.article-cta p { font: italic 400 24px/1.4 var(--serif); color: var(--green); }
.article-cta .btn { white-space: nowrap; }
/* The Lent series page */
.lent-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; padding: 64px var(--gutter) 56px; align-items: start; border-bottom: 1px solid var(--rule); }
.lent-intro { display: flex; flex-direction: column; gap: 18px; }
.lent-intro .text { max-width: 560px; }
.lent-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.lent-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.lent-list { padding: 24px var(--gutter) 64px; }
.lent-section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.week-name { font: 400 30px var(--serif); color: var(--accent); position: sticky; top: 24px; }
.week-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.week-days a { display: grid; grid-template-columns: 40px 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.week-days li:first-child a { border-top: 0; }
.day-number { font: 400 12px var(--mono); color: var(--muted); letter-spacing: .06em; }
.day-name { font: 500 13px var(--sans); color: var(--accent); }
.day-title { font: 400 20px/1.3 var(--serif); }
/* 404 */
.not-found { padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 20px; max-width: 760px; }

/* ---------- 7. Contact form ---------- */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; padding: 72px var(--gutter); }
.contact-details { display: flex; flex-direction: column; gap: 28px; }
.contact-heading { display: flex; flex-direction: column; gap: 14px; }
.contact-rows { margin: 0; display: flex; flex-direction: column; border-top: 2px solid var(--green); }
.contact-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.contact-rows dd { margin: 0; text-align: right; }
.contact-rows .big { font: 400 22px var(--serif); overflow-wrap: anywhere; }
.contact-rows .small { font: 400 16px/1.5 var(--sans); }
.contact-photo { width: 100%; height: 260px; object-fit: cover; object-position: 50% 30%; background: var(--placeholder); }
.contact-form { display: flex; flex-direction: column; gap: 20px; padding: 40px; background: var(--tint); align-self: start; }
.contact-form h2 { font: 400 28px var(--serif); }
.contact-form label, .chips legend { display: flex; flex-direction: column; gap: 8px; font: 500 14px var(--sans); padding: 0; }
.contact-form input[type='text'], .contact-form textarea { font: 400 16px/1.5 var(--sans); color: var(--ink); background: var(--input); border: 1px solid var(--field); border-radius: 0; padding: 11px 12px; width: 100%; }
.contact-form input[type='text'] { height: 46px; }
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form [aria-invalid='true'] { border-color: #8a2f2f; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--chip); font: 500 14px var(--sans); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .note { font: 400 14px/1.5 var(--sans); color: var(--body); }
.status { font: 500 15px/1.5 var(--sans); padding: 12px 14px; border-left: 3px solid var(--green); background: var(--input); }
.status.error { border-color: #8a2f2f; color: #6e2424; }
.send { padding: 14px 26px; }
.send[disabled] { opacity: .6; cursor: progress; }
.honeypot { position: absolute; left: -9999px; }

/* ---------- 8. Smaller screens ---------- */
/* Tablets and small laptops: the menu folds behind a button, the article side column moves above the text */
@media (max-width: 1000px) {
  .menu-button { display: inline-block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 5; flex-direction: column; gap: 0; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 16px; font-size: 16px; box-shadow: 0 16px 32px -16px rgba(31, 43, 36, .25); }
  .site-header.open .site-nav { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current] { border-bottom: 1px solid var(--rule); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 720px; margin: 0 auto; }
  .article-layout > div:last-child, .aside-share, .copy-link { display: none; }
  .article-aside { position: static; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
}
/* Tablets: most two- and three-column layouts become one column */
@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .title-row, .text-and-facts, .image-text, .image-text.photo-portrait, .contact, .panels, .latest, .columns, .gallery, .footer-columns, .lent-head, .lent-section, .card-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .text-and-facts { gap: 48px; }
  .panels, .columns, .footer-columns { gap: 0; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .streams a { padding: 24px var(--gutter); border-right: 0; border-bottom: 1px solid var(--rule); }
  .streams a:nth-child(odd) { border-right: 1px solid var(--rule); }
  .streams a:nth-last-child(-n + 2) { border-bottom: 0; }
  .panels a { padding: 32px var(--gutter); border-right: 0; border-bottom: 1px solid var(--rule); }
  .panels a:last-child { border-bottom: 0; }
  .columns section { padding: 36px var(--gutter); border-right: 0; }
  .columns section:first-child { border-bottom: 1px solid var(--rule); }
  .image-text figure { max-width: 420px; }
  .lent-figure { max-width: 480px; }
  .facts, .week-name { position: static; }
  .h1, .intro-title, .feature-title { font-size: 48px; }
}
/* Large phones */
@media (max-width: 720px) {
  .post-row, .series-strip, .article-nav, .videos-grid { grid-template-columns: minmax(0, 1fr); }
  .post-row { gap: 6px; }
  .post-stream { text-align: left; }
  .related, .series-band, .article-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .article-nav > :first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .article-title { font-size: 40px; }
  .article-head { padding: 48px var(--gutter) 32px; }
  .article-figure img { height: 280px; }
}
/* Phones */
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .logo { gap: 10px; }
  .logo-mark { width: 42px; }
  .h1, .intro-title, .feature-title { font-size: 40px; }
  .hero img { height: 280px; }
  .streams { grid-template-columns: minmax(0, 1fr) 1fr; }
  .stream-name { font-size: 24px; }
  .footer-columns { grid-template-columns: minmax(0, 1fr); }
  .article-body { font-size: 18px; }
  .big-quote { font-size: 24px; }
  .intro { padding: 32px var(--gutter) 40px; }
  .page-heading:not(.rule-bottom) { padding-top: 40px; }
  .image-text { padding: 48px var(--gutter); }
  .contact { padding: 40px var(--gutter); }
  .contact-form { padding: 24px 20px; }
  .name-fields { grid-template-columns: 1fr; }
  .contact-rows > div { flex-direction: column; gap: 4px; }
  .contact-rows dd { text-align: left; }
  .series-strip { padding: 16px 18px; }
  .week-days a { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; }
  .day-title { grid-column: 2; }
}

/* ---------- 9. Print: articles read well on paper ---------- */
@media print {
  :root { --gutter: 0px; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .streams, .hero, .article-nav, .article-cta, .series-strip, .more-stream, .article-aside, .video { display: none !important; }
  .page { max-width: none; }
  .article-head { padding: 0 0 24px; text-align: left; align-items: flex-start; }
  .article-layout { display: block; padding: 0; }
  .article-body { font-size: 12pt; line-height: 1.5; }
  .article-body a { color: #000; text-decoration: none; }
}