/*!
 * Components. First ported from the Ledger design; restyled for the Private Club design (spec decision D35,
 * November 5, 2026) and authored by hand since. Every literal is a token from tokens.css. The Private Club rules that
 * override a Ledger rule sit in the "Private Club" block at the end of this file, so each one reads as a decision.
 */

.professionbox{border:1px solid var(--line);border-radius:var(--radius-4);background:var(--card);margin-top:var(--space-22)}
.professionbox summary{padding:var(--space-16) var(--space-22);cursor:pointer;list-style:none;font-family:var(--font-label);font-weight:600;font-size:var(--fs-11-5);letter-spacing:.17em;text-transform:uppercase;color:var(--deep);display:flex;justify-content:space-between;align-items:center;gap:var(--space-14)}
.professionbox summary::-webkit-details-marker{display:none}
.professionbox summary::after{content:"+";font-family:var(--font-body);font-size:var(--fs-21);letter-spacing:0;color:var(--brass)}
.professionbox[open] summary::after{content:"\2013"}
.professionbox summary span{color:var(--muted)}
.professionnote{padding:0 var(--space-22);margin:0 0 var(--space-18);font-size:var(--fs-14-5);color:var(--muted);max-width:70ch}
.professiongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:var(--line-soft);border-top:1px solid var(--line-soft)}
.professionlink{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;text-align:left;background:var(--card);border:0;padding:var(--space-16) var(--space-20);transition:background var(--motion-180)}
.professionlink:hover{background:var(--sand)}
.professionlink strong{font-family:var(--font-display);font-size:var(--fs-1-02rem);font-weight:600;letter-spacing:-.015em}
.professionlink span{font-size:var(--fs-12-5);color:var(--muted)}
.professionhero{border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--radius-4);background:var(--card);padding:var(--space-30) var(--space-32);margin-top:var(--space-26)}
.professionhero h2{font-size:var(--fs-profession-h2);margin-bottom:var(--space-14)}
.professionhero p{color:var(--muted);max-width:64ch;font-size:var(--fs-16-5)}
.urlline{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap;margin:0 0 var(--space-22)}
.urlline span{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.urlline code{font-family:var(--font-code);font-size:var(--fs-13);color:var(--deep);background:var(--sand);border-radius:var(--radius-2);padding:var(--space-5) var(--space-11);word-break:break-all}
.professionhero .th-lede{font-size:var(--fs-18-5);color:var(--ink);max-width:66ch;margin-bottom:var(--space-30)}
.th-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-34);padding:var(--space-28) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
@media(max-width:760px){.th-cols{grid-template-columns:1fr;gap:var(--space-26)}}
.th-cols h3,.th-local h3{font-size:var(--fs-1-12rem);margin-bottom:var(--space-14)}
.th-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-10)}
.th-cols li{position:relative;padding-left:var(--space-20);font-size:var(--fs-15-5);color:var(--muted);line-height:1.5}
.th-cols li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brass)}
.th-local{padding:var(--space-28) 0 var(--space-4)}
.th-local p{color:var(--muted);max-width:70ch;font-size:var(--fs-16-5)}
.th-held{font-family:var(--font-label);font-weight:600;font-size:var(--fs-12);letter-spacing:.09em;text-transform:uppercase;color:var(--deep);background:var(--sand);border-radius:var(--radius-3);padding:var(--space-12) var(--space-16);margin:0 0 var(--space-22)}
.th-seo{margin-bottom:var(--space-22);border-top:1px solid var(--line-soft);padding-top:var(--space-16)}
.th-seo summary{cursor:pointer;list-style:none;font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.th-seo summary::-webkit-details-marker{display:none}
.th-seo summary::before{content:"+ ";color:var(--brass)}
.th-seo[open] summary::before{content:"\2013 "}
.th-meta{display:flex;gap:var(--space-12);flex-wrap:wrap;align-items:baseline;margin:var(--space-14) 0 0}
.th-meta span{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);flex:none;min-width:120px}
.th-meta code{font-family:var(--font-code);font-size:var(--fs-12-5);color:var(--ink);max-width:62ch;line-height:1.6}
.missing{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);font-weight:500;letter-spacing:.14em;color:var(--palette-missing);background:var(--palette-missing-a07);border:1px dashed var(--palette-missing-a45);border-radius:var(--radius-2);padding:var(--space-3) var(--space-9);display:inline-block;vertical-align:middle}
.notice{background:var(--palette-brass-a07);border:1px solid var(--palette-brass-a40);border-left:3px solid var(--brass);border-radius:var(--radius-3);padding:var(--space-20) var(--space-24);margin-bottom:var(--space-36)}
.notice p:last-child{margin-bottom:0}

