/* ============================================================
   WriteTheUS — theme
   Built on the VirtualShrine system: golden-ratio geometry,
   Fibonacci spacing ladder, Cormorant Garamond + Work Sans,
   .narthex / .rose-wrap / .trinity-row / .home-find / grid.

   Inverted to a white ground per brief. The shrine's --night
   becomes the ink; the candle gold is darkened to hold contrast
   on white. Structure, ratios, and easings are unchanged.
   ============================================================ */

:root{
  /* Ground and ink — the shrine palette inverted */
  --paper:#ffffff; --paper-2:#f7f5f0; --paper-3:#efece4;
  --ink:#101a30; --ink-mute:#5a6478; --stone:#8b95ab;
  --line:rgba(16,26,48,.12); --line-warm:rgba(138,97,20,.30);

  /* Candle gold, darkened from #f2b559 to clear AA on white */
  --candle:#8a6114; --glow:#a8791f; --candle-wash:rgba(138,97,20,.07);

  /* Flag */
  --flag-red:#b22234; --flag-blue:#3c3b6e;

  /* Party — equal weight, equal area, only the hue differs */
  --dem:#1f4e9c; --rep:#b3242b; --ind:#2e7d4f;
  --dem-wash:#eff4fc; --rep-wash:#fcf0f0; --ind-wash:#eef7f1;

  /* ── Sacred geometry, carried over unchanged ──────────────
     φ governs space; each type step ×φ from 1rem. Spacing is
     the Fibonacci ladder, whose ratios converge on φ. */
  --phi:1.618;
  --t-0:1rem; --t-1:1.618rem; --t-2:2.618rem; --t-3:4.236rem;
  --sp-1:8px; --sp-2:13px; --sp-3:21px; --sp-4:34px; --sp-5:55px; --sp-6:89px;
  --ease-phi:cubic-bezier(.618,0,.382,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Work Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;} html{overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:350; font-size:1.05rem;
  line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:clamp(20px,4vw,44px);}

:focus-visible{outline:2px solid var(--candle);outline-offset:3px;border-radius:2px;}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.786em 1.272em;z-index:100;}
.skip:focus{left:var(--sp-2);top:var(--sp-2);}

/* ---------------------------- Masthead ---------------------------- */
header.mast{display:flex;align-items:baseline;justify-content:space-between;gap:20px 28px;
  flex-wrap:wrap;padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;align-self:center;gap:9px;text-decoration:none;}
.brand .mark{font-family:var(--serif);font-weight:600;font-size:1.272rem;letter-spacing:.5px;color:var(--ink);}
.brand .mark em{color:var(--flag-red);font-style:normal;}
.brand .sub{font-family:var(--sans);font-size:0.618rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);}
.topnav{display:flex;gap:22px;margin-left:auto;}
.topnav a{font-size:0.786rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
  text-decoration:none;transition:.2s var(--ease-phi);}
.topnav a:hover,.topnav a.on{color:var(--candle);}

/* ---------- Narthex: the entry. Rose window position. ---------- */
/* overflow-x:clip stops horizontal scroll on phones without also clamping
   the vertical axis — plain overflow:hidden was cutting the spiral's arcs
   off mid-curve, which reads as a rendering fault rather than a crop. */
.narthex{position:relative;overflow-x:clip;text-align:center;max-width:720px;
  margin:clamp(4px,1.2vw,16px) auto clamp(26px,5vw,54px);}
.narthex .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:20px;
  font-size:0.618rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);}
.narthex .eyebrow .hr{width:44px;height:1px;background:var(--line);}
.narthex-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,6vw,4rem);
  line-height:1.02;margin:.1em 0 .5em;color:var(--ink);}
.narthex-lead{font-size:1rem;color:var(--ink-mute);max-width:56ch;margin:0 auto;}

/* The spiral is larger than the roundel in both axes, so the wrapper has to
   reserve room for the spiral, not for the flag. Sizing both from one
   variable keeps them locked together at every breakpoint. */
.rose-wrap{
  --spiral: clamp(288px, 68vw, 521px);       /* 178 x phi^2, near enough */
  position:relative; display:grid; place-items:center;
  /* Reserve room for the ROUNDEL, not the spiral. Because .narthex clips
     only the x-axis, the spiral is free to bleed above and below without
     being cut — and it passes behind the sticky masthead, which is opaque
     and sits above it. Reserving the spiral's full rotated bounding box
     instead made this box 662px tall and left the flag floating in dead
     space. */
  min-height:clamp(160px,28vw,249px); width:100%;
  margin:0 auto var(--sp-3);
}
.rose-wrap .rose{position:relative;z-index:1;
  width:clamp(144px,26vw,233px);aspect-ratio:1;
  border-radius:50%;display:block;
  box-shadow:0 0 0 1px var(--line),0 var(--sp-1) var(--sp-4) -12px rgba(16,26,48,.35);}
