/* --------------------------------------------------------------
   The Encounter — stylesheet
   Editorial system: warm paper, ink type, one brand colour (wine).
   Rules do the work that cards and shadows would otherwise do.
   -------------------------------------------------------------- */

/* --- Foundations ------------------------------------------------- */

:root {
    --paper:        #F4F0E7;
    --paper-raised: #FCFAF6;
    --sand:         #EAE2D3;
    --ink:          #17110E;
    --ink-soft:     #494039;
    --muted:        #877C71;
    --rule:         #DCD3C3;
    --rule-strong:  #BEB2A0;
    --wine:         #6E1524;
    --wine-deep:    #4C0F1A;
    --wine-hi:      #8C2233;
    --wine-tint:    rgba(110, 21, 36, 0.06);

    /* Gold — the interaction colour. Two values: a bright one for dark
       grounds, a deepened one that stays legible on paper. */
    --gold:         #C9A24A;
    --gold-ink:     #8A6A22;
    --gold-tint:    rgba(201, 162, 74, 0.14);

    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --nav-h: 68px;
    --gut:   clamp(20px, 5vw, 48px);
    --page:  1180px;
    --read:  36rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: 1.0625rem;
    line-height: 1.68;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
svg.ic { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

::selection { background: var(--wine); color: #fff; }

:focus-visible {
    outline: 2px solid var(--wine);
    outline-offset: 3px;
}

/* --- Type -------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.012em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.16; }
h3 { font-size: 1.3rem;  line-height: 1.3; }
h4 { font-size: 1.075rem; line-height: 1.35; font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--ink); }
em     { font-style: italic; }

blockquote { margin: 0; }
cite       { font-style: normal; }

/* Long-form reading column */
.prose { max-width: var(--read); }
.prose p { margin-bottom: 1.35em; }

/* Article detail — hero image above a centered reading column */
.article-hero {
    margin: 0 0 clamp(32px, 4vw, 48px);
}
.article-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.article { margin-inline: auto; }
.article .verse { margin-bottom: 2rem; }
.article-end { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.article-end .link { font-size: 0.9rem; }

/* Opening paragraph of an article — larger, lighter */
.lede {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--ink);
    max-width: 34rem;
}

/* Small sans marks: metadata, captions, nav, buttons */
.meta {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
    line-height: 1.5;
}

/* Marginal label — the only tracked-uppercase device on the site,
   and it hangs in the margin rather than stacking above headings. */
.label {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wine);
    margin: 0 0 0.9rem;
}
.label-quiet { color: var(--muted); }
.label-invert { color: rgba(255,255,255,0.5); }

/* Photo caption */
.caption {
    font-family: var(--sans);
    font-size: 0.7rem;
    line-height: 1.55;
    color: var(--muted);
    letter-spacing: 0.01em;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
    margin-top: 0.75rem;
}

/* Scripture set as a displayed quotation */
.verse {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.5;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    margin: 0;
}
.verse-ref {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1rem;
}
.on-dark .verse     { color: #fff; }
.on-dark .verse-ref { color: rgba(255,255,255,0.55); }

/* --- Layout ------------------------------------------------------ */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gut);
}
.wrap-tight { max-width: 860px; }

section { position: relative; }

/* Vertical rhythm is varied on purpose — not one padding for all. */
.band       { padding: clamp(56px, 8vw, 96px) 0; }
.band-tall  { padding: clamp(72px, 11vw, 132px) 0; }
.band-short { padding: clamp(44px, 6vw, 64px) 0; }

.band-paper  { background: var(--paper); }
.band-raised { background: var(--paper-raised); }
.band-sand   { background: var(--sand); }
.band-ink    { background: var(--ink); color: rgba(255,255,255,0.68); }
.band-wine   { background: var(--wine-deep); color: rgba(255,255,255,0.68); }

.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4,
.band-wine h1, .band-wine h2, .band-wine h3, .band-wine h4 { color: #fff; }

.rule-top    { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }

hr.rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: clamp(32px, 5vw, 56px) 0;
}

/* Editorial section head: label hangs left, heading sits right. */
.head {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0 clamp(24px, 4vw, 56px);
    align-items: start;
    margin-bottom: clamp(36px, 5vw, 60px);
}
.head > .label { margin: 0.55rem 0 0; }
.head-body { max-width: 46rem; }
.head-body > :last-child { margin-bottom: 0; }
.head-body h2 { margin-bottom: 0.45em; }

/* Two-column editorial split */
.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}
.c3  { grid-column: span 3; }
.c4  { grid-column: span 4; }
.c5  { grid-column: span 5; }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c8  { grid-column: span 8; }
.c9  { grid-column: span 9; }
.c12 { grid-column: span 12; }