/* ---- eyebrow / ledger rule motif ---- */
.eyebrow{
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-11-5);letter-spacing:.19em;
  text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:var(--space-12);margin-bottom:var(--space-20)
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--brass-lt),transparent)}

/* ---- header ---- */
.topbar{background:var(--deep);color:var(--palette-mist);font-size:var(--fs-13-5)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);min-height:40px;flex-wrap:wrap}
.topbar a{color:var(--palette-mist);text-decoration:none;font-family:var(--font-label);font-weight:600;font-size:var(--fs-12-5)}
.topbar a:hover{color:var(--brass-lt)}
.topbar .tb-note{font-family:var(--font-label);font-weight:600;font-size:var(--fs-11-5);letter-spacing:.1em;text-transform:uppercase;color:var(--palette-mist-a62)}

header.site{position:sticky;top:0;z-index:60;background:var(--palette-paper-a93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-20);min-height:76px}
.brand{display:flex;align-items:center;gap:var(--space-13);text-decoration:none}
.brand-mark{width:42px;height:42px;flex:none;border-radius:var(--radius-3);background:var(--deep);display:grid;place-items:center;color:var(--brass-lt);font-family:var(--font-display);font-weight:700;font-size:var(--fs-19);letter-spacing:-.03em}
.brand-txt strong{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-17);line-height:1.1;letter-spacing:-.02em}
.brand-txt span{display:block;font-family:var(--font-label);font-weight:600;font-size:var(--fs-9-5);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:var(--space-3)}
nav.main{display:flex;align-items:center;gap:var(--space-4)}
nav.main a{
  text-decoration:none;padding:var(--space-9) var(--space-14);font-size:var(--fs-15);font-weight:500;border-radius:var(--radius-3);color:var(--ink);
  transition:background var(--motion-180),color var(--motion-180)
}
nav.main a:hover{background:var(--sand)}
nav.main a.on{color:var(--deep);background:var(--sand)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-9);text-decoration:none;
  padding:var(--space-13) var(--space-24);border-radius:var(--radius-3);font-weight:600;font-size:var(--fs-15);border:1.5px solid transparent;
  transition:transform var(--motion-160),background var(--motion-180),color var(--motion-180),border-color var(--motion-180)
}
.btn-primary{background:var(--deep);color:var(--palette-paper);border-color:var(--deep)}
.btn-primary:hover{background:var(--deep-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--deep);border-color:var(--palette-deep-a30)}
.btn-ghost:hover{border-color:var(--deep);background:var(--palette-deep-a05)}
.btn-brass{background:var(--brass);color:var(--palette-white);border-color:var(--brass)}
.btn-brass:hover{background:var(--palette-brass-hover);transform:translateY(-1px)}
.navtoggle{display:none;background:none;border:1.5px solid var(--line);border-radius:var(--radius-3);padding:var(--space-9) var(--space-12)}

/* ---- page transition ---- */
/* PORTING NOTE — deliberate omission, not a redesign.
   The prototype is a single HTML file that shows and hides .page divs to fake
   routing. Two of its rules cannot be ported:
       .page{display:none}
       .page.on{display:block;animation:fade .35s ease}
   `.page` is also a WordPress body class (body.page on every static Page), so
   porting the first rule verbatim would set display:none on the site's own
   pages. The routing it supported does not exist here — WordPress serves each
   page at a real URL. The fade keyframes are kept and applied to <main>. */
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- hero: the ledger ---- */
.hero{position:relative;background:var(--surface-page);color:var(--text);overflow:hidden;padding:var(--space-96) 0 0;border-bottom:1px solid var(--palette-brass-a40)}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(0deg,transparent 0 43px,var(--palette-brass-lt-a09) 43px 44px);
}
.hero::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:var(--space-neg-590);width:1px;
  background:var(--palette-brass-lt-a22)
}
@media(max-width:1240px){.hero::after{display:none}}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:var(--brass-text)}
.hero .eyebrow::after{background:linear-gradient(90deg,var(--palette-brass-lt-a50),transparent)}
.hero h1{font-size:var(--fs-hero-h1);letter-spacing:-.035em;max-width:15ch;font-weight:600}
.hero h1 em{font-style:italic;color:var(--accent-display)}
.hero .lede{font-size:var(--fs-19-5);max-width:52ch;color:var(--text-muted);margin-top:var(--space-26)}
.hero-cta{display:flex;gap:var(--space-14);flex-wrap:wrap;margin-top:var(--space-34)}

