/* ==========================================================================
   Martin | Hild, P.A. — site styles
   Serif: Source Serif 4 (display + reading).  Sans: Archivo (chrome + figures).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* ink & paper */
  --ink:        #0E1418;
  --ink-2:      #17212A;
  --ink-3:      #223039;
  --paper:      #F6F5F2;
  --paper-2:    #EFEDE8;
  --paper-3:    #E5E2DB;

  /* text */
  --tx:         #161B1F;
  --tx-2:       #4A545E;   /* ~6.9:1 on --paper */
  --tx-3:       #5E6873;   /* ~4.8:1 on --paper-2, the darkest ground it sits on */
  --tx-on-ink:  #EDEAE3;
  --tx-on-ink-2:#A9B3BC;   /* 6.6:1 on --ink */

  /* accent — the firm's own gold */
  --gold:       #A8823C;
  --gold-ink:   #7A5A1E;   /* 5.9:1 on --paper: gold for text */
  --gold-lit:   #D3AE60;   /* 9.4:1 on --ink */
  --slate:      #3D5A6C;
  --slate-lit:  #86A6BB;

  /* dispositions */
  --d-tried:    #8E1B14;
  --d-arb:      #3D5A6C;
  --d-settled:  #4A545E;
  --d-active:   #7A5A1E;

  /* rules */
  --rule:       #DAD6CD;
  --rule-2:     #C6C1B6;
  --rule-ink:   #2C3841;

  /* type */
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.4rem + 3.5vw, 4.25rem);
  --fs-h2:      clamp(1.7rem, 1.05rem + 2.1vw, 2.6rem);
  --fs-h3:      1.0625rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-micro:   0.6875rem;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 4.6vw, 56px);
  --maxw: 1240px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 620ms;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--tx);
  font: 400 var(--fs-body)/1.62 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

/* --- Browser surfaces --------------------------------------------------- */
::selection { background: #E9D9AF; color: var(--ink); }
:root { accent-color: var(--gold-ink); caret-color: var(--gold-ink); color-scheme: light; }
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 1px;
}
.hero :focus-visible, .foot :focus-visible, .sec--contact :focus-visible { outline-color: var(--gold-lit); }
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--rule-2) var(--paper-2); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--rule-2); border: 3px solid var(--paper-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #A9A396; }

.num, .matters, .ledger__list, .tot__value, time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--tx-on-ink);
  padding: var(--s3) var(--s5); font: 500 var(--fs-sm)/1 var(--sans);
  transition: top 180ms var(--ease);
}
.skip:focus { top: var(--s4); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Links -------------------------------------------------------------- */
a:where(.sec__p a, .ledger__note a, .foot__disc a, .adr__sched a, .posts__more a, .office__tel a) {
  color: var(--gold-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--gold-ink) 45%, transparent);
  transition: text-decoration-color 200ms var(--ease);
}
a:where(.sec__p a, .adr__sched a, .posts__more a, .office__tel a):hover { text-decoration-color: var(--gold-ink); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 var(--fs-sm)/1 var(--sans);
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: background-color 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease), transform 220ms var(--ease);
}
.btn--gold  { background: var(--gold); color: #14100A; border-color: var(--gold); }
.btn--gold:hover  { background: var(--gold-lit); border-color: var(--gold-lit); }
.btn--ghost { color: var(--tx-on-ink); border-color: #3B4A55; }
.btn--ghost:hover { border-color: var(--gold-lit); color: var(--gold-lit); }
.btn--ghost-dark { color: var(--tx); border-color: var(--rule-2); }
.btn--ghost-dark:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.btn--sm { padding: 10px 16px; font-size: var(--fs-xs); }
.btn:active { transform: translateY(1px); }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  color: var(--tx-on-ink);
  border-bottom: 1px solid var(--rule-ink);
}
.masthead__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; gap: var(--s5);
}
.masthead { transition: box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
.masthead.is-stuck {
  border-bottom-color: var(--gold);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.85);
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 58px; height: auto; color: var(--gold-lit); flex: none; }
.brand__word { display: block; }
.brand__name {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tx-on-ink); line-height: 1.1;
  white-space: nowrap;
}
.brand__name i { font-style: normal; color: var(--gold-lit); font-weight: 400; }
.brand__pa { font-size: 0.82em; }
.brand__sub {
  display: block; font: 400 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tx-on-ink-2); margin-top: 5px;
}

