/* ============================================================
   PICKLED POEMS — Main Stylesheet v1
   All colours are CSS custom properties (design tokens).
   All hex values provisional — pending Andy's palette confirmation.
   Edit the :root block; the rest of the sheet follows automatically.
   Architecture: plain CSS, no preprocessor.
   Author: Vera, Brand Systems Engineer — 2026-07-20
============================================================ */

/* ============================================================
   1. DESIGN TOKENS — three-tier structure
      primitive (hex) -> semantic (--pp-*) -> component (inline use)
      Primitive values live ONLY in :root. No hex values in selectors.
============================================================ */
:root {
  /* --- Colour tokens: page backgrounds --- */
  --pp-bg-primary:     #E8D4A0;   /* Parchment — main page background        */
  --pp-bg-secondary:   #C8A87C;   /* Cottage Stone — alternate sections      */
  --pp-bg-dark:        #4A3018;   /* Dark Beam — footer, dark panels, nav    */

  /* --- Colour tokens: text --- */
  --pp-text-primary:   #4A3018;   /* Dark Beam — main body text              */
  --pp-text-secondary: #7C5230;   /* Aged Oak — captions, secondary          */
  --pp-text-on-dark:   #E8D4A0;   /* Parchment — text on dark backgrounds    */

  /* --- Colour tokens: brand accents --- */
  --pp-accent-red:     #CC1420;   /* Red Ribbon — primary CTA, active state  */
  --pp-glow-green:     #A8D428;   /* Magical Green-Gold — discovery glow     */
  --pp-glow-amber:     #E8A030;   /* Amber Glow — warmth, hover              */
  --pp-gold-thatch:    #C4A052;   /* Thatch Honey — borders, dividers        */

  /* --- Colour tokens: character palette (use sparingly) --- */
  --pp-hair-copper:    #B85C1E;
  --pp-denim:          #4A6A90;
  --pp-butter:         #F0C840;

  /* --- Colour tokens: firelight --- */
  --pp-fire-orange:    #E07820;
  --pp-fire-deep:      #D05A10;

  /* --- Typography --- */
  --pp-font-display:     'Finger Paint', system-ui, sans-serif;
  --pp-font-handwritten: 'Love Ya Like A Sister', cursive;
  --pp-font-body:        Georgia, 'Times New Roman', serif;

  /* --- Type scale (fluid via clamp) --- */
  --pp-text-hero:   clamp(2.25rem, 5.5vw, 4.5rem);
  --pp-text-h1:     clamp(1.875rem, 4vw,  3.25rem);
  --pp-text-h2:     clamp(1.375rem, 2.8vw, 2.25rem);
  --pp-text-h3:     clamp(1rem,     1.8vw, 1.375rem);
  --pp-text-body:   1.125rem;
  --pp-text-label:  1rem;
  --pp-text-small:  0.875rem;

  /* --- Spacing --- */
  --pp-space-xs:  0.5rem;
  --pp-space-sm:  1rem;
  --pp-space-md:  2rem;
  --pp-space-lg:  4rem;
  --pp-space-xl:  6rem;

  /* --- Border radius — nothing with hard 90-degree corners --- */
  --pp-radius-sm:   8px;
  --pp-radius-md:   12px;
  --pp-radius-lg:   20px;
  --pp-radius-pill: 100px;

  /* --- Motion — gentle over kinetic; nothing < 300ms, nothing bounces --- */
  --pp-ease:      400ms ease;
  --pp-ease-slow: 600ms ease;

  /* --- Layout --- */
  --pp-nav-height: 4.5rem;
  --pp-max-width:  1200px;
}


/* ============================================================
   2. RESET & BASE
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-body);
  color: var(--pp-text-primary);
  background-color: var(--pp-bg-primary);
  line-height: 1.7;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Display headings — Finger Paint only; do not synthesise bold */
h1,
h2,
h3 {
  font-family: var(--pp-font-display);
  font-weight: 400;
  line-height: 1.2;
}


