/* Peachy's Pin Party - shared design system
   Pulled from sopeachypins.com - her live Shopify theme + logo.
   Pure ASCII. Fonts: Sansita Swashed / Karla. */

:root{
  --magenta:   #9B046F;              /* her primary button */
  --plum:      #5E3653;              /* her secondary scheme */
  --apricot:   #FFD3A1;              /* her accent button */
  --logo-navy: #2A537C;              /* the "So Peachy Pins" script */
  --logo-gold: #FAB766;              /* castle sparkles */

  --peach:      oklch(0.79 0.13 44);
  --peach-deep: var(--magenta);
  --peach-ink:  #2E2A39;             /* her foreground */
  --mint:       oklch(0.86 0.09 168);
  --sky:        oklch(0.85 0.08 235);
  --lilac:      oklch(0.83 0.09 305);
  --butter:     oklch(0.91 0.10 95);
  --rose:       oklch(0.84 0.10 15);

  --paper:   #FFFFFF;                /* pure white per Jason 7/27; her Shopify used #FDFBF7 if she ever wants it back */
  --card:    #FFFFFF;
  --line:    oklch(0.90 0.012 320);
  --ink:     #2E2A39;
  --ink-mid: oklch(0.40 0.025 320);
  --ink-dim: oklch(0.50 0.02 320);

  --ok:   oklch(0.68 0.15 155);
  --busy: oklch(0.78 0.15 78);
  --off:  oklch(0.74 0.01 60);

  --s-2:4px; --s-1:8px; --s0:12px; --s1:16px; --s2:24px;
  --s3:32px; --s4:48px; --s5:64px; --s6:96px;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --display:'Sansita Swashed',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
  --ui:'Karla',system-ui,sans-serif;
  --shadow: 0 1px 2px oklch(0.5 0.05 45 / .07), 0 6px 18px oklch(0.5 0.05 45 / .07);
  --shadow-lg: 0 2px 4px oklch(0.5 0.05 45 / .08), 0 18px 44px oklch(0.5 0.05 45 / .13);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
img{max-width:100%; display:block}

.wrap{max-width:1120px; margin:0 auto; padding-inline:var(--s2)}

/* ---------- pixie dust: four-point sparkles, the park-map kind ---------- */
.speckle{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.sp{position:absolute; color:var(--logo-gold); opacity:.75;
  animation:twinkle 4s var(--ease) infinite}
.sp svg{display:block}
@keyframes twinkle{
  0%,100%{opacity:.22; transform:scale(.82) rotate(0deg)}
  50%    {opacity:.95; transform:scale(1.1) rotate(18deg)}
}

/* marquee bulbs - the ring of lights around a park sign */
.bulbs{position:absolute; left:0; right:0; height:12px; pointer-events:none;
  background-image:radial-gradient(circle, var(--logo-gold) 0 3px, transparent 3.5px);
  background-size:26px 12px; background-position:center; opacity:.55}
.bulbs.top{top:9px} .bulbs.bot{bottom:16px}

/* ---------- top bar + cross-page nav ---------- */
.bar{
  position:sticky; top:0; z-index:60;
  background:oklch(1 0 0 / .88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bar-in{display:flex; align-items:center; gap:var(--s2); height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:800; font-size:19px; color:var(--peach-ink); letter-spacing:-.02em;
  text-decoration:none}
.blob{width:42px;height:42px;flex:none; object-fit:contain}
.navlinks{display:flex; gap:var(--s0); margin-left:auto; align-items:center}
.navstrip{display:none}
.navlinks a{color:var(--ink-mid); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:7px 11px; border-radius:99px; transition:.16s var(--ease)}
.navlinks a:hover{color:var(--magenta); background:oklch(0.55 0.20 340 / .10)}
.navlinks a.here{color:var(--magenta); background:oklch(0.55 0.20 340 / .10)}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700;
  padding:11px 20px; border-radius:99px; font-size:15px; text-decoration:none;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.btn-primary{background:var(--magenta); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-ghost{border:1.5px solid var(--line); color:var(--ink); background:var(--card)}
.btn-ghost:hover{border-color:var(--peach); color:var(--peach-ink)}
.navlinks a.btn{color:#fff}

/* ---------- hero (front door) ---------- */
.hero{position:relative; overflow:hidden; padding-block:var(--s5) var(--s5);
  background:
    radial-gradient(1100px 420px at 86% -14%, oklch(0.88 0.07 60 / .70), transparent 64%),
    radial-gradient(900px 420px at 6% 6%, oklch(0.86 0.06 320 / .40), transparent 64%);
}
.herologo{width:min(330px,74%); margin:0 auto var(--s1); display:block; filter:drop-shadow(0 10px 26px oklch(0.4 0.06 320 / .18))}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:var(--s4); align-items:center; position:relative}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--peach-deep);
  background:oklch(0.55 0.20 340 / .12); padding:7px 15px; border-radius:99px; margin-bottom:var(--s1)}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.4rem); font-weight:800; color:var(--peach-ink)}
.hero h1 em{font-style:normal; color:var(--peach-deep); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em;
  background:var(--apricot); z-index:-1; border-radius:99px}
.lede{margin-top:var(--s1); font-size:18.5px; color:var(--ink-mid); max-width:44ch}
.hero-cta{display:flex; gap:var(--s0); margin-top:var(--s2); flex-wrap:wrap; align-items:center}

.ticketrow{display:flex; gap:var(--s2); margin-top:var(--s3); flex-wrap:wrap}
.tick .n{font-family:var(--display); font-size:27px; font-weight:800; color:var(--peach-ink)}
.tick .l{font-size:12.5px; color:var(--ink-dim); font-weight:600; text-transform:uppercase; letter-spacing:.07em}

/* hero ticket card */
.ticket{
  background:var(--card); border-radius:var(--r-xl); padding:var(--s2);
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  transform:rotate(1.4deg); position:relative;
}
.ticket::before,.ticket::after{content:""; position:absolute; width:26px;height:26px;
  background:var(--paper); border-radius:50%; top:50%; margin-top:-13px}
.ticket::before{left:-14px} .ticket::after{right:-14px}
.ticket h3{font-size:23px; color:var(--peach-ink)}
.ticket .when{font-size:14px; color:var(--ink-dim); font-weight:600; margin-top:2px}
.ticket .when b{color:var(--magenta); font-weight:800}
.perf{border-top:1px dashed var(--line); margin-top:var(--s1); padding-top:var(--s1);
  display:grid; gap:9px}
.perf div{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--ink-mid)}
.chk{width:19px;height:19px;border-radius:50%; background:var(--mint); flex:none; margin-top:2px;
  display:grid; place-items:center; font-size:11px; color:oklch(0.36 0.10 168); font-weight:800}