/* The spiral sits behind the roundel exactly as it sits behind the rose. */
.hero-spiral{
  color:var(--candle); position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  width:var(--spiral); height:var(--spiral);
  z-index:0; opacity:.10; pointer-events:none;
}

/* ------------------------ Trinity row ------------------------ */
.trinity-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px;}
@media(max-width:600px){.trinity-row{grid-template-columns:1fr;}}

/* ------------------------------ Find ------------------------------ */
.home-find{max-width:none;width:100%;margin:0 0 2.618em;position:relative;
  display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end;}
.home-find .hf-wide{flex:1 1 21em;}
.hf-field{display:flex;flex-direction:column;gap:.318em;}
.hf-field label{font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.home-find input,.home-find select{
  width:100%;padding:.786em 1.1em;font-size:1.05rem;font-family:var(--serif);
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-warm);border-radius:10px;min-height:48px;}
.home-find input::placeholder{color:var(--ink-mute);opacity:1;}
.home-find input:focus,.home-find select:focus{outline:none;border-color:var(--candle);
  box-shadow:0 0 0 3px var(--candle-wash);}
.hf-count{margin-left:auto;font-size:0.786rem;color:var(--ink-mute);padding-bottom:.9em;white-space:nowrap;}

/* ------------------------------ Cards ------------------------------ */
.shrine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
  list-style:none;padding:0;margin:0;}
@media(max-width:600px){.shrine-grid{grid-template-columns:1fr;gap:11px;}}

.shrine-card{position:relative;display:flex;gap:13px;
  padding:21px 21px 18px;border:1px solid var(--line);border-radius:6px;
  border-inline-start:4px solid var(--stone);
  background:linear-gradient(180deg,rgba(16,26,48,.015),transparent);
  transition:.25s var(--ease-phi);overflow:hidden;}
.shrine-card:hover,.shrine-card:focus-within{transform:translateY(-2px);
  box-shadow:0 14px 40px -22px rgba(16,26,48,.55);}
.shrine-card[hidden]{display:none!important;}
.shrine-card[data-party="D"]{border-inline-start-color:var(--dem);}
.shrine-card[data-party="R"]{border-inline-start-color:var(--rep);}
.shrine-card[data-party="I"]{border-inline-start-color:var(--ind);}
.shrine-card[data-party="D"]:hover{background:var(--dem-wash);}
.shrine-card[data-party="R"]:hover{background:var(--rep-wash);}
.shrine-card[data-party="I"]:hover{background:var(--ind-wash);}

.shrine-body{min-width:0;flex:1;}
.shrine-name{font-family:var(--serif);font-size:1.272rem;font-weight:600;color:var(--ink);
  line-height:1.05;margin:0 0 .2em;}
.shrine-name a{text-decoration:none;}
.shrine-name a::after{content:"";position:absolute;inset:0;}
.shrine-card:hover .shrine-name{color:var(--candle);}
.shrine-sub{font-family:var(--serif);font-style:italic;color:var(--ink-mute);
  font-size:1.05rem;line-height:1.4;margin:0;}
.shrine-meta{margin-top:.618em;display:flex;gap:.5em;flex-wrap:wrap;align-items:center;}

.chip{font-size:0.618rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35em .8em;border-radius:999px;border:1px solid var(--line-warm);
  color:var(--ink-mute);line-height:1;white-space:nowrap;background:transparent;}
.chip--party{color:#fff;border-color:transparent;letter-spacing:.1em;}
[data-party="D"] .chip--party{background:var(--dem);}
[data-party="R"] .chip--party{background:var(--rep);}
[data-party="I"] .chip--party{background:var(--ind);}

/* Trinity cards reuse the shrine card, wider */
.trinity-row .shrine-card{align-items:center;}
.trinity-row .shrine-name{font-size:1.618rem;}
.tri-title{font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--candle);margin:0 0 .318em;}

/* ---------------------------- Portraits ---------------------------- */
.portrait{position:relative;display:block;flex:none;background:var(--paper-3);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.portrait__initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:500;color:var(--ink-mute);user-select:none;}
.portrait img{position:relative;width:100%;height:100%;object-fit:cover;
  object-position:top center;display:block;background:var(--paper-3);}