/* ============================================================
   3. ACCESSIBILITY & UTILITIES
============================================================ */

/* Skip link */
.pp-skip-link {
  position: absolute;
  top: -200%;
  left: var(--pp-space-sm);
  z-index: 9999;
  padding: 0.5rem 1rem;
  background-color: var(--pp-bg-dark);
  color: var(--pp-text-on-dark);
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-label);
  border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
  transition: top 200ms;
}

.pp-skip-link:focus {
  top: 0;
}

/* Global focus ring */
:focus-visible {
  outline: 2px solid var(--pp-glow-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Layout container */
.pp-container {
  width: 100%;
  max-width: var(--pp-max-width);
  margin-inline: auto;
  padding-inline: var(--pp-space-md);
}


/* ============================================================
   4. NAVIGATION — fixed, dark beam, 88% opacity
      Brand: transparent jar icon (icon-jar.png) + wordmark text stack.
      Icon sits left of text; wordmark + byline stack as a column.
      Jar motif: subtle amber drop-shadow glow, brightens on hover.
============================================================ */
.pp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--pp-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pp-space-md);
  background-color: rgba(74, 48, 24, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(196, 160, 82, 0.18);
}

.pp-nav__brand {
  display: flex;
  flex-direction: row;   /* icon left, text-stack right */
  align-items: center;
  gap: 0.75rem;
  line-height: 1.1;
  text-decoration: none;
}

/* Transparent jar icon — no background, clean on dark-beam nav */
.pp-nav__icon {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* Jar glow motif: warm amber drop-shadow, matches brand's glow language */
  filter: drop-shadow(0 0 5px rgba(232, 160, 48, 0.30));
  transition: filter var(--pp-ease);
}

.pp-nav__brand:hover .pp-nav__icon,
.pp-nav__brand:focus-visible .pp-nav__icon {
  filter: drop-shadow(0 0 10px rgba(232, 160, 48, 0.60));
}

/* Text wrapper — keeps wordmark + byline as a column sub-stack */
.pp-nav__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
}

.pp-nav__wordmark {
  font-family: var(--pp-font-display);
  font-size: 1.375rem;
  color: var(--pp-text-on-dark);
  letter-spacing: 0.01em;
}

.pp-nav__byline {
  font-family: var(--pp-font-handwritten);
  font-size: 0.75rem;
  color: var(--pp-glow-amber);
}

.pp-nav__links {
  display: flex;
  gap: var(--pp-space-md);
  align-items: center;
}

.pp-nav__link {
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-label);
  color: var(--pp-text-on-dark);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color var(--pp-ease), border-color var(--pp-ease);
}

.pp-nav__link:hover,
.pp-nav__link:focus-visible {
  color: var(--pp-glow-amber);
  border-bottom-color: var(--pp-glow-amber);
  outline: none;
}

/* Hamburger button (mobile only, shown via media query) */
.pp-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--pp-radius-sm);
  transition: background-color var(--pp-ease);
}

.pp-nav__hamburger:hover,
.pp-nav__hamburger:focus-visible {
  background-color: rgba(232, 160, 48, 0.15);
  outline: 2px solid var(--pp-glow-amber);
  outline-offset: 2px;
}

.pp-nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--pp-text-on-dark);
  border-radius: 1px;
  transition: transform var(--pp-ease), opacity var(--pp-ease);
}

