/* MASK desktop — base layout & typography. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--fs-3);
  line-height:var(--lh-body);
  font-variant-numeric:oldstyle-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--oxblood)}
h1,h2,h3,h4{margin:0;font-weight:600}
::selection{background:var(--gold-wash)}
mark{background:var(--gold-wash);color:var(--ink);padding:0 2px;border-radius:2px;
  box-shadow:inset 0 -2px 0 var(--gold)}

/* ---- app frame: sidebar | main (drawer overlays from the right) -------- */
.frame{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.main{min-width:0;padding:0 clamp(24px,4vw,64px) 96px;position:relative}
.content{max-width:1240px;margin:0 auto}
.content.narrow{max-width:880px}

/* ---- sidebar ------------------------------------------------------------ */
.sidebar{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--paper-sunken);
  border-right:1px solid var(--rule);
  padding:26px 0 18px;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;
}
.masthead{padding:0 22px 18px}
.masthead .wordmark{
  font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.5px;
  font-variation-settings:"opsz" 100;line-height:1;
}
.masthead .wordmark a:hover{color:var(--ink)}
.masthead .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px;
}
.navsec{padding:12px 0 4px}
.navsec .navlabel{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);padding:0 22px;margin-bottom:6px;
}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:7px 22px;border-left:3px solid transparent;
  font-family:var(--ui);font-size:var(--fs-1);color:var(--ink-2);
}
.nav a .glyph{width:16px;text-align:center;color:var(--ink-3);font-size:13px}
.nav a:hover{color:var(--ink);background:var(--paper)}
.nav a.active{
  color:var(--ink);border-left-color:var(--oxblood);
  background:var(--paper);font-weight:600;
}
.nav a .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* case file-tabs in the sidebar */
.filetabs{display:flex;flex-direction:column;gap:2px;padding:2px 14px 6px}
.filetab{
  display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:var(--radius);
  border:1px solid transparent;font-family:var(--ui);font-size:var(--fs-1);color:var(--ink-2);
}
.filetab:hover{border-color:var(--rule);background:var(--paper)}
.filetab.active{background:var(--paper-raised);border-color:var(--rule);color:var(--ink);font-weight:600}
.filetab .dot{width:8px;height:8px;border-radius:50%;flex:none;align-self:center}
.filetab .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.casedot-1{background:var(--case1)} .casedot-2{background:var(--case2)}
.casedot-3{background:var(--case3)} .casedot-4{background:var(--case4)}

.sidebar .foot{margin-top:auto;padding:14px 22px 0;border-top:1px solid var(--rule)}
.kbdhint{font-family:var(--ui);font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center;cursor:pointer}
.kbdhint:hover{color:var(--ink)}
kbd{
  font-family:var(--mono);font-size:10.5px;background:var(--paper-raised);
  border:1px solid var(--rule-strong);border-bottom-width:2px;border-radius:4px;
  padding:1.5px 6px;color:var(--ink-2);
}

/* ---- page top ----------------------------------------------------------- */
.pagetop{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0 0;
}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3)}
.crumbs a:hover{color:var(--oxblood)}
.crumbs .sep{margin:0 7px;color:var(--rule-strong)}
.pagetop .tools{display:flex;gap:10px;align-items:center}

/* ---- headings & sections ------------------------------------------------ */
.pagehead{padding:26px 0 8px;border-bottom:2px solid var(--ink);margin-bottom:8px}
.pagehead h1{
  font-family:var(--display);font-size:var(--fs-6);font-weight:600;line-height:1.08;
  font-variation-settings:"opsz" 60;letter-spacing:.1px;
}
.pagehead .sub{font-size:var(--fs-2);font-style:italic;color:var(--ink-2);margin-top:8px;max-width:var(--measure)}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-3);
}
section.sect{margin:38px 0 0}
.sect>h2{
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:baseline;gap:12px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);margin-bottom:14px;
}
.sect>h2 .n{font-family:var(--mono);font-weight:400;color:var(--ink-3);font-size:11px;letter-spacing:0}
.sect>h2 .more{margin-left:auto;font-family:var(--ui);font-weight:500;font-size:12px;
  letter-spacing:.2px;text-transform:none;color:var(--ink-3)}
.sect>h2 .more:hover{color:var(--oxblood)}
.prose{max-width:var(--measure)}
.prose p{margin:.5em 0}

/* two-column dossier body: main + meta rail */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,64px)}
@media (max-width:1180px){.cols{grid-template-columns:1fr}}
.railcol .sect{margin-top:26px}

.small{font-size:var(--fs-1)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.mono{font-family:var(--mono);letter-spacing:-.1px;font-variant-numeric:tabular-nums lining-nums}
.ui{font-family:var(--ui)}
.nowrap{white-space:nowrap}
hr.rule{border:0;border-top:1px solid var(--rule);margin:26px 0}