.portrait--card{width:55px;height:68px;}
.portrait--card .portrait__initials{font-size:1.272rem;}
.portrait--leader{width:68px;height:84px;}
.portrait--leader .portrait__initials{font-size:1.4rem;}
.portrait--lg{width:100%;max-width:12rem;aspect-ratio:9/11;}
.portrait--lg .portrait__initials{font-size:2.618rem;}

/* ------------------------- Member page ------------------------- */
.member-head{display:grid;gap:clamp(21px,4vw,34px);
  grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  padding-block:clamp(21px,5vw,55px);align-items:start;}
@media(max-width:700px){.member-head{grid-template-columns:1fr;}}
.member-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,5vw,2.618rem);
  line-height:1.02;margin:.1em 0 0;}
.member-head__office{font-family:var(--serif);font-style:italic;font-size:1.272rem;
  color:var(--ink-mute);margin:.318em 0 0;}
.member-head__chips{display:flex;gap:.5em;flex-wrap:wrap;margin-top:1.1em;}

.dl{display:grid;grid-template-columns:auto 1fr;gap:.318em 1.272em;margin:var(--sp-3) 0 0;font-size:.95rem;}
.dl dt{font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);padding-top:.35em;}
.dl dd{margin:0;}

h2.group{font-family:var(--serif);font-size:0.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--candle);font-weight:400;margin:2.618em 0 0;padding-top:1.1em;
  border-top:2px solid var(--line-warm);}
h2.group:first-child{margin-top:0;}
section.block{border-top:1px solid var(--line);padding-block:clamp(21px,4vw,34px);}
section.block>h3{font-family:var(--serif);font-weight:500;font-size:1.618rem;line-height:1.05;
  margin:0 0 .5em;max-width:26ch;text-wrap:balance;color:var(--ink);}
section.block>.lede{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.4;
  color:var(--ink-mute);margin:0 0 1.618em;max-width:52ch;}

/* Tables */
.ledger{width:100%;border-collapse:collapse;font-size:.95rem;}
.ledger caption{text-align:start;color:var(--candle);font-size:0.618rem;padding-bottom:.786em;
  letter-spacing:.2em;text-transform:uppercase;}
.ledger th,.ledger td{text-align:start;padding:.618em 1.1em .618em 0;
  border-bottom:1px solid var(--line);vertical-align:top;}
.ledger th{font-size:0.618rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:400;}
.ledger td.num,.ledger th.num{text-align:end;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.ledger td.num:last-child,.ledger th.num:last-child{padding-right:0;}
.ledger tr:last-child td{border-bottom:none;}

.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-bottom:var(--sp-3);border-radius:6px;overflow:hidden;}
.stat{background:var(--paper);padding:.786em 1.1em;}
.stat dt{font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.stat dd{margin:.318em 0 0;font-family:var(--serif);font-size:1.618rem;font-variant-numeric:tabular-nums;}

/* Tally */
.tally__strip{display:flex;gap:1px;align-items:stretch;height:21px;overflow:hidden;}
.tally--lg .tally__strip{height:55px;gap:1.5px;}
.tally__strip i{flex:1 1 0;min-width:1px;display:block;background:var(--line);align-self:stretch;}
.tally__strip i[data-v="Yea"]{background:var(--ind);}
.tally__strip i[data-v="Nay"]{background:var(--rep);align-self:flex-end;height:62%;}
.tally__strip i[data-v="Present"]{background:var(--stone);align-self:center;height:38%;}
.tally__strip i[data-v="Not Voting"]{background:var(--line);align-self:flex-end;height:16%;}
.tally__caption{font-size:0.786rem;color:var(--ink-mute);margin-top:.5em;}

/* Notes */
.empty{border:1px dashed var(--line-warm);background:var(--paper-2);padding:1.1em 1.272em;
  font-size:.95rem;color:var(--ink-mute);border-radius:8px;}
.empty code{font-family:var(--mono);font-size:.86em;background:var(--paper);
  border:1px solid var(--line);padding:.1em .4em;border-radius:4px;color:var(--ink);}
.formula,.caveat,.attrib{max-width:52ch;font-size:.86rem;}
.formula{margin:1.272em 0 0;padding:.786em 1.1em;background:var(--candle-wash);
  border-inline-start:3px solid var(--candle);border-radius:0 8px 8px 0;color:var(--ink-mute);line-height:1.6;}
.formula span{display:block;font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--candle);margin-bottom:.2em;}
.caveat{margin:1.1em 0 0;color:var(--ink-mute);line-height:1.65;
  padding-inline-start:1.1em;border-inline-start:2px solid var(--line);font-family:var(--serif);font-size:1.05rem;}