/* Hamburger open-state animations */
.pp-nav--open .pp-nav__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.pp-nav--open .pp-nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.pp-nav--open .pp-nav__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav — links slide down */
@media (max-width: 768px) {
  .pp-nav__hamburger {
    display: flex;
  }

  .pp-nav__links {
    position: absolute;
    top: var(--pp-nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: rgba(74, 48, 24, 0.97);
    padding-inline: var(--pp-space-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--pp-ease), padding var(--pp-ease);
    border-bottom: 1px solid rgba(196, 160, 82, 0.18);
  }

  .pp-nav--open .pp-nav__links {
    max-height: 320px;
    padding-block: var(--pp-space-md);
  }

  .pp-nav__link {
    padding-block: 0.875rem;
    width: 100%;
    border-bottom: 1px solid rgba(196, 160, 82, 0.18);
    font-size: 1.125rem;
  }

  .pp-nav__links li:last-child .pp-nav__link {
    border-bottom: none;
  }
}


/* ============================================================
   5. HERO — full-bleed video
      Desktop: calc(100vh - nav). Mobile: 70vh.
      Video: object-fit cover, aria-hidden (atmospheric, not primary content).
      Poster: frame_001 (title card cottage).
      Tagline: Finger Paint, white, fades in at 3s via CSS animation-delay.
      Unmute: positioned bottom-right, keyboard accessible, pill shape.
============================================================ */
.pp-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--pp-nav-height));
  margin-top: var(--pp-nav-height);
  overflow: hidden;
  background-color: var(--pp-bg-dark); /* solid fallback before poster loads */
}

.pp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient — bottom-weighted for tagline readability */
.pp-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.04)  0%,
    rgba(0, 0, 0, 0)     25%,
    rgba(0, 0, 0, 0)     45%,
    rgba(74, 48, 24, 0.35) 72%,
    rgba(74, 48, 24, 0.7)  100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Tagline container — centres text at bottom of hero */
.pp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
  pointer-events: none;
}

.pp-hero__tagline {
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-hero);
  color: #ffffff;
  /* Warm amber glow instead of hard shadow — brand-correct */
  text-shadow:
    0 0 48px rgba(232, 160, 48, 0.7),
    0 0 12px rgba(232, 160, 48, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
  padding-inline: var(--pp-space-sm);
  /*
   * Visibility is driven by JS timeupdate — NOT a CSS timer.
   * The tagline is gated on video.currentTime > TITLE_CARD_END (8.5s)
   * so it never overlaps Take2's baked-in title-card lettering.
   * If autoplay fails or the video is paused, opacity stays 0.
   */
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* JS adds this class once the video is past the title card */
.pp-hero__tagline--visible {
  opacity: 1;
}

/* Unmute affordance — bottom-right, pill, cream at 70% */
.pp-hero__unmute {
  position: absolute;
  bottom: var(--pp-space-md);
  right: var(--pp-space-md);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem 0.4rem 0.75rem;
  background-color: rgba(232, 212, 160, 0.72);
  color: var(--pp-text-primary);
  border: none;
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-small);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color var(--pp-ease),
    opacity          var(--pp-ease),
    transform        var(--pp-ease);
}

.pp-hero__unmute:hover,
.pp-hero__unmute:focus-visible {
  background-color: rgba(232, 212, 160, 0.94);
  outline: 2px solid var(--pp-glow-amber);
  outline-offset: 2px;
}

/* Strikethrough line on the speaker SVG — visible in muted state */
.pp-unmute-cross {
  display: block;
}

.pp-hero__unmute:not(.pp-hero__unmute--muted) .pp-unmute-cross {
  display: none;
}

/* Hidden state — after user unmutes via carousel click (sound on) */
.pp-hero__unmute--hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.88) translateY(4px);
}

@media (max-width: 640px) {
  .pp-hero {
    height: 70vh;
  }

  .pp-hero__unmute {
    bottom: var(--pp-space-sm);
    right: var(--pp-space-sm);
  }
}


/* ============================================================
   6. SCROLL CUE — below hero, once only
      Love Ya Like A Sister, warm brown, gentle fade-in.
============================================================ */
.pp-scroll-cue {
  background-color: var(--pp-bg-primary);
  text-align: center;
  padding-block: var(--pp-space-md);
  border-top: 1px solid rgba(196, 160, 82, 0.2);
  opacity: 0;
  animation: pp-fadein var(--pp-ease-slow) forwards;
  animation-delay: 800ms;
}

