/* ============================================================
   Girls in the Pit — styles.css
   Cut-paper zine aesthetic. Cream + charcoal + oxblood.
   Mobile-first, accessible, Netlify-ready.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --cream: #f3ebdd;
  --paper: #e7dccb;
  --paper-2: #ede2d0;
  --charcoal: #111111;
  --soft-black: #1c1a18;
  --oxblood: #8f1d1d;
  --faded-red: #a83732;
  --dusty-blush: #d9a3a0;
  --blush-soft: #e9c4c1;
  --ink-gray: #33302d;
  --ink-soft: #4a463f;
  --muted-taupe: #b8aa99;
  --hot-pink: #e84393;

  --f-display: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif;
  --f-zine: "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace;
  --f-body: "Fraunces", "Georgia", "Times New Roman", serif;

  --wrap: 1200px;
  --shadow-deep: 0 18px 40px -20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2);
  --shadow-card: 0 10px 24px -16px rgba(0,0,0,.45);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@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;
  }
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-gray);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--oxblood);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s var(--ease);
}
a:hover { color: var(--faded-red); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--oxblood); color: var(--cream); }

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--oxblood); color: var(--cream);
  padding: .75rem 1.25rem;
  font-family: var(--f-zine); font-size: 14px;
  z-index: 999; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.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;
}

.grain {
  position: fixed; inset: 0;
  pointer-events: none; opacity: .12; z-index: 1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.anim-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.anim-section.anim-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .anim-section { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--charcoal); color: var(--cream);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -13px; height: 14px;
  background: var(--charcoal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,14 1160,4 1140,9 C1120,14 1100,3 1080,8 C1060,13 1040,5 1020,11 C1000,15 980,4 960,9 C940,14 920,5 900,10 C880,15 860,4 840,9 C820,14 800,5 780,10 C760,15 740,4 720,9 C700,14 680,5 660,10 C640,15 620,4 600,9 C580,14 560,5 540,10 C520,15 500,4 480,9 C460,14 440,5 420,10 C400,15 380,4 360,9 C340,14 320,5 300,10 C280,15 260,4 240,9 C220,14 200,5 180,10 C160,15 140,4 120,9 C100,14 80,5 60,10 C40,15 20,4 0,9 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,14 1160,4 1140,9 C1120,14 1100,3 1080,8 C1060,13 1040,5 1020,11 C1000,15 980,4 960,9 C940,14 920,5 900,10 C880,15 860,4 840,9 C820,14 800,5 780,10 C760,15 740,4 720,9 C700,14 680,5 660,10 C640,15 620,4 600,9 C580,14 560,5 540,10 C520,15 500,4 480,9 C460,14 440,5 420,10 C400,15 380,4 360,9 C340,14 320,5 300,10 C280,15 260,4 240,9 C220,14 200,5 180,10 C160,15 140,4 120,9 C100,14 80,5 60,10 C40,15 20,4 0,9 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
}
.header-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0; min-height: 64px; position: relative;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--cream); }
.brand-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; clip-path: circle(50%); }

.site-nav { display: flex; align-items: center; }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 1.6rem;
  font-family: var(--f-zine); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}
.nav-list a {
  color: var(--cream); text-decoration: none;
  padding: .5rem 0; position: relative; display: inline-block;
}
.nav-list a:hover { color: var(--dusty-blush); }
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--oxblood);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav-list a:hover::after, .nav-list a:focus-visible::after { transform: scaleX(1); }
.nav-list .nav-cta {
  background: var(--oxblood); color: var(--cream);
  padding: .65rem 1.1rem; border: 1px solid rgba(255,255,255,.1);
  letter-spacing: .12em;
}
.nav-list .nav-cta::after { display: none; }
.nav-list .nav-cta:hover { background: var(--faded-red); color: var(--cream); }

.nav-toggle {
  display: none; background: transparent; border: 0;
  width: 44px; height: 44px; padding: 10px; cursor: pointer; color: var(--cream);
}
.nav-toggle span {
  display: block; height: 2px; background: var(--cream);
  margin: 5px 0; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-list {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--charcoal); padding: 1rem 1.25rem 1.5rem;
    gap: 0; transform: translateY(-12px); opacity: 0;
    pointer-events: none; transition: transform .2s var(--ease), opacity .2s var(--ease);
    font-size: 15px; z-index: 49;
  }
  .nav-list.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-list li { border-bottom: 1px dashed rgba(255,255,255,.12); }
  .nav-list li:last-child { border-bottom: 0; padding-top: .5rem; }
  .nav-list a { display: block; padding: 1rem 0; min-height: 44px; }
  .nav-list .nav-cta { margin-top: .5rem; text-align: center; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--cream);
  padding: 3rem 0 5rem; overflow-x: hidden; overflow-y: visible;
}
.hero::before {
  content: ""; position: absolute;
  left: -4%; right: -4%; top: 14%; height: 72%;
  background: var(--dusty-blush); opacity: .4; z-index: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'><path d='M40,80 C120,40 180,90 260,60 C340,30 420,95 510,70 C600,45 690,100 780,75 C870,55 940,90 980,70 L985,330 C920,365 830,335 740,360 C650,380 560,330 470,355 C380,375 290,335 200,360 C120,380 60,345 25,365 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'><path d='M40,80 C120,40 180,90 260,60 C340,30 420,95 510,70 C600,45 690,100 780,75 C870,55 940,90 980,70 L985,330 C920,365 830,335 740,360 C650,380 560,330 470,355 C380,375 290,335 200,360 C120,380 60,345 25,365 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}

.hero-wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem; align-items: center;
}

.hero-left { position: relative; display: flex; align-items: center; justify-content: center; }
.gitp-mark {
  width: clamp(180px, 22vw, 300px); height: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  clip-path: circle(50%);
}

.hero-center { position: relative; }
.hero-headline {
  font-family: var(--f-zine); font-weight: 400;
  font-size: clamp(2rem, 2.8vw + .8rem, 3.2rem);
  line-height: 1.05; color: var(--ink-gray);
  margin: 0 0 1rem; letter-spacing: -.005em;
}
.hero-headline .hl-line-1 { display: block; margin-bottom: .35rem; }
.hero-headline .hl-tag {
  display: inline-block; background: var(--charcoal); color: var(--cream);
  padding: .12em .45em .2em; border-bottom: 3px solid var(--oxblood);
}
.hero-lede {
  font-family: var(--f-zine); font-size: 1rem; color: var(--ink-soft);
  line-height: 1.55; margin: 0 0 1.5rem; max-width: 28ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .65rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-zine); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; padding: .9rem 1.3rem; min-height: 48px;
  border: 1.5px solid var(--charcoal); border-radius: 0;
  background: transparent; color: var(--charcoal); cursor: pointer;
  text-decoration: none; position: relative;
  transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--dusty-blush); border-color: var(--charcoal); color: var(--charcoal);
}
.btn-primary:hover { background: var(--blush-soft); color: var(--charcoal); }
.btn-solid { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.btn-solid:hover { background: var(--faded-red); color: var(--cream); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(17,17,17,.05); }

/* Hero collage */
.hero-collage {
  position: relative; min-height: 420px;
}
.collage-frame {
  position: absolute; overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.collage-frame img, .collage-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.frame-video {
  width: 80%; aspect-ratio: 4/3; top: 0; left: 0;
  background: var(--soft-black); border: 6px solid var(--cream);
  transform: rotate(-3deg);
}
.frame-polaroid {
  width: 50%; bottom: -22%; right: -2%;
  transform: rotate(4deg); z-index: 2;
  border-radius: 0;
  box-shadow: none;
}
.frame-polaroid img {
  border-radius: 0;
}

.tape-strip {
  position: absolute; z-index: 4;
  background: rgba(222,204,160,.55);
}
.tape-top {
  top: -6px; left: 20%; width: 60%; height: 18px;
  transform: rotate(-1deg);
}

.collage-star {
  position: absolute; top: -10px; right: 30%;
  width: 32px; color: var(--oxblood); z-index: 5;
  transform: rotate(12deg);
}
.collage-camera {
  position: absolute; bottom: 5%; right: -2%;
  width: 52px; color: var(--charcoal); opacity: .18; z-index: 1;
}

@media (max-width: 960px) {
  .hero { padding: 2rem 0 2.5rem; }
  .hero-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-left { justify-content: center; }
  .gitp-mark { width: 160px; }
  .hero-headline { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-collage {
    position: relative; min-height: 280px;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: .75rem;
  }
  .collage-frame { position: relative; transform: none !important; }
  .frame-video { width: 100%; grid-column: 1; grid-row: 1; }
  .frame-polaroid {
    width: 100%;
    grid-column: 2; grid-row: 1;
    position: relative; top: auto; right: auto; bottom: auto;
  }
  .collage-star, .collage-camera { display: none; }
  .tape-strip { display: none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-strip {
  position: relative; background: var(--charcoal); color: var(--cream);
  padding: 1.1rem 0; overflow: hidden; margin-top: -1px;
}
.marquee-strip::before, .marquee-strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background: var(--charcoal); pointer-events: none;
}
.marquee-strip::before {
  top: -13px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}
.marquee-strip::after {
  bottom: -13px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,4 1160,12 1140,7 C1120,3 1100,11 1080,8 C1060,4 1040,10 1020,5 C1000,2 980,11 960,7 C940,3 920,11 900,6 C880,2 860,11 840,7 C820,3 800,10 780,5 C760,2 740,11 720,7 C700,3 680,10 660,5 C640,2 620,11 600,7 C580,3 560,10 540,5 C520,2 500,11 480,7 C460,3 440,10 420,5 C400,2 380,11 360,7 C340,3 320,10 300,5 C280,2 260,11 240,7 C220,3 200,10 180,5 C160,2 140,11 120,7 C100,3 80,10 60,5 C40,2 20,11 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,4 1160,12 1140,7 C1120,3 1100,11 1080,8 C1060,4 1040,10 1020,5 C1000,2 980,11 960,7 C940,3 920,11 900,6 C880,2 860,11 840,7 C820,3 800,10 780,5 C760,2 740,11 720,7 C700,3 680,10 660,5 C640,2 620,11 600,7 C580,3 560,10 540,5 C520,2 500,11 480,7 C460,3 440,10 420,5 C400,2 380,11 360,7 C340,3 320,10 300,5 C280,2 260,11 240,7 C220,3 200,10 180,5 C160,2 140,11 120,7 C100,3 80,10 60,5 C40,2 20,11 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}

.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.marquee-content {
  display: flex; align-items: center; gap: 1.4rem;
  font-family: var(--f-zine); font-size: clamp(.85rem, 1.2vw, 1.05rem);
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; padding-right: 1.4rem;
}
.marquee-content span {
  color: var(--cream);
}
.marquee-content span:nth-child(odd) {
  color: var(--dusty-blush);
}
.marquee-content span:nth-child(3n) {
  color: var(--oxblood);
  background: rgba(243,235,221,.08);
  padding: .15em .5em;
}
.marquee-star {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--oxblood);
}

/* ============================================================
   FEATURES — WHO WE ARE + 4 CARDS
   ============================================================ */
.features {
  background: var(--cream); padding: 4rem 0 4.5rem; position: relative;
}
.features-grid {
  display: grid; grid-template-columns: 1fr 3fr; gap: 3rem;
}
.features-intro .who-label {
  display: inline-block; background: var(--charcoal); color: var(--cream);
  font-family: var(--f-zine); font-size: 12px;
  letter-spacing: .2em; padding: .4rem .8rem; margin-bottom: 1rem;
}
.features-intro p {
  font-family: var(--f-zine); font-size: 1rem; line-height: 1.65;
  color: var(--ink-gray); margin: 0 0 1.25rem;
}
.features-intro .learn-more {
  font-family: var(--f-zine); font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--oxblood); text-decoration: none;
  border-bottom: 1px solid var(--oxblood); padding-bottom: 2px;
}
.features-intro .learn-more:hover { color: var(--faded-red); border-color: var(--faded-red); }

.feature-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; position: relative;
}
.feature-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; position: relative; padding: 0 1rem;
}
.feature-card + .feature-card { border-left: 1px dashed rgba(17,17,17,.18); }
.feature-icon {
  width: 96px; height: 96px; margin-bottom: 1rem;
  display: grid; place-items: center; position: relative;
}
.feature-icon svg { width: 100%; height: 100%; }
.feature-card h3 {
  font-family: var(--f-zine); font-size: 1rem; letter-spacing: .15em;
  text-transform: uppercase; margin: .25rem 0 .5rem; color: var(--charcoal);
}
.feature-card p {
  font-family: var(--f-zine); font-size: .95rem; line-height: 1.55;
  margin: 0 0 1rem; color: var(--ink-soft);
}
.feature-cta {
  font-family: var(--f-zine); font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oxblood); text-decoration: none;
  border-bottom: 1px solid var(--oxblood); padding-bottom: 2px; margin-top: auto;
}
.feature-cta:hover { color: var(--faded-red); border-color: var(--faded-red); }

