:root{
--clr-bg:#f7f6f2;
--clr-surface:#ffffff;
--clr-text:#0a1f18;
--clr-muted:#516a61;
--clr-border:#dcd8cf;
--clr-brand:#0b3d2e;
--clr-accent:#ffc857; /* saffron-like /
--clr-accent-2:#1aa7a1; / teal accent */

--radius:12px;
--shadow:0 2px 10px rgba(0,0,0,.06);

--ff-serif: ui-serif, Georgia, "Times New Roman", serif;
--ff-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

--fs-900: clamp(2rem, 4vw + 1rem, 3rem);
--fs-700: clamp(1.25rem, 2vw + .75rem, 2rem);
--fs-500: 1.125rem;
--fs-400: 1rem;
--fs-300: .9375rem;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--clr-bg);
color:var(--clr-text);
font-family:var(--ff-sans);
line-height:1.6;
font-size:var(--fs-400);
text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;border-radius:var(--radius)}
a{color:var(--clr-brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:72rem;margin-inline:auto;padding:0 1rem}
.section{padding:3rem 0}
.section--tight{padding:1.5rem 0}
.section--accent{background:linear-gradient(0deg,#0b3d2e 0%, #0b3d2e 50%, #0b3d2e 100%);color:#fff;padding:2rem 0}

.h1{font-family:var(--ff-serif);font-size:var(--fs-900);line-height:1.15;margin:.25em 0}
.h2{font-family:var(--ff-serif);font-size:var(--fs-700);line-height:1.2;margin:0 0 .75rem}
.lead{font-size:var(--fs-500);color:#f0f6f3}

.space-sm{height:1rem}

.header .nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.nav__brand{color:var(--clr-brand)}
.nav__toggle{background:var(--clr-surface);border:1px solid var(--clr-border);padding:.5rem .75rem;border-radius:.5rem}
.nav__menu{display:flex;gap:.75rem;padding:.75rem 0}
.nav__menu[hidden]{display:none}
.nav__link{padding:.25rem .5rem;border-radius:.25rem}
.nav__link--current{background:var(--clr-accent);color:#09221a;text-decoration:none}

.cards .card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card__img{aspect-ratio:16/9;object-fit:cover}
.card__body{padding:1rem}
.card__title{margin:0 0 .25rem;font-size:1.125rem}

.grid{display:grid;gap:1rem}
@media(min-width:48rem){.grid--3{grid-template-columns:repeat(3,1fr)}}

.list{list-style:none;margin:0;padding:0}
.list--inline{display:flex;flex-wrap:wrap;gap:.75rem}
.icon-list li{display:flex;gap:.5rem;align-items:baseline;margin:.25rem 0}

.btn{display:inline-block;padding:.6rem .9rem;border-radius:.5rem;border:1px solid transparent;cursor:pointer}
.btn--primary{background:var(--clr-accent);color:#09221a}
.btn--ghost{background:transparent;border-color:var(--clr-accent);color:var(--clr-brand)}
.btn--link{color:var(--clr-brand);text-decoration:underline;background:transparent}

.footer{border-top:1px solid var(--clr-border);background:var(--clr-surface);margin-top:2rem;position:relative}
.footer__grid{display:grid;gap:1rem;padding:1.5rem 0}
@media(min-width:48rem){.footer__grid{grid-template-columns:2fr 1fr 1fr}}

.muted{color:var(--clr-muted);font-size:var(--fs-300)}

.breadcrumbs{font-size:.9rem;color:var(--clr-muted);padding:.5rem 0}
.breadcrumbs a{color:var(--clr-muted)}

.filter{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0;padding:.75rem;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius)}

.form{display:grid;gap:.75rem;max-width:36rem}
.form__row{display:grid;gap:.35rem}
input,select,textarea{padding:.6rem .7rem;border:1px solid var(--clr-border);border-radius:.5rem;background:#fff;color:var(--clr-text)}
input:focus,select:focus,textarea:focus,.nav__toggle:focus,.btn:focus,.faq__q:focus{outline:3px solid var(--clr-accent-2);outline-offset:2px}

.faq__q{display:block;width:100%;text-align:left;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:.5rem;padding:.75rem;font-weight:600}
.faq__a{padding:.75rem;border-left:3px solid var(--clr-accent);margin:0 0 .75rem;background:#fff;border-radius:.25rem}

.map-placeholder{height:240px;border:2px dashed var(--clr-border);border-radius:var(--radius);display:grid;place-items:center;color:var(--clr-muted);background:#fff}

.season-chart{display:flex;gap:.5rem;margin-top:.75rem}
.season-chart__bar{--h:10px;--bg:#ffc857;flex:1;background:linear-gradient(90deg, var(--bg) 0 var(--val), rgba(0,0,0,.08) var(--val) 100%);height:var(--h);border-radius:999px}

.output{display:inline-block;margin-left:1rem;font-weight:700}

.back-to-top{position:fixed;right:1rem;bottom:1rem;background:var(--clr-brand);color:#fff;border:none;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}
.back-to-top:focus{outline:3px solid var(--clr-accent);outline-offset:2px}

@media(prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}