/* ============================================================
   A Taste for Wine and Murder — Murder Mystery Party invite
   ============================================================ */

:root{
  --ink:       #15100a;   /* deep brown-black           */
  --ink-2:     #0c0805;   /* darkest                    */
  --ink-3:     #221810;   /* raised brown               */
  --gold:      #c8a35a;   /* brass accent               */
  --gold-soft: #9e7f44;
  --gold-lit:  #e7cf95;   /* highlight                  */
  --parch:     #d9c6a0;   /* aged paper                 */
  --parch-lit: #ecddba;
  --parch-dk:  #b29a70;
  --wine:      #6e1f22;   /* blood / wine               */
  --wine-dk:   #441214;
  --ink-text:  #2a1d10;   /* dark text on parchment     */

  --shadow: 0 24px 60px rgba(0,0,0,.6);
  --maxw: 1180px;

  --f-deco: "Cinzel Decorative", "Cinzel", serif;
  --f-disp: "Cinzel", serif;
  --f-body: "EB Garamond", Georgia, serif;
  --f-type: "Special Elite", "Courier New", monospace;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--parch);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.6;
  background-color:var(--ink-2);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(120,86,40,.30), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(80,20,22,.22), transparent 55%),
    linear-gradient(180deg, #160f09 0%, #0c0805 45%, #100a06 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* film-grain / paper noise overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* animated art-deco line background — sits above the gradient, behind content */
#bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  width:100%; height:100%;
}

/* anchor targets clear the fixed nav when jumped to */
:where(#home, #story, #suspects, #menu, #details){ scroll-margin-top:70px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  background:linear-gradient(180deg, rgba(12,8,5,.92), rgba(12,8,5,.78) 70%, rgba(12,8,5,0));
  backdrop-filter:blur(4px);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.nav-brand{
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(12px,2.2vw,15px);
  color:var(--gold-lit);
  text-decoration:none;
  white-space:nowrap;
}
.nav-links{
  list-style:none;
  display:flex; align-items:center;
  gap:clamp(16px,3vw,34px);
  margin:0; padding:0;
}
.nav-links a{
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:12px;
  color:var(--parch);
  text-decoration:none;
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--gold-lit); border-color:rgba(200,163,90,.6); }

/* hamburger — hidden on desktop */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  background:none; border:0; cursor:pointer;
  padding:9px;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--gold);
  border-radius:2px;
  transition:transform .3s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/* tablet and above: no logo, centered links in display font */
@media (min-width:721px){
  .nav-brand{ display:none; }
  .nav-inner{ justify-content:center; }
  .nav-links a{ font-family:var(--f-disp); }
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(12,8,5,.97);
    border-top:1px solid rgba(200,163,90,.25);
    border-bottom:1px solid rgba(200,163,90,.25);
    padding:6px 0;
    /* collapsed by default */
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .nav-links.open{
    max-height:60vh;
    opacity:1;
    pointer-events:auto;
  }
  .nav-links li{ text-align:center; }
  .nav-links a{
    display:block;
    padding:14px 16px;
    border-bottom:1px solid rgba(200,163,90,.12);
    letter-spacing:.22em;
  }
  .nav-links li:last-child a{ border-bottom:0; }
  .nav-links a:hover{ border-color:rgba(200,163,90,.12); }
}

/* ============================================================
   Art-deco frame + corners (shared)
   ============================================================ */
.frame{
  position:relative;
  z-index:2;
  margin:0 auto;
  max-width:760px;
  padding:clamp(38px, 7vw, 80px) clamp(26px, 6vw, 64px);
  border:2px solid var(--gold-soft);
  outline:1px solid rgba(200,163,90,.45);
  outline-offset:7px;
  box-shadow:
    inset 0 0 0 6px rgba(12,8,5,.6),
    inset 0 0 90px rgba(0,0,0,.7),
    var(--shadow);
}

.corner{
  position:absolute;
  width:clamp(34px,7vw,58px);
  height:clamp(34px,7vw,58px);
  color:var(--gold);
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c8a35a' stroke-width='2.4'%3E%3Cpolyline points='4,62 4,4 62,4'/%3E%3Cpolyline points='13,46 13,13 46,13'/%3E%3Cpath d='M4 70 L4 84 M70 4 L84 4' stroke-width='1.6'/%3E%3Crect x='20' y='20' width='10' height='10' transform='rotate(45 25 25)' fill='%23c8a35a' stroke='none'/%3E%3C/svg%3E");
}
.corner-tl{ top:-9px;  left:-9px;  }
.corner-tr{ top:-9px;  right:-9px;  transform:scaleX(-1); }
.corner-bl{ bottom:-9px; left:-9px;  transform:scaleY(-1); }
.corner-br{ bottom:-9px; right:-9px; transform:scale(-1,-1); }