.nav { display: flex; align-items: center; gap: var(--s5); flex-wrap: nowrap; }
.nav__list { display: flex; gap: var(--s4); flex-wrap: nowrap; }
.nav__list a {
  font: 500 var(--fs-xs)/1 var(--sans);
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; color: var(--tx-on-ink);
  padding-block: 6px; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.nav__list a:hover { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }
.nav__tail { display: flex; align-items: center; gap: var(--s4); }
.nav__tel {
  font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: 0.04em;
  color: var(--tx-on-ink-2); text-decoration: none;
  transition: color 200ms var(--ease);
}
.nav__tel:hover { color: var(--gold-lit); }

.navtoggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 1px solid #3B4A55; padding: 9px 14px; cursor: pointer;
}
.navtoggle__label { font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.navtoggle__bars { display: block; width: 16px; }
.navtoggle__bars i { display: block; height: 1.5px; background: currentColor; transition: transform 260ms var(--ease); }
.navtoggle__bars i + i { margin-top: 4px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--ink);
  color: var(--tx-on-ink);
  padding-block: clamp(var(--s8), 9vw, 148px) clamp(var(--s8), 8vw, 120px);
  position: relative;
  overflow: hidden;
}
.hero::after {                       /* hairline deck, echoing the mark */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: 0.5;
}
.hero__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(268px, 0.8fr);
  grid-template-areas: "head ledger" "lede ledger" "acts ledger";
  gap: 0 clamp(var(--s7), 5vw, 92px); align-items: start;
}
.hero__h1 { grid-area: head; }
.hero__lede { grid-area: lede; }
.ledger { grid-area: ledger; }
.hero__h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-display); line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: var(--s6);
}
.hero__p {
  max-width: 60ch; font-size: var(--fs-lede); line-height: 1.66;
  color: var(--tx-on-ink-2);
}
.hero__p + .hero__p { margin-top: var(--s4); }
.hero__p--tight { color: var(--tx-on-ink); }
.hero__acts {
  grid-area: acts;
  display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7);
}

.ledger {
  border-top: 2px solid var(--gold);
  padding-top: var(--s4);
}
.ledger__h {
  font: 500 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-lit); margin-bottom: var(--s4);
}
.ledger__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-ink);
}
.ledger__row dt {
  font: 400 var(--fs-xs)/1.3 var(--sans);
  color: var(--tx-on-ink-2); letter-spacing: 0.01em;
}
.ledger__row dd {
  font-weight: 500; font-size: 1.0625rem; color: var(--tx-on-ink);
  white-space: nowrap;
}
.ledger__row:nth-child(2) dd { color: var(--gold-lit); }
.ledger__note {
  margin-top: var(--s4);
  font: 400 var(--fs-xs)/1.55 var(--sans); color: var(--tx-on-ink-2);
  max-width: 34ch;
}

/* ==========================================================================
   Recognition strip
   ========================================================================== */
