/* ============================================================
   Krewe of Shamrock: shared artistic theme
   Irish heritage: deep greens, gold, parchment, Celtic knotwork
   ============================================================ */

:root{
  /* greens */
  --green-900:#0c3b21;
  --green-800:#14532d;
  --green-700:#1b6b39;
  --green-600:#2b8b51;
  --green-50:#e9f3ea;
  /* gold */
  --gold:#d4af37;
  --gold-light:#ecd07e;
  --gold-deep:#a9801c;
  /* parchment / neutrals */
  --cream:#f6efdd;
  --cream-2:#efe5cc;
  --paper:#fbf7ec;
  --ink:#23291f;
  --muted:#5f6b5a;
  --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(12,59,33,.14);
  --shadow-sm:0 4px 16px rgba(12,59,33,.10);
}

*{ 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%, #fffdf5 0%, rgba(255,253,245,0) 60%),
    radial-gradient(1000px 700px at 105% 0%, #f0e7cf 0%, rgba(240,231,207,0) 55%),
    linear-gradient(180deg,#f7f1e1 0%, #f3ebd6 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(12,59,33,.28);
}
.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(212,175,55,.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:#f3ecd6; 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(212,175,55,.16); color:#fff; }
.krewe-links a.active{ color:var(--green-900); background:var(--gold); }

/* ============================================================
   KNOT DIVIDER  (reusable Celtic triquetra 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='none' stroke='%23a9801c' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M50 16 C 68 42 68 58 50 84 C 32 58 32 42 50 16 Z'/%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 16 C 68 42 68 58 50 84 C 32 58 32 42 50 16 Z'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 16 C 68 42 68 58 50 84 C 32 58 32 42 50 16 Z'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   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(8,42,24,.62), rgba(8,42,24,.42) 45%, rgba(8,42,24,.82)),
    radial-gradient(900px 420px at 50% 18%, rgba(8,42,24,.10), rgba(8,42,24,.66));
}
.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:#f4eed9;
  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);
}

/* 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:#3a2c00; box-shadow:0 8px 20px rgba(168,128,28,.4); border-color:var(--gold-deep); }
.btn-primary:hover{ background:linear-gradient(180deg,#f3dd97,var(--gold-light)); }
.btn-outline{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(236,208,126,.8); }
.btn-outline:hover{ background:rgba(236,208,126,.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(8,42,24,.72), rgba(8,42,24,.86)); }
.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:#f1ead4; }

/* ============================================================
   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:#f1ead4; }
.band-green .section-title h2{ color:#fff; }
.band-green .section-title .sub{ color:var(--gold-light); }
.band-cream{ background:linear-gradient(180deg,#f1e8d2,#ece1c6); }

/* ---------- 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(168,128,28,.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 (clover wreath motif via gold frame) */
.framed{ position:relative; padding:14px; background:
   linear-gradient(135deg,var(--gold-light),var(--gold) 45%,var(--gold-deep));
   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); }
/* Events synced from the Inter-Krewe Council calendar render in purple so
   they read as friends' events, not ours */
.event-card.ikc{ border-left-color:#7c5cae; }
.event-card.ikc .type{ color:#7c5cae; }
.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(8,42,24,.72),rgba(8,42,24,.9)); }
.form-card .fc-head img.em{ width:62px; height:62px; border-radius:50%; border:2px solid var(--gold); margin:0 auto 8px; }
.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 #cdd8cf; 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(43,139,81,.18); }
.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:#3a2c00; 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,#f3dd97,var(--gold-light)); }
.krewe-form button:disabled{ background:#cbb87a; 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:#e9e0c6; 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; }
.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:.6; font-size:13px; margin-top:6px; }

/* ============================================================
   MUSIC PLAYER  (floating, paused by default, click violin 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:#3a2c00;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  box-shadow:0 8px 22px rgba(12,59,33,.32);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; transition:transform .15s;
}
.krewe-music button:hover{ transform:scale(1.06); }

/* Violin icon (injected by krewe.js). Inherits the button's dark color. */
.krewe-music button .violin-icon{ color:#23420f; display:block; }
.krewe-music button .violin-bow{ transform-origin:center; }
/* When music is playing, the bow gently "saws" across the strings. */
.krewe-music.playing button .violin-bow{ animation:bow .9s ease-in-out infinite; }
.krewe-music.playing button{ box-shadow:0 8px 22px rgba(12,59,33,.32),0 0 0 4px rgba(212,175,55,.35); }
@keyframes bow{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(1.4px,-1px); } }

/* 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:#23420f; 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(212,175,55,.4);
  box-shadow:var(--shadow-sm); white-space:nowrap;
  animation:nudge 2.4s ease-in-out 1s 2;
}
/* While the tune plays, the "Tap for a tune" pill gives way to a music note. */
.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(212,175,55,.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(212,175,55,.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 CELTIC ORNAMENTATION & MOTION  (added)
   ============================================================ */

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

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

/* ---- Knotwork-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/celtic-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); }
/* the other two corners via helper spans */
.ornate .crn{ position:absolute; width:54px; height:54px; z-index:3;
  background:center/contain no-repeat url("img/celtic-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/kos-emblem.png");
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
.crest.lg{ width:166px; height:166px; }
/* breathing golden halo behind the crest (sits below the medallion) */
.crest::before{ content:""; position:absolute; inset:-26%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(236,208,126,.6) 0%, rgba(236,208,126,.18) 45%, rgba(236,208,126,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);} }
/* richer float: rise + tilt + subtle scale, with a depth shadow that softens as it lifts */
@keyframes crestFloat{
  0%   { transform:translateY(0) rotate(-2.2deg) scale(1);     filter:drop-shadow(0 10px 16px rgba(0,0,0,.42)); }
  50%  { transform:translateY(-14px) rotate(2.2deg) scale(1.035); filter:drop-shadow(0 24px 26px rgba(0,0,0,.26)); }
  100% { transform:translateY(0) rotate(-2.2deg) scale(1);     filter:drop-shadow(0 10px 16px rgba(0,0,0,.42)); }
}
.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(--gold-deep); 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 (tiles already clip overflow) ---- */
.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), #f3ead3);
}
.tile.glow:hover{ box-shadow:0 14px 34px rgba(12,59,33,.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(8,42,24,.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(8,42,24,.55), rgba(8,42,24,.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:#f1ead4; 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 shamrock 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:#2b8b51;
  opacity:.16; animation:drift linear infinite; will-change:transform;
}
@keyframes drift{
  0%{ transform:translateY(-40px) rotate(0deg); }
  100%{ transform:translateY(108vh) rotate(360deg); }
}
/* keep page content above the drifting field */
.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 (2026)
   Desktop: single-row bar with dropdown menus.
   Mobile (<=980px): hamburger opens a slide-in drawer with
   collapsible groups. All behavior wired in krewe.js.
   ============================================================ */
.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(12,59,33,.28);
}
.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(212,175,55,.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:#f3ecd6; 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(212,175,55,.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(212,175,55,.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(212,175,55,.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(212,175,55,.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(6,28,16,.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; }
}

/* ============================================================
   OFFICIAL KREWE CREST (shield artwork — must not be cropped
   into a circle like the round emblems, so these override the
   border-radius / border the emblem slots normally apply)
   ============================================================ */
.hero .emblem.crest-img,
.krewe-foot .fimg.crest-img,
.form-card .fc-head img.em.crest-img{
  border-radius:0; border:none; box-shadow:none;
  width:auto; background:transparent; object-fit:contain;
}
.hero .emblem.crest-img{ height:100px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
.krewe-foot .fimg.crest-img{ height:70px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.form-card .fc-head img.em.crest-img{ height:64px; }

/* Featured crest block (used on the Krewe History page) */
.crest-feature{ text-align:center; margin:30px auto 4px; }
.crest-feature img{ display:block; margin:0 auto; height:110px; width:auto; filter:drop-shadow(0 3px 10px rgba(0,0,0,.25)); }
.crest-feature .cap{
  font-family:var(--fancy); font-style:italic; color:var(--muted);
  font-size:16px; margin-top:10px;
}

/* Homepage hero: pull the background leftward so the fiddler's face
   sits to the left of the crest instead of directly behind it */
.hero .hero-bg.bg-shift-left{ inset:0 0 0 -28%; }
@media (max-width:700px){
  /* Narrow screens crop the image by height, so slide it with
     background-position instead of widening the layer */
  .hero .hero-bg.bg-shift-left{ inset:0; background-position:63% center; }
}