/* ---------- page hero (inner pages) ---------- */
.pagehero{position:relative; overflow:hidden; padding-block:var(--s4) var(--s3);
  background:radial-gradient(900px 360px at 80% -20%, oklch(0.88 0.07 60 / .55), transparent 64%)}

/* ---------- sections: deliberate whitespace ---------- */
section{padding-block:84px}
.sec-head{margin-bottom:44px; max-width:62ch}
.sec-head .kicker{font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--magenta); margin-bottom:10px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; color:var(--peach-ink)}
.sec-head p{margin-top:10px; color:var(--ink-mid); font-size:17px; max-width:56ch}
.kicker{font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--magenta)}
@media(min-width:900px){
  section{padding-block:120px}
  .sec-head{margin-bottom:56px}
}

/* ---------- marquee sign over the hall ---------- */
.marquee{
  position:relative; text-align:center; padding:var(--s2) var(--s3);
  background:linear-gradient(oklch(0.42 0.13 340), oklch(0.32 0.11 335));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:2px solid var(--logo-gold); border-bottom:none;
  max-width:520px; margin:0 auto -14px; padding-bottom:var(--s3); z-index:2;
  box-shadow:0 -6px 30px oklch(0.42 0.13 340 / .28);
}
.marquee-sub{display:block; font-family:var(--body); font-size:12.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--apricot); margin-bottom:2px}
.marquee-main{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.1rem); color:oklch(0.99 0.01 60);
  text-shadow:0 0 18px oklch(0.85 0.14 62 / .55)}

/* ---------- hall floor ---------- */
.hall{background:
    linear-gradient(oklch(0.955 0.014 320), oklch(0.975 0.008 320));
  border-radius:var(--r-lg); padding:var(--s4) var(--s2) var(--s2);
  border:1px solid oklch(0.86 0.06 62); position:relative; overflow:hidden;
  box-shadow:inset 0 22px 44px oklch(0.42 0.13 340 / .06)}
.hall-top{display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap; margin-bottom:var(--s0); position:relative}
.doors{display:inline-flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
  padding:8px 15px; border-radius:99px; font-size:13.5px; font-weight:700; color:var(--peach-ink)}
.pulse{width:9px;height:9px;border-radius:50%; background:var(--ok); position:relative}
.pulse::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  background:var(--ok); opacity:.3; animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.55);opacity:.5} 80%,100%{transform:scale(1.5);opacity:0}}
.legend{display:flex; gap:var(--s1); margin-left:auto; font-size:13px; color:var(--ink-mid); flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.dot{width:9px;height:9px;border-radius:50%}

.aisle{display:flex; align-items:center; gap:var(--s1); margin-bottom:var(--s1)}
.aisle-tag{font-family:var(--display); font-weight:800; font-size:15px; color:oklch(0.99 0.01 60);
  width:32px;height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--peach-deep)}
.booths{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:var(--s0); flex:1}

.booth{
  position:relative; border-radius:var(--r); padding:var(--s1) var(--s0) var(--s0);
  min-height:214px; text-align:left; border:1px solid oklch(0.5 0.05 45 / .10);
  display:flex; flex-direction:column; gap:9px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:0 1px 2px oklch(0.5 0.05 45 / .06);
}
.booth::before{content:""; position:absolute; left:0; right:0; top:0; height:7px;
  border-radius:var(--r) var(--r) 0 0;
  background:repeating-linear-gradient(90deg,
    oklch(1 0 0 / .55) 0 11px, transparent 11px 22px)}
.booth:hover{transform:translateY(-5px) rotate(-.6deg); box-shadow:var(--shadow-lg); z-index:2}
.booth:focus-visible{outline:3px solid var(--peach-deep); outline-offset:3px}
.booth .logo{width:60px;height:60px;border-radius:14px; background:oklch(1 0 0 / .82);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:19px;
  color:var(--peach-ink); overflow:hidden; padding:6px;
  box-shadow:0 1px 3px oklch(0.4 0.05 320 / .12)}
.booth .logo img{width:100%; height:100%; object-fit:contain}
.booth .nm{font-family:var(--display); font-weight:700; font-size:16px; color:var(--peach-ink); line-height:1.12; display:block}
.booth .tag{display:block; font-size:12.5px; color:var(--ink-mid); font-weight:600;
  line-height:1.3; margin-top:3px; font-style:italic}
.booth .isoline{display:block; margin-top:7px; padding-top:7px;
  border-top:1px dashed oklch(0.4 0.05 320 / .18); font-size:11.5px; line-height:1.35; color:var(--ink-mid)}
.booth .isoline b{display:inline-block; font-size:9.5px; letter-spacing:.1em;
  color:oklch(0.99 0.01 60); background:var(--magenta); font-weight:800;
  padding:1px 6px; border-radius:99px; margin-right:5px; vertical-align:1px}
.booth .bd{display:flex; flex-direction:column; flex:1}
.booth .meta{position:absolute; top:11px; right:10px; font-size:11px; color:var(--ink); font-weight:700;
  display:flex; align-items:center; gap:5px; background:oklch(1 0 0 / .88);
  border-radius:99px; padding:4px 9px; box-shadow:0 1px 3px oklch(0.4 0.05 320 / .14)}