.recog { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.recog__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s7); align-items: center;
  padding-block: var(--s6);
}
.recog__text {
  font-size: var(--fs-sm); line-height: 1.62; color: var(--tx-2); max-width: 52ch;
}
.recog__text strong { color: var(--tx); font-weight: 600; }
.recog__badges { display: flex; align-items: center; gap: clamp(var(--s5), 3vw, var(--s7)); }
.recog__badges li { display: flex; align-items: center; height: 60px; }
.recog__badges img { width: auto; height: auto; max-height: 60px; }
.recog__badges li:nth-child(3) img { max-height: 21px; }  /* Super Lawyers wordmark */
.recog__badges li:nth-child(4) img { max-height: 29px; }  /* Martindale-Hubbell AV */

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding-block: clamp(var(--s8), 8.5vw, 132px); }
.sec--matters { border-bottom: 1px solid var(--rule); }
.sec--map { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.sec--practice { border-bottom: 1px solid var(--rule); }
.sec--adr { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.sec--people { border-bottom: 1px solid var(--rule); }
.sec--insights { border-bottom: 1px solid var(--rule); }
.sec--contact { background: var(--ink); color: var(--tx-on-ink); }
.sec--edge  { border-bottom: 1px solid var(--rule); }
.sec--shade { background: var(--paper-2); border-bottom: 1px solid var(--rule); }

.sec__head { max-width: 62ch; margin-bottom: var(--s7); }
.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--s6) clamp(var(--s7), 6vw, 104px);
  align-items: end;
  margin-bottom: var(--s7);
}
.lead .sec__head { margin-bottom: 0; }
.lead .fineprint {
  margin-top: 0; max-width: 48ch;
  border-top: 1px solid var(--rule-2); padding-top: var(--s4);
}
.sec__head--wide { max-width: 70ch; }
.sec__h {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.018em;
  text-wrap: balance;
  margin-bottom: var(--s4);
}
.sec--contact .sec__h { color: var(--tx-on-ink); }
.sec__p { font-size: var(--fs-lede); line-height: 1.66; color: var(--tx-2); max-width: 62ch; }
.sec__p + .sec__p { margin-top: var(--s4); }
.sec__p--muted { color: var(--tx-3); font-size: var(--fs-sm); }
.sec--contact .sec__p { color: var(--tx-on-ink-2); }
.sec--contact .sec__p a { color: var(--gold-lit); }

/* --- Filters ------------------------------------------------------------ */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8);
  padding-bottom: var(--s5); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.filters__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.filters__set legend {
  padding: 0; margin-bottom: 11px;
  font: 500 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-3);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  font: 400 var(--fs-xs)/1 var(--sans);
  padding: 9px 14px;
  border: 1px solid var(--rule-2);
  color: var(--tx-2);
  background: transparent;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.chip:hover span { border-color: var(--gold-ink); color: var(--gold-ink); }
.chip input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.chip input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* --- Matters table ------------------------------------------------------ */
.tablewrap { overflow-x: auto; }
.matters { font-size: var(--fs-sm); min-width: 640px; }
.matters thead th {
  text-align: left;
  font: 500 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3);
  padding: 0 var(--s4) 11px 0;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
.sortbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; transition: color 180ms var(--ease);
}
.sortbtn:hover { color: var(--gold-ink); }
.sortbtn__i {
  width: 7px; height: 4px; flex: none;
  background: currentColor; opacity: 0.3;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
th[aria-sort="descending"] .sortbtn { color: var(--tx); }
th[aria-sort="descending"] .sortbtn__i { opacity: 1; }
th[aria-sort="ascending"] .sortbtn { color: var(--tx); }
th[aria-sort="ascending"] .sortbtn__i { opacity: 1; transform: rotate(180deg); }

/* Amount bar — scaled within the rows currently visible. */
.matters__c-amt { position: relative; }
.matters__c-amt .bar {
  display: block; height: 2px; width: var(--w, 0%); min-width: 2px;
  background: var(--gold); opacity: 0.5; margin-top: 5px;
  transition: width 380ms var(--ease);
}
.matters tbody tr { border-bottom: 1px solid var(--rule); }
.matters tbody tr:hover { background: var(--paper-2); }
.matters th, .matters td { padding: 11px var(--s4) 11px 0; vertical-align: baseline; }
.matters th:last-child, .matters td:last-child { padding-right: 0; }
.matters__c-type {
  font-family: var(--serif); font-weight: 400; font-size: 1rem;
  color: var(--tx); text-align: left; width: 33%;
}
.matters__c-loc { color: var(--tx-2); font-family: var(--sans); font-size: var(--fs-xs); width: 23%; }
.matters__c-amt { width: 28%; white-space: nowrap; font-weight: 500; }
.matters__c-disp { width: 16%; }
.matters__ex {
  font: 400 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-3); margin-right: 7px;
}
.tbd { color: var(--tx-3); font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.1em; }

