/* ===========================================================
   YPIP — Design tokens
   V3.4: typography restored from V1 — one heavy geometric display
   sans (Archivo) for the wordmark and headlines, Inter for
   everything else (nav, buttons, labels, body, captions). No serif.
   Lime accent carried over, used sparingly per V1.
   =========================================================== */
:root {
  --color-bg: #FAFAF7;
  --color-bg-alt: #E6E4D6;  /* darkened warm beige (V4.13) — reads as a clearly distinct band from the Story section above it */
  --color-ink: #17191A;
  --color-ink-soft: #4A4C4E;
  --color-line: #E4E2DA;

  --color-accent: #C6E24D;       /* lime — buttons, accents, dividers, hover */
  --color-accent-deep: #7C9A1E;  /* darker lime for text-safe contrast */
  --color-accent-soft: #F3F8DE;  /* pale lime tint for backgrounds */
  --color-white: #FFFFFF;

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-hero: 'Syne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* V4: hero (Section 1) only — matches ypip.life exactly */

  --max-width: 1240px;
  --gap-section: clamp(44px, 7vw, 92px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.container.narrow { max-width: 700px; }
.container.wide { max-width: var(--max-width); }
.center { text-align: center; }

.section { padding: var(--gap-section) 0; }

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  font-weight: 600;
  margin: 0 0 18px;
}
.eyebrow.center { text-align: center; }
.eyebrow.on-dark { color: rgba(255,255,255,0.85); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

h2 { font-size: clamp(2.3rem, 4.8vw, 3.4rem); line-height: 1.05; }
h2.center { text-align: center; }
h3 { font-size: 1.3rem; margin-bottom: 14px; }

/* Large, quiet editorial "lede" line used in the gallery CTA */
.editorial-lede {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.1vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  max-width: 560px;
}

.body-text {
  font-size: 1.06rem;
  color: var(--color-ink-soft);
  max-width: 560px;
  margin: 0 0 18px;
  font-weight: 400;
}
.gallery-cta .body-text { margin-left: auto; margin-right: auto; }
.body-text.emphasis {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 1.15rem;
  font-family: var(--font-body);
}
.gallery-cta p { text-align: center; }

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
}
.btn-primary:hover { transform: translateY(-2px); background: #B8D63C; }

.btn-nav {
  padding: 10px 22px;
  font-size: 0.82rem;
}

/* ===========================================================
   Nav — hidden/transparent over the hero, fades in on scroll
   =========================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  --nav-fg: #fff;
  --nav-fg-soft: rgba(255,255,255,0.85);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-nav.scrolled {
  --nav-fg: var(--color-ink);
  --nav-fg-soft: var(--color-ink-soft);
  background: rgba(250,250,247,0.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-line);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  font-family: var(--font-hero);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--nav-fg, var(--color-ink));
  transition: color .4s var(--ease);
}
.logo-accent { color: var(--color-accent); font-weight: 800; }

/* Hamburger — the only nav control, at every viewport width. Toggling
   .open on .site-nav reveals the dropdown below (Our Story / Gallery). */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--nav-fg); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease), background .4s var(--ease);
}
.site-nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Small floating card anchored under the hamburger — not a full-width
   bar, so it only covers a corner of the hero photo instead of cutting
   across it. */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: 100%;
  right: clamp(20px, 5vw, 48px);
  margin-top: 10px;
  min-width: 160px;
  padding: 8px;
  background: rgba(250,250,247,0.98);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.nav-mobile a {
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 7px;
  transition: background .2s var(--ease);
}
.nav-mobile a:hover { background: rgba(23,25,26,0.06); }

.site-nav.open .nav-mobile { display: flex; }

/* ===========================================================
   Hero — V4: Section 1 rebuilt to match ypip.life exactly (typography,
   type scale, spacing, hierarchy, composition). Photo, nav, pill-shaped
   CTA button and overall markup stay from this dev version per brief.
   =========================================================== */