/* ============================================================
   Divider ornament  ─ ◆ ─
   ============================================================ */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  margin:clamp(16px,3vw,26px) auto;
  width:min(320px, 70%);
  color:var(--gold);
}
.divider.wide{ width:min(420px, 80%); }
.divider span{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.divider i{
  width:9px; height:9px;
  transform:rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(200,163,90,.18);
}

/* ============================================================
   HERO / INVITE
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(78px,8vw,104px) 18px clamp(20px,5vw,40px);
}
.hero-inner{ text-align:center; }

.hero-eyebrow{
  font-family:var(--f-type);
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:clamp(11px,2.4vw,15px);
  color:var(--parch-dk);
  margin:0 0 clamp(14px,3vw,26px);
}

.hero-title{ margin:0; line-height:.96; }
.hero-title .t-line{ display:block; }
.hero-title .t-small{
  font-family:var(--f-disp);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(20px,5vw,34px);
  color:var(--parch);
}
.hero-title .t-big{
  /* inline-block so the background-clip box hugs the word's actual width.
     As a full-width block, the wide word "Murder" reached (and on small
     screens overflowed) the box's right edge, and background-clip:text paints
     no gradient past that edge -- which clipped the last R to black. */
  display:inline-block;
  font-family:var(--f-deco);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  /* lower floor so the long word still fits the frame on narrow phones */
  font-size:clamp(40px,15vw,118px);
  color:var(--gold-lit);
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 32px rgba(200,163,90,.25);
  background:linear-gradient(180deg, var(--gold-lit), var(--gold) 55%, var(--gold-soft));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  /* line-height < 1 on .hero-title shrinks the clip box below the glyph height,
     which cut the gradient off at the tips of the letters; the horizontal padding
     gives the R's decorative swash room. Negative margins cancel the padding so
     the tight line stacking is unchanged. */
  padding:.45em .28em .25em;
  margin:-.45em 0 -.25em;
}
.hero-title .t-and{
  font-family:var(--f-disp);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:clamp(16px,3.4vw,24px);
  color:var(--parch-dk);
  margin:clamp(2px,1vw,8px) 0;
}

.hero-sub{
  font-family:var(--f-disp);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(18px,4.4vw,30px);
  color:var(--parch-lit);
  margin:.2em 0 .5em;
}
.hero-tag{
  font-style:italic;
  color:var(--parch-dk);
  font-size:clamp(15px,3vw,19px);
  margin:0 auto;
  max-width:30ch;
}

.scroll-hint{
  text-align:center;
  font-family:var(--f-type);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold-soft);
  margin:clamp(26px,5vw,46px) 0 0;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ============================================================
   SUSPECTS
   ============================================================ */
.suspects{
  position:relative; z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,8vw,90px) 20px;
}
.section-head{ text-align:center; margin-bottom:clamp(30px,5vw,52px); }
.section-title{
  font-family:var(--f-deco);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(32px,7vw,60px);
  margin:.1em 0;
  color:var(--gold-lit);
  background:linear-gradient(180deg, var(--gold-lit), var(--gold-soft));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-note{
  font-style:italic;
  color:var(--parch-dk);
  margin:.2em 0 0;
  font-size:clamp(14px,3vw,18px);
}

/* ---- View toggle ---- */
.view-toggle{
  display:inline-flex;
  margin:clamp(14px,2.5vw,22px) 0 0;
  border:1px solid var(--gold-soft);
  border-radius:2px;
  overflow:hidden;
}
.view-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  line-height:1;
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:11px;
  color:var(--parch-dk);
  background:rgba(12,8,5,.4);
  border:0;
  /* extra right padding offsets the trailing space letter-spacing adds after
     the label, so the icon + text group reads as centered in the button */
  padding:9px 18px 9px 20px;
  min-height:40px;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.view-btn .view-label{ display:inline-block; }
.view-ico{
  display:block;
  width:14px; height:14px;
  fill:currentColor;
  flex:0 0 auto;
}
.view-btn + .view-btn{ border-left:1px solid var(--gold-soft); }
.view-btn:hover{ color:var(--gold-lit); }
.view-btn.is-active{
  background:var(--wine);
  color:var(--parch-lit);
}
.view-btn:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:2px; }