.disp {
  display: inline-block;
  font: 500 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.13em; text-transform: uppercase;
  padding-left: 13px; position: relative;
}
.disp::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: currentColor;
}
.disp--tried    { color: var(--d-tried); }
.disp--arbitrated { color: var(--d-arb); }
.disp--settled  { color: var(--d-settled); }
.disp--resolved { color: var(--d-settled); }
.disp--active   { color: var(--d-active); }
.disp--summaryjudgment { color: var(--d-arb); }

.matters tbody tr.is-out { display: none; }
.matters__empty {
  padding: var(--s7) 0; color: var(--tx-2); font-size: var(--fs-lede);
}

/* --- Total -------------------------------------------------------------- */
.tot {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 3px double var(--rule-2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s6);
  align-items: baseline;
}
.tot__label {
  font: 400 var(--fs-sm)/1.5 var(--sans);
  letter-spacing: 0.005em; color: var(--tx-2);
}
.tot__value {
  grid-row: 1; grid-column: 2;
  font-size: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
  font-weight: 600; letter-spacing: -0.01em; color: var(--tx);
  white-space: nowrap;
}
.tot__note {
  grid-column: 1 / -1;
  font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--tx-3);
}
.fineprint {
  margin-top: var(--s6); max-width: 74ch;
  font: 400 var(--fs-xs)/1.62 var(--sans); color: var(--tx-3);
}

/* --- Reach: the record by jurisdiction ---------------------------------- */
.map {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s6), 5vw, var(--s8)); align-items: center;
}
.jtab { font-size: var(--fs-sm); }
.jtab thead th {
  text-align: left;
  font: 500 var(--fs-micro)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3);
  padding: 0 var(--s4) 10px 0; border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
.jtab thead th:nth-child(2), .jtab tbody td:first-of-type { text-align: right; width: 4.5rem; }
.jtab thead th:last-child { width: 52%; }
.jtab tbody tr { border-bottom: 1px solid var(--rule); }
.jtab th[scope="row"] {
  text-align: left; font-family: var(--serif); font-weight: 400; font-size: 1rem;
  padding: 10px var(--s4) 10px 0; color: var(--tx);
}
/* Top, not middle: a jurisdiction whose name wraps must not push its own count
   half a line out of the numeric column. */
.jtab td { padding: 10px 0 10px var(--s4); vertical-align: top; }
/* column-reverse puts the figure above its bar, so the device reads the same
   way here as it does in the matters table. */
.jtab__a {
  white-space: nowrap;
  display: flex; flex-direction: column-reverse; align-items: flex-start;
}
.jtab__a i {                      /* the bar: scaled to the largest jurisdiction */
  display: block; height: 3px; width: var(--w); min-width: 2px;
  background: var(--gold); opacity: 0.55; margin-top: 5px;
}
.jtab__a b { font-weight: 500; font-size: var(--fs-xs); color: var(--tx-2); }
.juris__note {
  margin-top: var(--s4);
  font: 400 var(--fs-xs)/1.55 var(--sans); color: var(--tx-3); max-width: 52ch;
}

/* --- Practice ----------------------------------------------------------- */
.practice {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(var(--s6), 5vw, var(--s8));
  border-top: 1px solid var(--rule);
}
.practice li { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.practice h3 {
  font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600;
  letter-spacing: -0.005em; margin-bottom: 6px;
}
.practice p { font-size: var(--fs-sm); line-height: 1.6; color: var(--tx-2); max-width: 46ch; }

/* --- ADR ---------------------------------------------------------------- */
.adr {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.75fr);
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: start;
}
.adr__quote {
  margin: var(--s6) 0; padding-left: var(--s5);
  border-left: 1px solid var(--gold);
}
.adr__quote p {
  font-family: var(--serif); font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.45; letter-spacing: -0.012em; color: var(--tx); text-wrap: pretty;
}
.adr__quote footer {
  margin-top: var(--s4);
  font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tx-3);
}
.adr__sched {
  border-top: 2px solid var(--gold); padding-top: var(--s4);
  font-size: var(--fs-sm);
}
.adr__sched h3 {
  font: 500 var(--fs-xs)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-2);
  margin-bottom: var(--s4);
}
.adr__sched p { color: var(--tx-2); line-height: 1.6; }
.adr__sched p + p { margin-top: var(--s4); }
.adr__contact { font-family: var(--sans); font-size: var(--fs-sm); }

