/* =====================================================================
   Analyst Department · the department register
   ---------------------------------------------------------------------
   The site is the department's register: every member has a file, every
   rank is a section, every event and promotion is an entry with a date.
   The design borrows from record keeping, not from app templates:
     - two inks on paper: near-black for text, sage (#85a16b) for the
       department's own mark; a night version of the same paper
     - Schola (Century Schoolbook) for titles and figures, the face of
       court records and forms; Instrument Sans for the interface; IBM
       Plex Mono for file numbers, codes and times
     - ruled ledgers instead of cards: hairlines between entries, a heavy
       rule over each section, a double rule under the masthead
     - square corners, no gradients, no glows, no shadows except on things
       that float (menus, dialogs)
   Colours are tokens below; light is the default, [data-theme="dark"]
   is the night version (set in index.html before anything paints).
   ===================================================================== */

/* ---------- Fonts (self-hosted; licences in /assets/fonts) ---------- */
@font-face { font-family: "Schola"; src: url("/assets/fonts/schola-regular.woff2") format("woff2"), url("/assets/fonts/schola-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url("/assets/fonts/schola-bold.woff2") format("woff2"), url("/assets/fonts/schola-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url("/assets/fonts/schola-italic.woff2") format("woff2"), url("/assets/fonts/schola-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-regular.woff2") format("woff2"), url("/assets/fonts/instrument-sans-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-bold.woff2") format("woff2"), url("/assets/fonts/instrument-sans-bold.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2"), url("/assets/fonts/instrument-sans-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-regular.woff2") format("woff2"), url("/assets/fonts/plex-mono-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-bold.woff2") format("woff2"), url("/assets/fonts/plex-mono-bold.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }

/* ---------- Tokens: the Analyst look (dark only) ----------
   Near-black surfaces, TVA orange for the department's mark and every interactive accent, rounded cards
   with soft depth. The old names (paper, sheet, sage …) are kept so every screen picks the new look up. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A0A0C;          /* the page (analyst.css lays the gradient over it) */
  --sheet: #141317;          /* cards, fields, tables */
  --well: #1C1B20;           /* hover, header rows, quiet fills */
  --ink: #ECE8E3;
  --ink-2: #CFCAC4;
  --muted: #A39E97;
  --faint: #6E6A66;
  --placeholder: #8F8A84;
  --rule: rgba(255, 255, 255, .07);
  --rule-2: rgba(255, 255, 255, .13);
  --rule-ink: rgba(232, 144, 50, .45);

  --sage: #E89032;           /* the department's mark: TVA orange */
  --sage-ink: #F0B46E;       /* orange as text on dark */
  --sage-deep: #FFC98F;
  --sage-wash: rgba(232, 144, 50, .14);
  --on-sage: #1A0C00;
  --deep-orange: #B85C00;
  --bright-orange: #FF6A00;

  --bad: #FF8F7A;   --bad-wash: rgba(255, 110, 80, .10);  --bad-line: rgba(255, 120, 80, .35);  --bad-solid: #D2452B;
  --warn: #F5C46A;  --warn-wash: rgba(245, 196, 106, .10); --warn-line: rgba(245, 196, 106, .35);
  --info: #93B6E3;  --info-wash: rgba(147, 182, 227, .10); --info-line: rgba(147, 182, 227, .35);
  --gold: #F0B46E;  --gold-wash: rgba(240, 180, 110, .12); --gold-line: rgba(240, 180, 110, .40); --gold-solid: #E89032;
  --violet: #A78BFA;   --violet-wash: rgba(167, 139, 250, .12);  --violet-line: rgba(167, 139, 250, .40);
  --silver: #E8E6E3;   --silver-wash: rgba(232, 230, 227, .10);  --silver-line: rgba(232, 230, 227, .35);
  --former: #E0A39A;
  --teal: #2DD4BF;  --teal-wash: rgba(45, 212, 191, .12);  --teal-line: rgba(45, 212, 191, .40);
  --orange: #F0B46E; --orange-wash: rgba(232, 144, 50, .12); --orange-line: rgba(232, 144, 50, .40);
  --on-gold: #1A0C00;

  /* tiers: Low Rank, Middle, Upper, Executive, Central */
  --t-lr: #2DD4BF; --t-mr: #A78BFA; --t-hr: #FF4D6D; --t-ex: #FFA53D; --t-lead: #FF6A00;

  --focus: #F0B46E;
  --bar: rgba(232, 144, 50, .55);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .45), 0 30px 60px -30px rgba(0, 0, 0, .95);
  --scrim: rgba(4, 4, 6, .66);
  --toast-bg: #26221F; --toast-ink: #FFD1A3;

  --serif: "Sora", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --bar-in-h: 64px;
  --conf-h: 0px;
  --bar-h: calc(var(--bar-in-h) + var(--conf-h));
  --gutter: clamp(16px, 3.2vw, 48px);
  --maxw: clamp(1200px, 86vw, 1440px);
  --r: 12px;                 /* controls */
  --r-sm: 999px;             /* labels: pills */
  --r-card: 20px;            /* cards */

  --bg: var(--paper); --surface: var(--sheet); --raised: var(--sheet); --line: var(--rule); --line-soft: var(--rule);
  --accent: var(--sage); --accent-hi: var(--sage-ink); --accent-lo: var(--sage); --accent-wash: var(--sage-wash);
  --display: var(--serif); --body: var(--sans);
  --panel: var(--sheet); --panel-line: var(--rule); --panel-line-hi: var(--sage);
}

/* Tier colour for one element: chips, career strip, numbers. */
.t-lr, .tk-LR { --tc: var(--t-lr); } .t-mr, .tk-MR { --tc: var(--t-mr); } .t-hr, .tk-HR { --tc: var(--t-hr); } .tk-WC { --tc: var(--t-lead); }
.t-ex { --tc: var(--t-ex); } .t-lead { --tc: var(--t-lead); }
/* text laid on a tier colour: the tiers are dark on paper, light at night */
:is(.t-lr, .t-mr, .t-hr, .t-ex, .t-lead) { --on-tc: var(--sheet); }
:root[data-theme="dark"] :is(.t-lr, .t-mr, .t-hr, .t-ex, .t-lead) { --on-tc: var(--on-sage); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Text scales a little on wide screens: 16px up to about 1600px wide, then up to 19px. */
html { font-size: clamp(100%, calc(0.35vw + 10.4px), 118.75%); }
html { background: var(--paper); scroll-padding-top: calc(var(--bar-h) + 72px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  /* a column, so the footer sits at the bottom of short pages */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; outline: none; padding-bottom: 80px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
img { max-width: 100%; }
mark { background: color-mix(in srgb, var(--sage) 32%, transparent); color: inherit; padding: 0 1px; }
::selection { background: color-mix(in srgb, var(--sage) 40%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 14px; background: var(--ink); color: var(--paper); border-radius: var(--r); }
.skip:focus { left: 8px; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ---------- Type ---------- */
.display, .page-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance;
}
.page-title { font-size: clamp(2.1rem, 4.2vw, 3rem); }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: .06em; }
.kicker, .dateline { color: var(--muted); font-size: .9rem; }
.lead-note { color: var(--ink-2); margin-top: 12px; max-width: 64ch; }
.hint, .muted-note { color: var(--muted); font-size: .875rem; }
.empty { color: var(--muted); padding: 10px 0; }
.loading { color: var(--muted); padding-top: 72px; }
.err { padding-top: 72px; padding-bottom: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.err p { max-width: 52ch; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }

/* A section: heading over a heavy rule, entries ruled below. */
.block { padding-top: 48px; }
.block.first { padding-top: 32px; }
.block > h2, .block-h, .sec-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  border-top: 2px solid var(--rule-ink); padding-top: 10px; margin-bottom: 18px;
}
.block > h2, .block-h h2, .sec-h h2 { font-family: var(--serif); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.005em; }
.block-h h2 { margin: 0; }
.block h3 { font-size: .8125rem; font-weight: 700; color: var(--ink-2); margin: 22px 0 8px; letter-spacing: .01em; }
.block h2 .count, .sec-h .count { font-family: var(--sans); font-size: .875rem; font-weight: 400; color: var(--muted); }
.sub { color: var(--muted); font-size: .875rem; margin-top: 12px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 56px; }

/* ---------- Masthead ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 3px double var(--rule-ink); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--bar-in-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font-family: var(--serif); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.005em; white-space: nowrap; }
.brand::before { content: none; }
/* Staff and leadership pages say so next to the name: they're internal. */
body.e-mode .brand::after { content: "Internal"; margin-left: 2px; padding: 0 5px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .62rem; font-weight: 400; letter-spacing: .04em; line-height: 1.7; color: var(--muted); }
.bar nav { display: flex; align-items: stretch; height: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { position: relative; display: flex; align-items: center; padding: 0 11px; color: var(--ink-2); font-size: .9375rem; white-space: nowrap; }
.bar nav a:hover { color: var(--ink); }
.bar nav a.on { color: var(--ink); font-weight: 700; }
.bar nav a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--sage); }
.bar nav a.acct-link { margin-left: 10px; }
.bar nav a.acct-link::before { content: ""; position: absolute; left: -6px; top: 50%; height: 18px; margin-top: -9px; border-left: 1px solid var(--rule-2); }
.bar nav a.ext::after { content: "\2197"; margin-left: 4px; font-size: .8em; opacity: .7; }
/* When the links don't fit (phones, narrow windows) the row scrolls; fade the edge that has more past it. */
.bar nav.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.bar nav.more-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.bar nav.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* Signed in, the masthead has more links: a little tighter on smaller desktops so they all fit */
@media (max-width: 1500px) { .bar nav a { padding: 0 9px; } .bar nav a.on::after { left: 9px; right: 9px; } }
/* Laptop widths: tighten the masthead so every link still fits on one line */
@media (max-width: 1180px) {
  .brand { font-size: 1.0625rem; }
  .bar nav a { padding: 0 8px; }
  .bar nav a.on::after { left: 8px; right: 8px; }
}
@media (max-width: 1060px) { body.e-mode .brand::after { display: none; } }

/* Internal pages (staff and leadership): a confidential band under the header. The header is sticky, so it stays
   in view, and in any screenshot. On phones the header scrolls away, so the band sits at the bottom of the screen. */
body.e-mode { --conf-h: 22px; --bar-h: calc(var(--bar-in-h) + var(--conf-h)); }
body.e-mode .bar::after {
  content: "Confidential \2014  do not share"; display: block; height: var(--conf-h); line-height: var(--conf-h); padding: 0 var(--gutter);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; text-transform: uppercase;
  font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .16em; color: var(--bad);
  background: var(--bad-wash); border-top: 1px solid var(--bad-line);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (max-width: 860px) {
  :root { --bar-in-h: 93px; }
  .bar { position: relative; }
  body.e-mode { padding-bottom: var(--conf-h); }
  body.e-mode .bar::after { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; border-top: 1px solid var(--bad-line); }
  body.e-mode .e-undo, body.e-mode .adm-toast { bottom: calc(24px + var(--conf-h)); }
  .bar-in { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding-left: 0; padding-right: 0; }
  .brand { height: 50px; padding: 0 var(--gutter); font-size: 1.0625rem; border-bottom: 1px solid var(--rule); }
  .brand::before { width: 28px; height: 28px; }
  .bar nav { height: 42px; padding: 0 calc(var(--gutter) - 10px); }
  .bar nav a { padding: 0 10px; font-size: .9375rem; }
  .bar nav a.on::after { left: 10px; right: 10px; }
  html { scroll-padding-top: 96px; }
  .tools { top: 0; }
}

/* ---------- Footer ---------- */
.site-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-top: 8px;
  padding-top: 18px; padding-bottom: 28px; color: var(--muted); font-size: .875rem;
  /* hairline the width of the text column, not the padded box */
  background: linear-gradient(var(--rule), var(--rule)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px; }
.site-foot a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--ink); }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.site-foot .linkish { color: var(--ink-2); font-size: inherit; padding: 3px 0; margin: -3px 0; }
body.e-mode .site-foot, body.app-mode .site-foot { display: none; }
.foot-text { max-width: none; color: inherit; line-height: inherit; }
.foot-text > * + * { margin-top: .3em; }

/* Theme switch: Auto / Light / Dark */
.theme-sw { display: inline-flex; align-items: center; gap: 2px; }
.theme-sw > span { margin-right: 6px; color: var(--muted); }
.theme-sw button { border: 0; background: none; padding: 4px 6px; margin: -2px 0; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); font-size: inherit; }
.theme-sw button:hover { color: var(--ink); }
.theme-sw button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sage); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Links and buttons ---------- */
.link, .site-text a, .lead-note a, .prose a { color: var(--sage-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover, .site-text a:hover, .lead-note a:hover, .prose a:hover { color: var(--sage-deep); }
.linkish { background: none; border: 0; padding: 0; color: var(--sage-ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.linkish.danger, .linkish.armed { color: var(--bad); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink); font-weight: 400;
  transition: border-color .12s ease-out, background-color .12s ease-out;
}
.btn:hover { border-color: var(--ink-2); }
.btn.solid { background: var(--sage); border-color: var(--sage); color: var(--on-sage); font-weight: 700; }
.btn.solid:hover { background: color-mix(in srgb, var(--sage) 86%, var(--ink)); border-color: color-mix(in srgb, var(--sage) 86%, var(--ink)); }
.btn:disabled { opacity: .55; cursor: default; }

input[type="search"], .field {
  width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink); outline: none;
  -webkit-appearance: none; appearance: none;
}
::placeholder { color: var(--placeholder); opacity: 1; }
input[type="search"]:focus, .field:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 30%, transparent); }
/* The browser's own clear button, drawn in the page's ink instead of system blue */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-left: 8px; cursor: pointer; background: currentColor; opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1 1 11' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1 1 11' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* Segmented choice (Events / Attendance, Handbook tabs): words with a rule under the chosen one */
.seg { display: inline-flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.seg button { position: relative; border: 0; background: none; padding: 6px 10px 8px; cursor: pointer; color: var(--muted); font-size: .9375rem; }
.seg button:hover { color: var(--ink); }
.seg button.on { color: var(--ink); font-weight: 700; }
.seg button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--sage); }

