/* The church's colours, as actually worn: purple and cream, with a splash of
   gold — the choir robes. Purple stands for royalty and white for purity, per
   the History page; the cream is the warmer white of the robes, and the gold is
   used sparingly, the way it is on them. */
:root{
  --purple:#470B80;      /* taken from the existing site */
  --purple-deep:#2E0755;
  --purple-lift:#5E1BA3;
  --purple-pale:#F2ECE0;
  --lavender:#F2EAD9;
  --lav-line:#E0D3B8;

  --ground:#FBF6EA;
  --surface:#FFFDF7;
  --gold:#B08D1E;
  --gold-on-purple:#E3BE55;
  --ink:#221A2B;
  --muted:#5C5266;
  --line:#E6DDCB;

  --on-purple:#FFFFFF;
  --muted-on-purple:#D6C6E6;
  --line-on-purple:#5B2093;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:72rem;
  --measure:36rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --purple:#9257CE;
    --purple-deep:#0D0714;
    --purple-lift:#A66FDD;
    --purple-pale:#1E1626;
    --lavender:#1E1626;
    --lav-line:#382B48;
    --ground:#151020;
    --surface:#1D1729;
    --gold:#E3BE55;
    --gold-on-purple:#E3BE55;
    --ink:#EFE9F5;
    --muted:#B6A9C4;
    --line:#2E2340;
    --on-purple:#F6F1FA;
    --muted-on-purple:#CDBBDE;
    --line-on-purple:#3A2A52;
  }
}
:root[data-theme="dark"]{
  --purple:#9257CE;
  --purple-deep:#0D0714;
  --purple-lift:#A66FDD;
  --purple-pale:#1E1626;
  --lavender:#1E1626;
  --lav-line:#382B48;
  --ground:#151020;
  --surface:#1D1729;
  --gold:#E3BE55;
  --gold-on-purple:#E3BE55;
  --ink:#EFE9F5;
  --muted:#B6A9C4;
  --line:#2E2340;
  --on-purple:#F6F1FA;
  --muted-on-purple:#CDBBDE;
  --line-on-purple:#3A2A52;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:.75rem 1.25rem;font-weight:700;z-index:99;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
:where(a,button):focus-visible{outline:3px solid var(--purple-lift);outline-offset:3px;border-radius:2px}
.on-purple :where(a,button):focus-visible{outline-color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.5rem}
.label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--purple);margin:0 0 .85rem}
.on-purple .label{color:var(--muted-on-purple)}

.draft-note{background:var(--purple-deep);color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.55rem 0;text-align:center}

.masthead{background:var(--purple-deep);color:var(--on-purple)}
.masthead .wrap{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline;justify-content:space-between;padding-block:1.1rem}
.wordmark{font-family:var(--serif);font-size:1.2rem;letter-spacing:.03em}
.mainnav ul{display:flex;flex-wrap:wrap;gap:1.35rem;list-style:none;margin:0;padding:0}
.mainnav a{color:var(--muted-on-purple);text-decoration:none;font-size:.9375rem;font-weight:600;padding-bottom:2px;border-bottom:2px solid transparent}
.mainnav a:hover{color:#fff;border-bottom-color:#fff}

.hero{background:var(--purple);color:var(--on-purple)}
.hero .wrap{display:grid;gap:3rem;padding-block:4rem 4.5rem}
@media (min-width:58rem){.hero .wrap{grid-template-columns:1.1fr .9fr;gap:4.5rem;align-items:center}}
.hero h1{font-size:clamp(2.4rem,5.6vw,3.9rem);letter-spacing:-.01em;margin-bottom:1.1rem}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--muted-on-purple);margin-bottom:1.5rem}
.hero .lede{color:var(--muted-on-purple);max-width:var(--measure);font-size:1.125rem}

