:root {
  --navy: #0e3b4a;
  --navy-2: #12324a;
  --cream: #fff8ec;
  --sand: #f7e4c4;
  --sand-2: #ecd2a5;
  --sun: #ffc93c;
  --coral: #ff6f59;
  --pink: #ff6f91;
  --sea: #22b5c2;
  --sea-2: #129ab0;
  --sea-3: #0b7891;
  --deep: #0a5c73;
  --display: "Bowlby One", "Arial Black", sans-serif;
  --script: "Yellowtail", cursive;
  --hand: "Caveat", cursive;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--navy); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--sun); color: var(--navy); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.script { margin: 0; font-family: var(--script); font-size: clamp(34px, 4.4vw, 60px); line-height: 1; color: var(--sun); transform: rotate(-5deg); }
.script.dark { color: var(--coral); }
.h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.01em; }

/* ── Nav ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); transition: background .3s, box-shadow .3s; }
.nav.is-scrolled { background: rgba(255, 248, 236, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(14, 59, 74, .1); }
.logo { font-family: var(--script); font-size: 34px; line-height: 1; color: var(--navy); text-shadow: 0 0 12px var(--cream), 0 0 4px var(--cream); }
.nav-links { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 248, 236, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav.is-scrolled .nav-links { background: transparent; backdrop-filter: none; }
.nav-links a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .2s, transform .3s var(--ease); }
.nav-links a:hover { background: rgba(14, 59, 74, .08); }
.nav-links .pill { background: var(--coral); color: var(--cream); margin-left: 4px; }
.nav-links .pill:hover { background: var(--coral); transform: rotate(-4deg) scale(1.04); }

/* ── Morning ── */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: 110px var(--gutter) 22vh; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #9fdaf5 0%, #c9e8f0 28%, #ffe6cc 58%, #ffcfa6 82%);
}
.sun {
  position: absolute; z-index: -2; top: 14%; left: 50%; width: clamp(200px, 30vw, 440px); aspect-ratio: 1; margin-left: calc(clamp(200px, 30vw, 440px) / -2);
  border-radius: 50%; background: radial-gradient(circle, #fff1b0 0%, #ffd35c 45%, #ffad4d 100%);
  box-shadow: 0 0 120px 50px rgba(255, 201, 60, .45), 0 0 300px 120px rgba(255, 170, 90, .25);
  will-change: transform;
}
.birds { position: absolute; z-index: -1; top: 16%; left: 8%; width: clamp(140px, 18vw, 260px); overflow: visible; animation: drift 26s linear infinite; }
.bird { fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: flap 1.2s ease-in-out infinite; }
.bird.b2 { animation-delay: -.4s; } .bird.b3 { animation-delay: -.8s; }
@keyframes flap { 50% { transform: scaleY(.45); } }
@keyframes drift { 0% { translate: -10vw 0; } 50% { translate: 30vw -20px; } 100% { translate: -10vw 0; } }

.palm { position: absolute; z-index: 1; top: -2%; width: clamp(240px, 36vw, 560px); aspect-ratio: 1; pointer-events: none; }
.palm-l { left: -3%; }
.palm-r { right: -3%; transform: scaleX(-1); }
.palm svg { width: 100%; height: 100%; overflow: visible; }
.frond { transform-origin: 0 0; animation: sway var(--dur, 6s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }

.hero-copy { position: relative; z-index: 2; }
.greet { margin: 0 0 -.2em; font-family: var(--script); font-size: clamp(38px, 5.6vw, 84px); line-height: 1; color: var(--coral); transform: rotate(-6deg) translateX(-18%); text-shadow: 2px 2px 0 var(--cream); }
.title { margin: 0; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: clamp(64px, 19vw, 300px); line-height: .95; letter-spacing: .01em; }
.title .l { position: relative; display: inline-block; animation: float 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.28s); }
.title .l::before {
  content: attr(data-ch); position: absolute; inset: 0; z-index: 0; color: var(--navy);
  -webkit-text-stroke: .05em var(--navy);
  text-shadow: .012em .012em 0 var(--navy), .024em .024em 0 var(--navy), .036em .036em 0 var(--navy), .048em .048em 0 var(--navy), .06em .06em 0 var(--navy), .072em .072em 0 var(--navy), .1em .12em .04em rgba(14, 59, 74, .25);
}
.title .f {
  position: relative; z-index: 1; color: transparent;
  background: linear-gradient(180deg, #ffe066 12%, #ff9a52 50%, #ff5f86 88%);
  -webkit-background-clip: text; background-clip: text;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-.06em) rotate(1.5deg); } }