.sdot{width:7px;height:7px;border-radius:50%; flex:none}
.booth .st{display:none}
.booth .feat{position:absolute; top:-8px; left:12px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; background:var(--peach-deep);
  color:oklch(0.99 0.01 60); padding:3px 9px; border-radius:99px}

/* featured dress: the gold marquee canopy */
.booth.gold{border:1px solid color-mix(in oklch, var(--logo-gold) 70%, transparent)}
.booth.gold::before{background:repeating-linear-gradient(90deg,
  var(--logo-gold) 0 11px, oklch(1 0 0 / .75) 11px 22px)}
.booth.gold .feat{background:linear-gradient(oklch(0.42 0.13 340), oklch(0.32 0.11 335));
  border:1px solid var(--logo-gold)}

/* booth trust badge (bottom left) */
.bbadge{
  position:absolute; left:var(--s0); bottom:var(--s0); z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:oklch(1 0 0 / .93); border-radius:99px; padding:3px 8px 3px 4px;
  font:700 10px/1 var(--ui); color:var(--plum);
  box-shadow:0 2px 6px oklch(0 0 0 / .1);
}
.bbadge i{
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:var(--logo-gold); font-size:9px; font-style:normal;
}

.tzstrip{display:inline-flex; align-items:center; gap:var(--s0); flex-wrap:wrap;
  margin:0 0 var(--s2); padding:9px var(--s1); position:relative; max-width:100%;
  background:oklch(1 0 0 / .72); border:1px dashed oklch(0.80 0.06 62);
  border-radius:99px; font-size:13px}
.tzlab{font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:oklch(0.99 0.01 60); background:var(--magenta); padding:4px 11px; border-radius:99px}
.tzrow{color:var(--ink-mid); font-weight:600}
.tzrow b{color:var(--peach-ink); font-weight:800}
.tzrow i{color:var(--ink-dim); font-style:normal; margin-inline:2px}

/* ---------- hall toolbar: search + status chips + sort ---------- */
.toolbar{
  position:sticky; top:64px; z-index:40;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:oklch(1 0 0 / .93); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s0) var(--s1); margin-bottom:var(--s1);
  box-shadow:var(--shadow);
}
.searchbox{flex:1 1 220px; display:flex; align-items:center; gap:8px; min-width:0;
  background:oklch(0.97 0.008 320); border:1px solid var(--line);
  border-radius:99px; padding:9px 15px}
.searchbox input{border:0; background:none; outline:none; width:100%;
  font:500 14px/1.3 var(--ui); color:var(--ink)}
.searchbox input::placeholder{color:var(--ink-dim)}
.schips{display:flex; gap:6px; flex-wrap:wrap}
.schip{
  border:1px solid var(--line); background:oklch(1 0 0); border-radius:99px;
  padding:8px 13px; font:600 12.5px/1 var(--ui); color:var(--ink-mid); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.schip i{width:8px;height:8px;border-radius:50%;font-style:normal}
.schip[aria-pressed="true"]{border-color:var(--magenta); color:var(--magenta);
  background:color-mix(in oklch, var(--magenta) 7%, oklch(1 0 0))}
.sortsel{display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--ui); color:var(--ink-dim)}
.sortsel select{
  font:600 13px/1.3 var(--ui); color:var(--ink); background:oklch(1 0 0);
  border:1px solid var(--line); border-radius:99px; padding:8px 12px; cursor:pointer;
}
.hallcount{font:600 12.5px/1.3 var(--ui); color:var(--ink-dim); margin-left:auto; white-space:nowrap}
@media (max-width:900px){
  .toolbar{top:104px; border-radius:0; border-inline:0;
    margin-inline:calc(var(--s2) * -1); padding-inline:var(--s2)}
  .hallcount{margin-left:0; flex-basis:100%}
}

/* A-Z jump strip */
.azjump{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:var(--s1); position:relative}
.azjump a, .azjump span{
  width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  font:700 12px/1 var(--ui); text-decoration:none}
.azjump a{background:oklch(1 0 0); border:1px solid var(--line); color:var(--magenta)}
.azjump a:hover{border-color:var(--magenta)}
.azjump span{color:oklch(0.84 0.01 320)}

/* featured strip: bigger cards under a gold canopy */
.featstrip{position:relative; margin-bottom:var(--s2); border-radius:var(--r);
  border:1px solid color-mix(in oklch, var(--logo-gold) 60%, transparent);
  background:color-mix(in oklch, var(--apricot) 16%, oklch(1 0 0)); overflow:hidden;
  padding:var(--s1)}
.featstrip::before{content:""; position:absolute; left:0; right:0; top:0; height:9px;
  background:repeating-linear-gradient(90deg, var(--logo-gold) 0 13px, oklch(1 0 0 / .8) 13px 26px)}