@media (max-width: 980px) {
  .features-grid { grid-template-columns: 1fr; gap: 2rem; }
  .feature-cards { grid-template-columns: 1fr; gap: 0; }
  .feature-card {
    display: grid; grid-template-columns: 80px 1fr; gap: 1rem;
    align-items: start; padding: 1.1rem 0;
    border-left: 0 !important; border-bottom: 1px dashed rgba(17,17,17,.18);
  }
  .feature-card:last-child { border-bottom: 0; }
  .feature-icon { width: 80px; height: 80px; margin-bottom: 0; }
  .feature-card h3 { margin-top: 0; }
}

/* ============================================================
   THE CREW
   ============================================================ */
.the-crew {
  background: var(--charcoal); color: var(--cream);
  padding: 4rem 0 4.5rem; position: relative; overflow: hidden;
}
.the-crew::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
  background: var(--charcoal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}
.the-crew .section-header h2 { color: var(--cream); }
.the-crew .section-tag { background: var(--dusty-blush); color: var(--charcoal); }

.crew-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.crew-member {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 1.5rem; align-items: start;
  background: var(--soft-black);
  border: 1px dashed rgba(255,255,255,.12);
  padding: 2rem;
}
.crew-photo {
  width: 140px; height: 140px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--dusty-blush);
  flex-shrink: 0;
}
.crew-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.crew-photo--initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--oxblood);
  font-family: var(--f-display); font-size: 3.5rem;
  color: var(--cream); letter-spacing: 0;
  border-color: var(--oxblood);
}
.crew-info h3 {
  font-family: var(--f-zine); font-size: 1.2rem;
  margin: 0 0 .25rem; color: var(--cream);
  letter-spacing: .08em; text-transform: uppercase;
}
.crew-role {
  display: inline-block;
  font-family: var(--f-zine); font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hot-pink); margin-bottom: .75rem;
}
.crew-info p {
  font-family: var(--f-zine); font-size: .92rem;
  line-height: 1.6; color: rgba(243,235,221,.75);
  margin: 0;
}