/* ---- View switching ---- */
.suspects[data-view="grid"] .card-list{ display:none; }
.suspects[data-view="list"] .card-grid{ display:none; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px,2.4vw,30px);
}
@media (max-width:980px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){
  .card-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; }
  .look-btn{ width:80%; }            /* easier to tap on phones */
  .modal-box{ padding:18px 14px; }

  .hero-title{ line-height:1.3; }            /* more room so glyph tips clear the clip box */
  .hero-title .t-big{ font-size:12vw; }      /* keeps "Murder" inside the frame on phones */
  .hero-title .t-and{ margin:-1vw 0; }       /* tighten the gap the larger line-height opens up */
}

/* ---- Flip card ---- */
.card{
  position:relative;
  aspect-ratio:3/4;
  perspective:1400px;
  cursor:pointer;
  background:none; border:0; padding:0;
  font:inherit; color:inherit; text-align:inherit;
  width:100%;
}
.card-inner{
  position:absolute; inset:0;
  transition:transform .7s cubic-bezier(.4,.05,.2,1);
  transform-style:preserve-3d;
}
.card.flipped .card-inner{ transform:rotateY(180deg); }

/* Only the currently visible face is interactive, so the front name-plate
   can't sit on top of the back's "View Look Guide" button and steal clicks. */
.card.flipped .card-front{ pointer-events:none; }
.card:not(.flipped) .card-back{ pointer-events:none; }

.card-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:2px solid var(--gold-soft);
  box-shadow:inset 0 0 0 4px rgba(12,8,5,.55), 0 14px 30px rgba(0,0,0,.5);
  overflow:hidden;
}

/* front */
.card-front{ background:var(--ink-3); }
/* hide front children when the face is turned away, so they don't bleed
   through onto the back and overlap the button */
.card-front img, .name-plate, .flip-hint{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.card-front img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  filter:sepia(.32) contrast(1.02) brightness(.96);
}
.card-front::after{   /* vignette + bottom gradient for name plate */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 26%, transparent 52%, rgba(12,8,5,.86) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.5) 100%);
}
.name-plate{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:14px 12px 16px;
  text-align:center;
}
.name-plate .role{
  display:block;
  font-family:var(--f-type);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-lit);
  margin-bottom:4px;
}
.name-plate .name{
  display:block;
  font-family:var(--f-disp);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(17px,2vw,21px);
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.flip-hint{
  position:absolute; top:10px; right:12px; z-index:2;
  font-family:var(--f-type);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parch);
  background:rgba(12,8,5,.55);
  border:1px solid rgba(200,163,90,.5);
  padding:3px 8px;
  border-radius:2px;
}

/* back */
.card-back{
  transform:rotateY(180deg);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(120,86,40,.18), transparent 60%),
    linear-gradient(180deg, #e7d6b0, #cdb586 70%, #bda173);
  color:var(--ink-text);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:22px 18px;
}
.card-back::after{   /* paper noise on the back */
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card-back .b-name{
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(16px,1.8vw,20px);
  margin:0 0 2px; color:var(--wine-dk);
}
.card-back .b-role{
  font-family:var(--f-type);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#7c5e28; margin-bottom:12px;
}
.back-hint{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-family:var(--f-type);
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-soft); opacity:.85;
  white-space:nowrap;
}
.card-back .b-notes-label{
  font-family:var(--f-type);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); margin:0 0 6px;
}
.card-back .b-detail{
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.5;
  margin:0 0 16px;
}
.look-btn{
  font-family:var(--f-disp);
  font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:13px;
  color:var(--parch-lit);
  background:var(--wine);
  border:1px solid var(--wine-dk);
  padding:13px 22px; border-radius:2px;
  min-height:46px;            /* comfortable touch target */
  cursor:pointer;
  transition:background .2s, transform .15s;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.look-btn:hover{ background:#8a2a2e; transform:translateY(-1px); }
.look-btn:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:2px; }

/* ============================================================
   SUSPECTS — list / accordion view
   ============================================================ */
.card-list{
  max-width:760px;
  margin:0 auto;
  border-top:1px solid rgba(200,163,90,.25);
}
.list-item{
  border-bottom:1px solid rgba(200,163,90,.25);
}
.list-head{
  display:flex; align-items:center; gap:clamp(12px,2.5vw,18px);
  width:100%;
  background:none; border:0;
  padding:clamp(12px,2.5vw,16px) 4px;
  cursor:pointer;
  text-align:left;
  color:inherit; font:inherit;
}
.list-thumb{
  width:clamp(48px,11vw,64px);
  height:clamp(48px,11vw,64px);
  flex:0 0 auto;
  object-fit:cover; object-position:center top;
  border:1px solid var(--gold-soft);
  filter:sepia(.32) contrast(1.02) brightness(.96);
}
.list-meta{ flex:1 1 auto; min-width:0; }
.list-role{
  display:block;
  font-family:var(--f-type);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:3px;
}
.list-name{
  display:block;
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(17px,3vw,22px);
  line-height:1.1;
  color:var(--parch-lit);
}
.list-chevron{
  flex:0 0 auto;
  color:var(--gold);
  font-size:18px; line-height:1;
  transition:transform .3s ease;
}
.list-head[aria-expanded="true"] .list-chevron{ transform:rotate(180deg); }

.list-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}
.list-head[aria-expanded="true"] + .list-panel{ max-height:340px; }
.list-panel-inner{
  padding:0 4px clamp(16px,3vw,22px) calc(clamp(48px,11vw,64px) + clamp(12px,2.5vw,18px) + 4px);
}
.list-detail{
  font-style:italic;
  color:var(--parch);
  margin:0 0 16px;
  font-size:clamp(15px,2.4vw,17px);
}