/* ledger strip */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-74);border-top:1px solid var(--palette-brass-a40)}
.ledger div{padding:var(--space-26) var(--space-26) var(--space-30);border-right:1px solid var(--line)}
.ledger div:last-child{border-right:0}
.ledger dt{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.17em;text-transform:uppercase;color:var(--brass-text);margin-bottom:var(--space-10)}
.ledger dd{margin:0;font-family:var(--font-display);font-size:var(--fs-2-3rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.ledger dd small{display:block;font-family:var(--font-body);font-size:var(--fs-13-5);font-weight:400;color:var(--text-muted);margin-top:var(--space-8);letter-spacing:0}
@media(max-width:820px){.ledger{grid-template-columns:1fr 1fr}.ledger div{border-bottom:1px solid var(--line)}}

section{padding:var(--space-96) 0}
.sec-head{max-width:66ch;margin-bottom:var(--space-52)}
.sec-head h2{font-size:var(--fs-sec-head-h2)}
.sec-head p{color:var(--muted);font-size:var(--fs-18);margin-top:var(--space-18)}

/* ---- quick find ---- */
.quickfind{background:var(--card);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.chipwrap{display:flex;flex-wrap:wrap;gap:var(--space-10)}
.chip{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-999);padding:var(--space-10) var(--space-19);
  font-size:var(--fs-14-5);font-weight:500;color:var(--ink);text-decoration:none;transition:all var(--motion-180)
}
.chip:hover{border-color:var(--deep);background:var(--deep);color:var(--palette-paper);transform:translateY(-1px)}
.chip.on{background:var(--deep);color:var(--palette-paper);border-color:var(--deep)}
.chip .ct{font-family:var(--font-label);font-weight:600;font-size:var(--fs-11);opacity:.55;margin-left:var(--space-7)}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.pillar{background:var(--paper);padding:var(--space-40) var(--space-34)}
.pillar .n{font-family:var(--font-label);font-weight:600;font-size:var(--fs-11);letter-spacing:.16em;color:var(--brass);margin-bottom:var(--space-22)}
.pillar h3{font-size:var(--fs-1-5rem);margin-bottom:var(--space-14)}
.pillar p{color:var(--muted);font-size:var(--fs-16);margin:0}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* ---- search bar ---- */
.searchbar{position:relative;margin-bottom:var(--space-22)}
.searchbar input{
  width:100%;padding:var(--space-19) var(--space-54) var(--space-19) var(--space-54);font-size:var(--fs-17);font-family:inherit;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-4);transition:border-color var(--motion-180),box-shadow var(--motion-180)
}
.searchbar input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px var(--palette-deep-a09)}
.searchbar input::placeholder{color:var(--palette-placeholder)}
.searchbar .ico{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.clearbtn{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);background:var(--sand);border:0;
  width:30px;height:30px;border-radius:50%;color:var(--ink);display:none;place-items:center;font-size:var(--fs-16);line-height:1
}
.clearbtn.show{display:grid}
.toolrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-20);flex-wrap:wrap;margin:var(--space-26) 0 var(--space-22);padding-top:var(--space-22);border-top:1px solid var(--line-soft)}
.count{font-family:var(--font-label);font-weight:600;font-size:var(--fs-12-5);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.count b{color:var(--deep)}
.sortsel{font:inherit;font-size:var(--fs-14-5);padding:var(--space-9) var(--space-13);border:1px solid var(--line);border-radius:var(--radius-3);background:var(--card);color:var(--ink)}

/* ---- index cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--space-20);list-style:none;padding:0;margin:0}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-3);
  padding:var(--space-26) var(--space-26) var(--space-22);text-align:left;width:100%;
  box-shadow:0 1px 0 var(--line-soft);transition:transform var(--motion-200),box-shadow var(--motion-200),border-color var(--motion-200);
  display:flex;flex-direction:column;gap:var(--space-16)
}
.card::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:var(--brass);
  opacity:0;transition:opacity var(--motion-200)
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--palette-deep-a28)}
.card:hover::before{opacity:1}
.card-top{display:flex;gap:var(--space-15);align-items:center}
.mono-av{
  width:56px;height:56px;flex:none;border-radius:var(--radius-3);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-19);letter-spacing:-.02em;color:var(--palette-paper);
  background:var(--deep);overflow:hidden
}
.mono-av img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:var(--fs-1-2rem);letter-spacing:-.01em;margin-bottom:var(--space-5)}
.card .role{font-size:var(--fs-14-5);color:var(--muted);line-height:1.4}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-12);padding-top:var(--space-15);border-top:1px solid var(--line-soft);margin-top:auto}
.tag{
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.11em;text-transform:uppercase;
  color:var(--brass);background:var(--palette-brass-a09);padding:var(--space-5) var(--space-10);border-radius:var(--radius-2)
}
.card-foot .go{font-size:var(--fs-13-5);color:var(--deep);font-weight:600;display:flex;align-items:center;gap:var(--space-6)}

.empty{text-align:center;padding:var(--space-76) var(--space-24);border:1px dashed var(--line);border-radius:var(--radius-4);background:var(--card)}
.empty h3{font-size:var(--fs-1-5rem);margin-bottom:var(--space-12)}
.empty p{color:var(--muted);max-width:46ch;margin:0 auto var(--space-26)}

/* ---- modal ---- */
.overlay{
  position:fixed;inset:0;z-index:120;background:var(--palette-shade-a55);backdrop-filter:blur(7px) saturate(1.1);
  display:none;align-items:center;justify-content:center;padding:var(--space-26);opacity:0;transition:opacity var(--motion-240)
}
.overlay.open{display:flex;opacity:1}
.modal{
  position:relative;width:min(660px,100%);max-height:88vh;overflow:auto;border-radius:var(--radius-5);
  background:var(--palette-card-a95);border:1px solid var(--palette-brass-lt-a50);
  box-shadow:0 40px 90px -24px var(--palette-shade-a55);
  transform:translateY(16px) scale(.985);transition:transform var(--motion-280) cubic-bezier(.2,.8,.3,1)
}
.overlay.open .modal{transform:none}
.modal-hd{background:var(--surface-sand);color:var(--text);border-bottom:1px solid var(--palette-brass-a40);padding:var(--space-34) var(--space-36) var(--space-30);position:relative;border-radius:var(--radius-4) var(--radius-4) 0 0}
.modal-hd::before{content:"";position:absolute;inset:0;opacity:.45;border-radius:var(--radius-4) var(--radius-4) 0 0;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,var(--palette-brass-lt-a10) 27px 28px)}
.mh-in{position:relative;display:flex;gap:var(--space-20);align-items:center}
.mh-in .mono-av{width:78px;height:78px;font-size:var(--fs-26);background:var(--brass);color:var(--palette-on-brass);border:1px solid var(--palette-brass-lt-a60)}
.modal-hd h2{font-size:var(--fs-1-85rem);letter-spacing:-.02em}
.modal-hd .role{font-size:var(--fs-15-5);color:var(--text-muted);margin-top:var(--space-6)}
.modal-hd .tag{color:var(--brass-text);background:var(--palette-brass-a09);margin-top:var(--space-12);display:inline-block}
.closebtn{
  position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:var(--surface-card);border:1px solid var(--line);color:var(--text);
  display:grid;place-items:center;font-size:var(--fs-19);line-height:1;transition:background var(--motion-180),transform var(--motion-180)
}
.closebtn:hover{background:var(--surface-page);transform:rotate(90deg)}
.modal-bd{padding:var(--space-32) var(--space-36) var(--space-36)}
.modal-bd .bio{font-size:var(--fs-17);color:var(--palette-modal-bio);margin-bottom:var(--space-28)}
.deets{display:grid;gap:var(--space-2);background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius-3);overflow:hidden;margin-bottom:var(--space-26)}
.deet{background:var(--card);display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-15) var(--space-18);flex-wrap:wrap}
.deet dt{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.deet dd{margin:0;font-size:var(--fs-15-5);font-weight:500}
.deet dd a{color:var(--deep);text-decoration:none;border-bottom:1px solid var(--palette-deep-a30)}
.deet dd a:hover{border-bottom-color:var(--deep)}
.modal-acts{display:flex;gap:var(--space-11);flex-wrap:wrap}
.copied{font-family:var(--font-label);font-weight:600;font-size:var(--fs-11);color:var(--brass);letter-spacing:.1em}

/* ---- about / news / contact ---- */
.prose{max-width:68ch}
.prose h3{font-size:var(--fs-1-5rem);margin:var(--space-44) 0 var(--space-14)}
.prose p{color:var(--palette-prose)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-64);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-40)}}
.sidecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-4);padding:var(--space-32);position:sticky;top:104px}
.sidecard h3{font-size:var(--fs-1-3rem);margin-bottom:var(--space-16)}
.sidecard dl{margin:0 0 var(--space-22)}
.sidecard dt{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:var(--space-16)}
.sidecard dd{margin:var(--space-4) 0 0;font-size:var(--fs-16)}