.hero-sub { margin: 26px auto 0; max-width: 32ch; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; }
.paddle { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 14px 26px; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; box-shadow: 0 6px 0 #082531; transition: transform .2s, box-shadow .2s; }
.paddle:hover { transform: translateY(3px); box-shadow: 0 3px 0 #082531; }
.paddle span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 20vh; z-index: 0; background: var(--sea); }
.sea::before, .sea::after, .sea > i { content: ""; position: absolute; left: 0; right: 0; height: 60px; background-repeat: repeat-x; background-size: 400px 60px; }
.sea::before { bottom: calc(100% - 22px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60'%3E%3Cpath d='M0 30 Q100 6 200 30 T400 30 V60 H0Z' fill='%237fdcd8'/%3E%3C/svg%3E"); animation: roll 14s linear infinite; }
.sea::after { bottom: calc(100% - 34px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60'%3E%3Cpath d='M0 30 Q100 10 200 30 T400 30 V60 H0Z' fill='%2340c6cc'/%3E%3C/svg%3E"); animation: roll 9s linear infinite reverse; }
.sea > i { bottom: calc(100% - 46px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60'%3E%3Cpath d='M0 34 Q100 18 200 34 T400 34 V60 H0Z' fill='%2322b5c2'/%3E%3Cpath d='M0 34 Q100 18 200 34 T400 34' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='3'/%3E%3C/svg%3E"); animation: roll 6s linear infinite; }
@keyframes roll { to { background-position-x: 400px; } }

/* ── The swell ── */
.swell { position: relative; color: var(--cream); padding: clamp(40px, 6vw, 80px) var(--gutter) 160px; background: linear-gradient(180deg, var(--sea) 0%, var(--sea-2) 25%, var(--sea-3) 60%, var(--deep) 100%); overflow: hidden; isolation: isolate; }
.caustics { position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background-image: radial-gradient(ellipse 60px 22px at 20% 30%, #fff 0, transparent 70%), radial-gradient(ellipse 80px 26px at 70% 60%, #fff 0, transparent 70%), radial-gradient(ellipse 50px 18px at 45% 85%, #fff 0, transparent 70%);
  background-size: 360px 280px; animation: shimmer 18s linear infinite; }
@keyframes shimmer { to { background-position: 360px 280px; } }
.swell-head { text-align: center; max-width: 900px; margin: 0 auto; }
.swell-head .h2 { text-shadow: 3px 3px 0 var(--navy); }
.swell-sub { margin: 14px 0 0; font-family: var(--hand); font-size: 26px; opacity: .85; }

.route { position: relative; max-width: 1200px; margin: 40px auto 0; padding: 60px 0 40px; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route-line { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 3; stroke-dasharray: 1 14; stroke-linecap: round; }
.route-wake { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.surfer { position: absolute; top: 0; left: 0; z-index: 5; width: 110px; height: 37px; margin: -18px 0 0 -55px; will-change: transform; filter: drop-shadow(0 10px 8px rgba(0, 30, 40, .35)); }
.surfer svg { width: 100%; height: 100%; animation: wobble 1.6s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(4deg) translateY(-2px); } }

.stops { position: relative; list-style: none; margin: 0; padding: 0; }
.stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: clamp(460px, 52vw, 600px); }
.stop[data-side="left"] > .card-wrap { grid-column: 1; }
.stop[data-side="right"] > .card-wrap { grid-column: 2; }
.card-wrap { display: flex; justify-content: center; padding: 20px; }

.buoy { position: absolute; top: 50%; left: 25%; z-index: 4; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; }
.stop[data-side="left"] .buoy { left: 75%; }
.stop[data-side="left"] .buoy b { right: auto; left: calc(100% + 10px); }
.buoy i { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--navy); background: repeating-linear-gradient(90deg, var(--coral) 0 10px, var(--cream) 10px 20px); animation: bob 2.6s ease-in-out infinite; transition: transform .5s var(--ease); }
.buoy i::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.stop.reached .buoy i { transform: scale(1.12); }
.stop.reached .buoy i::after { animation: ripple 1.4s ease-out 2; }
.buoy b { position: absolute; top: 50%; right: calc(100% + 10px); transform: translateY(-50%); padding: 4px 12px; border-radius: 999px; background: var(--navy); color: var(--cream); font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
@keyframes bob { 50% { translate: 0 -5px; } }
@keyframes ripple { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }

/* Postcard: picture side wears the app's brand, writing side is mine. */
.postcard {
  --tilt: -3deg;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(620px, 100%); aspect-ratio: 3 / 2;
  background: var(--cream); color: var(--navy); border-radius: 8px; padding: 14px;
  box-shadow: 0 30px 60px -24px rgba(0, 25, 35, .6), 0 2px 0 rgba(0, 0, 0, .05);
  transform: translateY(60px) rotate(calc(var(--tilt) * 3)); opacity: 0;
  transition: transform 1s var(--ease), opacity .8s var(--ease);
}
.stop[data-side="left"] .postcard { --tilt: 2.5deg; }
.stop.reached .postcard { transform: rotate(var(--tilt)); opacity: 1; }
.postcard:hover { transform: rotate(0deg) translateY(-6px) !important; }
.pc-front { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--bg); color: var(--fg); text-align: center; padding: 18px; }
.pc-front img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-front .pc-greet { position: absolute; top: 12px; left: 14px; font-family: var(--script); font-size: 22px; transform: rotate(-6deg); opacity: .9; }
.pc-front .pc-name { font-family: var(--app-font, var(--display)); font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1; }
.pc-front .pc-word { max-width: 80%; max-height: 40%; }
.pc-front .pc-logo { width: 42%; aspect-ratio: 1; border-radius: 24%; object-fit: cover; }
.pc-back { position: relative; display: flex; flex-direction: column; padding: 8px 6px 4px 18px; margin-left: 14px; border-left: 1.5px solid rgba(14, 59, 74, .25); text-align: left; min-width: 0; }
.stamp { position: absolute; top: 4px; right: 4px; width: 62px; height: 72px; padding: 6px; transform: rotate(4deg);
  background: radial-gradient(circle, transparent 2.4px, #fff 2.9px) -4px -4px / 8px 8px; filter: drop-shadow(0 1px 1.5px rgba(14, 59, 74, .35)); }
.stamp > * { width: 100%; height: 100%; display: grid; place-items: center; background: var(--bg); color: var(--fg); font-family: var(--display); font-size: 18px; object-fit: cover; }
.postmark { position: absolute; top: 34px; right: 46px; width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255, 111, 89, .75); color: rgba(255, 111, 89, .9); display: grid; place-items: center; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.25; transform: rotate(-14deg); }
.postmark::after { content: ""; position: absolute; left: -46px; right: 60px; top: 50%; height: 14px; margin-top: -7px; background: repeating-linear-gradient(180deg, rgba(255, 111, 89, .7) 0 2px, transparent 2px 6px); border-radius: 2px; }
.pc-note { margin: 70px 0 0; font-family: var(--hand); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; overflow: hidden; }
.pc-note .sig { display: block; margin-top: 4px; }
.pc-to { margin-top: auto; padding-top: 10px; border-top: 1.5px solid rgba(14, 59, 74, .2); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-to span { font-family: var(--hand); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cta { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--coral); color: var(--cream); font-weight: 700; font-size: 14px; transition: transform .2s; }
.pc-cta:hover { transform: rotate(-4deg) scale(1.05); }

/* Message in a bottle */
.bottle { display: flex; align-items: center; gap: 18px; opacity: 0; transform: translateY(40px); transition: transform 1s var(--ease), opacity .8s var(--ease); }
.stop.reached .bottle { opacity: 1; transform: none; }
.bottle svg { width: clamp(150px, 16vw, 210px); flex: none; animation: drift-bottle 4s ease-in-out infinite; overflow: visible; }
@keyframes drift-bottle { 0%, 100% { transform: rotate(-18deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-8px); } }
.note { position: relative; max-width: 260px; padding: 18px 20px 20px; background: #fdf1d8; color: var(--navy); transform: rotate(2deg); box-shadow: 0 18px 30px -16px rgba(0, 25, 35, .6);
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 24% 0, 36% 3%, 48% 0, 60% 2%, 72% 0, 84% 3%, 94% 0, 100% 2%, 99% 98%, 90% 100%, 78% 97%, 64% 100%, 50% 98%, 36% 100%, 22% 97%, 10% 100%, 1% 98%); }
.note b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.note p { margin: 8px 0 6px; font-family: var(--hand); font-size: 22px; line-height: 1.1; }
.note small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }

.landfall { position: relative; z-index: 2; margin: 30px 0 0; text-align: center; font-family: var(--hand); font-size: clamp(26px, 3vw, 36px); }
.foam-edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; fill: var(--sand); filter: drop-shadow(0 -6px 0 rgba(255, 255, 255, .85)); }

/* ── Shore ── */
.sand { position: relative; padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(90px, 12vw, 150px); }
.about { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.polaroid { position: relative; margin: 0; padding: 16px 16px 60px; background: #fff; transform: rotate(-5deg); box-shadow: 0 30px 50px -24px rgba(80, 50, 10, .5); transition: transform .6s var(--ease); }
.polaroid:hover { transform: rotate(-1deg) scale(1.02); }
.polaroid::before { content: ""; position: absolute; top: -16px; left: 50%; width: 120px; height: 34px; margin-left: -60px; background: rgba(255, 220, 120, .7); transform: rotate(3deg); }
.photo { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #9fdaf5 0%, #ffe6cc 55%, #22b5c2 56%, #129ab0 100%); font-family: var(--display); font-size: clamp(80px, 12vw, 150px); color: var(--cream); text-shadow: 4px 4px 0 var(--navy); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--hand); font-size: 24px; }
.about-copy .h2 { margin-top: 18px; }
.about-text { margin: 22px 0 0; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; max-width: 40ch; }
.about-text em { font-style: normal; background: linear-gradient(transparent 58%, rgba(255, 201, 60, .7) 58%); }
.tickets { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tickets li { position: relative; display: flex; flex-direction: column; padding: 12px 22px 12px 26px; background: var(--cream); border: 2px solid var(--navy); border-radius: 12px; }
.tickets li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 12px; height: 22px; margin-top: -11px; background: var(--sand); border: 2px solid var(--navy); border-left: 0; border-radius: 0 12px 12px 0; }
.tickets li > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.tickets b { font-size: 20px; }

/* Shared section heading */
.sec-head { text-align: center; max-width: 900px; margin: 0 auto; }
.sec-head .h2 { margin-top: 14px; }
.sec-sub { margin: 14px 0 0; font-family: var(--hand); font-size: 26px; }

/* ── Low tide: write in the sand ── */
.sand, .tide, .tiki { background-color: var(--sand); background-image: radial-gradient(rgba(180, 140, 80, .22) 1px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px); background-size: 18px 18px, 26px 26px; background-position: 0 0, 9px 13px; }
.tide { position: relative; padding: 0 var(--gutter) clamp(70px, 9vw, 120px); }
.wet { position: relative; max-width: 1100px; height: clamp(240px, 30vw, 360px); margin: 36px auto 0; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(rgba(90, 60, 25, .16) 1px, transparent 1.5px) 0 0 / 11px 11px, linear-gradient(180deg, #cfa774 0%, #d9b685 60%, #e2c294 100%);
  box-shadow: inset 0 10px 24px rgba(90, 60, 25, .28), 0 0 0 6px rgba(255, 255, 255, .55); }
.wet canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateY(-102%);
  background: linear-gradient(180deg, rgba(18, 154, 176, .9) 0%, rgba(34, 181, 194, .8) 55%, rgba(127, 220, 216, .75) 88%, rgba(255, 255, 255, .95) 100%); }
.wash::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; margin-top: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='26'%3E%3Cpath d='M0 0 H200 V8 Q175 26 150 10 T100 10 T50 10 T0 8Z' fill='%23ffffff' fill-opacity='.95'/%3E%3C/svg%3E") repeat-x 0 0 / 200px 26px; }
.wave-btn { position: absolute; right: 14px; bottom: 14px; z-index: 3; padding: 10px 18px; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; font-size: 15px; box-shadow: 0 4px 0 #082531; transition: transform .2s, box-shadow .2s; }
.wave-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #082531; }

/* ── Tiki bar ── */
.tiki { position: relative; padding: 0 var(--gutter) clamp(80px, 10vw, 130px); }
.thatch { height: 64px; margin: 0 calc(var(--gutter) * -1) clamp(40px, 6vw, 70px); filter: drop-shadow(0 8px 0 rgba(120, 80, 30, .18));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cpath d='M0 0 H120 V30 L110 58 L100 32 L90 62 L80 30 L70 56 L60 34 L50 64 L40 30 L30 58 L20 32 L10 60 L0 30Z' fill='%23d6a24f'/%3E%3Cpath d='M0 0 H120 V20 L112 40 L104 22 L96 44 L88 20 L80 38 L72 22 L64 46 L56 20 L48 40 L40 22 L32 44 L24 20 L16 40 L8 22 L0 40Z' fill='%23e8bf6a'/%3E%3Crect width='120' height='12' fill='%23a8742f'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 64px; }
.tiki-grid { max-width: 1160px; margin: 44px auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.chalkboard { position: relative; padding: 30px clamp(22px, 3vw, 40px) 34px; border-radius: 10px; color: #f4f1e8; transform: rotate(-1.2deg);
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%), #24302b;
  border: 14px solid #8a5a2e; box-shadow: inset 0 0 0 2px #6e4522, 0 30px 50px -24px rgba(80, 50, 10, .6); font-family: var(--hand); }
.chalkboard h3 { margin: 0; font-family: var(--script); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--sun); }
.chalkboard h3 + * { margin-top: 10px; }
.chalkboard * + h3 { margin-top: 26px; }
.specials { margin-bottom: 0; }
.specials div, .toolkit li { display: flex; align-items: baseline; gap: 8px; font-size: 24px; line-height: 1.35; }
.specials .dots, .toolkit .dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(244, 241, 232, .45); transform: translateY(-6px); }
.specials dd { margin: 0; font-weight: 700; color: #ffd0de; }
.toolkit { list-style: none; margin: 0; padding: 0; }
.toolkit b { font-weight: 700; }
.toolkit small { font-size: 20px; opacity: .75; white-space: nowrap; }

.tipjar { text-align: center; }
.jar { width: 110px; animation: bob 3s ease-in-out infinite; overflow: visible; }
.tj-title { margin: 10px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; }
.tj-text { margin: 10px auto 0; max-width: 36ch; font-size: 18px; }
.tags { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
.tag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 14px 16px; background: var(--cream); border: 2px solid var(--navy); border-radius: 14px 14px 18px 18px; transform: rotate(var(--r, -2deg)); transform-origin: 50% -22px; transition: transform .5s var(--ease); }
.tag:nth-child(2n) { --r: 2deg; }
.tag:hover { transform: rotate(0deg) translateY(-4px); }
.tag::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 30px; background: var(--navy); }
.tag::after { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--sand); border: 2px solid var(--navy); }
.tag svg { width: 54px; height: 54px; }
.tag b { font-size: 18px; }
.tag small { font-size: 14px; opacity: .75; }
.tag .price { font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--coral); }
.tag a, .tag .soon { margin-top: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.tag a { background: var(--coral); color: var(--cream); transition: transform .2s; }
.tag a:hover { transform: rotate(-4deg) scale(1.05); }
.tag .soon { background: rgba(14, 59, 74, .1); color: rgba(14, 59, 74, .7); }

/* ── Boardwalk arcade ── */
.boardwalk { position: relative; padding: clamp(10px, 2vw, 30px) var(--gutter) 0; background: linear-gradient(180deg, var(--sand) 0%, #ffe6c4 55%, #ffd9ae 100%); }
.cabinet { position: relative; z-index: 1; width: min(480px, 100%); margin: 36px auto 0; padding: 18px 18px 0; border-radius: 28px 28px 8px 8px; background: linear-gradient(180deg, #1c4a66, var(--navy-2)); border: 4px solid var(--navy); box-shadow: inset 0 0 0 4px #2a6283, 0 30px 50px -20px rgba(14, 59, 74, .55); }
.marquee { margin: 0 0 14px; padding: 10px; border-radius: 14px; background: #0b2233; text-align: center; font-family: var(--script); font-size: clamp(34px, 5vw, 48px); line-height: 1; color: #ffd0de; text-shadow: 0 0 6px #ff6f91, 0 0 18px #ff6f91, 0 0 34px #ff3d7a; animation: flicker 5s infinite; }
.screen { position: relative; height: clamp(440px, 72svh, 640px); border-radius: 14px; overflow: hidden; border: 4px solid #0b2233; background: linear-gradient(180deg, #9fdaf5 0%, #ffe6cc 86%, #f7e4c4 86%); }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }
.hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; font-family: var(--display); font-size: 14px; letter-spacing: .05em; color: var(--navy); text-transform: uppercase; }
.hud b { font-weight: 400; font-size: 22px; color: var(--coral); }
.game-msg { position: absolute; left: 50%; top: 22%; margin: 0; transform: translateX(-50%) rotate(-3deg); padding: 8px 16px; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; font-size: 15px; white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.game-msg[hidden] { display: block; opacity: 0; }
.cab-base { display: flex; justify-content: center; gap: 22px; padding: 16px 0 18px; }
.cab-base i { width: 26px; height: 26px; border-radius: 50%; background: var(--coral); border: 3px solid #0b2233; box-shadow: 0 4px 0 #0b2233; }
.cab-base i + i { background: var(--sun); }
.planks { position: relative; height: 70px; margin: 0 calc(var(--gutter) * -1); background: repeating-linear-gradient(90deg, #b9824a 0 58px, #8a5a2e 58px 62px); border-top: 6px solid #6e4522; box-shadow: inset 0 10px 0 rgba(255, 220, 160, .25); }

/* ── Beach secrets ── */
.hero-copy { pointer-events: none; } /* let taps fall through to the sun */
.hero-copy .title .l, .hero-copy a { pointer-events: auto; }
.sun-hint { position: absolute; z-index: 3; top: calc(14% - 14px); left: calc(50% + min(13vw, 190px)); padding: 6px 14px; border-radius: 999px; background: var(--cream); color: var(--coral); font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; transform: rotate(8deg); box-shadow: 0 4px 0 rgba(14, 59, 74, .2); animation: nudge 1.6s ease-in-out infinite; transition: opacity .4s; }
.sun-hint::before { content: ""; position: absolute; left: -10px; top: 50%; border: 8px solid transparent; border-right-color: var(--cream); border-left: 0; margin-top: -8px; }
.hero.dusk .sun-hint { opacity: 0; pointer-events: none; }
.hero .sea { cursor: pointer; }
.sun { cursor: pointer; transition: translate 1.8s var(--ease); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: 0; transition: opacity 1.8s; background: linear-gradient(180deg, #7d3b5c 0%, #e8566b 35%, #ff7a6a 60%, #ffab7c 85%); }
.hero.dusk::after { opacity: .9; }
.hero.dusk .sun { translate: 0 62vh; }
.title { cursor: pointer; }
.title .l.boing { animation: boing .7s var(--ease); }
@keyframes boing { 0% { transform: translateY(0); } 35% { transform: translateY(-.35em) rotate(-10deg) scale(1.08); } 70% { transform: translateY(.04em) scaleY(.9); } 100% { transform: translateY(0); } }
.surfer { cursor: pointer; }
.surfer::before { content: ""; position: absolute; inset: -26px -14px; } /* bigger tap target */
.surfer.flip svg { animation: kickflip .8s var(--ease); }
@keyframes kickflip { 50% { transform: translateY(-40px) rotate(180deg); } 100% { transform: rotate(360deg); } }
.gull, .shark { position: fixed; z-index: 90; top: 0; left: 0; pointer-events: none; }
.gull { width: 70px; }
.gull .grab { opacity: 0; }
.gull.has-it .grab { opacity: 1; }
.no-cursor, .no-cursor * { cursor: none !important; }
.shark { top: auto; bottom: 18px; width: 120px; animation: swim 7s linear forwards; }

.secrets-btn { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; font-size: 15px; box-shadow: 0 4px 0 #082531, 0 10px 24px -8px rgba(14, 59, 74, .5); transition: transform .2s; animation: bob 2.6s ease-in-out infinite; }
.secrets-btn:hover { transform: rotate(-4deg) scale(1.05); }
.secrets { position: fixed; left: 16px; bottom: 72px; z-index: 61; width: min(380px, calc(100vw - 32px)); max-height: calc(100svh - 110px); overflow: auto; padding: 20px 20px 14px; border-radius: 18px; background: var(--cream); color: var(--navy); border: 2px solid var(--navy); box-shadow: 0 24px 50px -16px rgba(14, 59, 74, .55); }
.secrets[hidden] { display: none; }
.secrets .script { font-size: 30px; }
.secrets h2 { margin: 8px 0 10px; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; }
.secrets ul { list-style: none; margin: 0; padding: 0; }
.secrets li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1.5px dashed rgba(14, 59, 74, .2); }
.secrets .s-icon { flex: none; font-size: 26px; }
.secrets li div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.secrets li b { font-size: 16px; }
.secrets li small { font-size: 14px; opacity: .75; line-height: 1.3; }
.secrets li button { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--coral); color: var(--cream); font-weight: 700; font-size: 13px; transition: transform .2s; }
.secrets li button:hover { transform: rotate(-4deg) scale(1.05); }
@keyframes swim { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 40px)); } }
.shark svg { animation: bob 1.4s ease-in-out infinite; }

/* ── Sunset ── */
.sunset { position: relative; overflow: hidden; color: var(--cream); background: linear-gradient(180deg, #ffd9ae 0%, #ffd7a8 12%, #ffab7c 34%, #ff7a6a 56%, #e8566b 72%, #7d3b5c 88%, #24324f 100%); }
.contact { position: relative; z-index: 2; text-align: center; padding: clamp(80px, 11vw, 150px) var(--gutter) 40px; }
.contact .script { color: var(--navy); }
.contact-title { margin: 10px 0 36px; font-family: var(--display); font-weight: 400; font-size: clamp(56px, 11vw, 170px); line-height: .95; color: var(--cream); text-shadow: .03em .03em 0 var(--navy), .06em .06em 0 var(--navy); }
.email { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.email > span { font-size: clamp(26px, 4.4vw, 58px); font-weight: 700; letter-spacing: -0.02em; text-decoration: underline wavy var(--sun); text-decoration-thickness: 3px; text-underline-offset: 10px; transition: transform .3s var(--ease); }
.email:hover > span { transform: rotate(-2deg) scale(1.03); }
.email small { font-family: var(--hand); font-size: 22px; opacity: .9; }
.socials { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.socials a { padding: 10px 20px; border-radius: 999px; border: 2px solid var(--cream); font-weight: 700; transition: background .2s, color .2s; }
.socials a:hover { background: var(--cream); color: #c94a5e; }
.horizon { position: relative; z-index: 1; height: clamp(110px, 14vw, 180px); clip-path: inset(-400px -100vw 0 -100vw); }
.set-sun { position: absolute; left: 50%; bottom: 0; width: clamp(220px, 28vw, 380px); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%; background: radial-gradient(circle, #fff1b0 0%, #ffc93c 40%, #ff8a4d 100%); box-shadow: 0 0 80px 30px rgba(255, 150, 80, .5); }
.night { position: relative; z-index: 1; background: var(--navy-2); padding: 30px var(--gutter) 40px; text-align: center; }
.night::before { content: ""; position: absolute; left: 50%; top: 0; width: clamp(220px, 28vw, 380px); height: 90px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, rgba(255, 201, 60, .55) 0 3px, transparent 3px 12px); -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); animation: glint 3s ease-in-out infinite; }
@keyframes glint { 50% { opacity: .55; } }
.neon { position: relative; margin: 50px 0 0; font-family: var(--script); font-size: clamp(56px, 8vw, 110px); line-height: 1; color: #ffd0de; text-shadow: 0 0 6px #ff6f91, 0 0 18px #ff6f91, 0 0 40px #ff3d7a; animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
.foot { position: relative; margin: 14px 0 0; font-size: 14px; opacity: .7; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, calc(100% + 40px)); opacity: 0; padding: 12px 22px; border-radius: 999px; background: var(--navy); color: var(--cream); font-weight: 700; transition: transform .5s var(--ease), opacity .3s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .stop { grid-template-columns: 1fr; min-height: 0; padding: 40px 0; }
  .stop[data-side] > .card-wrap { grid-column: 1; padding: 0 0 0 58px; justify-content: flex-start; }
  .stop[data-side] .buoy { left: 22px; top: 40px; transform: translate(-50%, 0); }
  .buoy i { width: 36px; height: 36px; }
  .stop[data-side] .buoy b { top: 46px; left: 50%; right: auto; transform: translateX(-50%); font-size: 10px; padding: 3px 8px; }
  .postcard { grid-template-columns: 1fr; aspect-ratio: auto; padding: 10px; }
  .pc-front { aspect-ratio: 16 / 10; }
  .pc-back { margin: 12px 0 0; padding: 4px 4px 2px; border-left: 0; min-height: 230px; }
  .stamp { top: 6px; right: 4px; width: 52px; height: 60px; }
  .postmark { top: 18px; right: 40px; width: 64px; height: 64px; font-size: 8.5px; }
  .pc-note { margin-top: 74px; }
  .bottle { flex-direction: column; align-items: flex-start; }
  .bottle svg { width: 140px; }
  .about { grid-template-columns: 1fr; }
  .polaroid { max-width: 300px; margin: 0 auto; }
  .tiki-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) and (min-width: 641px) {
  .nav-links a { padding: 8px 10px; }
}
@media (max-width: 640px) {
  .nav-links a:not(.pill) { display: none; }
  .palm { width: 58vw; top: -1%; }
  .palm-l { left: -10%; } .palm-r { right: -10%; }
  .greet { transform: rotate(-6deg) translateX(-10%); }
  .sea { height: 12vh; }
  .hero { padding-bottom: 16vh; }
  .title { font-size: 18.5vw; }
  .tags { gap: 30px 12px; }
  .tag { padding: 24px 8px 14px; }
  .specials div, .toolkit li { font-size: 21px; }
  .toolkit li { flex-direction: column; align-items: flex-start; gap: 0; }
  .toolkit li + li { margin-top: 6px; }
  .toolkit .dots { display: none; }
  .toolkit small { font-size: 18px; line-height: 1.1; }
  .wave-btn { font-size: 14px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .postcard, .bottle { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}