:root{
  --paper:#f4f2ed; --lime:#e7e4dd; --stone:#cfc8ba; --ink:#12283a; --ink-2:#44525e;
  --eagle:#175479; --sand:#c9a76e; --sand-ink:#7a5b27; --card:#fbfaf7; --hero-ink:#f4f2ed;
  --display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --text:"Commissioner", "Segoe UI", system-ui, sans-serif;
  --w:1180px; --read:40rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1c27; --lime:#152634; --stone:#2a3c4b; --ink:#ebe6dc; --ink-2:#a9b3bb;
    --eagle:#8ec0e0; --sand:#c9a76e; --sand-ink:#d9bb84; --card:#132230; color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased}
a{color:var(--eagle); text-underline-offset:3px; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--eagle); outline-offset:3px; border-radius:2px}
img{display:block; height:auto; max-width:100%}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.15; text-wrap:balance; margin:0}
.wrap{max-width:var(--w); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--sand-ink)}

/* header */
.top{border-bottom:1px solid var(--stone); background:var(--paper); position:sticky; top:env(safe-area-inset-top,0px); z-index:10}
.top .wrap{display:flex; align-items:center; gap:24px; min-height:72px; flex-wrap:wrap; padding-block:10px}
.brand{text-decoration:none; color:var(--ink); display:flex; flex-direction:column; line-height:1.1; margin-right:auto}
.brand b{font-family:var(--display); font-weight:400; font-size:1.55rem; letter-spacing:.01em}
.brand small{font-size:.74rem; color:var(--ink-2); letter-spacing:.04em; margin-top:3px}
nav.main{display:flex; gap:4px 20px; flex-wrap:wrap; font-size:.9rem; font-weight:500}
nav.main a{color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
nav.main a:hover{border-color:var(--stone)}
nav.main a[aria-current="page"]{border-color:var(--sand)}
.search{position:relative}
.search input{font:inherit; font-size:.88rem; width:11rem; max-width:100%; padding:7px 12px 7px 32px; border:1px solid var(--stone); border-radius:999px; background:var(--card); color:var(--ink)}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--ink-2)}
.menu-btn{display:none}
@media (max-width:860px){
  .menu-btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.9rem; font-weight:500; background:none; border:1px solid var(--stone); color:var(--ink); border-radius:999px; padding:6px 14px; cursor:pointer}
  nav.main{display:none; flex-basis:100%; flex-direction:column; gap:0; padding-bottom:8px}
  nav.main.open{display:flex}
  nav.main a{padding:10px 0; border-bottom:1px solid var(--stone)}
  .search{flex-basis:100%; order:3} .search input{width:100%}
}

/* home */
.lead{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(28px,5vw,64px)}
.lead .ph{aspect-ratio:4/3; overflow:hidden; background:var(--lime); max-width:100%}
.lead .ph img{width:100%; height:100%; object-fit:cover}
.lead h1{font-size:clamp(2rem,4.2vw,3.2rem); margin:12px 0 16px}
.lead h1 a{color:inherit; text-decoration:none}
.lead p{color:var(--ink-2); margin:0 0 20px; max-width:34rem}
@media (max-width:760px){ .lead{grid-template-columns:1fr} }

.intro{background:var(--lime); border-block:1px solid var(--stone)}
.intro .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding-block:28px}
.intro .mono{width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--display); font-size:1.5rem}
.intro p{margin:0; max-width:46rem}
@media (max-width:760px){ .intro .wrap{grid-template-columns:auto 1fr} .intro .wrap > a{grid-column:1/-1; justify-self:start} }

.section{padding-block:clamp(36px,5vw,64px)}
.section + .section{border-top:1px solid var(--stone)}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.sec-head p{margin:6px 0 0; color:var(--ink-2); font-size:.95rem; max-width:36rem}
.more{font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:36px 28px}
.card{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit}
.card .ph{aspect-ratio:3/2; overflow:hidden; background:var(--lime); max-width:100%}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.03)}
.card .noimg{display:grid; place-items:center; height:100%; font-family:var(--display); font-size:1.3rem; color:var(--sand-ink); padding:20px; text-align:center}
.card h3{font-size:1.28rem; color:var(--ink)}
.card:hover h3{color:var(--eagle)}
.card p{margin:0; font-size:.92rem; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--ink-2); align-items:center}
.place{display:inline-flex; align-items:center; gap:5px; color:var(--sand-ink); font-weight:500}
.place svg{width:11px; height:11px; fill:currentColor}