/* --- People ------------------------------------------------------------- */
.people {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
}
.person a { display: block; text-decoration: none; }
.person img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%;
  background: var(--paper-3);
  filter: saturate(0.9) contrast(1.02);
  transition: filter 400ms var(--ease);
}
.person a:hover img { filter: saturate(1) contrast(1.02); }
.person__n {
  display: block; margin-top: var(--s3);
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--tx);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.person a:hover .person__n { border-bottom-color: var(--gold); }
.person__r {
  display: block; margin-top: 3px;
  font: 400 var(--fs-micro)/1.3 var(--sans);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-3);
}

/* --- Posts -------------------------------------------------------------- */
.posts { border-top: 1px solid var(--rule); }
.posts li { border-bottom: 1px solid var(--rule); }
.posts a {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 2px var(--s5); align-items: baseline;
  padding: var(--s5) 0; text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.posts a:hover { background: var(--paper-2); }
/* .posts__when carries the date slot for writing the source leaves undated. */
.posts time, .posts .posts__when {
  grid-column: 1; grid-row: 1;
  font: 400 var(--fs-xs)/1.5 var(--sans);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-3);
}
.posts__t {
  grid-column: 2; grid-row: 1;
  display: block; font-family: var(--serif); font-size: 1.1875rem; font-weight: 400;
  line-height: 1.32; letter-spacing: -0.012em; color: var(--tx);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color 200ms var(--ease);
}
.posts a:hover .posts__t { border-bottom-color: var(--gold); }
.posts__d {
  grid-column: 2; grid-row: 2;
  display: block; margin-top: 6px;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--tx-2); max-width: 62ch;
}
.posts__pdf {
  font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: 0.14em;
  color: var(--tx-3); border: 1px solid var(--rule-2); padding: 3px 5px; margin-left: 4px;
}
.posts__more { margin-top: var(--s6); font-size: var(--fs-sm); }

