
:root{--night:#141b2b;--night-2:#1d2639;--paper:#fbfbf9;--ink:#141b2b;--ink-soft:#4e566a;--gold:#b49e74;--gold-soft:#d6c6a4;--gold-text:#8a7448;--mist:#c7ccd8;--rule:rgba(180,158,116,.45);
--brand:"Cinzel","Trajan Pro",Georgia,serif;--display:"Cormorant","Cormorant Garamond",Georgia,serif;--sans:"Josefin Sans","Futura","Century Gothic",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.12rem;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--gold-text)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
header.top{background:var(--night);color:#fff;position:sticky;top:0;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.12)}
header.top .wrap{display:flex;align-items:center;gap:18px;padding-block:calc(16px + env(safe-area-inset-top,0px)) 16px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-right:auto}
.logo svg{color:var(--gold)}
.logo b{font-family:var(--brand);font-weight:500;letter-spacing:.06em;font-size:1.02rem}
.navl{display:flex;gap:22px}
.navl a{color:#fff;text-decoration:none;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase}
.navl a:hover,.navl a[aria-current]{color:var(--gold-soft)}
.kicker{font-weight:600;font-size:.84rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem)}
h2{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.7rem);margin-top:2.2em}
h3{font-size:clamp(1.45rem,1.2rem + .8vw,1.8rem);margin-top:1.6em}
p,ul{margin:1em 0}
.crumbs{font-size:.92rem;color:var(--ink-soft);padding-block:22px 0}
.crumbs a{color:var(--ink-soft)}
.hero{padding-block:28px 34px}
.hero h1{margin-top:10px}
.meta{margin-top:14px;color:var(--ink-soft);font-size:.95rem}
.lede{font-family:var(--display);font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);line-height:1.4;color:var(--ink)}
.cover{aspect-ratio:16/8;max-height:520px;overflow:hidden;background:var(--night-2)}
article{padding-block:20px 60px}
article strong{font-weight:600}
.cover-fig figcaption,figure.inline figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:8px}
figure.inline{margin:1.4em 0}
figure.inline img{aspect-ratio:3/2;height:auto}
.site figure.inline{margin:.6em 0 0}
figcaption a{color:var(--ink-soft)}
.credits{font-size:.86rem;color:var(--mist);max-width:80ch}
.tip{border-left:3px solid var(--gold);background:#f3efe6;padding:14px 18px;margin:1.4em 0;font-size:1.02rem}
.sites{display:grid;gap:18px;margin-top:10px}
.site{border-top:1px solid var(--rule);padding-top:6px}
.site h3{margin-top:.6em}
.when{margin:.3em 0 0;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);font-weight:600}
.book{background:var(--night);color:#fff;text-align:center;padding-block:56px}
.book h2{margin:0;color:#fff}
.book h2 em{color:var(--gold-soft)}
.book p{color:var(--mist);max-width:56ch;margin:14px auto 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px 12px;text-decoration:none;font-weight:600;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--night)}
.btn-line{border:1px solid rgba(255,255,255,.7);color:#fff}
.more{padding-block:50px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:22px}
.card{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);background:#fff;border:1px solid #e6e2d8}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--night-2)}
.card .tx{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.card h3{margin:0;font-size:1.5rem}
.card p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.55}
.card:hover h3{color:var(--gold-text)}
@media (max-width:860px){.cards{grid-template-columns:1fr}.navl{display:none}}
footer{background:#0e1320;color:var(--mist);font-size:.92rem;padding-block:28px calc(96px + env(safe-area-inset-bottom,0px))}
footer a{color:var(--mist)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;background:rgba(20,27,43,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.mbar .btn{flex:1;padding:14px 8px 12px;letter-spacing:.14em}
@media (max-width:400px){.mbar .btn{letter-spacing:.08em;font-size:.8rem}}
@media (min-width:1025px){.mbar{left:auto;right:24px;bottom:24px;padding:8px;border:1px solid var(--rule);box-shadow:0 10px 30px rgba(0,0,0,.25)}.mbar .btn{flex:none;padding:14px 18px 12px}footer{padding-bottom:28px}}
