/* Our Lady Queen of Peace, Braintree — site styles */
:root {
  --navy: #1b2a4a;
  --blue: #2b4c86;
  --blue-soft: #e8eef8;
  --gold: #b8913a;
  --gold-dark: #94732a;
  --cream: #faf7f1;
  --paper: #ffffff;
  --ink: #1f2330;
  --muted: #5d6474;
  --line: #e3ddd0;
  --red: #a33a2f;
  --green: #2f7a4a;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 6px 20px rgba(20, 30, 60, .06);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--sans); color: var(--ink); background: var(--cream); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4, .h3 { font-family: var(--serif); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3, .h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.section { padding-block: 48px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.right { text-align: right; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--gold); margin-bottom: .5em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { margin-bottom: .5em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .65em 1.3em; border-radius: 999px;
  border: 2px solid var(--blue); background: var(--blue); color: #fff; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; transition: .15s; }
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-ghost-dark { background: transparent; color: var(--blue); }
.btn-ghost-dark:hover { color: #fff; }
.btn-small { padding: .35em .9em; font-size: .9rem; }
.btn-large { padding: .85em 1.8em; font-size: 1.08rem; }
.btn-danger { background: var(--red); border-color: var(--red); }
.link-btn { background: none; border: 0; color: var(--red); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* Top bar & header */
.topbar { background: var(--navy); color: #cfd7e6; font-size: .88rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-inner { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; flex-wrap: wrap; }
.topbar-right { display: flex; gap: 16px; flex-wrap: wrap; }
.badge { background: var(--gold); color: #fff; border-radius: 999px; padding: 0 7px; font-size: .78rem; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand strong { display: block; font: 700 1.45rem/1.1 var(--serif); color: var(--navy); }
.brand small { display: block; color: var(--muted); font-size: .85rem; letter-spacing: .04em; }
.nav-toggle { display: none; background: none; border: 2px solid var(--navy); color: var(--navy); border-radius: 8px; padding: 6px 12px; font: 600 .95rem var(--sans); cursor: pointer; }
.site-nav { border-top: 1px solid var(--line); }
.site-nav > ul { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 auto; }
.site-nav li { position: relative; }
.site-nav a { display: block; padding: 12px 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .96rem; }
.site-nav li.active > a, .site-nav a:hover { color: var(--blue); box-shadow: inset 0 -3px 0 var(--gold); }
.site-nav .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px 0; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); }
.site-nav .sub a { box-shadow: none; font-weight: 400; }
.site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub { display: block; }

/* Hero */
.hero { background:
    radial-gradient(1000px 400px at 85% -10%, rgba(184,145,58,.35), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff; }
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-block: 64px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hero .lead { color: #dde5f3; max-width: 36em; }
.hero .eyebrow { color: #e8c979; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-card { background: rgba(255,255,255,.97); color: var(--ink); border-radius: 16px; padding: 28px; box-shadow: 0 20px 40px rgba(0,0,0,.25); border-top: 5px solid var(--gold); }
.mass-list { list-style: none; padding: 0; margin: 0 0 12px; }
.mass-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 1.08rem; }
.mass-list strong { color: var(--navy); }
.next-mass { background: var(--blue-soft); padding: 10px 14px; border-radius: 8px; }

/* Page head */
.page-head { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; padding-block: 40px 34px; }
.page-head h1 { color: #fff; margin-bottom: .2em; }
.page-head .lead { color: #dbe3f1; margin: 0; }
.page-head a { color: #f0d894; }
.flash-wrap { padding-top: 16px; }

/* Notices */
.notices-strip { background: #fff; border-bottom: 1px solid var(--line); padding-block: 28px 12px; }
.notice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.notice { background: var(--cream); border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.notice h3 { font-size: 1.2rem; margin-bottom: .3em; }
.notice p { margin: 0; font-size: .95rem; }
.notice-urgent { border-left-color: var(--red); background: #fbf0ee; }
.notice-wide { margin-bottom: 16px; background: #fff; box-shadow: var(--shadow); }
.notice-wide .meta { margin-top: .6em; }
.tag { display: inline-block; font: 700 .72rem var(--sans); text-transform: uppercase; letter-spacing: .06em; background: var(--blue-soft); color: var(--blue); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.tag-warn { background: #fbeee0; color: #9a5a12; }
.tag-ok { background: #e3f3e8; color: var(--green); }
.tag-bad { background: #f8e4e1; color: var(--red); }

/* Layout */
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; }

/* Cards */
.cards { display: grid; gap: 20px; }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-body { padding: 20px 22px; }
.card h3, .card .h3 { margin-bottom: .35em; }
.card h3 a, .card .h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover, .card .h3 a:hover { text-decoration: underline; }
.meta { color: var(--muted); font-size: .88rem; margin-bottom: .4em; }
.panel { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 20px; }
.panel h3 { font-size: 1.35rem; }
.panel-blue { background: var(--navy); color: #e6ebf5; }
.panel-blue h2, .panel-blue h3 { color: #fff; }
.panel-blue a:not(.btn) { color: #f0d894; }
.feature { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.feature h2 { margin-bottom: .2em; }

/* Events */
.event-list { list-style: none; padding: 0; margin: 0 0 12px; }
.event-list li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.event-list time { flex: 0 0 54px; text-align: center; background: var(--blue-soft); border-radius: 8px; padding: 4px 0; font-size: .75rem; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.event-list time b { display: block; font: 700 1.5rem/1.1 var(--serif); color: var(--navy); }
.month { font-size: 1.2rem; margin-top: 1em; color: var(--gold-dark); }

/* CTA band */
.cta-band { background: var(--gold); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 40px; flex-wrap: wrap; }
.cta-inner p { max-width: 40em; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn-gold { background: var(--navy); border-color: var(--navy); }

/* Link tiles */
.link-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 32px; }
.link-tile { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--ink); transition: .15s; }
.link-tile:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-1px); }
.link-tile strong { color: var(--navy); font-size: 1.05rem; }
.link-tile span { color: var(--muted); font-size: .92rem; }
.link-tile em { font-style: normal; font-size: .8rem; color: var(--gold-dark); margin-top: auto; }

/* Tables */
.timetable, .table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.timetable th, .timetable td, .table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.timetable thead th, .table thead th { background: var(--navy); color: #fff; font-weight: 600; }
.timetable tbody th { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); width: 30%; }
.muted-row td, .muted-row th { color: var(--muted) !important; background: #fbfaf7; }
.table td.right, .table th.right { text-align: right; }
.table-wrap { overflow-x: auto; }

/* Docs list */
.doc-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.doc-list li { display: flex; align-items: center; gap: 16px; background: #fff; padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow); }
.doc-list li > div { flex: 1; }
.doc-icon { flex: 0 0 44px; height: 52px; border-radius: 6px; background: #f6e9e6; color: var(--red); font: 700 .75rem var(--sans); display: grid; place-items: center; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 8px; }
.tabs a { padding: 6px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.tabs a.current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Forms */
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
input, select, textarea { font: 400 1rem var(--sans); padding: .65em .8em; border: 1px solid #cfc8b8; border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 2px solid var(--blue-soft); }
input[type=checkbox], input[type=radio] { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; margin: 0; background: #fff; display: grid; gap: 12px; }
legend { font: 600 1.3rem var(--serif); color: var(--navy); padding: 0 6px; }
.form label.check, .form label.choice { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.check input, .choice input { margin-top: 5px; }
.check small, .choice small { display: block; color: var(--muted); font-size: .85rem; }
.choice { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input, .segmented input { position: absolute; opacity: 0; }
.pill span { display: inline-block; padding: 10px 20px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; cursor: pointer; background: #fff; }
.pill input:checked + span { border-color: var(--gold); background: var(--gold); color: #fff; }
.pill input:focus-visible + span, .segmented input:focus-visible + span { outline: 3px solid var(--blue); }
.segmented { display: inline-flex; border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; width: max-content; }
.segmented label { display: block !important; position: relative; }
.segmented span { display: block; padding: 8px 22px; cursor: pointer; font-weight: 600; }
.segmented input:checked + span { background: var(--navy); color: #fff; }
.giftaid { background: #fdf8ec; border: 1px solid #ecd9a8; border-radius: 8px; padding: 12px 14px; }
.hp { position: absolute; left: -9999px; }
.search { display: flex; gap: 8px; margin-top: 16px; max-width: 480px; }
.search input { border: 0; }
.qty { width: 80px; }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.alert-success { background: #e8f5ec; border-color: #b7dcc3; color: #1e5733; }
.alert-error { background: #fbeceb; border-color: #eab8b2; color: #7d271e; }
.alert-info { background: var(--blue-soft); border-color: #bfd0ea; color: var(--navy); }

/* Store */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 16px; }
.product { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.product-img { display: block; aspect-ratio: 1; background: var(--blue-soft); }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.img-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3.5rem; color: var(--gold); background: linear-gradient(135deg, var(--blue-soft), #f5efe1); min-height: 200px; }
.product-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-body form { margin-top: auto; }
.product h2 a { color: var(--navy); text-decoration: none; }
.price { font: 700 1.3rem var(--serif); color: var(--gold-dark); margin: 0; }
.product-detail { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.product-detail .product-img { border-radius: var(--radius); overflow: hidden; }
.add-form { display: flex; gap: 12px; align-items: end; margin: 16px 0 6px; }
.add-form label { display: grid; gap: 4px; font-weight: 600; }
.add-form input { width: 90px; }
.summary li { display: flex; justify-content: space-between; gap: 12px; }
.summary .total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }

/* Prose */
.prose h2 { margin-top: 1.2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { border-left: 4px solid var(--gold); margin: 1em 0; padding: .3em 1em; color: var(--muted); font-style: italic; }
.article h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.article-img { border-radius: var(--radius); margin: 1em 0 1.5em; }

/* Pager */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.pager a { padding: 6px 12px; border-radius: 6px; background: #fff; border: 1px solid var(--line); text-decoration: none; }
.pager a.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Auth */
.auth-card { max-width: 460px; margin: 0 auto; background: #fff; padding: 32px; border-radius: 16px; box-shadow: var(--shadow); border-top: 5px solid var(--gold); }
.auth-wide { max-width: 720px; }
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }

/* Footer */
.site-footer { background: var(--navy); color: #c8d1e2; margin-top: 40px; font-size: .95rem; }
.site-footer h3 { color: #fff; font-size: 1.35rem; }
.site-footer a { color: #fff; }
.site-footer address { font-style: normal; margin-bottom: 1em; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 44px 24px; }
.footer-grid p { margin-bottom: .4em; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 16px 24px; font-size: .84rem; color: #9eabc4; }
.footer-legal p { margin: 0 0 4px; }
.site-footer .muted { color: #9eabc4; }

/* Members / admin shells */
.dash { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding-block: 32px 48px; align-items: start; }
.dash-nav { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; position: sticky; top: 140px; }
.dash-nav a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.dash-nav a:hover { background: var(--cream); }
.dash-nav a.current { background: var(--navy); color: #fff; }
.dash-nav .count { float: right; background: var(--gold); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .78rem; }
.dash-nav hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat { background: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); border-top: 4px solid var(--blue); }
.stat b { display: block; font: 700 2rem/1.1 var(--serif); color: var(--navy); }
.stat span { color: var(--muted); font-size: .9rem; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-actions form { display: inline; }
.inline-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.inline-form label { display: grid; gap: 4px; font-weight: 600; font-size: .85rem; }
.inline-form input, .inline-form select { width: auto; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar h1 { margin: 0; }
.help { font-size: .85rem; color: var(--muted); font-weight: 400; }

/* Newsletters: members-only */
.btn-locked { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-locked:hover { background: var(--cream); color: var(--navy); border-color: var(--gold); }
.panel-blue .btn-locked { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.members-note { display: flex; gap: 14px; align-items: flex-start; background: #fdf8ec; border: 1px solid #ecd9a8; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; }
.members-note p { margin: .2em 0 0; }
.lock-icon { font-size: 1.4rem; line-height: 1.2; }
.nl-strip { background: #fff; border-block: 1px solid var(--line); }
.nl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.nl-card { display: flex; flex-direction: column; gap: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.nl-card.latest { background: var(--navy); border-color: var(--navy); color: #e6ebf5; }
.nl-card.latest h3, .nl-card.latest .nl-date { color: #fff; }
.nl-card h3 { font-size: 1.15rem; margin: 0; }
.nl-date { font-weight: 700; color: var(--gold-dark); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.nl-card .btn { margin-top: auto; align-self: flex-start; }
.nl-card.latest .btn-locked { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

/* Upload drop zone */
.dropzone { position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 2px dashed #c9bfa8; border-radius: var(--radius); padding: 32px 20px; background: var(--cream); cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: var(--blue-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--green); background: #eef7f1; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.dz-icon { width: 48px; height: 58px; border-radius: 6px; background: #f6e9e6; color: var(--red); font: 700 .8rem var(--sans); display: grid; place-items: center; }
.dz-text { font-weight: 400; }
.dropzone.has-file .dz-file { color: var(--green); font-weight: 700; font-size: .95rem; }

/* Parish registration */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.person { background: #fff; }
.person-main { border-top: 4px solid var(--gold); }
.people { display: grid; gap: 14px; }
.people .person { background: var(--cream); }
.family > .btn { justify-self: start; }
.sacraments { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 4px; }
.sac-label { font-weight: 600; font-size: .9rem; color: var(--muted); width: 100%; }
.sacraments label.check { font-size: .95rem; }
.remove-person { justify-self: end; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.big-icon { font-size: 2.6rem; line-height: 1; margin: 0 0 .2em; color: var(--gold); }
.big-icon.ok { color: var(--green); }
.steps { list-style: none; padding: 0; margin: 20px auto; display: grid; gap: 10px; max-width: 420px; text-align: left; counter-reset: none; }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.steps li span { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 2px solid var(--line); background: #fff; color: var(--muted); }
.steps li.done { color: var(--ink); }
.steps li.done span { background: var(--green); border-color: var(--green); color: #fff; }
.steps li.now { color: var(--navy); font-weight: 700; }
.steps li.now span { border-color: var(--gold); color: var(--gold-dark); }
.panel-blue .steps li, .panel-blue .steps li.now { color: #e6ebf5; }
.panel-blue .steps li span { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.steps-compact { margin: 0; }
.steps-inline { max-width: none; grid-template-columns: repeat(3, 1fr); margin: 0 0 20px; }
.yes { color: var(--green); font-weight: 700; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; }
.contact-grid h3 { grid-column: 1 / -1; }

/* Sign-in security */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--blue); font: 600 .85rem var(--sans); cursor: pointer; padding: 6px 8px; }
.code-input { font: 600 1.4rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .25em; text-align: center; max-width: 260px; }
.small-code { font-size: 1rem; max-width: 140px; }
.captcha { min-height: 65px; }
.secure-note { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.setup-steps { padding-left: 1.2em; display: grid; gap: 18px; }
.qr { width: 220px; height: 220px; margin: 12px 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.qr svg { width: 100%; height: 100%; }
.setup-key { font-size: 1.05rem; letter-spacing: .08em; background: var(--cream); padding: 4px 8px; border-radius: 6px; display: inline-block; margin: 4px 0; }
.backup-codes { border: 2px solid var(--gold); }
.codes { columns: 2; font-size: 1.15rem; padding-left: 1.5em; }
.codes code { letter-spacing: .08em; }
.activity li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
details summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
@media print {
  .topbar, .site-header, .site-footer, .dash-nav, .panel:not(.backup-codes), .backup-codes .row-actions, h1 { display: none !important; }
  .dash { display: block; }
}

/* Volunteering & rota */
.duty-list { list-style: none; padding: 0; margin: 0; }
.duty { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.duty time { flex: 0 0 54px; text-align: center; background: var(--blue-soft); border-radius: 8px; padding: 4px 0; font-size: .75rem; text-transform: uppercase; color: var(--blue); font-weight: 700; align-self: flex-start; }
.duty time b { display: block; font: 700 1.5rem/1.1 var(--serif); color: var(--navy); }
.duty-body { flex: 1; }
.change-req summary { font-weight: 600; color: var(--blue); font-size: .92rem; margin: 4px 0; }
.change-req .form { max-width: 460px; background: var(--cream); padding: 12px; border-radius: 8px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.role-grid em { color: #9a5a12; font-style: normal; }
.ministry { padding: 6px 0; border-bottom: 1px solid var(--line); }
.small-prose { font-size: .95rem; }
.rota-date { font-size: 1.3rem; margin: 22px 0 8px; color: var(--gold-dark); }
.rota-table td { vertical-align: middle; }
.rota-time { width: 170px; font-weight: 600; white-space: nowrap; }
.rota-role { width: 200px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-soft); color: var(--navy); border-radius: 999px; padding: 3px 4px 3px 12px; margin: 2px 4px 2px 0; font-size: .9rem; }
span.chip { padding-right: 12px; }
.chip-confirmed { background: #e3f3e8; }
.chip-change_requested { background: #fbeee0; }
.chip-me { background: var(--gold); color: #fff; font-weight: 700; }
.chip-empty { background: transparent; border: 1px dashed #c9bfa8; color: var(--muted); }
.chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 6px; border-radius: 50%; }
.chip-x:hover { color: var(--red); background: #fff; }
.add-vol { display: inline-flex; margin-top: 4px; }
.add-vol select { padding: .35em .5em; font-size: .9rem; max-width: 240px; }
.warn-text { color: #9a5a12; font-weight: 700; }
.rota-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.rota-tools details.panel { margin: 0; padding: 14px 20px; }
.rota-tools summary { font-weight: 700; color: var(--navy); }
.rota-summary { margin: 18px 0 0; }
.requests { border-left: 4px solid var(--gold); }
.request { padding: 10px 0; border-bottom: 1px solid var(--line); }
.count-badge { background: var(--gold); color: #fff; border-radius: 999px; padding: 0 10px; font: 700 .9rem var(--sans); vertical-align: middle; }
.slot-edit summary { color: var(--blue); }
@media print {
  .no-print, .chip-x, .add-vol, .requests, .dash-nav, .toolbar .row-actions, .site-header, .topbar, .site-footer { display: none !important; }
  .dash { display: block; }
  .rota-table { box-shadow: none; }
  .chip { border: 1px solid #999; }
}

/* Featured event (Christmas in the Hall) */
.xmas-banner { background: radial-gradient(700px 260px at 90% 0%, rgba(232,201,121,.35), transparent 60%), linear-gradient(135deg, #7a1f24 0%, #a3262c 55%, #1f4d36 100%); color: #fff; }
.xmas-banner h2 { color: #fff; margin: 0 0 .2em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.xmas-banner .eyebrow { color: #f3d98d; margin: 0 0 .2em; }
.xmas-banner p { margin: 0; }
.xmas-inner { display: flex; align-items: center; gap: 28px; padding-block: 22px; flex-wrap: wrap; }
.xmas-text { flex: 1 1 280px; }
.countdown { display: flex; gap: 10px; }
.cd-unit { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 8px 10px; min-width: 68px; text-align: center; }
.cd-unit b { display: block; font: 700 1.9rem/1 var(--serif); }
.cd-unit span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.countdown-live { font: 600 1.2rem var(--serif); background: rgba(255,255,255,.14); padding: 10px 16px; border-radius: 10px; }
.xmas-hero { background: radial-gradient(900px 320px at 85% -10%, rgba(232,201,121,.35), transparent 60%), linear-gradient(135deg, #6d1b20 0%, #a3262c 55%, #1f4d36 100%); color: #fff; padding-block: 48px 36px; text-align: center; }
.xmas-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .1em; }
.xmas-hero .eyebrow { color: #f3d98d; }
.xmas-hero .lead { color: #fbe9e9; }
.xmas-hero .countdown { justify-content: center; margin: 20px 0 8px; }
.xmas-hero .cd-unit { min-width: 84px; padding: 12px; }
.xmas-hero .cd-unit b { font-size: 2.6rem; }
.xmas-hero .countdown-live { display: inline-block; margin-top: 12px; }
.xmas-when { font-size: 1.1rem; }
.xmas-jump { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.xmas-jump a { color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 6px 16px; text-decoration: none; font-weight: 600; }
.xmas-jump a:hover { background: rgba(255,255,255,.15); color: #fff; }
.xmas-section { margin-top: 44px; }
.raised { text-align: center; border-top: 5px solid #a3262c; }
.raised-total { font: 700 2.8rem/1 var(--serif); color: #1f4d36; margin: 4px 0 12px; }
.thermo { height: 22px; background: #f3e6e6; border-radius: 999px; overflow: hidden; }
.thermo span { display: block; height: 100%; background: linear-gradient(90deg, #a3262c, #d4a23a); border-radius: 999px; transition: width .6s; }
.stall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.stall-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-top: 4px solid #1f4d36; }
.stall-card img, .stall-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.stall-img { display: grid; place-items: center; font-size: 3rem; background: linear-gradient(135deg, #f7ecec, #eaf2ec); }
.stall-card h3 { margin-bottom: .2em; }
.activity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.activity-list li { display: flex; gap: 16px; background: #fff; border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); }
.act-time { flex: 0 0 150px; font-weight: 700; color: #a3262c; }
.helper-form { margin-top: 20px; background: var(--cream); padding: 18px; border-radius: var(--radius); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery figcaption { padding: 8px 10px; font-size: .88rem; }
.members-notes { border-left: 4px solid #1f4d36; }
.stall-shop { margin-bottom: 36px; }
.stall-shop h2 { border-bottom: 2px solid #f3e6e6; padding-bottom: 6px; }
@media (max-width: 600px) {
  .cd-unit { min-width: 56px; padding: 6px; } .cd-unit b { font-size: 1.5rem; }
  .xmas-hero .cd-unit { min-width: 64px; } .xmas-hero .cd-unit b { font-size: 1.8rem; }
  .activity-list li { flex-direction: column; gap: 4px; } .act-time { flex: none; }
}

.toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 600 .95rem var(--sans); cursor: pointer; color: var(--ink); }
.toggle .switch { flex: 0 0 38px; height: 22px; border-radius: 999px; background: #cfc8b8; position: relative; transition: .15s; }
.toggle .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.toggle.on { border-color: #b7dcc3; background: #f3faf5; }
.toggle.on .switch { background: var(--green); }
.toggle.on .switch::after { left: 19px; }
.toggle.off { color: var(--muted); }

/* ---------- Church look: crest, stained glass, liturgical colour ---------- */
body { background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 48v24M48 60h24' stroke='%23b8913a' stroke-opacity='.07' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.brand img { width: 68px; height: 68px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.brand strong { font-size: 1.6rem; letter-spacing: .01em; }
.brand small { font-variant: small-caps; letter-spacing: .08em; font-size: .9rem; color: var(--gold-dark); }
.site-header { border-bottom: 4px solid var(--season, var(--gold)); }
.season-chip { display: inline-block; background: var(--season, #2f7a4a); color: #fff; border-radius: 999px; padding: 1px 10px; margin-right: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

.hero { position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 80% 10%, rgba(232,201,121,.28), transparent 60%),
    linear-gradient(135deg, #16223d 0%, #1f3a6e 55%, #2b4c86 100%); }
.hero::before { content: ''; position: absolute; right: -40px; top: -30px; width: 560px; height: 710px;
  background: url("../img/stained-glass.svg") no-repeat center / contain; opacity: .38; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%); }
.hero.has-photo { background: linear-gradient(90deg, rgba(14,24,48,.94) 0%, rgba(18,32,64,.82) 42%, rgba(18,32,64,.45) 100%), var(--photo) center / cover no-repeat; }
.hero.has-photo::before { display: none; }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero-card { border-radius: 150px 150px 16px 16px / 80px 80px 16px 16px; padding-top: 44px; border-top: 0; box-shadow: 0 20px 40px rgba(0,0,0,.3), inset 0 0 0 3px var(--gold), inset 0 0 0 7px #fff, inset 0 0 0 8px rgba(184,145,58,.45); }
.hero-card h2 { text-align: center; }
.hero-card h2::before { content: '✠'; display: block; color: var(--gold); font-size: 1.3rem; margin-bottom: 2px; }
.today-line { color: #cfd9ec; font-size: .95rem; margin-top: -4px; }
.today-line a { color: #f0d894; }

.page-head { position: relative; overflow: hidden;
  background: linear-gradient(135deg, #16223d, #1f3a6e 60%, #2b4c86); border-bottom: 3px solid var(--gold); }
.page-head::after { content: ''; position: absolute; right: 4%; top: 50%; width: 180px; height: 180px; transform: translateY(-50%);
  background: url("../img/logo.svg") no-repeat center / contain; opacity: .12; pointer-events: none; }
.page-head[style*="--photo"] { background: linear-gradient(90deg, rgba(14,24,48,.92), rgba(18,32,64,.6)), var(--photo) center / cover no-repeat; }
.page-head .wrap { position: relative; z-index: 1; }

h2.rota-date, .section-head h2, .xmas-section > h2 { position: relative; }
.section-head h2::before, .notices-strip h2::before { content: '✠ '; color: var(--gold); font-size: .8em; }
.panel h3 { border-bottom: 1px solid var(--line); padding-bottom: .35em; }
.panel-blue h3, .prayer-panel h3, .raised h3 { border-bottom: 0; padding-bottom: 0; }

.prayer-panel { text-align: center; background: linear-gradient(180deg, #fffdf7, #f6efdd); border: 1px solid #ecd9a8; border-radius: 120px 120px 12px 12px / 60px 60px 12px 12px; padding-top: 26px; }
.prayer-panel img { margin: 0 auto 8px; width: 64px; height: 64px; }
.prayer { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; font-style: italic; color: #3a3326; }
.invocation { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 1.15rem; margin: 0; }

.footer-motto { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 8px 20px; text-align: left; }
.footer-motto p { margin: 0; font-family: var(--serif); font-size: 1.25rem; color: #f3d98d; line-height: 1.2; }
.footer-motto span { font-family: var(--sans); font-size: .82rem; color: #9eabc4; }
.site-footer { border-top: 4px solid var(--gold); }

@media (max-width: 900px) { .hero::before { opacity: .18; right: -160px; } }
@media (max-width: 760px) {
  .brand img { width: 50px; height: 50px; }
  .brand strong { font-size: 1.2rem; }
  .season-chip { margin-bottom: 2px; }
  .page-head::after { width: 110px; height: 110px; opacity: .08; }
}

.appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.appearance-preview { position: relative; height: 130px; border-radius: 10px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 8px; }
.appearance-preview img { width: 100%; height: 100%; object-fit: cover; }
.appearance-preview.is-logo img { width: 110px; height: 110px; object-fit: contain; }
.appearance-preview .tag { position: absolute; left: 8px; bottom: 8px; }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner, .two-col, .product-detail, .dash { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dash-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .dash-nav hr { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: inline-block; }
  .header-donate { display: none; }
  .site-nav { display: none; }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; }
  .site-nav .sub { position: static; display: block; box-shadow: none; border: 0; padding-left: 16px; }
  .grid-2, .grid-3, .footer-grid, .steps-inline { grid-template-columns: 1fr; }
  .hero-inner { padding-block: 40px; }
  .brand strong { font-size: 1.2rem; }
  .brand img { width: 42px; height: 42px; }
  .topbar-inner { font-size: .8rem; }
  .timetable th, .timetable td, .table th, .table td { padding: 10px; }
}

/* Keep the main menu on one line on typical desktops */
@media (min-width: 901px) {
  .site-nav > ul { justify-content: center; }
  .site-nav a { padding: 12px 11px; font-size: .93rem; }
}