.featstrip .fh{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:var(--s-1) var(--s-2) var(--s0)}
.featstrip .fh small{font-size:12px; color:var(--ink-dim); font-weight:600}
.featstrip .booths{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.featstrip .booth{min-height:238px}

/* inline featured endcap */
.endcap{position:relative; margin:var(--s1) 0 var(--s2); border-radius:var(--r);
  border:1px dashed color-mix(in oklch, var(--logo-gold) 75%, transparent);
  background:color-mix(in oklch, var(--apricot) 12%, oklch(1 0 0));
  padding:var(--s1); display:grid; gap:10px}
.endcap .eh{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.endcap .eh small{font-size:12px; color:var(--ink-dim); font-weight:600}
.endcap .booths{grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); max-width:560px}

/* the fake-scale tile */
.morebooth{margin-top:var(--s1); border:2px dashed oklch(0.80 0.06 62); border-radius:var(--r);
  padding:var(--s3) var(--s2); text-align:center; color:var(--ink-mid);
  font:600 14px/1.5 var(--ui); background:oklch(1 0 0 / .6)}
.morebooth b{display:block; font:800 22px/1.2 var(--display); color:var(--peach-ink); margin-bottom:4px}

.nomatch{border:2px dashed var(--line); border-radius:var(--r); padding:var(--s3) var(--s2);
  text-align:center; color:var(--ink-mid); font:600 14px/1.5 var(--ui); background:oklch(1 0 0 / .6)}

.peek{font-size:13.5px; color:var(--ink-dim); text-align:center; margin-top:var(--s2)}
.peek a{color:var(--magenta); font-weight:700}

/* ---------- full-screen panel (booth, vendor, HQ views) ---------- */
.panel{
  position:fixed; inset:0; height:100dvh; width:100%;
  background:var(--paper); z-index:90;
  opacity:0; pointer-events:none; transform:translateY(14px) scale(.995);
  transition:opacity .3s var(--ease), transform .34s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.panel.on{opacity:1; pointer-events:auto; transform:none}
.panel-head{
  padding:var(--s1) var(--s2); border-bottom:1px solid var(--line); position:relative; flex:none;
  background:color-mix(in oklch, var(--paper) 88%, oklch(1 0 0)); backdrop-filter:blur(8px);
}
.panel-body{overflow-y:auto; flex:1; padding:0}
.booth-wrap{
  max-width:1180px; margin-inline:auto; padding:var(--s2) var(--s2) var(--s3);
  display:grid; grid-template-columns:1.55fr .95fr; gap:var(--s2); align-items:start;
}
.booth-main{min-width:0}
.booth-side{
  position:sticky; top:var(--s1); display:flex; flex-direction:column; gap:var(--s1); min-width:0;
}
.backlink{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font:600 14px/1 var(--ui); color:var(--magenta); padding:8px 0;
}
.boothurl{
  display:none; align-items:center; gap:8px; font:500 12px/1 var(--ui);
  color:var(--ink-dim); background:color-mix(in oklch, var(--plum) 6%, oklch(1 0 0));
  border:1px solid var(--line); border-radius:99px; padding:7px 13px; margin-left:auto;
}
.boothurl b{color:var(--ink); font-weight:600}
@media (min-width:780px){ .boothurl{display:inline-flex} }
.x{width:36px;height:36px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); display:grid; place-items:center;
  font-size:18px; color:var(--ink-mid); cursor:pointer; flex:none; margin-left:auto}
.boothurl + .x{margin-left:0}
@media (max-width:900px){
  .booth-wrap{grid-template-columns:1fr; padding:var(--s1) var(--s0) var(--s2); gap:var(--s1)}
  .booth-side{position:static}
}
.x:hover{background:var(--peach); color:oklch(0.99 0.01 60); border-color:transparent}

.vend{display:flex; gap:var(--s1); align-items:center}
.vend .av{width:68px;height:68px;border-radius:18px; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:25px; color:var(--peach-ink); flex:none;
  overflow:hidden; padding:7px; border:1px solid var(--line)}
.vend .av img{width:100%;height:100%;object-fit:contain}
.vend .vtag{font-size:13.5px; color:var(--ink-mid); font-style:italic; margin-top:1px}
.vend h3{font-size:24px; color:var(--peach-ink)}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  background:var(--mint); color:oklch(0.34 0.10 168); padding:3px 10px; border-radius:99px}
.iso{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--s1);
  margin-top:var(--s1)}
.iso .lab{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--peach-deep); margin-bottom:4px}
.iso p{font-size:14.5px; color:var(--ink-mid)}

.book{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--s0); margin-top:var(--s1)}
.page{aspect-ratio:3/4; border-radius:var(--r); border:1px solid var(--line); overflow:hidden;
  position:relative; background:var(--card)}
.page .grid{position:absolute; inset:8px; bottom:26px; display:grid; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr; gap:5px}
.pin{aspect-ratio:1; width:100%; border-radius:6px; overflow:hidden; background:oklch(0.94 0.01 320)}
.pin img{width:100%; height:100%; object-fit:cover; display:block}
.page .cap{position:absolute; bottom:0; left:0; right:0; padding:5px 8px; font-size:11px;
  font-weight:700; background:oklch(1 0 0 / .9); color:var(--ink-mid)}
.slot{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:11.5px; color:var(--ink-dim); font-weight:600; padding:var(--s0); line-height:1.35}

/* ---------- chat ---------- */
.chat{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.chat-top{padding:var(--s0) var(--s1); border-bottom:1px solid var(--line); display:flex;
  align-items:center; gap:9px; font-weight:700; font-size:14.5px; color:var(--peach-ink)}
.msgs{padding:var(--s1); display:grid; gap:10px; background:oklch(0.975 0.012 60)}
.msg{max-width:82%; padding:10px 14px; border-radius:var(--r-lg); font-size:14.5px; line-height:1.45}
.msg.them{background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; justify-self:start}
.msg.me{background:var(--peach-deep); color:oklch(0.99 0.01 60); border-bottom-right-radius:5px; justify-self:end}
.msg .ph{margin-top:8px; border-radius:9px; height:74px; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; background:oklch(1 0 0 / .28); border:1px dashed oklch(1 0 0 / .5)}
.msg.them .ph{background:oklch(0.94 0.02 60); border-color:var(--line); color:var(--ink-dim)}
.chat-in{display:flex; gap:9px; padding:var(--s0) var(--s1); border-top:1px solid var(--line); align-items:center}
.chat-in .fake{flex:1; background:oklch(0.96 0.012 60); border-radius:99px; padding:9px 15px;
  font-size:14px; color:var(--ink-dim)}
.clip{width:34px;height:34px;border-radius:50%; background:oklch(0.96 0.012 60); display:grid;
  place-items:center; font-size:15px; flex:none}

/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:var(--s2)}
.trust article{padding-top:var(--s1); border-top:2px solid var(--apricot)}
.trust h4{font-size:18px; color:var(--peach-ink); margin-bottom:6px}
.trust p{font-size:14.5px; color:var(--ink-mid)}
.trust .num{font-family:var(--display); font-size:13px; font-weight:800; color:var(--peach-deep);
  letter-spacing:.1em; margin-bottom:7px}