.pp-scroll-cue__text {
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-label);
  color: var(--pp-text-secondary);
  display: inline-block;
}


/* ============================================================
   7. ABOUT SECTION — What is Pickled Poems
      Background: Parchment.
      Logo JPG: left column (sits on parchment — no background mismatch).
      Body copy: Georgia (neither brand font for running paragraphs).
      Jar glow: CSS animation on the logo.
============================================================ */
.pp-about {
  background-color: var(--pp-bg-primary);
  padding-block: var(--pp-space-xl);
  border-top: 1px solid rgba(196, 160, 82, 0.22);
  opacity: 0;
  animation: pp-fadein var(--pp-ease-slow) forwards;
  animation-delay: 900ms;
}

.pp-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-space-lg);
  align-items: center;
}

.pp-about__logo-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pp-about__logo {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--pp-radius-lg);
  /* Jar glow — the central brand motif */
  filter: drop-shadow(0 0 10px rgba(232, 160, 48, 0.4));
  animation: pp-jar-pulse 4s ease-in-out infinite;
}

.pp-about__heading {
  font-size: var(--pp-text-h2);
  color: var(--pp-text-primary);
  margin-bottom: var(--pp-space-md);
}

/* Georgia body copy — brief is explicit: neither brand font for long paragraphs */
.pp-about__body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-body);
  color: var(--pp-text-primary);
  line-height: 1.72;
}

.pp-about__body p + p {
  margin-top: var(--pp-space-sm);
}

.pp-about__ctas {
  display: flex;
  gap: var(--pp-space-sm);
  margin-top: var(--pp-space-lg);
  flex-wrap: wrap;
}


/* ============================================================
   8. BUTTONS
      Primary: Red Ribbon background, white text.
      Secondary: transparent, gold-thatch border.
      Hover: amber glow (box-shadow) — not colour shift.
      Finger Paint face. No synthesised bold.
============================================================ */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.875rem;
  border-radius: var(--pp-radius-md);
  font-family: var(--pp-font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    box-shadow  var(--pp-ease),
    transform   var(--pp-ease),
    border-color var(--pp-ease),
    background-color var(--pp-ease);
  letter-spacing: 0.01em;
  line-height: 1;
}

.pp-btn--primary {
  background-color: var(--pp-accent-red);
  color: #ffffff;
}

.pp-btn--primary:hover,
.pp-btn--primary:focus-visible {
  box-shadow:
    0 0 0 3px rgba(232, 160, 48, 0.5),
    0 4px 18px rgba(204, 20, 32, 0.35);
  transform: translateY(-1px);
  outline: none;
}

.pp-btn--secondary {
  background-color: transparent;
  color: var(--pp-text-primary);
  border-color: var(--pp-gold-thatch);
}

.pp-btn--secondary:hover,
.pp-btn--secondary:focus-visible {
  border-color: var(--pp-glow-amber);
  box-shadow: 0 0 0 3px rgba(232, 160, 48, 0.3);
  outline: none;
}

/* Shop section CTA — larger variant */
.pp-btn--shop {
  background-color: var(--pp-accent-red);
  color: #ffffff;
  font-size: 1.25rem;
  padding: 1rem 2.75rem;
  border-radius: var(--pp-radius-lg);
}

.pp-btn--shop:hover,
.pp-btn--shop:focus-visible {
  box-shadow:
    0 0 0 4px rgba(232, 160, 48, 0.55),
    0 8px 28px rgba(204, 20, 32, 0.4);
  transform: translateY(-2px);
  outline: none;
}


/* ============================================================
   9. VIDEOS — carousel section
      Background: Cottage Stone (alternates with Parchment sections).
      Auto-scrolls via requestAnimationFrame in main.js.
      Pauses on hover / focus.
      Live tiles: clickable, amber glow on hover/active.
      Placeholder tiles: non-interactive, warm gradient backgrounds.
============================================================ */
.pp-videos {
  background-color: var(--pp-bg-secondary);
  padding-block: var(--pp-space-xl);
  overflow: hidden;
  border-top: 1px solid rgba(196, 160, 82, 0.22);
}