/* ---------- Labels: chips and stamps ---------- */
.chip, .stag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-style: normal;
  padding: 0 7px; border-radius: var(--r-sm); border: 1px solid var(--rule-2);
  color: var(--ink-2); background: transparent; font-size: .78rem; font-weight: 400; line-height: 1.6;
}
.chip.tier { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--tc); border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.chip.dept { color: var(--sage-ink); border-color: color-mix(in srgb, var(--sage) 60%, transparent); }
.chip.former { color: var(--former); border-color: color-mix(in srgb, var(--former) 45%, transparent); }
.chip.now { margin-left: 10px; vertical-align: 2px; color: var(--on-tc, var(--on-sage)); background: var(--tc, var(--sage)); border-color: var(--tc, var(--sage)); font-weight: 700; }
.chip.now-chip { color: var(--on-sage); background: var(--sage); border-color: var(--sage); font-weight: 700; }
.chip.tag-gold   { color: var(--gold); border-color: var(--gold-line); }
.chip.tag-red    { color: var(--bad); border-color: var(--bad-line); }
.chip.tag-orange { color: #a0521b; border-color: #dfb08a; }
.chip.tag-green  { color: var(--sage-ink); border-color: color-mix(in srgb, var(--sage) 60%, transparent); }
.chip.tag-teal   { color: #22675f; border-color: #8fc3bc; }
.chip.tag-blue   { color: var(--info); border-color: var(--info-line); }
.chip.tag-pink   { color: #8e3462; border-color: #dba4c0; }
.chip.tag-grey   { color: var(--ink-2); }
:root[data-theme="dark"] .chip.tag-orange { color: #e5b27f; border-color: #6a4a2e; }
:root[data-theme="dark"] .chip.tag-teal { color: #86cfc4; border-color: #2f5e57; }
:root[data-theme="dark"] .chip.tag-pink { color: #e6a3c4; border-color: #6e3a54; }
.stag.ok { color: var(--sage-ink); border-color: color-mix(in srgb, var(--sage) 60%, transparent); background: var(--sage-wash); }
.stag.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-wash); }
.stag.off { color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; background: var(--tc); }

/* Non-obtainable (locked) awards: the same small stamp everywhere */
.aw-lock { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 0 5px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  color: var(--muted); font-family: var(--mono); font-size: .66rem; font-weight: 400; line-height: 1.6; letter-spacing: .02em; white-space: nowrap; }

/* ---------- Avatars: small ID photographs ---------- */
.av {
  flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--well); border: 1px solid var(--rule);
  color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.big { width: 112px; height: 112px; font-size: 1.6rem; }

/* ---------- Notices ---------- */
.notice { margin-top: 20px; padding: 10px 14px; border: 1px solid var(--rule-2); border-left-width: 4px; background: var(--sheet); color: var(--ink); }
.notice.tone-warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-wash); }
.notice.tone-ok { border-color: color-mix(in srgb, var(--sage) 60%, transparent); border-left-color: var(--sage); background: var(--sage-wash); }
.notice.tone-info { border-left-color: var(--info); }

/* ---------- Bar chart ---------- */
.pulse {
  --chart-h: 150px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  height: calc(var(--chart-h) + 50px); padding-top: 24px; border-bottom: 1px solid var(--rule-ink); margin-bottom: 26px;
}
.pulse li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.pulse i { display: block; position: relative; width: 100%; height: calc(var(--chart-h) * var(--r)); min-height: 1px; background: var(--bar); font-style: normal; }
.pulse li:last-child i, .pulse li.hi i { background: var(--sage); }
.pulse i::before { content: attr(data-v); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px;
  font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulse .partial i { background: repeating-linear-gradient(135deg, var(--sage) 0 3px, transparent 3px 6px); outline: 1px solid var(--sage); outline-offset: -1px; }
.pulse span { position: absolute; top: calc(100% + 6px); left: 0; right: 0; display: flex; justify-content: center; font-size: .72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .pulse { gap: 3px; } .pulse li:nth-child(even) span { visibility: hidden; } .pulse i::before { font-size: .65rem; } }

/* ---------- Home ---------- */
.home-top { padding-top: clamp(28px, 4.5vw, 56px); padding-bottom: 8px; }
.home-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(18px, 2.4vw, 32px); align-items: center; }
.home-id .seal { grid-row: 1 / span 3; width: clamp(80px, 9vw, 120px); height: auto; aspect-ratio: 1; }
.home-id .dateline { grid-column: 2; }
.home-id .display { grid-column: 2; font-size: clamp(2.4rem, 5.4vw, 4.25rem); }
.home-id .hero-text { grid-column: 2; margin-top: 6px; }
/* Small phones: the seal sits above the name so a long department name keeps its full width */
@media (max-width: 520px) {
  .home-id { grid-template-columns: minmax(0, 1fr); }
  .home-id .seal { grid-row: auto; width: 64px; margin-bottom: 8px; }
  .home-id .dateline, .home-id .display, .home-id .hero-text { grid-column: 1; }
}
.display, .page-title { overflow-wrap: break-word; }
.find { display: flex; gap: 8px; margin-top: 28px; max-width: 560px; }
.find input { height: 44px; font-size: 1rem; }
.find .btn { min-height: 44px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 64px; margin-top: 12px; }
@media (min-width: 1080px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; align-items: start; }
  .home-grid > .next-ev { grid-column: 2; grid-row: 1; margin-top: 32px; }
  .home-grid > .home-main { grid-column: 1; grid-row: 1 / span 2; }
  .home-grid > .home-side { grid-column: 2; grid-row: 2; }
}
.summary { font-family: var(--serif); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; max-width: 62ch; color: var(--ink); }
.summary b { font-weight: 700; font-variant-numeric: lining-nums; }
.summary + .tiers { margin-top: 22px; }
.tierbar { display: flex; gap: 2px; height: 10px; }
.tierbar i { background: var(--tc); min-width: 2px; }
.tierkey { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; color: var(--ink-2); font-size: .875rem; }
.tierkey li { display: flex; align-items: center; gap: 8px; }
.tierkey b { color: var(--ink); font-variant-numeric: tabular-nums; }
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; }
.crew a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.crew a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.crew b { display: block; font-weight: 700; }
.crew small { color: var(--muted); font-size: .875rem; }
.next-ev { display: grid; gap: 2px; margin-top: 24px; padding: 14px 16px 16px; border: 1px solid var(--rule-ink); background: var(--sheet); color: var(--ink-2); }
.next-ev:hover { background: var(--well); }
.next-label { font-size: .8125rem; color: var(--muted); }
.next-label.live { color: var(--sage-ink); font-weight: 700; }
.next-ev b { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--ink); margin: 2px 0 4px; }
.next-ev .rel { margin-top: 6px; font-size: .8125rem; color: var(--sage-ink); }
.gazette li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.gazette time { grid-row: 1 / span 2; padding-top: 2px; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.gazette a { font-weight: 700; }
.gazette a:hover { text-decoration: underline; text-underline-offset: 3px; }

.gazette span { color: var(--ink-2); font-size: .875rem; }
.gazette span i { font-style: normal; color: var(--muted); padding: 0 4px; }
/* older class names */
.feed li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.feed a { font-weight: 700; } .feed span { grid-column: 1; color: var(--ink-2); font-size: .875rem; } .feed time { grid-row: 1; grid-column: 2; color: var(--muted); font-size: .8125rem; }

/* ---------- Page scaffolding ---------- */
.page { padding-top: clamp(28px, 4vw, 48px); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 6px; }
.page-head .seg { margin-bottom: 4px; }
.page-text { margin: 14px 0 0; }
.block .page-text { margin: -6px 0 18px; }
.hero-text { margin-top: 12px; }
.roster-text { margin: 18px 0 0; }

/* ---------- Roster (public): the register of members ---------- */
.reg-head { padding-top: clamp(28px, 4vw, 48px); }
.tools { position: sticky; top: calc(var(--bar-h) + 3px); z-index: 6; background: var(--paper); border-bottom: 1px solid var(--rule); }
.tools-in { display: grid; gap: 10px; padding-top: 14px; padding-bottom: 0; }
.tools input[type="search"] { max-width: 560px; }
.pills { display: flex; gap: 0 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; }
.pills::-webkit-scrollbar { display: none; }
.pill { position: relative; flex: none; border: 0; background: none; cursor: pointer; padding: 8px 10px 10px; color: var(--ink-2); font-size: .9375rem; }
.pill:hover { color: var(--ink); }
.pill span { margin-left: 6px; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pill.on { color: var(--ink); font-weight: 700; }
.pill.on span { color: var(--muted); font-weight: 400; }
.pill.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--sage); }
/* Roster filters: four buttons, each opening its list (roster.js) */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; }
.fb { position: relative; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink-2);
  font: inherit; font-size: .9375rem; cursor: pointer; }