/* --- Contact ------------------------------------------------------------ */
.offices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--s6) var(--s7);
  border-top: 1px solid var(--rule-ink); padding-top: var(--s6);
}
.office h3 {
  font: 500 var(--fs-xs)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lit);
  margin-bottom: var(--s4);
}
.office address { font-size: var(--fs-sm); line-height: 1.62; color: var(--tx-on-ink-2); }
.office__tel { margin-top: var(--s3); font-family: var(--sans); font-size: 1.0625rem; }
.office__tel a { color: var(--tx-on-ink); text-decoration: none; border-bottom: 1px solid #3B4A55; }
.office__tel a:hover { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }
.office__fax { margin-top: 3px; font: 400 var(--fs-xs)/1 var(--sans); color: var(--tx-on-ink-2); }
.contact__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.sec--contact .btn--ghost-dark { color: var(--tx-on-ink); border-color: #3B4A55; }
.sec--contact .btn--ghost-dark:hover { color: var(--gold-lit); border-color: var(--gold-lit); }

/* --- Footer ------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--tx-on-ink-2); padding-block: var(--s7) var(--s8); }
.foot__in { border-top: 1px solid var(--rule-ink); padding-top: var(--s6); }
.foot__disc { max-width: 78ch; font: 400 var(--fs-xs)/1.66 var(--sans); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); }
.foot__links a {
  font: 400 var(--fs-xs)/1 var(--sans); text-decoration: none;
  border-bottom: 1px solid #3B4A55; padding-bottom: 2px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.foot__links a:hover { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }
.foot__copy { margin-top: var(--s6); font: 400 var(--fs-xs)/1 var(--sans); letter-spacing: 0.02em; }

/* ==========================================================================
   Interior pages — breadcrumb, compact title block, profile, article
   ========================================================================== */
.crumbs { padding-top: var(--s6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.crumbs li {
  display: flex; align-items: center; gap: 7px;
  font: 400 var(--fs-xs)/1 var(--sans); color: var(--tx-3);
}
.crumbs li:not(:last-child)::after { content: "/"; color: var(--rule-2); }
.crumbs a { color: var(--tx-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.crumbs li[aria-current="page"] { color: var(--tx); }

.pagehead { padding-block: clamp(var(--s6), 5vw, var(--s7)) clamp(var(--s7), 7vw, var(--s8)); border-bottom: 1px solid var(--rule); }
.pagehead__h {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.018em;
  text-wrap: balance; margin-bottom: var(--s4);
}
.pagehead__lede { font-size: var(--fs-lede); line-height: 1.66; color: var(--tx-2); max-width: 62ch; }

/* Matters carries the same tabulated summary the homepage hero carries, so the
   figures open the page that proves them. Bone ground, not ink. */
.pagehead--split {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(268px, 0.8fr);
  grid-template-areas: "head ledger" "lede ledger";
  gap: 0 clamp(var(--s7), 5vw, 92px); align-items: start;
}
.pagehead--split .pagehead__h { grid-area: head; }
.pagehead--split .pagehead__lede { grid-area: lede; }
.pagehead--split .ledger { grid-area: ledger; }
.ledger--light { border-top-color: var(--gold-ink); }
.ledger--light .ledger__h { color: var(--gold-ink); }
.ledger--light .ledger__row { border-bottom-color: var(--rule); }
.ledger--light .ledger__row dt { color: var(--tx-2); }
.ledger--light .ledger__row dd { color: var(--tx); }
.ledger--light .ledger__row:nth-child(2) dd { color: var(--gold-ink); }
.ledger--light .ledger__note { color: var(--tx-3); }

/* --- Directory (contacts) ------------------------------------------------- */
.dir { border-top: 1px solid var(--rule-2); }
.dir li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.7fr);
  gap: 4px var(--s5); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
}
.dir__n { font-family: var(--serif); font-size: 1.0625rem; }
.dir__n a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.dir__n a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.dir__r {
  display: block; margin-top: 3px;
  font: 400 var(--fs-micro)/1.4 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3);
}
.dir__e { font: 400 var(--fs-sm)/1.4 var(--sans); word-break: break-word; }
.dir__e a { color: var(--tx-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.dir__e a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.dir__dl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font: 400 var(--fs-xs)/1.4 var(--sans); }
.dir__dl a { color: var(--tx-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.dir__dl a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }

/* --- Utility prose (terms, upload, 404) ---------------------------------- */
.prose { max-width: 72ch; padding-block: clamp(var(--s8), 8vw, 120px); }
.prose h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.25rem;
  margin-top: var(--s7); margin-bottom: var(--s3);
}
.prose h2:first-child { margin-top: 0; }
.prose p { line-height: 1.7; color: var(--tx-2); }
.prose p + p { margin-top: var(--s4); }
.prose a { color: var(--tx); text-decoration: none; border-bottom: 1px solid var(--gold); }
.prose a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.prose__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* --- Profile -------------------------------------------------------------- */
.profile {
  display: grid; grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 5vw, var(--s8)); align-items: start;
  padding-block: clamp(var(--s8), 8vw, 120px);
}
.profile__card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%;
  background: var(--paper-3); filter: saturate(0.9) contrast(1.02);
}
.profile__name { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; margin-top: var(--s5); }
.profile__role {
  display: block; margin-top: 4px;
  font: 400 var(--fs-micro)/1.3 var(--sans);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-3);
}
.profile__contact {
  margin-top: var(--s5); border-top: 2px solid var(--gold); padding-top: var(--s4);
  font-size: var(--fs-sm);
}
.profile__contact a {
  display: block; padding-block: 5px; color: var(--tx); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.profile__contact a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.profile__bio { max-width: 68ch; }
.profile__bio > p + p { margin-top: var(--s4); }
.profile__h2 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3);
  margin-top: var(--s7); margin-bottom: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--rule);
}
.profile__facts dt {
  font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tx-3); margin-top: var(--s4);
}
.profile__facts dd { font-size: var(--fs-sm); line-height: 1.55; color: var(--tx-2); margin-top: 3px; }
.profile__list li {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--tx-2);
  padding-block: 8px; border-bottom: 1px solid var(--rule);
}
.profile__list li:first-child { padding-top: 0; }

