:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --ink:#0c1b2e;
  --muted:#5a6d84;
  --accent:#c8102e;
  --line:rgba(12,40,80,.12);
  --disp:'Oswald',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.7rem 4vw;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.brand-block{
  display:flex;flex-direction:column;align-items:flex-start;gap:.32rem;
  min-width:0;max-width:min(34rem,62vw);
}
.brand{
  font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:.18em;
  text-decoration:none;color:var(--ink);
  text-shadow:none;
}
.note{
  margin:0;
  font-size:clamp(.68rem,1.55vw,.82rem);
  line-height:1.4;
  color:var(--muted);
  text-align:left;
  text-shadow:none;
}
.nav{display:flex;align-items:center;gap:.15rem 1.15rem;flex-wrap:wrap;padding-top:.28rem}
.nav a{
  font-family:var(--disp);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);padding:.35rem 0;
}
.nav a:hover,.nav a.is-on{color:var(--accent)}
.nav .join{
  color:#fff;background:var(--accent);padding:.45rem .8rem;border-radius:1px;
}
.nav .join:hover{color:#fff;filter:brightness(1.06)}
.burger{
  display:none;background:none;border:1px solid var(--accent);color:var(--accent);font-family:var(--disp);
  letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;cursor:pointer;padding:.4rem .7rem;
  margin-top:.12rem;
}
@media (max-width:820px){
  .burger{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:.4rem 0 .7rem}
  .top.is-open .nav{display:flex}
  .top{flex-wrap:wrap}
}
.plates{position:fixed;inset:0;z-index:0;background:var(--bg)}
.plate{
  position:absolute;inset:0;
  background:var(--bg) center/cover no-repeat;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.4s ease;
}
.plate.is-on{opacity:1;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-2.2%,1.2%,0)}
}
.shade{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,20,36,.78) 0%, rgba(10,20,36,.32) 40%, rgba(10,20,36,.22) 58%, rgba(10,20,36,.82) 100%),
    radial-gradient(90% 70% at 50% 42%, transparent 35%, rgba(10,20,36,.55) 100%);
}
.home-wrap{
  position:relative;z-index:2;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
body[data-page="home"]{height:100%;overflow:hidden}
body[data-page="home"]:has(.top.is-open){overflow:auto}
body[data-page="home"] .home-wrap{
  height:100vh;height:100svh;height:100dvh;
  max-height:100vh;max-height:100dvh;
  overflow:hidden;
}
.home-wrap .top{position:relative;background:transparent;border-bottom-color:transparent;flex-shrink:0}

/* Home hero stays readable over port photos */
body[data-page="home"] .brand{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7)}
body[data-page="home"] .note{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.65)}
body[data-page="home"] .nav a{color:rgba(255,255,255,.86)}
body[data-page="home"] .nav a:hover,
body[data-page="home"] .nav a.is-on{color:#fff}
body[data-page="home"] .burger{border-color:rgba(255,255,255,.7);color:#fff}
body[data-page="home"] .tagline{color:rgba(255,255,255,.82)}
body[data-page="home"] .status{color:rgba(255,255,255,.75)}
body[data-page="home"] .status .dot{background:rgba(255,255,255,.35)}

.stage{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.55rem,2vh,1.4rem);padding:4vw 6vw 1.2rem;text-align:center;
}
.wordmark{margin:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:clamp(5.4rem,20vw,14rem);line-height:.82;
  letter-spacing:.08em;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.55);user-select:none}
