/* ==========================================================================
   Crunchy Pup — main stylesheet (every page loads this one file)
   ==========================================================================
   Brand palette (visual identity v4.4):
     Bone Broth Beige  #FAF7F2  → backgrounds
     Activated Charcoal #222222 → text
     Deep Kelp Green   #2E4A39  → accents, links, buttons
     Roasted Sweet Potato #A84B2F → alert / error states ONLY, never decoration
   Type: Alice (display headings) + Montserrat (body and UI).

   HOW THIS FILE IS ORGANIZED (search for the numbers):
     1. Design tokens (colors, spacing, type sizes)
     2. Base + accessibility (reset, focus rings, skip link)
     3. Header and navigation
     4. Buttons and links
     5. Sections, headings, layout helpers
     6. Pebble photo shapes (the organic image masks used everywhere)
     7. Cards (crew, VIP gallery, blog)
     8. Signup form (email + SMS)
     9. Footer
     10. Page-specific styles (about, vip, blog, legal, shop)
     11. Motion: reveal utilities + reduced-motion fallback
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS — self-hosted .woff2 per brand guidelines §5
   Files live in site/fonts/. font-display: swap means text shows
   immediately in a fallback while the brand font loads.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Alice";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/alice-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/montserrat-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/montserrat-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-700-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  --beige: #FAF7F2;
  --charcoal: #222222;
  --kelp: #2E4A39;
  --sweet-potato: #A84B2F;   /* alerts only */

  /* Official variants from the brand guidelines' extended color matrix */
  --kelp-hover: #3B5E49;     /* "Hover Green": CTA hover states */
  --kelp-pressed: #21362A;   /* "Deepest Kelp": pressed/active states */
  --kelp-deep: #21362A;      /* kept as alias for older rules */
  --warm-sand: #EBE5D9;      /* secondary section backgrounds (footer) */
  --toasted-beige: #DED5C4;  /* borders and dividers */
  --slate: #666666;          /* muted/secondary text (passes AA on beige) */

  --kelp-06: rgba(46, 74, 57, 0.06);
  --kelp-10: rgba(46, 74, 57, 0.10);
  --kelp-16: rgba(46, 74, 57, 0.16);
  --line: var(--toasted-beige);
  --shadow: 0 18px 44px -18px rgba(34, 34, 34, 0.22);

  --font-display: "Alice", "Georgia", serif;
  --font-body: "Montserrat", "Segoe UI", -apple-system, sans-serif;

  /* Fluid type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
  --text-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --text-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);

  --container: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-gap: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 20px;
}

/* --------------------------------------------------------------------------
   2. BASE + ACCESSIBILITY
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: clip; /* no horizontal scroll, ever */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
/* Section headers run Deep Kelp Green per the brand type table
   (8:1 contrast on beige, well past WCAG AA for any size) */
h2 { font-size: var(--text-h2); color: var(--kelp); }
h3 { font-size: var(--text-h3); color: var(--kelp); }

p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--kelp); text-underline-offset: 3px; }
a:hover { color: var(--kelp-deep); }

::selection { background: var(--kelp); color: var(--beige); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--kelp);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--kelp); color: var(--beige);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; color: var(--beige); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--beige) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 1rem;
}

/* LOGO PLACEHOLDER ---------------------------------------------------------
   There is no final logo yet. The wordmark below is the stand-in.
   When the real logo arrives, replace the text inside <a class="brand">
   with an <img> in every page's header and footer (8 files), keeping the
   same link. Search the project for "brand-wordmark" to find them all.    */
