/* Chill Math — ChillMath.us
   Palette + type lifted from the approved brochure (A2d "Deck", Mint / Coral):
   mint paper, coral sticker wordmark over a forest offset, Barlow body, Barlow Condensed
   furniture, blackletter + IM Fell for The Chill of Rights. */

@font-face{font-family:'Archivo Black';src:url('fonts/ArchivoBlack-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'UnifrakturCook';src:url('fonts/UnifrakturCook-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url('fonts/IMFellEnglish-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#dfeee5; --paper-deep:#d2e5da; --card:#f8f4ea; --white:#ffffff;
  --coral:#f0684d; --coral-deep:#d9563d; --forest:#1f4d3f; --text:#1f3a33; --mute:#5f7a70;
  --parch-ink:#2b2418;
  --sans:'Barlow','Segoe UI',Arial,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow','Segoe UI',sans-serif;
  --black:'Archivo Black','Arial Black',Impact,sans-serif;
  --frak:'UnifrakturCook','Old English Text MT',serif;
  --fell:'IM Fell English',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  margin:0;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--forest);text-decoration:none;border-bottom:2px solid rgba(31,77,63,.35)}
a:hover{border-bottom-color:var(--forest)}

.wrap{max-width:900px;margin:0 auto;padding:0 24px}

/* ---------- the sticker wordmark (two inks, offset print) ---------- */
.sticker{
  position:relative;display:inline-block;font-family:var(--black);
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;white-space:nowrap;
  transform:rotate(-4deg);transform-origin:left center;border:0;
}
.sticker .shadow{position:absolute;left:.06em;top:.06em;color:var(--forest)}
.sticker .face{position:relative;color:var(--coral)}
.sticker.big{font-size:clamp(64px,13vw,120px);transform:rotate(-5deg);margin:24px 0 0 4px}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:28px;padding:30px 0 20px}
.nav .mark{font-size:24px;transform:rotate(-3deg);flex:none}
.nav-links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);border-bottom:2px solid transparent;padding-bottom:2px;
}
.nav-links a:hover{color:var(--forest);border-bottom-color:var(--forest)}

/* the coral button: sticker square with the forest offset, like the step numbers */
.cta{
  margin-left:0;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.04em;
  color:var(--white);background:var(--coral);padding:11px 18px;border:0;white-space:nowrap;
  box-shadow:4px 4px 0 var(--forest);transition:transform .08s ease,box-shadow .08s ease;
}
.cta:hover{background:var(--coral-deep);border:0}
.cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--forest)}

/* ---------- shared atoms ---------- */
section{padding:56px 0 8px;display:flow-root}
.eyebrow{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.eyebrow span{white-space:nowrap}
.eyebrow .dash{display:inline-block;width:22px;height:2px;background:var(--mute)}
h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,4.4vw,34px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--forest);margin:0 0 18px}
p{margin:0 0 16px;max-width:62ch}
p strong{font-weight:700;color:var(--text)}
.wave{display:block;width:min(480px,100%);height:auto;margin:34px 0 0}
.wave path{fill:none;stroke:var(--forest);stroke-width:4;stroke-linecap:round}
.wave.small{width:min(300px,100%);margin:0 0 22px}

/* ---------- hero (the cover, translated) ---------- */
.hero{padding:40px 0 20px}
.hero .tagline{font-family:var(--sans);font-weight:500;font-size:28px;line-height:1.2;color:var(--forest);margin:28px 0 0}
.promises{list-style:none;margin:30px 0 0;padding:0;font-weight:600;font-size:22px;line-height:1.35}
.chillout{font-style:italic;font-size:19px;color:var(--mute);margin:8px 0 0}
.heroCta{margin:36px 0 0;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.heroCta .cta{margin-left:0}
.tag{
  display:inline-block;transform:rotate(3deg);padding:10px 18px;border:3px solid var(--forest);
  border-radius:10px;background:var(--white);font-family:var(--cond);font-weight:700;font-size:20px;
  letter-spacing:.02em;color:var(--forest);
}

/* ---------- how it works ---------- */
.steps{list-style:none;margin:6px 0 34px;padding:0;display:flex;flex-direction:column;gap:20px}
.steps li{display:flex;align-items:center;gap:18px}
.steps .num{
  flex:none;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--coral);color:var(--white);font-family:var(--black);font-size:26px;
  box-shadow:4px 4px 0 var(--forest);transform:rotate(var(--tilt,0deg));
}
.steps .step{
  font-family:var(--cond);font-weight:700;font-size:clamp(26px,4.4vw,34px);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;color:var(--forest);
}

/* ---------- booking band (the bordered sticker box) ---------- */
.band{
  margin:34px 0 22px;border:3px solid var(--forest);border-radius:10px;background:var(--white);
  padding:22px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.band .band-title{font-weight:600;font-size:18px;line-height:1.4;color:var(--forest);max-width:52ch}
.band .cta{margin-left:auto}
@media(max-width:700px){.band .cta{margin-left:0}}

/* ---------- the chill of rights (parchment panel) ---------- */
.parchment{
  background:var(--card);border:3px solid var(--forest);border-radius:10px;padding:34px 34px 20px;
}
.blackletter{
  font-family:var(--frak);font-weight:700;font-size:clamp(38px,7vw,56px);line-height:1.05;
  text-transform:none;letter-spacing:0;text-align:center;color:var(--parch-ink);margin:0;
}
.redrule{width:140px;height:3px;background:var(--coral);margin:14px auto 28px}
.articles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px}
.articles li{display:flex;gap:14px;align-items:baseline}
.artnum{font-family:var(--frak);font-weight:700;font-size:32px;line-height:1;color:var(--coral);flex:none;width:36px}
.articles h3{font-family:var(--fell);font-weight:400;font-size:25px;line-height:1.25;color:var(--parch-ink);margin:0 0 8px}
.articles p{font-family:var(--fell);font-size:19px;line-height:1.5;color:var(--parch-ink);max-width:58ch}

/* ---------- rates cards ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.card{border:3px solid var(--forest);border-radius:10px;background:var(--white);padding:22px 24px}
.card h3{
  font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--forest);margin:0 0 12px;
}
.card p{font-size:17px;margin-bottom:10px}
.placeholder{color:var(--mute);font-style:italic}

/* ---------- footer ---------- */
footer{margin-top:60px;padding:30px 0 48px;background:var(--paper-deep)}
footer .frow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
footer .fmark{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
footer .flinks{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
footer .flinks a{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:0}
footer .flinks a:hover{color:var(--forest)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .duo{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav{flex-wrap:wrap;gap:14px;justify-content:center;text-align:center}
  .nav .mark{font-size:22px}
  .nav-links{margin-left:0;justify-content:center;gap:16px}
  .cta{margin-left:0}
  .hero{padding:24px 0 16px}
  .sticker.big{margin-left:2px}
}