@media (max-width: 980px) {
  .crew-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .crew-member {
    grid-template-columns: 100px 1fr;
    gap: 1rem; padding: 1.25rem;
  }
  .crew-photo { width: 100px; height: 100px; }
}

/* ============================================================
   EPISODES
   ============================================================ */
.episodes {
  background: var(--charcoal); color: var(--cream);
  padding: 4rem 0 5rem; position: relative; overflow: hidden;
}
.episodes::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
  background: var(--charcoal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}

.section-header {
  margin-bottom: 2.5rem;
}
.section-tag {
  display: inline-block;
  background: var(--dusty-blush); color: var(--charcoal);
  font-family: var(--f-zine); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .4rem .9rem; margin-bottom: .75rem;
}
.section-header h2 {
  font-family: var(--f-zine);
  font-size: clamp(1.6rem, 2.4vw + .6rem, 2.3rem);
  line-height: 1.15; margin: 0;
  letter-spacing: .02em;
}
.episodes .section-header h2 { color: var(--cream); }

.episode-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.episode-card {
  background: var(--soft-black);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease);
}
.episode-card:hover { transform: translateY(-3px); }

.episode-art {
  aspect-ratio: 1; overflow: hidden; position: relative;
}
.episode-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.episode-info {
  padding: 1.25rem 1.25rem 1.5rem; flex: 1;
  display: flex; flex-direction: column;
}
.ep-label {
  font-family: var(--f-zine); font-size: 12px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--hot-pink); margin-bottom: .5rem;
}
.episode-info h3 {
  font-family: var(--f-zine); font-size: clamp(.9rem, 1.1vw, 1.05rem);
  line-height: 1.35; margin: 0 0 .75rem; color: var(--cream);
  font-weight: 400;
}
.episode-info p {
  font-family: var(--f-zine); font-size: .88rem;
  line-height: 1.55; color: rgba(243,235,221,.7);
  margin: 0 0 1rem;
}
.ep-recorded {
  display: block;
  font-family: var(--f-zine); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-taupe); margin-bottom: .75rem;
}
.btn-ep {
  margin-top: auto;
  background: transparent; border-color: var(--hot-pink); color: var(--hot-pink);
  font-size: 12px; padding: .7rem 1rem;
}
.btn-ep:hover {
  background: var(--hot-pink); color: var(--charcoal);
}

