:root { --ink:#f8efe3; --navy:#081522; --gold:#efbf62; --rust:#8a3026; --paper:#f8f1e6; }
* { box-sizing:border-box; }
body { margin:0; color:#172735; background:var(--paper); font:17px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { z-index:2; top:1rem; left:1rem; padding:.75rem 1rem; color:#fff; background:#000; }
.notice { padding:.42rem 1rem; color:#fff6e9; background:var(--rust); font-size:.73rem; font-weight:800; letter-spacing:.11em; text-align:center; text-transform:uppercase; }
.nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1.6rem; padding:.75rem 1rem; color:#dce7ed; background:var(--navy); }
.nav a { display:inline-flex; align-items:center; min-height:44px; color:#dce7ed; font-size:.75rem; font-weight:800; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.nav a:hover,.nav a:focus { color:var(--gold); }
.hero { min-height:clamp(390px,56vw,660px); display:grid; align-items:end; padding:clamp(2rem,7vw,6rem) max(1.25rem,calc((100% - 1120px)/2)); color:var(--ink); background:linear-gradient(90deg,rgba(4,13,21,.87),rgba(4,13,21,.42) 47%,rgba(4,13,21,.05)),url("/jamie-cliffside-berk-continuous.jpg") center 42%/cover; }
.hero__copy { max-width:720px; text-shadow:0 2px 8px rgba(0,0,0,.8); }
.eyebrow,.tag { margin:0 0 .5rem; color:var(--gold); font-size:.78rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; }
h1 { max-width:12ch; margin:0; font-size:clamp(3rem,7vw,6.5rem); line-height:.92; }
.hero p:last-child { max-width:650px; margin:1.2rem 0 0; font-size:clamp(1.05rem,2vw,1.35rem); }
.intro { width:min(900px,calc(100% - 2rem)); margin:0 auto; padding:3.5rem 0 2rem; }
.intro h2 { margin:0; color:#173852; font-size:clamp(2rem,4vw,3.4rem); }
.intro p { max-width:720px; }
.coverage { width:min(900px,calc(100% - 2rem)); margin:0 auto 2.5rem; padding:1.35rem; border-left:5px solid var(--gold); background:#efe4d3; }
.coverage h2 { margin:0; color:#173852; font-size:1.35rem; }
.coverage ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.3rem; margin:.75rem 0 0; padding:0; list-style:none; }
.coverage a { color:#173852; font-weight:750; text-decoration-thickness:2px; text-underline-offset:3px; }
.grid { width:min(1240px,calc(100% - 2rem)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; margin:0 auto; padding:0 0 4rem; }
.card { overflow:hidden; border:1px solid #d3c6b6; background:#fffaf2; box-shadow:0 10px 30px rgba(20,31,40,.09); }
.card:last-child { grid-column:1/-1; }
.art-link { display:block; }
.art-link:focus-visible { outline:4px solid var(--gold); outline-offset:-4px; }
.card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.card__copy { padding:1.25rem 1.35rem 1.5rem; }
.card h2 { margin:0; color:#173852; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.05; }
.card p { margin:.6rem 0 0; }
.tag { color:#9d3d2c; font-size:.7rem; }
.foot { padding:1.5rem; color:#d2dde3; background:#07131e; font-size:.8rem; text-align:center; }
@media (max-width:720px) { .nav { gap:0 .45rem; display:grid; grid-template-columns:repeat(3,1fr); } .nav a { justify-content:center; font-size:.64rem; text-align:center; } .hero { background-position:60% center; } .coverage ul,.grid { grid-template-columns:1fr; } .card:last-child { grid-column:auto; } }