.pp-videos__heading {
  font-size: var(--pp-text-h2);
  color: var(--pp-text-primary);
  margin-bottom: var(--pp-space-lg);
  text-align: center;
}

/* Outer wrapper — clips overflow and holds edge fades */
.pp-carousel-outer {
  position: relative;
  overflow: hidden;
}

/* Warm edge fades — blend tiles into section background */
.pp-carousel-outer::before,
.pp-carousel-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}

.pp-carousel-outer::before {
  left: 0;
  background: linear-gradient(to right, var(--pp-bg-secondary), transparent);
}

.pp-carousel-outer::after {
  right: 0;
  background: linear-gradient(to left, var(--pp-bg-secondary), transparent);
}

/* Carousel track */
.pp-carousel {
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem var(--pp-space-md) 1.5rem;
  overflow-x: auto;
  /* Hide scrollbar — still touch-scrollable */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Suppress momentum-bounce janking the rAF loop on iOS */
  -webkit-overflow-scrolling: auto;
}

.pp-carousel::-webkit-scrollbar {
  display: none;
}

/* Aria-hidden clones: visually present, non-interactive */
.pp-carousel [aria-hidden="true"] {
  pointer-events: none;
  user-select: none;
}

/* ---- Individual tiles ---- */
.pp-carousel__tile {
  flex: 0 0 280px;
  width: 280px;
  background-color: var(--pp-bg-primary);
  border: 1px solid rgba(196, 160, 82, 0.38);
  border-radius: var(--pp-radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--pp-ease),
    transform  var(--pp-ease),
    opacity    var(--pp-ease);
}

/* Live tile — clickable */
.pp-carousel__tile--live {
  cursor: pointer;
}

.pp-carousel__tile--live:hover,
.pp-carousel__tile--live:focus-visible {
  box-shadow:
    0 0 0 2px var(--pp-glow-amber),
    0 6px 24px rgba(232, 160, 48, 0.4);
  transform: translateY(-3px);
  outline: none;
}

/* Active tile — amber glow border */
.pp-carousel__tile--active {
  box-shadow:
    0 0 0 2px var(--pp-glow-amber),
    0 4px 18px rgba(232, 160, 48, 0.35);
}

/* Placeholder — not interactive */
.pp-carousel__tile--placeholder {
  cursor: default;
  opacity: 0.88;
}

/* Thumbnail wrap */
.pp-carousel__thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--pp-bg-secondary);
}

.pp-carousel__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play icon — appears on hover over live tile */
.pp-carousel__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--pp-ease);
  background-color: rgba(74, 48, 24, 0.15);
}

.pp-carousel__tile--live:hover .pp-carousel__play-icon,
.pp-carousel__tile--live:focus-visible .pp-carousel__play-icon {
  opacity: 1;
}

/* "Now playing" badge */
.pp-carousel__now-playing {
  position: absolute;
  bottom: var(--pp-space-xs);
  left: var(--pp-space-xs);
  font-family: var(--pp-font-handwritten);
  font-size: 0.8125rem;
  color: #ffffff;
  background-color: rgba(204, 20, 32, 0.88);
  padding: 0.175rem 0.6rem;
  border-radius: var(--pp-radius-pill);
  opacity: 0;
  transition: opacity var(--pp-ease);
}

.pp-carousel__tile--active .pp-carousel__now-playing {
  opacity: 1;
}

/* Tile info */
.pp-carousel__info {
  padding: var(--pp-space-sm);
}

.pp-carousel__title {
  /* Finger Paint for carousel titles — brief §5.3 */
  font-family: var(--pp-font-display);
  font-size: 1rem;
  color: var(--pp-text-primary);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.pp-carousel__caption {
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-small);
  color: var(--pp-text-secondary);
  line-height: 1.45;
}

.pp-coming-soon {
  /* em inherits font-family; keep it in Love Ya Like A Sister */
  font-style: italic;
}