.openseats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-14);margin-top:var(--space-8)}
.seat{border:1px dashed var(--palette-brass-a50);background:var(--palette-brass-a05);border-radius:var(--radius-3);padding:var(--space-18) var(--space-20)}
.seat strong{display:block;font-family:var(--font-display);font-size:var(--fs-1-08rem);font-weight:600;margin-bottom:var(--space-5)}
.seat span{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.13em;text-transform:uppercase;color:var(--brass)}

.timeline{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.timeline li{padding:0 0 var(--space-36) var(--space-30);position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--brass);border:2px solid var(--paper)}
.timeline .when{font-family:var(--font-label);font-weight:600;font-size:var(--fs-11);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--space-8)}
.timeline h3{font-size:var(--fs-1-28rem);margin-bottom:var(--space-9)}
.timeline p{color:var(--muted);margin:0;font-size:var(--fs-16)}

.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{padding:var(--space-22) 0;font-family:var(--font-display);font-size:var(--fs-1-18rem);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-20);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);color:var(--brass);font-size:var(--fs-24);font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:var(--space-22);margin:0;max-width:70ch}

.field{margin-bottom:var(--space-20)}
.field label{display:block;font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-8)}
.field input,.field textarea,.field select{
  width:100%;padding:var(--space-14) var(--space-16);font:inherit;font-size:var(--fs-16);background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--radius-3);color:var(--ink)
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 4px var(--palette-deep-a08)}
.field textarea{min-height:130px;resize:vertical}