.wm-ch{position:relative;display:inline-flex;align-items:center;justify-content:center}
.wm-glyph{display:block}
.wm-word{
  position:absolute;top:11%;bottom:11%;
  display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;
  font-size:.048em;letter-spacing:0;line-height:1;font-weight:700;color:var(--accent);
  text-shadow:none;pointer-events:none;
}
.wm-i .wm-word{left:50%;transform:translateX(-50%)}
.wm-l .wm-word{left:22%;transform:none}
.wm-a .wm-word{
  left:32%;top:13%;bottom:14%;
  transform:translateX(-50%) rotate(9.5deg);
  transform-origin:center center;
}
.wm-word span{display:block;transform:rotate(-90deg)}
.tagline{
  margin:0;max-width:44rem;
  font-size:clamp(.82rem,2.7vw,1.15rem);font-weight:400;letter-spacing:.06em;color:var(--muted);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.tagline b{color:#fff;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:1px}
.tagline .cursor{color:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.status{
  position:relative;flex-shrink:0;margin-top:auto;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.55em 1.1em;
  padding:.55rem 1.1rem max(.85rem, calc(.45rem + env(safe-area-inset-bottom, 0px)));
  font-family:var(--disp);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.status span{display:inline-flex;align-items:center;gap:.55em}
.status .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.status .live{color:#fff}
.status .live .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.page{
  position:relative;z-index:2;
  max-width:980px;margin:0 auto;padding:2.4rem 5vw 4.5rem;
}
.kicker{margin:0 0 .4rem;font-family:var(--disp);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.page h1{margin:0 0 1rem;font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:.06em}
.page p{margin:0 0 1rem;line-height:1.65;color:var(--muted);font-size:1.02rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.6rem 0 0}
.card{
  border:1px solid var(--line);background:var(--panel);padding:1.15rem 1.15rem 1.2rem;
}
.card h2{margin:0 0 .45rem;font-family:var(--disp);font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.card p{margin:0;font-size:.92rem}
form{display:grid;gap:.85rem;max-width:520px;margin-top:1.4rem}
label{display:grid;gap:.35rem;font-family:var(--disp);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
input,textarea,select{
  width:100%;padding:.7rem .75rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  font:500 1rem var(--serif);
}
button[type=submit]{
  justify-self:start;border:0;background:var(--accent);color:#fff;
  font-family:var(--disp);letter-spacing:.16em;text-transform:uppercase;padding:.75rem 1.1rem;cursor:pointer;
}
.ok{display:none;margin-top:1rem;color:var(--accent)}
.ok.show{display:block}
.link{font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}
@media (max-width:820px){
  .brand-block{max-width:min(22rem,72vw)}
  body[data-page="home"] .wordmark{font-size:clamp(3.4rem,22vw,7.2rem)}
  body[data-page="home"] .tagline{font-size:clamp(.74rem,3.4vw,.98rem)}
  body[data-page="home"] .note{font-size:clamp(.66rem,3.1vw,.78rem);line-height:1.35}
  body[data-page="home"] .status{font-size:.58rem;letter-spacing:.18em;gap:.4em .8em}
  body[data-page="home"] .home-wrap:has(.top.is-open){overflow:auto}
}
@media (max-height:720px){
  body[data-page="home"] .wordmark{font-size:clamp(3rem,18vh,6.2rem)}
  body[data-page="home"] .stage{gap:.45rem;padding:2.4vw 5vw .4rem}
}
@media (prefers-reduced-motion:reduce){
  .plate,.plate.is-on{animation:none;transform:scale(1.06);transition:none}
  .tagline .cursor{animation:none}
}

/* Along the Coast */
.coast-page{max-width:1080px}
.coast-page .lede{font-size:1.08rem;max-width:46rem}
.coast-page .lede strong{color:var(--ink);font-weight:600}
.local-feature{
  margin:2.2rem 0 2.6rem;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.local-feature-media{
  min-height:clamp(14rem,38vw,22rem);
  background:var(--panel) center/cover no-repeat;
  filter:saturate(.92) contrast(1.05);
}
.local-feature-body{padding:1.35rem 1.35rem 1.55rem}
.local-num{
  margin:0 0 .25rem;
  font-family:var(--disp);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
.local-feature h2,.local-feature h3,.local-row h2,.local-row h3{
  margin:0 0 .55rem;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.45rem,3.5vw,2rem);letter-spacing:.05em;
}
.local-aka{margin:0 0 1rem;color:var(--ink);font-size:.95rem}
.local-note{margin-top:1.1rem;font-size:.82rem;color:var(--muted)}
.photo-credit{
  margin:0;padding:.45rem 1.35rem .15rem;
  font-size:.72rem;line-height:1.4;color:var(--muted);
}
.photo-credits-block{margin-top:1.4rem}
.about-coast{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.coast-title{
  margin:0 0 1rem;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,4.5vw,2.6rem);letter-spacing:.06em;
}
.coast-rail{
  margin:0 0 1.6rem;
  font-family:var(--disp);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.local-list{display:grid;gap:1.15rem}
.local-row{
  display:grid;
  grid-template-columns:minmax(7.5rem,11rem) 1fr;
  gap:1.1rem;
  align-items:stretch;
  border:1px solid var(--line);
  background:var(--panel);
  padding:.85rem;
}
.local-thumb{
  min-height:7.5rem;
  background:var(--panel) center/cover no-repeat;
}
.local-row p:last-child{margin-bottom:0}
.coast-foot{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.coast-foot h2,.coast-foot h3{
  margin:0 0 .6rem;
  font-family:var(--disp);font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:640px){
  .local-row{grid-template-columns:1fr}
  .local-thumb{min-height:10rem}
}