/* North Haven, Maine — Summer 2026 family calendar page */
:root{
  --pine:#1f4436;
  --pine-dark:#122b21;
  --pine-light:#3d6b56;
  --water:#1d5b73;
  --water-deep:#123b4a;
  --sand:#f3ead4;
  --cream:#faf6ec;
  --amber:#d98e3f;
  --ink:#1c2622;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Georgia","Iowan Old Style","Palatino Linotype",serif;
  line-height:1.55;
}

h1,h2,h3{
  font-family:"Palatino Linotype","Iowan Old Style",Georgia,serif;
  color:var(--pine-dark);
  margin:0 0 0.4em;
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--water-deep) 0%,var(--water) 65%,var(--pine) 100%);
  position:relative;
  padding:4.5rem 1.5rem 0;
  text-align:center;
  color:var(--cream);
  overflow:hidden;
}
.hero-inner{
  max-width:640px;
  margin:0 auto;
  padding-bottom:2.5rem;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.75rem;
  color:var(--sand);
  font-family:Georgia, serif;
  margin:0 0 0.8rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.2rem,6vw,3.4rem);
  margin:0 0 0.5rem;
}
.tagline{
  font-size:1.1rem;
  color:var(--sand);
  margin:0;
}
.treeline{
  display:block;
  width:100%;
  height:70px;
}
.treeline polygon{
  fill:var(--pine-dark);
}

/* ---------- Layout ---------- */
main{
  max-width:1000px;
  margin:0 auto;
  padding:0 1.5rem 3rem;
}
section{margin-top:3rem;}
section h2{
  font-size:1.7rem;
  border-bottom:3px solid var(--amber);
  display:inline-block;
  padding-bottom:0.2rem;
  margin-bottom:1.5rem;
}

/* ---------- Crew cards ---------- */
.crew-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}
.crew-card{
  background:#fff;
  border-radius:14px;
  padding:1.4rem 1.3rem;
  box-shadow:0 4px 14px rgba(18,43,33,0.08);
  border-top:5px solid var(--pine-light);
  position:relative;
}
.crew-card.approx{border-top-color:var(--amber);}
.crew-card.hosting{border-top-color:var(--water);}
.crew-card.tbd{border-top-color:#9a9a92;}
.crew-icon{
  font-size:1.8rem;
  display:block;
  margin-bottom:0.5rem;
}
.crew-card h3{
  font-size:1.15rem;
  margin-bottom:0.4rem;
}
.crew-card p{
  margin:0 0 0.9rem;
  font-size:0.95rem;
  color:#3a3f3a;
}
.badge{
  display:inline-block;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:0.3rem 0.7rem;
  border-radius:999px;
  font-family:Georgia,serif;
}
.badge-confirmed{background:#e4f0e6;color:var(--pine);}
.badge-approx{background:#fbead4;color:#8a5a1f;}
.badge-hosting{background:#e1eff3;color:var(--water-deep);}
.badge-tbd{background:#efefec;color:#6a6a63;}

/* ---------- Wave divider ---------- */
.wave-divider{
  margin-top:3rem;
  line-height:0;
}
.wave-divider svg{
  width:100%;
  height:40px;
  display:block;
}
.wave-divider path{
  fill:var(--water);
  opacity:0.35;
}

/* ---------- Timeline ---------- */
.timeline-note{
  color:#4a5350;
  font-size:0.95rem;
  margin-top:-0.5rem;
  margin-bottom:2rem;
}
.timeline{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg,var(--pine-light),var(--water));
}
.tl-item{
  position:relative;
  padding-left:2.6rem;
  margin-bottom:1.8rem;
}
.tl-item:last-child{margin-bottom:0;}
.tl-dot{
  position:absolute;
  left:0;
  top:6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--pine-light);
  border:3px solid var(--cream);
  box-shadow:0 0 0 2px var(--pine-light);
}
.tl-approx .tl-dot{
  background:var(--sand);
  border:3px dashed var(--amber);
  box-shadow:none;
}
.tl-card{
  background:#fff;
  border-radius:14px;
  padding:1.1rem 1.4rem;
  box-shadow:0 4px 14px rgba(18,43,33,0.08);
}
.tl-date{
  display:inline-block;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--water-deep);
  font-family:Georgia,serif;
  margin-bottom:0.3rem;
}
.tl-approx .tl-date{color:#8a5a1f;}
.tl-date em{font-style:italic;text-transform:none;letter-spacing:0;}
.tl-card h3{
  font-size:1.15rem;
  margin:0.1rem 0 0.4rem;
}
.tl-card p{
  margin:0;
  font-size:0.95rem;
  color:#3a3f3a;
}

/* ---------- Notes ---------- */
.notes ul{
  padding-left:1.3rem;
}
.notes li{
  margin-bottom:0.7rem;
  font-size:1rem;
}

/* ---------- Footer ---------- */
.site-foot{
  text-align:center;
  padding:2.5rem 1.5rem 3rem;
  background:var(--pine-dark);
  color:var(--sand);
}
.site-foot p{
  margin:0;
  font-size:1.1rem;
}

@media (max-width:560px){
  .hero{padding-top:3.5rem;}
}