/* ---- CTA band + footer ---- */
.band{background:var(--surface-sand);color:var(--text);position:relative;overflow:hidden;border-top:1px solid var(--palette-brass-a40)}
.band::before{content:"";position:absolute;inset:0;opacity:.42;
  background-image:repeating-linear-gradient(0deg,transparent 0 43px,var(--palette-brass-lt-a09) 43px 44px)}
.band .wrap{position:relative;text-align:center;max-width:760px}
.band h2{font-size:var(--fs-band-h2);margin-bottom:var(--space-20)}
.band p{color:var(--text-muted);font-size:var(--fs-18-5);margin-bottom:var(--space-32)}
.band .hero-cta{justify-content:center}

footer.site{background:var(--palette-footer);color:var(--palette-mist-a72);padding:var(--space-66) 0 var(--space-34);font-size:var(--fs-15)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--space-48);padding-bottom:var(--space-44);border-bottom:1px solid var(--palette-brass-lt-a16)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr;gap:var(--space-34)}}
footer.site h4{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.17em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:var(--space-18);font-weight:500}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-11)}
footer.site a{color:var(--palette-mist-a80);text-decoration:none}
footer.site a:hover{color:var(--brass-lt)}
footer.site .fbrand strong{font-family:var(--font-display);font-size:var(--fs-19);color:var(--palette-ink-on-dark);display:block;margin-bottom:var(--space-12)}
footer.site .fbrand p{max-width:40ch;font-size:var(--fs-15)}
.fbot{display:flex;justify-content:space-between;gap:var(--space-20);flex-wrap:wrap;padding-top:var(--space-26);font-family:var(--font-label);font-weight:600;font-size:var(--fs-11-5);letter-spacing:.08em;color:var(--palette-mist-a50)}

@media(max-width:900px){
  nav.main{position:fixed;inset:0 0 auto;top:116px;background:var(--paper);flex-direction:column;align-items:stretch;padding:var(--space-16) var(--space-24) var(--space-26);border-bottom:1px solid var(--line);display:none;box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:var(--space-14) var(--space-12);font-size:var(--fs-17)}
  .navtoggle{display:block}
  .hdr-cta{display:none}
  section{padding:var(--space-68) 0}
  .hero{padding:var(--space-64) 0 0}
  .modal-hd,.modal-bd{padding-left:var(--space-24);padding-right:var(--space-24)}
  .mh-in{flex-direction:column;align-items:flex-start;gap:var(--space-16)}
}
/* ---- WordPress integration -------------------------------------------------
   The prototype renders the profession page as a panel inside the directory, under
   that page's h1, so its section headings are h3. Here each profession is its own
   page and its h1 is the profession name, which makes those same headings h2 — a
   page that goes h1 -> h3 skips a level and axe reports it.

   No new value is introduced: this is the prototype's own .th-cols h3 / .th-local
   h3 treatment, applied to the heading level this context actually calls for.
   ------------------------------------------------------------------------- */
.th-cols h2,.th-local h2{font-size:var(--fs-1-12rem);margin-bottom:var(--space-14)}

/* Same reason: a member profile's only headings are its h1 and the side card's
   title, so that title is an h2 there. Identical treatment to .sidecard h3. */
.sidecard h2{font-size:var(--fs-1-3rem);margin-bottom:var(--space-16)}

/* Same reason again, for long-form pages. About and the three legal documents
   have an h1 of their own, so the subheads inside .prose are h2 rather than the
   prototype's h3. Identical treatment to .prose h3 — same two declarations, same
   values — so nothing looks different. */
.prose h2{font-size:var(--fs-1-5rem);margin:var(--space-44) 0 var(--space-14)}

/* And the timeline. On News & Events the entries sit under the page's own h1,
   so each entry title is an h2. Identical treatment to .timeline h3. */
