/* Self-hosted variable fonts (latin subset, from Google Fonts), preloaded in
   index.html. font-display: optional, not swap: with swap, Chrome held the
   first paint until the preloaded fonts arrived (~2s on a slow connection);
   with optional it paints at once, uses the fonts when they're ready in time
   (nearly always, as they're preloaded and small) and never swaps mid-view. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: optional;
  src: url(/fonts/fraunces.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(/fonts/source-sans-3.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light is the default; dark applies when the device prefers it (unless the
   visitor picked light) or when the visitor picks dark with the header toggle.
   The "band" tokens colour the header, hero, featured event, contact section,
   footer and Sunday card: bright cream and gold in light, near-black in dark. */
:root {
  color-scheme: light;
  --ink: #1d1a16;
  --ink-soft: #4a443c;
  --paper: #fffcf6;
  --paper-alt: #f6efe1;
  --surface: #ffffff;
  --line: #e6dcc8;
  --gold: #f0a90e;
  --gold-deep: #805700; /* gold for text: at least 5.3:1 on every light background (WCAG AA) */
  --night: #120f0c;
  --radius: 14px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-bg: rgba(255, 252, 246, .92);
  --header-solid: #fffcf6;
  --header-line: #ecdfc3;
  --hero-bg: radial-gradient(ellipse at 90% 10%, rgba(240, 169, 14, .20), transparent 55%), linear-gradient(180deg, #fff7e8 0%, #fffcf6 100%);
  --feature-bg: radial-gradient(ellipse at 12% 50%, rgba(240, 169, 14, .30), transparent 60%), #fdf0d2;
  --contact-bg: #fbf2de;
  --footer-bg: #f3ead8;
  --sunday-bg: #fdf1d4;
  --on-band: var(--ink);
  --on-band-soft: var(--ink-soft);
  --on-band-strong: #1d1a16;
  --band-accent: var(--gold-deep);
  --band-tint: rgba(255, 255, 255, .75);
  --label: #6b6150;
  --photo-shadow: 0 18px 40px rgba(90, 60, 0, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ece5d8;
    --ink-soft: #b3a994;
    --paper: #17130f;
    --paper-alt: #201b16;
    --surface: #26201a;
    --line: #3b332a;
    --gold-deep: #f2b843;
    --night: #0b0907;

    --header-bg: rgba(18, 15, 12, .94);
    --header-solid: #120f0c;
    --header-line: rgba(240, 169, 14, .18);
    --hero-bg: #0b0907;
    --feature-bg: radial-gradient(ellipse at 15% 50%, rgba(240, 169, 14, .22), transparent 55%), #0b0907;
    --contact-bg: #0b0907;
    --footer-bg: #0b0907;
    --sunday-bg: #0b0907;
    --on-band: #f6f1e7;
    --on-band-soft: #d9d0c1;
    --on-band-strong: #ffffff;
    --band-accent: var(--gold);
    --band-tint: rgba(255, 255, 255, .06);
    --label: #a89d8a;
    --photo-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ece5d8;
  --ink-soft: #b3a994;
  --paper: #17130f;
  --paper-alt: #201b16;
  --surface: #26201a;
  --line: #3b332a;
  --gold-deep: #f2b843;
  --night: #0b0907;

  --header-bg: rgba(18, 15, 12, .94);
  --header-solid: #120f0c;
  --header-line: rgba(240, 169, 14, .18);
  --hero-bg: #0b0907;
  --feature-bg: radial-gradient(ellipse at 15% 50%, rgba(240, 169, 14, .22), transparent 55%), #0b0907;
  --contact-bg: #0b0907;
  --footer-bg: #0b0907;
  --sunday-bg: #0b0907;
  --on-band: #f6f1e7;
  --on-band-soft: #d9d0c1;
  --on-band-strong: #ffffff;
  --band-accent: var(--gold);
  --band-tint: rgba(255, 255, 255, .06);
  --label: #a89d8a;
  --photo-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.01em; }
h2, .h3 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3, .h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--gold); color: var(--night); padding: 8px 14px; border-radius: 8px; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .6em;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--header-line);
  color: var(--on-band);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--on-band-strong); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.brand small { display: block; font-family: var(--sans); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--band-accent); }
