:root { --deep:#062e4a; --aqua:#daf5f0; --coral:#ea7451; --ink:#133249; --gold:#f3bc62; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f7f2e8; 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:#fff; background:#8a3026; 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:#dcecf1; background:#071b2a; }
.nav a { display:inline-flex; align-items:center; min-height:44px; color:inherit; 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(350px,46vw,570px); display:grid; align-items:end; padding:clamp(2rem,7vw,6rem) max(1.25rem,calc((100% - 1120px)/2)); color:#f7fffe; background:radial-gradient(circle at 70% 5%,#d8faf2 0 3%,transparent 20%),radial-gradient(circle at 64% 26%,rgba(169,244,235,.7),transparent 28%),linear-gradient(145deg,#043c61,#087b9a 56%,#10b5c0); }
.hero__copy { max-width:760px; text-shadow:0 2px 8px rgba(0,39,64,.65); }
.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:14ch; margin:0; font-size:clamp(3rem,7vw,6.2rem); line-height:.92; }
.hero p:last-child { max-width:700px; 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:#114b63; font-size:clamp(2rem,4vw,3.4rem); }
.intro p { max-width:760px; }
.grid { width:min(1240px,calc(100% - 2rem)); display:grid; grid-template-columns:1fr; gap:1.4rem; margin:0 auto; padding:0 0 4rem; }
.card { overflow:hidden; display:grid; grid-template-columns:minmax(0,3fr) minmax(280px,2fr); border:1px solid #c9ddd8; background:#fffdf7; box-shadow:0 10px 30px rgba(11,57,70,.1); }
.art-link { display:block; align-self:stretch; background:#d8f3ee; }
.art-link:focus-visible { outline:4px solid var(--coral); outline-offset:-4px; }
.art-link img { display:block; width:100%; height:100%; min-height:240px; object-fit:cover; }
.card__copy { display:flex; flex-direction:column; justify-content:center; padding:1.5rem; }
.card h2 { margin:0; color:#114b63; font-size:clamp(1.8rem,3vw,2.55rem); line-height:1.05; }
.card p { margin:.7rem 0 0; }
.tag { color:#a13c2e; font-size:.7rem; }
.note { width:min(900px,calc(100% - 2rem)); margin:0 auto 3.5rem; padding:1.25rem 1.4rem; border-left:5px solid var(--coral); background:#e7f6f2; }
.note strong { color:#114b63; }
.foot { padding:1.5rem; color:#d2e6eb; background:#071b2a; 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; } .card { grid-template-columns:1fr; } .art-link img { height:auto; min-height:0; } }