
:root { color-scheme: dark; --bg:#0b0d12; --surface:#141820; --ink:#f4efe6; --muted:#b3a48e; --line:#3c3428; --gold:#d6bd82; --inkgold:#1a140c; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Outfit, system-ui, sans-serif; }
body { margin: 10px; }
a { color: inherit; }
img { max-width: 100%; }
.banner { margin: 0; padding: 8px 16px; background: var(--gold); color: var(--inkgold); text-align: center; font-size: 13px; }
.court-wash { background: linear-gradient(rgb(11 13 18 / 0.9), rgb(11 13 18 / 0.9)), url("/courthouse.jpg") center top / cover no-repeat fixed; }
.mast { max-width: 72rem; margin: 0 auto; padding: 28px 16px 18px; text-align: center; }
.eyebrow { margin: 0; color: var(--gold); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.monogram { width: 56px; height: 56px; margin: 16px auto 0; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; }
.wordmark { display: inline-block; margin-top: 14px; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(40px, 6vw, 56px); line-height: 1; text-decoration: none; }
.domain { margin: 10px 0 0; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.rule { width: 160px; height: 1px; margin: 16px auto; background: var(--gold); }
nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
nav a { padding: 10px 12px; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; text-decoration: none; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; }
.hero { padding: 28px 0 56px; }
h1, h2, .foot-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
h1 { margin: 12px 0 0; font-size: clamp(52px, 8vw, 84px); line-height: .9; max-width: 14ch; }
h1 em { display: block; margin-top: 8px; color: var(--gold); font-style: italic; }
.lede { max-width: 40rem; color: var(--muted); font-size: 18px; line-height: 1.55; }
.finder { display: grid; gap: 12px; margin-top: 28px; padding: 16px; border: 1px solid var(--line); background-color: rgb(11 13 18 / 0.45); background-image: linear-gradient(180deg, rgb(214 189 130 / 0.1), rgb(11 13 18 / 0.05)); }
.finder label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.finder .wide { grid-column: 1 / -1; }
input, select { height: 48px; border: 1px solid var(--line); color: var(--ink); padding: 0 12px; font: 16px Outfit, system-ui, sans-serif; background-color: #10141b; background-image: linear-gradient(180deg, rgb(244 239 230 / 0.08), rgb(0 0 0 / 0.35)); }
button, .button { height: 48px; border: 0; color: var(--inkgold); letter-spacing: .08em; text-transform: uppercase; font: 600 12px Outfit, system-ui, sans-serif; text-decoration: none; display: inline-grid; place-items: center; padding: 0 18px; cursor: pointer; background-color: #d6bd82; background-image: linear-gradient(180deg, #f0ddb0, #c6a86a); box-shadow: inset 0 1px 0 rgb(255 248 230 / 0.45); }
.section { padding: 48px 0; }
.section h2 { margin: 0; font-size: 36px; }
.head { display: flex; justify-content: space-between; gap: 16px; align-items: end; flex-wrap: wrap; }
.muted { color: var(--muted); }
.boroughs, .matters, .cards { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.boroughs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.boroughs a, .panel { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); background: var(--surface); padding: 16px; text-decoration: none; }
.boroughs strong, .matters strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 500; }
.matters { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); }
.matters a { display: block; height: 100%; background: var(--surface); padding: 16px; text-decoration: none; }
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: var(--surface); padding: 20px; }
.plate { border-color: var(--gold); background-image: linear-gradient(180deg, rgb(214 189 130 / 0.14), transparent 48%); }
.plate .who { margin: -20px -20px 4px; padding: 18px 20px; background-image: linear-gradient(180deg, #f3e2b6, #c6a86a); color: #1a140c; }
.plate .who h2 { font-size: 34px; }
.plate .who a, .plate .who .muted, .plate .who .site a { color: #1a140c; }
.plate .mark { width: 64px; height: 64px; background: #1a140c; color: #f3e2b6; border-color: #1a140c; font-size: 26px; }
.nameplate { padding: 18px 20px; background-image: linear-gradient(180deg, #f3e2b6, #c6a86a); color: #1a140c; }
.nameplate h1, .nameplate a, .nameplate .muted { color: #1a140c; }
.nameplate .mark { background: #1a140c; color: #f3e2b6; border-color: #1a140c; }
.site { margin: 4px 0 0; font-size: 14px; }
.who { display: flex; gap: 12px; }
.mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--gold); background: #221c14; color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 18px; flex: none; }
.card h2 { margin: 0; font-size: 22px; }
.card h2 a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { background: #221c14; padding: 4px 8px; font-size: 12px; }
.chips .ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.more { color: var(--gold); text-decoration: none; font-size: 14px; }
.kept { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.kept li { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
footer { margin-top: 48px; border-top: 1px solid var(--gold); background: var(--surface); }
.foot { display: grid; gap: 28px; padding: 48px 16px; }
.foot-name { margin: 8px 0; font-size: 32px; }
.fine { color: var(--muted); font-size: 12px; }
.profile { display: grid; gap: 28px; padding: 40px 0 16px; }
.profile h1 { font-size: clamp(40px, 6vw, 64px); max-width: none; }
.crumbs { color: var(--muted); font-size: 14px; }
.crumbs a { color: var(--gold); }
.facts { display: grid; gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 4px 0 0; }
.call { border: 1px solid var(--line); background: var(--surface); padding: 20px; }
.call a.phone { color: var(--gold); font-size: 20px; text-decoration: none; }
.quote { margin: 0 0 12px; padding-left: 14px; border-left: 2px solid var(--gold); }
.split { display: grid; gap: 12px; }
.take, .leave { padding: 16px; }
.take { background: var(--surface); }
.leave { border: 1px solid var(--line); }
@media (min-width: 800px) {
  .finder { grid-template-columns: 1fr 1fr 1fr auto; }
  .finder .wide { grid-column: 1 / -1; }
  .kept li { grid-template-columns: 180px 1fr; gap: 24px; }
  .foot { grid-template-columns: 1.2fr .8fr 1fr; }
  .profile { grid-template-columns: 2fr 1fr; }
  .facts, .split { grid-template-columns: 1fr 1fr; }
}
