/* ===== Fonts (Public Sans) ===== */
@font-face { font-family:"Public Sans"; src:url("assets/fonts/PublicSans-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("assets/fonts/PublicSans-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("assets/fonts/PublicSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("assets/fonts/PublicSans-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("assets/fonts/PublicSans-Black.ttf") format("truetype"); font-weight:900; font-display:swap; }

/* ===== Tokens — sun-faded surfboard palette (brand/palette.md) ===== */
:root {
  --sand:    #F2E7D6;   /* background / paper */
  --ink:     #2C2622;   /* text */
  --coral:   #E07A56;   /* primary / buttons (warm) */
  --apricot: #E69B52;   /* warm accent */
  --teal:    #6F9DAE;   /* cool accent */
  --sage:    #9BC0A0;   /* soft accent */
  --white:   #fff;
  --muted:   #8C7E6A;   /* secondary text (warm taupe) */

  /* legacy aliases kept so existing rules resolve to the palette */
  --cream: var(--sand);
  --sky:   var(--teal);
  --sun:   var(--apricot);
  --blue:  var(--teal);
  --navy:  var(--ink);
  --clay:  var(--apricot);
  --pine:  var(--sage);

  --font: Arial, Helvetica, sans-serif;
  --font-display: "Bagel Fat One", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--sand); line-height:1.5; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }

/* ===== Top bar ===== */
.topbar {
  position:absolute; inset:0 0 auto 0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: clamp(1rem,2.4vw,1.9rem) clamp(1.25rem,4vw,3.5rem);
}
.brand { display:inline-flex; align-items:center; }
.brand__logo { width:auto; height: clamp(105px, 13vw, 154px); display:block; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; font-family:var(--font);
  border-radius:999px; line-height:1; white-space:nowrap;
  transition:transform .08s ease, opacity .15s ease;
}
.btn:active { transform:translateY(1px); }
.btn--sky   { background:var(--sky); color:var(--white); font-weight:700; font-size:clamp(.92rem,1.15vw,1.06rem); padding:.7em 1.45em; }
.btn--sky:hover { opacity:.92; }
.btn--coral { background:var(--coral); color:var(--white); font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); padding:0 1.6em; }
.btn--coral:hover { opacity:.94; }
.btn--gold  { background:var(--sun); color:var(--ink); font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); padding:0 1.6em; }
.btn--gold:hover { opacity:.92; }
.btn--blue  { background:var(--apricot); color:var(--white); font-weight:700; font-size:clamp(1.06rem,1.32vw,1.22rem); padding:.7em 1.45em; }
.btn--blue:hover { opacity:.92; }
.btn--brick { background:var(--coral); color:var(--white); font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); padding:0 1.6em; }
.btn--brick:hover { opacity:.93; }
.btn--sage  { background:var(--sage); color:var(--white); font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); padding:0 1.6em; }
.btn--sage:hover { opacity:.94; }

/* ===== Hero ===== */
.hero {
  position:relative; min-height:95svh; overflow:hidden;
  display:grid; place-items:center; text-align:center; color:var(--white);
  background: var(--cream);
  padding: 6rem clamp(1.25rem,5vw,3rem) 4rem;
}
.hero::before {
  content:""; position:absolute; inset:-40px; z-index:0;
  background-image: url("assets/img/hero-2.jpg");
  background-size:cover; background-position:left center;
  filter: blur(0.5px) saturate(1.0) brightness(.93);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top right, rgba(230,155,82,.65) 0%, rgba(62,90,101,.70) 62%);
}
.hero__inner { width:100%; max-width:940px; position:relative; z-index:2; transform: translateY(-2.5rem); }