/* ---- Placeholder tile backgrounds — warm gradients, no cool greys ---- */
.pp-carousel__placeholder-img {
  width: 100%;
  height: 100%;
}

/* Garden in June — green-gold to straw to amber */
.pp-placeholder--garden {
  background: radial-gradient(
    ellipse at 55% 35%,
    #C8D070 0%,
    #E0B84C 38%,
    #C4924C 68%,
    #9C6828 100%
  );
}

/* Grandmother's Pantry — amber to dark oak */
.pp-placeholder--pantry {
  background: radial-gradient(
    ellipse at 50% 28%,
    #ECC860 0%,
    #C88038 42%,
    #9C5C20 72%,
    #6C3810 100%
  );
}

/* The Attic at Night — fire-amber to deep dark */
.pp-placeholder--attic {
  background: radial-gradient(
    ellipse at 42% 48%,
    #E8A830 0%,
    #C85C18 38%,
    #8C3010 68%,
    #3C1408 100%
  );
}

/* Fireflies and Foxgloves — green-gold to twilight amber */
.pp-placeholder--fireflies {
  background: radial-gradient(
    ellipse at 50% 55%,
    #B4CC40 0%,
    #A0B030 28%,
    #C4942C 56%,
    #7C5018 100%
  );
}

/* The Red Ribbon — cream warm to amber with red-deep edge */
.pp-placeholder--ribbon {
  background: radial-gradient(
    ellipse at 50% 38%,
    #F0D898 0%,
    #E4AE5C 36%,
    #C46830 65%,
    #8C2020 100%
  );
}

/* Mobile carousel */
@media (max-width: 640px) {
  .pp-carousel__tile {
    flex: 0 0 calc(100vw - 3rem);
    width: calc(100vw - 3rem);
  }

  .pp-carousel-outer::before,
  .pp-carousel-outer::after {
    width: 24px;
  }
}


/* ============================================================
   10. SHOP SECTION — dark panel, Red Ribbon CTA
============================================================ */
.pp-shop {
  background-color: var(--pp-bg-dark);
  padding-block: var(--pp-space-xl);
  text-align: center;
  border-top: 1px solid rgba(196, 160, 82, 0.18);
}

.pp-shop__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-md);
}

.pp-shop__heading {
  font-size: var(--pp-text-h1);
  color: var(--pp-text-on-dark);
}

.pp-shop__body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-body);
  color: rgba(232, 212, 160, 0.82);
  max-width: 480px;
  line-height: 1.68;
}


/* ============================================================
   11. ABOUT CAROL — bio section
       Logo on parchment — background matches, no mismatch.
============================================================ */
.pp-about-carol {
  background-color: var(--pp-bg-primary);
  padding-block: var(--pp-space-xl);
  border-top: 1px solid rgba(196, 160, 82, 0.22);
}

.pp-about-carol__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pp-space-lg);
  align-items: center;
}

.pp-about-carol__logo-wrap {
  display: flex;
  align-items: center;
}

.pp-about-carol__logo {
  width: 170px;
  height: 170px;
  object-fit: contain;
  border-radius: var(--pp-radius-md);
  /* Staggered glow animation — only one glow prominent at a time */
  filter: drop-shadow(0 0 8px rgba(232, 160, 48, 0.35));
  animation: pp-jar-pulse 4s ease-in-out infinite;
  animation-delay: 2s;
}

.pp-about-carol__heading {
  font-size: var(--pp-text-h2);
  color: var(--pp-text-primary);
  margin-bottom: var(--pp-space-sm);
}

.pp-about-carol__body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-body);
  color: var(--pp-text-primary);
  line-height: 1.72;
}

.pp-about-carol__body p + p {
  margin-top: var(--pp-space-sm);
}


/* ============================================================
   12. CONTACT SECTION
============================================================ */
.pp-contact {
  background-color: var(--pp-bg-secondary);
  padding-block: var(--pp-space-lg);
  text-align: center;
  border-top: 1px solid rgba(196, 160, 82, 0.22);
}

