/* Avondale Baptist Church — site styles
   Palette taken from the building itself: tile-roof clay, adobe wall, desert sky. */

:root {
  --ink: #1d2230;
  --ink-2: #474c59;
  --ink-3: #595d67;
  --paper: #f6f1e7;
  --paper-2: #ede4d3;
  --card: #fffcf6;
  --line: #d9cdb7;
  --clay: #b4532a;
  --clay-ink: #8e3b1a;
  --clay-soft: #f1d9c9;
  --sun: #e3a72f;
  --sage: #56664b;
  --sky: #2d5f8b;
  --night: #1e1a17;
  --night-2: #2b2420;
  --night-line: #40362f;
  --sky-deep: #25516f;
  --adobe: #efdcc8;
  --clay-text: #9a4320;
  --focus: var(--sky);
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-hover: .2s;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clay-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 650; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
blockquote { margin: 0; }
small { font-size: .875rem; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.narrow { max-width: 760px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay-ink); margin: 0 0 .9rem; display: block;
}
.label.light { color: var(--sun); }
.lede { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.muted { color: var(--ink-3); }
.serif { font-family: var(--serif); }
.clay { color: var(--clay); }
em.accent, .accent { font-style: italic; color: var(--clay); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; justify-content: center;
  font: 700 1rem/1.1 var(--sans); letter-spacing: .01em;
  padding: .95em 1.35em; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { color: var(--paper); background: #000; transform: translateY(-1px); }
.btn.clay { background: var(--clay); border-color: var(--clay); }
.btn.clay:hover { background: var(--clay-ink); border-color: var(--clay-ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.light:hover { background: #fff; color: var(--ink); }
.btn.small { padding: .6em 1em; font-size: .92rem; }
.btn svg { width: 1.1em; height: 1.1em; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.textlink { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.textlink::after { content: " →"; }

/* ---------- top bar + header ---------- */
.topbar { background: var(--night); color: #d8d4cb; font-size: .9rem; }
.topbar .wrap { display: flex; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; padding: .55rem 0; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .tb-left { display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; }
.topbar .tb-right { display: flex; gap: 1.25rem; align-items: center; }

.live { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }
.live .dot { width: .6em; height: .6em; border-radius: 50%; background: #8a8f99; flex: none; }
.live.on .dot { background: #e5483b; animation: breathe 2.4s ease-in-out infinite; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.brand img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.brand .bn { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.05; letter-spacing: -.01em; }
.brand .bn span { display: block; font-family: var(--sans); font-weight: 400; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; padding: .55em .8em; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper-2); }
.nav .btn { margin-left: .5rem; padding: .7em 1.2em; color: #fff; }
.nav .btn:hover { background: var(--clay-ink); }
.menu-btn { display: none; background: none; border: 2px solid var(--ink); border-radius: 999px; padding: .55em .95em; font: 700 .95rem var(--sans); color: var(--ink); cursor: pointer; }

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--paper); flex-direction: column; align-items: stretch; padding: 92px 24px 24px; gap: .25rem; z-index: 60; overflow-y: auto; box-shadow: -20px 0 60px rgba(0,0,0,.18); }
  .nav a { font-size: 1.25rem; padding: .7em .8em; }
  .nav .btn { margin: .75rem 0 0; }
  body.menu-open .nav { display: flex; animation: slidein .22s ease; }
  @keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
  body.menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(30,26,23,.45); z-index: 45; }
  .menu-btn { position: relative; z-index: 70; }
  .topbar .tb-left .hide-sm { display: none; }
}

/* ---------- the roofline: a row of clay tiles ---------- */

/* ---------- sections ---------- */
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section.tight { padding: clamp(40px, 5vw, 72px) 0; }
.section.sand { background: var(--paper-2); }
.section.ink { background: var(--night); color: #ebe6dc; }
.section.ink h2, .section.ink h3 { color: #fff; }
.section.ink a:not(.btn) { color: #f3c58c; }
.section.clayband { background: var(--clay); color: #fff7ef; }
.section.clayband h2 { color: #fff; }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.sec-head h2 { margin: 0; }
@media (max-width: 700px) { .sec-head { grid-template-columns: 1fr; } }

.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { margin-top: .5rem; }
.crumbs { font-size: .9rem; color: var(--ink-3); margin-bottom: 1.5rem; }
.crumbs a { color: var(--ink-3); }
.crumbs span[aria-hidden] { margin: 0 .4em; }

/* ---------- this sunday ---------- */
.sunday { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.sunday .wrap { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); }
.sunday .cell { padding: 1.6rem 1.4rem; border-left: 1px solid var(--line); }
.sunday .cell:first-child { border-left: 0; padding-left: 0; }
.sunday .t { font-family: var(--serif); font-size: 2.2rem; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.sunday .t small { font-size: 1rem; font-family: var(--sans); font-weight: 700; margin-left: .2em; }
.sunday h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.sunday p { margin: .4rem 0 0; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .sunday .wrap { grid-template-columns: 1fr 1fr; }
  .sunday .cell:first-child { grid-column: 1 / -1; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
  .sunday .cell:nth-child(2) { border-left: 0; padding-left: 0; }
  .sunday .cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- week board ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--night-line); border-radius: var(--radius); overflow: hidden; }
.day { padding: 1rem .9rem 1.2rem; border-left: 1px solid var(--night-line); min-height: 230px; position: relative; }
.day:first-child { border-left: 0; }
.day h3 { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #bdb3a8; margin: 0 0 .9rem; font-weight: 700; }
.day ul { list-style: none; padding: 0; margin: 0; }
.day li { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.35; color: #ebe6dc; }
.day li b { display: block; font-family: var(--serif); font-size: 1.05rem; color: #fff; font-weight: 650; }
.day li a { color: #fff; text-decoration: none; }
.day li a:hover { text-decoration: underline; }
.day li .when { color: #f3c58c; font-weight: 700; font-size: .85rem; }
.day.today { background: var(--night-2); }
.day.today h3 { color: var(--sun); }
.day.today h3::after { content: " · Today"; }
@media (max-width: 1000px) {
  .week { grid-template-columns: 1fr; }
  .day { border-left: 0; border-top: 1px solid var(--night-line); min-height: 0; display: grid; grid-template-columns: 110px 1fr; gap: 1rem; }
  .day:first-child { border-top: 0; }
  .day li { margin-bottom: .6rem; }
}

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card .ci { aspect-ratio: 16/10; background: var(--paper-2); overflow: hidden; }
.card .ci img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .ci img { transform: scale(1.03); }
.card .cb { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card h3 { font-size: 1.35rem; margin: 0; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.card .meta { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clay-ink); }
.card:hover { border-color: var(--ink-3); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
.split .ph { border-radius: var(--radius); overflow: hidden; }
.split .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- quote ---------- */
.quote { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 500; }
.quote::before { content: "“"; display: block; font-size: 4em; line-height: .6; color: var(--clay); height: .45em; }
.quote-by { margin-top: 1.4rem; font-weight: 700; }
.quote-by span { display: block; font-weight: 400; color: var(--ink-3); }
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }
.quotes blockquote { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.quotes blockquote p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; }
.quotes cite { font-style: normal; font-weight: 700; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- events ---------- */
.stub { display: grid; grid-template-columns: 112px 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; text-decoration: none; color: var(--ink); }
.stub:hover { border-color: var(--ink-3); }
.stub .date { background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem .5rem; text-align: center; position: relative; }
.stub .date::after { content: ""; position: absolute; right: -7px; top: 0; bottom: 0; width: 14px; background: radial-gradient(circle, var(--paper) 5px, transparent 5.5px) 0 0 / 14px 16px repeat-y; }
.stub .mo { font-size: .8rem; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: var(--sun); }
.stub .dd { font-family: var(--serif); font-size: 3rem; line-height: 1; font-weight: 650; }
.stub .dw { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fbe9dc; }
.stub .body { padding: 1.1rem 1.3rem 1.2rem 1.6rem; }
.stub h3 { font-size: 1.45rem; margin: 0 0 .3rem; }
.stub p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.stub .when { font-weight: 700; color: var(--clay-ink); font-size: .95rem; margin-bottom: .3rem; }
.stub.past { display: none; }

.feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; background: var(--night); color: #f1ece2; border-radius: var(--radius); overflow: hidden; }
.feature .fi { background: #15120f; display: flex; align-items: center; }
.feature .fi img { width: 100%; height: 100%; object-fit: cover; }
.feature .fb { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: .4rem; }
.feature h2 { color: #fff; margin: .2rem 0 .4rem; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.feature .big { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.feature ul { margin: .6rem 0 0; }
.feature a:not(.btn) { color: #f3c58c; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

.countdown { display: flex; gap: .6rem; margin: 1rem 0 .4rem; }
.countdown div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: .6rem .7rem; min-width: 74px; text-align: center; }
.countdown b { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.countdown span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #c8beb3; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; margin: 0; }
.facts dt { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); padding-top: .25rem; }
.facts dd { margin: 0; font-weight: 700; }
.section.ink .facts dt, .feature .facts dt { color: #b3a99e; }

/* ---------- info panels ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.panel.clay { background: var(--clay-soft); border-color: #e2bfa6; }
.panel h3 { margin-bottom: .6rem; }
.panel > :last-child { margin-bottom: 0; }
.aside-stack { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .with-aside { grid-template-columns: 1fr; } .aside-stack { position: static; } }

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose blockquote { border-left: 3px solid var(--clay); padding: .2rem 0 .2rem 1.2rem; font-family: var(--serif); font-size: 1.2rem; color: var(--ink-2); margin: 1.5rem 0; }
.prose iframe { max-width: 100%; }
.scripture { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--ink-2); border-left: 3px solid var(--clay); padding-left: 1.2rem; margin: 1.5rem 0; }
.scripture cite { display: block; font-style: normal; font-family: var(--sans); font-size: .9rem; font-weight: 700; margin-top: .5rem; color: var(--clay-ink); }

table.times { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
table.times th, table.times td { text-align: left; padding: .75rem .5rem .75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.times th { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; width: 8.5em; }

/* ---------- staff ---------- */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.person h3 { font-size: 1.35rem; margin: .9rem 0 .1rem; }
.person .role { font-weight: 700; color: var(--clay-ink); font-size: .95rem; margin-bottom: .5rem; }
.person p { font-size: .98rem; color: var(--ink-2); margin-bottom: .5rem; }
@media (max-width: 960px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- video ---------- */
.video { position: relative; aspect-ratio: 16/9; background: #15120f; border-radius: var(--radius); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vfacade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: var(--night-2); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; font: 700 1rem var(--sans); }
.vfacade::before { content: ""; width: 72px; height: 72px; border-radius: 50%; background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/32px no-repeat; }
.vfacade:hover::before { background-color: var(--clay-ink); }
.vlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.vlist figure { margin: 0; }
.vlist figcaption { font-weight: 700; margin-top: .5rem; font-size: 1rem; }
@media (max-width: 860px) { .vlist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vlist { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 1rem; padding: .75rem .85rem; border: 1px solid #b9ad97; border-radius: var(--radius); background: #fff; color: var(--ink); }
.form textarea { min-height: 130px; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.checks label { font-weight: 400; display: flex; gap: .45rem; align-items: center; margin: 0; }
.checks input { width: auto; }
.form .note { font-size: .9rem; color: var(--ink-3); }
.form-status { font-weight: 700; color: var(--sage); }

/* ---------- misc ---------- */
.pill { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .75em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.pill.clay { background: var(--clay-soft); color: var(--clay-ink); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.flyer { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.map { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: var(--radius); background: var(--paper-2); }
.yearhead { font-family: var(--serif); font-size: 1.8rem; margin: 2.5rem 0 .5rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.postlist { list-style: none; padding: 0; margin: 0; }
.postlist li { display: grid; grid-template-columns: 8.5em 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.postlist time { color: var(--ink-3); font-size: .95rem; padding-top: .15rem; }
.postlist a { font-weight: 700; text-decoration: none; color: var(--ink); }
.postlist a:hover { color: var(--clay-ink); text-decoration: underline; }
@media (max-width: 560px) { .postlist li { grid-template-columns: 1fr; gap: 0; } }
.notice { background: #fff7e3; border: 1px solid #ecd59c; border-radius: var(--radius); padding: 1rem 1.2rem; font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: #cfc6bb; font-size: 1rem; }
.site-footer .wrap { padding: 64px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer h2 { font-size: 1.9rem; color: #fff; margin-bottom: .6rem; }
.site-footer h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #a89e93; margin-bottom: .9rem; }
.site-footer a { color: #f1ece2; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--night-line); display: inline-flex; align-items: center; justify-content: center; }
.social a:hover { background: var(--night-2); text-decoration: none; }
.social svg { width: 18px; height: 18px; fill: #f1ece2; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--night-line); margin-top: 3rem; padding-top: 1.5rem; font-size: .9rem; color: #a89e93; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   v2 — warmer fields, a sense of place, and quiet motion.
   Motion language: type is SET, the place is BUILT, the page KNOWS THE TIME.
   Every hidden starting state lives under html.motion (added by site.js only
   when JS runs and motion is allowed), so nothing is ever hidden without JS.
   ===================================================================== */

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='20'%3E%3ClinearGradient id='a' x2='1'%3E%3Cstop offset='0' stop-color='%23d4764a'/%3E%3Cstop offset='.5' stop-color='%23b4532a'/%3E%3Cstop offset='1' stop-color='%23873617'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x2='1'%3E%3Cstop offset='0' stop-color='%23c8683c'/%3E%3Cstop offset='.5' stop-color='%23a94b24'/%3E%3Cstop offset='1' stop-color='%237d3114'/%3E%3C/linearGradient%3E%3Crect width='52' height='4' fill='%236f2c12'/%3E%3Cpath d='M1 2h24v6a12 12 0 0 1-24 0z' fill='url(%23a)'/%3E%3Cpath d='M27 2h24v6a12 12 0 0 1-24 0z' fill='url(%23b)'/%3E%3C/svg%3E");
}

/* ---------- foundation ---------- */
.topbar, .section.ink, .section.sky, .site-footer, .feature { --focus: var(--sun); }
.sunday, .section.clayband, .es-band { --focus: #fff; }
.panel.clay { color: var(--ink); }
.label { font-size: .875rem; letter-spacing: .12em; color: var(--clay-text); }
.dek { font-size: 1.15rem; color: var(--ink-2); margin: .5rem 0 0; max-width: 52ch; }
.sec-head .textlink { justify-self: start; }
h1 em, h2 em { font-style: italic; font-weight: 600; color: var(--clay); letter-spacing: -.01em; }
.section.ink h2 em, .section.sky h2 em { color: #f3c58c; }
.countdown span { font-size: .85rem; }

.section.sky { background: var(--sky-deep); color: #f6f1e7; }
.section.sky h2, .section.sky h3 { color: #fff; }
.section.sky .label, .section.sky a:not(.btn) { color: #f3c58c; }
.section.sky .lede, .section.sky .dek { color: #e6edf1; }
.section.sky .btn:not(.ghost) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section.sky .btn.ghost { color: #fff; border-color: #fff; }
.section.sky .btn.ghost:hover { background: #fff; color: var(--ink); }
.section.adobe { background: var(--adobe); position: relative; isolation: isolate; }
.section.adobe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) 0 0 / 260px; opacity: .1; mix-blend-mode: multiply; }

@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle  { from { transform: scale(1.06); } }

/* ---------- one photo grade, grain, matted flyers ---------- */
.ph img, .card .ci img, .bs-ph img, .arch img, .mrow-ph img, .horizon img, .pano img, .oline .th img, .people-photo img
  { filter: sepia(.1) saturate(.9) contrast(1.04); }
.person .pic img { filter: sepia(.12) saturate(.72) contrast(1.04); }
.ph, .bs-ph, .arch, .mrow-ph, .horizon, .pano, .card .ci, .people-photo { position: relative; isolation: isolate; margin: 0; }
.ph::after, .bs-ph::after, .arch::after, .mrow-ph::after, .horizon::after, .pano::after, .card .ci::after, .people-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: var(--grain) 0 0 / 200px; opacity: .16; mix-blend-mode: overlay;
  box-shadow: inset 0 0 0 1px rgba(30, 26, 23, .12); }
.card .ci.is-flyer { background: var(--night); padding: 10px; }
.card .ci.is-flyer img { object-fit: contain; filter: none; }
.card .ci.is-flyer::after { display: none; }
.card .ci img { transition: none; }
.card:hover .ci img { transform: none; }
.develop { background: var(--clay-soft); }
@media (prefers-reduced-motion: no-preference) {
  .motion .develop img { opacity: 0; transition: opacity 1.1s var(--ease-out); }
  .motion .develop.in img { opacity: 1; }
}

/* ---------- barrel-tile roofline, laid as it comes into view ---------- */
.roof { height: 20px; position: relative; z-index: 1; background: var(--tile) 0 0 / 52px 20px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(70, 28, 10, .28)); }
.roof + .section, .roof + .site-footer { box-shadow: inset 0 14px 14px -14px rgba(70, 28, 10, .25); }
@media (max-width: 600px) { .roof { height: 15px; background-size: 39px 15px; } }
@media (prefers-reduced-motion: no-preference) {
  .motion .roof { clip-path: inset(0 100% -12px 0); transition: clip-path 1.2s var(--ease-io); }
  .motion .roof.in { clip-path: inset(0 0 -12px 0); }
}

/* ---------- home hero: the motto over a big-sky panorama ---------- */
.hero { padding: clamp(32px, 5vw, 72px) 0 0; }
/* Full-bleed without 100vw (which includes the scrollbar): outer columns are the page gutters. */
.hero-top { display: grid; align-items: end;
  grid-template-columns: [full-start] minmax(var(--gut), 1fr) [text-start] minmax(0, calc(var(--wrap) - 23rem)) [side-start] minmax(17rem, 23rem) [text-end] minmax(var(--gut), 1fr) [full-end]; }
.hero-top > .label { grid-column: text-start / text-end; grid-row: 1; }
.motto { grid-column: text-start / side-start; grid-row: 2; margin: 0; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .94; letter-spacing: -.035em; }
.motto > span { display: block; }
.motto a { color: inherit; text-decoration: none; }
.motto a:hover, .motto a:focus-visible { color: var(--clay); }
.motto .accent { font-style: italic; font-weight: 600; color: var(--clay); }
.motto .accent a:hover, .motto .accent a:focus-visible { color: var(--clay-ink); }
.hero-side { grid-column: side-start / text-end; grid-row: 2; padding: 0 0 .5rem clamp(24px, 4vw, 64px); }
.hero-side .lede { max-width: 40ch; margin-bottom: 0; }
.horizon { grid-column: full-start / full-end; grid-row: 3; position: relative; overflow: hidden; height: clamp(220px, 30vw, 460px);
  margin: clamp(28px, 4vw, 56px) 0 0; background: #6f9fd2; }
.horizon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 33% 80%; }
.horizon figcaption { position: absolute; z-index: 2; top: clamp(14px, 3vw, 40px); right: max(var(--gut), (100% - var(--wrap)) / 2);
  max-width: 18ch; text-align: right; color: var(--night); font: italic 600 clamp(1.15rem, 2.6vw, 2.2rem)/1.1 var(--serif); }
.horizon figcaption span { display: block; margin-top: .35rem; font: 700 .875rem/1.3 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 1101px) { .motto > span:nth-child(2) { padding-left: .5em; } }
@media (max-width: 1100px) {
  .hero-top { grid-template-columns: [full-start] var(--gut) [text-start side-start] minmax(0, 1fr) [text-end] var(--gut) [full-end]; }
  .motto { grid-column: text-start / text-end; }
  .horizon { margin-top: 1.5rem; }
  .hero-side { grid-column: text-start / text-end; grid-row: 4; padding: 1.75rem 0 clamp(40px, 6vw, 64px); }
}
@media (max-width: 600px) { .horizon figcaption { left: var(--gut); right: auto; text-align: left; } }
@keyframes line-up { from { transform: translateY(108%); } }
@media (prefers-reduced-motion: no-preference) {
  .motto > span { overflow: hidden; padding: 0 .08em .14em; margin: 0 -.08em -.14em; }
  .motto > span > a { display: inline-block; animation: line-up .9s var(--ease-out) backwards; }
  .motto > span:nth-child(2) > a { animation-delay: .12s; }
  .motto > span:nth-child(3) > a { animation-delay: .24s; }
  .hero-top > .label { animation: fade-up .6s var(--ease-out) backwards; }
  .hero-side { animation: fade-up .7s .45s var(--ease-out) backwards; }
  .horizon img { animation: settle 2.4s .1s var(--ease-out) backwards; }
  .horizon figcaption { animation: fade-up .8s 1s var(--ease-out) backwards; }
}

/* ---------- clay Sunday strip + live now/next flags ---------- */
.sunday { --line: rgba(255, 247, 239, .32); background: var(--clay); color: #fff7ef; border: 0; }
.sunday .cell { border-left-color: rgba(255, 247, 239, .32); }
.sunday .label, .sunday p, .sunday a { color: #fff7ef; }
.sunday h3, .sunday .t { color: #fff; }
.sunday a { text-decoration-color: rgba(255, 247, 239, .7); }
@media (max-width: 900px) {
  .sunday .cell:first-child { border-bottom-color: rgba(255, 247, 239, .32); }
  .sunday .cell:nth-child(4) { border-top-color: rgba(255, 247, 239, .32); }
}
.flag { display: inline-block; margin-left: .5em; padding: .2em .55em .15em; border-radius: 3px; background: var(--sun); color: var(--night);
  font: 700 .8rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em; white-space: nowrap; }
.flag.next { background: none; color: var(--sun); box-shadow: inset 0 0 0 1.5px currentColor; }
.sunday .flag.next { color: #fff; }
.flag.now::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; border-radius: 50%;
  background: #b8321f; vertical-align: .05em; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; transform: scale(.7); } }
.live.soon .dot { background: var(--sun); animation: breathe 2.4s ease-in-out infinite; }

/* ---------- motto rows (replace the three pillars) ---------- */
.mrows { border-top: 2px solid var(--ink); }
.mrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2.4fr); gap: clamp(20px, 3.5vw, 56px);
  align-items: end; padding: clamp(28px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); }
.mrow-t { margin: 0; align-self: start; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .9; letter-spacing: -.045em; }
.mrow-t .num { display: block; margin-bottom: .7rem; font: italic 500 1.1rem var(--serif); letter-spacing: 0; color: var(--clay-text); }
.mrow:nth-child(2) .mrow-t { font-style: italic; font-weight: 600; color: var(--clay); }
.mrow-b p { color: var(--ink-2); max-width: 40ch; }
.mrow-b ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.mrow-b li { margin: 0; border-bottom: 1px solid var(--line); }
.mrow-b li a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: .5rem 0; font-weight: 700; color: var(--ink); text-decoration: none; }
.mrow-b li a::after { content: "→"; color: var(--clay); }
.mrow-b li a:hover { color: var(--clay-text); }
.mrow-ph { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.mrow-ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .mrow { grid-template-columns: minmax(0, 1fr) 36%; align-items: start; }
  .mrow-t { grid-column: 1 / -1; }
  .mrow-b { grid-column: 1; grid-row: 2; }
  .mrow-ph { grid-column: 2; grid-row: 2; }
}

/* ---------- impact: Angel Tree photo to the edge, a giant 300+ ---------- */
.bleed-split { display: grid; background: var(--paper); --knock: var(--paper);
  grid-template-columns: [full-start] minmax(var(--gut), 1fr) [wrap-start] minmax(0, 620px) [mid] minmax(0, 620px) [wrap-end] minmax(var(--gut), 1fr) [full-end]; }
.bs-ph { grid-column: full-start / mid; grid-row: 1; margin: 0; min-height: clamp(420px, 44vw, 640px); }
.bs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-copy { grid-column: mid / wrap-end; grid-row: 1; align-self: center; position: relative; z-index: 2;
  padding: clamp(48px, 7vw, 104px) 0 clamp(48px, 7vw, 104px) clamp(28px, 4vw, 64px); }
.bleed-split.flip .bs-ph { grid-column: mid / full-end; }
.bleed-split.flip .bs-copy { grid-column: wrap-start / mid; padding: clamp(48px, 7vw, 104px) clamp(28px, 4vw, 64px) clamp(48px, 7vw, 104px) 0; }
.mega { margin: 0 0 .12em calc(-1 * clamp(28px, 4vw, 64px) - .28em);
  font: 700 clamp(6rem, 15vw, 13rem)/.82 var(--serif); letter-spacing: -.06em; color: var(--clay); font-variant-numeric: lining-nums;
  text-shadow: 5px 0 var(--knock), -5px 0 var(--knock), 0 5px var(--knock), 0 -5px var(--knock),
    4px 4px var(--knock), -4px -4px var(--knock), 4px -4px var(--knock), -4px 4px var(--knock); }
.mega .slot { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .1em .06em; margin: -.04em -.1em -.06em; }
.mega .slot > span { display: inline-block; }
.mega-cap { font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--serif); max-width: 24ch; }
.ledger { list-style: none; padding: 0; margin: 2.2rem 0 0; border-top: 2px solid var(--ink); }
.ledger li { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; margin: 0; padding: .9rem 0; }
.ledger li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.ledger li:nth-child(2) { --n: 1; } .ledger li:nth-child(3) { --n: 2; }
.ledger b { font: 650 2.2rem/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 860px) {
  .bleed-split { display: block; }
  .bs-ph { min-height: 0; height: 300px; }
  .bs-copy, .bleed-split.flip .bs-copy { padding: 0 var(--gut) 56px; }
  .impact .bs-copy { padding-top: 0; }
  .mega { margin: -.42em 0 .15em; }
  .bleed-split.flip .bs-copy { padding-top: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion .mega .slot > span { transition: transform 1s var(--ease-out) .1s; }
  .motion .mega:not(.in) .slot > span { transform: translateY(105%); }
  .motion .ledger li::after { transition: transform .9s var(--ease-out) calc(var(--n, 0) * 120ms + .3s); }
  .motion .ledger:not(.in) li::after { transform: scaleX(0); }
}

/* ---------- week board as a desert evening ---------- */
.section.ink { position: relative; }
.section.ink.ridge { margin-top: clamp(36px, 5vw, 64px); }
.section.ink.ridge::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(36px, 5vw, 64px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath fill='%233b302a' d='M0 64V40l70-10 50 6 60-18 40 8 55-20 45 12 70-6 40 14 60-10 80 16 55-6 60 12 70-8 90 14 60-4 80 10 70-6 75 8 70-2V64z'/%3E%3Cpath fill='%231e1a17' d='M0 64V50l90-6 70 8 80-14 60 10 90-12 70 12 110-4 80 10 90-8 70 6 100-6 90 8 100-4 100 2V64z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; }
.day { position: relative; }
.day h3 { color: #bdb3a8; font-size: .95rem; }
.day li { font-size: 1.02rem; position: relative; }
.day li .when { font-size: .95rem; }
.day.today { background: linear-gradient(180deg, rgba(227, 167, 47, .16), rgba(227, 167, 47, 0) 60%), var(--night-2); }
.day.today::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sun); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .motion .day.today::before { transition: transform .9s var(--ease-out) .3s; }
  .motion .week:not(.in) .day.today::before { transform: scaleX(0); }
  .week.is-picking .day.is-shown { animation: fade-up .25s var(--ease-out); }
}
.daypick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: .75rem; }
.daypick[hidden] { display: none; }
.daypick button { position: relative; min-height: 48px; padding: 0; cursor: pointer; font: 700 1rem var(--sans); color: #ebe6dc;
  background: var(--night-2); border: 1px solid var(--night-line); border-radius: 4px; }
.daypick button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.daypick button.is-today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--sun); }
.daypick .dp-all { grid-column: 1 / -1; min-height: 44px; background: transparent; }
@media (min-width: 1001px) { .daypick { display: none !important; } }
@media (max-width: 1000px) {
  .day { grid-template-columns: 1fr; gap: .4rem; }
  .week.is-picking .day:not(.is-shown) { display: none; }
  .week.is-picking .day.is-shown { border-top: 0; }
  .day li a::after { content: ""; position: absolute; inset: -.35rem 0; }
}

/* ---------- home story under the roof ---------- */
.story-q { margin: 0 0 2rem; max-width: 32ch; }
.story-q .quote { font-size: clamp(1.8rem, 3.8vw, 3.2rem); line-height: 1.16; }
.story .quote-by span { color: var(--ink-2); }

/* ---------- livestream poster + Español band ---------- */
.vfacade { background: linear-gradient(180deg, rgba(30, 26, 23, .3), rgba(30, 26, 23, .72)), var(--poster, none) center 40% / cover, var(--night-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.section.sky .video { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.es-band { background: var(--clay); color: #fff7ef; --knock: var(--clay); }
.es-band .label { color: #fff7ef; }
.es-band h2 { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: .3em; }
.es-band h2 em { color: #fff; }
.es-band .bs-ph img { object-position: 50% 80%; }
.es-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .4); }
.es-times div { padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.es-times dt { font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.es-times dd { margin: 0; font: 600 1.4rem/1.2 var(--serif); color: #fff; }
@media (max-width: 480px) { .es-times { grid-template-columns: 1fr; } }

/* ---------- interior heroes: arched window or panorama, late-sun wash ---------- */
.page-hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--line);
  background: radial-gradient(110% 90% at 100% 0%, rgba(227, 167, 47, .13), transparent 60%), var(--paper); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) 0 0 / 260px; opacity: .08; mix-blend-mode: multiply; }
.page-hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.8rem); max-width: 15ch; }
.dateline { font: italic 500 1.3rem/1.3 var(--serif); color: var(--clay-text); margin: 0 0 .5rem; }
.page-hero.has-arch { padding-bottom: 0; }
.page-hero.has-arch .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 380px); gap: clamp(24px, 5vw, 80px); align-items: end; }
.page-hero.has-arch .ph-text { padding-bottom: clamp(32px, 4vw, 56px); }
.arch { aspect-ratio: 4 / 5; overflow: hidden; background: var(--clay-soft); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-pano { padding-bottom: 0; border-bottom: 0; }
.pano { margin-top: clamp(32px, 4vw, 56px); height: clamp(150px, 22vw, 340px); overflow: hidden; }
.pano img { width: 100%; height: 100%; object-fit: cover; object-position: 33% 75%; }
.lead-first > p:first-child { font: 400 clamp(1.3rem, 2vw, 1.55rem)/1.45 var(--serif); color: var(--ink); }
@media (max-width: 760px) {
  .page-hero.has-arch .wrap { grid-template-columns: 1fr; }
  .page-hero.has-arch .ph-text { padding-bottom: 0; }
  .page-hero .arch { aspect-ratio: 3 / 2; margin-top: 1.5rem; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ph-text > * { animation: fade-up .7s var(--ease-out) backwards; }
  .ph-text > :nth-child(2) { animation-delay: .06s; }
  .ph-text > :nth-child(3) { animation-delay: .12s; }
  .ph-text > :nth-child(n+4) { animation-delay: .18s; }
  .arch img, .pano img { animation: settle 2.2s var(--ease-out) backwards; }
}

/* ---------- ministries hub: photo-led rows ---------- */
.olist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); border-top: 2px solid var(--ink); }
.oline { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.oline .th { width: 76px; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; border-radius: 38px 38px 0 0; position: relative; }
.oline .th img { width: 100%; height: 100%; object-fit: cover; }
.oline .ini { background: var(--clay-soft); color: var(--clay-text); font: italic 600 2rem var(--serif); }
.oline b { display: block; font: 650 1.35rem/1.15 var(--serif); }
.oline i { display: block; margin: .2rem 0 .3rem; font: italic 500 1.05rem/1.35 var(--serif); color: var(--clay-text); }
.oline .ot > span { display: block; font-size: 1rem; color: var(--ink-2); }
.oline:hover b, .oline:focus-visible b { text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 4px; }
.olist.big .oline { grid-template-columns: 132px minmax(0, 1fr); }
.olist.big .th { width: 132px; border-radius: 66px 66px 0 0; }
.section.sky .olist { border-top-color: #fff; }
.section.sky .oline { color: #fff; border-bottom-color: rgba(255, 255, 255, .25); }
.section.sky .oline i { color: #f3c58c; }
.section.sky .oline .ot > span { color: #e6edf1; }
.section.sky .oline:hover b { text-decoration-color: #f3c58c; }
@media (max-width: 760px) {
  .olist { grid-template-columns: 1fr; }
  .olist.big .oline { grid-template-columns: 96px minmax(0, 1fr); }
  .olist.big .th { width: 96px; border-radius: 48px 48px 0 0; }
}

/* ---------- about: timeline on the roofline, warm portraits ---------- */
.person .pic { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--clay-soft); }
.person .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.person .pic.ph { display: flex; align-items: center; justify-content: center; font: italic 600 3rem var(--serif);
  color: var(--clay-text); box-shadow: inset 0 4px 0 var(--clay); }
.person.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px);
  align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.person.lead .pic { aspect-ratio: 1; }
.person.lead h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
.person.lead p { font-size: 1.15rem; max-width: 48ch; }
@media (max-width: 700px) { .person.lead { grid-template-columns: 1fr; } }
.people-photo { margin: 0 0 2.5rem; border-radius: 3px; overflow: hidden; }
.people-photo img { width: 100%; max-height: 560px; object-fit: cover; object-position: 50% 25%; }
.timeline { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(16px, 2vw, 32px); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 3.6rem; height: 20px;
  background: var(--tile) 0 0 / 52px 20px repeat-x; filter: drop-shadow(0 3px 2px rgba(70, 28, 10, .25)); }
.timeline li { margin: 0; }
.timeline .yr { display: block; height: 3.6rem; font: 650 clamp(2rem, 3.4vw, 3rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.timeline h3 { font-size: 1.3rem; margin: 2.6rem 0 .3rem; }
.timeline p { font-size: 1rem; color: var(--ink-2); margin: 0; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
  .timeline .yr { height: auto; grid-row: span 2; font-size: 1.7rem; }
  .timeline h3 { margin: 0 0 .2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion .timeline::before { clip-path: inset(0 0 -12px 0); transition: clip-path 1.6s var(--ease-io) .2s; }
  .motion .timeline:not(.in)::before { clip-path: inset(0 100% -12px 0); }
}

/* ---------- events: month agenda, clay stubs, rolling countdown ---------- */
.stub .date { background: var(--clay-ink); }
.stub .mo { color: #ffe2b8; }
.stub .dw { color: #fbe9dc; }
.stub .when { font: 650 1.05rem/1.3 var(--serif); color: var(--clay-text); }
.stub .where { display: block; font: 400 1rem/1.4 var(--sans); color: var(--ink-2); }
.feature .dateline { color: #f3c58c; }
@media (max-width: 560px) {
  .stub { grid-template-columns: 78px minmax(0, 1fr); }
  .stub .date { padding: .9rem .25rem; }
  .stub .dd { font-size: 2.4rem; }
  .stub .mo, .stub .dw { font-size: .85rem; }
  .stub .body { padding: 1rem 1rem 1.1rem 1.3rem; }
  .stub h3 { font-size: 1.3rem; }
}
.agenda { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px); border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.agenda + .agenda { margin-top: 3rem; }
.agenda[hidden] { display: none; }
.month { position: sticky; top: 100px; align-self: start; margin: 0; font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: .9; letter-spacing: -.045em; }
.month small { display: block; margin-top: .6rem; font: 700 .9rem var(--sans); letter-spacing: .14em; color: var(--clay-text); }
.agenda-list { display: grid; gap: 1rem; }
@media (max-width: 760px) { .agenda { grid-template-columns: 1fr; } .month { position: static; font-size: 2.4rem; } }
@keyframes roll { from { opacity: 0; transform: translateY(-.35em); } }
.countdown b.roll { animation: roll .45s var(--ease-out); }
.countdown[hidden] { display: none; }

/* ---------- interaction feel: tiles press, stubs tear, arrows lean ---------- */
.btn { border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
  transition: transform var(--t-hover) var(--ease-out), background-color .15s, color .15s; }
.btn:hover { transform: none; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22); transition-duration: .06s; }
.btn.ghost { box-shadow: none; }
.actions .btn { min-height: 48px; }
.menu-btn { border-radius: 4px; min-height: 44px; }
.nav a { border-radius: 0; }
.nav a:hover, .nav a[aria-current="page"] { background: none; text-decoration: underline; text-decoration-thickness: 3px;
  text-decoration-color: var(--clay); text-underline-offset: 10px; }
.nav .btn:hover { text-decoration: none; }
.stub { overflow: visible; transition: border-color var(--t-hover); }
.stub .date { border-radius: 5px 0 0 5px; transform-origin: 0 100%; transition: transform .35s var(--ease-out); }
.stub:hover, .stub:focus-visible { border-color: var(--ink-3); }
.stub:hover .date, .stub:focus-visible .date { transform: rotate(-2.5deg) translate(-2px, 1px); }
.mrow-b li a::after, .textlink::after { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }
.mrow-b li a:hover::after, .mrow-b li a:focus-visible::after,
.textlink:hover::after, .textlink:focus-visible::after { transform: translateX(5px); }
.vfacade::before { transition: transform .3s var(--ease-out), background-color .2s; }
.vfacade:hover::before, .vfacade:focus-visible::before { transform: scale(1.08); }
@media (hover: none) { .stub:hover .date, .mrow-b li a:hover::after, .textlink:hover::after { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: topbar; }
  .site-header { view-transition-name: masthead; }
  ::view-transition-old(root) { animation: vt-out .16s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-in .28s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- phone chrome for seniors ---------- */
.nav-extra { display: none; }
@media (max-width: 960px) {
  body.menu-open { overflow: hidden; }
  .nav { padding-top: 96px; }
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--tile) 0 0 / 52px 20px repeat-x; }
  .nav > a:not(.btn) { display: flex; align-items: center; min-height: 56px; padding: .5rem .25rem; border-bottom: 1px solid var(--line);
    font: 650 1.5rem/1.2 var(--serif); }
  .nav > a:not(.btn):hover, .nav > a[aria-current="page"] { text-underline-offset: 6px; }
  .nav-extra { display: block; margin-top: auto; padding-top: 1.5rem; font-size: 1rem; color: var(--ink-2); }
  .nav-extra p { margin: 0 0 .75rem; }
  .nav-extra a:not(.btn) { display: inline; padding: 0; font: inherit; font-weight: 700; }
  .nav-extra .btn { width: 100%; color: var(--ink); }
}
@media (max-width: 600px) {
  .topbar .tb-left { display: none; }
  .topbar .wrap { flex-wrap: nowrap; padding: 0; }
  .topbar .tb-right { width: 100%; justify-content: space-between; gap: .75rem; }
  .topbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar a[href^="tel:"]::before { content: "Call\00a0"; color: var(--sun); font-weight: 700; }
  .site-header .wrap { min-height: 64px; }
  .brand img { width: 40px; height: 40px; }
  .brand .bn { font-size: 1.1rem; }
  .menu-btn { min-width: 72px; justify-content: center; }
  .site-footer li { margin: 0; }
  .site-footer li a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--night-line); }
  .social a { width: 48px; height: 48px; }
}


/* ---------- v2 polish ---------- */
.story-q { max-width: none; }
.story-q .quote { max-width: 26ch; }
.oline .th.logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.oline .th.logo img { object-fit: contain; padding: 6px; }
.logo-mark { max-width: 180px; max-height: 160px; object-fit: contain; margin-bottom: 1rem; border-radius: 4px; }
@media (max-width: 860px) {
  .impact .bs-copy { padding-top: 1.75rem; }
  .mega { margin: .08em 0 .15em; }
}

.story .label { margin-bottom: 2.25rem; }
.story-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.avenue { list-style: none; margin: 0; padding: 0 0 0 1.75rem; position: relative; }
.avenue::before { content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem; width: 2px; background: var(--clay); transform-origin: 50% 0; }
.avenue li { position: relative; margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--ink-2); }
.avenue li:last-child { margin-bottom: 0; }
.avenue li::before { content: ""; position: absolute; left: -1.75rem; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--adobe); box-shadow: inset 0 0 0 2px var(--clay); }
.avenue li:last-child::before { background: var(--clay); }
.avenue b { display: block; font: 650 1.7rem/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
.avenue li:nth-child(2) { --i: 1; } .avenue li:nth-child(3) { --i: 2; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .motion .avenue::before { transition: transform 1.4s var(--ease-io) .2s; }
  .motion .avenue:not(.in)::before { transform: scaleY(0); }
  .motion .avenue li { transition: opacity .6s var(--ease-out) calc(var(--i, 0) * .35s + .3s); }
  .motion .avenue:not(.in) li { opacity: 0; }
}
.section.ink .day li a { color: #fff; }
.section.ink .day li a:hover { text-decoration: underline; text-decoration-color: var(--sun); }
@media (min-width: 1001px) {
  .day h3 { min-height: 2.3em; }
  .day.today h3::after { content: "Today"; display: block; margin-top: .15em; }
}
.oline .th.ini { background: var(--clay); color: #fff7ef; }
.olist.big .th.ini { font-size: 3.2rem; }
.vfacade:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--night); }
@media (prefers-reduced-motion: no-preference) {
  .motto a:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
}
.foot-motto span { display: block; }
#reach .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: end; }
#reach .sec-head { margin-bottom: 0; }
#reach .olist { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  #reach .wrap { grid-template-columns: 1fr; }
  #reach .sec-head { margin-bottom: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .live .dot, .flag.now::before { animation: none; } }


/* ---------- bulletin board: the church's current flyers, tap to enlarge ---------- */
.board { column-count: 3; column-gap: 24px; }
@media (max-width: 900px) { .board { column-count: 2; } }
@media (max-width: 560px) { .board { column-count: 1; } }
.flyer-card { display: block; break-inside: avoid; margin: 0 0 24px; padding: 8px 8px 0; background: #fff;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; }
.flyer-card img { display: block; width: 100%; height: auto; }
.flyer-card .fc-t { display: block; padding: .75rem .35rem .8rem; font: 700 1.05rem/1.3 var(--sans); }
.flyer-card .fc-t small { display: block; margin-top: .15rem; font-weight: 400; font-size: 1rem; color: var(--ink-2); }
.flyer-card .fc-zoom { position: absolute; top: 16px; right: 16px; padding: .35em .65em; border-radius: 3px;
  background: rgba(29, 34, 48, .82); color: #fff; font: 700 .85rem/1.2 var(--sans); }
.flyer-card:hover, .flyer-card:focus-visible { border-color: var(--ink-3); }
.flyer-card:hover .fc-t, .flyer-card:focus-visible .fc-t { text-decoration: underline; text-underline-offset: 3px; }
.flyer-card.past { display: none; }

dialog.lightbox { border: 0; padding: 0; margin: auto; width: min(96vw, 1100px); max-width: none; max-height: none; background: transparent; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(20, 18, 16, .88); }
.lb-inner { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lb-inner img { display: block; max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; background: #fff; padding: 8px; }
.lb-title { margin: 0; color: #fff; font: 700 1.1rem/1.35 var(--sans); text-align: center; }
.lb-bar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.lb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: .55em 1.1em;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 3px; background: transparent; color: #fff; font: 700 1rem var(--sans); cursor: pointer; text-decoration: none; }
.lb-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lb-btn.primary { background: #fff; color: var(--ink); border-color: #fff; }
.lb-btn.primary:hover { background: var(--paper); color: var(--ink); }
.lb-close { position: fixed; top: 12px; right: 12px; background: rgba(20, 18, 16, .6); }
dialog.lightbox :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  dialog.lightbox[open] .lb-inner { animation: lb-in .22s var(--ease-out, ease-out); }
  @keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
}


/* ---------- parity additions: news line, learn-more band, blog list, member photos ---------- */
.past { display: none !important; }
.newsline { margin: 0; background: var(--ink); text-align: center; }
.newsline a { display: block; padding: .8rem var(--gut); color: #fff; font-weight: 700; text-decoration: none; }
.newsline a:hover { text-decoration: underline; }
.learn-more { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learn-more h2 { margin-bottom: .2em; }
.learn-more .actions { justify-content: center; }
.postlist li > div { min-width: 0; }
.postlist li p { margin: .25rem 0 0; font-size: .98rem; color: var(--ink-2); }
.postlist .pl-cat { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clay-text, var(--clay-ink)); margin-top: .15rem; }
.vlist figcaption small { display: block; font-weight: 400; color: var(--ink-3); }
.flyer-link { display: block; margin: 0 0 1.25rem; }
.flyer-link img { display: block; }
.prose .flyer-link img { margin: 0; }
.quotes blockquote .q-pic { width: 120px; height: 140px; object-fit: cover; object-position: 50% 20%; float: right; margin: 0 0 .75rem 1rem; border: 6px solid #fff; outline: 1px solid var(--line); }
.issue img { max-width: 100%; height: auto; }
.issue iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 560px) { .quotes blockquote .q-pic { width: 96px; height: 112px; } }

@media print {
  .topbar, .site-header, .site-footer, .roof, .actions { display: none !important; }
  body { background: #fff; }
}

/* ---------- prints: real photos from church life, each with a short caption ---------- */
.prints { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(18px, 2.4vw, 32px); margin: 2.25rem 0 0; }
.print { margin: 0; display: flex; flex-direction: column; }
.print .pi { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.motion .print .develop img { transition: opacity 1.1s var(--ease-out), transform .9s var(--ease-out); }
.print figcaption { margin-top: .6rem; font: italic 500 1.08rem/1.35 var(--serif); color: var(--ink-2); text-wrap: balance; }
@media (hover: hover) { .print:hover img { transform: scale(1.04); } }
.prints.n1 { grid-template-columns: minmax(0, 1fr); }
.snapshots .prints { margin-top: 1.25rem; }
.snapshots .prints.n2 { max-width: 900px; }
.snapshots .prints.n1 { max-width: 560px; }
.aside-stack .prints, .panel .prints { margin: 0 0 1.25rem; }
.prints.about-prints { margin-top: clamp(40px, 5vw, 64px); }
/* home: one large print and four small ones */
.prints.mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prints.mosaic .print:first-child { grid-column: span 2; grid-row: span 2; }
.prints.mosaic .print:first-child .pi { flex: 1; aspect-ratio: auto; min-height: 260px; }
.prints.mosaic .print:first-child img { position: absolute; inset: 0; }
@media (max-width: 760px) {
  .prints.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prints.mosaic .print:first-child { grid-row: auto; }
  .prints.mosaic .print:first-child .pi { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .prints.mosaic figcaption { font-size: 1rem; }
}
.life .sec-head .scripture { margin-bottom: 0; max-width: 46ch; }

/* ---------- /review/ guide (preview site only) ---------- */
.review-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 0; list-style: none; counter-reset: step; }
.review-steps li { counter-increment: step; padding: 1.25rem 1.25rem 1.4rem; background: var(--card); border: 1px solid var(--line); font-size: 1.125rem; }
.review-steps li::before { content: counter(step); display: block; font: 600 2.2rem/1 var(--serif); color: var(--clay); margin-bottom: .6rem; }
.review-qs h3 { margin: 2rem 0 .6rem; }
.review-qs li { font-size: 1.125rem; margin-bottom: .5rem; }
@media (max-width: 760px) { .review-steps { grid-template-columns: 1fr; } }

/* ---------- blog archive folded by year; event photos ---------- */
.yearfold { border-top: 1px solid var(--line); }
.yearfold:last-child { border-bottom: 1px solid var(--line); }
.yearfold > summary { cursor: pointer; display: flex; align-items: baseline; gap: .6rem; min-height: 52px; padding: .8rem 0; font: 600 1.35rem/1.2 var(--serif); }
.yearfold > summary small { font: 400 1rem var(--sans); color: var(--ink-3); }
.yearfold .postlist { margin-bottom: 1.5rem; }
.event-photo { margin: 0 0 1.5rem; }
.event-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }