/* site.css — chrome, the leaf, and the page components.
   Lifted from docs/design/approved-mockup-home-and-vision.html (third pass, approved
   7 August 2026). Colour and type come from tokens.css and are never hardcoded here.

   The governing rule: navy is the cover, bone and gold is the leaf. */

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* ---------- NAVY CHROME (the cover) ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px 42px;background:var(--navy);color:var(--navy-fg);
}
.nav .brand{
  font-family:var(--caps);font-size:12.5px;letter-spacing:.15em;
  color:inherit;text-decoration:none;
}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;}
.nav li{margin:0;}
.nav ul a{
  font-family:var(--util);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:inherit;text-decoration:none;opacity:.58;
}
.nav ul a:hover{opacity:.85;}
.nav ul a[aria-current="page"]{opacity:1;}

.band{
  background:var(--navy);color:var(--navy-fg);text-align:center;
  padding:46px 42px 44px;position:relative;
}
.band:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
}
.band img{width:104px;height:104px;display:block;margin:0 auto 24px;}
.band h1{
  font-family:var(--caps);font-size:var(--fs-mast);line-height:1.14;
  letter-spacing:var(--ls-caps);margin:0 0 18px;font-weight:400;color:#F3EEE2;
  text-wrap:balance;
}
.band .standing{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;margin:0;color:var(--navy-gold);
}

/* ---------- BONE INTERIOR PAGE (the leaf) ---------- */
.leaf{padding:16px;}
.page{
  border:1px solid var(--gold);box-shadow:0 0 0 1px var(--gold) inset;
  outline:3px solid var(--bone);outline-offset:-5px;padding:0 0 4px;
}
.runhead{
  display:flex;justify-content:space-between;gap:20px;padding:13px 34px 0;
  font-family:var(--caps);font-size:9px;letter-spacing:.1em;
}
.folio{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:6px 34px 16px;font-family:var(--caps);font-size:11px;
}
.folio .orn{flex:1;display:flex;align-items:center;gap:14px;}
.folio .orn:before,.folio .orn:after{content:"";flex:1;height:1px;background:var(--slate);}
.folio .orn b{color:var(--orn);font-size:15px;font-weight:400;line-height:1;}

.body-pad{padding:38px var(--leaf-pad) 30px;}
.lede{
  max-width:58ch;margin:0 auto 28px;text-align:center;
  font-size:var(--fs-body);line-height:1.78;
}
.cta{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.btn{
  font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 28px;text-decoration:none;display:inline-block;
  background:var(--navy);color:var(--navy-fg);border:1px solid var(--navy);
}
.btn:hover{background:var(--steel);border-color:var(--steel);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--bone);}
.tlink{
  font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gold-ui);
  padding-bottom:3px;opacity:.75;
}
.tlink:hover{opacity:1;}

.sec-rule{display:flex;align-items:center;gap:16px;margin:34px var(--leaf-pad) 26px;}
.sec-rule:before,.sec-rule:after{content:"";flex:1;height:1px;background:var(--gold);opacity:.55;}
.sec-rule span{font-family:var(--caps);font-size:10px;letter-spacing:.2em;}

/* ---------- the issue card ---------- */
.issue{
  display:grid;grid-template-columns:146px 1fr;gap:34px;align-items:start;
  padding:0 var(--leaf-pad) 26px;
}
.issue>a{display:block;}
.issue img.cv{width:100%;height:auto;display:block;box-shadow:0 2px 16px rgba(19,12,0,.3);}
.issue h2{font-family:var(--caps);font-size:.95rem;letter-spacing:.1em;margin:0 0 3px;font-weight:400;}
.issue .theme{font-style:italic;font-size:1.22rem;color:var(--steel);margin:0 0 3px;}
.issue .sub{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;opacity:.58;margin:0 0 15px;
}
.toc{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;}
.toc li{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  font-size:var(--fs-small);padding-bottom:6px;border-bottom:1px solid var(--hairline);
}
.toc li i{font-style:normal;}
.toc li i em{display:block;font-style:italic;font-size:12px;opacity:.62;margin-top:1px;}
.toc li span{
  font-family:var(--util);font-size:var(--fs-label);opacity:.55;
  font-variant-numeric:tabular-nums;
}
.flip{
  font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--orn-text);
}
.flip:after{content:"";width:28px;height:1px;background:currentColor;}