/* Even column sets */
.cols        { display: grid; gap: clamp(24px, 3.2vw, 44px); }
.cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Rule-separated list — replaces the card grid throughout */
.list       { border-top: 1px solid var(--rule); }
.list > li,
.list > .row {
    list-style: none;
    border-bottom: 1px solid var(--rule);
    padding: clamp(20px, 2.6vw, 30px) 0;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0 clamp(16px, 2.4vw, 32px);
    align-items: baseline;
}
.list { margin: 0; padding: 0; }
.list .num {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 400;
    font-variant-numeric: lining-nums;
    color: var(--wine);
    letter-spacing: 0.02em;
}
.list h3 { margin-bottom: 0.4rem; }
.list p  { color: var(--ink-soft); }

/* --- Controls ---------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.95em 1.5em;
    border: 1px solid var(--wine);
    background: var(--wine);
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    text-align: center;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn-on-dark { background: #fff; border-color: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.btn-ghost-dark:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn-wide { width: 100%; justify-content: center; }

/* Text link with a rule under it — the secondary action everywhere */
.link {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rule-strong);
    transition: border-color 0.18s ease, color 0.18s ease;
}
.link:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.link .ic { transition: transform 0.18s ease; }
.link:hover .ic { transform: translateX(2px); }

.link-on-dark { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.35); }
.link-on-dark:hover { color: #fff; border-color: #fff; }
.link-on-dark .ic { stroke: currentColor; }
.link-dark { color: #fff; border-color: rgba(255,255,255,0.3); }
.link-dark:hover { color: var(--gold); border-color: var(--gold); }

/* Inline prose links */
.prose a:not(.btn), .rich a:not(.btn) {
    color: var(--wine);
    border-bottom: 1px solid rgba(110,21,36,0.3);
}
.prose a:not(.btn):hover, .rich a:not(.btn):hover { color: var(--gold-ink); border-color: var(--gold-ink); }

/* --- Forms ------------------------------------------------------- */

.field { display: block; margin-bottom: 1.1rem; }
.field > span {
    display: block;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.45rem;
}
.field .opt { color: var(--muted); font-weight: 400; }

input[type=text], input[type=email], input[type=tel],
input[type=number], select, textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.75rem 0.85rem;
    transition: border-color 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}
textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--wine);
    background: #fff;
}
input::placeholder, textarea::placeholder { color: #A79C90; }

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.1rem;
}