.timeline h2{font-size:var(--fs-1-28rem);margin-bottom:var(--space-9)}

/* The two footer column headings. The prototype writes them as h4, but every
   page here reaches h2 before the footer, so an h4 is an h2 -> h4 skip on all
   69 URLs and axe's heading-order rule reports it. They are h2 in the markup
   now; these are the identical declarations to `footer.site h4` above — same
   family, size, tracking, case, color, margin and weight — so the rendering is
   byte-for-byte the approved footer. */
footer.site h2{font-family:var(--font-label);font-weight:600;font-size:var(--fs-10-5);letter-spacing:.17em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:var(--space-18);font-weight:500}

/* The directory, the member archive, the search results and the blog archive all
   list cards directly under the page h1, which would make each card's h3 an
   h1 -> h3 skip. Each of those templates prints a visually hidden h2 naming the
   list, using `.sr` from base.css. There is deliberately no second class for it:
   an earlier draft added `.cards-heading` with declarations identical to `.sr`
   and no template ever used it, which is exactly the drift that leaves a future
   reader guessing which of two identical rules is authoritative. `.sr` is. */

/* ---- contrast remediation, folded in from a11y.css (PERFORMANCE.md s3, decision D9) ----
   The two remediated colors are declared values in tokens.css (--palette-muted, --palette-brass-text). */
/* --- brass used as a text color ------------------------------------------ */
.eyebrow{color:var(--brass-text)}
.pillar .n{color:var(--brass-text)}
.tag{color:var(--brass-text)}
.seat span{color:var(--brass-text)}
.timeline .when{color:var(--brass-text)}
.copied{color:var(--brass-text)}
.professionbox summary::after{color:var(--brass-text)}
.th-seo summary::before{color:var(--brass-text)}
.faq summary::after{color:var(--brass-text)}

/* The hero and the modal header were navy until the light Private Club (D36), and restated --brass-lt here. They
   are ivory and sand now, so the --brass-text rules above reach them as they reach every other page ground. */

/* --- brass used as a text *background* ----------------------------------- */
/* Fill darkened for the label (5.85:1); border left at the original --brass so
   the component still has a 3.11:1 boundary against the deep-green hero and CTA
   band it always sits on. Both numbers are in the header above. */
.btn-brass{background:var(--brass-text);border-color:var(--brass)}

/* --- the footer legal row ------------------------------------------------ */
.fbot{color:var(--palette-mist-a60)}

/* --- the count badge on a category chip ---------------------------------- */
/* .chip .ct is --ink at opacity .55, which composites to a measured blend on the card
   and measures 3.71:1 at 11px. .68 composites to a measured blend and measures 5.42:1
   on the card and 5.68:1 on the deep-green selected chip, and is still visibly
   a secondary number next to the label. */
.chip .ct{opacity:var(--opacity-chip-count)}

/* ---- utilities: named classes for the inline styles in the WordPress page content (plan F7) ---- */
.h-quickfind{font-size:var(--fs-quickfind-h2);margin-bottom:var(--space-26)}
.pt-0{padding-top:0}
.pb-0{padding-bottom:0}
.measure-860{max-width:var(--measure-860)}
.mt-28{margin-top:var(--space-28)}
.mt-32{margin-top:var(--space-32)}
.note-small{margin-top:var(--space-20);font-size:var(--fs-14)}
.prose-lead,.prose p.prose-lead{font-size:var(--fs-20);color:var(--ink)}
.link-deep{color:var(--deep)}

/* ---- credit bar (spec 5.4). Hidden from assistive technology; the footer carries the same credit as text. ---- */
html{scroll-padding-bottom:var(--credit-bar-block)}
body{padding-bottom:var(--credit-bar-block)}
.credit-bar{position:fixed;inset-inline:0;bottom:0;block-size:var(--credit-bar-block);pointer-events:none;display:grid;place-items:center;
  color:var(--credit-text);background-color:var(--credit-ground);
  background-image:linear-gradient(100deg,transparent 35%,var(--credit-sheen) 50%,transparent 65%);background-size:300% 100%;background-repeat:no-repeat;
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-credit);letter-spacing:.08em;z-index:var(--z-credit);
  animation:credit-enter var(--motion-slow) var(--ease-out) both,credit-sheen var(--motion-sheen) linear infinite}
