:root{
  --deep:#07272d;
  --deep-2:#0b3a40;
  --teal:#0f5257;
  --sea:#147d78;
  --foam:#e8f2f0;
  --sand:#f7f4ee;
  --ink:#123034;
  --muted:#5d7a7d;
  --accent:#ff7a4d;
  --accent-dark:#e85f33;
  --gold:#f2b558;
  --radius:16px;
  --shadow:0 10px 40px rgba(7,39,45,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--sand);line-height:1.65}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;line-height:1.15}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}

header{background:var(--deep);padding:16px 0}
.nav{display:flex;align-items:center;gap:32px;max-width:1200px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:1.45rem;font-weight:700;color:#fff}
.logo svg{width:30px;height:30px}
.logo img{height:42px;width:auto}
.nav-links{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav-links a{color:rgba(255,255,255,.85);font-size:.95rem;font-weight:500}
.nav-links a:hover{color:#fff}

.page-hero{background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%);color:#fff;padding:72px 0 56px}
.page-hero.has-img{background-size:cover;background-position:center;padding:110px 0 80px}
.page-hero .crumbs{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:18px}
.page-hero .crumbs a{color:rgba(255,255,255,.75)}
.page-hero .crumbs a:hover{color:var(--gold)}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:16px}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.page-hero p.lead{font-size:1.1rem;color:rgba(255,255,255,.78);max-width:640px}

main{padding:56px 0}
main h2{font-size:1.6rem;margin:40px 0 14px}
main h2:first-child{margin-top:0}
main p{margin-bottom:14px;color:#2c4a4e}
main ul{margin:0 0 14px 22px;color:#2c4a4e}
main li{margin-bottom:6px}

.season-table{width:100%;border-collapse:collapse;margin:14px 0 20px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);font-size:.95rem}
.season-table th,.season-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #edf2f0}
.season-table th{background:var(--foam);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.season-table tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:600}
.badge.peak{background:#e7f6ec;color:#187a3c}
.badge.good{background:#fdf3e2;color:#a86b12}
.badge.off{background:#f0f0f0;color:#888}

.photo{margin:28px 0 32px}
.photo img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.photo figcaption{font-size:.85rem;color:var(--muted);margin-top:8px;text-align:center}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:185px;gap:14px;margin:28px 0 36px}
.gallery figure{position:relative;overflow:hidden;border-radius:var(--radius);margin:0;box-shadow:var(--shadow)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(transparent,rgba(7,39,45,.8));color:#fff;font-size:.82rem;font-weight:500;letter-spacing:.01em}
.g-big{grid-column:span 2;grid-row:span 2}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
@media(max-width:900px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .g-big{grid-column:span 2;grid-row:span 2}
  .g-wide{grid-column:span 2}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:10px}
}

.related{margin-top:48px;padding-top:32px;border-top:1px solid #e2ebe8}
.related h2{margin-top:0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.related-card{background:#fff;border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);transition:transform .2s}
.related-card:hover{transform:translateY(-3px)}
.related-card .kind{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sea);margin-bottom:6px}
.related-card h3{font-size:1.1rem;margin-bottom:4px}
.related-card p{font-size:.9rem;color:var(--muted);margin:0}

.cta-box{background:var(--deep);color:#fff;border-radius:var(--radius);padding:36px;margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-box h2{margin:0 0 6px;font-size:1.4rem;color:#fff}
.cta-box p{margin:0;color:rgba(255,255,255,.75)}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:14px 28px;border-radius:14px;transition:background .2s;white-space:nowrap}
.btn:hover{background:var(--accent-dark)}

footer{background:var(--deep);color:rgba(255,255,255,.7);padding:36px 0;margin-top:72px;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:rgba(255,255,255,.85)}
footer a:hover{color:var(--gold)}

@media(max-width:560px){
  .page-hero{padding:48px 0 40px}
  main{padding:40px 0}
  .cta-box{padding:28px}
}