.note {
    font-family: var(--sans);
    font-size: 0.78rem;
    line-height: 1.6;
    padding: 0.85rem 1rem;
    border-left: 2px solid var(--wine);
    background: var(--wine-tint);
    color: var(--ink);
    margin-bottom: 1.5rem;
}
.note-bad { border-left-color: #A3271F; background: rgba(163,39,31,0.06); }

/* --- Empty states ------------------------------------------------ */

.empty {
    border: 1px dashed var(--rule-strong);
    padding: clamp(28px, 4vw, 44px);
    color: var(--muted);
    font-size: 0.95rem;
    max-width: 34rem;
}
.empty p:last-child { margin-bottom: 0; }

/* --- Page masthead (interior pages) ------------------------------ */

.masthead {
    padding: clamp(44px, 7vw, 78px) 0 clamp(32px, 5vw, 52px);
    border-bottom: 1px solid var(--rule);
    background: var(--wine);
    color: #fff;
}
.masthead .crumb {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.6rem;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}
.masthead .crumb a { color: rgba(255, 255, 255, 0.85); }
.masthead .crumb a:hover { color: var(--gold); }
.masthead .crumb i { font-style: normal; color: rgba(255, 255, 255, 0.4); }
.masthead h1 { margin-bottom: 0; max-width: 20ch; color: #fff; }
.masthead .standfirst {
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
    max-width: 34rem;
    margin-top: 1.1rem;
}
.masthead .kicker {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.1rem;
}
.masthead .masthead-deck {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.1vw, 1.55rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 38rem;
    margin: 1.2rem 0 0;
}

/* --- Navigation -------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(244, 240, 231, 0.94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rule);
}
.nav-in {
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gut);
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(14px, 2.2vw, 32px);
}

.wordmark { display: flex; align-items: center; gap: 11px; line-height: 1; flex-shrink: 0; }
.wordmark-text { display: block; }
.wordmark b {
    display: block;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
}
.wordmark-text > span {
    display: block;
    font-family: var(--sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 5px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px);
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}
.nav-links a {
    font-family: var(--sans);
    font-size: 0.775rem;
    font-weight: 400;
    color: var(--ink-soft);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-links a:hover     { color: var(--gold-ink); border-color: var(--gold-ink); }
.nav-links a[aria-current] { color: var(--wine); border-color: var(--wine); }

/* Dropdown submenu */
.nav-item { position: relative; }
.nav-item.has-sub > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.nav-item .caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.18s ease;
}
.caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.18s ease;
}
.submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 13.5rem;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--paper-raised);
    box-shadow: 0 18px 40px rgba(24, 22, 18, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.submenu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
}
.submenu a {
    display: block;
    padding: 0.55rem 1.15rem;
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--ink-soft);
    border-bottom: 0;
}
.submenu a:hover { color: var(--wine); background: var(--wine-tint); }
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
    opacity: 1;
    visibility: visible;
}
.nav-item:hover .caret,
.nav-item:focus-within .caret { transform: rotate(180deg); }
.nav-item:hover > a,
.nav-item:focus-within > a { color: var(--wine); border-color: var(--wine); }

/* The CTA must never be the thing that gets squeezed out */
.nav-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}
.nav-cta .btn { padding: 0.7em 1.15em; font-size: 0.78rem; white-space: nowrap; }

/* Google Translate — restyled to match the site instead of Google's chrome */
.nav-translate { line-height: 1; }
.nav-translate .goog-te-gadget {
    display: flex;
    align-items: center;
    font-size: 0;
}
.nav-translate .goog-te-gadget > span:last-child { display: none !important; }
.nav-translate .goog-te-combo {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: 0.55em 2em 0.55em 0.9em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M2%203.5%205%206.5%208%203.5%22%20fill%3D%22none%22%20stroke%3D%22%23655f53%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-translate .goog-te-combo:hover {
    color: var(--wine);
    border-color: var(--wine);
}
.nav-translate .goog-te-combo:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.drawer-translate { padding: 1rem 0 0.2rem; }
.drawer-translate .goog-te-gadget > span:last-child { display: none !important; }
.drawer-translate .goog-te-combo {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    width: 100%;
    padding: 0.7em 1em;
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    background: var(--paper-raised);
    cursor: pointer;
}

.burger {
    display: none;
    margin-left: auto;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
}

.drawer {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gut) 28px;
    z-index: 99;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
}
.drawer.open { display: block; }
.drawer .d-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.drawer a.d-link {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
}
.drawer a.d-link:hover { color: var(--gold-ink); }
.drawer a.d-link[aria-current] { color: var(--wine); }
.drawer .d-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
}
.drawer .d-caret:hover { color: var(--wine); border-color: var(--wine); }
.drawer .d-caret .caret { transition: transform 0.18s ease; }
.drawer .d-group.has-sub.open .d-caret .caret { transform: rotate(180deg); }
.drawer .d-submenu {
    display: none;
    padding: 0 0 0.9rem 1.1rem;
}
.drawer .d-group.has-sub.open .d-submenu { display: block; }
.drawer a.d-sublink {
    display: block;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 0.5rem 0;
    border-left: 1px solid var(--rule-strong);
    padding-left: 1rem;
}
.drawer a.d-sublink:hover { color: var(--gold-ink); }
.drawer .btn { margin-top: 22px; }

/* The nav carries a 7-item menu, a two-line wordmark and a CTA. Below
   ~1400px the tagline is dropped, then the spacing tightens, then the
   whole menu moves into the drawer — so the CTA is never clipped. */
@media (max-width: 1400px) {
    .wordmark-text > span { display: none; }
}
@media (max-width: 1240px) {
    .nav-in { gap: 14px; }
    .nav-links { gap: 11px; }
    .nav-links a { font-size: 0.73rem; }
    .wordmark b { font-size: 1.2rem; }
    .nav-cta .btn { padding: 0.65em 1em; font-size: 0.74rem; }
}
@media (max-width: 1080px) {
    .nav-links, .nav-cta { display: none; }
    .burger { display: flex; }
    .wordmark-text > span { display: block; }
    .wordmark b { font-size: 1.35rem; }
}