@media (max-width: 860px) {
  .episodes { padding: 3rem 0 3.5rem; }
  .episode-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .episode-card { max-width: 500px; }
}

/* ============================================================
   PIT DIGEST (newsletter)
   ============================================================ */
.pit-digest {
  position: relative; background: var(--cream);
  padding: 4rem 0; overflow: hidden;
}
.pit-digest::before {
  content: ""; position: absolute;
  left: -4%; right: 30%; top: 4%; bottom: 4%;
  background: var(--dusty-blush); opacity: .5; z-index: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'><path d='M30,60 C100,30 180,80 260,55 C340,30 420,90 510,65 C600,40 690,90 780,60 L780,330 C720,360 630,340 540,360 C460,380 370,340 280,360 C200,380 120,345 40,365 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'><path d='M30,60 C100,30 180,80 260,55 C340,30 420,90 510,65 C600,40 690,90 780,60 L780,330 C720,360 630,340 540,360 C460,380 370,340 280,360 C200,380 120,345 40,365 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}
.pit-digest-wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,.7fr);
  gap: 2.5rem; align-items: center;
}
.digest-title {
  font-family: var(--f-zine);
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
  line-height: 1; margin: 0; color: var(--charcoal);
  letter-spacing: -.01em; text-transform: uppercase;
}
.digest-title .digest-line-1, .digest-title .digest-line-2 {
  display: inline-block; background: var(--cream);
  padding: .1em .55em; box-shadow: 2px 4px 0 rgba(0,0,0,.06);
}
.digest-title .digest-line-1 { margin-bottom: .3rem; }
.digest-star { width: 22px; color: var(--oxblood); display: inline-block; vertical-align: middle; }
.digest-copy {
  font-family: var(--f-zine); font-size: 1rem; line-height: 1.55;
  color: var(--ink-gray); margin: 0 0 1.25rem;
}
.digest-form .field { margin: 0 0 .75rem; }
.digest-form input[type="email"] {
  width: 100%; font-family: var(--f-zine); font-size: 1rem;
  padding: .95rem 1rem; background: var(--cream); color: var(--ink-gray);
  border: 1.5px solid var(--charcoal); border-radius: 0;
}
.digest-form input::placeholder { color: var(--muted-taupe); }
.digest-form .form-help {
  font-family: var(--f-zine); font-size: 12.5px;
  color: var(--ink-soft); margin: .65rem 0 0;
}
.digest-form .form-help a { color: var(--oxblood); }
.digest-form .btn-solid { width: 100%; }