footer{padding-block:var(--s3); border-top:1px solid var(--line); text-align:center;
  color:var(--ink-dim); font-size:13.5px}

/* ---------- vendor admin (mobile first) ---------- */
.admin-wrap{max-width:1180px; margin-inline:auto; padding:var(--s1) var(--s0) var(--s3)}
.admin-cols{display:grid; grid-template-columns:1fr; gap:var(--s1)}
.acard{
  background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s1); min-width:0;
}
.acard > h4{
  font:700 15px/1.2 var(--ui); color:var(--peach-ink); margin:0 0 3px;
  display:flex; align-items:center; gap:8px;
}
.acard .hint{font-size:12.5px; color:var(--ink-dim); margin:0 0 var(--s1)}
.field{margin-bottom:11px}
.field label{
  display:block; font:700 10.5px/1 var(--ui); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:5px;
}
.field .inp{
  background:color-mix(in oklch, var(--plum) 4%, oklch(1 0 0));
  border:1px solid var(--line); border-radius:var(--r); padding:10px 13px;
  font:400 14px/1.45 var(--ui); color:var(--ink); min-height:42px;
}
.field .inp.tall{min-height:66px}
.chiprow{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.chip{
  display:inline-flex; align-items:center; gap:6px; background:color-mix(in oklch, var(--lilac) 34%, oklch(1 0 0));
  border-radius:99px; padding:5px 11px; font:600 12px/1 var(--ui); color:var(--plum);
}
.chip.no{background:color-mix(in oklch, var(--rose) 34%, oklch(1 0 0))}
.chip b{font-weight:700; opacity:.5; cursor:pointer}
.statusrow{display:flex; gap:7px; flex-wrap:wrap}
.sbtn{
  flex:1 1 auto; border:1px solid var(--line); background:oklch(1 0 0); cursor:pointer;
  border-radius:99px; padding:9px 12px; font:600 12.5px/1 var(--ui); color:var(--ink-mid);
  display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap;
}
.sbtn i{width:8px;height:8px;border-radius:50%;font-style:normal}
.sbtn[aria-pressed="true"]{border-color:var(--magenta); color:var(--magenta); background:color-mix(in oklch, var(--magenta) 8%, oklch(1 0 0))}
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px}
.pgrid .pg{
  aspect-ratio:3/4; border-radius:var(--r); border:1px solid var(--line);
  overflow:hidden; position:relative; background:var(--card);
}
.pgrid .pg img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid .pg .n{
  position:absolute; left:5px; bottom:5px; background:oklch(0 0 0 / .58); color:#fff;
  font:600 10px/1 var(--ui); padding:4px 7px; border-radius:99px;
}
.pgrid .add{
  display:grid; place-items:center; text-align:center; border-style:dashed;
  color:var(--magenta); font:600 11.5px/1.35 var(--ui); cursor:pointer;
  background:color-mix(in oklch, var(--magenta) 4%, oklch(1 0 0));
}
.trow{
  display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:13.5px;
}
.trow:last-child{border-bottom:0}
.trow .who{flex:1; min-width:0}
.trow .who b{display:block; font:600 13.5px/1.3 var(--ui); color:var(--ink)}
.trow .who span{color:var(--ink-dim); font-size:12.5px}
.pill{
  font:700 10.5px/1 var(--ui); padding:5px 9px; border-radius:99px; white-space:nowrap;
  letter-spacing:.04em;
}
.pill.wait{background:color-mix(in oklch, var(--butter) 55%, oklch(1 0 0)); color:#7a5600}
.pill.go{background:color-mix(in oklch, var(--mint) 48%, oklch(1 0 0)); color:#0d5f45}
.pill.late{background:color-mix(in oklch, var(--rose) 48%, oklch(1 0 0)); color:#8a2140}
.astat{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:var(--s1)}
.astat div{
  background:color-mix(in oklch, var(--apricot) 20%, oklch(1 0 0));
  border-radius:var(--r); padding:11px 9px; text-align:center;
}
.astat b{display:block; font:800 20px/1 var(--display); color:var(--peach-ink)}
.astat span{font:600 10px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim)}
@media (min-width:820px){
  .admin-wrap{padding-inline:var(--s2)}
  .admin-cols{grid-template-columns:1.1fr .9fr; gap:var(--s2); align-items:start}
  .acard{padding:var(--s2)}
}

/* ---------- trade flow walkthrough (mobile first) ---------- */
.steps{display:grid; grid-template-columns:1fr; gap:var(--s1); counter-reset:step}
.step{
  background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s1); position:relative; min-width:0;
}
.step .snum{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--magenta); color:#fff; font:800 14px/1 var(--ui); margin-bottom:9px;
}
.step h4{font:700 16px/1.25 var(--ui); color:var(--peach-ink); margin:0 0 5px}
.step p{font-size:13.5px; color:color-mix(in oklch, var(--ink) 74%, transparent); margin:0}
.step .vig{
  margin-top:var(--s0); border:1px dashed color-mix(in oklch, var(--plum) 20%, transparent);
  border-radius:var(--r); padding:var(--s0);
  background:color-mix(in oklch, var(--plum) 3%, oklch(1 0 0));
  font:500 13px/1.5 var(--ui); color:var(--ink-mid);
}
.locksheet{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12.5px}
.locksheet > div{background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r); padding:9px}
.locksheet b{display:block; font:700 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--magenta); margin-bottom:6px}
.locksheet .ok{margin-top:7px; color:#0d5f45; font-weight:700; font-size:12px}
.shotpair{display:flex; gap:8px}
.shotpair span{
  flex:1; aspect-ratio:1; border-radius:var(--r); overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--card);
}
.shotpair img{width:100%;height:100%;object-fit:cover;display:block}
.shotpair i{
  position:absolute; left:5px; bottom:5px; background:oklch(0 0 0 / .6); color:#fff;
  font:600 10px/1 var(--ui); font-style:normal; padding:4px 7px; border-radius:99px;
}
.trackline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.trackline .tno{
  font:600 13px/1 var(--ui); background:oklch(1 0 0); border:1px solid var(--line);
  border-radius:99px; padding:8px 13px; color:var(--logo-navy); text-decoration:underline;
}
.matchrow{display:flex; gap:8px}
.matchrow button{
  flex:1; border-radius:99px; padding:11px; font:700 13.5px/1 var(--ui); cursor:pointer; border:0;
}
.matchrow .yes{background:var(--ok); color:#fff}
.matchrow .no{background:oklch(1 0 0); border:1.5px solid var(--line); color:var(--ink-mid)}
.receipt{
  border:1px solid color-mix(in oklch, var(--logo-gold) 55%, transparent);
  background:color-mix(in oklch, var(--apricot) 20%, oklch(1 0 0));
  border-radius:var(--r); padding:var(--s0); font-size:12.5px; color:var(--ink);
}
.receipt b{font:700 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--plum);
  display:block; margin-bottom:5px}
