/* =========================================================
   BELLEVINA — stylesheet
   "the music of remembering" — sacred + psychological, analog texture
   palette: sky-blue ivory / parchment / dusty rose / deep ochre / deep teal / forest shadow
   ========================================================= */

:root{
  --ivory: #b3dff6;
  --parchment: #a4cee2;
  --parchment-dark: #8fb7cc;
  --ink: #3f2415;
  --ink-soft: #75502e;
  --dusty-rose: #e2703c;
  --deep-ochre: #d6337a;
  --deep-teal: #4a5320;
  --forest-shadow: #2b1c10;
  --gold: #f2a63d;
  --gold-soft: rgba(242,166,61,0.35);
  --kicker: #a3391b; /* readable rust-terracotta for section labels on light backgrounds (WCAG AA) */

  --serif: "Poppins", Arial, sans-serif;
  --display: "Alfa Slab One", "Poppins", sans-serif;
  --hand: "Pacifico", cursive;
  --swash: "Lobster", cursive;

  /* flower-power accents — bold, saturated 1960s palette */
  --sunflower: #f2a63d;
  --sunflower-center: #6b3a12;
  --poppy: #e2432f;
  --berry: #d6337a;
  --berry-dark: #9c1f56;
  --thistle: #7c8c4a;
  --daisy-cream: #fff6e0;
  --leaf: #6b7f3a;
  --shimmer: #f2c14e;

  --max: 1180px;
  --edge: clamp(1.25rem, 5vw, 4rem);
  --speed: 700ms;
  --ease: cubic-bezier(.16,.8,.24,1);

  --cursor-flower: url("../images/cursor-flower.png") 20 20, auto;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:var(--cursor-flower);
}

@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; }
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.01em;
  margin:0 0 0.6em;
  color:var(--forest-shadow);
}
h1{ font-size:clamp(2.3rem,6.4vw,4.8rem); line-height:1.08; text-transform:lowercase; }
h2{ font-size:clamp(1.7rem,4vw,2.6rem); text-transform:lowercase; }
h3{ font-size:clamp(1.15rem,2.3vw,1.5rem); text-transform:lowercase; }
p{ margin:0 0 1.1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.accent{ font-family:var(--hand); color:var(--deep-ochre); font-size:1.3em; }
.gold{ color:var(--gold); }

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

/* ---------- film grain + vignette (analog texture, whole site) ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); } 75%{ transform:translate(-1%,-1%); }
  100%{ transform:translate(0,0); }
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--edge);
  background:linear-gradient(to bottom, rgba(179,223,246,0.92), rgba(179,223,246,0));
  transition:background var(--speed) var(--ease);
}
.site-nav.is-solid{ background:rgba(179,223,246,0.96); backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(63,36,21,0.08); }
.site-nav .wordmark{ font-size:1.35rem; letter-spacing:0.06em; text-transform:lowercase; display:inline-block; }
.site-nav .wordmark em{ font-style:normal; font-family:var(--swash); color:var(--berry); font-size:1.08em; }
.wordmark-logo{ height:88px; width:auto; display:block; }
.wordmark-logo-footer{ height:80px; position:relative; top:8px; }
@media (max-width:760px){
  .wordmark-logo{ height:58px; }
}
.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-size:0.95rem; text-transform:lowercase; letter-spacing:0.04em;
  position:relative; padding-bottom:2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold);
  transition:right var(--speed) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--forest-shadow); color:var(--ivory);
    flex-direction:column; gap:1.8rem; padding:6rem 2.2rem;
    transform:translateX(100%); transition:transform var(--speed) var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--ivory); font-size:1.15rem; }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer; z-index:210;
    width:34px; height:22px; position:relative;
  }
  .nav-toggle span{ position:absolute; left:0; right:0; height:1px; background:var(--ink); transition:transform var(--speed) var(--ease), opacity var(--speed); }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:50%; }
  .nav-toggle span:nth-child(3){ bottom:0; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }
}

/* ---------- hero (CSS-only "light through glass") ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, rgba(242,193,78,0.16), transparent 60%),
    linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 55%, var(--ivory) 100%);
}
.hero::before{ /* groovy sunburst rays, centered behind the headline — signature 1960s poster device */
  content:""; position:absolute; top:50%; left:50%; width:min(140vw,1400px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(242,166,61,0.4) 0deg 8deg, transparent 8deg 16deg);
  border-radius:50%; mix-blend-mode:multiply; opacity:0.5;
  animation:beam-drift 90s linear infinite;
}
@keyframes beam-drift{ from{ transform:translate(-50%,-50%) rotate(0deg);} to{ transform:translate(-50%,-50%) rotate(360deg);} }
.hero::after{ /* soft vignette */
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 22vw rgba(43,28,16,0.28);
  pointer-events:none;
}
.hero-motes{ position:absolute; inset:0; pointer-events:none; }
.mote{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--shimmer); opacity:0.6; filter:blur(0.5px); box-shadow:0 0 6px 1px rgba(242,193,78,0.5);
  animation:mote-rise linear infinite;
}
@keyframes mote-rise{
  0%{ transform:translateY(10vh) translateX(0); opacity:0; }
  10%{ opacity:0.6; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-70vh) translateX(20px); opacity:0; }
}