.eyebrow {
  margin:0 0 clamp(.95rem,2vw,1.35rem);
  color:var(--apricot); font-weight:700;
  font-family:var(--font);
  font-size:clamp(.9rem,1.15vw,1rem);
  text-transform:none; letter-spacing:.14em; text-shadow:0 1px 4px rgba(34,28,24,.3);
}
.hero__title {
  margin:0;
  color:var(--white);
  font-family:var(--font-display);
  font-size:clamp(2rem,5.2vw,4.25rem);
  line-height:1.0; letter-spacing:.005em;
  text-shadow:0 1px 6px rgba(0,0,0,.2);
}
.hero__sub {
  margin: clamp(1rem,2.4vw,1.6rem) auto 0;
  max-width:none;
  color:rgba(255,255,255,.9); font-weight:400;
  font-family:var(--font);
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.45; letter-spacing:0;
}

.hero__plug {
  margin: clamp(.9rem,2vw,1.25rem) 0 0;
  color: var(--white);
  font-size: clamp(.9rem,1.1vw,1rem);
  font-weight:400; font-style:italic; letter-spacing:.01em;
}

/* ===== Signup ===== */
.signup {
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin: clamp(1.8rem,4vw,2.8rem) auto 0; max-width:760px;
}
.signup__input {
  flex:0 1 380px; min-width:0;
  border:1px solid rgba(33,31,27,.14); border-radius:14px; padding:1.05em 1.2em;
  font-family:var(--font); font-size:1.05rem;
  background:var(--white); color:var(--ink);
  box-shadow:0 6px 18px rgba(33,31,27,.08);
}
.signup__input::placeholder { color:var(--muted); }
.signup .btn { flex:0 0 auto; border-radius:14px; }

@media (max-width:560px){
  .signup { flex-direction:column; align-items:stretch; }
  .signup__input, .signup .btn { flex:0 0 auto; width:100%; }
  .signup .btn { padding:1.05em 1.2em; }
}

/* ===== Section: cream ===== */
.section--cream {
  background: var(--white); color: var(--ink);
  display:grid; place-items:center;
  padding: clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) clamp(1.7rem,2.9vw,2.3rem);
  position: relative; z-index: 2; margin-top: -11.0vh;
}
.sect2 { width:100%; max-width:1260px; }
.sect2__foot { display:flex; justify-content:flex-end; margin-top:clamp(1.7rem,2.9vw,2.3rem); }
.sect2__greeter { height:clamp(85px,10.85vw,125px); width:auto; display:block; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.85rem,1.8vw,1.4rem); align-items:stretch; }
.card {
  background:var(--sand); border:1px solid rgba(33,31,27,.07); border-radius:18px;
  padding:clamp(1.15rem,1.8vw,1.55rem); text-align:left;
  box-shadow:0 12px 34px rgba(33,31,27,.07);
  display:flex; flex-direction:column;
}
.card--center { text-align:center; align-items:center; }
.card__eyebrow {
  margin:0 0 .5rem; font-family:var(--font); font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; color:var(--coral);
}
.card__heading { margin:0 0 2.3rem; font-family:var(--font-display); color:var(--ink); font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1; }
.card--center .card__heading { margin-bottom:1.7rem; }

.surf__top { list-style:none; margin:.25rem 0 1rem; padding:0 0 .9rem; border-bottom:1px solid rgba(33,31,27,.12); display:flex; flex-direction:column; gap:.55rem; }
.surf__top li { display:flex; justify-content:space-between; font-size:.95rem; }
.surf__top span { color:var(--muted); }
.surf__top b { color:var(--ink); }
.surf__spots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.surf__spots li { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(33,31,27,.08); padding-bottom:.55rem; }
.surf__spots li:last-child { border-bottom:0; padding-bottom:0; }
.surf__spots span { color:var(--ink); font-weight:500; font-size:.98rem; }
.surf__spots b { color:var(--sky); font-family:var(--font-display); font-size:1.1rem; line-height:1; }