.offnote{
  border-left:4px solid var(--busy); background:color-mix(in oklch, var(--butter) 30%, oklch(1 0 0));
  border-radius:var(--r); padding:var(--s1);
}
.offnote h4{font:700 15px/1.3 var(--ui); color:var(--peach-ink); margin:0 0 6px}
.offnote p, .offnote li{font-size:13.5px; color:color-mix(in oklch, var(--ink) 76%, transparent)}
.offnote ul{margin:7px 0 0; padding-left:19px}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .step.wide{grid-column:span 3}
}

/* ---------- Peachy HQ ---------- */
.ledger{width:100%; border-collapse:collapse; font-size:13px}
.ledger th{
  text-align:left; font:700 10.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.ledger td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
.ledger tr:last-child td{border-bottom:0}
.ledger .t{font-weight:600; color:var(--ink)}
.ledger .sub{display:block; font-size:11.5px; color:var(--ink-dim)}
.lwrap{overflow-x:auto; margin-inline:calc(var(--s0) * -1); padding-inline:var(--s0)}
.filterrow{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:var(--s0)}
.fchip{
  border:1px solid var(--line); background:oklch(1 0 0); border-radius:99px;
  padding:7px 13px; font:600 12px/1 var(--ui); color:var(--ink-mid); cursor:pointer;
}
.fchip.hot{border-color:var(--magenta); color:var(--magenta);
  background:color-mix(in oklch, var(--magenta) 7%, oklch(1 0 0))}
.nudge{
  border:0; background:color-mix(in oklch, var(--magenta) 10%, oklch(1 0 0)); color:var(--magenta);
  font:700 11.5px/1 var(--ui); border-radius:99px; padding:7px 12px; cursor:pointer; white-space:nowrap;
}
.vetrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.vetrow:last-child{border-bottom:0}
.vetrow .vwho{flex:1; min-width:0}
.vetrow .vwho b{display:block; font:600 13.5px/1.3 var(--ui); color:var(--ink)}
.vetrow .vwho span{font-size:12px; color:var(--ink-dim)}
.vbtns{display:flex; gap:6px}
.vbtns button{
  border-radius:99px; padding:8px 13px; font:700 12px/1 var(--ui); cursor:pointer; border:0;
}
.vbtns .ap{background:var(--ok); color:#fff}
.vbtns .de{background:oklch(1 0 0); border:1.5px solid var(--line); color:var(--ink-mid)}
.composer{
  border:1px solid var(--line); border-radius:var(--r); background:oklch(1 0 0); overflow:hidden;
}
.composer .cbody{padding:var(--s0); font-size:13.5px; color:var(--ink); min-height:54px}
.composer .cfoot{
  display:flex; align-items:center; gap:8px; padding:9px var(--s0);
  border-top:1px solid var(--line); background:color-mix(in oklch, var(--plum) 3%, oklch(1 0 0));
}
.composer .cfoot span{font-size:11.5px; color:var(--ink-dim); margin-right:auto}
.sugg{border-bottom:1px solid var(--line); padding:11px 0}
.sugg:last-child{border-bottom:0}
.sugg p{font-size:13px; color:var(--ink); margin:0 0 5px}
.sugg .from{font-size:11.5px; color:var(--ink-dim)}
.sugg .re{
  margin-top:7px; font-size:12.5px; color:var(--plum); background:color-mix(in oklch, var(--lilac) 22%, oklch(1 0 0));
  border-radius:var(--r); padding:8px 11px;
}
.setrow{display:flex; flex-wrap:wrap; gap:8px}
.setrow .set{
  background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 13px; font:600 12.5px/1.35 var(--ui); color:var(--ink);
}
.setrow .set span{display:block; font:700 10px/1 var(--ui); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px}

/* ---------- next event (front door) ---------- */
.nextwrap{display:grid; grid-template-columns:1fr; gap:var(--s2)}
@media (min-width:860px){ .nextwrap{grid-template-columns:1.1fr .9fr; align-items:start} }
.nextcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s3) var(--s2); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.nextcard::before{content:""; position:absolute; left:0; right:0; top:0; height:8px;
  background:repeating-linear-gradient(90deg, var(--magenta) 0 12px, oklch(1 0 0 / .4) 12px 24px)}
.nextcard .bigdate{font-family:var(--display); font-weight:800; color:var(--peach-ink);
  font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.15; margin:var(--s0) 0 6px}
.nextcard .sub{font-size:14.5px; color:var(--ink-mid); font-weight:600}
.nextcard .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--s1)}
.datelist{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.datelist .dl{display:flex; align-items:baseline; gap:14px; padding:14px 18px;
  border-bottom:1px solid var(--line)}
.datelist .dl:last-child{border-bottom:0}
.datelist .dl b{flex:none; width:88px; font:800 15px/1.2 var(--display); color:var(--magenta)}
.datelist .dl span{font:600 13.5px/1.4 var(--ui); color:var(--ink-mid)}
.datelist .note{padding:10px 18px; font-size:11.5px; color:var(--ink-dim);
  background:color-mix(in oklch, var(--plum) 3%, oklch(1 0 0))}

/* ---------- announcements feed (front door) ---------- */
.annfeed{max-width:660px; display:grid; gap:12px}
.ann{display:flex; gap:10px; align-items:flex-start}
.ann > span{
  flex:none; width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in oklch, var(--apricot) 60%, oklch(1 0 0));
  font:700 12px/1 var(--ui); color:var(--plum);
}
.ann > div{background:oklch(1 0 0); border:1px solid var(--line); border-radius:14px;
  padding:11px 15px; font-size:14px; color:var(--ink)}