/* ============================================================
   STORY
   ============================================================ */
.story{
  position:relative; z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,8vw,90px) 20px clamp(10px,2vw,20px);
}
.story-body{
  max-width:690px;
  margin:0 auto;
  text-align:center;
}
.story-body p{
  margin:0;
  font-size:clamp(16px,2.6vw,20px);
  line-height:1.75;
  color:var(--parch);
}
.story-body p::first-letter{
  font-family:var(--f-deco);
  font-weight:900;
  float:left;
  line-height:.8;
  font-size:3.4em;
  padding:6px 12px 0 0;
  color:var(--gold-lit);
}
/* only the opening paragraph gets the drop cap */
.story-body .divider + p::first-letter{
  float:none; font-size:inherit; font-family:inherit;
  font-weight:inherit; color:inherit; padding:0; line-height:inherit;
}

/* hidden easter-egg triggers — kept visually identical to the surrounding text */
.egg-trigger{ cursor:pointer; }

/* ============================================================
   EASTER EGG — chalk body outlines
   ============================================================ */
#body-egg{
  position:fixed; inset:0;
  z-index:45;            /* above the page, below the look-guide modal (50) */
  pointer-events:none;
  opacity:1;
  transition:opacity .7s ease;
}
#body-egg.clearing{ opacity:0; }
.body-egg-item{
  position:absolute;
  width:112px;
  transform:rotate(var(--tilt, 0deg));
  animation:bodyDrop .25s ease both;
}
.body-egg-item img{
  display:block;
  width:100%; height:auto;
  /* the source SVG is black; invert to chalk-white so it reads on the dark page */
  filter:invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
@keyframes bodyDrop{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   MENU
   ============================================================ */
.menu{
  position:relative; z-index:2;
  padding:clamp(20px,5vw,50px) 18px clamp(20px,4vw,40px);
}
/* faint pineapples tiled in tight rows, just a hair darker than the parchment */
.menu-pattern{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.menu-pattern img{
  position:absolute;
  transform-origin:center;
  /* the SVG paths default to black; low opacity keeps it just below the
     parchment tone so the pineapples barely stand out */
  opacity:.07;
}
.menu-inner{ text-align:center; position:relative; z-index:1; }
.m-eyebrow{
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.26em;
  font-size:clamp(11px,2.4vw,14px);
  color:var(--gold-soft); margin:0 0 .4em;
}
.m-title{
  font-family:var(--f-deco);
  font-weight:900; text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(30px,7vw,54px);
  margin:0; color:var(--wine-dk);
}
.m-course{ margin:clamp(4px,1vw,8px) 0; }
.m-course-label{
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.22em;
  font-size:clamp(11px,2.4vw,14px);
  color:var(--gold-soft); margin:0 0 .35em;
}
.m-course-item{
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; line-height:1.3;
  font-size:clamp(18px,4vw,28px);
  margin:.08em 0; color:var(--ink-text);
}
.m-note{
  font-family:var(--f-disp);
  font-style:italic;
  font-weight:500;
  letter-spacing:.02em;
  font-size:clamp(14px,3vw,19px);
  margin:0; color:var(--ink-text);
}

/* ============================================================
   PARTY DETAILS
   ============================================================ */
.details{
  position:relative; z-index:2;
  padding:clamp(20px,5vw,50px) 18px clamp(40px,7vw,80px);
}
.frame.parchment{
  border-color:rgba(110,90,55,.7);
  outline-color:rgba(110,90,55,.45);
  color:var(--ink-text);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,244,214,.5), transparent 55%),
    linear-gradient(180deg, #ddcaa0, #cdb98e 60%, #c1aa7c);
  box-shadow:
    inset 0 0 0 6px rgba(120,96,58,.18),
    inset 0 0 120px rgba(90,60,28,.4),
    var(--shadow);
  overflow:hidden;
}
.frame.parchment::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.09; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.frame.parchment .corner{ color:var(--gold-soft); }
.frame.parchment .divider{ color:var(--gold-soft); }
.frame.parchment .divider span{ background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); }
.frame.parchment .divider i{ background:var(--gold-soft); box-shadow:0 0 0 4px rgba(110,90,55,.15); }

.details-inner{ text-align:center; position:relative; z-index:1; }
.d-date{
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(24px,5.2vw,40px);
  margin:0; color:var(--ink-text);
}
.d-label{
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.26em;
  font-size:clamp(11px,2.4vw,14px);
  color:var(--gold-soft); margin:0;
}
.d-time{
  font-family:var(--f-disp);
  font-weight:700;
  font-size:clamp(34px,8vw,58px);
  margin:.05em 0; color:var(--ink-text);
}
.d-venue{
  font-family:var(--f-deco);
  font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,6.5vw,50px);
  margin:0; color:var(--wine-dk);
}
.d-address{
  font-family:var(--f-disp);
  font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; line-height:1.4;
  font-size:clamp(15px,3.4vw,22px);
  margin:.4em 0 0; color:var(--ink-text);
}
.d-tagline{
  font-family:var(--f-disp);
  font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; line-height:1.6;
  font-size:clamp(14px,3vw,19px);
  margin:0; color:var(--ink-text);
}
.map-link{
  display:inline-block; margin-top:22px;
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:12px;
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px solid rgba(110,31,34,.5);
  padding-bottom:2px;
}
.map-link:hover{ color:var(--wine-dk); border-color:var(--wine-dk); }