/* ---------- THE ISSUES INDEX ----------
   Correct with one volume and still correct with twenty. auto-FIT, not auto-fill:
   empty tracks collapse, so a single volume centres itself instead of hugging the
   left edge of a row of ghosts. Twenty volumes still fill the rows. */
.vol-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  justify-content:center;gap:40px 48px;padding:8px var(--leaf-pad) 4px;
}
.vol{display:block;text-decoration:none;color:inherit;}
.vol img{
  width:100%;height:auto;display:block;margin-bottom:14px;
  box-shadow:0 2px 16px rgba(19,12,0,.3);
}
.vol h2{font-family:var(--caps);font-size:.9rem;letter-spacing:.1em;margin:0 0 3px;font-weight:400;}
.vol .theme{font-style:italic;font-size:1.1rem;color:var(--steel);margin:0 0 4px;}
.vol .sub{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;opacity:.58;margin:0 0 10px;
}
.vol .more{
  font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orn-text);display:inline-flex;align-items:center;gap:10px;
}
.vol .more:after{content:"";width:24px;height:1px;background:currentColor;}
.vol:hover .more:after{width:38px;}
.forthcoming{
  padding:18px var(--leaf-pad) 4px;font-style:italic;opacity:.62;
  font-size:var(--fs-small);margin:0;text-align:center;
}

/* ---------- AN ISSUE PAGE ---------- */
.ititle{text-align:center;padding:40px var(--leaf-pad) 4px;}
.ititle h1{
  font-family:var(--caps);font-size:var(--fs-h2);letter-spacing:.06em;
  margin:0 0 10px;font-weight:400;
}
.ititle .theme{font-style:italic;font-size:1.3rem;color:var(--steel);margin:0 0 6px;}
.ititle .sub{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;margin:0;color:var(--orn-text);
}
.contents{padding:0 var(--leaf-pad) 10px;}
.contents .toc li{font-size:var(--fs-body);padding-bottom:9px;}
.contents .toc{gap:11px;max-width:var(--measure);margin:0 auto 18px;}

/* ---------- VISION PAGE ---------- */
.vtitle{text-align:center;padding:44px var(--leaf-pad) 6px;}
.vtitle h1{
  font-family:var(--caps);font-size:var(--fs-h2);letter-spacing:.06em;
  margin:0 0 12px;font-weight:400;
}
.vtitle p{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;margin:0;color:var(--orn-text);
}
.prose{
  max-width:var(--measure);margin:0 auto;padding:26px var(--leaf-pad) 0;
  font-size:var(--fs-body);line-height:1.82;
}
.prose p{margin:0 0 17px;}
/* links inside running prose stay in the sentence — .tlink is for standalone calls to
   action and turns mid-paragraph text into shouting caps. */
.prose a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-ui);}
.prose a:hover{border-bottom-width:2px;}
.prose .cap{
  float:left;font-family:var(--caps);font-size:46px;line-height:.88;color:var(--gold-ui);
  margin:6px 12px 0 0;
}
.pull{
  margin:30px auto;max-width:52ch;text-align:center;padding:24px 20px;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
}
.pull q{font-style:italic;font-size:1.24rem;line-height:1.55;display:block;margin-bottom:10px;quotes:none;}
.pull cite{
  font-family:var(--util);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-style:normal;opacity:.6;
}
.fresco{
  margin:30px var(--leaf-pad);height:160px;
  background-image:url("../img/fresco-creator.webp");
  background-size:cover;background-position:center 15%;border:1px solid var(--orn);
}
.twocol{display:grid;gap:32px;padding:4px var(--leaf-pad) 10px;}
@media(min-width:860px){.twocol{grid-template-columns:1fr 1fr;gap:46px;}}
.twocol h2{font-family:var(--caps);font-size:.82rem;letter-spacing:.14em;margin:0 0 10px;font-weight:400;}
.twocol p{margin:0 0 12px;font-size:15.5px;line-height:1.74;}

/* ---------- SUPPORT ---------- */
.funds{
  list-style:none;margin:0 auto 6px;padding:0;max-width:var(--measure);
  display:grid;gap:0;
}
/* a fixed label column, so the descriptions start on one line rather than
   stepping in and out with the length of each label */