.ann b{display:block; font-size:11.5px; color:var(--magenta); margin-bottom:2px}
.ann small{display:block; font-size:11px; color:var(--ink-dim); margin-top:5px}
.readonly-tag{
  font:700 10px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase;
  background:var(--plum); color:#fff; border-radius:99px; padding:4px 9px;
}

/* ---------- two doors (front door) ---------- */
.doors2{display:grid; grid-template-columns:1fr; gap:var(--s2)}
@media (min-width:760px){ .doors2{grid-template-columns:1fr 1fr} }
.door{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--s3); box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
.door::before{content:""; position:absolute; left:0; right:0; top:0; height:9px;
  background:repeating-linear-gradient(90deg, var(--magenta) 0 13px, oklch(1 0 0 / .45) 13px 26px)}
.door.gold::before{background:repeating-linear-gradient(90deg, var(--logo-gold) 0 13px, oklch(1 0 0 / .7) 13px 26px)}
.door h3{font-size:25px; color:var(--peach-ink); margin-top:6px}
.door .pr{font-family:var(--display); font-size:40px; font-weight:800; color:var(--magenta); line-height:1}
.door .pr span{font-family:var(--body); font-size:13px; font-weight:600; color:var(--ink-dim); display:block; margin-top:4px}
.door p{font-size:14.5px; color:var(--ink-mid)}
.door .btn{align-self:flex-start; margin-top:auto}
.door small{font-size:11.5px; color:var(--ink-dim)}

/* ---------- community: the clubhouse ---------- */
.clubhead{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(oklch(0.42 0.13 340), oklch(0.30 0.10 335));
  border-bottom:3px solid var(--logo-gold);
  padding-block:var(--s4) 0;
}
.clubhead .kicker{color:var(--apricot)}
.clubhead h1{color:oklch(0.99 0.01 60); font-size:clamp(2rem,5vw,3.1rem); font-weight:800;
  text-shadow:0 0 18px oklch(0.85 0.14 62 / .4)}
.clubhead .lede{color:oklch(0.93 0.02 340); max-width:52ch}
.memb{
  display:inline-flex; align-items:center; gap:7px; font:700 11px/1 var(--ui);
  letter-spacing:.1em; text-transform:uppercase; color:var(--plum);
  background:var(--apricot); border-radius:99px; padding:6px 13px; margin-bottom:var(--s1);
}
.clubtabs{display:flex; gap:8px; flex-wrap:wrap; padding-top:var(--s2); padding-bottom:var(--s2); position:relative}
.ctab{
  border:1px solid oklch(1 0 0 / .35); background:oklch(1 0 0 / .1); border-radius:99px;
  padding:10px 16px; font:600 13px/1 var(--ui); color:oklch(0.97 0.01 60); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.ctab i{width:7px;height:7px;border-radius:50%;background:var(--ok);font-style:normal}
.ctab[aria-selected="true"]{background:oklch(1 0 0); color:var(--magenta); border-color:oklch(1 0 0)}
.roompane{max-width:720px}
.rmsg{display:flex; gap:9px; padding:8px 0; align-items:flex-start}
.rmsg span{
  flex:none; width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in oklch, var(--sky) 50%, oklch(1 0 0)); font:700 10px/1 var(--ui); color:var(--plum);
}
.rmsg div{font-size:13px; color:var(--ink); background:oklch(1 0 0);
  border:1px solid var(--line); border-radius:12px; padding:8px 12px}
.rmsg div b{display:block; font-size:11px; color:var(--magenta); margin-bottom:2px}
.rmsg.puck span{background:color-mix(in oklch, var(--apricot) 60%, oklch(1 0 0))}

/* ISO wall */
.isowall{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; max-width:900px}
.isocard{
  background:oklch(1 0 0); border-radius:var(--r); padding:var(--s1);
  border:1px solid color-mix(in oklch, var(--plum) 10%, transparent);
}
.isocard .who{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.isocard .who span{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in oklch, var(--lilac) 55%, oklch(1 0 0));
  font:700 10px/1 var(--ui); color:var(--plum);
}
.isocard .who b{font:600 13px/1.2 var(--ui); color:var(--ink)}
.isocard .who small{font:600 11.5px/1 var(--ui); color:var(--ink-dim)}
.isocard p{font-size:13px; color:color-mix(in oklch, var(--ink) 72%, transparent); margin:0}
.isocard .hits{
  margin-top:9px; font:700 11px/1.4 var(--ui); color:var(--magenta);
  display:flex; align-items:flex-start; gap:5px;
}

/* ---------- today at peachy's ---------- */
.sched{display:flex; flex-direction:column; background:oklch(1 0 0);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; max-width:640px}
.sl{display:flex; align-items:baseline; gap:14px; padding:13px 16px;
  border-bottom:1px solid var(--line); min-width:0}
.sl:last-child{border-bottom:0}
.sl > b{flex:none; width:62px; font:800 15px/1 var(--display); color:var(--magenta); text-align:right}
.sl > div{min-width:0}
.sl p{font:600 13.5px/1.35 var(--ui); color:var(--ink); margin:0}
.sl small{display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px}
.sl.drop{background:color-mix(in oklch, var(--magenta) 5%, oklch(1 0 0));
  box-shadow:inset 4px 0 0 var(--magenta)}