.pp-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-sm);
}

.pp-contact__heading {
  font-size: var(--pp-text-h2);
  color: var(--pp-text-primary);
}

.pp-contact__email {
  font-family: var(--pp-font-handwritten);
  font-size: 1.25rem;
}

.pp-contact__link {
  color: var(--pp-text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(74, 48, 24, 0.35);
  text-underline-offset: 3px;
  transition: color var(--pp-ease), text-decoration-color var(--pp-ease);
}

.pp-contact__link:hover,
.pp-contact__link:focus-visible {
  color: var(--pp-accent-red);
  text-decoration-color: var(--pp-accent-red);
  outline: none;
}


/* ============================================================
   13. FOOTER — dark beam, logo on cream card
       Tagline: Finger Paint (brief is explicit — "the seal on the bottom")
       Links: Love Ya Like A Sister, amber
============================================================ */
.pp-footer {
  background-color: var(--pp-bg-dark);
  padding-block: var(--pp-space-lg);
  border-top: 1px solid rgba(196, 160, 82, 0.18);
}

.pp-footer__inner {
  display: flex;
  align-items: center;
  gap: var(--pp-space-lg);
}

/* Cream card within dark footer — logo JPG needs matching background */
.pp-footer__logo-card {
  flex-shrink: 0;
  background-color: var(--pp-bg-primary);
  border-radius: var(--pp-radius-md);
  padding: var(--pp-space-sm);
  /* Clear space as per brand guidelines — cap-height on all four sides */
}

.pp-footer__logo {
  width: 128px;
  height: 128px;
  object-fit: contain;
  border-radius: var(--pp-radius-sm);
  display: block;
}

.pp-footer__content {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Tagline in Finger Paint — the seal on the jar's base */
.pp-footer__tagline {
  font-family: var(--pp-font-display);
  font-size: 1.5rem;
  color: var(--pp-text-on-dark);
  line-height: 1.2;
}

.pp-footer__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pp-footer__link {
  font-family: var(--pp-font-handwritten);
  font-size: var(--pp-text-label);
  color: var(--pp-glow-amber);
  text-decoration: none;
  transition: color var(--pp-ease);
}

.pp-footer__link:hover,
.pp-footer__link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  outline: none;
}

.pp-footer__sep {
  color: rgba(196, 160, 82, 0.4);
  user-select: none;
}

.pp-footer__copy {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-small);
  color: rgba(232, 212, 160, 0.5);
  font-style: italic;
}


/* ============================================================
   14. KEYFRAME ANIMATIONS
       All durations >= 300ms. Nothing bounces or snaps.
       Glow pulses every 4s (3–5s range — brief §5.5).
============================================================ */

/* Jar glow pulse — 3 states to feel "alive" */
@keyframes pp-jar-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(232, 160, 48, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(232, 160, 48, 0.65));
  }
}

/* Section fade-in (below-hero; hero itself is animated by the video) */
@keyframes pp-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   15. RESPONSIVE OVERRIDES
============================================================ */

/* Tablet — stack about section */
@media (max-width: 900px) {
  .pp-about__inner {
    grid-template-columns: 1fr;
    gap: var(--pp-space-md);
  }

  .pp-about__logo-col {
    order: -1; /* logo first on mobile */
  }

  .pp-about__logo {
    max-width: 240px;
  }

  .pp-about-carol__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--pp-space-md);
  }

  .pp-about-carol__logo-wrap {
    justify-content: center;
  }

  .pp-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--pp-space-md);
  }

  .pp-footer__links {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --pp-space-lg: 3rem;
    --pp-space-xl: 4rem;
  }

  .pp-about__ctas {
    flex-direction: column;
  }

  .pp-btn {
    text-align: center;
    width: 100%;
  }

  .pp-videos__heading {
    padding-inline: var(--pp-space-md);
  }
}