/* =====================================================================
   NKA WORKING-SHEET STYLESHEET · Solutiall house style
   Derived from SOLHQ/reference/SOL_DESIGN_SYSTEM.md (v0, 2026-06-04)
   [SOL §n] = from the spec.   [EXT] = derived; the spec has no recipe.
   Profile: DOCUMENT (not deck). Square corners, hairlines not shadows,
   bone/bone-2/ink surfaces, clay as the sole decorative accent.
   ===================================================================== */
:root{
  /* [SOL §6] canonical tokens, verbatim */
  --bone:#F4F1EC; --bone-2:#ECE7DE; --ink:#161616; --ink-soft:#3a3a38;
  --muted:#6e6a62; --clay:#A8654B; --clay-deep:#8a5039;
  --line:#d8d2c7; --line-dark:#2a2a2a;
  /* [EXT] SOL §2 stacks, fallbacks widened for offline file:// use */
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --mono:"Space Grotesk","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* [EXT-SEM] DOCUMENTED EXTENSION to SOL §1 — two semantic inks.
     Justification: the frozen Spanish copy NAMES these colours
     ("el aviso rojo", "rojo = fecha dura", "marcado en rojo") and that
     copy cannot change (DA-83). A monochrome build would make the
     document contradict itself in the artist's own words.
     DISCIPLINE — these two may ONLY appear on:
       · a 3px left border-rule    · a mono uppercase label
       · a 1px chip border         · a calendar inset rule
     NEVER a surface fill, NEVER a section background.
     STRICT-SOL BUILD: set --alert:var(--ink); --ok-ink:var(--muted). */
  --alert:#8C2F24;    /* warm brick — clay's family, not a UI red */
  --amber-ink:#9A7407;/* ochre — the "amarillo" tier the PLAN legend names */
  --ok-ink:#3F5D46;   /* muted moss */
  /* [EXT] legacy aliases: keep surviving inline style="" working
     without touching one byte of markup */
  --teal:var(--ok-ink); --red:var(--alert); --amber:var(--amber-ink);
  --green:var(--ok-ink); --bg:var(--bone); --card:var(--bone);
  --soft:var(--ink-soft); --accent:var(--clay); --warm:var(--clay);
  --ink2:var(--ink-soft); --ink3:var(--muted); --surface:var(--bone);
  --surface2:var(--bone-2); --ok:var(--ok-ink);
  --teal-l:var(--bone-2); --red-l:var(--bone-2); --amber-l:var(--bone-2);
  --green-l:var(--bone-2); --teal-soft:var(--bone-2); --warm-soft:var(--bone-2);
  --ok-soft:var(--bone-2); --alert-soft:var(--bone-2); --accent-soft:var(--bone-2);
  --amber-soft:var(--bone-2); --accent-line:var(--line);
  --radius:0; --r:0; --shadow:none;
}
/* [SOL §6] base reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);
  font-weight:400;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;padding:0 0 132px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;letter-spacing:-.01em}
a{color:var(--clay-deep)}
em{font-style:italic}
p{margin:0 0 14px}
strong,b{font-weight:600}
ul,ol{margin:10px 0 16px;padding-left:22px}
li{margin:6px 0}
hr{border:0;border-top:1px solid var(--line);margin:26px 0}
/* [SOL §4] inline code — clay-tinted 8% */
code,.url{font-family:var(--mono);font-size:.92em;background:rgba(168,101,75,.08);
  padding:1px 5px;color:var(--clay-deep);border-radius:0;border:0}