.brand {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* tap target */
}
.brand .paw { color: var(--kelp); margin-right: 0.45rem; font-size: 1.1em; line-height: 1; }
.brand:hover { color: var(--kelp); }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(0.25rem, 1.5vw, 1rem);
  margin: 0; padding: 0;
  align-items: center;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  color: var(--charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { background: var(--kelp-10); color: var(--kelp-deep); }
.site-nav a[aria-current="page"] { background: var(--kelp-10); color: var(--kelp-deep); }
.site-nav a.nav-cta {
  background: var(--kelp);
  color: var(--beige);
  font-weight: 600;
  padding: 0.35rem 1.1rem;
}
.site-nav a.nav-cta:hover { background: var(--kelp-hover); }

/* Mobile menu */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 48px; height: 48px;
  cursor: pointer;
  color: var(--charcoal);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--beige);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem var(--pad) 1.5rem;
    display: none;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .site-nav a { min-height: 48px; font-size: 1.05rem; border-radius: 12px; }
  .site-nav a.nav-cta { justify-content: center; margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--kelp);
  background: var(--kelp);
  color: var(--beige);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700; /* Montserrat Bold for CTAs, per brand type table */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  background: var(--kelp-hover);
  border-color: var(--kelp-hover);
  color: var(--beige);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(46, 74, 57, 0.5);
}
.btn:active {
  background: var(--kelp-pressed);
  border-color: var(--kelp-pressed);
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--kelp);
}
.btn--ghost:hover { background: var(--kelp-10); color: var(--kelp-deep); }

/* Buttons on dark kelp sections */
.on-kelp .btn { background: var(--beige); border-color: var(--beige); color: var(--kelp-deep); }
.on-kelp .btn:hover { background: #fff; border-color: #fff; }

.text-link {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   5. SECTIONS + LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.6); }

/* Dark kelp band */
.on-kelp {
  background: var(--kelp);
  color: var(--beige);
}
.on-kelp h1, .on-kelp h2, .on-kelp h3 { color: var(--beige); }
.on-kelp a { color: var(--beige); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kelp);
  margin-bottom: 1rem;
}
.on-kelp .eyebrow { color: color-mix(in srgb, var(--beige) 75%, var(--kelp)); }

.lead { font-size: var(--text-lg); }

.grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2 > .order-first-desktop { order: -1; }
}

/* --------------------------------------------------------------------------
   6. PEBBLE PHOTO SHAPES
   Organic, river-stone image masks. The brand's signature visual device.
   -------------------------------------------------------------------------- */
.pebble {
  position: relative;
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%;
  box-shadow: var(--shadow);
}
.pebble img { width: 100%; height: 100%; object-fit: cover; }
.pebble--b { border-radius: 44% 56% 48% 52% / 55% 44% 56% 45%; }
.pebble--c { border-radius: 52% 48% 60% 40% / 45% 52% 48% 55%; }

/* Warm Polaroid treatment (brand guidelines §7): every important photo gets
   a touch of hand-processed warmth and film grain instead of looking like
   clean corporate stock. Add the "photo-warm" class alongside "pebble". */
.photo-warm img {
  filter: saturate(1.14) contrast(1.04) brightness(1.03) sepia(0.06);
}
.photo-warm::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(244, 227, 197, 0.26), rgba(168, 75, 47, 0.05) 55%, rgba(34, 34, 34, 0.16) 100%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJy8+PC9zdmc+");
  background-size: cover, 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
}

/* Soft kelp halo behind a pebble */
.pebble-halo { position: relative; }
.pebble-halo::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: var(--kelp-10);
  border-radius: 46% 54% 50% 50% / 55% 46% 54% 45%;
  z-index: 0;
  transform: rotate(-4deg);
}
.pebble-halo .pebble { z-index: 1; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.pillar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pillar-card h3 { margin-bottom: 0.4em; }
.pillar-card p { margin-bottom: 0; font-size: var(--text-sm); }
.pillar-card .pillar-mark {
  width: 52px; height: 52px;
  border-radius: 46% 54% 50% 50% / 55% 46% 54% 45%;
  background: var(--kelp-10);
  color: var(--kelp);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.pillar-card .pillar-mark svg { width: 26px; height: 26px; }

/* Crew cards (home + about) */
.crew-card { text-align: center; }
.crew-card .pebble { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; }
.crew-card .pebble img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.crew-card:hover .pebble img { transform: scale(1.045) rotate(0.5deg); }
.crew-card h3 { margin-bottom: 0.15em; }
.crew-card .crew-role {
  color: var(--kelp);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crew-card p { margin: 0.5rem auto 0; font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   8. SIGNUP FORM (Klaviyo)
   -------------------------------------------------------------------------- */
.signup-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow);
  max-width: 620px;
}
.on-kelp .signup-panel { border-color: transparent; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
  color: var(--charcoal);
}
.field .hint { font-weight: 400; color: var(--slate); }

.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  font: inherit;
  color: var(--charcoal);
  background: var(--beige);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--kelp);
  box-shadow: 0 0 0 3px var(--kelp-16);
}
.field input[aria-invalid="true"] { border-color: var(--sweet-potato); }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.consent input[type="checkbox"] {
  width: 24px; height: 24px;
  margin-top: 2px;
  accent-color: var(--kelp);
  cursor: pointer;
}
.consent label {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--slate);
  cursor: pointer;
}

