.site-bar,
.site-body{
  --sb-ink:#000; --sb-paper:#fff; --sb-hair:#9a9a9a; --sb-band:#ececec;
  --sb-head:'Cinzel',Georgia,serif;
  --sb-deco:'Cinzel Decorative','Cinzel',Georgia,serif;
  --sb-body:'EB Garamond',Georgia,serif;
}
html.dark .site-bar,
html.dark .site-body{
  --sb-ink:#ececec; --sb-paper:#161616; --sb-hair:#5a5a5a; --sb-band:#2a2a2a;
}

/* ---------- Sheet integration (separate-pages mode) ---------- */
html.has-sitebar{ --bar-h:48px; scroll-padding-top:var(--bar-h); }
@media (min-width:901px){
  html.has-sitebar #nav{ top:var(--bar-h); height:calc(100vh - var(--bar-h)); }
}

/* ---------- Top bar ---------- */
.site-bar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:6px;
  box-sizing:border-box; height:var(--bar-h,48px);
  padding:0 16px;
  background:var(--sb-paper); color:var(--sb-ink);
  border-bottom:3px double var(--sb-ink);
  font-family:var(--sb-body);
}
.site-bar *,
.site-bar *::before,
.site-bar *::after{ box-sizing:border-box; }

.sb-brand{
  font-family:var(--sb-deco); font-weight:700; font-size:16px; letter-spacing:.02em;
  line-height:1; white-space:nowrap; color:inherit; text-decoration:none;
  padding:6px 18px 6px 0; margin-right:6px;
  border-right:1px solid var(--sb-ink);
}
.sb-brand:hover{ text-decoration:underline; }

.sb-nav{ display:flex; align-items:stretch; align-self:stretch; gap:2px; }
.sb-link,
.sb-dd > .sb-btn{
  display:flex; align-items:center; gap:8px; height:100%;
  padding:0 12px; margin:0;
  font:600 11px/1 var(--sb-head); letter-spacing:.18em; text-transform:uppercase;
  color:var(--sb-ink); background:transparent; text-decoration:none;
  border:0; border-bottom:3px solid transparent; border-radius:0;
  cursor:pointer;
}
.sb-link:hover,
.sb-dd > .sb-btn:hover{ background:var(--sb-band); }
.sb-link.active,
.sb-dd.active > .sb-btn{ background:var(--sb-band); border-bottom-color:var(--sb-ink); }

.sb-dd{ position:relative; display:flex; }
.sb-dd > .sb-btn::after{
  content:""; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .12s;
}
.sb-dd.open > .sb-btn::after{ transform:rotate(180deg); }
.sb-label{ display:none; }

.sb-menu{
  display:none; position:absolute; top:100%; left:0; z-index:5;
  min-width:260px; margin:0; padding:0; list-style:none;
  background:var(--sb-paper); border:2px solid var(--sb-ink);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.sb-dd.open .sb-menu{ display:block; }
.sb-menu a{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:9px 12px; color:var(--sb-ink); text-decoration:none;
  font:600 11px/1.2 var(--sb-head); letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--sb-hair);
}
.sb-menu li:last-child a{ border-bottom:0; }
.sb-menu a em{ font:italic 400 14px/1 var(--sb-body); letter-spacing:0; text-transform:none; opacity:.7; }
.sb-menu a:hover,
.sb-menu a:focus-visible{ background:var(--sb-ink); color:var(--sb-paper); outline:0; }
.sb-menu a[aria-current="page"]{ background:var(--sb-band); }
.sb-menu a[aria-current="page"]:hover{ background:var(--sb-ink); }

.sb-here{
  align-self:center; margin-left:10px; padding-left:14px;
  border-left:1px solid var(--sb-hair);
  font:italic 400 16px/1 var(--sb-body); white-space:nowrap; opacity:.85;
}

.sb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sb-btn.sb-theme,
.sb-burger{
  font:600 11px/1 var(--sb-head); letter-spacing:.18em; text-transform:uppercase;
  color:var(--sb-ink); background:var(--sb-paper);
  border:1px solid var(--sb-ink); border-radius:0;
  padding:7px 11px; cursor:pointer;
}
.sb-btn.sb-theme:hover,
.sb-burger:hover{ background:var(--sb-band); }
.sb-burger{ display:none; }
.sb-gear{ display:flex; align-items:center; justify-content:center; padding:5px 8px; }
.sb-gear svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sb-dialog{ margin:12vh auto 0; border:2px solid var(--sb-ink); padding:0; background:var(--sb-paper); color:var(--sb-ink); width:min(420px,94vw); font:15px/1.35 var(--sb-body); }
.sb-dialog::backdrop{ background:rgba(0,0,0,.45); }
.sb-dh{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:2px solid var(--sb-ink); }
.sb-dh h3{ flex:1; margin:0; font:600 13px var(--sb-head); letter-spacing:.14em; text-transform:uppercase; }
.sb-dh .sb-btn{ font:600 11px var(--sb-head); letter-spacing:.1em; text-transform:uppercase; color:var(--sb-ink); background:var(--sb-paper); border:1.5px solid var(--sb-ink); padding:7px 12px; cursor:pointer; }
.sb-db{ padding:12px 14px; display:grid; gap:8px; }
.sb-db p{ margin:0; font-size:13px; opacity:.75; }
.sb-chk{ display:flex; align-items:center; gap:8px; font:600 11px var(--sb-head); letter-spacing:.1em; text-transform:uppercase; }