.site-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { display: block; color: var(--on-band); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.site-nav a:hover { background: rgba(240, 169, 14, .18); color: var(--on-band-strong); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--band-accent) 55%, transparent);
  background: transparent; color: var(--band-accent); cursor: pointer;
}
.icon-btn:hover { background: rgba(240, 169, 14, .18); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.menu-toggle { display: none; }
.menu-toggle .icon-close { display: none; }
.site-header.is-open .menu-toggle .icon-open { display: none; }
.site-header.is-open .menu-toggle .icon-close { display: block; }

/* Phones and small tablets: the menu folds into a drop-down behind the
   hamburger button. Without JavaScript the links simply wrap below the brand. */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; min-height: 60px; padding: 8px 0; gap: 8px; }
  .brand { font-size: 1.05rem; }
  .brand img { width: 40px; height: 40px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { gap: 0; margin-left: -12px; }

  .js .menu-toggle { display: inline-flex; }
  .js .header-inner { flex-wrap: nowrap; }
  .js .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    background: var(--header-solid); border-bottom: 1px solid var(--header-line);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
    max-height: calc(100vh - 60px); overflow-y: auto;
    display: none;
  }
  .js .site-header.is-open .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; flex-wrap: nowrap; margin: 0 auto; padding: 8px 0 14px; width: min(1120px, 100% - 32px); }
  .js .site-nav li + li { border-top: 1px solid var(--header-line); }
  .js .site-nav a { padding: 14px 4px; border-radius: 0; font-size: 1.1rem; }
  .js .site-nav a:hover { background: none; color: var(--band-accent); }
}