.fbtn:hover { border-color: var(--ink-2); color: var(--ink); }
.fbtn .fk { font-weight: 500; }
.fbtn .fv { color: var(--ink); font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbtn.on { border-color: var(--sage); box-shadow: inset 0 -3px 0 var(--sage); color: var(--ink); }
.fbtn.on .fk::after { content: ":"; }
.fbtn i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.fb.open .fbtn i { transform: translateY(2px) rotate(-135deg); }
.fpanel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow-y: auto;
  padding: 6px; border: 1px solid var(--rule-2); background: var(--sheet); box-shadow: var(--shadow); }
.fpanel button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.fpanel button span { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.fpanel button:hover:not([disabled]), .fpanel button:focus-visible { background: var(--well); outline: none; }
.fpanel button[aria-checked="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--sage); }
.fpanel button[disabled] { color: var(--faint); cursor: default; }
.fnone { margin: 6px 10px; color: var(--muted); }
.fclear { border: 0; background: none; color: var(--sage-ink); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
@media (max-width: 560px) {
  .fbar { display: grid; grid-template-columns: 1fr 1fr; }
  .fb { position: static; }
  .fbtn { width: 100%; justify-content: space-between; }
  .fbtn .fv { max-width: 110px; }
  .fbar { position: relative; }
  .fpanel { left: 0; right: 0; max-width: none; min-width: 0; }
  .fclear { grid-column: 1 / -1; justify-self: start; }
}

.list { padding-top: 6px; columns: 330px 6; column-gap: 40px; }   /* as many columns as fit, up to six */
.list > .empty, .list > .more { column-span: all; }
.group { display: flex; align-items: baseline; gap: 10px; break-after: avoid; padding: 26px 0 6px; border-bottom: 2px solid var(--rule-ink); }
.list > .group:first-child { padding-top: 14px; }
.group .rk { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-width: 1.6em; }
.group b, .group { font-family: var(--serif); font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.group span:last-child { margin-left: auto; font-family: var(--sans); font-weight: 400; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.row:hover { background: var(--well); }
.row .av { width: 32px; height: 32px; }
.who { min-width: 0; display: block; }
.name { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handle .chip.former { flex: none; align-self: center; font-size: .75rem; line-height: 1.5; padding-top: 0; padding-bottom: 0; }
.handle > span { overflow: hidden; text-overflow: ellipsis; }
.handle { display: flex; gap: 12px; color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; }
.meta { display: flex; align-items: center; gap: 5px; }
.emp { min-width: 46px; text-align: right; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.more { display: flex; margin: 22px 0 0; }
.foot { color: var(--muted); font-size: .8125rem; padding-top: 28px; }
@media (max-width: 720px) { .meta .dept, .emp { display: none; } }

/* ---------- Profile: a member's file ---------- */
.profile { padding-top: 22px; }
.back { display: inline-block; color: var(--muted); font-size: .875rem; padding: 4px 0; margin-bottom: 18px; }
.back::before { content: "\2190\00a0"; }
.back:hover { color: var(--ink); }
.file-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; padding-bottom: 24px; border-bottom: 3px double var(--rule-ink); }
.file-head .av.big { grid-row: 1 / span 2; border-color: var(--rule-2); }
.file-no { font-family: var(--mono); font-size: .8125rem; color: var(--muted); letter-spacing: .02em; }
.file-no b { color: var(--ink); font-weight: 700; letter-spacing: .08em; }
.file-head .display { font-size: clamp(2.2rem, 5vw, 3.5rem); overflow-wrap: anywhere; margin-top: 4px; }
.file-line { color: var(--ink-2); margin-top: 8px; }
.file-line .sep { color: var(--faint); padding: 0 6px; }
@media (max-width: 720px) { .file-line { display: grid; gap: 1px; margin-top: 6px; } .file-line .sep { display: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* Rank lock / blacklist (public, so people can check) */
.standing { margin-top: 12px; display: inline-block; padding: 6px 12px; border: 1px solid var(--warn-line); background: var(--warn-wash); color: var(--warn); font-size: .9rem; line-height: 1.4; }
.standing b { font-weight: 700; margin-right: 4px; }
.standing.bl { border-color: var(--bad-line); background: var(--bad-wash); color: var(--bad); }
.nf .standing { margin-top: 14px; }
.file-stamp { justify-self: end; text-align: right; font-family: var(--mono); }
.file-stamp .clr { display: inline-block; padding: 3px 10px; border: 2px solid var(--tc, var(--ink)); color: var(--tc, var(--ink)); font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; }
.file-stamp small { display: block; margin-top: 6px; font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
@media (max-width: 720px) {
  .file-head { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
  .file-head .av.big { width: 76px; height: 76px; font-size: 1.2rem; grid-row: auto; }
  .file-stamp { grid-column: 1 / -1; justify-self: start; text-align: left; display: flex; align-items: center; gap: 12px; }
  .file-stamp small { margin-top: 0; }
  .file-head .file-id { grid-column: 2; }
}

/* Service record: one ledger line of figures */
.record { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.record > div { padding: 14px 16px 16px 0; }
.record > div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.record dt { font-size: .8125rem; color: var(--muted); }
.record dd { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; margin-top: 4px; }
.record dd.txt { font-size: clamp(1.05rem, 1.6vw, 1.25rem); padding-top: .35em; }
@media (max-width: 720px) {
  .record { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
  .record > div { padding: 12px 12px 14px 0; }
  .record > div + div { border-left: 0; padding-left: 0; }
  .record > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
  .record > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
.pro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 64px; }
@media (min-width: 1080px) { .pro-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

/* Career: the ladder strip and the stint ledger */
.strip { display: flex; gap: 2px; height: 34px; margin: 2px 0 22px; overflow: hidden; }
.strip i { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--tc) 22%, var(--paper)); border-bottom: 2px solid var(--tc);
  color: var(--ink); font-family: var(--mono); font-size: .7rem; font-style: normal; }
.strip i.cur { background: var(--tc); color: var(--paper); }
.stints { border-top: 1px solid var(--rule); }
.stint { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 2px 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.stint .node { display: none; }
.stint .when { font-family: var(--mono); font-size: .75rem; color: var(--muted); white-space: nowrap; }
.stint h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.stint h3 .chip.now { margin-left: 8px; vertical-align: 1px; }
.stint p { color: var(--muted); font-size: .8125rem; }
.s-side { text-align: right; white-space: nowrap; }
.s-side b { display: block; font-weight: 400; font-size: .9375rem; color: var(--ink); }
.s-side span { color: var(--muted); font-size: .8125rem; }
.stint.joined h3 { font-weight: 400; color: var(--ink-2); }
@media (max-width: 760px) {
  .stint { grid-template-columns: minmax(0, 1fr) auto; }
  .stint .when { grid-column: 1 / -1; }
}

.awards { display: grid; }
.awards li { padding: 8px 0; border-bottom: 1px solid var(--rule); cursor: default; }
.awards li::before { content: "\2014\00a0"; color: var(--sage); }
.awards-block h3:first-of-type { margin-top: 0; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; }
.details > div { padding: 10px 0 11px; border-bottom: 1px solid var(--rule); }
.details dt { color: var(--muted); font-size: .8125rem; }
.details dd { margin-top: 1px; }
.details small { display: block; color: var(--muted); font-size: .8125rem; }
@media (min-width: 1080px) { .pro-side .details { grid-template-columns: 1fr; } }

/* ---------- Handbook ---------- */
.doc-frame { margin-top: 24px; border: 1px solid var(--rule-2); background: #fff; }
.doc-frame iframe { display: block; width: 100%; height: calc(100vh - var(--bar-h) - 220px); min-height: 520px; border: 0; }
.doc-open { margin-top: 14px; }

/* The handbook doc, in the site's own type (read from Google Docs by the server). */
.doc-body { margin-top: 24px; max-width: 74ch; color: var(--ink); font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
.doc-body > :first-child { margin-top: 0; }
.doc-body h2, .doc-body h3, .doc-body h4, .doc-body h5, .doc-body h6 { font-family: var(--serif); font-weight: 700; line-height: 1.2; color: var(--ink); scroll-margin-top: calc(var(--bar-h) + 16px); }
.doc-body h2 { font-size: 1.7rem; margin: 2.4rem 0 .8rem; padding-top: .7rem; border-top: 2px solid var(--rule-ink); }
.doc-body h3 { font-size: 1.3rem; margin: 1.9rem 0 .6rem; }
.doc-body h4, .doc-body h5, .doc-body h6 { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 1.5rem 0 .35rem; }
.doc-body h3 + h4 { margin-top: .6rem; }
.doc-body h3.doc-caps { font-size: 1.05rem; letter-spacing: .05em; }
.doc-body h4.doc-item { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 1.5rem 0 .3rem; }
.doc-body h3 + h4.doc-item { margin-top: .5rem; }
.doc-body h4.doc-item + p { margin-top: 0; }
.doc-body .doc-head { margin: 4px 0 28px; }
.doc-body .doc-head p { margin: 0; }
.doc-body .doc-head p:first-child { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc-body .doc-head p:nth-child(2) { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--ink); margin: 6px 0; }
.doc-body .doc-head p:nth-child(3) { color: var(--muted); font-size: .95rem; }
.doc-body .doc-toc { border: 1px solid var(--rule); background: var(--sheet); padding: 14px 18px 12px; margin: 0 0 36px; }
.doc-body .doc-toc-title { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.doc-body .doc-toc ol { list-style: decimal-leading-zero outside; padding-left: 2.3rem; margin: 0; columns: 2 16rem; column-gap: 2rem; }
.doc-body .doc-toc li { margin: 0 0 .35rem; break-inside: avoid; }
.doc-body .doc-toc li::marker { font-family: var(--mono); font-size: .8em; color: var(--muted); }
.doc-body .doc-toc a { color: var(--ink); text-decoration: none; font-weight: 600; }
.doc-body .doc-toc a:hover { color: var(--sage-ink); text-decoration: underline; }
.doc-body :is(h2, h3, h4, h5, h6) :is(strong, em, u) { font-weight: inherit; font-style: inherit; text-decoration: none; }
.doc-body h2.doc-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); border-top: 0; padding-top: 0; margin-bottom: .3rem; }
.doc-body .doc-sub { color: var(--muted); margin: 0 0 1.6rem; }
.doc-body p { margin: 0 0 .9rem; }
.doc-body ul, .doc-body ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.doc-body li { margin: .2rem 0; }
.doc-body li > p { margin: 0; }
.doc-body ul + ul.lv1, .doc-body ol + ol.lv1, .doc-body ul.lv1, .doc-body ol.lv1 { margin-top: -.6rem; }
.doc-body .lv1 { padding-left: 2.8rem; } .doc-body .lv2 { padding-left: 4.2rem; } .doc-body .lv3, .doc-body .lv4, .doc-body .lv5, .doc-body .lv6 { padding-left: 5.6rem; }
.doc-body ul { list-style: disc outside; } .doc-body ol { list-style: decimal outside; }
.doc-body ul.lv1 { list-style-type: circle; } .doc-body ul.lv2 { list-style-type: square; }
.doc-body ol.lv1 { list-style-type: lower-alpha; } .doc-body ol.lv2 { list-style-type: lower-roman; }
.doc-body li::marker { color: var(--muted); }
.doc-body a { color: var(--sage-ink); text-decoration: underline; text-underline-offset: 2px; }
.doc-body img { display: block; max-width: 100%; height: auto; margin: .4rem 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .95rem; display: block; overflow-x: auto; }
.doc-body td, .doc-body th { border: 1px solid var(--rule); padding: .45rem .6rem; vertical-align: top; background: var(--sheet); }
.doc-body td p, .doc-body th p { margin: 0; }
.doc-body.sk-fill { max-width: 74ch; }
.ladder { columns: 3 280px; column-gap: 44px; }
.rung-group { break-inside: avoid; padding-bottom: 22px; }
.rung-group h3 { margin-top: 0; }
.rung-group li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.rung-group .num { font-family: var(--mono); font-size: .8125rem; color: var(--tc); }
.dept h3 { color: var(--ink); font-size: 1rem; }
.dept ol { list-style: decimal; padding-left: 22px; color: var(--ink-2); }
.dept li { padding: 3px 0; }
.dept li::marker { font-family: var(--mono); font-size: .8em; color: var(--muted); }
.award-list > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.award-list dt { font-weight: 700; color: var(--ink); }
.award-list dd { color: var(--ink-2); }
.award-list > div.is-locked dt { color: var(--ink-2); }
@media (max-width: 560px) { .award-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Leadership links page ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; margin-top: 28px; }
.tool { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; border-top: 2px solid var(--rule-ink); }
.tool h2 { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; }
.tool p { color: var(--ink-2); }
.tool-open { margin-top: auto; padding-top: 8px; color: var(--sage-ink); font-weight: 700; }
.tool-open::after { content: "\2197"; margin-left: 6px; font-size: .85em; }

/* ---------- Sign in, account, accounts ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 72px; }
@media (min-width: 900px) {
  .auth.split { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
  .auth.split .auth-card { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; }
}
.auth-intro { max-width: 52ch; }
.auth-intro p { color: var(--ink-2); margin-top: 14px; }
.auth .auth-card, .acct-form form { display: grid; gap: 16px; max-width: 420px; margin-top: 28px; }
.auth .auth-card { padding: 22px 22px 24px; border: 1px solid var(--rule-2); background: var(--sheet); }
.auth-card label, .acct-form label { display: grid; gap: 6px; color: var(--ink-2); font-size: .875rem; }
.auth-card input, .acct-form input:not([type="checkbox"]), .acct-form select {
  height: 42px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--rule-2); background: var(--paper);
  color: var(--ink); font: inherit; font-size: 1rem; outline: none;
}
.auth-card input:focus, .acct-form input:focus, .acct-form select:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 30%, transparent); }
.acct-form input[readonly] { color: var(--muted); }
.acct-form label.check { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.acct-form label.check input { width: 18px; height: 18px; accent-color: var(--sage); }
.auth-card .btn, .acct-form .btn { min-height: 42px; justify-content: center; }
.auth-msg { color: var(--bad); min-height: 1.2em; font-size: .875rem; }
.auth-msg:empty { min-height: 0; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.acct-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 48px; margin-top: 28px; align-items: start; }
.acct-form h2, .gmode h2 { font-family: var(--serif); font-weight: 700; font-size: 1.375rem; border-top: 2px solid var(--rule-ink); padding-top: 10px; }
.acct-form form { margin-top: 14px; }
.row-btns { display: flex; gap: 10px; }
.acct-list { display: grid; border-top: 2px solid var(--rule-ink); }
.acct-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) 168px 210px; gap: 8px 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.acct-row > div > span:not(.stag) { display: block; overflow-wrap: anywhere; color: var(--muted); font-size: .8125rem; }
.acct-who b { font-weight: 700; }
.acct-btns { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
.acct-row .auth-msg { grid-column: 1 / -1; }
.issued { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; margin-top: 24px; padding: 16px 18px; max-width: 640px;
  border: 1px solid color-mix(in srgb, var(--sage) 60%, transparent); border-left-width: 4px; border-left-color: var(--sage); background: var(--sage-wash); }
.issued code { grid-column: 1; font-family: var(--mono); font-size: 1.25rem; color: var(--ink); user-select: all; }
.issued p { grid-column: 1 / -1; color: var(--ink-2); font-size: .875rem; }
.issued > div { grid-column: 1 / -1; }
.issued .linkish { grid-column: 1 / -1; justify-self: start; }
.gmode { margin-top: 48px; display: grid; gap: 10px; justify-items: start; }
.gmode h2 { justify-self: stretch; }
.gmode p { color: var(--ink-2); }
@media (max-width: 760px) {
  .acct-grid { grid-template-columns: 1fr; gap: 28px; }
  .acct-row { grid-template-columns: 1fr 1fr; }
  .acct-status { grid-column: 1 / -1; }
  .acct-btns { grid-column: 1 / -1; justify-content: flex-start; }
}
.human-check { min-height: 65px; }
body.app-mode main { padding-bottom: 0; }

/* ---------- Not found ---------- */
.nf { padding-top: clamp(40px, 8vw, 96px); max-width: 640px; }
.nf .file-no { margin-bottom: 10px; }
.nf h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.1; }
.nf p { color: var(--ink-2); margin-top: 12px; }
.nf code { font-family: var(--mono); font-size: .9em; padding: 0 4px; background: var(--well); }
.nf .acct-actions { margin-top: 24px; }

/* ---------- Dialogs: credits, leave without saving ---------- */
.cr-back, .leave-dlg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.cr-box, .leave-box { width: min(400px, 100%); display: grid; gap: 10px; padding: 22px 22px 20px; background: var(--sheet); border: 1px solid var(--rule-2); border-top: 3px solid var(--rule-ink); border-radius: var(--r); box-shadow: var(--shadow); }
.cr-box h2, .leave-box h2 { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; margin: 0; }
.cr-sub { color: var(--muted); font-size: .875rem; margin-bottom: 4px; }
.cr-dev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.cr-dev:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cr-dev b { display: block; font-weight: 700; }
.cr-dev small { color: var(--muted); font-size: .8125rem; }
.cr-av { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-family: var(--serif); font-weight: 700; color: var(--on-sage); background: var(--sage); }
.cr-close { margin-top: 8px; justify-self: start; }
.cr-legal { margin-top: 4px; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.cr-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink-2); font: inherit; font-size: .875rem; cursor: pointer; text-align: left; }
.cr-more:hover { color: var(--ink); }
.cr-more span { font-size: 1.1rem; line-height: 1; color: var(--muted); }
.cr-backbtn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--sage-ink); font: inherit; font-size: .875rem; cursor: pointer; }
.cr-orig { display: grid; }
.cr-orig li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.cr-orig b { font-weight: 700; }
.cr-orig small { color: var(--muted); font-size: .8125rem; }
.fd-box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.fd-role { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-ink); }
.fd-lead { display: flex; align-items: center; gap: 16px; padding: 14px 0 4px; border-top: 1px solid var(--rule); }
.fd-lead > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fd-lead .av.fd-av { width: 76px; height: 76px; font-size: 1.2rem; border-color: var(--rule-2); }
.fd-name { font-family: var(--serif); font-weight: 700; font-size: 2rem; line-height: 1.05; color: var(--ink); }
.fd-user { color: var(--muted); font-size: .8125rem; }
.fd-lead:hover .fd-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fd-tribute { margin: 4px 0 6px; padding-left: 14px; border-left: 3px solid var(--sage); font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.fd-group { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.cr-dev + .fd-group { border-top: 0; padding-top: 4px; }
.fd-box .cr-dev .av { width: 36px; height: 36px; }
.fd-note { margin-top: 6px; color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
.fd-after { margin-top: 3px; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }
.fd-after p { margin: 0; }
.fd-after::before { content: "Since then"; display: block; margin-bottom: 1px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fd-lead .fd-after { font-size: .875rem; }
.fd-box .cr-dev > div { min-width: 0; }
.fd-box .cr-dev small { display: block; }
.leave-box p { margin: 0 0 12px; color: var(--ink-2); }
.leave-row { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.leave-go { border-color: var(--bad-line); color: var(--bad); }
.leave-go:hover { border-color: var(--bad); }

/* ---------- Site text (Settings ▸ Site text) ---------- */
.site-text { max-width: 72ch; color: var(--ink-2); line-height: 1.6; }
.site-text > * + * { margin-top: .7em; }
.site-text h2, .site-text h3, .site-text h4 { color: var(--ink); font-family: var(--serif); font-weight: 700; line-height: 1.2; }
.site-text h2 { font-size: 1.375rem; } .site-text h3 { font-size: 1.15rem; } .site-text h4 { font-size: 1rem; }
.site-text ul, .site-text ol { padding-left: 1.4em; }
.site-text ul { list-style: square; } .site-text ol { list-style: decimal; }
.site-text li::marker { color: var(--sage); }
.site-text li + li { margin-top: .25em; }
.site-text blockquote { padding: 2px 0 2px 14px; border-left: 3px solid var(--sage); color: var(--ink-2); font-family: var(--serif); font-style: italic; }
.site-text hr { border: 0; border-top: 1px solid var(--rule); margin: 1em 0; }
.site-text strong { color: var(--ink); }
.home-id .site-text { font-size: 1.0625rem; }
.site-text.lead-note { color: var(--ink-2); margin-top: 12px; }

/* ---------- Waiting for the server ----------
   The page's own frame at once; bars where the records will go, faded in only if the wait
   is long enough to notice (loading.js). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk-fill { pointer-events: none; animation: sk-in .3s ease .35s both, sk-pulse 1.8s ease-in-out .65s infinite; }
@keyframes sk-in { from { opacity: 0; } }
@keyframes sk-pulse { 50% { opacity: .55; } }
:root { --sk: var(--well); }
:root[data-theme="dark"] { --sk: #22221f; }
.sk-bar { display: block; height: .75rem; margin: .5rem 0; max-width: 100%; background: var(--sk); }
.sk-bar.sm { height: .55rem; margin: .4rem 0; }
.sk-bar.h { height: 1rem; margin: .45rem 0 .6rem; }
.sk-bar.lg { height: 1.15rem; margin: .45rem 0 .65rem; }
.sk-bar.num { height: 1.6rem; margin: .15rem 0 .5rem; }
.sk-bar.serif { height: .85rem; margin: .62rem 0; }
.sk-bar.name { height: clamp(1.9rem, 4.2vw, 2.7rem); margin: .55rem 0 .8rem; }
.sk-title { grid-column: 2; }
.sk-title .sk-bar { height: clamp(2rem, 4.4vw, 3.4rem); margin: .3rem 0 0; }
.find.sk-fill { align-items: stretch; }
.sk-field { display: block; flex: 1; height: 44px; max-width: 560px; border: 1px solid var(--rule); background: var(--sheet); }
.sk-btn { display: block; flex: none; width: 92px; height: 44px; background: var(--sk); }
.next-ev.sk-fill { min-height: 132px; }
.sk-tierbar { display: block; height: 10px; margin-top: 22px; background: var(--sk); }
.sk-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end;
  height: 150px; margin: 24px 0 52px; border-bottom: 1px solid var(--rule-ink); }
.sk-chart i { display: block; background: var(--sk); }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); }
.sk-side { width: 56px; }
.dateline.sk-line { max-width: 320px; }
.sk-pills { display: flex; gap: 0 20px; padding: 14px 0 15px; overflow: hidden; }
.sk-pills i { display: block; flex: none; height: .7rem; background: var(--sk); }
.tools-in > .sk-fill { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tools-in .sk-field { height: 40px; }
.group.sk-group { display: block; }
.group.sk-group .sk-bar { height: .9rem; margin: .2rem 0 .1rem; max-width: 220px; }
.list .row .who .sk-bar { margin: .3rem 0; }
.sk-ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 20px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.sk-ev > span:first-child .sk-bar.num { width: 44px !important; }
.sk-cal { display: block; aspect-ratio: 7 / 6.4; margin-top: 46px; border-top: 2px solid var(--rule-ink);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%,
              linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 100% calc(100% / 6); }
.sk-item { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 24px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.sk-strip { display: block; height: 34px; margin: 2px 0 22px; background: var(--sk); }
.ladder .rung-group > .sk-bar:first-child { margin-top: 0; }
.sk-career .stint .sk-bar { margin: .25rem 0; }
.sk-career .s-side { width: 64px; }
.record.sk-record > div { min-height: 84px; }
.file-head .av.big.sk-fill { border-color: var(--rule); }
@media (max-width: 560px) { .sk-ev { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Print: a member's file prints as a file ---------- */
/* Printing: a clean file on white paper, with the masthead's name and seal at the top
   (theme.js switches to the light inks for the print). */
@media print {
  @page { margin: 14mm 13mm; }
  :root { --paper: #fff; --sheet: #fff; --well: #f2f2f2; }
  .bar nav, .site-foot, .tools, .back, .e-side, .e-banners, .e-savebar, .e-undo, .adm-toast, .theme-sw, .find { display: none !important; }
  .bar { position: static; margin-bottom: 18px; }
  body.e-mode { padding-bottom: 0; }
  body.e-mode .bar::after { position: static; }
  .bar-in { height: 46px; padding: 0; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  a { text-decoration: none; }
  .block > h2, .block-h, .e-head { break-after: avoid; }
  .stint, .record > div, .row, .ev, .gazette li, .e-card, tr { break-inside: avoid; }
}

/* ---------- Two-step sign-in and "Signed in on" (Account page, sign-in) ---------- */
.auth-msg.ok { color: var(--sage-ink); }
.tfa-who { color: var(--ink-2); font-size: .9375rem; }
.tfa-steps { display: grid; gap: 22px; margin: 0; padding-left: 1.2rem; }
.tfa-steps > li { display: grid; gap: 10px; }
.tfa-steps > li::marker { font-family: var(--mono); color: var(--muted); }
.tfa-qr { justify-self: start; padding: 8px; background: #fff; border: 1px solid var(--rule-2); line-height: 0; }
.tfa-qr svg { display: block; width: 184px; height: 184px; }
.tfa-key summary { cursor: pointer; color: var(--sage-ink); font-size: .875rem; }
.tfa-key p { color: var(--ink-2); font-size: .875rem; margin: 8px 0 6px; }
.tfa-key code, .tfa-codes code { font-family: var(--mono); font-size: .95rem; letter-spacing: .04em; color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.tfa-form { display: grid; gap: 12px; }
.tfa-form input { font-family: var(--mono); font-size: 1.15rem; letter-spacing: .12em; max-width: 12ch; }
.tfa-h { font-family: var(--serif); font-size: 1.3rem; }
.tfa-codes { display: grid; gap: 12px; }
.tfa-codes ol { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 28px; margin: 0; padding: 12px 16px 12px 2.2rem; background: var(--sheet); border: 1px solid var(--rule-2); }
.tfa-codes li::marker { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-page .block > h2 { margin-bottom: 12px; }
.acct-line { color: var(--ink-2); max-width: 70ch; }
.acct-line .stag { margin-right: 6px; }
.acct-page .acct-actions { margin-top: 16px; }
.va-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.va-ticks legend { width: 100%; color: var(--muted); font-size: .8125rem; padding: 0; margin-bottom: 6px; }
.va-ticks label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink); }
.va-ticks input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.warn-text { color: var(--warn); }
.tfa-panel { display: grid; gap: 14px; max-width: 460px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--rule-2); background: var(--sheet); }
.tfa-panel label { display: grid; gap: 6px; color: var(--ink-2); font-size: .875rem; }
.tfa-panel input { min-height: 40px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; }
.sess-list { display: grid; margin: 0; padding: 0; list-style: none; max-width: 760px; }
.sess-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sess-list li > div > span:not(.stag) { display: block; color: var(--muted); font-size: .8125rem; margin-top: 2px; }
.sess-list .stag { margin-left: 6px; vertical-align: 1px; }
.acct-page .block-h .btn.armed { border-color: var(--bad-line); color: var(--bad); }

/* ---------- Executives (/executives): the War Council and the Executive ---------- */
.ex-head { padding-bottom: 6px; }
.ex-kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ex-head .ex-intro { max-width: 62ch; margin-top: 14px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.ex-page .block > h2 { margin-bottom: 26px; }

.ex-card { display: grid; align-content: start; gap: 16px; }
.ex-portrait { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--well); border: 1px solid var(--rule); }
.ex-portrait::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(to top, color-mix(in srgb, var(--sage) 16%, transparent), transparent); pointer-events: none; }
.ex-portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ex-card:hover .ex-portrait img { transform: scale(1.03); }
.ex-initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--faint); }
.ex-body { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ex-rank { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }
.ex-page .ex-name { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.005em; color: var(--ink); overflow-wrap: anywhere; }
.ex-name a { color: var(--ink); }
.ex-name a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ex-user { margin-top: -2px; font-family: var(--mono); font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.ex-pos { color: var(--ink); font-weight: 600; font-size: .95rem; }
.ex-bio { display: grid; gap: 10px; margin-top: 6px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.ex-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8125rem; }
.ex-meta .ex-file { font-family: var(--mono); font-size: .75rem; }
.ex-meta a { margin-left: auto; color: var(--sage-ink); font-weight: 600; }
.ex-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* War Council: portrait beside the text, two across. */
.ex-lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 40px 48px; }
.ex-lead-grid.one { max-width: 760px; margin: 0 auto; }
.ex-lead { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.ex-page .ex-lead .ex-name { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.ex-lead .ex-pos { font-size: 1.02rem; }
.ex-lead .ex-bio { font-family: var(--serif); font-size: 1.04rem; color: var(--ink); line-height: 1.55; }
.ex-lead .ex-rank { color: var(--gold); }
.ex-lead .ex-portrait { border-color: var(--rule-2); }
.ex-lead .ex-portrait::after { background: linear-gradient(to top, color-mix(in srgb, var(--gold-solid) 18%, transparent), transparent); }

/* Executives: portrait on top, three across using the full width; a last row that isn't full is centred. */
.ex-grid { --ex-gap: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 48px var(--ex-gap); }
.ex-grid > .ex-card { flex: 0 0 calc((100% - 2 * var(--ex-gap)) / 3); min-width: 0; }
@media (max-width: 900px) {
  .ex-grid { --ex-gap: 32px; }
  .ex-grid > .ex-card { flex-basis: calc((100% - var(--ex-gap)) / 2); }
}

/* Waiting for the server. */
.ex-sk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; max-width: 760px; }
.ex-sk > span { display: grid; gap: 10px; align-content: start; padding-top: 6px; }
.ex-sk .ex-sk-pic { display: block; height: 200px; width: 100% !important; }

@media (max-width: 620px) {
  .ex-lead { grid-template-columns: 1fr; gap: 16px; }
  .ex-lead .ex-portrait { max-width: 240px; }
  .ex-sk { grid-template-columns: 1fr; }
  .ex-grid { gap: 40px; }
  .ex-grid > .ex-card { flex-basis: 100%; }
  .ex-grid .ex-portrait { max-width: 240px; }
  .ex-meta a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ex-portrait img { transition: none; } }

/* ---------- Subdepartments (/subdepartments/<slug>) ---------- */
.sd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.sd-tabs a { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-2);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; }
.sd-tabs a:hover { border-color: var(--ink-2); color: var(--ink); }
.sd-tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sd-tab-name { font-family: var(--sans, inherit); letter-spacing: 0; font-size: .85rem; opacity: .8; }
@media (max-width: 620px) { .sd-tab-name { display: none; } }
.sd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sd-page .sd-name { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--ink); }
.sd-short { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--sage-ink); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 1px 7px; }
.sd-count { color: var(--muted); font-size: .9rem; }
.sd-synopsis { max-width: 68ch; margin-top: 14px; display: grid; gap: 10px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.65; }
.sd-page .sd-rank { margin: 0 0 18px; font-family: var(--mono); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); gap: 36px 32px; justify-content: start; }
.sd-page .sd-card .ex-name { font-size: 1.2rem; }
.sd-vacant-card .ex-portrait { opacity: .55; }
@media (max-width: 620px) { .sd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .sd-page .sd-card .ex-name { font-size: 1rem; } }
.sd-vacant, .sd-none { color: var(--muted); font-style: italic; }
.sd-list { display: grid; border-top: 1px solid var(--rule); }
.sd-list > div { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sd-list dt { color: var(--ink); font-weight: 600; }
.sd-list dd { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; }
.sd-list dd a { color: var(--ink-2); }
.sd-list dd a:hover { color: var(--sage-ink); text-decoration: underline; text-underline-offset: 3px; }
.sd-list dd a + a::before { content: "·"; margin: 0 8px; color: var(--faint); }
@media (max-width: 620px) { .sd-list > div { grid-template-columns: minmax(0, 1fr); } }

/* View as (owners): a pill on every page while it's on (floats, so it can't upset any layout). */
#viewas-bar { position: fixed; left: 50%; bottom: calc(16px + var(--conf-h, 0px)); transform: translateX(-50%); z-index: 2147483001; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 12px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .875rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
#viewas-bar b { font-weight: 700; }
#viewas-bar .vab-stop { padding: 3px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
#viewas-bar .vab-stop:hover { background: var(--paper); color: var(--ink); }
@media print { #viewas-bar { display: none; } }