/* Event detail: RSVP, guest list, gallery, the food menu card, and the organizer page. */
.tight { margin: -2px 0 12px; }
.ev-detail .inc { margin-top: 14px; }
.ev-detail .callout { margin-top: 14px; }

/* ---------- RSVP ---------- */
.rsvp-card { padding: 14px 16px 16px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.rsvp-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rsvp-top > div:nth-child(2) { flex: 1; min-width: 0; } .rsvp-top b { display: block; font: 800 20px var(--ff-d); letter-spacing: -.02em; } .rsvp-top small { color: var(--ink-2); font-size: 13px; }
.avstack { display: flex; padding-left: 10px; }
.av { width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; border: 2.5px solid var(--card); display: grid; place-items: center; flex: none; font: 700 13px var(--ff-d); animation: pop .5s calc(var(--i, 0) * 70ms) var(--ease) both; }
.av.me { background: var(--yellow); color: var(--ink); font-size: 11px; }
.rsvp-card .bar i { background: var(--event); }

/* ---------- guest list ---------- */
.glist { display: grid; gap: 4px; margin-top: 10px; background: var(--card); border-radius: 22px; padding: 6px 14px; box-shadow: 0 1px 0 var(--line); }
.glist li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); animation: rise .5s var(--ease) both; }
.glist li:last-child { border-bottom: 0; }
.glist .av { margin: 0; border: 0; width: 40px; height: 40px; animation: none; }
.glist b { display: block; font-weight: 600; font-size: 14.5px; } .glist small { color: var(--ink-3); font-size: 12.5px; }
.glist li.me { background: linear-gradient(90deg, rgba(255, 210, 63, .22), transparent); margin: 0 -14px; padding: 9px 14px; border-radius: 14px; }
.more { margin-top: 10px; text-align: center; font-weight: 600; color: var(--ink-2); font-size: 13.5px; }
.glock { position: relative; margin-top: 10px; border-radius: 22px; overflow: hidden; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.gl-blur { display: grid; gap: 10px; padding: 16px; filter: blur(6px); opacity: .7; user-select: none; }
.gl-blur > div { display: flex; align-items: center; gap: 12px; } .gl-blur .av { margin: 0; border: 0; animation: none; } .gl-blur i { height: 10px; flex: 1; border-radius: 6px; background: #CBD3CD; }
.gl-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 14px; background: rgba(237, 240, 235, .55); }
.gl-msg .ic { width: 26px; height: 26px; color: var(--event); } .gl-msg b { font: 700 16px var(--ff-d); } .gl-msg small { color: var(--ink-2); font-size: 13px; }

/* ---------- gallery ---------- */
.gal { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 2px 20px 10px; scrollbar-width: none; }
.gal::-webkit-scrollbar { display: none; }
.gal-tile { flex: none; width: 262px; text-align: left; scroll-snap-align: start; transition: transform .3s var(--ease); } .gal-tile:active { transform: scale(.97); }
.gal-art { aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 24px rgba(15, 26, 23, .14); }
.gal-art .art { width: 100%; height: 100%; display: block; transition: transform .6s var(--ease); } .gal-tile:hover .gal-art .art { transform: scale(1.06); }
.gal-tile b { display: block; margin-top: 10px; font: 700 15px var(--ff-d); } .gal-tile small { color: var(--ink-2); font-size: 12.5px; }
.lb .lb-art { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; margin-top: 4px; } .lb .art { width: 100%; height: 100%; display: block; }
.lb-cap { margin: 12px 0 10px; } .lb-cap b { display: block; font: 800 20px var(--ff-d); } .lb-cap small { color: var(--ink-2); }
.lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lb-nav span { font: 400 12px var(--ff-m); color: var(--ink-3); }

/* ---------- the food menu card ---------- */
.menu-wrap { padding-top: 6px; }
.mw-kick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; background: var(--yellow); color: var(--ink); font: 500 11.5px var(--ff-m); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2.5deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%); }
.mw-kick .ic { width: 14px; height: 14px; }
.mw-title { margin: 12px 0 0; font: 900 50px/.92 var(--ff-p); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); text-wrap: balance; }
.mw-sub { font: 600 16px/1.3 var(--ff-d); color: var(--event-deep); margin: 8px 0 16px; letter-spacing: -.01em; }
.menu-card { --paper2: #FFF8EA; position: relative; border-radius: 6px 6px 22px 22px; background: var(--paper2); box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 22px 40px rgba(15, 26, 23, .16); transform: rotate(-.7deg); transition: transform .5s var(--ease); }
.menu-card:hover { transform: rotate(0deg) translateY(-3px); }
.mc-top { position: relative; height: 132px; overflow: hidden; border-radius: 6px 6px 0 0; color: #fff; }
.mc-top .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-top::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .38)); }
.mc-top::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 14px; background: radial-gradient(circle at 10px 14px, var(--paper2) 9.5px, transparent 10px) repeat-x; background-size: 20px 14px; }
.mc-top-in { position: absolute; z-index: 2; left: 16px; right: 96px; bottom: 26px; } .mc-top-in small { display: block; font: 500 11px var(--ff-m); letter-spacing: .14em; opacity: .92; }
.mc-top-in b { display: block; margin-top: 2px; font: 900 27px/.95 var(--ff-p); text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.mc-stamp { position: absolute; z-index: 3; top: 12px; right: 12px; width: 78px; height: 78px; border-radius: 50%; border: 2.5px dashed rgba(255, 255, 255, .9); display: grid; place-items: center; text-align: center; font: 800 15px/1 var(--ff-p); letter-spacing: .08em; text-transform: uppercase; transform: rotate(14deg); background: rgba(0, 0, 0, .18); animation: stampIn .7s .3s var(--ease) both; }
@keyframes stampIn { from { transform: rotate(40deg) scale(2); opacity: 0; } to { transform: rotate(14deg) scale(1); opacity: 1; } }
.mc-body { padding: 8px 18px 6px; }
.mc-course { margin-top: 10px; }
.mc-course h4 { font: 800 22px/1 var(--ff-p); letter-spacing: .1em; text-transform: uppercase; color: var(--c1); margin: 0 0 2px; } .mc-course h4 span { text-decoration: underline wavy var(--c2); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.mc-course ul { display: grid; }
.mi { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1.5px dotted #D8C7A3; }
.mc-course li:last-child { border-bottom: 0; }
.mi-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 16%, #fff); transform: rotate(-4deg); transition: transform .4s var(--ease); }
.mi:nth-child(even) .mi-ic { transform: rotate(3deg); } .mi:hover .mi-ic { transform: rotate(0) scale(1.1); }
.fi { width: 42px; height: 42px; display: block; }
.mi-tx { min-width: 0; } .mi-tx b { display: flex; align-items: center; gap: 7px; font: 700 15.5px/1.15 var(--ff-d); }
.mi-tx small { display: block; margin-top: 3px; font: 400 13px/1.3 var(--ff-b); color: #7A6648; }
.dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.8px solid; position: relative; } .dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.dot.veg { color: #1E9E6A; } .dot.nonveg { color: #D1342A; }
.mi-tag { padding: 4px 10px; border-radius: 999px; font: 500 12px var(--ff-m); border: 1.5px solid #D8C7A3; color: #5A4B33; white-space: nowrap; }
.mi-tag.in { background: color-mix(in srgb, var(--c1) 12%, #fff); border-color: transparent; color: var(--c1); font-size: 11px; white-space: nowrap; }
.mi.pick { background: linear-gradient(90deg, rgba(255, 210, 63, .18), transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 14px; }
.star { position: absolute; top: -8px; right: 4px; padding: 0 9px; background: var(--yellow); color: var(--ink); font: 500 11px/1.9 var(--ff-m); letter-spacing: .04em; text-transform: uppercase; transform: rotate(3deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .1); border-radius: 4px; }
.mc-foot { margin: 6px 18px 0; padding: 12px 0 16px; border-top: 2px dashed #D8C7A3; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #5A4B33; } .mc-foot span { display: inline-flex; align-items: center; gap: 6px; } .mc-foot p { flex-basis: 100%; font-size: 12px; color: #8A7758; }

/* ---------- organizer ---------- */
.org-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 0 var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.org-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 26, 23, .1); } .org-card:active { transform: scale(.985); }
.org-card > div { flex: 1; min-width: 0; } .org-card b { display: flex; align-items: center; gap: 6px; font: 700 16px var(--ff-d); } .org-card small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 1px; }
.org-card .rate { display: flex; align-items: center; gap: 4px; color: var(--ink-3); } .org-card .rate .ic { width: 13px; height: 13px; color: #E8A200; fill: #E8A200; }
.org-th { --s: 56px; position: relative; display: grid; place-items: center; flex: none; border-radius: 18px; overflow: hidden; color: #fff; }
.org-th svg { position: absolute; inset: 0; width: 100%; height: 100%; } .org-th b { position: relative; font: 800 calc(var(--fs, 20) * 1px) var(--ff-d); letter-spacing: -.02em; }
.vtick { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--pass); color: #fff; flex: none; } .vtick .ic { width: 11px; height: 11px; stroke-width: 3; } .vtick.big { width: 22px; height: 22px; margin-left: 8px; vertical-align: middle; } .vtick.big .ic { width: 14px; height: 14px; }
.org-detail { min-height: 100%; background: var(--paper); }
.org-cover { position: relative; height: 188px; background: linear-gradient(135deg, var(--c1), var(--c2)); overflow: hidden; } .org-cover .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.org-body { position: relative; padding: 0 20px 40px; }
.org-id { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -44px; }
.org-id .org-th { border: 4px solid var(--paper); border-radius: 28px; box-shadow: 0 12px 24px rgba(15, 26, 23, .18); }
.org-actions { display: flex; gap: 8px; padding-bottom: 4px; }
.org-name { margin-top: 14px; font-size: 28px; line-height: 1.05; } .org-kind { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.org-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 4px; }
.org-stats > div { padding: 12px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); text-align: center; } .org-stats b { display: block; font: 800 22px var(--ff-d); letter-spacing: -.02em; } .org-stats small { color: var(--ink-3); font-size: 11.5px; }
.org-body section { margin-top: 24px; } .org-body h2 { margin-bottom: 10px; }
.past { display: grid; gap: 10px; }
.past li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); animation: rise .5s calc(var(--i, 0) * 60ms) var(--ease) both; }
.pa-th { display: grid; place-content: center; text-align: center; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; line-height: .95; } .pa-th b { font: 900 18px var(--ff-p); letter-spacing: .08em; } .pa-th small { font: 500 11px var(--ff-m); opacity: .9; }
.past b { display: block; font: 700 15px var(--ff-d); } .past small { color: var(--ink-3); font-size: 12.5px; }
.pa-n { text-align: right; font: 800 20px var(--ff-d); } .pa-n small { display: block; font: 400 11px var(--ff-b); }

/* keep wide children (the picture strip, the menu card) inside the phone width */
.sheet-body { grid-template-columns: minmax(0, 1fr); }
.sheet-body > *, .org-body > * { min-width: 0; }
.gal { margin-left: -20px; margin-right: -20px; max-width: calc(100% + 40px); }