.digest-photo { position: relative; }
.digest-photo .dp-img {
  width: 100%; aspect-ratio: 4/5; background: var(--charcoal);
  border: 6px solid var(--cream); box-shadow: var(--shadow-deep);
  overflow: hidden; transform: rotate(3deg);
}
.digest-photo .dp-img svg, .digest-photo .dp-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.digest-heart {
  position: absolute; top: -18px; right: 8px;
  width: 42px; color: var(--oxblood); transform: rotate(8deg);
}
.hp-field {
  position: absolute !important; left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 980px) {
  .pit-digest { padding: 3rem 0; }
  .pit-digest-wrap { grid-template-columns: 1fr; gap: 1.25rem; }
  .digest-photo { display: none; }
  .pit-digest::before { right: -4%; }
}

/* ============================================================
   UPCOMING FESTIVALS
   ============================================================ */
.festivals {
  background: var(--cream); padding: 4rem 0 4.5rem;
  position: relative;
}
.festivals .section-header h2 { color: var(--charcoal); }

.festival-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.festival-card {
  background: var(--paper-2); border: 1.5px dashed var(--muted-taupe);
  padding: 1.25rem 1.25rem 1rem; position: relative;
  font-family: var(--f-zine);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.festival-card:hover {
  transform: translateY(-2px) rotate(-.5deg);
  box-shadow: var(--shadow-card);
}
.fest-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: .25rem .55rem; margin-bottom: .6rem;
  font-family: var(--f-zine);
}
.fest-badge:nth-child(1) {
  background: var(--oxblood); color: var(--cream);
}
.festival-card:nth-child(even) .fest-badge {
  background: var(--charcoal); color: var(--cream);
}
.festival-card h3 {
  font-family: var(--f-zine); font-size: 1rem;
  margin: 0 0 .35rem; color: var(--charcoal);
  letter-spacing: .04em;
}
.fest-date {
  font-size: .9rem; color: var(--ink-gray);
  margin: 0 0 .15rem; line-height: 1.4;
}
.fest-loc {
  font-size: .8rem; color: var(--muted-taupe);
  margin: 0; letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .festival-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .festival-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DENVER / COLORADO LOCAL SCENE
   ============================================================ */
.local-scene {
  background: var(--charcoal); color: var(--cream);
  padding: 4rem 0 5rem; position: relative; overflow: hidden;
}
.local-scene::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
  background: var(--charcoal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}
.local-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 14px;
  background: var(--charcoal); z-index: 2;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,4 1160,12 1140,7 C1120,3 1100,11 1080,8 C1060,4 1040,10 1020,5 C1000,2 980,11 960,7 C940,3 920,11 900,6 C880,2 860,11 840,7 C820,3 800,10 780,5 C760,2 740,11 720,7 C700,3 680,10 660,5 C640,2 620,11 600,7 C580,3 560,10 540,5 C520,2 500,11 480,7 C460,3 440,10 420,5 C400,2 380,11 360,7 C340,3 320,10 300,5 C280,2 260,11 240,7 C220,3 200,10 180,5 C160,2 140,11 120,7 C100,3 80,10 60,5 C40,2 20,11 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,8 C1180,4 1160,12 1140,7 C1120,3 1100,11 1080,8 C1060,4 1040,10 1020,5 C1000,2 980,11 960,7 C940,3 920,11 900,6 C880,2 860,11 840,7 C820,3 800,10 780,5 C760,2 740,11 720,7 C700,3 680,10 660,5 C640,2 620,11 600,7 C580,3 560,10 540,5 C520,2 500,11 480,7 C460,3 440,10 420,5 C400,2 380,11 360,7 C340,3 320,10 300,5 C280,2 260,11 240,7 C220,3 200,10 180,5 C160,2 140,11 120,7 C100,3 80,10 60,5 C40,2 20,11 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}