/* property band */
.band{background:var(--ink); color:var(--hero-ink)}
@media (prefers-color-scheme: dark){ :root .band{background:#0a151e} }
.band .sec-head p,.band .card p,.band .meta{color:#c6cdd2}
.band .card h3{color:var(--hero-ink)}
.band .card:hover h3{color:var(--sand)}
.band .eyebrow,.band .place{color:var(--sand)}
.band .more{color:var(--sand)}
.band .card .ph{background:#1d3446}
.band .card .noimg{color:var(--sand)}
.guide{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border-top:1px solid #2f475a; margin-top:44px}
.guide div{padding:20px 20px 4px 0}
.guide b{display:block; font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--hero-ink); margin-bottom:4px}
.guide span{font-size:.88rem; color:#c6cdd2}

.years{display:flex; flex-direction:column}
.year{display:grid; grid-template-columns:5rem 1fr; gap:16px; padding-block:18px; border-top:1px solid var(--stone)}
.year h3{font-size:1.6rem; color:var(--sand-ink)}
.year ul{list-style:none; margin:0; padding:0; columns:2 20rem; column-gap:32px}
.year li{break-inside:avoid; padding:4px 0; font-size:.94rem; display:flex; gap:12px}
.year li time{color:var(--ink-2); font-variant-numeric:tabular-nums; font-size:.8rem; min-width:3.2rem; padding-top:3px}
.year li a{color:var(--ink); text-decoration:none}
.year li a:hover{color:var(--eagle); text-decoration:underline}

/* article */
.art-head{max-width:var(--read); margin:clamp(28px,5vw,56px) auto 0}
.art-head h1{font-size:clamp(2rem,4.6vw,3.1rem); margin:14px 0 18px}
.aged{max-width:var(--read); margin:24px auto 0; display:flex; gap:14px; align-items:flex-start; padding:14px 18px; background:var(--lime); border:1px solid var(--stone); border-radius:4px; font-size:.9rem; color:var(--ink-2)}
.aged svg{flex:none; width:18px; height:18px; margin-top:3px; stroke:var(--sand-ink); fill:none}
.aged strong{color:var(--ink); font-weight:600}
.hero-img{max-width:62rem; margin:32px auto 0}
.hero-img img{width:100%}
.prose{max-width:var(--read); margin:36px auto 0}
.prose p{margin:0 0 1.15em}
.prose figure{margin:2em 0}
.prose figure img{width:100%; background:var(--lime)}
.prose figcaption{font-size:.82rem; color:var(--ink-2); margin-top:8px; padding-left:12px; border-left:2px solid var(--sand)}
.prose strong{font-weight:600}
.prose > p:first-of-type::first-letter{font-family:var(--display); float:left; font-size:3.6em; line-height:.85; padding:6px 10px 0 0; color:var(--eagle)}
.cta{max-width:var(--read); margin:44px auto 0; background:var(--ink); color:var(--hero-ink); padding:28px; border-radius:4px; display:grid; gap:14px}
@media (prefers-color-scheme: dark){ :root .cta{background:#0a151e; border:1px solid var(--stone)} }
.cta h2{font-size:1.5rem}
.cta p{margin:0; color:#c6cdd2; font-size:.95rem}
.cta .row{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; background:#1f7a52; color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; padding:11px 20px; border-radius:999px; border:0; cursor:pointer; font-family:inherit}
.btn:hover{background:#18653f}
.btn svg{width:18px; height:18px; fill:currentColor}
.btn.ghost{background:transparent; color:inherit; border:1px solid currentColor}
.cta .btn.ghost{color:var(--sand)}
.art-foot{max-width:var(--read); margin:40px auto 0; padding-top:20px; border-top:1px solid var(--stone); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-2)}
.art-foot code{font-size:.78rem; background:var(--lime); padding:2px 6px; border-radius:3px; word-break:break-all}

.page-title{padding-block:clamp(32px,5vw,56px) 8px}
.page-title h1{font-size:clamp(2.2rem,4.6vw,3.3rem); margin-top:10px}
.page-title p{color:var(--ink-2); max-width:38rem; margin:12px 0 0}

.contact{display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:56rem; margin-top:24px}
.contact .box{background:var(--card); border:1px solid var(--stone); padding:24px; border-radius:4px; display:grid; gap:10px; align-content:start}
.contact .val{font-size:1.25rem; font-family:var(--display); display:flex; align-items:center; gap:10px; flex-wrap:wrap; word-break:break-all}
.copy{font:inherit; font-size:.75rem; font-weight:600; border:1px solid var(--stone); background:transparent; color:var(--ink-2); border-radius:999px; padding:3px 10px; cursor:pointer}
@media (max-width:700px){ .contact{grid-template-columns:1fr} }
.note{font-size:.88rem; color:var(--ink-2)}

footer.site{margin-top:80px; border-top:1px solid var(--stone); background:var(--lime)}
footer.site .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-block:40px; font-size:.9rem}
footer.site h4{font-family:var(--display); font-weight:400; font-size:1.15rem; margin:0 0 10px}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
footer.site a{color:var(--ink)}
footer.site p{margin:0 0 10px; color:var(--ink-2)}
@media (max-width:760px){ footer.site .wrap{grid-template-columns:1fr} }
.empty{padding:40px 0; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
.prose h2{font-size:1.7rem; margin:1.6em 0 .6em}
.prose h3{font-size:1.3rem; margin:1.4em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.15em; padding-left:1.3em}
.prose li{margin-bottom:.35em}
.prose blockquote{margin:1.5em 0; padding:4px 0 4px 20px; border-left:3px solid var(--sand); color:var(--ink-2); font-style:italic}