.hero-inner{ position:relative; z-index:2; max-width:840px; padding:0 var(--edge); }
.hero-eyebrow{
  display:inline-block; font-family:var(--hand); font-size:1.5rem; color:var(--deep-ochre);
  margin-bottom:0.4rem; opacity:0; animation:rise var(--speed) var(--ease) forwards; animation-delay:0.2s;
}
.hero h1{ opacity:0; animation:rise 900ms var(--ease) forwards; animation-delay:0.45s; }
.hero .hero-sub{
  max-width:520px; margin:1.2rem auto 0; font-size:1.05rem; color:var(--ink-soft);
  opacity:0; animation:rise var(--speed) var(--ease) forwards; animation-delay:0.8s;
}
.hero-cta{
  margin-top:2.4rem; display:inline-flex; gap:1.4rem; align-items:center;
  opacity:0; animation:rise var(--speed) var(--ease) forwards; animation-delay:1.05s;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-size:0.75rem; letter-spacing:0.18em; text-transform:lowercase; color:var(--ink-soft);
  opacity:0; animation:rise var(--speed) var(--ease) forwards; animation-delay:1.3s;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--deep-ochre),transparent); animation:cue-pulse 2.2s ease-in-out infinite; }
@keyframes cue-pulse{ 0%,100%{ opacity:0.3;} 50%{ opacity:1;} }

/* ---------- wordmark banner (illustrated artwork) ---------- */
.wordmark-banner{
  position:relative; width:100%; aspect-ratio:1983/793; overflow:hidden;
  background:var(--ivory); margin:clamp(-13rem,-14vw,-3rem) 0 0; z-index:1;
}
.wordmark-banner img{ width:100%; height:100%; object-fit:fill; display:block; }
.wordmark-banner::after{ /* feathers the image's top & bottom edges into the page background so there's no hard seam */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--ivory) 0%, rgba(179,223,246,0) 9%, rgba(179,223,246,0) 91%, var(--ivory) 100%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 1.9rem; border-radius:999px; font-size:0.92rem; letter-spacing:0.03em;
  border:1px solid var(--forest-shadow); transition:all var(--speed) var(--ease); text-transform:lowercase;
}
.btn-primary{ background:var(--forest-shadow); color:var(--ivory); }
.btn-primary:hover{ background:var(--berry-dark); transform:translateY(-2px) rotate(-0.5deg); box-shadow:0 10px 26px -6px rgba(214,51,122,0.45); }
.btn-ghost{ background:transparent; color:var(--forest-shadow); }
.btn-ghost:hover{ background:var(--berry); border-color:var(--berry); color:var(--daisy-cream); }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 110ms); }

/* ---------- section rhythm ---------- */
section{ position:relative; padding:clamp(4.5rem,10vw,8rem) 0; }
.section-teal{ background:var(--deep-teal); color:var(--parchment); }
.section-teal h2, .section-teal h3{ color:var(--ivory); }
.section-teal p{ color:rgba(244,217,160,0.82); }
.section-forest{ background:var(--forest-shadow); color:var(--parchment); }
.section-forest h2{ color:var(--ivory); }