.archive { list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.archive a { color:var(--ink); border-bottom:1px solid rgba(33,31,27,.15); padding-bottom:.5rem; display:block; font-size:1rem; transition:color .15s; }
.archive a:hover { color:var(--coral); }
.card__btn { align-self:flex-start; padding:.7em 1.3em; font-size:.95rem; }

.gauge { width:100%; max-width:240px; margin:.5rem auto 0; }
.gauge__svg { width:100%; height:auto; display:block; }
.gauge__ends { display:flex; justify-content:space-between; margin-top:-.3rem; font-family:var(--font); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); line-height:1.25; }
.gauge__ends span:last-child { text-align:right; }
.gauge__status { margin:.9rem 0 0; font-family:var(--font-display); color:var(--sun); font-size:clamp(1.3rem,2.4vw,1.8rem); }
.gauge__note { align-self:stretch; text-align:left; margin:1.3rem 0 .4rem; font-family:var(--font); font-size:.72rem; color:var(--muted); line-height:1.4; }
.gauge__sources { align-self:stretch; text-align:left; margin:0; padding-left:1.1rem; font-family:var(--font); font-size:.72rem; color:var(--muted); line-height:1.55; }
.gauge__sources li { margin:0; }

.wx-now { display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem; }
.wx-now__ic { display:inline-flex; flex:none; }
.wx-ic { width:18px; height:18px; flex:none; }
.wx-ic--lg { width:42px; height:42px; }
.wx-now__t { display:flex; flex-direction:column; line-height:1.05; }
.wx-now__temp { font-family:var(--font-display); color:var(--ink); font-size:clamp(1.9rem,3vw,2.4rem); }
.wx-now__cond { font-size:.82rem; color:var(--muted); }
.wx-week { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.wx-week li { display:flex; align-items:center; gap:.6rem; font-size:.92rem; border-bottom:1px solid rgba(33,31,27,.08); padding-bottom:.42rem; }
.wx-week li:last-child { border-bottom:0; padding-bottom:0; }
.wx-day { color:var(--muted); width:2.5rem; flex:none; }
.wx-temps { margin-left:auto; }
.wx-temps b { color:var(--ink); }
.wx-temps i { color:var(--muted); font-style:normal; margin-left:.5rem; }

@media (max-width:1024px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }

/* ===== Submit Event page ===== */
.page-submit { background:var(--cream); color:var(--ink); }
.topbar--page { position:static; }
.container--narrow { width:100%; max-width:640px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2rem); }
.submit { padding: clamp(1rem,2vw,2rem) 0 clamp(4rem,8vw,7rem); }
.submit__title { margin:0; text-align:center; color:var(--sky); font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,5vw,3.1rem); letter-spacing:.01em; line-height:1.05; }
.submit__lead { margin: clamp(.6rem,1.6vw,1rem) auto 0; max-width:42ch; text-align:center; color:var(--coral); font-family:var(--font); font-weight:500; font-size:clamp(1.05rem,2vw,1.35rem); letter-spacing:0; }
.submit__lead--oneline { max-width:none; white-space:nowrap; }
@media (max-width:600px){ .submit__lead--oneline { white-space:normal; max-width:42ch; } }

