/* ============================================================
   Krewe of Unicorns: shared artistic theme
   Magic & myth: iridescent violets, rainbow, gold sparkle,
   starlight parchment, and celestial flourishes.

   NOTE: CSS variable names and class names are intentionally kept
   the same as a traditional krewe build so every page's markup
   drops straight in. Only the *values* and motifs are enchanted.
   ============================================================ */

:root{
  /* violets (named "green" so inline var(--green-*) keeps working) */
  --green-900:#2a0a52;
  --green-800:#4c1d95;
  --green-700:#6d28d9;
  --green-600:#8b5cf6;
  --green-50:#f2e9ff;
  /* gold sparkle (the unicorn's horn) */
  --gold:#f5c542;
  --gold-light:#ffe694;
  --gold-deep:#c9971a;
  /* rainbow accents */
  --pink:#ec4899;
  --pink-light:#f9a8d4;
  --teal:#22d3ee;
  --mint:#5eead4;
  /* starlight parchment / neutrals */
  --cream:#f6efff;
  --cream-2:#ece0ff;
  --paper:#fdfaff;
  --ink:#2b1d47;
  --muted:#6f6389;
  --error:#b91c1c;
  /* fonts */
  --display:"Cinzel", Georgia, "Times New Roman", serif;
  --fancy:"Cormorant Garamond", Georgia, serif;
  --body:"EB Garamond", Georgia, "Times New Roman", serif;
  --radius:14px;
  --shadow:0 10px 30px rgba(76,29,149,.18);
  --shadow-sm:0 4px 16px rgba(76,29,149,.14);
  /* the signature rainbow, reusable */
  --rainbow:linear-gradient(90deg,#ff6b6b,#ffb84d,#ffe066,#5eead4,#4cc9f0,#8b5cf6,#ec4899);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  line-height:1.72;
  font-size:18px;
  background-color:var(--cream);
  background-image:
    radial-gradient(1200px 600px at 12% -8%, #fff7ff 0%, rgba(255,247,255,0) 60%),
    radial-gradient(1000px 700px at 105% 0%, #e7d6ff 0%, rgba(231,214,255,0) 55%),
    radial-gradient(900px 600px at 50% 120%, #ffe3f6 0%, rgba(255,227,246,0) 55%),
    linear-gradient(180deg,#f7f0ff 0%, #efe4ff 100%);
  background-attachment:fixed;
}

a{ color:var(--green-700); }
img{ max-width:100%; display:block; }

/* ---------- Headings ---------- */
h1,h2,h3{ font-family:var(--display); letter-spacing:.4px; line-height:1.2; }
.wordmark{ font-family:var(--display); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.krewe-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  padding:10px 26px;
  background:
    linear-gradient(180deg, var(--green-800), var(--green-900));
  border-bottom:3px solid var(--gold);
  box-shadow:0 6px 18px rgba(42,10,82,.32);
}
.krewe-nav .brand{
  display:flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none;
}
.krewe-nav .brand img{ width:42px; height:42px; border-radius:50%;
  border:2px solid var(--gold); box-shadow:0 0 0 2px rgba(245,197,66,.25); }
.krewe-nav .brand .name{ display:flex; flex-direction:column; line-height:1.05; }
.krewe-nav .brand .name b{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.6px; }
.krewe-nav .brand .name small{ font-family:var(--fancy); font-style:italic; font-size:13px; color:var(--gold-light); letter-spacing:.5px; }

.krewe-links{ display:flex; flex-wrap:wrap; align-items:center; }
.krewe-links a{
  color:#efe6ff; text-decoration:none; font-family:var(--display);
  font-size:14px; font-weight:500; letter-spacing:.5px;
  margin-left:6px; padding:8px 12px; border-radius:8px;
  transition:background .15s, color .15s;
}
.krewe-links a:hover{ background:rgba(245,197,66,.16); color:#fff; }
.krewe-links a.active{ color:var(--green-900); background:var(--gold); }

/* ============================================================
   STAR DIVIDER  (reusable celestial rule)
   ============================================================ */
.knot-divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:34px auto; max-width:520px; color:var(--gold-deep);
}
.knot-divider::before,.knot-divider::after{
  content:""; height:2px; flex:1;
  background:linear-gradient(90deg, transparent, var(--gold) 60%, var(--gold-deep));
}
.knot-divider::after{ background:linear-gradient(270deg, transparent, var(--gold) 60%, var(--gold-deep)); }
.knot-divider .knot{
  width:46px; height:46px; flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23c9971a'%3E%3Cpath d='M50 6 L59 39 L92 39 L65 59 L75 92 L50 72 L25 92 L35 59 L8 39 L41 39 Z'/%3E%3C/g%3E%3Cg fill='%23f5c542'%3E%3Cpath d='M50 20 L56 40 L77 40 L60 52 L66 73 L50 60 L34 73 L40 52 L23 40 L44 40 Z'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 2px 5px rgba(245,197,66,.5));
}

/* ============================================================
   HERO  (homepage)
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  color:#fff; text-align:center;
  padding:96px 22px 104px;
  border-bottom:5px solid var(--gold);
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:center/cover no-repeat;
  transform:scale(1.04);
}
.hero::after{ /* overlay */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(42,10,82,.58), rgba(76,29,149,.34) 45%, rgba(42,10,82,.80)),
    radial-gradient(900px 420px at 50% 18%, rgba(236,72,153,.14), rgba(42,10,82,.62));
}
.hero .eyebrow{
  font-family:var(--fancy); font-style:italic; font-size:20px;
  letter-spacing:1px; color:var(--gold-light); margin:0 0 6px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero h1{
  font-size:clamp(40px,7vw,72px); margin:4px 0 14px; font-weight:700;
  text-shadow:0 3px 22px rgba(0,0,0,.55); letter-spacing:1px;
}
.hero .lede{
  font-family:var(--fancy); font-size:clamp(19px,2.5vw,24px); font-weight:500;
  max-width:660px; margin:0 auto 30px; color:#f3ecff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero .emblem{
  width:96px; height:96px; margin:0 auto 10px; border-radius:50%;
  border:3px solid var(--gold); box-shadow:0 6px 26px rgba(0,0,0,.5);
  background:#fff;
}

/* buttons */
.btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:11px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.4px;
  text-decoration:none; border:2px solid transparent; transition:transform .12s, background .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:#4a2c00; box-shadow:0 8px 20px rgba(201,151,26,.4); border-color:var(--gold-deep); }
.btn-primary:hover{ background:linear-gradient(180deg,#ffefb0,var(--gold-light)); }
.btn-outline{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,230,148,.8); }
.btn-outline:hover{ background:rgba(255,230,148,.18); border-color:#fff; }
.btn-green{ background:linear-gradient(180deg,var(--green-600),var(--green-800)); color:#fff; box-shadow:var(--shadow-sm); }
.btn-green:hover{ background:linear-gradient(180deg,var(--green-700),var(--green-900)); }

/* ============================================================
   PAGE HEAD (sub pages)
   ============================================================ */
.page-head{
  position:relative; isolation:isolate; color:#fff; text-align:center;
  padding:64px 22px 58px; border-bottom:5px solid var(--gold); overflow:hidden;
}
.page-head .ph-bg{ position:absolute; inset:0; z-index:-2; background:center/cover no-repeat; }
.page-head::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(42,10,82,.68), rgba(76,29,149,.84)); }
.page-head .eyebrow{ font-family:var(--fancy); font-style:italic; color:var(--gold-light); font-size:18px; margin:0 0 4px; letter-spacing:.6px; }
.page-head h1{ font-size:clamp(30px,5vw,46px); margin:0; text-shadow:0 3px 18px rgba(0,0,0,.5); letter-spacing:1px; }
.page-head p.sub{ margin:10px auto 0; max-width:620px; font-family:var(--fancy); font-size:19px; color:#f1e8ff; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ max-width:1060px; margin:0 auto; padding:64px 22px; }
.wrap.narrow{ max-width:820px; }
.section-title{ text-align:center; }
.section-title h2{ font-size:clamp(28px,4vw,38px); color:var(--green-800); margin:0 0 6px; }
.section-title .sub{ font-family:var(--fancy); font-style:italic; font-size:20px; color:var(--muted); margin:0; }

.band{ position:relative; }
.band-green{ background:linear-gradient(180deg,var(--green-800),var(--green-900)); color:#efe6ff; }
.band-green .section-title h2{ color:#fff; }
.band-green .section-title .sub{ color:var(--gold-light); }
.band-cream{ background:linear-gradient(180deg,#efe2ff,#e6d4ff); }

/* ---------- Feature row (text + image) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.feature.rev .ft-media{ order:2; }
.feature .ft-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(201,151,26,.25); }
.feature h2{ color:var(--green-800); font-size:30px; margin:0 0 10px; }
.band-green .feature h2{ color:#fff; }
.feature p{ margin:0 0 14px; }

/* framed image (iridescent gold-to-rainbow frame) */
.framed{ position:relative; padding:14px; background:
   linear-gradient(135deg,var(--gold-light),var(--gold) 35%,var(--pink) 68%,var(--green-600));
   border-radius:18px; box-shadow:var(--shadow); }
.framed img{ border-radius:10px; display:block; width:100%; }

/* ---------- Pillars (about cards) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar{
  background:var(--paper); border-radius:var(--radius); padding:28px 24px;
  border-top:4px solid var(--gold); box-shadow:var(--shadow-sm);
  text-align:center; transition:transform .15s, box-shadow .15s;
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pillar .ic{ font-size:40px; line-height:1; display:block; margin-bottom:10px; }
.pillar h3{ color:var(--green-800); font-size:21px; margin:0 0 8px; }
.pillar p{ margin:0; color:var(--ink); font-size:16.5px; }

/* ---------- Cards / grids ---------- */
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; }
.tile{ background:var(--paper); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); border-bottom:4px solid var(--gold);
  transition:transform .15s, box-shadow .15s; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.tile a{ display:block; }
.tile img{ width:100%; height:220px; object-fit:cover; background:var(--green-50); }
.tile .cap{ padding:14px 16px; }
.tile .cap h3{ margin:0 0 2px; font-size:18px; color:var(--green-800); font-family:var(--display); }
.tile .cap span{ font-size:14px; color:var(--muted); font-family:var(--fancy); font-style:italic; }

/* event cards */
.event-card{
  background:var(--paper); border-radius:var(--radius); padding:22px 24px;
  border-left:5px solid var(--gold); box-shadow:var(--shadow-sm);
}
.event-card .type{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--green-700); font-weight:700; font-family:var(--display); }
.event-card h3{ margin:6px 0; color:var(--green-800); font-size:21px; }
.event-card .meta{ color:var(--muted); font-size:15px; margin-bottom:14px; font-family:var(--fancy); font-style:italic; }
.event-card a.rsvp{ font-family:var(--display); font-weight:600; text-decoration:none; color:var(--green-700); }
.event-card a.rsvp:hover{ color:var(--gold-deep); }
.empty{ color:var(--muted); font-style:italic; font-family:var(--fancy); font-size:18px; }

/* ---------- Article / lessons ---------- */
.article{
  background:var(--paper); border-left:5px solid var(--gold); border-radius:12px;
  padding:26px 28px; margin-bottom:26px; box-shadow:var(--shadow-sm);
}
.article .cat{ font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--green-700); font-weight:700; font-family:var(--display); }
.article h2{ margin:4px 0 4px; color:var(--green-800); }
.article .by{ color:var(--muted); font-size:14px; margin-bottom:10px; font-family:var(--fancy); font-style:italic; }
.article img{ width:100%; border-radius:10px; margin:12px 0; }
.article p{ margin:0 0 14px; }

/* ---------- Poems ---------- */
.poem{
  background:var(--paper); border-radius:12px; padding:24px 26px;
  border-left:5px solid var(--gold); box-shadow:var(--shadow-sm);
}
.poem h3{ margin:0 0 10px; color:var(--green-800); font-size:22px; }
.poem .text{ white-space:pre-line; font-family:var(--fancy); font-size:19px; line-height:1.6; }
.poem .by{ margin-top:12px; color:var(--muted); font-style:italic; }

/* ---------- Videos ---------- */
.ratio{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:12px 12px 0 0; overflow:hidden; }
.ratio iframe,.ratio video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   FORM CARD  (event signup / membership)
   ============================================================ */
.form-stage{ display:flex; justify-content:center; padding:48px 22px 70px; }
.form-card{
  background:var(--paper); width:100%; max-width:560px; border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow); border-top:6px solid var(--gold);
}
.form-card .fc-head{ position:relative; isolation:isolate; color:#fff; text-align:center; padding:32px 28px 26px; overflow:hidden; }
.form-card .fc-head .fc-bg{ position:absolute; inset:0; z-index:-2; background:center/cover no-repeat; }
.form-card .fc-head::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(42,10,82,.68),rgba(76,29,149,.9)); }
.form-card .fc-head img.em{ width:62px; height:62px; border-radius:50%; border:2px solid var(--gold); margin:0 auto 8px; background:#fff; }
.form-card .fc-head h1{ margin:4px 0; font-size:24px; }
.form-card .fc-head p{ margin:0; font-family:var(--fancy); font-style:italic; color:var(--gold-light); }
form.krewe-form{ padding:26px 30px 30px; }
.krewe-form label{ display:block; font-family:var(--display); font-weight:500; font-size:14px; margin:16px 0 6px; color:var(--green-800); }
.krewe-form input,.krewe-form select,.krewe-form textarea{
  width:100%; padding:12px 13px; font-size:16px; font-family:var(--body);
  border:1.5px solid #d7cbe8; border-radius:10px; background:#fff; color:var(--ink);
}
.krewe-form textarea{ min-height:96px; resize:vertical; }
.krewe-form input:focus,.krewe-form select:focus,.krewe-form textarea:focus{
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(139,92,246,.22); }
.krewe-form .row{ display:flex; gap:14px; } .krewe-form .row>div{ flex:1; }
.krewe-form .hint{ font-size:13px; color:var(--muted); margin-top:5px; font-family:var(--fancy); font-style:italic; }
.krewe-form button{ margin-top:24px; width:100%; padding:14px; font-size:17px;
  font-family:var(--display); font-weight:600; color:#4a2c00; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:2px solid var(--gold-deep); border-radius:11px; transition:transform .12s,background .15s; }
.krewe-form button:hover{ transform:translateY(-2px); background:linear-gradient(180deg,#ffefb0,var(--gold-light)); }
.krewe-form button:disabled{ background:#d9c9a3; cursor:not-allowed; transform:none; }
.msg{ margin-top:18px; padding:14px; border-radius:10px; font-size:15px; display:none; font-family:var(--body); }
.msg.success{ display:block; background:var(--green-50); border:1px solid var(--green-600); color:var(--green-800); }
.msg.waitlist{ display:block; background:#fff7e6; border:1px solid var(--gold); color:#7a5b00; }
.msg.error{ display:block; background:#fdeaea; border:1px solid var(--error); color:var(--error); }
.form-card .fc-foot{ text-align:center; font-size:14px; color:var(--muted); padding:0 28px 24px; font-family:var(--fancy); font-style:italic; }

/* ============================================================
   FOOTER
   ============================================================ */
.krewe-foot{
  background:linear-gradient(180deg,var(--green-800),var(--green-900));
  color:#e9dcff; text-align:center; padding:46px 22px 38px;
  border-top:3px solid var(--gold);
}
.krewe-foot .fimg{ width:64px; height:64px; border-radius:50%; border:2px solid var(--gold); margin:0 auto 12px; background:#fff; }
.krewe-foot .fname{ font-family:var(--display); font-size:22px; color:#fff; letter-spacing:.6px; }
.krewe-foot .flinks{ margin:14px 0 10px; }
.krewe-foot .flinks a{ color:var(--gold-light); text-decoration:none; margin:0 10px; font-family:var(--display); font-size:14px; }
.krewe-foot .flinks a:hover{ color:#fff; text-decoration:underline; }
.krewe-foot .slainte{ font-family:var(--fancy); font-style:italic; font-size:18px; color:var(--gold-light); margin-top:8px; }
.krewe-foot .fine{ opacity:.65; font-size:13px; margin-top:6px; }

/* ============================================================
   MUSIC PLAYER  (floating, paused by default, click to play)
   ============================================================ */
.krewe-music{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:flex; align-items:center; gap:10px;
}
.krewe-music button{
  width:66px; height:66px; border-radius:50%; cursor:pointer;
  border:2px solid var(--gold); color:#4a2c00;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  box-shadow:0 8px 22px rgba(42,10,82,.32);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; transition:transform .15s;
}
.krewe-music button:hover{ transform:scale(1.06); }

/* Note/sparkle icon (injected by krewe.js). */
.krewe-music button .note-icon{ color:#3a1d6e; display:block; }
.krewe-music button .note-spark{ transform-origin:center; }
/* When music is playing, the sparkle twinkles. */
.krewe-music.playing button .note-spark{ animation:twinkle 1.1s ease-in-out infinite; }
.krewe-music.playing button{ box-shadow:0 8px 22px rgba(42,10,82,.32),0 0 0 4px rgba(245,197,66,.4); }
@keyframes twinkle{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.3) rotate(20deg); opacity:.6; } }

/* Fallback: if the icon hasn't been injected yet, keep the old bars tidy. */
.krewe-music button .bars{ display:flex; gap:2.5px; align-items:flex-end; height:20px; }
.krewe-music button .bars i{ width:3.5px; background:#3a1d6e; border-radius:2px; height:7px; }
.krewe-music .label{
  background:var(--green-900); color:var(--gold-light);
  font-family:var(--fancy); font-style:italic; font-size:15px;
  padding:7px 14px; border-radius:20px; border:1px solid rgba(245,197,66,.4);
  box-shadow:var(--shadow-sm); white-space:nowrap;
  animation:nudge 2.4s ease-in-out 1s 2;
}
.krewe-music.playing .label{ font-style:normal; font-size:18px; padding:7px 12px; animation:none; }
@keyframes nudge{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(-4px);} }
.craic-def{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:var(--gold-light);display:inline-flex;align-items:baseline;gap:.28em;text-decoration:none;transition:color .18s,text-shadow .18s,transform .18s;} .craic-def:hover{color:#fff;transform:translateY(-1px);text-shadow:0 2px 18px rgba(245,197,66,.55);} .craic-def .ic{font-size:.5em;opacity:.7;transition:opacity .18s;} .craic-def:hover .ic{opacity:1;} .craic-def.playing{color:#fff;text-shadow:0 2px 22px rgba(245,197,66,.7);} .craic-def:focus-visible{outline:2px solid var(--gold-light);outline-offset:6px;border-radius:8px;} #failteDefBtn{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.1;letter-spacing:.5px;text-shadow:0 2px 24px rgba(0,0,0,.35);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; gap:26px; }
  .feature.rev .ft-media{ order:0; }
  .pillars{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  body{ font-size:17px; }
  .krewe-links a{ font-size:13px; padding:7px 9px; margin-left:2px; }
  .krewe-nav .brand .name small{ display:none; }
  .krewe-music .label{ display:none; }
  .wrap{ padding:48px 18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .btn:hover,.tile:hover,.pillar:hover{ transform:none; }
}

/* ============================================================
   ✦  ENHANCED CELESTIAL ORNAMENTATION & MOTION
   ============================================================ */

/* ---- Banner flourish (decorative star rule) ---- */
.banner-flourish{
  display:block; width:min(440px,86%); height:64px; margin:18px auto 6px;
  background:center/contain no-repeat url("img/star-banner.svg");
  filter:drop-shadow(0 4px 10px rgba(76,29,149,.25));
}
.band-green .banner-flourish{ filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); }

/* ---- Rainbow interlace border strip ---- */
.weave-rule{
  height:26px; width:100%;
  background:left center/120px 26px repeat-x url("img/star-border.svg");
  opacity:.9; margin:8px 0;
}
.weave-rule.top{ border-top:1px solid rgba(201,151,26,.25); }

/* ---- Star-cornered frame (wraps any image/box) ---- */
.ornate{ position:relative; }
.ornate::before,.ornate::after,
.ornate > .crn{ pointer-events:none; }
.ornate::before,.ornate::after{
  content:""; position:absolute; width:54px; height:54px; z-index:3;
  background:center/contain no-repeat url("img/star-corner.svg");
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.ornate::before{ top:-10px; left:-10px; }
.ornate::after{ bottom:-10px; right:-10px; transform:rotate(180deg); }
.ornate .crn{ position:absolute; width:54px; height:54px; z-index:3;
  background:center/contain no-repeat url("img/star-corner.svg");
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.ornate .crn.tr{ top:-10px; right:-10px; transform:rotate(90deg); }
.ornate .crn.bl{ bottom:-10px; left:-10px; transform:rotate(270deg); }

/* ---- Crest medallion accent ---- */
.crest{ position:relative; width:130px; height:130px; margin:0 auto 14px; display:block; border-radius:50%;
  background:center/contain no-repeat url("img/logo-unicorn.png");
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.crest.lg{ width:166px; height:166px; }
.crest::before{ content:""; position:absolute; inset:-26%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,66,.6) 0%, rgba(236,72,153,.18) 45%, rgba(236,72,153,0) 70%);
  filter:blur(7px); opacity:.5; animation:crestGlow 6.5s ease-in-out infinite; }
@keyframes crestGlow{ 0%,100%{ opacity:.32; transform:scale(.88);} 50%{ opacity:.82; transform:scale(1.14);} }
@keyframes crestFloat{
  0%   { transform:translateY(0) rotate(-2.2deg) scale(1);     filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
  50%  { transform:translateY(-14px) rotate(2.2deg) scale(1.035); filter:drop-shadow(0 24px 26px rgba(0,0,0,.2)); }
  100% { transform:translateY(0) rotate(-2.2deg) scale(1);     filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
}
.crest.float{ animation:crestFloat 6.5s cubic-bezier(.45,0,.55,1) infinite; will-change:transform, filter; }
.crest.float:hover{ animation-duration:3.4s; }
.crest.float:hover::before{ opacity:1; }

/* ---- Slow cinematic drift on large background images ---- */
.hero .hero-bg, .page-head .ph-bg{ animation:kenburns 28s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{ from{ transform:scale(1.03); } to{ transform:scale(1.13); } }

/* ---- Illuminated drop-cap (first letter of a block) ---- */
.dropcap::first-letter{
  font-family:"Cinzel Decorative","Cinzel",serif; float:left;
  font-size:64px; line-height:.78; padding:6px 12px 2px 0;
  color:var(--green-700); text-shadow:0 1px 0 var(--gold-light);
}

/* ---- Gold shimmer sweep on primary buttons ---- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{ 0%{ left:-60%; } 22%,100%{ left:130%; } }

/* ---- Tile image hover zoom ---- */
.tile img{ transition:transform .5s ease; }
.tile:hover img{ transform:scale(1.07); }

/* ---- Captioned overlay tiles (for galleries) ---- */
.tile.glow{ position:relative; }
.tile.glow .cap{
  background:linear-gradient(180deg, var(--paper), #f3eaff);
}
.tile.glow:hover{ box-shadow:0 14px 34px rgba(76,29,149,.28), 0 0 0 2px var(--gold); }

/* ---- Photo mosaic (varied spans) ---- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:14px; }
.mosaic figure{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); border-bottom:4px solid var(--gold); }
.mosaic figure img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.mosaic figure:hover img{ transform:scale(1.08); }
.mosaic figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
  font-family:var(--display); font-size:15px; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(42,10,82,.82));
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.mosaic figcaption small{ display:block; font-family:var(--fancy); font-style:italic;
  font-size:13px; color:var(--gold-light); }
.mosaic figure:hover figcaption{ opacity:1; transform:translateY(0); }
.mosaic .wide{ grid-column:span 2; }
.mosaic .tall{ grid-row:span 2; }
.mosaic .big{ grid-column:span 2; grid-row:span 2; }

/* ---- Photo band (image strip with caption, for text-only pages) ---- */
.photo-band{ position:relative; isolation:isolate; overflow:hidden;
  border-top:4px solid var(--gold); border-bottom:4px solid var(--gold); }
.photo-band .pb-bg{ position:absolute; inset:0; z-index:-2; background:center/cover no-repeat;
  transform:scale(1.05); }
.photo-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(42,10,82,.5), rgba(76,29,149,.72)); }
.photo-band .pb-inner{ max-width:760px; margin:0 auto; text-align:center;
  color:#fff; padding:70px 22px; }
.photo-band h2{ color:#fff; font-size:clamp(26px,4vw,38px); margin:0 0 8px;
  text-shadow:0 2px 14px rgba(0,0,0,.5); }
.photo-band p{ font-family:var(--fancy); font-size:20px; color:#f1e8ff; margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.5); }

/* ---- Scroll-reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---- Floating sparkle field (particles injected by JS) ---- */
.shamrock-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.shamrock-field span{
  position:absolute; top:-40px; font-size:22px; line-height:1; color:var(--green-600);
  opacity:.16; animation:drift linear infinite; will-change:transform;
}
@keyframes drift{
  0%{ transform:translateY(-40px) rotate(0deg); }
  100%{ transform:translateY(108vh) rotate(360deg); }
}
.krewe-nav, .hero, .page-head, .wrap, .band, .form-stage, .krewe-foot,
.photo-band, .weave-rule{ position:relative; z-index:1; }

@media (max-width:860px){
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .mosaic .big{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:680px){
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .ornate::before,.ornate::after,.ornate .crn{ width:38px; height:38px; }
  .crest{ width:96px; height:96px; }
}
@media (prefers-reduced-motion:reduce){
  .btn-primary::after{ animation:none; display:none; }
  .crest.float, .crest::before, .hero .hero-bg, .page-head .ph-bg{ animation:none; }
  .shamrock-field{ display:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .tile:hover img,.mosaic figure:hover img{ transform:none; }
}


/* ============================================================
   NAVIGATION: responsive redesign
   Desktop: single-row bar with dropdown menus.
   Mobile (<=980px): hamburger opens a slide-in drawer.
   ============================================================ */
.krewe-nav{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:14px; padding:10px 26px;
  background:linear-gradient(180deg,var(--green-800),var(--green-900));
  border-bottom:3px solid var(--gold);
  box-shadow:0 6px 18px rgba(42,10,82,.32);
}
.krewe-nav .brand{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; flex:0 0 auto; }
.krewe-nav .brand img{ width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); box-shadow:0 0 0 2px rgba(245,197,66,.25); }
.krewe-nav .brand .name{ display:flex; flex-direction:column; line-height:1.05; }
.krewe-nav .brand .name b{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.6px; }
.krewe-nav .brand .name small{ font-family:var(--fancy); font-style:italic; font-size:13px; color:var(--gold-light); letter-spacing:.5px; }

.krewe-menu{ display:flex; align-items:center; gap:8px; }
.krewe-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.krewe-links > li{ position:relative; }
.krewe-links a, .nav-group-btn{
  display:flex; align-items:center; gap:6px;
  color:#efe6ff; font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.5px;
  padding:9px 13px; border-radius:8px; text-decoration:none;
  background:none; border:0; cursor:pointer; white-space:nowrap; font-kerning:none;
  transition:background .15s, color .15s;
}
.krewe-links a:hover, .nav-group-btn:hover,
.krewe-links a:focus-visible, .nav-group-btn:focus-visible{ background:rgba(245,197,66,.18); color:#fff; outline:none; }
.krewe-links a:focus-visible, .nav-group-btn:focus-visible{ box-shadow:0 0 0 2px var(--gold-light); }
.krewe-links a.active, .nav-group.is-active > .nav-group-btn{ color:var(--green-900); background:var(--gold); }
.caret{ display:inline-block; width:0; height:0; border:5px solid transparent; border-top-color:currentColor; margin-top:4px; transition:transform .2s; }

.nav-dropdown{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:calc(100% + 8px); left:0; min-width:214px;
  background:linear-gradient(180deg,var(--green-800),var(--green-900));
  border:1px solid var(--gold); border-radius:12px;
  box-shadow:0 16px 34px rgba(0,0,0,.34);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.nav-dropdown li{ list-style:none; }
.nav-dropdown a{ display:block; width:100%; font-size:14px; }
.nav-group:hover > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown,
.nav-group.open > .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-group:hover > .nav-group-btn .caret,
.nav-group.open > .nav-group-btn .caret{ transform:rotate(180deg); }

.nav-cta{
  display:inline-flex; align-items:center; gap:6px; margin-left:6px;
  padding:10px 18px; border-radius:999px;
  background:var(--gold); color:var(--green-900);
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.5px;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 12px rgba(245,197,66,.35);
  transition:transform .12s, box-shadow .15s, background .15s;
}
.nav-cta:hover{ background:var(--gold-light); transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,197,66,.5); }
.nav-cta:focus-visible{ outline:none; box-shadow:0 0 0 3px #fff; }
.nav-cta.active{ box-shadow:0 0 0 2px #fff; }

.nav-toggle{
  display:none; position:relative; z-index:1002;
  width:46px; height:42px; border:1px solid rgba(245,197,66,.55); border-radius:10px;
  background:rgba(0,0,0,.14); cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--gold-light); }
.nav-toggle-bars{ position:relative; display:block; width:22px; height:16px; }
.nav-toggle-bars i{ position:absolute; left:0; right:0; height:2.5px; background:var(--gold-light); border-radius:2px; transition:transform .22s, opacity .2s, top .22s; }
.nav-toggle-bars i:nth-child(1){ top:0; }
.nav-toggle-bars i:nth-child(2){ top:6.7px; }
.nav-toggle-bars i:nth-child(3){ top:13.4px; }
.krewe-nav.open .nav-toggle-bars i:nth-child(1){ top:6.7px; transform:rotate(45deg); }
.krewe-nav.open .nav-toggle-bars i:nth-child(2){ opacity:0; }
.krewe-nav.open .nav-toggle-bars i:nth-child(3){ top:6.7px; transform:rotate(-45deg); }

.nav-backdrop{ display:none; }

/* ---------- MOBILE / TABLET ---------- */
@media (max-width:980px){
  .nav-toggle{ display:inline-flex; }
  .krewe-menu{
    position:fixed; top:0; right:0; z-index:1001;
    height:100vh; height:100dvh; width:min(86vw,360px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:84px 18px 28px;
    background:linear-gradient(180deg,var(--green-800),var(--green-900));
    border-left:3px solid var(--gold); box-shadow:-18px 0 40px rgba(0,0,0,.42);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .26s ease; visibility:hidden;
  }
  .krewe-nav.open .krewe-menu{ transform:translateX(0); visibility:visible; }
  .krewe-links{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .krewe-links > li{ width:100%; }
  .krewe-links a, .nav-group-btn{ width:100%; font-size:16px; padding:14px 14px; justify-content:space-between; border-radius:10px; }
  .nav-dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:rgba(0,0,0,.20);
    border-radius:10px; margin:2px 0 6px; padding:0 4px;
    max-height:0; overflow:hidden;
    transition:max-height .26s ease, padding .26s ease;
  }
  .nav-group.open > .nav-dropdown{ max-height:360px; padding:6px 4px; }
  .nav-dropdown a{ font-size:15px; padding:12px 14px 12px 22px; }
  .nav-cta{ margin:16px 0 0; justify-content:center; padding:15px; font-size:16px; }
  .nav-backdrop{ display:block; position:fixed; inset:0; z-index:1000;
    background:rgba(20,6,40,.5); opacity:0; visibility:hidden; transition:opacity .22s; }
  .krewe-nav.open .nav-backdrop{ opacity:1; visibility:visible; }
}
body.nav-open{ overflow:hidden; }
@media (max-width:430px){
  .krewe-nav{ padding:10px 16px; }
  .krewe-nav .brand .name small{ display:none; }
  .krewe-nav .brand .name b{ font-size:17px; }
}
@media (prefers-reduced-motion:reduce){
  .krewe-menu, .nav-dropdown, .nav-toggle-bars i, .caret, .nav-cta, .nav-backdrop{ transition:none !important; }
}

/* ============================================================
   BRAND LOGO (rainbow unicorn) — show clean, uncropped, transparent.
   Overrides the earlier circular-medallion emblem styling.
   ============================================================ */
.krewe-nav .brand img{ width:auto; height:46px; border-radius:0; border:0;
  background:none; box-shadow:none; object-fit:contain; }
.hero .emblem{ width:auto; height:122px; border-radius:0; border:0; background:none;
  box-shadow:none; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.krewe-foot .fimg{ width:auto; height:72px; border-radius:0; border:0; background:none;
  object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.form-card .fc-head img.em{ width:auto; height:76px; border-radius:0; border:0;
  background:none; object-fit:contain; }
.crest{ border-radius:0; }
@media (max-width:430px){ .krewe-nav .brand img{ height:40px; } }