/* --- Utilities --------------------------------------------------- */

.stack-sm > * + * { margin-top: 0.75rem; }
.stack    > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: clamp(28px, 4vw, 48px); }
.actions  { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Responsive -------------------------------------------------- */

@media (max-width: 860px) {
    .head { grid-template-columns: 1fr; }
    .head > .label { margin: 0 0 0.9rem; }
    .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: span 12; }
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    body { font-size: 1rem; }
    .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .list > li, .list > .row { grid-template-columns: 1fr; gap: 0.5rem; }
    .list .num { font-size: 0.9rem; }
    :root { --nav-h: 60px; }
    .wordmark b { font-size: 1.15rem; }
    .wordmark-text > span { display: none; }
    .burger { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
    .nav, .drawer, .site-footer, .to-top { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --- Home: masthead / opening spread ----------------------------- */

/* The opening spread is sized to sit within the first screen, so the whole
   hero reads without scrolling. The portrait is capped against the viewport
   rather than given a fixed height, so it is the element that yields first. */
.opening {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    overflow: hidden;
}
.opening > .wrap { width: 100%; }

/* Full-bleed video background */
.opening .hero-video {
    position: absolute;
    inset: 0;
}
.opening .hero-video video {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center 18%;
}

/* Text overlay */
.opening-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: clamp(80px, 12vw, 120px) 0 clamp(48px, 8vw, 80px);
    background: linear-gradient(
        to right,
        rgba(24, 22, 18, 0.82) 0%,
        rgba(24, 22, 18, 0.55) 45%,
        rgba(24, 22, 18, 0.1) 100%
    );
}
.nameplate {
    font-size: clamp(3.2rem, 9vw, 7rem);
    line-height: 0.92;
    font-weight: 400;
    letter-spacing: -0.04em;
    margin: 0 0 1.4rem;
    color: #fff;
}
.opening .theme {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.1vw, 1.6rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    max-width: 26rem;
    margin: 0 0 2rem;
}

/* Unmute button */
.hero-video-unmute {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: #fff;
    background: rgba(24, 22, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.55em 1.1em;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease, border-color 0.18s ease;
}
.hero-video-unmute:hover { background: var(--wine); border-color: var(--wine); }
.hero-video-unmute.is-on { background: var(--wine); border-color: var(--wine); }

/* --- Home: welcome essay ----------------------------------------- */

.essay {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 38rem);
    justify-content: space-between;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.essay .prose { max-width: none; }
.essay-side { position: sticky; top: calc(var(--nav-h) + 32px); }
.essay-side .verse { font-size: 1.15rem; }
.essay-body h2 { margin-bottom: 1rem; }
.essay-body > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.82;
    padding: 0.06em 0.1em 0 0;
    color: var(--wine);
    font-weight: 400;
}

/* --- Home: founder ------------------------------------------------ */

.founder {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.founder figure { margin: 0; }
.founder img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
    object-position: center 18%;
    background: var(--rule);
}
.founder .caption { border-color: var(--rule-strong); }

/* --- Home: subscribe ---------------------------------------------- */

.subscribe-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(28px, 4vw, 64px);
    align-items: end;
}
.subscribe-form { display: flex; gap: 10px; }
.subscribe-form input[type=email] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.subscribe-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.38); }
.subscribe-form input[type=email]:focus { background: rgba(255, 255, 255, 0.07); border-color: #fff; }
.subscribe-note { font-family: var(--sans); font-size: 0.72rem; color: rgba(255,255,255,0.4); margin: 1rem 0 0; line-height: 1.6; }

/* --- Home: contact ------------------------------------------------ */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.contact-list { border-top: 1px solid var(--rule-strong); }
.contact-list > div {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 6px 24px;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
}
.contact-list dt {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.35em;
}
.contact-list dd { margin: 0; font-size: 1.1rem; color: var(--ink); overflow-wrap: anywhere; }
.contact-list dd a { border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
.contact-list dd a:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.contact-social { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 0.4em; }
.contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    color: var(--ink-soft);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.contact-social a:hover { color: var(--wine); border-color: var(--wine); background: var(--wine-tint); }

@media (max-width: 900px) {
    .essay,
    .founder,
    .subscribe-grid,
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .essay-side { position: static; }
    .founder figure { max-width: 21rem; margin-inline: auto; }

    .opening {
        display: flex;
        align-items: flex-start;
        min-height: calc(80svh - var(--nav-h));
    }
    .opening-overlay { padding: clamp(72px, 12vw, 100px) 0 clamp(36px, 7vw, 56px); }
    .nameplate { font-size: clamp(2.8rem, 10vw, 4.2rem); }
}

/* Short landscape viewports: keep the hero on one screen by trimming the
   spacing rather than letting the buttons push out of view. */
@media (min-width: 901px) and (max-height: 760px) {
    .opening-overlay { padding: clamp(64px, 10vh, 80px) 0 clamp(28px, 5vh, 44px); }
    .opening .theme { font-size: clamp(1.05rem, 1.7vw, 1.3rem); margin-bottom: 1.5rem; }
}
@media (max-width: 620px) {
    .subscribe-form { flex-direction: column; }
    .contact-list > div { grid-template-columns: minmax(0, 1fr); }
    .founder figure { max-width: 17rem; }
    .opening { min-height: calc(70svh - var(--nav-h)); }
}

/* --- 404 ---------------------------------------------------------- */

.err {
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.err-code {
    font-family: var(--serif);
    font-size: clamp(4rem, 11vw, 8rem);
    line-height: 0.9;
    font-weight: 400;
    color: var(--wine);
    letter-spacing: -0.04em;
}
.err h1 { margin-bottom: 1rem; }

@media (max-width: 760px) {
    .err { grid-template-columns: minmax(0, 1fr); }
}

/* --- Footer ------------------------------------------------------- */

.site-footer {
    background: var(--wine-deep);
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.95rem;
    border-top: 3px solid var(--gold);
}
.site-footer a { color: rgba(255, 255, 255, 0.66); transition: color 0.18s ease, border-color 0.18s ease; }
.site-footer a:hover { color: var(--gold); }
.site-footer h2, .site-footer h3 { color: #fff; }

.foot-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(44px, 6vw, 68px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.foot-news h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 0.4rem; }
.foot-news p  { color: rgba(255, 255, 255, 0.48); max-width: 32rem; margin: 0; font-size: 0.95rem; }

.foot-form { display: flex; gap: 10px; }
.foot-form input[type=email] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.foot-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.38); }
.foot-form input[type=email]:focus { background: rgba(255, 255, 255, 0.06); border-color: #fff; }

.foot-main {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(44px, 6vw, 68px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.foot-mark { display: flex; align-items: center; gap: 13px; line-height: 1; margin-bottom: 1.2rem; }
.foot-mark b {
    display: block;
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.015em;
}
.foot-mark em {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
}
.foot-about p {
    color: rgba(255, 255, 255, 0.45);
    max-width: 26rem;
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}
.foot-theme {
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6) !important;
}
.foot-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.foot-social a:hover { color: var(--ink); border-color: var(--gold); background: var(--gold); }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.foot-col h3 {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    margin: 0 0 0.35rem;
}
.foot-col a { font-family: var(--sans); font-size: 0.85rem; overflow-wrap: anywhere; }
.foot-col .btn { margin-top: 0.8rem; font-size: 0.72rem; }
.foot-col .btn:hover { color: var(--ink); }
.foot-hours {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    margin: 0.4rem 0 0;
    line-height: 1.6;
    transition: color 0.18s ease;
}
.foot-hours:hover { color: #fff; }

.foot-base {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 22px 0 28px;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 90;
    padding: 0;
}
.to-top.show { display: flex; }
.to-top:hover { background: var(--gold); color: var(--ink); }

#toast {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 120;
    max-width: 22rem;
    background: var(--wine-deep);
    color: #fff;
    border-left: 2px solid var(--gold);
    padding: 14px 20px;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.5;
    transition: opacity 0.4s ease;
}
#toast.toast-bad { border-left-color: #C0524A; }

@media (max-width: 960px) {
    .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .foot-news { grid-template-columns: minmax(0, 1fr); }
    .foot-form { flex-direction: column; }
    .foot-main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .foot-base { flex-direction: column; align-items: center; }
}

/* --- Vision, Mission & Faith -------------------------------------- */

/* Two statements given equal weight, separated by a rule */
.statements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--ink);
}
.statements > div {
    padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 48px) clamp(28px, 4vw, 48px) 0;
}
.statements > div + div {
    border-left: 1px solid var(--rule);
    padding-left: clamp(24px, 3.5vw, 48px);
    padding-right: 0;
}
.statements h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 1.1rem; }
.statements blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.5;
    color: var(--ink);
}