.funds li{
  border-top:1px solid var(--hairline);padding:14px 0 13px;
  display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:baseline;
}
@media (max-width:720px){
  .funds li{grid-template-columns:1fr;gap:5px;}
}
.funds li:last-child{border-bottom:1px solid var(--hairline);}
.funds b{
  font-family:var(--caps);font-size:.78rem;letter-spacing:.12em;font-weight:400;
  color:var(--orn-text);
}
.funds span{font-size:var(--fs-small);line-height:1.7;}

.give-pending{
  max-width:52ch;margin:0 auto;padding:24px 26px 26px;text-align:center;
  border:1px solid var(--gold);
}
.give-pending p{margin:0 0 18px;font-size:var(--fs-small);line-height:1.75;}

.join{max-width:var(--measure);margin:0 auto;padding:0 var(--leaf-pad);}
.join h2{font-family:var(--caps);font-size:.82rem;letter-spacing:.14em;margin:0 0 10px;font-weight:400;}
.join p{margin:0 0 14px;font-size:var(--fs-small);line-height:1.75;}

/* ---------- READ ---------- */
.pieces{list-style:none;margin:0 auto 8px;padding:0;max-width:var(--measure);}
.pieces li{border-bottom:1px solid var(--hairline);}
.pieces a{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:14px 0 12px;text-decoration:none;color:inherit;
}
.pieces a:hover .t{color:var(--orn-text);}
.pieces .t{font-size:var(--fs-body);}
.pieces .by{display:block;font-style:italic;font-size:12.5px;opacity:.62;margin-top:2px;}
.pieces .go{
  font-family:var(--util);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--orn-text);white-space:nowrap;
}

/* ---------- THE READER ----------
   Styled here, driven by js/viewer.js. Nothing in this block names the flip library. */
.viewer{padding:6px var(--leaf-pad) 10px;}
.viewer-stage{ width:100%; margin:0 auto; }
.viewer-stage .leafpage{ width:100%; height:100%; background:var(--bone); overflow:hidden; }
.viewer-stage .leafpage img{ width:100%; height:100%; display:block; object-fit:contain; }
.viewer-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:0; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;   /* the ‹ › buttons are the affordance */
}
.viewer-track::-webkit-scrollbar{ display:none; }
.viewer-track .viewer-leaf{
  flex:0 0 100%; width:100%; height:auto; scroll-snap-align:start; display:block;
}
.viewer-bar{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:18px 0 4px; flex-wrap:wrap;
}
.viewer-btn{
  font-family:var(--body); font-size:20px; line-height:1;
  background:transparent; border:1px solid var(--gold-ui); color:var(--ink);
  width:38px; height:38px; cursor:pointer;
}
.viewer-btn:hover{ background:var(--gold-ui); color:var(--bone); }
.viewer-count{
  font-family:var(--util); font-size:11px; letter-spacing:.16em;
  font-variant-numeric:tabular-nums; opacity:.65;
}
.viewer-dl{
  font-family:var(--util); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orn-text); text-decoration:none; border-bottom:1px solid var(--orn-text); padding-bottom:3px;
}
.viewer-fallback{ padding:30px; text-align:center; }

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--navy); color:var(--navy-fg);
  padding:34px var(--leaf-pad); text-align:center;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.site-footer .f-mark{
  font-family:var(--caps); font-size:12px; letter-spacing:.14em; margin:0;
}
.site-footer .f-links{
  display:flex; gap:26px; list-style:none; margin:0; padding:0; flex-wrap:wrap;
  justify-content:center;
}
.site-footer .f-links a{
  font-family:var(--util); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--navy-gold); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.site-footer .f-links a:hover{ border-bottom-color:var(--navy-gold); }
.site-footer .f-fine{
  font-size:13px; opacity:.6; margin:0; max-width:52ch;
}

/* ---------- phones: the leaf loses its margins, the nav stacks ---------- */
@media (max-width: 720px){
  :root{ --leaf-pad:22px; }
  .leaf{ padding:8px; }
  .nav{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px 22px; }
  .nav ul{ flex-wrap:wrap; gap:16px; }
  .band{ padding:32px 22px 30px; }
  .band img{ width:78px; height:78px; }
  .issue{ grid-template-columns:1fr; }
  .issue img.cv{ max-width:180px; }
  .twocol{ grid-template-columns:1fr; }
}

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

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