/* ---------- pop-art scrapbook (Warhol-repeat + cut-and-paste collage) ---------- */
.section-pop{
  background:var(--berry-dark); color:var(--daisy-cream);
  position:relative; overflow:hidden;
}
.section-pop::before{ /* Ben-Day halftone dot texture, screenprint style */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,246,224,0.16) 1.4px, transparent 1.6px);
  background-size:10px 10px;
}
.section-pop h2{ color:var(--daisy-cream); }
.section-pop .kicker{ color:var(--gold); }
.section-pop p{ color:rgba(255,246,224,0.78); }

.warhol-grid{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  max-width:720px; margin:2.6rem auto 0; padding:4px;
  background:var(--forest-shadow); border-radius:2px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,0.5);
}
@media (max-width:700px){ .warhol-grid{ grid-template-columns:repeat(2,1fr); max-width:400px; } }
.warhol-tile{ position:relative; aspect-ratio:1; overflow:hidden; }
.warhol-tile img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.25) brightness(1.05); }
.warhol-tile::after{ content:""; position:absolute; inset:0; mix-blend-mode:color; opacity:0.95; }
.warhol-tile.t1::after{ background:var(--gold); }
.warhol-tile.t2::after{ background:var(--berry); }
.warhol-tile.t3::after{ background:var(--deep-teal); }
.warhol-tile.t4::after{ background:var(--poppy); }

.divider{
  width:64px; height:1px; margin:1.6rem auto; background:var(--gold); opacity:0.6;
}
.divider.left{ margin-left:0; }
.kicker{
  font-family:var(--hand); font-size:1.35rem; color:var(--kicker);
}
.section-teal .kicker, .section-forest .kicker{ color:var(--gold); } /* gold reads clearly on the dark plum/forest sections */

/* ---------- statement / mission block ---------- */
.statement{ text-align:center; max-width:760px; margin:0 auto; }
.statement blockquote{
  font-size:clamp(1.5rem,3.4vw,2.3rem); font-style:italic; line-height:1.4; margin:0;
  color:var(--forest-shadow);
}
.section-teal .statement blockquote{ color:var(--ivory); }

/* ---------- two-col ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }

.frame{
  position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(242,193,78,0.25), transparent 55%),
    linear-gradient(160deg, var(--parchment-dark), var(--dusty-rose) 55%, var(--deep-teal) 130%);
  box-shadow:0 30px 60px -20px rgba(43,28,16,0.35);
}
.frame::after{
  content:""; position:absolute; inset:0;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.frame .frame-label{
  position:absolute; bottom:1.2rem; left:1.2rem; color:var(--ivory);
  font-family:var(--hand); font-size:1.1rem; opacity:0.85; z-index:1;
}
.frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* ---------- video frame: fills its column, echoing the full-height portrait clip ----------
   Used where a .frame holds real footage instead of a color placeholder. */
.frame-video{ aspect-ratio:4/5; background:var(--forest-shadow); }
.frame-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* ---------- music page: track cards ---------- */
.track-list{ display:flex; flex-direction:column; }
.track{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:1.6rem; align-items:center;
  padding:2.2rem 0; border-bottom:1px solid rgba(63,36,21,0.12);
}
.section-teal .track{ border-bottom-color:rgba(244,217,160,0.18); }
.track .num{ font-family:var(--hand); font-size:1.6rem; color:var(--gold); width:2.4rem; }
.track h3{ margin:0 0 0.3rem; }
.track .meta{ font-size:0.85rem; letter-spacing:0.04em; text-transform:lowercase; color:var(--deep-ochre); }
.section-teal .track .meta{ color:var(--gold); }
.track .links{ display:flex; gap:1rem; }
.track .links a{ font-size:0.85rem; text-decoration:underline; text-underline-offset:3px; }