.times{background:var(--purple-deep);border:1px solid var(--line-on-purple);border-top:3px solid var(--gold-on-purple);padding:2rem 1.75rem}
.times h2{font-size:1.45rem;margin-bottom:.25rem}
.times .day{font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-on-purple);font-weight:700;margin-bottom:1.35rem}
.schedule{list-style:none;margin:0 0 1.6rem;padding:0}
.schedule li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:.8rem 0;border-top:1px solid var(--line-on-purple);align-items:baseline}
.schedule li:first-child{border-top:0;padding-top:0}
.schedule li:last-child{padding-bottom:0}
.schedule time{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--gold-on-purple)}
.schedule .what{color:var(--muted-on-purple)}
.schedule .main .what{font-weight:700;color:#fff}
.btn{display:inline-block;background:#fff;color:var(--purple-deep);font-weight:700;text-decoration:none;padding:.8rem 1.4rem}
.btn:hover{background:var(--lavender)}
.btn-purple{display:inline-block;justify-self:start;background:var(--purple);color:#fff;font-weight:700;text-decoration:none;padding:.8rem 1.4rem}
.btn-purple:hover{background:var(--purple-lift)}

.ways{background:var(--lavender);border-block:1px solid var(--lav-line)}
.ways .wrap{padding-block:3rem}
.ways-grid{display:grid;gap:1.25rem;margin-top:1.6rem}
@media (min-width:40rem){.ways-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66rem){.ways-grid{grid-template-columns:repeat(4,1fr)}}
.way{background:var(--surface);border:1px solid var(--lav-line);border-top:3px solid var(--purple);padding:1.5rem;display:grid;gap:.5rem;align-content:start;text-decoration:none}
.way h3{font-size:1.15rem}
.way p{color:var(--muted);font-size:.9688rem}
.way .go{color:var(--gold);font-weight:700;font-size:.9375rem;margin-top:.3rem}
a.way:hover{border-color:var(--purple)}
a.way:hover .go{text-decoration:underline}

section{padding-block:4.25rem}
section.on-purple{background:var(--purple);color:var(--on-purple)}
section.tint{background:var(--purple-pale)}
.on-purple p{color:var(--muted-on-purple)}
h2.section-title{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:1.4rem}
.prose{max-width:var(--measure);display:grid;gap:1.05rem}
.prose p{color:var(--muted)}
.on-purple .prose p{color:var(--muted-on-purple)}
.split{display:grid;gap:2.5rem}
@media (min-width:58rem){.split{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}}

blockquote{margin:0;border-left:3px solid var(--gold-on-purple);padding-left:1.75rem}
blockquote p{font-family:var(--serif);font-size:clamp(1.35rem,2.7vw,1.75rem);line-height:1.45;color:var(--on-purple)!important}
blockquote cite{display:block;margin-top:1rem;font-style:normal;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted-on-purple)}

.cards{display:grid;gap:1.25rem;margin-top:2.25rem}
@media (min-width:40rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);padding:1.6rem;display:grid;gap:.45rem;align-content:start}
.card h3{font-size:1.2rem}
.card .who{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.card p{color:var(--muted);font-size:1rem}

/* colours-and-motto feature */
.motto{display:grid;gap:1.5rem;margin-top:2rem}
@media (min-width:48rem){.motto{grid-template-columns:auto 1fr;gap:2.5rem;align-items:center}}
.swatches{display:flex;gap:0}
.sw{width:4.6rem;height:7rem;display:grid;align-content:end;padding:.75rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.sw-purple{background:var(--purple);color:#fff}
.sw-white{background:#FBF6EA;color:var(--purple-deep);border:1px solid var(--lav-line)}
.sw-gold{background:#C9A227;color:#2E0755}

.timeline{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;max-width:44rem}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.1rem 0;border-top:1px solid var(--line-on-purple)}
.timeline li:first-child{border-top:0;padding-top:0}
.timeline .yr{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;white-space:nowrap}

dl{margin:0;display:grid;gap:1.35rem}
.fact{display:grid;gap:.3rem;padding-top:1.1rem;border-top:1px solid var(--line-on-purple)}
.fact dt{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted-on-purple)}
.fact dd{margin:0;color:#fff}
.visit-grid{display:grid;gap:2.5rem;margin-top:2.25rem}
@media (min-width:52rem){.visit-grid{grid-template-columns:1fr 1fr;gap:3.5rem}}

.give-box{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);padding:2rem;display:grid;gap:1rem;max-width:40rem;margin-top:1.75rem}
.give-box h3{font-size:1.35rem}
.give-box p{color:var(--muted)}

.photo{border:2px dashed var(--purple);background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(71,11,128,.06) 9px,rgba(71,11,128,.06) 18px);display:grid;place-items:center;text-align:center;padding:2rem 1.5rem;min-height:12rem;color:var(--purple)}
.on-purple .photo{border-color:#fff;color:#fff;background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(255,255,255,.09) 9px,rgba(255,255,255,.09) 18px)}
.photo strong{display:block;font-size:1.0625rem;margin-bottom:.3rem}
.photo span{font-size:.9375rem;opacity:.9}
.calwrap{position:relative;display:grid;place-items:center;width:100%;max-width:56rem;aspect-ratio:4/3;border:1px solid var(--line);background:#fff}
.calwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.calwrap{aspect-ratio:3/4}}
.calplace{display:grid;place-items:center;text-align:center;padding:2rem;gap:.75rem}
.happen-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media (min-width:900px){.happen-grid{grid-template-columns:1.6fr 1fr}}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.on-purple .shot img{border-color:rgba(255,255,255,.35)}
.shot figcaption{padding-top:.7rem;font-size:.9375rem;color:var(--muted);font-style:italic}
.on-purple .shot figcaption{color:rgba(255,255,255,.82)}
.people{display:grid;gap:2rem;margin-top:2.25rem}
@media (min-width:52rem){.people{grid-template-columns:1fr 1fr;gap:2.5rem}}
.person{background:var(--surface);border:1px solid var(--line);display:grid;align-content:start}
.person img{display:block;width:100%;height:auto}
.person .body{padding:1.5rem;display:grid;gap:.5rem}
.person h3{font-size:1.25rem}
.person .who{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.person p{color:var(--muted);font-size:1rem}
.person .more{font-size:.9375rem}
.person .pull{margin:.4rem 0 0;padding-left:.9rem;border-left:3px solid var(--gold)}
.person .pull p{font-family:var(--serif);font-size:1.125rem!important;line-height:1.5;font-style:italic;color:var(--ink)!important}
.person .pull cite{display:block;margin-top:.45rem;font-size:.75rem;font-style:normal;color:var(--muted)}
@media (prefers-color-scheme:dark){.shot img,.person img{filter:brightness(.88) saturate(.94)}}
.photoband{margin:0;background:var(--lavender)}
.photoband img{display:block;width:100%;height:auto}
.photoband figcaption{max-width:var(--wrap);margin:0 auto;padding:.9rem 1.5rem 1.4rem;font-size:.9375rem;color:var(--muted);font-style:italic}
@media (prefers-color-scheme:dark){.photoband img{filter:brightness(.86) saturate(.92)}}
.todo{display:inline-block;border:1px dashed var(--purple);color:var(--purple);font-weight:600;font-size:.9375rem;padding:.15rem .5rem}
.on-purple .todo{border-color:#fff;color:#fff}

.memoriam{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--purple);padding:1.75rem;max-width:44rem;margin-top:1.5rem;display:grid;gap:.6rem}
.memoriam .head{display:grid;gap:1.25rem;align-items:start}
@media (min-width:34rem){.memoriam .head{grid-template-columns:auto 1fr;gap:1.5rem}}
.memoriam .head img{display:block;width:124px;height:auto;border:1px solid var(--line)}
@media (prefers-color-scheme:dark){.memoriam .head img{filter:brightness(.9) saturate(.94)}}
.memoriam .head .titles{display:grid;gap:.35rem;align-content:start}
.memoriam .who{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.memoriam h3{font-size:1.25rem}
.memoriam p{color:var(--muted)}

footer{background:var(--purple-deep);color:var(--muted-on-purple);padding-block:3.25rem 2.25rem;font-size:.9375rem}
footer h2{font-size:1.2rem;color:#fff;margin-bottom:.85rem;font-family:var(--serif)}
.foot-grid{display:grid;gap:2.25rem}
@media (min-width:52rem){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
footer a{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.colophon{margin-top:2.75rem;padding-top:1.4rem;border-top:1px solid var(--line-on-purple);display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.875rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.draft-foot-note{background:var(--purple-deep);color:var(--muted-on-purple);font-size:.8125rem;
  line-height:1.5;text-align:center;margin:0;padding:0 1.5rem .7rem;border-bottom:1px solid var(--line-on-purple)}

/* ---- subsidiary pages -------------------------------------------------- */
a.wordmark{text-decoration:none;color:inherit}
.pagehead{background:var(--lavender);padding-block:3rem 2.5rem;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin-top:.3rem}
.pagehead .lede{max-width:var(--measure);margin-top:1rem;font-size:1.125rem;color:var(--muted)}
main>section{padding-block:3.25rem}

.qa{display:grid;gap:2rem;max-width:46rem}
@media (min-width:62rem){.qa{grid-template-columns:1fr 1fr;gap:2.25rem 3rem;max-width:none}}
.q h2{font-size:1.2rem;font-family:var(--serif);margin-bottom:.5rem}
.q p{color:var(--muted);max-width:var(--measure)}
.q p+p{margin-top:.6rem}

.formslot{border:2px dashed var(--purple);background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(71,11,128,.06) 9px,rgba(71,11,128,.06) 18px);padding:2rem 1.5rem;display:grid;gap:.75rem;place-items:center;text-align:center;min-height:16rem;color:var(--purple)}
.formslot p:last-child{color:var(--muted);font-size:.9375rem}

.note{margin-top:1.5rem;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);padding:1.25rem 1.4rem}
.note h3{font-size:1rem;margin-bottom:.6rem}
.note ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.9375rem;display:grid;gap:.3rem}

.cta-band{margin-top:3rem;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--purple);padding:1.4rem 1.6rem}
.cta-band p{margin:0;color:var(--muted)}

.card h3 a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.2em}
.card h3 a:hover{color:var(--purple)}