:root{
  /* Sampled from the brand mark itself (logo-mark.png), not chosen: the green is hue 156 at
     sat 0.95, the gold hue 38 at sat 0.76 - which is why --gold barely moved from the old value.
     Every pair below is checked to WCAG AA: white on --navy 11.70:1, --link 8.05:1,
     --faint 4.51:1, --gold as a focus ring 3.24:1, --goldsoft on --navy 5.81:1.
     The token names stay --navy/--navy2 on purpose: renaming them would touch every file that
     references them, for no gain. They mean "the brand colour". */
  --ground:#fff; --panel:#f4f8f6; --ink:#12211b; --muted:#54635b; --faint:#6b7a72;
  --navy:#04412a; --navy2:#02311f; --gold:#b8862b; --goldsoft:#d8b25a;
  --link:#0b5c3b; --line:#e3ebe7; --line2:#eef4f1;
  --serif:Georgia,'Times New Roman',Times,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.55}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- masthead ---------- */
.mast{background:var(--navy);border-bottom:3px solid var(--gold)}
.mast .in{max-width:1360px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:13px}
.mast img{width:46px;height:46px;flex:none;background:#fff;border-radius:9px;padding:2px}
.mast .name{font-family:var(--serif);font-size:23px;font-weight:700;color:#fff;letter-spacing:.2px;
            line-height:1.1}
.mast .name em{font-style:normal;color:var(--goldsoft)}
.mast .tag{font-size:12px;color:#a9c4b7;margin-top:3px;letter-spacing:.3px}
.mast .spacer{flex:1}
.mast .count{color:#8fae9e;font-size:12.5px;text-align:right;line-height:1.35}
.mast .count b{color:#fff;font-weight:700;display:block;font-size:15px;font-family:var(--serif)}

/* ---------- shell ---------- */
.shell{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:238px 1fr;
       gap:0;align-items:start}
.rail{border-right:1px solid var(--line);padding:20px 16px 40px;position:sticky;top:0}
.rail .lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
           margin:0 0 10px 4px;font-weight:700}
.rail a.mode{display:flex;align-items:center;justify-content:space-between;gap:8px;
             padding:11px 13px;border-radius:5px;color:var(--ink);font-weight:600;font-size:14.5px;
             border-left:3px solid transparent;margin-bottom:3px}
.rail a.mode:hover{background:var(--line2);text-decoration:none}
.rail a.mode .n{font-size:11.5px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
/* the signature: gold edge on the active mode, continued by .panelhead's top rule */
.rail a.mode.on{background:var(--panel);border-left-color:var(--gold);color:var(--navy)}
.rail a.mode.on .n{color:var(--gold)}
.rail .sep{height:1px;background:var(--line);margin:18px 4px}
.rail .quiet a{display:block;padding:6px 13px;font-size:13.5px;color:var(--muted)}
.rail .quiet a:hover{color:var(--link)}

main{padding:26px 30px 60px;min-width:0}
@media(prefers-reduced-motion:no-preference){
  main{animation:fade .12s ease-out}
  @keyframes fade{from{opacity:.55}to{opacity:1}}
}

/* ---------- panel ---------- */
.panelhead{padding-top:4px;margin-bottom:20px}
.panelhead h1{font-family:var(--serif);font-size:27px;font-weight:700;margin:0 0 4px;
              letter-spacing:-.2px}
.panelhead p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
.card{border:1px solid var(--line);border-radius:7px;padding:20px 22px;margin-bottom:20px;
      background:var(--ground)}
.card h2{font-family:var(--serif);font-size:18px;margin:0 0 13px}

/* ---------- search row ---------- */
.srow{display:flex;gap:9px;flex-wrap:wrap}
.srow input[type=text]{flex:1;min-width:230px;padding:12px 14px;border:1px solid var(--line);
                       border-radius:5px;font-size:15.5px;font-family:inherit;color:var(--ink)}
.srow input[type=text]::placeholder{color:var(--faint)}
.srow input[type=text]:focus{outline:none;border-color:var(--navy);
                             box-shadow:0 0 0 3px rgba(4,65,42,.12)}
.srow button{background:var(--navy);color:#fff;border:0;border-radius:5px;padding:12px 28px;
             font-size:15px;font-weight:650;cursor:pointer;font-family:inherit}
.srow button:hover{background:var(--navy2)}

.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:10px}
.foot .in{max-width:1360px;margin:0 auto;padding:20px 22px;color:var(--muted);font-size:13px}
.foot a{margin-right:15px;color:var(--muted)}
.foot .fine{margin-top:9px;color:var(--faint);max-width:80ch}

@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;border-right:0;border-bottom:1px solid var(--line);
        padding:12px 14px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rail .lbl,.rail .sep,.rail .quiet{display:none}
  .rail a.mode{flex:none;border-left:0;border-bottom:3px solid transparent;border-radius:4px;
               padding:9px 13px;margin:0}
  .rail a.mode.on{border-left:0;border-bottom-color:var(--gold)}
  .rail a.mode .n{display:none}
  main{padding:18px 16px 44px}
  .mast .count{display:none}
  .panelhead h1{font-size:22px}
}