.form-msg {
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: 1rem;
}
.form-msg--error {
  background: rgba(168, 75, 47, 0.1);
  border: 1px solid rgba(168, 75, 47, 0.4);
  color: var(--sweet-potato);
}
.form-msg--success {
  background: var(--kelp-10);
  border: 1px solid var(--kelp-16);
  color: var(--kelp-deep);
}
.form-msg[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--warm-sand);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  margin-top: var(--section-gap);
}
.site-footer.no-gap { margin-top: 0; }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: 2.5rem;
}
.site-footer .brand { font-size: 1.3rem; }
.site-footer .footer-h {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kelp);
  margin-bottom: 0.75rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
}
.site-footer li a:hover { color: var(--kelp); text-decoration: underline; }
.footer-note { font-size: var(--text-xs); color: var(--slate); max-width: 70ch; }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   10. PAGE-SPECIFIC
   -------------------------------------------------------------------------- */

/* Inner-page hero (About, VIP, Blog, etc.) */
.page-hero {
  padding-top: calc(72px + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.page-hero .lead { max-width: 56ch; }

/* VIP gallery */
.vip-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  /* reserve one card row so the page doesn't jump while the data loads */
  min-height: clamp(300px, 45vw, 400px);
}
.vip-card {
  text-decoration: none;
  color: var(--charcoal);
  display: block;
}
.vip-card .pebble { aspect-ratio: 1; margin-bottom: 1rem; }
.vip-card .pebble img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.vip-card:hover .pebble img { transform: scale(1.05); }
.vip-card h3 { margin-bottom: 0.1em; }
.vip-card .vip-human { font-size: var(--text-sm); color: var(--slate); }
.vip-card .vip-name { font-size: var(--text-h3); margin-bottom: 0.1em; }

.sample-badge {
  display: inline-block;
  background: var(--kelp-10);
  border: 1px dashed var(--kelp);
  color: var(--kelp-deep);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}

/* VIP detail */
.vip-detail-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 780px) {
  .vip-detail-grid { grid-template-columns: minmax(280px, 420px) 1fr; align-items: start; }
}
.vip-detail-grid .pebble { aspect-ratio: 4 / 5; }

/* Blog */
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 680px;
}
.post-card time { font-size: var(--text-xs); color: var(--slate); letter-spacing: 0.06em; }
.post-body { max-width: 680px; }
.post-body p { max-width: none; }

.placeholder-note {
  background: rgba(168, 75, 47, 0.08);
  border: 1px dashed var(--sweet-potato);
  color: var(--sweet-potato);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 1.25rem 0;
  max-width: 680px;
}

/* Legal pages */
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: var(--text-h3); margin-top: 2.2em; }
.legal-body p { max-width: none; }

/* CTA band reused across inner pages */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 1rem; }
.cta-band p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. MOTION
   .reveal elements fade/rise in as they scroll into view (js/main.js).
   Everything degrades gracefully: without JS or with reduced motion,
   content is simply visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.js .reveal.is-visible { opacity: 1; transform: none; }
  body.js .reveal[data-delay="1"] { transition-delay: 0.12s; }
  body.js .reveal[data-delay="2"] { transition-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}