.url{display:inline-block;font-size:12px;word-break:break-all;margin-top:4px}
/* =====================  TYPOGRAPHY SCALE  ===================== */
/* [EXT] SOL §2's proposal scale, compressed: dense re-read working sheets */
h1{font-size:clamp(32px,5.4vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(21px,2.7vw,29px);line-height:1.12}
h3{font-size:20px;line-height:1.2;margin:26px 0 8px}
h4{font-size:17px}
/* [SOL §4] Tag / eyebrow — verbatim */
.tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:500;color:var(--clay);display:inline-block}
/* [SOL §2] eyebrow / kicker / label family — the mono information layer */
.eyebrow,.kicker,.lbl{display:block;font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sev,var(--clay));margin-bottom:14px}
.kicker{font-size:11px;letter-spacing:.18em;margin-bottom:11px}
.lbl{font-size:11px;letter-spacing:.18em;margin-bottom:9px}
.sub{color:var(--muted);font-size:17px;line-height:1.6;margin:14px 0 0;max-width:62ch}
.muted,.hint,.help,.rhelp,.rmeta,.saved,.counter{color:var(--muted);font-size:14px;line-height:1.55}
.hint,.help{font-size:13.5px;margin-top:5px}
.help{font-style:italic}
.counter{text-align:right;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;margin-top:5px}
.counter.over{color:var(--alert);font-weight:600}
.req{color:var(--alert);font-weight:700}
/* =====================  LAYOUT  [SOL §3]  ===================== */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.shell{max-width:1160px;margin:0 auto;padding:44px clamp(18px,4vw,48px) 0;
  display:grid;grid-template-columns:170px 1fr;gap:48px;align-items:start}
main{max-width:840px}
.wrap>header{padding:56px 0 34px;text-align:left;border-bottom:1px solid var(--line);margin-bottom:36px}
/* [SOL §4 Clay Rule] the 60x2 clay hairline, injected — no markup touched */
.wrap>header h1::after,body>header.top h1::after{
  content:"";display:block;width:60px;height:2px;background:var(--clay);margin:22px 0 0}
/* [EXT] sticky left nav rail — SOL §3's sticky .sec-side, made navigable */
.nav{position:sticky;top:96px}
.nav h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 14px}
.nav a{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);text-decoration:none;
  padding:8px 0 8px 13px;border-left:1px solid var(--line);border-radius:0;margin:0;
  background:transparent;transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink);border-left-color:var(--muted);background:transparent}
.nav a.on{color:var(--clay-deep);border-left:2px solid var(--clay);font-weight:600;background:transparent}
/* =====================  SECTION SCAFFOLD  [SOL §3/§5]  ===================== */
.phase,section{background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;margin:0 0 6px;padding:0 0 30px;overflow:visible}
.phase>h2,section>h2{margin:0;padding:30px 0 12px;background:transparent;border-bottom:0;
  display:flex;gap:16px;align-items:baseline}
.body{padding:0}
section{scroll-margin-top:88px}
.phase>h2 .tag{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--clay);border-right:1px solid var(--line);padding-right:14px;align-self:baseline}
/* =====================  CALLOUT FAMILY  ===================== */
/* [SOL §4 .note] bone-2 + hairline + mono clay header,
   [EXT] extended with a severity left-rule driven by --sev.
   --sev is set PER FILE in the adapter — this resolves the .warn/.note
   severity INVERSION across the seven files without markup edits. */
:is(.note,.warn,.ok,.alert,.good,.hers,.stop,.callout,.intro,.gap,.gloss){
  --sev:var(--line);
  background:var(--bone-2);border:1px solid var(--line);
  border-left:3px solid var(--sev);border-radius:0;
  padding:17px 21px;margin:16px 0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
:is(.note,.warn,.ok,.alert,.good,.hers,.stop,.callout,.intro,.gap,.gloss)>:first-child{margin-top:0}
:is(.note,.warn,.ok,.alert,.good,.hers,.stop,.callout,.intro,.gap,.gloss)>:last-child{margin-bottom:0}
/* [EXT] the "hole in the document" recipe. Dashed is used ONCE in this
   system, and only to mean "this is absent" — never for emphasis. */
:is(.gap,.gloss){background:transparent;border-style:dashed;border-left-style:solid;color:var(--muted)}
:is(.gap,.gloss)>b:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--sev);font-weight:600}
/* [SOL §4 Callout] italic Cormorant pull-quote + 3px clay rule.
   Reserved for actual quotes: the .ask sample-question boxes. */
.ask{background:transparent;border:0;border-left:3px solid var(--clay);border-radius:0;
  padding:5px 0 5px 22px;margin:18px 0;max-width:46ch;
  font-family:var(--display);font-style:italic;font-size:19.5px;line-height:1.34;color:var(--clay-deep)}
