/* base.css — shared structure for all themes.
   Themes set the CSS variables below; a few structural bits differ per theme
   in the theme files. Keep this file about layout, not colour. */

:root{
  --maxw: 62rem;
  --gap: clamp(1.25rem, 4vw, 3rem);
  /* themes override these: */
  --bg:#fff; --panel:#fff; --ink:#1c1c1c; --muted:#5a5a5a; --line:#e2ddd3;
  --accent:#3a4a57; --accent-2:#7a6a52; --hero-bg:#eef0f2; --hero-ink:#26323b;
  --quote-bg:#faf7f1; --quote-ink:#26323b; --emph:#7a1f2b;
  --ff-display:"Cormorant Garamond", Georgia, serif;
  --ff-text:"EB Garamond", Georgia, serif;
  --ff-nav:"EB Garamond", Georgia, serif;
  --nav-tt: none; --nav-ls: normal;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-text); font-size:1.16rem; line-height:1.66;
  font-weight:400; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.06em}
p{margin:0 0 1.1em}
h1,h2,h3{font-family:var(--ff-display); font-weight:600; line-height:1.08; color:var(--ink); margin:0 0 .5em}
main{display:block}

/* ---- header / nav ---- */
.site-head{
  max-width:var(--maxw); margin:0 auto; padding:1.6rem var(--gap) 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline; justify-content:space-between;
}
.wordmark{
  font-family:var(--ff-display); font-size:1.28rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; line-height:1.15;
}
.wordmark span{display:block; font-family:var(--ff-nav); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:.15rem}
.site-nav{display:flex; gap:1.4rem; font-family:var(--ff-nav)}
.site-nav a{
  color:var(--muted); text-decoration:none; font-size:.82rem; letter-spacing:var(--nav-ls);
  text-transform:var(--nav-tt); padding-bottom:.2rem; border-bottom:1.5px solid transparent;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current]{color:var(--ink); border-bottom-color:var(--accent-2)}

/* ---- home hero ---- */
.hero{max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,7vw,5rem) var(--gap) 1rem; text-align:center}
.hero-kicker{font-family:var(--ff-nav); text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; color:var(--muted); margin:0 0 1.2rem}
.hero-name{font-size:clamp(2.4rem,7vw,4.4rem); margin:0; line-height:1.02; letter-spacing:.005em}
.hero-name .pc{display:inline-block; font-size:.32em; letter-spacing:.28em; vertical-align:middle;
  margin-left:.7em; color:var(--accent-2); font-family:var(--ff-nav); font-weight:600}
.hero-epithet{font-family:var(--ff-nav); font-style:italic; color:var(--muted);
  font-size:1.02rem; letter-spacing:.02em; margin:1.1rem 0 0}

/* ---- the quote ---- */
.quote-stage{background:var(--quote-bg); color:var(--quote-ink);
  padding:clamp(3rem,8vw,6rem) var(--gap); margin-top:clamp(1.5rem,5vw,3rem)}
.the-quote{max-width:44rem; margin:0 auto; padding:0; border:0}
.the-quote p{font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.4; margin:0 0 1.3rem}
.the-quote em{font-style:italic; color:var(--emph)}
.the-quote strong{font-weight:600}
.the-quote cite{display:block; font-family:var(--ff-nav); font-style:normal;
  text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; color:var(--muted)}
.quote-source{max-width:44rem; margin:1.6rem auto 0; text-align:center;
  font-family:var(--ff-nav); font-style:italic; color:var(--muted); font-size:.98rem}
.quote-source em{font-style:italic}

/* ---- intro (portrait + words) ---- */
.intro{max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,7vw,5rem) var(--gap);
  display:grid; grid-template-columns:minmax(0,1fr) 1.4fr; gap:clamp(1.5rem,5vw,3.5rem); align-items:center}
.intro-portrait img{border-radius:2px; box-shadow:0 1px 0 var(--line), 0 22px 40px -30px rgba(0,0,0,.5)}
.lede{font-family:var(--ff-display); font-size:1.5rem; line-height:1.35; color:var(--ink)}
.intro-links{margin-top:1.8rem; display:flex; gap:1rem; flex-wrap:wrap}
.btn{display:inline-block; font-family:var(--ff-nav); font-size:.86rem; letter-spacing:.03em;
  text-decoration:none; padding:.7rem 1.3rem; border:1.5px solid var(--accent);
  color:var(--accent); border-radius:2px; transition:.15s}