/* Hero */
.hero { background: var(--hero-bg); color: var(--on-band); padding: clamp(40px, 7vw, 88px) 0; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { color: var(--on-band-strong); }
.hero .eyebrow { color: var(--band-accent); }
.lede { font-size: 1.2rem; color: var(--on-band-soft); max-width: 34em; }
.hero-photo { margin: 0; }
.hero-photo img { border-radius: var(--radius); box-shadow: var(--photo-shadow); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.service-card {
  display: grid; gap: 2px; margin: 24px 0;
  padding: 18px 20px; border-left: 4px solid var(--gold);
  background: var(--band-tint); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 1px 0 var(--header-line);
}
.service-card strong { font-family: var(--serif); font-size: 1.35rem; color: var(--on-band-strong); }
.service-card span { color: var(--on-band-soft); }
.service-label { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--band-accent) !important; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: #120f0c; }
.btn-primary:hover { background: #ffbb24; color: #120f0c; }
.btn-ghost { border-color: currentColor; color: inherit; }
.hero .btn-ghost, .featured .btn-ghost { color: var(--on-band-strong); }
.section .btn-ghost { color: var(--ink); }

/* Featured event (filled in from the calendar by the Worker) */
.featured {
  background: var(--feature-bg); color: var(--on-band);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid rgba(240, 169, 14, .45);
}
.featured[hidden] { display: none; }
.featured-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; }
.featured .eyebrow { color: var(--band-accent); }
.featured h2 { color: var(--on-band-strong); margin-bottom: .15em; }
.featured-meta { font-weight: 700; color: var(--band-accent); margin-bottom: .5em; }
.featured-blurb { color: var(--on-band-soft); max-width: 60ch; margin: 0; }
.featured-actions { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) {
  .featured-inner { grid-template-columns: 1fr; }
  .featured-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Values strip */
.values { background: var(--gold); color: #120f0c; padding: 28px 0; }
.values-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 32px; }
.values-row p { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.values-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.values-row li { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); }

/* Sections */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-alt { background: var(--paper-alt); }
.section-dark { background: var(--contact-bg); color: var(--on-band); }
.section-dark h2 { color: var(--on-band-strong); }
.section-dark .eyebrow { color: var(--band-accent); }
.section-dark a { color: var(--band-accent); }
.section-dark a:hover { color: var(--on-band-strong); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.tags li { background: var(--surface); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; font-weight: 600; }

/* Calendar */
.calendar-frame { border-radius: var(--radius); overflow: hidden; margin: 24px 0 12px; border: 1px solid var(--line); }
/* Google's embed is always light; invert it in dark mode, rotating hues back so colours stay close. */
:root[data-theme="dark"] .calendar-frame iframe { filter: invert(.92) hue-rotate(180deg); }
:root[data-theme="dark"] .calendar-frame { border-color: transparent; }
.calendar-frame iframe { display: block; width: 100%; height: 640px; border: 0; }
@media (max-width: 640px) { .calendar-frame iframe { height: 520px; } }
.small { font-size: .95rem; color: var(--ink-soft); }
.section-dark .small { color: var(--label); }

/* Weekly */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin: 24px 0 36px; }
.day.day-sunday { background: var(--sunday-bg); border-color: var(--gold); color: var(--on-band); }
.day.day-sunday h3 { color: var(--on-band-strong); }
.day.day-sunday time { color: var(--band-accent); }
.day.day-sunday .where { color: var(--on-band-soft); }
.day .where { display: block; font-size: .85rem; color: var(--ink-soft); }
.day .none { color: var(--ink-soft); font-size: .95rem; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.day h3 { font-size: 1.05rem; margin-bottom: .6em; padding-bottom: .5em; border-bottom: 2px solid var(--gold); }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.day li { line-height: 1.35; }
.day time { display: block; font-size: .85rem; font-weight: 700; color: var(--gold-deep); }
@media (max-width: 960px) { .week-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.card p { margin: 0; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* Visit */
address { font-style: normal; font-size: 1.15rem; line-height: 1.5; margin-bottom: 1em; }
.checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.checks li { padding-left: 28px; position: relative; }
.checks li::before { content: "✓" / ""; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 420px; height: 100%; }
.map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
#visit h3 { margin-top: 1.5em; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.contact-list span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.contact-list a { font-size: 1.15rem; }
.social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.social a { display: inline-block; padding: 8px 16px; border: 1px solid rgba(240,169,14,.6); border-radius: 999px; text-decoration: none; font-weight: 600; }
.people { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.people dt { color: var(--label); font-weight: 600; }
.people dd { margin: 0; }
@media (max-width: 480px) { .people { grid-template-columns: 1fr; gap: 2px; } .people dd { margin-bottom: 10px; } }

/* History */
.history-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 8px; }
.prose { max-width: 66ch; }
.history-grid aside { border: 1px solid var(--line); }
.history-grid aside h3 { margin-bottom: .5em; }
.history-grid aside p { margin: 0 0 .8em; }
.history-grid aside p:last-child { margin: 0; }
@media (max-width: 860px) { .history-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 24px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.faq h3 { font-size: 1.1rem; margin-bottom: .4em; }
.faq p { margin: 0; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* Safeguarding */
.callout { background: var(--paper-alt); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin: 20px 0; }
.callout p:last-child { margin: 0; }
details { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; background: var(--surface); }
summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 12px; }
details li { margin-bottom: 6px; }

/* Policy pages (/baptism-policy, /safeguarding-policy, /privacy) */
.doc-head { background: var(--hero-bg); color: var(--on-band); padding: clamp(32px, 5vw, 56px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--header-line); }
.doc-head h1 { color: var(--on-band-strong); margin-bottom: .25em; }
.doc-head .eyebrow { color: var(--band-accent); }
.doc-meta { color: var(--on-band-soft); margin: 0; }
.breadcrumb { font-size: .95rem; margin: 0 0 1.2em; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "›" / ""; margin-right: 6px; color: var(--on-band-soft); }
.breadcrumb a { color: var(--band-accent); }
.doc { padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
.doc > * { max-width: 72ch; } /* readable line length, left-aligned with the heading */
.doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 1.6em; }
.doc h2:first-child { margin-top: 0; }
.doc ol, .doc ul { padding-left: 1.6em; margin: 0 0 1em; }
.doc li { margin-bottom: .55em; }
.doc ol ol { list-style-type: lower-alpha; margin-top: .55em; }
.doc ul ul { list-style-type: circle; margin-top: .55em; }
.doc .sign-off { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 1.5em 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.doc .sign-off dt { color: var(--label); font-weight: 600; }
.doc .sign-off dd { margin: 0; }
.doc .note { font-size: .95rem; color: var(--ink-soft); }
.doc .callout { margin: 0 0 2em; }
@media (max-width: 480px) { .doc .sign-off { grid-template-columns: 1fr; gap: 2px; } .doc .sign-off dd { margin-bottom: 8px; } }

/* Listening page: video cards. Each shows the YouTube thumbnail with a play
   button; site.js swaps in the (privacy-enhanced) player when it's pressed. */
.doc.doc-wide > * { max-width: none; }
.lede-sm { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch !important; margin-bottom: 1.5em; }
.music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-bottom: 1.5em; }
.track { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player img, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player img { object-fit: cover; transition: transform .3s ease, filter .3s ease; } /* crops YouTube's letterbox bars */
.yt-play { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.yt-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .35)); }
.yt-play:hover img { transform: scale(1.04); filter: brightness(1.05); }
/* A "Play" pill in the bottom-left corner, clear of the artwork's title text. */
.play-icon {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--gold); color: #120f0c; font-weight: 700; font-size: .95rem; line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35); transition: transform .15s ease;
}
.play-icon svg { width: 18px; height: 18px; }
.yt-play:hover .play-icon { transform: scale(1.06); }
.yt-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; border-radius: 6px; }
.track-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 16px 18px 18px; }
.track-body h2 { font-size: 1.25rem; margin: 0; }
.track-body .artist { color: var(--ink-soft); margin: 0; }
.track-body .watch { margin-top: auto; padding-top: 12px; font-size: .95rem; font-weight: 600; }

/* The featured song: full width on tablets, a 2×2 block on desktops with the
   next two songs stacked beside it and the rest flowing underneath. */
@media (min-width: 640px) {
  .music-grid { grid-template-columns: repeat(2, 1fr); }
  .track-featured { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .music-grid { grid-template-columns: repeat(3, 1fr); }
  .track-featured { grid-column: span 2; grid-row: span 2; }
  .track-featured .player { flex: 1; aspect-ratio: auto; min-height: 320px; }
}
.track-featured .track-body { flex: none; padding: 20px 24px 22px; }
.track-featured .track-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.track-featured .track-body .artist { font-size: 1.1rem; }
.track-featured .play-icon { left: 20px; bottom: 20px; padding: 11px 22px 11px 16px; font-size: 1.1rem; }
.track-featured .play-icon svg { width: 22px; height: 22px; }

/* Home page "What we're listening to" band: intro on the left, a mosaic of
   three song thumbnails (the first one large) on the right. */
.music-band { background: var(--feature-bg); color: var(--on-band); border-top: 1px solid rgba(240, 169, 14, .35); border-bottom: 1px solid rgba(240, 169, 14, .35); }
.music-band h2 { color: var(--on-band-strong); }
.music-band .eyebrow { color: var(--band-accent); }
.music-band p { color: var(--on-band-soft); }
.music-band-inner { align-items: center; }
.music-mosaic {
  position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
  aspect-ratio: 16 / 9; text-decoration: none;
}
.music-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: var(--photo-shadow); transition: transform .3s ease; }
.music-mosaic img:first-child { grid-row: span 2; }
.music-mosaic:hover img { transform: scale(1.02); }
.music-mosaic .play-icon { left: 16px; bottom: 16px; }

/* Video overlay: a native <dialog> opened by site.js when Play is pressed. */
.video-dialog {
  width: min(1100px, 100vw - 32px); max-width: none; max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: #0b0907; color: #f6f1e7; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.video-dialog::backdrop { background: rgba(8, 6, 4, .82); backdrop-filter: blur(4px); }
.video-dialog[open] { animation: video-in .2s ease-out; }
@keyframes video-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.video-dialog-bar { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; }
.video-dialog-bar h2 { flex: 1; margin: 0; font-size: 1.15rem; color: #fff; }
.video-dialog-bar .artist { color: #cfc5b4; font-family: var(--sans); font-weight: 400; }
.video-dialog .icon-btn { color: var(--gold); border-color: rgba(240, 169, 14, .55); }
.video-frame { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 32px - 64px); margin: 0 auto; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .video-dialog { width: 100vw; max-height: 100vh; border-radius: 0; }
  .video-dialog-bar h2 { font-size: 1rem; }
}

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--on-band-soft); padding: 40px 0; border-top: 1px solid rgba(240,169,14,.35); font-size: .95rem; }
.footer-inner { display: flex; gap: 24px; align-items: center; }
.footer-text p { margin: 0 0 .4em; }
.legal { color: var(--on-band-strong); font-weight: 600; }
.docs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: .8em !important; }
.docs a { color: var(--band-accent); }
@media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

/* Keyboard focus: deep gold in light mode (visible on cream and on the gold
   buttons), bright gold in dark mode. */
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .icon-btn:focus-visible { border-radius: 999px; }
main:focus { outline: none; } /* focused by the skip link; no ring around the whole page */

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Respect "reduce motion" in the device's accessibility settings. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; }
}

/* Print: a clean A4 handout in black ink with gold accents. Always the light
   palette (whatever theme is chosen on screen), no background fills (most
   browsers drop them anyway), interactive bits and embeds left out, and
   section structure carried by rules and type instead of coloured bands.
   The safeguarding <details> is opened for printing by site.js. */
@page {
  size: A4;
  margin: 16mm 15mm 18mm;
  @bottom-left { content: "stoswaldconeyhill.com"; font: 8pt "Source Sans 3", sans-serif; color: #5c5345; }
  @bottom-right { content: counter(page) " of " counter(pages); font: 8pt "Source Sans 3", sans-serif; color: #5c5345; }
}

@media print {
  :root, :root[data-theme] {
    color-scheme: light !important;
    --ink: #000 !important;
    --ink-soft: #333 !important;
    --paper: #fff !important;
    --paper-alt: #fff !important;
    --surface: #fff !important;
    --line: #cfc3aa !important;
    --gold-deep: #805700 !important;
    --label: #5c5345 !important;
    --header-bg: #fff !important;
    --header-solid: #fff !important;
    --header-line: #cfc3aa !important;
    --hero-bg: none !important;
    --feature-bg: none !important;
    --contact-bg: #fff !important;
    --footer-bg: #fff !important;
    --sunday-bg: #fff !important;
    --on-band: #000 !important;
    --on-band-soft: #333 !important;
    --on-band-strong: #000 !important;
    --band-accent: #805700 !important;
    --band-tint: transparent !important;
    --photo-shadow: none !important;
  }

  body { font-size: 10.5pt; line-height: 1.45; background: #fff; color: #000; }
  .wrap { width: 100%; }
  h1 { font-size: 22pt; }
  h2, .h3 { font-size: 16pt; }
  h3 { font-size: 12pt; }
  /* Keep headings (and the small label above them) off the foot of a page:
     each reserves 30mm below itself that it then gives back. (break-after:
     avoid made Chrome push whole sections to the next page, leaving pages
     half empty.) */
  .eyebrow, h2, #visit h3, summary { break-inside: avoid; }
  h2::after, #visit h3::after, summary::after { content: ""; display: block; height: 30mm; margin-bottom: -30mm; }
  .eyebrow::after { content: ""; display: block; height: 42mm; margin-bottom: -42mm; } /* covers its heading too */
  p, li, dd { orphans: 3; widows: 3; }
  .eyebrow { font-size: 7.5pt; margin-bottom: .3em; }

  /* Not useful on paper. The featured event is left out too: printouts go on
     noticeboards and outlive it. */
  .skip, .header-actions, .site-nav, .actions, .featured, .breadcrumb,
  .map, .social, .btn[href^="#"], .btn[href*="google.com/maps"] { display: none !important; }

  /* Header: the brand, with the web address and phone on the right. */
  .site-header { position: static; backdrop-filter: none; border-bottom: 2px solid var(--gold); }
  .header-inner { min-height: 0; padding: 0 0 8px; }
  .header-inner::after { content: "stoswaldconeyhill.com · 01452 690750"; font-size: 9pt; color: var(--ink-soft); }
  .brand img { width: 40px; height: 40px; }

  /* Bands become plain sections separated by a hairline. */
  .hero, .section, .values { padding: 7mm 0; background: none; }
  .section, .values { border-top: 1px solid var(--line); }
  .hero { padding-top: 6mm; }
  .hero-inner { grid-template-columns: 1.5fr 1fr; gap: 8mm; }
  .hero-photo { order: 0; }
  .hero-photo img { border-radius: 6px; }
  .lede { font-size: 12pt; }
  .service-card { margin: 4mm 0 0; padding: 8px 14px; box-shadow: none; break-inside: avoid; }
  .service-card strong { font-size: 13pt; }

  .values { color: #000; padding: 4mm 0; }
  .values-row li { font-size: 13pt; }

  .two-col { grid-template-columns: 1fr 1fr; gap: 8mm; }
  .tags { gap: 6px; }
  .tags li { padding: 2px 10px; font-size: 9pt; }

  /* Weekly timetable: one row per day, like a printed notice. */
  .week-grid { display: block; margin: 3mm 0 4mm; border-top: 2px solid var(--gold); }
  .day, .day.day-sunday {
    display: grid; grid-template-columns: 26mm 1fr; gap: 0 4mm;
    padding: 5px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    break-inside: avoid;
  }
  .day h3 { margin: 0; padding: 0; border: 0; font-size: 11pt; }
  .day ul { display: block; }
  .day li { display: grid; grid-template-columns: 30mm 1fr; column-gap: 3mm; margin-bottom: 2px; }
  .day li.none { display: block; }
  .day time { font-size: 9.5pt; padding-top: 1px; }
  .day .where { grid-column: 2; font-size: 8.5pt; }
  .day.day-sunday h3 { color: var(--gold-deep); }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 2mm; }
  .card, .faq, .callout, .history-grid aside { border-radius: 6px; padding: 10px 12px; break-inside: avoid; }
  .card { font-size: 9.5pt; }

  /* The live calendar can't print; point to it instead. */
  .calendar-frame { border: 1px dashed var(--line); border-radius: 6px; margin: 3mm 0; padding: 10px 14px; }
  .calendar-frame iframe { display: none; }
  .calendar-frame::after { content: "For dates and one-off events, see the live calendar at stoswaldconeyhill.com/#calendar"; font-style: italic; }
  #calendar .small { display: none; }

  address { font-size: 11pt; }
  #visit .two-col { grid-template-columns: 1fr; }

  /* One column: "Who was St Oswald?" follows the history. (Side by side,
     Chrome pushed the whole row to the next page when the box didn't fit,
     leaving the heading on its own.) */
  .history-grid { display: block; }
  .history-grid aside { margin-top: 4mm; }
  .prose { max-width: none; }

  .faq-grid { gap: 2mm 5mm; margin-top: 3mm; }
  .faq { padding: 7px 12px; } /* all ten questions fit on one page */
  .faq h3 { font-size: 10.5pt; }
  .faq p { font-size: 9.5pt; }

  .contact-list a { font-size: 11pt; }
  .people { font-size: 10pt; }

  details { border: 0; padding: 0; }
  summary { list-style: none; font-family: var(--serif); font-size: 12pt; }
  summary::-webkit-details-marker { display: none; }

  /* Policy pages: full-width text and numbering that holds together. */
  .doc-head { padding: 6mm 0 4mm; background: none; border-bottom: 1px solid var(--line); }
  .doc { padding: 5mm 0 6mm; }
  .doc > * { max-width: none; }
  .doc h2 { font-size: 13pt; margin-top: 1.2em; }
  .doc li { margin-bottom: .35em; break-inside: avoid; }
  .doc li:has(> ol, > ul) { break-inside: auto; } /* a clause with sub-clauses may split */
  .doc .sign-off { padding: 10px 14px; border-radius: 6px; break-inside: avoid; }
  .doc .callout { margin-bottom: 1.2em; }

  .site-footer { padding: 6mm 0 0; border-top: 2px solid var(--gold); font-size: 9pt; color: var(--ink-soft); break-inside: avoid; }
  .footer-inner > div:first-child { flex: none; }
  .site-footer img { width: 48px; height: 48px; }
  .docs { flex-direction: column; gap: 2px; }
  /* Links: plain text (contact and footer links keep their gold); show where
     a link goes when the text doesn't already say it. Email and phone links
     show themselves. */
  a { color: inherit; text-decoration: none; }
  .btn { padding: 0; border: 0; border-radius: 0; background: none !important; color: inherit !important; font-weight: 700; }
  main a[href^="http"]:not([href*="calendar.google"])::after,
  .site-footer a[href^="http"]::after {
    content: " (" attr(href) ")"; font-weight: 400; font-size: 8.5pt; color: var(--ink-soft); word-break: break-all;
  }
  main a[href^="/"]::after, .site-footer a[href^="/"]::after {
    content: " (stoswaldconeyhill.com" attr(href) ")"; font-weight: 400; font-size: 8.5pt; color: var(--ink-soft); word-break: break-all;
  }
  .prose a, .faq a, .callout a { text-decoration: underline; text-decoration-color: var(--line); }

  img { break-inside: avoid; }

  /* Home page music band: the text and link only. */
  .music-mosaic, .video-dialog { display: none !important; }
  .music-band { border-bottom: 0; }

  /* Listening page: a plain list of songs with their YouTube addresses. */
  .music-grid { display: block; }
  .track { display: block; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0; break-inside: avoid; }
  .player { display: none; }
  .track-body { padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6mm; }
  .track-body h2 { font-size: 11pt; margin: 0; }
  .track-body .artist { font-size: 10pt; }
  .track-body .watch { grid-column: 1 / -1; padding-top: 0; font-weight: 400; }
}