/* ============================================================
   SAGERESET · BASE
   Reset, typography scale, page shell. No component styles here.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding:0;
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h1{font-size:var(--t-display);line-height:var(--t-display-lh)}
h2{font-size:var(--t-h1);line-height:var(--t-h1-lh)}
h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);font-weight:400}
h4{font-size:var(--t-h3);line-height:var(--t-h3-lh);font-weight:400}
p{color:var(--ink-2)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--coral-deep);text-decoration:underline}
small{font-size:var(--t-small);line-height:var(--t-small-lh)}

.label{
  font-weight:600;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--ink-3);
}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3)}
.lede{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:600px}
.muted{color:var(--ink-3)}

/* ---------- shell ---------- */
.frame{background:var(--bg)}
.app{display:flex;align-items:stretch;height:100vh;overflow:hidden}
.main{flex:1;min-width:0;padding:var(--s-6) 34px var(--s-7);overflow-y:auto;height:100vh}
.col{max-width:var(--col-max)}

/* ---------- nav rail (injected by shell.js) ---------- */
.rail{height:100vh;overflow-y:auto;flex:0 0 auto;
  width:var(--rail-w);flex:0 0 var(--rail-w);align-self:stretch;
  border-right:1px solid var(--line);padding:var(--s-5) 0;
  background:var(--surface);
}
.rail .brand{font-family:var(--serif);font-size:23px;padding:0 20px var(--s-5)}
.rail .navgroup{margin-top:var(--s-4)}
.rail .navgroup .label{padding:0 20px var(--s-2);color:var(--ink);font-weight:700}
.rail a.nl{
  display:flex;align-items:center;gap:11px;margin:2px 10px;padding:9px 12px;
  font-size:13.5px;color:var(--ink-2);border-radius:0;
  text-decoration:none;transition:.14s;
}
.rail a.nl:hover{background:var(--surface-2);text-decoration:none}
.rail a.nl.sel{background:var(--primary-soft);color:var(--primary);font-weight:500}
.rail a.nl svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:0 0 17px}

/* ---------- page header ---------- */
.pagehead{padding-bottom:var(--s-5);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .eyebrow{color:var(--accent);margin-bottom:9px}
.pagehead .sub{margin-top:10px;max-width:560px}
.pagehead .ornament{position:absolute;right:-30px;top:-40px;width:300px;height:250px;
  opacity:var(--art-opacity);pointer-events:none}

/* ---------- utility ---------- */
.row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)}
.mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}

@media(max-width:1100px){.rail{display:none}}
@media(max-width:700px){.main{padding:var(--s-5) 18px}}

.col.wide{max-width:var(--col-wide)}

.app{min-height:100vh}