@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Italiana&display=swap');

:root {
  --ink: #28584a;
  --jade: #247f79;
  --teal: #43b6a2;
  --sea-glass: #b9e6dd;
  --ivory: #f4efe7;
  --white: #fffdfa;
  --gold: #ba8a3d;
  --line: rgba(40,88,74,.18);
  --shadow: 0 22px 65px rgba(25,73,65,.13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: 'DM Sans', sans-serif; line-height: 1.65; }
a { color: inherit; }
h1,h2,h3 { font-family: 'Italiana', serif; font-weight: 400; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(3rem, 7vw, 6.9rem); }
h2 { font-size: clamp(2.2rem, 4.5vw, 4.6rem); }
h3 { font-size: 1.7rem; }
p { margin: 0 0 1rem; }

.site-header { min-height: 108px; padding: 12px clamp(18px,5vw,72px); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: rgba(244,239,231,.96); border-bottom: 1px solid var(--line); }
.site-header img { width: 120px; height: 96px; object-fit: contain; }
.site-header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.15rem; }
.site-header nav a { text-decoration: none; font-size: .94rem; }
.site-header .nav-cta { padding: .7rem 1rem; border: 1px solid var(--jade); }

.hero { min-height: clamp(560px,calc(100vh - 130px),760px); display: grid; align-items: end; background: linear-gradient(90deg, rgba(20,67,64,.56), rgba(20,67,64,.05) 72%), url('/assets/coastal-kap-banner.jpg') center/cover no-repeat; }
.hero-copy { color: white; width: min(940px,92%); padding: clamp(2.5rem,5vw,5rem); text-shadow: 0 2px 18px rgba(0,0,0,.18); }
.hero h1 { font-size: clamp(2.7rem,5vw,4.65rem); }
.hero-copy > p:not(.eyebrow) { font-size: clamp(1.05rem,2vw,1.35rem); max-width: 760px; }
.hero-event { display: inline-grid; gap: .18rem; margin-top: .65rem; padding: .9rem 1.1rem; border: 1px solid rgba(255,255,255,.62); background: rgba(22,63,57,.32); backdrop-filter: blur(3px); }
.hero-event strong { font-size: .82rem; letter-spacing: .15em; }
.hero-event span { font-size: 1.02rem; }
.eyebrow { letter-spacing: .18em; font-weight: 600; font-size: .75rem; color: var(--teal); margin-bottom: .75rem; }
.hero .eyebrow { color: #d6f4ec; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: .85rem 1.35rem; border: 1px solid transparent; text-decoration: none; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover,.button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,65,60,.18); }
.button-primary { background: var(--jade); color: white; border-color: var(--jade); }
.button-light { background: rgba(255,253,250,.92); color: var(--ink); border-color: white; }

.event-card { width: min(1160px,90%); margin: -44px auto 0; position: relative; z-index: 2; background: var(--white); box-shadow: var(--shadow); display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem,6vw,6rem); padding: clamp(2rem,5vw,4.5rem); border-top: 5px solid var(--gold); }
.event-date { font-size: 1.15rem; margin-top: 1rem; }
.event-register { align-self: center; border-left: 1px solid var(--line); padding-left: clamp(1.5rem,4vw,3.5rem); }

.section { padding: clamp(5rem,9vw,9rem) clamp(1.4rem,8vw,8rem); }
.section-heading { max-width: 850px; margin: 0 auto 3rem; text-align: center; }
.section-heading.compact { margin-bottom: 2rem; }
.cards { display: grid; gap: 1.2rem; max-width: 1200px; margin: 0 auto; }
.cards.three { grid-template-columns: repeat(3,1fr); }
.cards article { background: rgba(255,253,250,.8); border: 1px solid var(--line); padding: 2rem; min-height: 260px; }
.cards article span { color: var(--gold); letter-spacing: .18em; font-size: .8rem; }
.cards article h3 { margin: .8rem 0 1rem; }
.coast-break { min-height: 440px; background: url('/assets/kap-journey-background.jpg') center/cover no-repeat; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,8vw,8rem); align-items: center; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.check-list li { background: var(--white); border: 1px solid var(--line); padding: 1.15rem 1.25rem 1.15rem 3rem; position: relative; }
.check-list li::before { content: '✦'; color: var(--gold); position: absolute; left: 1.2rem; }
.ivory { background: #ece3d6; }
.actions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; max-width: 980px; margin: 0 auto; }
.action-card { background: var(--white); border: 1px solid var(--line); padding: 1.6rem; text-decoration: none; display: grid; gap: .45rem; }
.action-card span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.action-card strong { font-family: 'Italiana', serif; font-size: 1.55rem; font-weight: 400; }
.monthly { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,8vw,8rem); background: var(--ink); color: white; }
.monthly .eyebrow { color: var(--sea-glass); }
.monthly > p { align-self: center; font-size: 1.1rem; }
.disclaimer { padding: 2rem clamp(1.4rem,8vw,8rem); background: var(--white); font-size: .92rem; }
.disclaimer p { max-width: 1080px; margin: 0 auto; }
footer { padding: 3rem 1.5rem; text-align: center; background: #173f39; color: white; }
footer img { width: 110px; filter: brightness(0) invert(1); }
footer a { color: white; }

@media (max-width: 800px) {
  .site-header { align-items: flex-start; }
  .site-header img { width: 88px; height: 76px; }
  .site-header nav { gap: .65rem; font-size: .84rem; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .hero { min-height: 620px; background-position: 58% center; }
  .hero-copy { padding: 3rem 1.35rem; width: 100%; }
  .hero-event { width: 100%; }
  .hero-actions .button { width: 100%; }
  .event-card,.split,.monthly { grid-template-columns: 1fr; }
  .event-register { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
  .cards.three,.actions-grid { grid-template-columns: 1fr; }
  .cards article { min-height: auto; }
  .coast-break { min-height: 300px; background-position: 58% center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
}