.hero {
  position: relative;
  height: 100vh;   /* fallback for browsers without svh support */
  height: 100svh;
  min-height: 580px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}
.hero-media {
  position: absolute; inset: 0;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.72) 100%);
}
/* Decorative watermark echo of the wordmark, bleeding off the hero's
   edge behind the real heading — exactly as on the live site. Purely
   visual: transparent fill, thin low-opacity stroke, non-interactive. */
.hero-wordmark-ghost {
  position: absolute;
  bottom: -0.1em;
  left: -0.03em;
  z-index: 1;
  font-family: var(--font-hero);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-size: clamp(4.5rem, 14vw, 13rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.18);
  user-select: none;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 2rem 4rem;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-kicker {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}
.hero-wordmark {
  font-family: var(--font-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(3.2rem, 11vw, 9rem);
  line-height: 0.9;
  color: var(--color-white);
  margin: 0 0 1.1rem;
}
.hero-subhead {
  font-family: var(--font-hero);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  color: rgba(255,255,255,0.88);
  margin: 0 0 0.35rem;
}
.hero-tagline {
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2.2rem;
  font-weight: 400;
}
.hero-ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* Typography/spacing matched to the live site's button; shape stays the
   rounded pill from this dev version (border-radius inherited from .btn). */
.hero-ctas .btn {
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.9rem 2rem;
}

.scroll-cue {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(28px, 5vw, 56px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
}
.scroll-cue::before {
  content: "";
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.35);
}

/* ===========================================================
   Our Story — V4.4: single vertical photo, wide text column. Sized so
   the whole story (headline through all five paragraphs) reads on one
   screen without scrolling, even on a 1366x768 laptop — verified with
   Playwright at 1366x768 / 1440x900 / 1920x1080.
   =========================================================== */
.story { background: var(--color-bg); padding: 4.4rem 0; }
.story-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3.6rem;
  align-items: center;
}
.story-img-wrap {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.story-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-img--tall {
  aspect-ratio: 3 / 4.1;
  /* Biased toward the bottom of the frame so both #YPIP shirts stay
     fully visible (a center crop clips the second shirt's logo). */
  object-position: 50% 75%;
}
.story-img--tall img { object-position: 50% 75%; }
.story-img--wide {
  /* V4.15: near-native aspect of the source photo so it shows essentially
     whole, uncropped, rather than force-fit into the old tall portrait
     frame. Text column narrows to compensate so both columns still read
     as the same height. */
  aspect-ratio: 4 / 3;
}
.story-caption { padding: 1.6rem 1.3rem 1rem; }

.story-headline {
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0 0 1.3rem;
}
.story-body {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--color-ink-soft);
  max-width: none;
  margin: 0 0 1.05rem;
}
.story-body:last-of-type { margin-bottom: 0; }
.story-accent-line {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  margin: 1.4rem 0 0;
}

@media (max-width: 860px) {
  .story-inner { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ===========================================================
   Shared Experiences — V4.5: true single-featured-photo carousel,
   ported from ypip.life's own #gallery carousel (dark section,
   letterboxed uncropped photos, corner caption, glass-morphism
   arrow buttons, dot pagination). Built entirely from data in
   script.js GALLERY_DATA — see buildCarousel() there.
   =========================================================== */
.gallery-section { background: var(--color-ink); padding: 2.75rem 0; }
.gallery-section .gallery-header { margin-bottom: clamp(28px, 4vw, 44px); }
.gallery-section .eyebrow { color: rgba(255,255,255,0.45); }
.gallery-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-white);
  margin: 0 0 0.5rem;
}
.gallery-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  user-select: none;
}
.carousel-track {
  display: flex;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.carousel-slide { flex: 0 0 100%; position: relative; }
.carousel-img-wrap {
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 72vh;
  min-height: 260px;
  overflow: hidden;
}
.carousel-img-wrap img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  display: block;
}
.carousel-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.carousel-caption .loc { font-weight: 600; }
.carousel-caption .act { opacity: 0.85; }
.carousel-caption .loc::after { content: "\00b7"; margin: 0 0.5em; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
  z-index: 2;
  font-size: 0.85rem;
}
.carousel-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); }
.carousel-btn--prev { left: 1rem; }
.carousel-btn--next { right: 1rem; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem 0 0;
}
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.carousel-dot.active { background: var(--color-accent); transform: scale(1.4); }