/* ---------- music page: polaroid photo slot ---------- */
.track-polaroid{
  display:block; position:relative; width:132px; flex-shrink:0; background:#fbf6ec; padding:0.6rem 0.6rem 1.7rem;
  box-shadow:0 8px 16px rgba(43,28,16,0.28); border-radius:2px;
  transform:rotate(-4deg); transition:transform 0.25s ease; cursor:pointer;
}
.track:nth-child(even) .track-polaroid{ transform:rotate(3deg); }
.track-polaroid:hover{ transform:rotate(0deg) scale(1.04); }
.track-polaroid .polaroid-photo{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  background:linear-gradient(135deg, rgba(63,36,21,0.08), rgba(63,36,21,0.03));
}
.track-polaroid .polaroid-slot{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; aspect-ratio:1/1; background:rgba(63,36,21,0.06);
  border:1.5px dashed rgba(63,36,21,0.28);
  font-family:var(--hand); font-size:0.72rem; color:rgba(63,36,21,0.55); line-height:1.3; padding:0.4rem;
}
/* the "sticker" caption — a little peeling label slapped on the bottom border,
   like an old cassette or photo-album tag, instead of plain printed text */
.track-polaroid .polaroid-sticker{
  position:absolute; left:50%; bottom:0.55rem; transform:translateX(-50%) rotate(-3deg);
  display:inline-block; max-width:calc(100% - 0.6rem);
  background:var(--gold); color:#3c2410;
  font-family:var(--hand); font-size:0.8rem; line-height:1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  padding:0.32rem 0.6rem 0.38rem; border-radius:2px;
  box-shadow:0 3px 5px rgba(43,28,16,0.35), inset 0 0 0 1px rgba(255,255,255,0.3);
  letter-spacing:0.01em;
}
.track:nth-child(even) .track-polaroid .polaroid-sticker{
  transform:translateX(-50%) rotate(2.5deg); background:var(--deep-ochre); color:#fbe4ea;
}
@media (max-width:700px){
  .track{ grid-template-columns:auto auto 1fr; row-gap:0.8rem; }
  .track .links{ grid-column:1 / -1; }
  .track-polaroid{ width:92px; padding:0.4rem 0.4rem 1.25rem; }
  .track-polaroid .polaroid-sticker{ font-size:0.62rem; padding:0.24rem 0.45rem 0.28rem; }
}

