/* Layout: a printed beach poster you scroll through — full-bleed illustration, paper bands, stamped labels */
:root{
  --paper:#F6EADE; --paper-2:#EFDDC9; --ink:#141414; --sun:#F89820; --sea:#28B6C2; --sea-deep:#137C86; --ball:#D7191B;
  --display:'Rubik','Heebo',system-ui,sans-serif; --body:'Heebo','Rubik',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px); --max:1180px;
  color-scheme:light;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;direction:rtl;margin:0}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:1.05;margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:10px}
.nav .brand img{height:52px;width:auto}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:700;font-size:16px}
.nav ul a{text-decoration:none}.nav ul a:hover{color:var(--sea-deep)}
.nav .cta{margin-inline-start:auto}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;font-size:17px;text-decoration:none;
  padding:12px 22px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn.sun{background:var(--sun)}.btn.sea{background:var(--sea)}
.btn.small{padding:8px 16px;font-size:15px}

/* hero */
.hero{position:relative;border-bottom:2px solid var(--ink)}
.hero .art{width:100%;aspect-ratio:2400/1013;object-fit:cover;object-position:50% 40%}
.hero .panel{position:relative}
.hero .panel .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding-block:28px 48px}
.hero .sticker{width:clamp(220px,30vw,380px);margin-top:calc(-1 * clamp(90px,12vw,170px));transform:rotate(-4deg);filter:drop-shadow(0 10px 18px rgba(20,20,20,.28))}
.hero h1{font-size:clamp(40px,6.4vw,84px)}
.hero p{font-size:clamp(17px,1.6vw,20px);max-width:34ch;margin:14px 0 22px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px}

/* ticker */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:20px;padding-block:10px;border-bottom:2px solid var(--ink)}
.ticker span{display:inline-block;padding-inline:28px}
.ticker i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--ball);vertical-align:middle;margin-inline-end:28px}
.ticker .track{display:inline-block;animation:tick 38s linear infinite}
@keyframes tick{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}

/* sections */
section{padding-block:clamp(56px,8vw,96px)}
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:4px 12px;border-radius:4px;transform:rotate(-1.5deg);margin-bottom:14px}
h2{font-size:clamp(34px,4.6vw,58px)}
.lead{font-size:19px;max-width:52ch;margin:12px 0 0}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.step{background:var(--paper-2);border:2px solid var(--ink);border-radius:16px;padding:22px 22px 26px;position:relative}
.step b{position:absolute;top:-18px;inset-inline-start:18px;width:42px;height:42px;border-radius:50%;background:var(--ball);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:20px;border:2px solid var(--ink)}
.step img{width:96px;height:96px;margin:10px 0 6px}
.step h3{font-size:24px;margin-bottom:6px}
.step p{margin:0}

/* featured rally */
.feature{background:var(--sea);border-block:2px solid var(--ink)}
.feature .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.feature figure{margin:0;border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:var(--paper)}
.feature figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature .eyebrow{background:var(--paper);color:var(--ink)}
.feature h2{color:var(--ink)}
.stats{display:flex;gap:28px;margin:22px 0 26px;flex-wrap:wrap}
.stats div{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.stats small{display:block;font-family:var(--body);font-weight:500;font-size:15px;margin-top:6px}
.note{font-size:13px;opacity:.75}

/* beaches */
.beaches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.beach{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:18px;display:grid;gap:6px;align-content:start}
.beach img{width:72px;height:72px}
.beach h3{font-size:22px}
.beach .city{font-size:15px;opacity:.8}
.tag{justify-self:start;font-family:var(--display);font-weight:700;font-size:13px;border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px;margin-top:6px}
.tag.sunset{background:var(--sun)}.tag.morning{background:#FBE3A6}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:12px;margin-top:36px}
.gallery figure{margin:0;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper-2)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .w2{grid-column:span 3;grid-row:span 2}.gallery .t{grid-column:span 1;grid-row:span 2}.gallery .w{grid-column:span 2;grid-row:span 1}

/* join */
.join{background:var(--sun);border-top:2px solid var(--ink);text-align:center}
.join h2{font-size:clamp(40px,6vw,76px)}
.join p{font-size:19px;max-width:44ch;margin:14px auto 26px}
.join .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.join .hand{width:110px;margin:0 auto 10px;transform:rotate(8deg)}

footer{background:var(--ink);color:var(--paper);padding-block:36px}
footer .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
footer img{height:70px;width:auto}
footer small{opacity:.7}

@media (max-width:900px){
  .nav ul{display:none}
  .hero .art{aspect-ratio:4/3;object-position:44% 50%}
  .hero .panel .wrap{grid-template-columns:1fr;justify-items:start}
  .hero .sticker{margin-inline:auto}
  .steps{grid-template-columns:1fr;gap:32px}
  .feature .wrap{grid-template-columns:1fr}
  .beaches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}
  .gallery .hide-m{display:none}
  .gallery .w2{grid-column:span 2;grid-row:span 2}.gallery .t{grid-column:span 1;grid-row:span 2}.gallery .w{grid-column:span 2}
}
@media (min-width:901px){.hero .sticker{margin-top:0;align-self:start}}