.attrib{margin:1.272em 0 0;font-size:0.72rem;letter-spacing:.06em;color:var(--ink-mute);line-height:1.7;}

/* Records */
.records{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}
.record{display:block;text-decoration:none;border:1px solid var(--line);
  border-inline-start:3px solid var(--candle);border-radius:8px;padding:.786em 1.1em;
  background:var(--paper);transition:.25s var(--ease-phi);}
.record:hover{background:var(--candle-wash);transform:translateY(-1px);}
.record__label{display:block;font-size:0.618rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--candle);margin-bottom:.2em;}
.record__desc{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.45;color:var(--ink);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);
  font-size:0.82rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.9em 1.618em;min-height:48px;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:.25s var(--ease-phi);}
.btn:hover{background:var(--candle);border-color:var(--candle);color:#fff;}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-warm);}
.btn.ghost:hover{background:var(--candle-wash);border-color:var(--candle);color:var(--ink);}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:1.272em;}

.nojs,.noscript-note{max-width:64ch;padding:1.1em 1.272em;background:var(--paper-2);
  border:1px solid var(--line);border-radius:8px;font-size:.95rem;line-height:1.7;margin-top:1.272em;}
.nojs a{color:var(--candle);}

footer.site-foot{border-top:1px solid var(--line);margin-top:var(--sp-5);
  padding-block:var(--sp-4) var(--sp-5);font-size:.95rem;color:var(--ink-mute);background:var(--paper-2);}
footer.site-foot p{max-width:64ch;}
footer.site-foot .sources{font-size:0.72rem;line-height:1.9;}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{
  transition-duration:.01ms!important;animation-duration:.01ms!important;}}
@media print{header.mast,.home-find,.btn-row{display:none;}}

/* Chamber label on a member page: a left-aligned caption, not the
   centred narthex rule. */
.chamber-label{font-size:0.618rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 .5em;}

/* Procedural votes sit behind a disclosure — present, but not mixed into
   the default view where they would distort the record. */
details.more{margin-top:1.618em;border-top:1px solid var(--line);padding-top:1.1em;}
details.more summary{cursor:pointer;font-size:0.786rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--candle);list-style:none;min-height:44px;
  display:flex;align-items:center;}
details.more summary::-webkit-details-marker{display:none;}
details.more summary::before{content:"+";margin-inline-end:.618em;font-size:1.2rem;line-height:1;}
details.more[open] summary::before{content:"–";}
details.more table{margin-top:1.1em;}

/* Breadcrumbs — visible, and mirrored as BreadcrumbList structured data so
   search results show the path rather than a bare URL. */
.crumbs{font-size:0.786rem;color:var(--ink-mute);padding-block:.786em 0;
  display:flex;flex-wrap:wrap;gap:.4em;align-items:center;}
.crumbs a{color:var(--ink-mute);text-decoration:none;}
.crumbs a:hover{color:var(--candle);text-decoration:underline;}
.crumbs span{color:var(--ink);}

/* The breadcrumb bar carries its own tight padding rather than .wrap's
   full block padding, which was adding ~88px of dead space above the hero. */
.crumb-bar{padding-block:.618em 0;}

/* The masthead sits in its own .wrap, whose bottom padding stacked with the
   hero wrap's top padding and the header's own margin — three separate gaps
   compounding into ~140px of dead space above the flag. */
.mast-wrap{padding-block:clamp(20px,4vw,44px) 0;}
.mast-wrap header.mast{margin-bottom:0;}

/* Five nav items overflow a 390px viewport. Wrap and tighten rather than
   scroll the page sideways. */
@media (max-width:640px){
  header.mast{gap:10px 16px;}
  .topnav{margin-left:0;width:100%;flex-wrap:wrap;gap:12px 18px;}
  .topnav a{font-size:0.72rem;letter-spacing:.12em;}
}

/* The agencies card sits on its own line beneath the President and Vice
   President — they are the executive branch, the agencies report to it — so
   it spans the row instead of leaving two empty thirds beside it. */
.trinity-row.exec-row{grid-template-columns:1fr;margin-top:16px;}
.trinity-row.exec-row .shrine-card{border-inline-start-color:var(--candle);}