/* ---------- lyric strip ---------- */
.lyric-strip{ overflow:hidden; white-space:nowrap; padding:1.4rem 0; border-top:1px solid var(--gold-soft); border-bottom:1px solid var(--gold-soft);
}
.lyric-strip .track-text{
  display:inline-block; font-family:var(--hand); font-size:1.6rem; color:var(--deep-ochre);
  animation:marquee 32s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- cards grid (journal / press) ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.card{
  background:var(--parchment); padding:2.2rem; border-radius:3px;
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(43,28,16,0.3); }

/* ---------- tour table ---------- */
.tour-list{ border-top:1px solid rgba(63,36,21,0.14); }
.tour-row{
  display:grid; grid-template-columns:1fr 2fr 1fr auto; gap:1.2rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid rgba(63,36,21,0.14);
}
@media (max-width:700px){ .tour-row{ grid-template-columns:1fr; gap:0.4rem; text-align:left; } }
.tour-row .date{ font-family:var(--hand); font-size:1.3rem; color:var(--deep-ochre); }
.empty-state{ 
  text-align:center; padding:3.5rem var(--edge); border:1px dashed var(--gold-soft); border-radius:4px;
}

/* ---------- newsletter / notify form (mailto fallback, no backend) ---------- */
.notify-form{ display:flex; gap:0.8rem; max-width:420px; margin:1.6rem auto 0; }
.notify-form input{
  flex:1; padding:0.85rem 1.1rem; border:1px solid rgba(63,36,21,0.25); border-radius:999px;
  font-family:var(--serif); font-size:0.95rem; background:var(--ivory); color:var(--ink);
}
.notify-form input:focus{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- footer ---------- */
footer{
  background:var(--forest-shadow); color:rgba(244,217,160,0.75); padding:4rem var(--edge) 2.4rem;
}
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.4rem; max-width:var(--max); margin:0 auto; }
footer h3{ color:var(--ivory); font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1rem; }
footer a{ display:block; padding:0.3rem 0; font-size:0.92rem; }
footer a:hover{ color:var(--gold); }
.footer-base{
  max-width:var(--max); margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid rgba(244,217,160,0.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; font-size:0.8rem; color:rgba(244,217,160,0.5);
}

/* ---------- floral character: scattered blooms ---------- */
.bloom{
  position:absolute; pointer-events:none; z-index:2;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  filter:drop-shadow(0 6px 10px rgba(43,28,16,0.2));
  animation:sway 7s ease-in-out infinite alternate;
  transform-origin:50% 85%;
}
@keyframes sway{
  0%{ transform:rotate(-7deg) translateY(0) scale(1); }
  100%{ transform:rotate(7deg) translateY(-14px) scale(1.04); }
}
.bloom-sunflower{
  width:280px; height:280px;
  background-image:url("../images/blooms/bloom-sunflower.png");
}
.bloom-calla{
  width:220px; height:220px;
  background-image:url("../images/blooms/bloom-calla.png");
}
.bloom-hibiscus{
  width:230px; height:230px;
  background-image:url("../images/blooms/bloom-hibiscus.png");
}
.bloom-heart{
  width:200px; height:200px;
  background-image:url("../images/blooms/bloom-heart.png");
}
.bloom-poppy{
  width:240px; height:240px;
  background-image:url("../images/blooms/bloom-poppy.png");
}
.bloom-daisy{
  width:190px; height:190px;
  background-image:url("../images/blooms/bloom-daisy.png");
}
.bloom-thistle{
  width:220px; height:220px;
  background-image:url("../images/blooms/bloom-thistle.png");
}
.bloom-cosmos{
  width:210px; height:210px;
  background-image:url("../images/blooms/bloom-cosmos.png");
}
.bloom-iris{
  width:230px; height:230px;
  background-image:url("../images/blooms/bloom-iris.png");
}
.bloom-tulip{
  width:200px; height:200px;
  background-image:url("../images/blooms/bloom-tulip.png");
}
.bloom-leaf{
  width:150px; height:195px; animation-duration:9s;
  background-image:url("../images/blooms/bloom-leaf.png");
}
.bloom-sparkle{
  width:52px; height:52px; animation-duration:5s; filter:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='%23f2a63d'><path d='M20 2 C21 14 26 19 38 20 C26 21 21 26 20 38 C19 26 14 21 2 20 C14 19 19 14 20 2 Z'/></g><circle cx='32' cy='9' r='2.2' fill='%23f2c14e'/><circle cx='7' cy='31' r='1.8' fill='%23f2c14e'/></svg>");
}
@media (max-width:700px){
  .bloom-sunflower{ width:130px; height:130px; }
  .bloom-poppy{ width:112px; height:112px; }
  .bloom-daisy{ width:90px; height:90px; }
  .bloom-thistle{ width:104px; height:104px; }
  .bloom-cosmos{ width:100px; height:100px; }
  .bloom-leaf{ width:66px; height:86px; }
  .bloom-calla{ width:104px; height:104px; }
  .bloom-hibiscus{ width:108px; height:108px; }
  .bloom-heart{ width:96px; height:96px; }
  .bloom-sparkle{ width:26px; height:26px; }
  /* iris + tulip are sized for the roomy desktop hero/forest spots they sit in;
     the mobile layout there is already tightly tuned around text and the
     signup form, so these two stay desktop-only rather than risk overlap
     across the many phone heights we can't screenshot-test individually. */
  .bloom-iris, .bloom-tulip{ display:none; }
  /* these specific blooms sit tucked in near a hero eyebrow/heading or a track link on
     desktop's wider layout; on narrow phones the text column widens to fill the same
     space and the flower lands directly on top of the words. Hiding just this one bloom
     per section (same fix already used for iris/tulip above) clears the text without
     leaving any hero looking bare — each still keeps 2-3 other blooms. */
  .mobile-hide-bloom{ display:none; }
}

/* ---------- flower-bed divider (tiled illustrated strip) ---------- */
.flower-bed{
  height:64px;
  background-repeat:repeat-x; background-position:bottom center; background-size:140px 64px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70' width='140' height='70'><path d='M0 46 Q35 26 70 46 T140 46' stroke='%236b7f3a' stroke-width='2' fill='none'/><g transform='translate(30,10)'><g fill='%23fff6e0' stroke='%23e0c98a' stroke-width='1.1'><ellipse cx='6' cy='0' rx='2.2' ry='7'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(45 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(90 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(135 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(180 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(225 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(270 6 12)'/><ellipse cx='6' cy='0' rx='2.2' ry='7' transform='rotate(315 6 12)'/></g><circle cx='6' cy='12' r='4' fill='%23f2a63d'/></g><g transform='translate(80,18)'><g fill='%23e2432f'><circle cx='0' cy='0' r='5'/><circle cx='7' cy='0' r='5'/><circle cx='3' cy='6' r='5'/></g><circle cx='3' cy='2' r='2.6' fill='%238a2a12'/></g><path d='M15 46 q4 -10 -2 -16' stroke='%236b7f3a' stroke-width='1.6' fill='none'/><path d='M110 46 q-4 -8 3 -14' stroke='%236b7f3a' stroke-width='1.6' fill='none'/></svg>");
}
.flower-bed.small{ height:40px; background-size:100px 40px; }

/* ---------- cutout links (die-cut illustrated nav, scrapbook-style) ---------- */
section[aria-label="wander into her world"]{
  padding-bottom:clamp(0.5rem,2vw,1.5rem);
}
.cutout-links{
  position:relative; z-index:3;
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap:clamp(1.6rem,5vw,3.4rem);
  max-width:960px; margin:0 auto; padding:0.5rem var(--edge) 1rem;
}
.cutout{
  position:relative; display:flex; flex-direction:column; align-items:center;
  width:126px; text-decoration:none; text-align:center;
}
.cutout{ position:relative; }
.cutout::before{ /* groovy sunburst behind each die-cut icon */
  content:""; position:absolute; top:-4px; left:50%; width:132px; height:132px;
  transform:translate(-50%,0); border-radius:50%; z-index:0;
  background:repeating-conic-gradient(from 0deg, var(--gold) 0deg 11.25deg, var(--poppy) 11.25deg 22.5deg);
  opacity:0.28;
}
.cutout-img{
  --tilt:-5deg;
  position:relative; z-index:1;
  display:block; width:112px; height:112px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:
    drop-shadow(1.5px 0 0 var(--daisy-cream)) drop-shadow(-1.5px 0 0 var(--daisy-cream))
    drop-shadow(0 1.5px 0 var(--daisy-cream)) drop-shadow(0 -1.5px 0 var(--daisy-cream))
    drop-shadow(0 12px 18px rgba(43,28,16,0.3));
  transform:rotate(var(--tilt));
  transition:transform var(--speed) var(--ease);
}
.cutout:nth-child(2n) .cutout-img{ --tilt:4deg; }
.cutout:nth-child(3n) .cutout-img{ --tilt:-7deg; }
.cutout:nth-child(5n) .cutout-img{ --tilt:6deg; }
.cutout:hover .cutout-img,
.cutout:focus-visible .cutout-img{ transform:rotate(0deg) translateY(-9px) scale(1.07); }
.cutout:focus-visible{ outline:2px solid var(--berry); outline-offset:6px; border-radius:10px; }
.cutout-label{
  margin-top:0.7rem; font-family:var(--hand); font-size:1.4rem; line-height:1;
  color:var(--ink); transform:rotate(-2deg); transition:color var(--speed) var(--ease);
}
.cutout:nth-child(2n) .cutout-label{ transform:rotate(2deg); }
.cutout:hover .cutout-label{ color:var(--berry); }
.section-teal .cutout-label, .section-forest .cutout-label{ color:var(--ivory); }
.section-teal .cutout:hover .cutout-label, .section-forest .cutout:hover .cutout-label{ color:var(--gold); }

.cutout-record{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><circle cx='30' cy='30' r='27' fill='%232b1c10' stroke='%233f2415' stroke-width='1'/><circle cx='30' cy='30' r='21' fill='none' stroke='%23764f2e' stroke-width='0.6'/><circle cx='30' cy='30' r='16' fill='none' stroke='%23764f2e' stroke-width='0.6'/><circle cx='30' cy='30' r='11.5' fill='none' stroke='%23764f2e' stroke-width='0.6'/><ellipse cx='19' cy='17' rx='6' ry='11' fill='%23f8ecd4' opacity='0.12' transform='rotate(-30 19 17)'/><circle cx='30' cy='30' r='10' fill='%23f2a63d' stroke='%233f2415' stroke-width='0.8'/><circle cx='30' cy='30' r='3.2' fill='%23d6337a'/><circle cx='30' cy='30' r='1.4' fill='%232b1c10'/></svg>");
}
.cutout-mirror{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='27' y='36' width='6' height='20' rx='3' fill='%23e2703c' stroke='%233f2415' stroke-width='1'/><circle cx='30' cy='23' r='17' fill='%23fff6e0' stroke='%233f2415' stroke-width='1.3'><circle cx='30' cy='23' r='13.2' fill='none' stroke='%23f2a63d' stroke-width='2.2'/><circle cx='30' cy='37' r='3.4' fill='%23e2432f' stroke='%233f2415' stroke-width='0.6'/><path d='M23 15 L24.4 19 L28.4 19.4 L25.3 22 L26.3 26 L23 23.8 L19.7 26 L20.7 22 L17.6 19.4 L21.6 19 Z' fill='%23f2c14e' opacity='0.8'/></svg>");
}
.cutout-envelope{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='6' y='16' width='48' height='32' rx='2' fill='%23fff6e0' stroke='%233f2415' stroke-width='1.2'/><path d='M6 16 L30 35 L54 16' fill='none' stroke='%233f2415' stroke-width='1.2'/><path d='M6 48 L23 30' stroke='%23e0c98a' stroke-width='1'/><path d='M54 48 L37 30' stroke='%23e0c98a' stroke-width='1'/><circle cx='30' cy='32' r='8' fill='%23d6337a' stroke='%238a2a12' stroke-width='0.8'/><circle cx='30' cy='32' r='3' fill='%23f8ecd4' opacity='0.85'/></svg>");
}
.cutout-gift{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='10' y='24' width='40' height='28' fill='%237c8c4a' stroke='%233f2415' stroke-width='1.2'/><rect x='27' y='18' width='6' height='34' fill='%23f2a63d'/><rect x='10' y='34' width='40' height='6' fill='%23f2a63d'/><path d='M30 18 C22 7 12 11 19 18 C12 24 22 29 30 18 Z' fill='%23e2432f' stroke='%238a2a12' stroke-width='0.6'/><path d='M30 18 C38 7 48 11 41 18 C48 24 38 29 30 18 Z' fill='%23e2432f' stroke='%238a2a12' stroke-width='0.6'/><circle cx='30' cy='18' r='2.6' fill='%238a2a12'/></svg>");
}
.cutout-ribbon{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path d='M9 16 L51 16 L51 38 L30 48 L9 38 Z' fill='%23e2432f' stroke='%238a2a12' stroke-width='1.2'/><line x1='9' y1='16' x2='9' y2='38' stroke='%23f8ecd4' stroke-width='1.4' stroke-dasharray='2,3'/><line x1='51' y1='16' x2='51' y2='38' stroke='%23f8ecd4' stroke-width='1.4' stroke-dasharray='2,3'/><path d='M30 22 C31 27 34 29 39 30 C34 31 31 33 30 38 C29 33 26 31 21 30 C26 29 29 27 30 22 Z' fill='%23fff6e0'/></svg>");
}
@media (max-width:600px){
  .cutout{ width:98px; }
  .cutout-img{ width:88px; height:88px; }
  .cutout-label{ font-size:1.15rem; }
}

/* ---------- skip link / a11y ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--forest-shadow);
  padding:0.7rem 1.2rem; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* visually-hidden: present for screen readers / semantic heading order,
   invisible on screen. Used for section h2 labels that would otherwise
   duplicate a visible .kicker span. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- keyboard focus visibility (site-wide)
   Site already had bespoke focus states for .cutout and .notify-form input;
   this fills the gap for every other interactive element (nav links, buttons,
   track/footer links, nav toggle) so keyboard navigation is never invisible,
   without adding an outline to elements that already draw their own. */
a:focus-visible,
button:focus-visible,
input:focus-visible{ 
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
.btn:focus-visible{ outline-color:var(--berry); outline-offset:4px; }
.section-teal a:focus-visible, .section-forest a:focus-visible, .section-pop a:focus-visible{
  outline-color:var(--gold);
}
.nav-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- utility ---------- */
.center{ text-align:center; }
.mt-lg{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.small{ font-size:0.85rem; }