@keyframes credit-enter{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes credit-sheen{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.credit-bar{animation:none}}

/* ---- monogram avatars (plan P2). The WordPress avatar set the category gradient in a style attribute; output rules
   forbid style attributes (spec 3.2), so each hue from sfbl_category_hue() is a class over two palette stops. ---- */
.mono-fill{width:100%;height:100%;display:grid;place-items:center}
.mono-hue-14{background:linear-gradient(150deg,var(--palette-mono-14-a),var(--palette-mono-14-b))}
.mono-hue-28{background:linear-gradient(150deg,var(--palette-mono-28-a),var(--palette-mono-28-b))}
.mono-hue-44{background:linear-gradient(150deg,var(--palette-mono-44-a),var(--palette-mono-44-b))}
.mono-hue-96{background:linear-gradient(150deg,var(--palette-mono-96-a),var(--palette-mono-96-b))}
.mono-hue-122{background:linear-gradient(150deg,var(--palette-mono-122-a),var(--palette-mono-122-b))}
.mono-hue-168{background:linear-gradient(150deg,var(--palette-mono-168-a),var(--palette-mono-168-b))}
.mono-hue-186{background:linear-gradient(150deg,var(--palette-mono-186-a),var(--palette-mono-186-b))}
.mono-hue-196{background:linear-gradient(150deg,var(--palette-mono-196-a),var(--palette-mono-196-b))}
.mono-hue-200{background:linear-gradient(150deg,var(--palette-mono-200-a),var(--palette-mono-200-b))}
.mono-hue-212{background:linear-gradient(150deg,var(--palette-mono-212-a),var(--palette-mono-212-b))}
.mono-hue-228{background:linear-gradient(150deg,var(--palette-mono-228-a),var(--palette-mono-228-b))}
.mono-hue-262{background:linear-gradient(150deg,var(--palette-mono-262-a),var(--palette-mono-262-b))}
.mono-hue-280{background:linear-gradient(150deg,var(--palette-mono-280-a),var(--palette-mono-280-b))}
.mono-hue-330{background:linear-gradient(150deg,var(--palette-mono-330-a),var(--palette-mono-330-b))}
.mono-hue-348{background:linear-gradient(150deg,var(--palette-mono-348-a),var(--palette-mono-348-b))}

/* ---- the home ledger has three cells, not four (spec D32, 2026-10-23): the Members cell, whose value was the member
   count, is gone. One column on a phone rather than a 2 + 1 grid with a hole in it. ---- */
.ledger{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.ledger{grid-template-columns:1fr}.ledger div{border-right:0}}

/* ---- member modal scroll lock: a class on html rather than body.style (plan P3, no style writes) ---- */
html.modal-open,html.modal-open body{overflow:hidden}

/* ---- the honeypot (spec 10.5). Off-canvas by class, not by the inline style the WordPress plugin used: an
   inline style attribute is refused by this build's own output rules, and a rule that bends for one form is not a
   rule. Hidden from people and from assistive technology; a bot fills it in and gives itself away. ---- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   Private Club (owner decision November 5, 2026, spec decision D35)

   The client chose the "Private Club" direction over the Ledger: navy and champagne gold on ivory, a Garamond
   display face, letter-spaced capitals for labels and buttons, square corners, and a centered hero with a crest and
   the member-or-profession search. The palette itself changed in tokens.css; these rules are the places where the
   Ledger's shapes, not just its colors, changed. Every value is a token.

   THE LIGHT PRIVATE CLUB (owner decision November 6, 2026, spec decision D36). The client found the navy header,
   hero and bands too dark and asked for the colors inverted while keeping the feel: those grounds are now ivory and
   sand with navy type, gold rules and the gold crest, and every color on them is a semantic alias, so the dark layer
   still paints them dark for a visitor whose device is set to dark. The footer and the credit bar stay navy.
   ========================================================================== */

/* ---- labels: the Ledger's monospace labels are letter-spaced capitals in the body face ---- */
.eyebrow{letter-spacing:var(--tracking-label)}
.pillar .n{letter-spacing:var(--tracking-label)}

/* ---- header: an ivory bar under a gold rule, with a ringed monogram and a gold call to action (D36) ---- */
.topbar{background:var(--surface-sand);color:var(--text-muted);border-bottom:1px solid var(--line-soft)}
.topbar a{color:var(--text)}
.topbar a:hover{color:var(--brass-text)}
.topbar .tb-note{color:var(--text-muted)}
header.site{border-bottom-color:var(--palette-brass-a40)}
.brand-mark{background:transparent;border:1px solid var(--accent-display);border-radius:var(--radius-round);color:var(--accent-display)}
.brand-txt strong{color:var(--text);font-size:var(--fs-20)}
.brand-txt span{color:var(--brass-text)}
nav.main a{font-size:var(--fs-12-5);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
header.site .btn-primary{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--palette-on-brass)}
header.site .btn-primary:hover{background:var(--palette-brass-lt-hover);border-color:var(--palette-brass-lt-hover);color:var(--palette-on-brass)}

/* ---- buttons: square, small capitals, generous ---- */
.btn{border-radius:0;padding:var(--space-16) var(--space-28);font-size:var(--fs-12-5);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero .btn-brass,.band .btn-brass{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--palette-on-brass)}
.hero .btn-brass:hover,.band .btn-brass:hover{background:var(--palette-brass-lt-hover);border-color:var(--palette-brass-lt-hover);color:var(--palette-on-brass)}

/* ---- hero: centered under the crest, a soft gold light instead of the ruled lines ---- */
.hero::before{opacity:1;background-image:radial-gradient(ellipse at 50% 0%,var(--palette-brass-lt-a14),transparent 62%)}
.hero::after{display:none}
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::before{content:"";flex:1;max-width:var(--space-64);height:1px;background:linear-gradient(270deg,var(--palette-brass-lt-a50),transparent)}
.hero .eyebrow::after{max-width:var(--space-64)}
.hero h1{max-width:17ch}
.hero .lede{margin-inline:auto}
.hero-cta{justify-content:center}
.hero .ledger{align-self:stretch;text-align:center}
.crest{display:block;margin-bottom:var(--space-26)}
.crest-ring{fill:none;stroke:var(--accent-display);stroke-width:1.5}
.crest-ring--inner{stroke-width:.75}
.crest-seat{fill:var(--accent-display)}

/* ---- the hero search (D35): a GET form to the directory; js/home-search.mjs lists matches as links below it ---- */
.hero-search{width:100%;max-width:720px;margin-top:var(--space-40);text-align:left}
.hero-search-label{display:block;text-align:center;font-size:var(--fs-11-5);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brass-text);margin-bottom:var(--space-12)}
.hero-search-row{display:flex;flex-wrap:wrap;border:1px solid var(--palette-brass-a50);background:var(--surface-card);box-shadow:var(--shadow)}
.hero-search-row input{flex:999 1 260px;min-width:0;font:inherit;font-size:var(--fs-17);padding:var(--space-18) var(--space-22);border:0;border-radius:0;background:transparent;color:var(--text)}
.hero-search-row input::placeholder{color:var(--text-muted)}
.hero-search-row input:focus-visible{outline-offset:-3px}
.hero-search-go{flex:1 1 140px;border:0;border-radius:0;background:var(--brass-lt);color:var(--palette-on-brass);font-size:var(--fs-12-5);font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:var(--space-18) var(--space-28)}
.hero-search-go:hover{background:var(--palette-brass-lt-hover)}
.hero-search-results{background:var(--surface-card);color:var(--text);border:1px solid var(--palette-brass-a50);border-top:0;box-shadow:var(--shadow)}
.hero-search-results[hidden]{display:none}
.hero-hits{list-style:none;margin:0;padding:0}
.hero-hits li+li{border-top:1px solid var(--line-soft)}
.hero-hit{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-14) var(--space-22);text-decoration:none;color:var(--text)}
.hero-hit:hover{background:var(--surface-sand)}
.hero-hit-mono{flex:none;width:40px;height:40px;border-radius:var(--radius-round);border:1px solid var(--brass-text);color:var(--brass-text);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-16)}
.hero-hit-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.hero-hit-name{font-family:var(--font-display);font-size:var(--fs-20);font-weight:600;line-height:1.2}
.hero-hit-detail{font-size:var(--fs-11-5);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.hero-hit-kind{flex:none;font-size:var(--fs-11);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text)}
.hero-search-none,.hero-search-more{display:block;margin:0;padding:var(--space-16) var(--space-22);font-size:var(--fs-15);color:var(--text-muted)}
.hero-search-more{border-top:1px solid var(--line-soft);font-weight:600}
.hero-search-more,.hero-search-none a{color:var(--text);text-decoration:underline}
@media(max-width:560px){.hero-hit-kind{display:none}}

/* ---- pillars: a Roman numeral heads each one (generated content, hidden from assistive technology) ---- */
.pillars{counter-reset:pillar}
.pillar .n::before{counter-increment:pillar;content:counter(pillar,upper-roman) "." / "";display:block;font-family:var(--font-display);font-size:var(--fs-2-3rem);font-weight:500;letter-spacing:0;line-height:1;margin-bottom:var(--space-12)}

/* ---- monograms are rings, not tiles ---- */
.mono-av{border-radius:var(--radius-round)}

/* ---- the bands: the same soft light as the hero; the modal header goes plain ---- */
.band::before{opacity:1;background-image:radial-gradient(ellipse at 50% 100%,var(--palette-brass-lt-a14),transparent 62%)}
.modal-hd::before{background-image:none}

/* ---- footer: the organization's name set like the wordmark ---- */
footer.site .fbrand strong{font-size:var(--fs-24);font-weight:600;color:var(--brass-lt)}
.hero{padding-top:var(--space-64)}
.hero-search-row input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}