/* ==========================================================================
   Home page — unified entry with three distinct brand "zones"
   ========================================================================== */

body.brand-home {
  background: #fffdf7;
}

/* ---------- Hero ---------- */
.home-hero {
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(245,179,1,.15), transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(95,44,130,.14), transparent 60%),
    #fffdf7;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(17,17,17,.08);
}
.home-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
@media (max-width: 880px) { .home-hero__grid { grid-template-columns: 1fr; } }

.home-hero__copy h1 { font-family: "Fraunces", serif; }
.home-hero__copy h1 em { font-style: italic; color: #5F2C82; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.home-hero__collage {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .75rem;
  aspect-ratio: 1.1 / 1;
  max-width: 540px; margin-left: auto;
}
.home-hero__collage .tile {
  background: #eee center/cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.home-hero__collage .tile--pop { grid-row: 1 / span 2; background-color: #F5E6C8; }
.home-hero__collage .tile--fun {
  background: linear-gradient(135deg, #FF006E 0%, #C6FF00 100%);
  display: grid; place-items: center; color: #000;
  font-family: "Bungee", Impact, sans-serif; font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  text-align: center; padding: 1rem;
}
.home-hero__collage .tile--fun::before {
  content: "FUNROCK'N";
  letter-spacing: -.02em;
}
.home-hero__collage .tile--cre {
  background:
    radial-gradient(circle at 65% 45%, #0D1B2A 45%, transparent 46%),
    linear-gradient(180deg, #0D1B2A, #102239);
  position: relative;
}
.home-hero__collage .tile--cre::after {
  content: "";
  position: absolute;
  width: 58%; height: 58%; left: 22%; top: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 50%, #0D1B2A 50%, #C7A961 51%);
  box-shadow: inset 0 0 0 1px #C7A961;
}

/* ---------- Brand zones ---------- */
.home-brands { display: grid; }

.zone { position: relative; overflow: hidden; }
.zone__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
  max-width: var(--max); margin: 0 auto;
}
.zone__grid--flip .zone__text { order: 2; }
.zone__grid--flip .zone__art { order: 1; }

@media (max-width: 880px) {
  .zone__grid { grid-template-columns: 1fr; }
  .zone__grid--flip .zone__text { order: 1; }
  .zone__grid--flip .zone__art { order: 2; }
}

.zone__ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.zone__art {
  aspect-ratio: 4/5;
  border-radius: 6px;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  min-height: 320px;
}
.big-type {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .88;
  letter-spacing: -.03em;
  text-align: center;
}
.big-type--serif { font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic; }
.big-type em { font-style: italic; font-weight: 400; }

/* Pop City zone */
.zone--popcity {
  background:
    radial-gradient(ellipse at 10% 20%, rgba(245,179,1,.18), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(233,30,99,.12), transparent 60%),
    #FFF7E8;
  color: #2A1240;
}
.zone--popcity .eyebrow { color: #5F2C82; letter-spacing: .18em; }
.zone--popcity .h2 em { color: #E91E63; font-style: italic; }
.zone--popcity .btn { background: #5F2C82; border-color: #5F2C82; color: #fff; }
.zone--popcity .btn--ghost { background: transparent; color: #5F2C82; }
.zone--popcity .btn--ghost:hover { background: #5F2C82; color: #fff; }
.zone__art--popcity {
  background: linear-gradient(135deg, #5F2C82 0%, #E91E63 65%, #F5B301 100%);
  color: #FFF7E8;
}
.zone__art--popcity .big-type { font-style: italic; }

/* Funrock'n zone */
.zone--funrockn {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 85% 15%, rgba(255,0,110,.28), transparent 55%),
    radial-gradient(circle at 5% 90%, rgba(198,255,0,.18), transparent 55%),
    #0A0A0A;
  color: #fff;
}
.zone--funrockn .eyebrow { color: #C6FF00; letter-spacing: .22em; }
.zone--funrockn h2 { text-transform: uppercase; font-family: "Bungee", Impact, sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -.01em; line-height: 1; }
.zone--funrockn .lede { color: #cfcfcf; }
.zone--funrockn .btn {
  background: #C6FF00; color: #000; border-color: #C6FF00;
  border-radius: 0; text-transform: uppercase; font-weight: 700;
  box-shadow: 6px 6px 0 #FF006E;
}
.zone--funrockn .btn:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 #FF006E; }
.zone--funrockn .btn--ghost { background: transparent; color: #C6FF00; box-shadow: none; border: 2px solid #C6FF00; }
.zone--funrockn .btn--ghost:hover { background: #C6FF00; color: #000; }
.zone__art--funrockn {
  background:
    radial-gradient(circle at 30% 30%, #FF006E 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, #FF7A00 0%, transparent 55%),
    #0A0A0A;
  color: #C6FF00;
}
.zone__art--funrockn .big-type {
  font-family: "Bungee", Impact, sans-serif;
  -webkit-text-stroke: 2px #C6FF00;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* Crescent Collection zone */
.zone--crescent {
  background:
    radial-gradient(ellipse at 85% 30%, rgba(199,169,97,.18), transparent 60%),
    linear-gradient(180deg, #0D1B2A 0%, #102239 100%);
  color: #F4EFE6;
}
.zone--crescent .eyebrow { color: #C7A961; letter-spacing: .32em; font-weight: 500; }
.zone--crescent h2 { font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic; font-size: clamp(2rem, 4vw, 3.2rem); }
.zone--crescent h2 em { color: #C7A961; }
.zone--crescent .lede { color: rgba(244,239,230,.72); }
.zone--crescent .btn { background: transparent; color: #C7A961; border: 1px solid #C7A961; letter-spacing: .18em; font-size: .8rem; }
.zone--crescent .btn:hover { background: #C7A961; color: #0D1B2A; }
.zone--crescent .btn--ghost { color: #F4EFE6; border-color: rgba(244,239,230,.35); }
.zone--crescent .btn--ghost:hover { background: #F4EFE6; color: #0D1B2A; }
.zone__art--crescent {
  background:
    radial-gradient(circle at 70% 50%, transparent 45%, rgba(199,169,97,.08) 46%, transparent 48%),
    linear-gradient(180deg, #0D1B2A, #1a2f49);
  position: relative;
}
.zone__art--crescent .moon {
  position: absolute; left: 20%; top: 18%;
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 68% 50%, #0D1B2A 50%, #C7A961 51%);
  box-shadow: inset 0 0 0 1px #C7A961;
}
.zone__art--crescent .big-type {
  position: relative; color: #F4EFE6;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  margin-top: 30%;
}

/* ---------- Visit strip ---------- */
.home-visit { background: #faf7f1; border-top: 1px solid rgba(17,17,17,.08); }
.home-visit__head { max-width: 48ch; margin: 0 auto 2.5rem; text-align: center; }
.home-visit__list { margin-top: 1rem; }
.visit-card {
  background: #fff;
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 6px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.visit-card:hover { border-color: #5F2C82; transform: translateY(-2px); }
.visit-card__tag {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #5F2C82; margin: 0 0 .5rem;
}
.visit-card h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.visit-card p { margin: 0 0 .4rem; font-size: .95rem; color: #444; }
.visit-card a { color: #5F2C82; }
.visit-card a:hover { text-decoration: underline; }