:root{
  --maroon:#8B1538;
  --deep:#420A1B;
  --cream:#F5E6D3;
  --paper:#FBF4EA;
  --gold:#C9A227;
  --ink:#2A1016;
  --muted:#6B4A52;
  --rule:rgba(66,10,27,.16);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

header.site{
  background:var(--deep);
  color:var(--cream);
  padding:22px 0;
  border-bottom:3px solid var(--gold);
}
header.site .wrap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
header.site a{color:var(--cream);text-decoration:none}
.brand{
  font:600 26px/1 Georgia,"Times New Roman",serif;
  letter-spacing:.02em;
}
.brand em{font-style:normal;color:var(--gold)}
.tagline{font-size:14px;color:rgba(245,230,211,.72);margin-left:auto}

nav.site{background:var(--maroon);}
nav.site .wrap{display:flex;flex-wrap:wrap;gap:0}
nav.site a{
  color:#fff;text-decoration:none;font-size:14px;
  padding:12px 16px 12px 0;margin-right:18px;
  border-bottom:2px solid transparent;
}
nav.site a:hover,nav.site a:focus{border-bottom-color:var(--gold)}
nav.site a[aria-current="page"]{border-bottom-color:var(--gold);font-weight:600}

main{padding:44px 0 72px}
h1{
  font:600 34px/1.2 Georgia,"Times New Roman",serif;
  color:var(--deep);margin:0 0 6px;
}
h2{
  font:600 21px/1.3 Georgia,"Times New Roman",serif;
  color:var(--maroon);margin:38px 0 10px;
}
h3{font:600 16px/1.4 inherit;color:var(--deep);margin:24px 0 6px}
.updated{color:var(--muted);font-size:14px;margin:0 0 28px}
p{margin:0 0 14px}
ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 7px}
a{color:var(--maroon)}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}

.lede{font-size:19px;line-height:1.6;color:var(--deep)}

.promise{
  border-left:4px solid var(--gold);
  background:var(--cream);
  padding:18px 22px;margin:26px 0;
}
.promise p:last-child{margin-bottom:0}
.promise strong{color:var(--deep)}

.card{
  border:1px solid var(--rule);background:#fff;
  padding:20px 22px;margin:0 0 14px;
}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

.fill{
  background:#FFF3CD;border:1px dashed #B8860B;
  color:#5A4200;padding:2px 6px;font-size:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.notice{
  border:1px solid var(--maroon);background:#fff;
  padding:16px 20px;margin:22px 0;
}
.notice p:last-child{margin-bottom:0}

table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px}
th,td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--cream);color:var(--deep);font-weight:600}

footer.site{
  border-top:1px solid var(--rule);
  background:var(--cream);
  padding:26px 0 40px;font-size:14px;color:var(--muted);
}
footer.site a{color:var(--maroon)}
footer.site p{margin:0 0 8px}

a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:27px}
  .tagline{margin-left:0;width:100%}
}

/* ── Fixed background slideshow · index page only (body.has-bg) ───────── */
/* Timing lives in index.html, in the SLIDE_MS / FADE_MS constants.       */

body.has-bg{background:var(--paper)}

.bg-stage{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.bg-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity var(--fade,600ms) ease-in-out;
  will-change:opacity;
}
.bg-slide.is-on{opacity:.40}

/* Light veil so dark photographs never swallow the text */
.bg-veil{
  position:fixed;inset:0;z-index:1;
  background:rgba(251,244,234,.28);
  pointer-events:none;
}

body.has-bg header.site,
body.has-bg nav.site,
body.has-bg main,
body.has-bg footer.site{position:relative;z-index:2}

/* Content sits on a translucent cream panel so contrast never depends on
   which photograph happens to be showing. */
body.has-bg main .wrap{
  background:rgba(251,244,234,.88);
  border:1px solid rgba(66,10,27,.10);
  padding:32px 32px 40px;
  max-width:800px;
}
body.has-bg footer.site{background:rgba(245,230,211,.94)}

@media (max-width:600px){
  body.has-bg main .wrap{padding:22px 20px 28px}
}

/* Motion sensitivity: hold on one image, no cycling, no fades. */
@media (prefers-reduced-motion:reduce){
  .bg-slide{transition:none}
}