.ask b{color:var(--clay);font-style:normal;font-weight:400}
/* =====================  TABLES  [SOL §4]  ===================== */
/* Pure line structure. NO row backgrounds, NO header fills. */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th,td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted);background:transparent}
th:last-child,td:last-child{padding-right:0}
td[align=right]{text-align:right;font-variant-numeric:tabular-nums}
/* NOTE: .tbl here is an OVERFLOW WRAPPER (file 7's markup), NOT SOL's table class. */
.tw,.tbl,.tbl-wrap,.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
/* =====================  FORM CONTROLS  [EXT — SOL has none]  ===================== */
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{
  width:100%;font-family:var(--body);font-size:15px;line-height:1.55;
  color:var(--ink);background:var(--bone);border:1px solid var(--line);
  border-radius:0;padding:11px 13px;transition:border-color .15s,background .15s;
  -webkit-appearance:none;appearance:none}
textarea{min-height:88px;resize:vertical;font-size:15.5px;line-height:1.6}
:is(input,textarea,select):hover{border-color:var(--muted)}
:is(input,textarea,select):focus{outline:none;border-color:var(--clay);background:#FFFDFA}
:is(input,textarea,select,button,summary,a,[tabindex]):focus-visible{
  outline:2px solid var(--clay);outline-offset:1px}
::placeholder{color:var(--muted);opacity:.85}
/* [EXT] pure-CSS square caret — no image, offline-safe */
select{padding-right:36px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--clay) 50%),
                   linear-gradient(135deg,var(--clay) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* [EXT] field labels. HOUSE RULE: mono-uppercase is for labels of FOUR WORDS
   OR FEWER. These labels are full Spanish questions, so they stay Inter 600 —
   uppercasing a question at .18em tracking is unreadable and works against
   the artist's own words. */
.cbox{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
:is(.cbox label,.field-label,.fld label,label.q,.q,.respond label.q){
  display:block;font-family:var(--body);font-weight:600;font-size:14.5px;line-height:1.5;
  color:var(--clay-deep);margin:0 0 9px}
.q{color:var(--ink);margin:22px 0 10px;font-size:15px}
.field-group,.fld{margin:20px 0 0}
.respond{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
/* [EXT] chip radio / checkbox — from SOL §4 Pills (outline only, square).
   Radio checked = clay fill (one decision); checkbox checked = ink outline
   + thick left rule (a multi-select). Two states, zero extra colour.
   The input MUST stay opacity:0, never display:none — the +span adjacency
   and keyboard focus both depend on it. */
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.opt{position:relative}
.opt>input{position:absolute;opacity:0;width:0;height:0}
.opt>span{display:inline-block;font-family:var(--body);font-size:13.5px;line-height:1.3;
  padding:9px 15px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  border-radius:0;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.opt>span:hover{border-color:var(--clay);color:var(--ink)}
.opt>input:checked+span{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600}
.opt>input[type=checkbox]:checked+span{background:transparent;border-color:var(--ink);
  border-left-width:3px;color:var(--ink);font-weight:600}
.opt>input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
/* [EXT] checkbox rows */
.ck,.check{display:flex;gap:12px;align-items:flex-start;margin:10px 0;cursor:pointer;
  font-size:15px;line-height:1.5;color:var(--ink-soft)}
.ck>input,.check>input{margin:3px 0 0;width:17px;height:17px;flex:0 0 auto;
  accent-color:var(--clay);cursor:pointer;border-radius:0}
.check{margin-top:18px;padding:15px 17px;border:1px solid var(--line);background:var(--bone-2)}
.check>span{font-weight:600;font-size:14.5px;color:var(--ink)}
.check:has(input:checked){background:var(--bone);border-left:3px solid var(--ok-ink)}
/* =====================  BUTTONS  [SOL §4 .btn]  ===================== */
/* clay fill -> ink hover, square, mono uppercase .14em */
button,.btn,.big-link,.cp,.copy-btn,.bigcopy{
  display:inline-flex;align-items:center;gap:12px;justify-content:center;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;font-weight:600;padding:14px 26px;white-space:nowrap;cursor:pointer;
  background:var(--clay);color:#fff;border:1px solid var(--clay);border-radius:0;
  transition:background .2s,border-color .2s,color .2s}
button:hover,.btn:hover,.big-link:hover,.cp:hover,.copy-btn:hover,.bigcopy:hover{
  background:var(--ink);border-color:var(--ink);color:var(--bone)}
.big-link{text-decoration:none;color:#fff !important;margin:8px 0}
.cp{padding:11px 20px;font-size:11px}   /* [SOL §4 .btn-sm] */
/* =====================  FIXED ACTION BAR  [EXT]  =====================
   SOL has no fixed bar. Derived from the cover/footer ink band (§3):
   an ink strip, mono uppercase status line, clay CTA inverting to bone. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:var(--bone);border-top:1px solid var(--line-dark);
  padding:13px clamp(16px,4vw,48px);display:flex;gap:20px;
  align-items:center;justify-content:center;box-shadow:none}
.bar .st,.bar .prog{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,241,236,.62);font-variant-numeric:tabular-nums}
.bar button:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
/* =====================  CHIPS  [SOL §4 Pills]  ===================== */
/* outline only, transparent, square. [EXT] mono-uppercase because here
   pills are status labels — the information layer, per SOL §5. */
.pill,.pri,.when{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  padding:4px 9px;border:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--muted)}
.pill{font-size:10.5px;padding:4px 11px;color:var(--ink-soft)}
.pill.v{border-color:var(--ok-ink);color:var(--ok-ink)}
.pill.d{border-color:var(--clay);color:var(--clay-deep)}
/* Priority ladder: exactly ONE filled chip (SOL §5 "one large thing") */
.p1{background:var(--alert);border-color:var(--alert);color:#fff}
.p2{border-color:var(--clay);color:var(--clay-deep)}
.p3{border-color:var(--line);color:var(--ink-soft)}
.p4{border-color:var(--line);color:var(--muted);opacity:.72}
.when.hot{border-color:var(--alert);color:var(--alert)}
/* =====================  MISC  ===================== */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);z-index:99;
  background:var(--ink);color:var(--bone);border:1px solid var(--line-dark);border-radius:0;
  padding:14px 24px;max-width:90vw;text-align:center;box-shadow:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* [SOL §3 dark band] the closing device */
.copybox,.final{background:var(--ink);color:var(--bone);border:0;border-radius:0;
  padding:40px 34px;margin:34px 0 0;box-shadow:none}
.copybox{text-align:center}
.final h2,.copybox h2{color:var(--bone);font-family:var(--display);font-style:italic;
  font-weight:600;font-size:clamp(26px,4vw,40px);letter-spacing:0}
.final p,.copybox .hint,.copybox p{color:rgba(244,241,236,.66)}
.bigcopy{display:block;width:100%;margin-top:22px}
:is(.copybox,.final) button:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
footer{padding:40px 0 0;color:var(--muted);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;text-align:center}
/* =====================  RESPONSIVE  ===================== */
@media(max-width:900px){
  .shell{grid-template-columns:1fr;gap:0;padding:24px 18px 0}
  .nav{position:static;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:0}
  .nav h4{flex-basis:100%}
  .nav a{border-left:0;border-bottom:1px solid var(--line);padding:8px 16px 8px 0;margin-right:16px}
  .nav a.on{border-left:0;border-bottom:2px solid var(--clay)}
}
@media(max-width:560px){.bar{flex-wrap:wrap;gap:10px}body{padding-bottom:150px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* =====================  PRINT  [SOL §3]  ===================== */
@media print{
  @page{size:A4;margin:16mm}
  body{padding:0;background:#fff}
  .bar,.toast,button,.cp,.copy-btn,.bigcopy,.back{display:none !important}
  .nav,header{position:static !important}
  .shell{display:block}
  .wrap{max-width:none;padding:0}
  .phase,section{break-inside:avoid}
  .copybox,.final,header{background:#161616 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =====================================================================
   APP SHELL — sticky top menu + left panel
   Extends the house style; adds nothing to the palette.
   ===================================================================== */
.topbar{position:sticky;top:0;z-index:80;background:var(--ink);color:var(--bone);
  border-bottom:1px solid var(--line-dark)}
.topbar-in{max-width:1400px;margin:0 auto;padding:0 clamp(14px,3vw,32px);
  display:flex;align-items:stretch;gap:0;min-height:58px}
.brand{display:flex;align-items:center;gap:12px;padding-right:26px;margin-right:8px;
  border-right:1px solid var(--line-dark);flex:0 0 auto}
.brand b{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.01em;color:var(--bone)}
.brand span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,241,236,.5);display:block;margin-top:1px}
.tabs{display:flex;align-items:stretch;gap:0;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{display:flex;align-items:center;padding:0 16px;text-decoration:none;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,241,236,.62);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.tabs a:hover{color:var(--bone)}
.tabs a.on{color:var(--bone);border-bottom-color:var(--clay)}
.who{display:flex;align-items:center;gap:12px;padding-left:20px;margin-left:8px;
  border-left:1px solid var(--line-dark);flex:0 0 auto}
.who .nm{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,241,236,.62)}
.who .rol{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay);border:1px solid var(--clay);padding:2px 6px}
.who button{background:transparent;border:1px solid var(--line-dark);color:rgba(244,241,236,.62);
  padding:7px 12px;font-size:9.5px;letter-spacing:.14em}
.who button:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
@media(max-width:820px){.brand span{display:none}.who .nm{display:none}}

.appshell{max-width:1400px;margin:0 auto;padding:30px clamp(14px,3vw,32px) 90px;
  display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.side{position:sticky;top:88px}
.side h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 12px}
.side a{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);text-decoration:none;
  padding:7px 0 7px 13px;border-left:1px solid var(--line);transition:color .15s,border-color .15s}
.side a:hover{color:var(--ink);border-left-color:var(--muted)}
.side a.on{color:var(--clay-deep);border-left:2px solid var(--clay);font-weight:600}
.side .grp{margin-bottom:24px}
@media(max-width:900px){.appshell{grid-template-columns:1fr;gap:0}
  .side{position:static;margin-bottom:26px;display:flex;flex-wrap:wrap;gap:0}
  .side .grp{margin:0 18px 8px 0}
  .side a{border-left:0;border-bottom:1px solid var(--line);padding:6px 14px 6px 0;margin-right:14px;display:inline-block}}

/* login */
.gate{max-width:460px;margin:0 auto;padding:80px 24px}
.gate h1{font-size:clamp(30px,5vw,46px);margin-bottom:6px}
.gate h1::after{content:"";display:block;width:60px;height:2px;background:var(--clay);margin:20px 0 0}
.gate .f{margin-top:28px}
.gate label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.gate button{width:100%;margin-top:14px;justify-content:center}

/* contact cards */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:0;
  border-top:1px solid var(--line)}
.person{border-bottom:1px solid var(--line);padding:20px 22px 20px 0;position:relative}
.person:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
.person h3{font-size:21px;margin:0 0 2px}
.person .ig{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--clay-deep)}
.person .rl{font-size:14px;color:var(--ink-soft);margin:8px 0 10px}
.person .cts{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);padding:3px 8px;color:var(--muted);white-space:nowrap}
.chip.d-discipline{border-color:var(--clay);color:var(--clay-deep)}
.chip.d-instrument{border-color:var(--ink-soft);color:var(--ink-soft)}
.chip.d-song{border-color:var(--ok-ink);color:var(--ok-ink)}
.chip.d-event{border-color:var(--amber-ink);color:var(--amber-ink)}
.chip.d-status{background:var(--bone-2)}
.person .lines{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.person .line{font-size:12.5px;color:var(--ink-soft);padding:3px 0;display:flex;gap:8px}
.person .line b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay);flex:0 0 auto;padding-top:2px}
@media(max-width:760px){.people{grid-template-columns:1fr}
  .person:nth-child(even){padding-left:0;border-left:0}}

/* filter bar */
.filters{border:1px solid var(--line);background:var(--bone-2);padding:18px 20px;margin:0 0 26px}
.filters .row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters .fg{flex:1;min-width:150px}
.filters label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.filters select,.filters input{font-size:13.5px;padding:8px 10px}
.count{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.count b{color:var(--clay-deep)}
.empty{border:1px dashed var(--line);padding:36px;text-align:center;color:var(--muted);font-size:15px}