.site-foot{
  text-align:center;
  font-family:var(--f-type);
  letter-spacing:.2em; text-transform:uppercase;
  font-size:11px;
  color:var(--gold-soft);
  margin-top:clamp(28px,5vw,48px);
  position:relative; z-index:2;
}

/* ============================================================
   MODAL — look guide
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(6,4,3,.86);
  backdrop-filter:blur(3px);
}
.modal-box{
  position:relative; z-index:1;
  max-width:560px; width:100%;
  max-height:92vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#1c140c,#100a06);
  border:2px solid var(--gold-soft);
  box-shadow:inset 0 0 0 5px rgba(12,8,5,.6), 0 30px 70px rgba(0,0,0,.7);
  padding:22px;
  animation:pop .35s cubic-bezier(.2,.7,.3,1.2);
}
@keyframes pop{ from{ opacity:0; transform:scale(.94) translateY(10px);} to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top:8px; right:12px;
  background:none; border:0;
  font-size:32px; line-height:1;
  color:var(--gold); cursor:pointer;
  font-family:var(--f-body);
}
.modal-close:hover{ color:var(--gold-lit); }
.modal-title{
  font-family:var(--f-disp);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(20px,4vw,28px);
  text-align:center; margin:0; color:var(--gold-lit);
}
.modal-sub{
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.24em;
  font-size:11px; text-align:center;
  color:var(--parch-dk); margin:2px 0 14px;
}
.modal-imgwrap{
  overflow:auto;
  border:1px solid var(--gold-soft);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6);
}
.modal-imgwrap img{ width:100%; height:auto; cursor:zoom-in; }
.modal-full{
  display:inline-block;
  margin:12px auto 0;
  font-family:var(--f-type);
  text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; text-align:center;
  color:var(--gold-lit); text-decoration:none;
  border-bottom:1px solid rgba(200,163,90,.5);
  padding-bottom:2px;
}
.modal-full:hover{ color:#fff; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .card-inner{ transition:none; }
  .list-panel, .list-chevron{ transition:none; }
  .body-egg-item{ animation:none; }
  .scroll-hint{ animation:none; }
  html{ scroll-behavior:auto; }
}