.btn:hover{background:var(--accent); color:var(--bg)}
.btn-quiet{border-color:var(--line); color:var(--muted)}
.btn-quiet:hover{background:var(--line); color:var(--ink)}

/* ---- give ---- */
.give{max-width:44rem; margin:0 auto; padding:0 var(--gap) clamp(3rem,7vw,5rem); text-align:center}
.give h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.give-soon{font-style:italic; color:var(--muted)}

/* ---- inner page heads ---- */
.page{max-width:var(--maxw); margin:0 auto; padding:0 var(--gap)}
.page-head{display:grid; grid-template-columns:minmax(0,.8fr) 1.6fr; gap:clamp(1.5rem,5vw,3rem);
  align-items:center; padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,4vw,2.5rem)}
.page-head.narrow{grid-template-columns:1fr; max-width:44rem; margin:0 auto; text-align:center}
.page-head h1{font-size:clamp(2.2rem,5.5vw,3.4rem)}
.ph-sub{font-family:var(--ff-nav); text-transform:uppercase; letter-spacing:.18em;
  font-size:.76rem; color:var(--muted); margin:0 0 1.2rem}
.ph-portrait img{border-radius:2px; box-shadow:0 22px 40px -30px rgba(0,0,0,.5)}

/* ---- timeline ---- */
.timeline{padding:1.5rem 0 clamp(2rem,5vw,3.5rem); border-top:1px solid var(--line)}
.tl-row{display:grid; grid-template-columns:8.5rem 1fr; gap:clamp(1rem,3vw,2.2rem);
  padding:1.15rem 0; border-bottom:1px solid var(--line)}
.tl-year{font-family:var(--ff-nav); font-weight:600; color:var(--accent-2);
  letter-spacing:.02em; font-size:1rem; padding-top:.15rem}
.tl-body p{margin:0}

/* ---- later life ---- */
.later{display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(1.5rem,5vw,3rem);
  align-items:center; padding:clamp(2.5rem,6vw,4rem) 0}
.later-img img{border-radius:2px; box-shadow:0 22px 40px -30px rgba(0,0,0,.5)}

/* ---- organisations ---- */
.orgs{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem); border-top:1px solid var(--line)}
.orgs-intro{max-width:42rem; color:var(--muted); font-style:italic}
.orgs-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,3rem); margin-top:1.5rem}
.orgs h3{font-family:var(--ff-nav); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8rem; color:var(--accent-2); font-weight:600; margin-bottom:.9rem}
.orgs-list{list-style:none; margin:0; padding:0; columns:1}
.orgs-list li{padding:.34rem 0; border-bottom:1px dotted var(--line); font-size:1.02rem}
.orgs-list a{text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; transition:.15s}
.orgs-list a:hover{color:var(--accent); border-bottom-color:var(--accent-2)}
.orgs-give a{color:var(--accent)}
.org-note{font-family:var(--ff-nav); font-style:italic; font-size:.8rem; color:var(--muted); margin-left:.4rem}
.org-plain{color:var(--muted)}
.orgs-foot{margin-top:1rem; font-size:.86rem; font-style:italic; color:var(--muted)}

/* ---- attendees ---- */
.attendees{padding:1.5rem 0 clamp(3rem,7vw,5rem)}
.att-list{list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(2rem,5vw,4rem)}
.att-list li{break-inside:avoid; padding:.42rem 0; border-bottom:1px solid var(--line); margin-bottom:.1rem}
.att-name{display:block; font-size:1.04rem}
.att-rep{display:block; font-family:var(--ff-nav); font-size:.82rem; color:var(--muted); font-style:italic}

/* ---- Barbara / Her Life ---- */
.her-story{max-width:44rem; margin:0 auto; padding:1rem 0 clamp(2rem,5vw,3.5rem)}
.her-story .lede{margin-bottom:0}
/* the book, given its own styled panel + a three-dimensional cover */
.book{padding:clamp(2rem,5vw,3.5rem) 0}
.book-panel{
  display:grid; grid-template-columns:minmax(0,.85fr) 1.3fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem);
  background:var(--hero-bg); border:1px solid var(--line); border-radius:4px;
}
.book-obj{perspective:1600px; display:flex; justify-content:center}
.book-obj__inner{position:relative; transform:rotateY(-22deg); transform-style:preserve-3d;
  transition:transform .5s ease; max-width:15rem}