@media (max-width: 640px) {
  .carousel-btn { width: 36px; height: 36px; }
}

.gallery-cta {
  margin-top: clamp(24px, 4vw, 36px);
}
.gallery-cta .editorial-lede { color: var(--color-white); margin-bottom: 8px; }
.gallery-cta p.body-text { margin-left: auto; margin-right: auto; margin-bottom: 12px; color: rgba(255,255,255,0.6); }
.coming-soon {
  display: inline-block;
  margin-top: 2px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: rgba(198,226,77,0.12);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.coming-soon:hover { background: rgba(198,226,77,0.22); transform: translateY(-2px); }

/* ===========================================================
   Join the List — V4.4: two columns. Left = live site's actual
   signup content/fields/button (floating-label inputs, ported
   from ypip.life's own spacing/type scale). Right = dev's
   "Why Join" benefits list. Both share a Syne headline treatment
   for visual parity; dev's pill CTA button is kept intentionally.
   =========================================================== */
.join { background: var(--color-bg-alt); }
.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.join-headline {
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0 0 1rem;
}
.join-sub {
  color: var(--color-ink-soft);
  margin: 0 0 2.4rem;
}

.why-list {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-list li {
  font-size: 1.02rem;
  color: var(--color-ink-soft);
  padding-left: 26px;
  position: relative;
}
.why-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--color-accent-deep);
  font-weight: 600;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-wrap { position: relative; }
.field-wrap input {
  width: 100%;
  padding: 21px 16px 9px;
  border-radius: 6px;
  border: 1.5px solid var(--color-line);
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color 0.2s var(--ease);
}
.field-wrap label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.98rem;
  color: var(--color-ink-soft);
  pointer-events: none;
  transition: 0.2s var(--ease);
  background: transparent;
}
.field-wrap label .optional { font-weight: 400; opacity: 0.75; }
.field-wrap input:focus,
.field-wrap input:not(:placeholder-shown) {
  outline: none;
  border-color: var(--color-accent-deep);
}
.field-wrap input:focus + label,
.field-wrap input:not(:placeholder-shown) + label {
  top: 11px;
  transform: translateY(0);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.join-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.form-note { margin-top: 4px; font-size: 0.92rem; color: var(--color-accent-deep); min-height: 1.2em; }
.form-privacy {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .join-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .join-why-col { border-top: 1px solid var(--color-line); padding-top: 36px; margin-top: 6px; }
}

/* ===========================================================
   Footer — V4.11: "Follow the Play" (icons/handles ported from
   ypip.life's own #social section) now lives inline inside this beige
   footer row instead of its own white section, so the page doesn't grow
   an extra band and the footer's overall height stays the same.
   =========================================================== */
.site-footer {
  padding: 48px 0 28px;
  border-top: 1px solid var(--color-line);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-bottom: 24px;
}
.footer-logo { margin: 0; }
.footer-tagline { color: var(--color-ink-soft); font-size: 0.9rem; margin: 6px 0 0; }
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.footer-social-label {
  font-family: var(--font-hero);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.85rem;
  color: var(--color-ink);
  white-space: nowrap;
}
.social-icons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border: 1.5px solid var(--color-line);
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.social-link:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: var(--color-white);
  transform: translateY(-2px);
}
.social-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-links a {
  text-decoration: none;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  transition: color .2s var(--ease);
}
.footer-links a:hover { color: var(--color-accent-deep); }
.footer-disabled {
  color: #B7B4A9;
  font-size: 0.92rem;
  cursor: not-allowed;
}
.footer-copy {
  text-align: center;
  color: #A7A599;
  font-size: 0.82rem;
  margin: 0;
}