/* layout: full-bleed editorial sections, alternating dark (sea/night) and light (sand) bands, firefly motif as the recurring motion cue */
:root{
  --night:#0a211f;
  --night-2:#113631;
  --sand:#f4eedd;
  --sand-2:#ffffff;
  --ink:#16241f;
  --ink-soft:#50625a;
  --ink-on-night:#e9f3ee;
  --ink-on-night-soft:#9fc2b6;
  --glow:#4fd8a4;
  --ember:#e2984a;
  --coral:#c5543a;
  --line:rgba(22,36,31,0.14);
  --line-night:rgba(233,243,238,0.14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sand:#132824;
    --sand-2:#0f2420;
    --ink:#e9f3ee;
    --ink-soft:#9fc2b6;
    --line:rgba(233,243,238,0.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --sand:#132824;
  --sand-2:#0f2420;
  --ink:#e9f3ee;
  --ink-soft:#9fc2b6;
  --line:rgba(233,243,238,0.14);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sand);color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  line-height:1.55;
  padding-left:max(0px, env(safe-area-inset-left,0px));
  padding-right:max(0px, env(safe-area-inset-right,0px));
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Spectral',Georgia,serif;text-wrap:balance;margin:0;font-weight:600;}
.mono{font-family:'DM Mono',ui-monospace,monospace;}
a{color:inherit;}
img{max-width:100%;}
section{padding-block:72px;}
.px{padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));}
.container{max-width:1040px;margin:0 auto;}
.eyebrow{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.on-night{color:var(--ink-on-night);}
.on-night .ink-soft, .on-night-soft{color:var(--ink-on-night-soft);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px max(20px, env(safe-area-inset-left,0px));
  background:rgba(10,33,31,0.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-night);
}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink-on-night);text-decoration:none;flex:none;}
.brand svg{width:22px;height:22px;flex:none;}
.brand span{font-family:'Spectral',serif;font-weight:600;font-size:17px;letter-spacing:.02em;}
.nav-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.nav-links a{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-on-night-soft);text-decoration:none;}
.nav-cta{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--night);
  background:var(--glow);padding:8px 14px;border-radius:999px;text-decoration:none;flex:none;
}
@media (max-width:640px){ .nav-links{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;background:radial-gradient(circle at 80% -10%, var(--night-2), var(--night) 60%);
  color:var(--ink-on-night);padding-block:88px 70px;overflow:hidden;
}
.firefly{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--glow);
  box-shadow:0 0 8px 2px var(--glow);opacity:.0;animation:drift linear infinite, blink ease-in-out infinite;}
@keyframes drift{ from{transform:translateY(0) translateX(0);} to{transform:translateY(-40px) translateX(14px);} }
@keyframes blink{ 0%,100%{opacity:0;} 50%{opacity:.85;} }
@media (prefers-reduced-motion: reduce){ .firefly{animation:none;opacity:.5;} }

.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;max-width:700px;}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.04;}
.hero p.lede{max-width:52ch;font-size:16.5px;color:var(--ink-on-night-soft);margin:0;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.btn{
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.02em;text-decoration:none;
  padding:11px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
}
.btn-primary{background:var(--glow);color:var(--night);}
.btn-ghost{border:1px solid var(--line-night);color:var(--ink-on-night);}

.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;position:relative;z-index:1;}
.stat{display:flex;flex-direction:column;gap:2px;}
.stat .n{font-family:'Spectral',serif;font-size:26px;color:var(--ink-on-night);}
.stat .l{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-on-night-soft);}

/* ---------- intro / two reputations ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
@media (max-width:640px){ .split{grid-template-columns:1fr;} }
.split h2{font-size:clamp(24px,4vw,32px);margin-bottom:14px;}
.split p{color:var(--ink-soft);font-size:15px;max-width:48ch;margin:0 0 10px;}
.kicker-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);display:block;margin-bottom:8px;}

/* ---------- highlights grid ---------- */
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.section-head h2{font-size:clamp(26px,4vw,34px);}
.section-head p{color:var(--ink-soft);font-size:14.5px;max-width:42ch;margin:0;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){ .cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .cards{grid-template-columns:1fr;} }
.card{
  background:var(--sand-2);border:1px solid var(--line);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:10px;cursor:pointer;min-width:0;
}
.card svg{width:30px;height:30px;color:var(--coral);}
.card h3{font-size:16.5px;}
.card .tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
.card p{font-size:13.5px;color:var(--ink-soft);margin:0;max-height:0;overflow:hidden;transition:max-height .2s ease;}
.card.open p{max-height:160px;}
.card .more{font-family:'DM Mono',monospace;font-size:11px;color:var(--coral);display:flex;align-items:center;gap:4px;}
.card .more svg{width:11px;height:11px;transition:transform .15s ease;color:var(--coral);}
.card.open .more svg{transform:rotate(180deg);}

/* ---------- island outline map ---------- */
.map-section{background:radial-gradient(circle at 15% 0%, var(--night-2), var(--night) 68%);}
.island-wrap{display:flex;justify-content:center;margin-top:8px;}
.island-svg{width:100%;max-width:480px;height:auto;display:block;overflow:visible;}
.island-outline{fill:none;stroke:var(--glow);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1320;stroke-dashoffset:1320;
  animation:draw-island 2.6s cubic-bezier(.65,0,.35,1) .2s forwards;
  filter:drop-shadow(0 0 5px rgba(79,216,164,0.45));}