.site-bar a:focus-visible,
.site-bar button:focus-visible{ outline:2px solid var(--sb-ink); outline-offset:-4px; }

@media (max-width:1100px){ .sb-here{ display:none; } }

@media (max-width:900px){
  .sb-burger{ display:block; }
  .sb-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:5;
    flex-direction:column; align-items:stretch; gap:0; align-self:auto;
    padding:6px 16px 10px; background:var(--sb-paper);
    border-bottom:3px double var(--sb-ink);
  }
  .site-bar.open .sb-nav{ display:flex; }
  .sb-link,
  .sb-dd > .sb-btn{ height:auto; padding:12px 4px; border-bottom:1px solid var(--sb-hair); }
  .sb-dd{ flex-direction:column; }
  .sb-dd > .sb-btn{ display:none; }
  .sb-label{
    display:block; margin:12px 0 4px;
    font:600 11px/1 var(--sb-head); letter-spacing:.18em; text-transform:uppercase;
  }
  .sb-menu{ display:block; position:static; min-width:0; border:0; box-shadow:none; }
  .sb-menu a{ padding:12px 4px; }
}
@media (max-width:480px){
  .site-bar{ padding:0 12px; }
  .sb-brand{ font-size:14px; padding-right:12px; }
}
@media print{ .site-bar{ display:none !important; } }

/* ---------- Shell (iframe mode) ---------- */
html.site-shell,
html.site-shell body{ height:100%; }
body.site-body.shell{ display:flex; flex-direction:column; overflow:hidden; }
html.site-shell{ --bar-h:48px; }
.shell .site-bar{ position:relative; flex:0 0 auto; }
.shell #stage{ position:relative; flex:1 1 auto; min-height:0; }
.shell #sheet-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--sb-paper); }
.shell #home{ position:absolute; inset:0; overflow:auto; }
.shell [hidden]{ display:none !important; }

/* ---------- Home page ---------- */
body.site-body{
  margin:0; background:var(--sb-paper); color:var(--sb-ink);
  font-family:var(--sb-body); font-size:18px; line-height:1.45;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
html.dark body.site-body{ color-scheme:dark; }

.site-home{
  max-width:1000px; margin:0 auto;
  padding:48px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left));
}
.home-hero{ text-align:center; padding-bottom:20px; border-bottom:3px double var(--sb-ink); }
.home-hero h1{
  margin:0; font:700 clamp(30px,6vw,46px)/1.1 var(--sb-deco); letter-spacing:.02em;
  text-wrap:balance;
}
.home-hero p{
  margin:12px 0 0; font:600 11px/1.4 var(--sb-head); letter-spacing:.2em; text-transform:uppercase;
}

.home-h2{
  display:flex; align-items:center; gap:10px; margin:36px 0 16px;
  font:600 12px/1 var(--sb-head); letter-spacing:.18em; text-transform:uppercase;
}
.home-h2::before,
.home-h2::after{ content:""; flex:1; border-top:1px solid var(--sb-ink); }

.sys-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:20px;
}
.sys-card{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:0 0 16px; color:var(--sb-ink); text-decoration:none;
  background:var(--sb-paper); border:2px solid var(--sb-ink);
  transition:transform .12s, box-shadow .12s;
}
.sys-card:hover,
.sys-card:focus-visible{
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--sb-ink); outline:0;
}
.sys-tag{
  padding:7px 14px; background:var(--sb-ink); color:var(--sb-paper);
  font:600 11px/1 var(--sb-head); letter-spacing:.2em; text-transform:uppercase;
}
.sys-name{
  padding:6px 14px 0; font:700 22px/1.15 var(--sb-deco); text-wrap:balance;
}
.sys-blurb{ padding:0 14px; flex:1; }
.sys-open{
  align-self:flex-start; margin:4px 14px 0; padding:7px 11px;
  font:600 11px/1 var(--sb-head); letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--sb-ink);
}
.sys-card:hover .sys-open,
.sys-card:focus-visible .sys-open{ background:var(--sb-ink); color:var(--sb-paper); }

.home-note{ margin:28px 0 0; text-align:center; font-style:italic; opacity:.8; }

@media (prefers-reduced-motion:reduce){
  .sys-card,.sb-dd > .sb-btn::after{ transition:none; }
}