/* No uppercase shown in any text input box (placeholder + typed display) */
.signup__input, .footer__input, .eform__input, .eform__textarea { text-transform: lowercase; }
.eform { margin-top: clamp(2rem,5vw,3.25rem); display:flex; flex-direction:column; gap:clamp(1.1rem,2.2vw,1.5rem); }
.eform__group { display:flex; flex-direction:column; gap:.45rem; }
.eform__label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.eform__opt { text-transform:none; font-weight:400; opacity:.65; }
.eform__input::placeholder { color:var(--muted); }
.eform__input { width:100%; border:1px solid #d9d0c5; background:var(--white); color:var(--ink); border-radius:6px; padding:.75em .85em; font-family:var(--font); font-size:1rem; }
.eform__input:focus { outline:2px solid var(--sky); outline-offset:0; border-color:var(--sky); }
.eform__input--auto { width:auto; max-width:240px; }
.eform__textarea { min-height:120px; resize:vertical; }
.eform__hint { font-size:.82rem; color:var(--coral); }
.eform__row { display:flex; gap:1rem; }
.eform__row .eform__input { flex:1 1 0; }
.eform__file { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; border:2px dashed #e3cabf; border-radius:12px; padding:1.75rem 1rem; color:var(--coral); cursor:pointer; text-align:center; }
.eform__file-plus { font-size:1.6rem; line-height:1; }
.eform__submit { align-self:flex-start; margin-top:.5rem; padding:.9em 2.4em; font-size:1.05rem; }
@media (max-width:540px){
  .eform__row { flex-direction:column; }
  .eform__submit { align-self:stretch; }
}

/* ===== Footer ===== */
.footer { background:var(--sand); color:var(--ink); text-align:center; padding:clamp(3rem,7vw,5rem) clamp(1.25rem,5vw,3rem); }
.page-submit .footer { background:var(--white); }
.footer__inner { max-width:540px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.footer__brand { margin:0; font-family:var(--font-display); font-weight:400; text-transform:none; letter-spacing:.01em; font-size:clamp(1.25rem,2.3vw,1.7rem); color:var(--ink); }
.footer__place { margin:.6rem 0 0; font-family:var(--font); font-size:.9rem; color:var(--muted); letter-spacing:.04em; }
.footer__form { display:flex; width:100%; max-width:500px; margin:clamp(1.6rem,3.5vw,2.4rem) 0 0; border:1px solid rgba(111,157,174,.5); border-radius:8px; overflow:hidden; }
.footer__input { flex:1 1 auto; min-width:0; border:0; background:#DCE8EC; color:var(--ink); font-family:var(--font); font-size:1rem; padding:.95em 1.1em; }
.footer__input::placeholder { color:var(--muted); }
.footer__btn { flex:0 0 auto; border:0; cursor:pointer; border-radius:0; background:var(--teal); color:var(--white); font-family:var(--font); font-weight:700; font-size:1rem; padding:.95em 1.5em; white-space:nowrap; transition:opacity .15s ease; }
.footer__btn:hover { opacity:.92; }
.footer__link { margin:clamp(1.6rem,3.5vw,2.4rem) 0 0; color:var(--ink); font-family:var(--font); font-size:.95rem; border-bottom:1px solid rgba(44,38,34,.3); padding-bottom:3px; }
.footer__link:hover { border-color:var(--ink); }
.footer__copy { margin:clamp(1.2rem,2.5vw,1.8rem) 0 0; font-family:var(--font); font-size:.82rem; color:var(--muted); letter-spacing:.03em; }

/* ===== Subscribe form result messages ===== */
.form-msg { font-family:var(--font); font-weight:600; font-size:1rem; margin:.85rem 0 0; }
.form-msg--ok { color:var(--sage); }
.form-msg--err { color:var(--coral); }
.footer .form-msg { color:var(--ink); }
.hero .form-msg { color:var(--white); }

/* Phone-only overrides (<=600px) */
@media (max-width:600px){
  /* lower the hero crop so the surfer sits near the bottom of the section */
  .hero::before { background-size:auto 130%; background-position:left 28%; }
  /* header logo enlarged on phone (68px floor +15% then +10% = ~86px) */
  .brand__logo { height:104px; }
  /* overlay transition tuned for phone: clear diagonal, warm lower-left -> blue upper-right */
  .hero::after { background: linear-gradient(25deg, rgba(230,155,82,.65) 5%, rgba(62,90,101,.70) 60%); }
}

/* Desktop-only overrides (>=1024px) */
@media (min-width:1024px){
  /* header logo sized up per requests */
  .brand__logo { height:131px; }
  /* lift the whole hero block (eyebrow -> plug) up a bit */
  .hero__inner { transform: translateY(-4.5rem); }
}