/* ==========================================================================
   Stick & Stone Collective — stylesheet
   Palette + type are set as custom properties below so the whole site can
   be re-themed from one place once real brand colors/fonts are picked.
   ========================================================================== */

:root {
  --cream: #faf7f1;
  --sand: #e7ddc9;
  --stone: #6f6a5f;
  --stone-dark: #38352f;
  --moss: #4f5d42;
  --moss-dark: #3a4531;
  --terracotta: #b5684a;
  --white: #ffffff;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1120px;
  --radius: 10px;
  --transition: 220ms ease;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The browser's default scroll anchoring tries to keep whatever content
     sits at the top of the viewport visually stable across layout shifts —
     but the sticky header's collapse animation IS a layout shift (its
     height changes every frame), and the content it's trying to anchor
     against sits below that same header. That turns into a feedback loop:
     the shift nudges scroll position, which can cross the collapse
     threshold again, re-triggering the animation in the other direction.
     Disabling it here (not just on the header) is what actually breaks
     the loop, since the anchor node the browser picks lives in the page
     content, not the header itself. */
  overflow-anchor: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--stone-dark);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--stone-dark);
}

p { margin: 0 0 1em; }

a { color: inherit; }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 96px 0;
}

.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-heading h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.section-heading p {
  color: var(--stone);
  margin-top: 12px;
}

/* -------------------- Buttons -------------------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--moss);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--moss-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--stone-dark);
  border-color: var(--stone-dark);
}

.btn-secondary:hover {
  background: var(--stone-dark);
  color: var(--white);
}

.btn-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* -------------------- Header / Nav -------------------- */
/* Logo sits prominently on its own row, with a plain-text nav row cleanly
   below it (divided by a hairline), rather than a single crowded bar —
   inspired by a reference layout with a centered logo above a simple nav
   row of consistently-styled links.

   As soon as the page scrolls at all (hero content starts passing behind
   the header), main.js adds .is-scrolled to .site-header: the big logo
   row collapses away — height, padding AND opacity all go to 0 together
   so nothing lingers mid-collapse — and a small logo fades in on the left
   of the thin nav bar left behind. The header background is fully opaque
   (not translucent) so that thin bar never shows hero content through it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid rgba(56, 53, 47, 0.08);
}

.site-logo {
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-height: 220px;
  opacity: 1;
  transition: max-height 320ms ease, opacity 220ms ease;
}

.site-logo img {
  display: block;
  height: clamp(86px, 15.6vw, 168px);
  width: auto;
}

.site-header.is-scrolled .site-logo {
  max-height: 0;
  opacity: 0;
}

.nav {
  position: relative;
  border-top: 1px solid rgba(56, 53, 47, 0.1);
}

.nav-compact-logo {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}

.nav-compact-logo img {
  display: block;
  height: 32px;
  width: auto;
}

.site-header.is-scrolled .nav-compact-logo {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  list-style: none;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--stone-dark);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}

.nav-links a:hover {
  border-color: var(--terracotta);
}

.nav-socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* -------------------- Hero -------------------- */
/* Full-bleed background hero — content sits on top of the photo rather
   than beside it. To swap the photo, just change the background-image URL
   below; adjust background-position (e.g. "center 30%") if the new photo's
   subject gets cropped awkwardly on narrow screens. */

.hero {
  position: relative;
  min-height: clamp(480px, 88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
}

/* Scrim over the photo — darker at the top to soften the bright leaves/
   treetops up there, fading to lighter at the bottom where the photo is
   already naturally dark (ground/shadow), rather than adding extra
   darkening somewhere that doesn't need it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.78) 0%, rgba(20, 18, 15, 0.35) 45%, rgba(20, 18, 15, 0.05) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 64px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero p.lede {
  /* Deliberately not capped to a narrow reading-width column (the usual
     ~46ch) — letting sentences run most of the hero's width means each
     paragraph wraps into far fewer lines, keeping the whole block short
     enough to actually sit low in the frame once anchored to the bottom,
     rather than stacking tall down the middle. */
  max-width: 900px;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero .btn-secondary:hover {
  background: var(--white);
  color: var(--stone-dark);
}

/* -------------------- About -------------------- */

.about {
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

/* Frames the About photo so it feels placed rather than pasted on: rounded
   corners + a soft warm-toned shadow lift it off the white background, and
   an offset sand block peeking out behind gives it a bit of hand-arranged,
   collage-like character in keeping with the logo's rough-drawn feel. */
.about-photo-frame {
  position: relative;
}

.about-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(16px, 16px);
  background: var(--sand);
  border-radius: var(--radius);
  z-index: 0;
}

.about-photo-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(56, 53, 47, 0.35);
}