/* --- Article ---------------------------------------------------------------- */
.article { padding-block: clamp(var(--s8), 8vw, 120px); }
.article__in { max-width: 74ch; margin-inline: auto; }
.article__meta {
  font: 400 var(--fs-xs)/1 var(--sans); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: var(--s3);
}
.article__h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.018em;
  text-wrap: balance; margin-bottom: var(--s5);
}
.article__byline {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font: 400 var(--fs-sm)/1.5 var(--sans); color: var(--tx-2);
  padding-bottom: var(--s6); margin-bottom: var(--s7); border-bottom: 1px solid var(--rule);
}
.article__pdf {
  font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: 0.14em;
  color: var(--tx-3); border: 1px solid var(--rule-2); padding: 3px 5px;
}
.article__body p { margin-top: var(--s4); }
.article__body p:first-child { margin-top: 0; }
.article__body h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.375rem;
  margin-top: var(--s8); margin-bottom: var(--s4);
}
.article__body h3 {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-h3);
  margin-top: var(--s6); margin-bottom: var(--s3);
}
.article__body em { font-style: italic; }
.article__body ul, .article__body ol { margin-top: var(--s4); padding-left: 1.2em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li { margin-top: 8px; }
.article__body li::marker { color: var(--tx-3); }
.article__body sup a { color: var(--gold-ink); text-decoration: none; }
.article__excerpt {
  margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--rule-2);
  font: 400 var(--fs-sm)/1.6 var(--sans); color: var(--tx-2);
}
.article__excerpt a { color: var(--tx); border-bottom: 1px solid var(--gold); text-decoration: none; }
.article__excerpt a:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }
.article__foot { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.article__author { font-size: var(--fs-sm); line-height: 1.6; color: var(--tx-2); max-width: 68ch; }
.article__author strong { color: var(--tx); }
.article__notes { margin-top: var(--s7); }
.article__notes h2 {
  font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: var(--s4);
}
.article__notes ol { list-style: decimal; padding-left: 1.25em; }
.article__notes li {
  font: 400 var(--fs-xs)/1.6 var(--sans); color: var(--tx-3); margin-bottom: var(--s2);
}
.article__return { margin-top: var(--s7); font-size: var(--fs-sm); }

/* ==========================================================================
   Motion — one authored moment: the tabulation re-totting when it is
   filtered. Nothing on this page animates itself into existence; every row
   of the record is legible the instant it is painted.
   ========================================================================== */
.matters tbody tr[data-swap] {
  opacity: 0.28;
  transition: opacity 170ms var(--ease);
}
.tot__value {
  transition: color 260ms var(--ease), letter-spacing 260ms var(--ease);
}
.tot.is-totting .tot__value { color: var(--gold-ink); letter-spacing: 0.004em; }
.tot__label .num { color: var(--tx); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .matters tbody tr[data-swap] { opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .lead { grid-template-columns: 1fr; }
  .lead .fineprint { max-width: 72ch; }
  /* The record moves up under the headline so the proof stays in the first
     viewport rather than sitting below two paragraphs of prose. */
  /* The two actions ride with the record, so the phone reader who is convinced
     by the proof does not have to scroll past the prose to act on it. */
  .hero__in {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "ledger" "acts" "lede";
    gap: 0;
  }
  .hero__h1 { margin-bottom: var(--s5); }
  .pagehead--split { grid-template-columns: 1fr; grid-template-areas: "head" "ledger" "lede"; gap: 0; }
  .hero__acts { margin-top: 0; margin-bottom: var(--s7); }
  .ledger { max-width: 560px; margin-bottom: var(--s6); }
  .ledger__note { max-width: none; }
  .map { grid-template-columns: 1fr; }
  .adr { grid-template-columns: 1fr; }
  .adr__sched { max-width: 460px; }
  /* Name, role and contact/download precede the long biography on a phone. */
  .profile { grid-template-columns: 1fr; }
  .profile__card { max-width: 260px; }
}

@media (max-width: 1024px) {
  .navtoggle { display: inline-flex; margin-left: auto; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 1px solid var(--rule-ink);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block; padding: 15px 0; font-size: var(--fs-sm);
    border-bottom: 1px solid var(--rule-ink);
  }
  .nav__list a:hover { border-bottom-color: var(--rule-ink); }
  .nav__tail { margin-top: var(--s5); gap: var(--s5); }
  .recog__in { grid-template-columns: 1fr; gap: var(--s5); }
  .recog__badges { flex-wrap: wrap; gap: var(--s5); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* Compact the record so it clears the fold on a phone, without crushing
     the long label into a wrap. */
  .ledger { margin-bottom: var(--s5); }
  .ledger__h { margin-bottom: var(--s3); }
  .ledger__row { padding-block: 9px; }
  .ledger__row dd { font-size: 1rem; }
  /* The correction travels with the figure it corrects. */
  .ledger__note { margin-top: var(--s3); }
  .map { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* The tabulation reflows into one record per row: amount and disposition
     stay on screen instead of scrolling out of reach. */
  .tablewrap { overflow-x: visible; }
  .matters { min-width: 0; }
  .matters thead { display: block; }
  .matters thead tr {
    display: flex; align-items: center; gap: var(--s5);
    border-bottom: 1px solid var(--rule-2); padding-bottom: 10px;
  }
  .matters thead th { padding: 0; border: 0; width: auto; }
  .matters thead th.matters__c-type, .matters thead th.matters__c-loc { display: none; }
  .matters tbody { display: block; }
  .matters tbody tr { display: block; padding: 15px 0; }
  .matters th, .matters td { display: block; padding: 0; width: auto; }
  .matters__c-type { font-size: 1.0625rem; line-height: 1.3; margin-bottom: 8px; }
  .matters td[data-l] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); padding: 3px 0;
  }
  .matters td[data-l]::before {
    content: attr(data-l);
    font: 400 var(--fs-micro)/1.4 var(--sans);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-3);
  }
  /* The bar keeps its own line under the figure, so the spread from $400M to
     $800K is still felt on the device that most needs a fast read. */
  /* Anchored to the right edge, under the figure it measures, so it reads as
     part of the number rather than as another rule across the record. */
  .matters td[data-l].matters__c-amt { padding-bottom: 13px; }
  .matters td[data-l].matters__c-disp { padding-top: 11px; }
  .matters__c-amt .bar { position: absolute; right: 0; bottom: 11px; margin: 0; }

  .hero { padding-block: var(--s8) var(--s7); }
  .hero__acts { margin-top: var(--s6); }
  .hero__acts .btn { flex: 1 1 auto; }
  .filters { gap: var(--s5); }
  .tot { grid-template-columns: 1fr; }
  .tot__value { grid-row: auto; grid-column: 1; }
  .posts a { grid-template-columns: 1fr; gap: 6px; }
  .posts time, .posts .posts__when, .posts__t, .posts__d { grid-column: 1; grid-row: auto; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
  .dir li { grid-template-columns: 1fr; gap: 6px; padding: var(--s5) 0; }
  .recog__badges img { height: 54px; }
  .recog__wide img { height: 26px; }
  .contact__acts .btn { flex: 1 1 auto; }
}

@media print {
  .masthead, .navtoggle, .filters, .hero__acts, .contact__acts { display: none; }
  body { background: #fff; color: #000; }
  .hero, .sec--contact, .foot { background: #fff; color: #000; }
}