.daycards{display:grid; grid-template-columns:1fr; gap:var(--s2); max-width:900px}
@media (min-width:760px){ .daycards{grid-template-columns:1fr 1fr} }
.daycard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s2); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.daycard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--magenta)}
.daycard.gold::before{background:var(--logo-gold)}
.daycard .when{font:800 14px/1 var(--display); color:var(--magenta); margin-bottom:8px}
.daycard h3{font-size:21px; color:var(--peach-ink); margin-bottom:7px}
.daycard p{font-size:14px; color:var(--ink-mid)}
.daycard .pill{margin-top:10px; display:inline-block}

/* ---------- badges & tokens ---------- */
.badgeband{display:grid; grid-template-columns:1fr; gap:var(--s1)}
.bcol{background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s1)}
.bcol h4{font:700 15px/1.3 var(--ui); color:var(--peach-ink); margin:0 0 8px}
.blist{display:flex; flex-wrap:wrap; gap:7px}
.bpin{
  display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:7px 12px;
  font:700 12px/1 var(--ui); color:var(--plum);
  background:color-mix(in oklch, var(--lilac) 30%, oklch(1 0 0));
  border:1px solid color-mix(in oklch, var(--plum) 14%, transparent);
}
.lb{font-size:13px}
.lb div{display:flex; gap:9px; padding:7px 0; border-bottom:1px solid var(--line); align-items:center}
.lb div:last-child{border-bottom:0}
.lb b{color:var(--magenta); font:800 13px/1 var(--ui); width:20px}
.lb i{font-style:normal; margin-left:auto; color:var(--ink-dim); font-size:12px}
@media (min-width:820px){ .badgeband{grid-template-columns:1fr 1fr} }
.onlytag{
  font:700 10px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  background:var(--magenta); color:oklch(1 0 0); padding:5px 10px; border-radius:99px;
}

/* ---------- featured teaser (front door) ---------- */
.teasegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s0)}
.teasegrid .booth{min-height:224px}
.tease-more{
  border:2px dashed oklch(0.80 0.06 62); border-radius:var(--r); text-decoration:none;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  text-align:center; padding:var(--s2); color:var(--ink-mid); font:600 13.5px/1.5 var(--ui);
  background:oklch(1 0 0 / .6); min-height:224px;
}
.tease-more b{font:800 21px/1.2 var(--display); color:var(--peach-ink)}
.tease-more span{color:var(--magenta); font-weight:700}

/* ---------- social-proof trade popup ---------- */
.tradepop{position:fixed; z-index:70; left:14px; bottom:14px; width:min(300px, calc(100vw - 28px));
  background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 10px 30px oklch(0 0 0 / .16); padding:11px 34px 11px 11px;
  display:flex; gap:10px; align-items:center;
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:transform .38s cubic-bezier(.3,1.2,.5,1), opacity .38s;
}
.tradepop.show{transform:none; opacity:1; pointer-events:auto}
.tradepop .pp{display:flex; align-items:center; gap:5px; flex:none}
.tradepop .pp span{width:42px;height:42px;border-radius:9px;overflow:hidden;border:1px solid var(--line);display:block}
.tradepop .pp img{width:100%;height:100%;object-fit:cover;display:block}
.tradepop .pp i{font-style:normal;color:var(--magenta);font-weight:800}
.tradepop .tx{min-width:0}
.tradepop .tx p{font:600 12.5px/1.3 var(--ui); color:var(--ink); margin:2px 0 0}
.tradepop .tx small{font-size:11px; color:var(--ink-dim)}
.tradepop .liv{display:inline-flex;align-items:center;gap:5px;font:700 9.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ok)}
.tradepop .liv i{width:6px;height:6px;border-radius:50%;background:var(--ok);font-style:normal;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.tradepop .px{position:absolute; top:6px; right:6px; width:22px;height:22px;border-radius:50%;border:0;
  background:color-mix(in oklch, var(--ink) 7%, transparent); color:var(--ink-mid); cursor:pointer; font:700 11px/1 var(--ui)}
@media (prefers-reduced-motion:reduce){ .tradepop{transition:opacity .3s} .tradepop .liv i{animation:none} }

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .ticket{transform:none; margin-top:var(--s2)}
  .navlinks{display:contents}
  .navlinks a{display:none}
  .navlinks a.btn{display:inline-flex; margin-left:auto; padding:9px 15px; font-size:14px; white-space:nowrap}
  .navstrip{
    display:flex; gap:0; overflow-x:auto; padding:0 var(--s0);
    background:color-mix(in oklch, var(--paper) 94%, oklch(1 0 0));
    border-top:1px solid var(--line);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .navstrip::-webkit-scrollbar{display:none}
  .navstrip a{
    flex:none; font:600 13.5px/1 var(--ui); color:var(--ink-mid);
    text-decoration:none; padding:12px 13px; white-space:nowrap;
  }
  .navstrip a.here{color:var(--magenta); box-shadow:inset 0 -2px 0 var(--magenta)}
  .aisle{flex-direction:column; align-items:stretch; gap:9px}
  .aisle-tag{width:auto; height:26px; border-radius:99px; padding-inline:14px; align-self:flex-start}
  .brand{font-size:15px; gap:7px; min-width:0; flex:none}
  .brand span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .blob{width:32px;height:32px}
  .bar-in{gap:var(--s0)}
  .marquee{max-width:none; margin-inline:var(--s0); padding:var(--s1) var(--s2) var(--s2)}
  .booths{grid-template-columns:1fr; gap:10px}
  .booth{min-height:0; padding:var(--s0)}
  .booth:has(.bbadge){padding-bottom:44px}
  .booth .logo{width:54px;height:54px;font-size:17px;border-radius:12px}
  .booth .nm{font-size:14px}
  .hall{padding:var(--s2) var(--s0) var(--s0)}
  .featstrip .booths{grid-template-columns:1fr}
  .featstrip .booth{min-height:0}
  section{padding-block:64px}
}
@media (max-width:430px){
  .brand span{display:none}
  .panel-head .backlink{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}