.local-header {
  max-width: 640px;
}
.section-tag--red {
  background: var(--oxblood); color: var(--cream);
}
.local-scene .section-header h2 { color: var(--cream); }
.local-intro {
  font-family: var(--f-zine); font-size: 1rem;
  line-height: 1.6; color: rgba(243,235,221,.75);
  margin: .75rem 0 0; max-width: 56ch;
}

.local-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 2.5rem;
}
.local-card {
  background: var(--soft-black);
  border: 1px dashed rgba(255,255,255,.15);
  padding: 1.25rem; position: relative;
  font-family: var(--f-zine);
  transition: transform .15s var(--ease);
}
.local-card:hover { transform: translateY(-2px); }
.local-badge {
  display: inline-block; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .2rem .5rem; margin-bottom: .6rem;
  background: var(--oxblood); color: var(--cream);
  font-family: var(--f-zine);
}
.local-card h3 {
  font-family: var(--f-zine); font-size: 1rem;
  margin: 0 0 .4rem; color: var(--cream); font-weight: 400;
}
.local-card p {
  font-size: .88rem; line-height: 1.5;
  color: rgba(243,235,221,.65); margin: 0;
}

@media (max-width: 860px) {
  .local-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .local-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FROM THE PIT — photo grid
   ============================================================ */
.from-the-pit {
  background: var(--cream); padding: 3rem 0 4rem;
}
.ftp-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.ftp-head h2 {
  font-family: var(--f-zine);
  font-size: clamp(1.5rem, 2vw + .8rem, 2.1rem);
  letter-spacing: .04em; margin: 0; color: var(--charcoal);
  text-transform: uppercase;
}
.ftp-head p {
  font-family: var(--f-zine); font-size: 1rem;
  color: var(--ink-soft); margin: .25rem 0 0;
}
.ftp-instagram {
  font-family: var(--f-zine); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oxblood); text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 2px; white-space: nowrap;
}
.ftp-instagram:hover { color: var(--faded-red); border-color: var(--faded-red); }