.about-body h3 {
  font-size: 1.4rem;
  margin-top: 1.4em;
}

.about-body h3:first-child {
  margin-top: 0;
}

.about-body p {
  color: var(--stone-dark);
}

/* -------------------- Press strip (folded into About) -------------------- */

/* A quiet "as featured in" line between the About copy and the values
   block — hairline rules above/below rather than a card, so it reads as a
   credit, not a feature. */
.press-strip {
  margin-top: 72px;
  padding: 28px 0;
  border-top: 1px solid rgba(56, 53, 47, 0.15);
  border-bottom: 1px solid rgba(56, 53, 47, 0.15);
  text-align: center;
}

.press-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}

.press-link {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 16px;
  text-decoration: none;
}

.press-headline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-style: italic;
  color: var(--stone-dark);
}

.press-cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--moss);
  white-space: nowrap;
  transition: color var(--transition);
}

.press-link:hover .press-cta,
.press-link:focus-visible .press-cta {
  color: var(--terracotta);
  text-decoration: underline;
}

.press-strip + .about-values {
  margin-top: 56px;
}

/* -------------------- Philosophy / values (folded into About) -------------------- */

.about-values {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 48px 40px;
  margin-top: 72px;
}

.about-values > h3 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 36px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.value-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 32px 28px;
  border: 1px solid rgba(56,53,47,0.08);
}

.value-card h4 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.value-card p {
  color: var(--stone);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* -------------------- Photo bands -------------------- */

/* Full-bleed decorative photo strips dropped between sections to break up
   the page. Each band's photo is set individually below (.photo-band-1,
   .photo-band-2) — swap the background-image URL to change one. */
.photo-band {
  position: relative;
  width: 100%;
  height: clamp(220px, 28vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(260deg, rgba(20, 18, 15, 0.75) 0%, rgba(20, 18, 15, 0.45) 42%, rgba(20, 18, 15, 0.12) 72%),
    linear-gradient(180deg, rgba(20, 18, 15, 0.25) 100%, rgba(20, 18, 15, 0.45) 0%);
}

.photo-band-1 {
  background-image: url('../images/band-2.jpg');
  background-size: cover;
  /* Second value shifts the visible crop vertically: lower than 50% (center)
     shows more of the top of the source photo; higher shows more of the
     bottom. Nudged down toward the trees/sky here. */
  background-position: center 40%;
}

.photo-band-2 {
  background-image: url('../images/band-1.jpg');
  background-size: cover;
  background-position: center;
}

.photo-band-caption {
  /* Needs to be a positioned element to paint above .photo-band::before —
     otherwise, per normal CSS stacking order, this non-positioned text
     would paint BEFORE (i.e. underneath) the absolutely-positioned scrim,
     regardless of source order. */
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  padding: 0 24px;
  margin: 0;
}

/* -------------------- Events -------------------- */

.events {
  background: var(--white);
}

.events-embed-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(56,53,47,0.12);
  background: var(--cream);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.events-fallback {
  text-align: center;
  margin-top: 24px;
  color: var(--stone);
  font-size: 0.9rem;
}

/* -------------------- Newsletter -------------------- */

.newsletter {
  background: var(--moss);
  color: var(--cream);
}

.newsletter-embed-wrap {
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

/* -------------------- Footer -------------------- */

.site-footer {
  background: var(--stone-dark);
  color: var(--sand);
  padding: 56px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .footer-logo {
  display: inline-block;
  color: var(--cream);
}

.footer-brand .footer-logo img {
  height: auto;
  width: 148px;
}

.footer-brand p {
  color: rgba(231, 221, 201, 0.75);
  font-size: 0.9rem;
  max-width: 32ch;
  margin-top: 12px;
}

.footer-col h4 {
  color: var(--cream);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  text-decoration: none;
  color: rgba(231, 221, 201, 0.85);
  font-size: 0.92rem;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(231, 221, 201, 0.15);
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(231, 221, 201, 0.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------- Reveal-on-scroll -------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------- Responsive -------------------- */

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-photo-frame {
    order: -1;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  section { padding: 64px 0; }

  .nav-links {
    gap: 20px 28px;
    padding: 14px 24px;
  }

  /* At this width the centered nav-links can run wide enough to collide
     with the compact logo (absolutely positioned at the left) once the
     header's collapsed — reserve room for it so they never overlap. */
  .site-header.is-scrolled .nav-links {
    padding-left: 100px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .about-values {
    padding: 32px 24px;
    margin-top: 48px;
  }

  .press-strip {
    margin-top: 48px;
  }

  .press-strip + .about-values {
    margin-top: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}