.book-obj:hover .book-obj__inner{transform:rotateY(-9deg)}
.book-obj__cover{display:block; width:100%; border-radius:2px 5px 5px 2px;
  box-shadow:
    inset 3px 0 0 rgba(255,255,255,.35),        /* light along the spine edge */
    inset 7px 0 9px -6px rgba(0,0,0,.55),        /* spine shadow */
    24px 26px 45px -20px rgba(0,0,0,.6);         /* the book's own shadow */
}
.book-obj__inner::after{                          /* the page block (right edge) */
  content:""; position:absolute; top:1.5%; right:-11px; width:11px; height:97%;
  background:repeating-linear-gradient(to right,#efe9db,#efe9db 1px,#d9d2c2 2px,#efe9db 3px);
  transform:rotateY(28deg); transform-origin:left center;
  box-shadow:2px 3px 6px -2px rgba(0,0,0,.35); border-radius:0 2px 2px 0;
}
.book-kicker,.book-by{font-family:var(--ff-nav)}
.book-kicker{text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--accent-2); margin:0 0 .3rem}
.book h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .3rem}
.book-by{font-style:italic; color:var(--muted); font-size:.96rem; margin:0 0 1.2rem}
.book-words p{font-size:1.06rem}
.book-links{margin-top:1.4rem}
.diary-quote{max-width:44rem; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 0; text-align:center}
.diary-quote blockquote{margin:0; padding:0; border:0}
.diary-quote blockquote::before{content:"\201C"; display:block; font-family:var(--ff-display);
  font-size:4.5rem; line-height:.4; color:var(--accent-2); opacity:.5; margin-bottom:.4rem}
.diary-quote p{font-family:var(--ff-display); font-style:italic; font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.4; color:var(--ink); margin:0 0 1rem}
.diary-quote cite{font-family:var(--ff-nav); font-style:normal; font-size:.82rem;
  letter-spacing:.06em; color:var(--muted)}
.her-more{max-width:44rem; margin:0 auto; padding:clamp(2.5rem,6vw,4rem) 0}
.held-note{font-style:italic; color:var(--muted); text-align:center; font-size:1.05rem}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line); margin-top:2rem;
  padding:clamp(2.5rem,6vw,4rem) var(--gap); text-align:center; background:var(--hero-bg)}
.epithet{font-family:var(--ff-display); font-size:1.3rem; color:var(--hero-ink); margin:0 0 .4rem}
.dates{font-family:var(--ff-nav); font-size:.82rem; letter-spacing:.06em; color:var(--muted); margin:0}
.foot-meta{margin:1rem 0 0; font-family:var(--ff-nav); font-size:.76rem}
.foot-meta a{color:var(--muted); text-decoration:none; letter-spacing:.08em; text-transform:uppercase}
.foot-meta a:hover{color:var(--ink)}

/* ---- theme switcher (preview only) ---- */
.theme-switch{position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.4rem; background:rgba(28,28,28,.9); color:#fff;
  padding:.45rem .55rem; border-radius:999px; z-index:99; backdrop-filter:blur(6px);
  box-shadow:0 8px 30px -8px rgba(0,0,0,.5); font-family:system-ui,sans-serif}
.theme-switch .ts-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.16em;
  opacity:.6; padding:0 .5rem}
.theme-switch button{font:inherit; font-size:.8rem; color:#fff; background:transparent;
  border:0; padding:.35rem .8rem; border-radius:999px; cursor:pointer; opacity:.7}
.theme-switch button:hover{opacity:1}
.theme-switch button.active{background:#fff; color:#1c1c1c; opacity:1; font-weight:600}

@media (max-width:720px){
  .intro,.page-head,.later{grid-template-columns:1fr}
  .intro-portrait,.ph-portrait,.later-img{max-width:20rem}
  .page-head .ph-portrait{order:-1}
  .orgs-cols{grid-template-columns:1fr}
  .book-panel{grid-template-columns:1fr; gap:2.5rem}
  .book-obj__inner{margin:0 auto}
  .att-list{columns:1}
  .tl-row{grid-template-columns:1fr; gap:.2rem}
  .tl-year{padding-top:0}
  .site-nav{gap:1rem}
}