.photo-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem;
}
.photo-cell {
  aspect-ratio: 3/4; background: var(--charcoal);
  overflow: hidden; position: relative; margin: 0;
}
.photo-cell svg, .photo-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 980px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}
@media (max-width: 600px) {
  .from-the-pit { padding: 2rem 0 2.5rem; }
  .photo-grid {
    display: flex; gap: .5rem; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem; scrollbar-width: thin;
  }
  .photo-cell {
    flex: 0 0 60%; aspect-ratio: 3/4; scroll-snap-align: start;
  }
}

/* ============================================================
   SIGN-OFF STRIP
   ============================================================ */
.signoff {
  position: relative; background: var(--charcoal); color: var(--cream);
  padding: 4rem 0 5rem; overflow: hidden;
}
.signoff::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
  background: var(--charcoal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0,14 L1200,14 L1200,6 C1180,10 1160,2 1140,7 C1120,12 1100,3 1080,7 C1060,12 1040,4 1020,9 C1000,13 980,3 960,7 C940,12 920,4 900,9 C880,13 860,3 840,7 C820,12 800,4 780,9 C760,13 740,3 720,7 C700,12 680,4 660,9 C640,13 620,3 600,7 C580,12 560,4 540,9 C520,13 500,3 480,7 C460,12 440,4 420,9 C400,13 380,3 360,7 C340,12 320,4 300,9 C280,13 260,3 240,7 C220,12 200,4 180,9 C160,13 140,3 120,7 C100,12 80,4 60,9 C40,13 20,3 0,7 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
}
.signoff-wrap {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2rem; align-items: center;
}
.signoff-text {
  font-family: var(--f-zine);
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.2; margin: 0; color: var(--cream);
}
.signoff-text .so-line { display: block; margin-bottom: .35rem; }
.signoff-text .so-emph {
  display: inline-block; background: var(--oxblood); color: var(--cream);
  padding: .1em .5em .15em;
}
.signoff-heart {
  display: inline-block; color: var(--oxblood); width: 28px;
  vertical-align: middle; margin: 0 .4rem;
}
.signoff-camera {
  width: clamp(100px, 14vw, 180px); color: var(--cream); opacity: .15;
}