.island-fill{fill:var(--glow);opacity:0;animation:fill-island 1.1s ease 2.1s forwards;}
@keyframes draw-island{ to{ stroke-dashoffset:0; } }
@keyframes fill-island{ to{ opacity:.07; } }
.map-pin{opacity:0;animation:pin-in .5s ease forwards;}
.map-pin circle{r:4.6;stroke:var(--night);stroke-width:1.4;}
.map-pin.town circle{fill:var(--glow);}
.map-pin.spot circle{fill:var(--coral);}
.map-pin text{font-family:'DM Mono',monospace;font-size:9.5px;fill:var(--ink-on-night);}
@keyframes pin-in{ from{opacity:0;} to{opacity:1;} }
.map-legend{display:flex;gap:20px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.map-legend .legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-on-night-soft);}
.map-legend .legend-dot{width:9px;height:9px;}
.map-caption{text-align:center;font-size:12.5px;color:var(--ink-on-night-soft);margin-top:10px;}
@media (prefers-reduced-motion: reduce){
  .island-outline{animation:none;stroke-dashoffset:0;}
  .island-fill{animation:none;opacity:.07;}
  .map-pin{animation:none;opacity:1;}
}

/* ---------- towns strip ---------- */
.towns{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.town{
  flex:0 0 190px;background:var(--night-2);color:var(--ink-on-night);border-radius:14px;padding:16px;min-width:0;
}
.town .role{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);}
.town h3{font-size:16px;margin-top:6px;color:var(--ink-on-night);}
.town p{font-size:12.5px;color:var(--ink-on-night-soft);margin:6px 0 0;}

/* ---------- road trip itinerary ---------- */
.rt-section{background:var(--sand-2);}
.rt-chips{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 26px;}
.rt-chip{background:var(--night-2);color:var(--ink-on-night);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;}
.rt-chip .k{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-on-night-soft);}
.rt-chip .v{font-family:'DM Mono',monospace;font-size:12.5px;}

.rt-days{display:flex;gap:8px;margin-bottom:22px;}
.rt-day-btn{flex:1;border:1px solid var(--line);background:var(--sand-2);color:var(--ink);font-family:'DM Mono',monospace;font-size:12px;padding:10px 8px;border-radius:10px;cursor:pointer;text-align:center;}
.rt-day-btn b{display:block;font-family:'Spectral',serif;font-size:14.5px;font-weight:600;margin-top:2px;}
.rt-day-btn[aria-selected="true"]{background:var(--night);color:var(--ink-on-night);border-color:var(--night);}

.rt-panel{display:none;}
.rt-panel.active{display:block;}
.rt-summary{font-size:14px;color:var(--ink-soft);max-width:64ch;margin:0 0 18px;}

.rt-list{display:flex;flex-direction:column;}
.rt-row{display:grid;grid-template-columns:72px 1fr;gap:12px;padding-block:12px;border-top:1px solid var(--line);}
.rt-row:first-child{border-top:none;}
.rt-row.optional{opacity:.78;}
.rt-time{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--coral);font-variant-numeric:tabular-nums;padding-top:1px;}
.rt-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.rt-top h4{font-family:'Spectral',serif;font-weight:600;font-size:15px;}
.rt-badge{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:1px 7px;}
.rt-town{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink-soft);margin-left:auto;}
.rt-row p{font-size:13px;color:var(--ink-soft);margin:4px 0 0;max-width:58ch;}

.rt-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.rt-link-btn{font-family:'DM Mono',monospace;font-size:12px;color:var(--night);background:var(--glow);padding:9px 14px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.rt-note{font-size:12.5px;color:var(--ink-soft);margin-top:12px;max-width:64ch;}
@media (max-width:480px){ .rt-row{grid-template-columns:58px 1fr;} }

/* ---------- getting there ---------- */
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:640px){ .info-cols{grid-template-columns:1fr;} }
.info-block{background:var(--sand-2);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0;}
.info-block h3{font-size:16px;margin-bottom:10px;}
.info-block ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.info-block li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;border-top:1px solid var(--line);padding-top:10px;}
.info-block li:first-child{border-top:none;padding-top:0;}
.info-block li .from{color:var(--ink-soft);}
.info-block li .time{font-family:'DM Mono',monospace;font-size:12px;color:var(--coral);flex:none;}

/* ---------- climate chart ---------- */
.climate-wrap{background:var(--sand-2);border:1px solid var(--line);border-radius:16px;padding:22px;}
.chart{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:18px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.bar{width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:linear-gradient(to top, var(--glow), var(--night-2));}
.bar-col .m{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);}
.bar-col.peak .bar{background:linear-gradient(to top, var(--coral), var(--ember));}

/* ---------- faq ---------- */
.faq-item{border-top:1px solid var(--line-night);}
.faq-item:first-child{border-top:none;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--ink-on-night);
  font-family:'Spectral',serif;font-size:17px;padding:18px 0;display:flex;justify-content:space-between;
  align-items:center;gap:12px;cursor:pointer;
}
.faq-q svg{flex:none;width:14px;height:14px;transition:transform .15s ease;color:var(--glow);}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{font-size:14px;color:var(--ink-on-night-soft);margin:0 0 18px;max-width:58ch;}

/* ---------- footer cta ---------- */
.footcta{background:radial-gradient(circle at 20% 0%, var(--night-2), var(--night) 65%);color:var(--ink-on-night);text-align:center;}
.footcta h2{font-size:clamp(26px,4vw,36px);max-width:26ch;margin:0 auto 14px;}
.footcta .btn-primary{margin-top:6px;}
.footer-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:54px;padding-top:20px;border-top:1px solid var(--line-night);font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-on-night-soft);}