:root {
  --bg: #f4f1ea; --paper: #fbfaf6; --ink: #1c2428; --muted: #5c6669;
  --line: #c9c7bd; --ember: #a64b32; --teal: #2d5967; --gold: #8a6427;
  --sage: #5f6745; --blue-soft: #dce8e9;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Libre Franklin", system-ui, sans-serif; }
.page { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; }
.hidden { display: none !important; }
.kicker { font: 600 12px/1.4 ui-monospace, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 8px; }
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.04em; margin: 0 0 12px; }
h2 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
h3 { font-size: 14px; margin: 0 0 6px; }
.masthead { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
.premise { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 720px; }
.muted { color: var(--muted); }
.card { background: var(--paper); border: 1px solid var(--line); padding: 22px;
  margin-bottom: 24px; }
.section-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 16px; }
.count { color: var(--muted); font-size: 15px; font-weight: 400; }
.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.org-grid p { margin: 0; line-height: 1.6; color: var(--muted); }
.hierarchy { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.hierarchy li { display: grid; grid-template-columns: 34px 220px 1fr auto; gap: 16px;
  align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.hierarchy li:first-child { border-top: 0; }
.hierarchy .level { font: 600 12px ui-monospace, monospace; color: var(--ember); }
.hierarchy .title { font-weight: 700; }
.hierarchy .holder { color: var(--muted); font-size: 13px; }
.hierarchy .resp { color: var(--muted); line-height: 1.5; margin: 0; }
.dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dept { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ember);
  padding: 18px; }
.dept.accent-teal { border-top-color: var(--teal); }
.dept.accent-gold { border-top-color: var(--gold); }
.dept.accent-sage { border-top-color: var(--sage); }
.dept .tagline { font-style: italic; color: var(--muted); margin: 2px 0 12px; }
.dept dl { margin: 0; display: grid; gap: 10px; }
.dept dt { font: 600 10px/1.3 ui-monospace, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.dept dd { margin: 2px 0 0; line-height: 1.55; }
.dept .dept-actions { display: flex; gap: 8px; margin-top: 14px; }
.stages { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stages li { display: grid; grid-template-columns: 34px 170px 1fr 130px auto; gap: 16px;
  align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.stages li:first-child { border-top: 0; }
.stages .num { font: 600 12px ui-monospace, monospace; color: var(--ember); }
.stages .title { font-weight: 700; }
.stages p { margin: 0; color: var(--muted); line-height: 1.5; }
.stages .timing { color: var(--muted); font-size: 13px; }
.btn { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--paper);
  padding: 9px 14px; }
.btn.primary { background: var(--ember); border-color: var(--ember); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.danger { border-color: var(--ember); color: var(--ember); }
.login { max-width: 460px; margin: 40px auto; }
.login label { display: block; margin: 14px 0; font-weight: 600; }
.login input { display: block; width: 100%; margin-top: 6px; padding: 10px;
  font: inherit; border: 1px solid var(--line); background: #fff; }
.error { color: var(--ember); font-size: 14px; }
.foot { color: var(--muted); font-size: 13px; line-height: 1.6; }
dialog { border: 1px solid var(--line); background: var(--paper); padding: 24px;
  width: min(560px, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
#editFields label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
#editFields input, #editFields textarea, #editFields select { display: block; width: 100%;
  margin-top: 5px; padding: 9px; font: inherit; border: 1px solid var(--line); background: #fff; }
#editFields textarea { min-height: 64px; resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) {
  .dept-grid, .org-grid { grid-template-columns: 1fr; }
  .hierarchy li { grid-template-columns: 28px 1fr; }
  .stages li { grid-template-columns: 28px 1fr; }
  .hierarchy .resp, .stages p { grid-column: 2; }
}