@media (max-width: 860px) {
  .signoff { padding: 2.5rem 0 3rem; }
  .signoff-wrap { grid-template-columns: 1fr; }
  .signoff-camera { width: 100px; margin-top: 1rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ── Social Section ─────────────────────── */
.social-section {
  background: var(--soft-black);
  padding: 3.5rem 0 3rem;
  border-top: 3px dashed var(--oxblood);
  position: relative; z-index: 2;
}
.social-heading {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 2rem;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.5rem 1rem;
  background: rgba(243, 235, 221, .06);
  border: 2px dashed rgba(143, 29, 29, .5);
  border-radius: 6px;
  text-decoration: none;
  color: var(--cream);
  transition: transform .25s var(--ease),
              box-shadow .25s var(--ease),
              border-color .25s var(--ease),
              background .25s var(--ease);
  cursor: pointer;
}
.social-card:hover,
.social-card:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 24px rgba(143, 29, 29, .35), 0 0 0 1px var(--oxblood);
  border-color: var(--oxblood);
  background: rgba(143, 29, 29, .12);
}
.social-card:focus-visible {
  outline: 2px solid var(--dusty-blush);
  outline-offset: 3px;
}
.social-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(143, 29, 29, .18);
  border-radius: 50%;
  transition: background .25s var(--ease);
}
.social-card:hover .social-card-icon-wrap {
  background: rgba(143, 29, 29, .35);
}
.social-card-icon {
  width: 28px;
  height: 28px;
  color: var(--cream);
  object-fit: contain;
}
.social-card-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
}
.social-card-handle {
  font-family: var(--f-zine);
  font-size: .8rem;
  color: var(--dusty-blush);
  opacity: .85;
}

@media (max-width: 768px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .social-section { padding: 2.5rem 0 2rem; }
}
@media (max-width: 420px) {
  .social-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .social-card { padding: 1.2rem .75rem; }
  .social-card-icon-wrap { width: 48px; height: 48px; }
  .social-card-icon { width: 24px; height: 24px; }
  .social-card-handle { font-size: .72rem; }
}

/* ── Footer ────────────────────────────── */
.site-footer {
  background: var(--charcoal); color: var(--cream);
  padding: 2.5rem 0 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 2;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem; align-items: start;
}
.footer-brand { max-width: 32ch; }
.footer-brand .gitp-mini { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; clip-path: circle(50%); margin-bottom: .75rem; display: block; }
.footer-brand p {
  font-family: var(--f-zine); font-size: .9rem;
  line-height: 1.55; color: rgba(243,235,221,.78); margin: 0;
}
.footer-col { min-width: 0; }
.footer-col h4 {
  font-family: var(--f-zine); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a {
  font-family: var(--f-zine); font-size: 14px;
  color: rgba(243,235,221,.85); text-decoration: none;
}
.footer-col a:hover { color: var(--dusty-blush); }
.footer-col .icn {
  display: inline-block; width: 16px; margin-right: .5rem;
  vertical-align: -3px; color: var(--cream);
}
.footer-legal {
  font-family: var(--f-zine); font-size: 13px;
  color: rgba(243,235,221,.75); line-height: 1.65; margin: 0;
}
.footer-legal .ftr-star {
  color: var(--oxblood); width: 16px; height: 16px;
  vertical-align: -2px; margin-right: .35rem;
}
.footer-legal a { color: rgba(243,235,221,.75); text-decoration: underline; }
.footer-legal a:hover { color: var(--dusty-blush); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .collage-frame, .digest-photo .dp-img, .digest-heart {
    transform: none !important;
  }
}