/* Beliefs — a numbered index, hanging numerals, no cards */
.beliefs { border-top: 1px solid var(--ink); }
.beliefs > li {
    list-style: none;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0 clamp(16px, 2.5vw, 36px);
    padding: clamp(22px, 3vw, 32px) 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}
.beliefs { margin: 0; padding: 0; }
.beliefs .n {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wine);
    line-height: 1;
}
.beliefs p { margin: 0; max-width: 46rem; font-size: 1.05rem; }

/* Eternal life */
.eternal {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.eternal-body { color: rgba(255, 255, 255, 0.62); max-width: 38rem; }
.eternal-body p { margin-bottom: 1.3em; }

@media (max-width: 860px) {
    .statements { grid-template-columns: minmax(0, 1fr); }
    .statements > div { padding-right: 0; }
    .statements > div + div {
        border-left: 0;
        border-top: 1px solid var(--rule);
        padding-left: 0;
    }
    .eternal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .beliefs > li { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    .beliefs .n { font-size: 1.1rem; }
}

/* --- Give ---------------------------------------------------------- */

.give {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* Bank details set as a definition table, not a card */
.bank { border-top: 1px solid var(--ink); margin: 0; }
.bank > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 6px 24px;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}
.bank dt {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.3em;
}
.bank dd { margin: 0; font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.bank .pending { color: var(--muted); font-style: italic; }

.give-aside {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--wine);
    padding: clamp(24px, 3.5vw, 40px);
}

.partner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

@media (max-width: 860px) {
    .give, .partner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .bank > div { grid-template-columns: minmax(0, 1fr); }
}

/* --- Gallery ------------------------------------------------------- */

/* Photo grid — a plain ruled grid of images with captions, no card chrome */
.fig-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
.fig-grid figure { margin: 0; }
.fig-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.fig-grid .caption { margin-top: 0.75rem; }
.fig-grid a { border-bottom: 0; }
.fig-grid .fig-link {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 2px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.fig-grid .fig-link:hover { color: var(--wine); border-color: var(--wine); }

@media (max-width: 860px) {
    .fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .fig-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Book covers — a taller 3:4 grid used on the resources page */
.fig-grid.books img { aspect-ratio: 3 / 4; }
.fig-grid.books .caption strong { color: var(--ink); font-weight: 600; }

.weekly {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.weekly-body {
    color: rgba(255, 255, 255, 0.68);
    max-width: 40rem;
    font-size: 1.05rem;
}
.weekly-body p { margin-bottom: 1.3em; }
.weekly h2 { margin-bottom: 0.9rem; }

@media (max-width: 860px) {
    .weekly { grid-template-columns: minmax(0, 1fr); }
}

/* --- Resources ----------------------------------------------------- */

/* Contents index at the top of the page — an editorial table of contents */
.toc { border-top: 1px solid var(--ink); margin: 0; padding: 0; }
.toc > li {
    list-style: none;
    border-bottom: 1px solid var(--rule);
}
.toc a {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0 20px;
    align-items: baseline;
    padding: 1rem 0;
    transition: color 0.18s ease;
}
.toc a:hover { color: var(--gold-ink); }
.toc .n { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); }
.toc .t { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.toc a:hover .t { color: var(--wine); }
.toc .go { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }

@media (max-width: 620px) {
    .toc a { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .toc .go { display: none; }
}

/* --- Media ---------------------------------------------------------- */

/* Broadcast — two channels stated plainly, side by side, divided by a rule */
.channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}
.channels > div {
    padding: clamp(26px, 3.5vw, 44px) clamp(24px, 3vw, 44px) clamp(26px, 3.5vw, 44px) 0;
}
.channels > div + div {
    border-left: 1px solid var(--rule);
    padding-left: clamp(24px, 3vw, 44px);
    padding-right: 0;
}
.channels .kind {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wine);
    display: block;
    margin-bottom: 0.9rem;
}
.channels h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.channels .status {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--rule-strong);
    padding: 5px 10px;
    display: inline-block;
    margin-top: 1rem;
}

/* Media kit — a request list */
.kit { border-top: 1px solid var(--ink); margin: 0; padding: 0; }
.kit > li {
    list-style: none;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0 clamp(16px, 2.5vw, 32px);
    align-items: center;
    padding: clamp(18px, 2.4vw, 26px) 0;
    border-bottom: 1px solid var(--rule);
}
.kit .n { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); }
.kit h3 { font-size: 1.2rem; margin: 0; }

/* Newsletters */
.news-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.news-what { border-top: 1px solid var(--rule-strong); margin: 1.6rem 0 0; padding: 0; }
.news-what > li {
    list-style: none;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.05rem;
    color: var(--ink);
}
.news-form { display: flex; gap: 10px; margin-top: 1.8rem; max-width: 28rem; }

@media (max-width: 860px) {
    .channels { grid-template-columns: minmax(0, 1fr); }
    .channels > div { padding-right: 0; }
    .channels > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
    .news-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .kit > li { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
    .news-form { flex-direction: column; }
}

/* --- Speaking ------------------------------------------------------- */

/* Calendar */
.schedule {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.cal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ink);
}
.cal-head h3 { margin: 0; font-size: 1.35rem; font-weight: 400; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav a {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.72rem;
    transition: border-color 0.18s ease, color 0.18s ease;
}
.cal-nav a:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow {
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 0 8px;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}
.cal-cell {
    min-height: 74px;
    padding: 7px 8px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
}
.cal-cell:nth-child(7n + 7) { border-right: 0; }
.cal-cell.pad { background: transparent; }
.cal-day { font-size: 0.78rem; color: var(--ink-soft); display: block; }
.cal-cell.today { background: var(--wine-tint); }
.cal-cell.today .cal-day { color: var(--wine); font-weight: 600; }
.cal-ev {
    display: block;
    margin-top: 5px;
    font-size: 0.62rem;
    line-height: 1.25;
    color: #fff;
    background: var(--wine);
    padding: 3px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-foot { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin-top: 14px; }

/* Upcoming list */
.upcoming { border-top: 1px solid var(--ink); margin: 0; padding: 0; }
.upcoming > li {
    list-style: none;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 20px;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
}
.upcoming .date {
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wine);
    padding-top: 0.3rem;
}
.upcoming h4 { margin: 0 0 0.2rem; }
.upcoming .where { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); }

/* Invite */
.invite {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.invite-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.invite-caveat {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--ink);
    border-left: 2px solid var(--wine);
    padding-left: 1.1rem;
    margin: 1.6rem 0 0;
}
.form-panel {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    padding: clamp(24px, 3.5vw, 44px);
}
.form-panel h3 { margin-bottom: 0.3rem; }
.form-panel .req { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin-bottom: 1.8rem; }

/* Conference */
.conf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

@media (max-width: 900px) {
    .schedule, .invite, .conf { grid-template-columns: minmax(0, 1fr); }
    .invite-aside { position: static; }
}
@media (max-width: 620px) {
    .cal-cell { min-height: 48px; padding: 4px; }
    .cal-day { font-size: 0.68rem; }
    .cal-dow { font-size: 0.56rem; padding: 8px 0 6px; }
    .cal-ev { font-size: 0.52rem; padding: 2px 3px; }
    .cal-head h3 { font-size: 1.15rem; }
}

/* --- Privacy policy ------------------------------------------------ */

.policy { max-width: 40rem; }
.policy .updated {
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: clamp(28px, 4vw, 44px);
}
.policy section + section { margin-top: clamp(32px, 4vw, 48px); }
.policy h2 {
    font-size: 1.35rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1rem;
}
.policy h2 .n {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--wine);
    margin-right: 0.7rem;
    vertical-align: 0.28em;
}
.policy h3 { font-size: 1.08rem; margin: 1.6rem 0 0.5rem; }
.policy ul { padding-left: 1.15rem; margin: 0 0 1.2em; }
.policy li { margin-bottom: 0.5em; }
.policy a { color: var(--wine); border-bottom: 1px solid rgba(110,21,36,0.3); }
.policy a:hover { color: var(--gold-ink); border-color: var(--gold-ink); }