:root{
  color-scheme:light;
  --ink:#272821;
  --muted:#5f5e54;
  --paper:#fbf8f1;
  --card:#fffdf8;
  --sunken:#ffffff;
  --line:#e6dfd2;
  --line-strong:#d7b9a4;
  --orange:#b84e28;
  --orange-hover:#9c3f1e;
  --link:#9a4318;
  --deep:#823f2a;
  --on-accent:#ffffff;
  --green:#46684e;
  --on-green:#ffffff;
  --sage:#edf2e9;
  --sage-text:#3d5a42;
  --sage-line:#bbccb9;
  --pale:#f6ecdd;
  --peach:#fff0dd;
  --peach-text:#8a4b22;
  --gold:#e3ad54;
  --nav:#5c5b52;
  --nav-active:#f2eade;
  --avatar-bg:#efd7bd;
  --avatar-ink:#70442f;
  --avatar-ring:#ffffff;
  --icon-bg:#f7eee1;
  --note-bg:#fbf1e5;
  --note-ink:#5c4030;
  --bubble:#f4efe6;
  --bubble-mine:#ffd8c2;
  --chip:#ffffff;
  --chip-ink:#5e5e56;
  --chip-active:#fff3ea;
  --chip-active-ink:#9b4e30;
  --chip-active-line:#cb8b67;
  --rsvp-bg:#ffffff;
  --rsvp-ink:#5c564e;
  --rsvp-line:#eadfd1;
  --gray-bg:#f1f0eb;
  --gray-ink:#5f5e54;
  --sponsor:#fffaf2;
  --topbar:#fbf8f1eb;
  --bottomnav:#fffdf8eb;
  --overlay:#20170f66;
  --shadow:0 8px 24px #4b382214;
  --modal-shadow:0 20px 70px #24180e40;
  --focus:#a95330;
  --danger:#a94435;
  --danger-hover:#8f362b;
  --toast-bg:#273a2b;
  --toast-ink:#ffffff;
  --hero:linear-gradient(115deg,#623026,#8a3d30);
  --hero-mark:#ffffff17;
  --on-hero:#ffffff;
  --on-hero-soft:#ffefe1;
  --on-hero-meta:#fff8ef;
  --eyebrow-on-hero:#f6c998;
  --hero-button-bg:#fffdf8;
  --hero-button-ink:#272821;
  --selection:#e7c2ae;
  --selection-ink:#272821;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f4efe6;
  --muted:#c4b6a4;
  --paper:#1c1915;
  --card:#27231e;
  --sunken:#322c26;
  --line:#433c34;
  --line-strong:#8d654e;
  --orange:#e08a5c;
  --orange-hover:#f0a27a;
  --link:#ffb599;
  --deep:#ffb599;
  --on-accent:#2a140c;
  --green:#8fbf98;
  --on-green:#142117;
  --sage:#243028;
  --sage-text:#d5efd8;
  --sage-line:#3e5a44;
  --pale:#3a2e24;
  --peach:#3d2a1e;
  --peach-text:#ffd7bf;
  --gold:#e3ad54;
  --nav:#d5c8b8;
  --nav-active:#3a2c24;
  --avatar-bg:#5a3d2c;
  --avatar-ink:#ffd7bf;
  --avatar-ring:#1c1915;
  --icon-bg:#3a2e24;
  --note-bg:#3a2c22;
  --note-ink:#f0d7c4;
  --bubble:#322c26;
  --bubble-mine:#6a3d2c;
  --chip:#322c26;
  --chip-ink:#e6d9cc;
  --chip-active:#4a3024;
  --chip-active-ink:#ffd7bf;
  --chip-active-line:#cb8b67;
  --rsvp-bg:#322c26;
  --rsvp-ink:#f4efe6;
  --rsvp-line:#4a4038;
  --gray-bg:#322c26;
  --gray-ink:#c4b6a4;
  --sponsor:#2c241c;
  --topbar:#1c1915eb;
  --bottomnav:#27231eeb;
  --overlay:#100e0ccc;
  --shadow:0 8px 24px #00000066;
  --modal-shadow:0 20px 70px #00000080;
  --focus:#ffb599;
  --danger:#b13e34;
  --danger-hover:#9e382f;
  --toast-bg:#edf2e9;
  --toast-ink:#1c2820;
  --selection:#6e3d28;
  --selection-ink:#fff8ef;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font:14px 'Manrope',sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--selection);color:var(--selection-ink)}
.app{min-height:100vh}
.topbar{height:70px;border-bottom:1px solid var(--line);background:var(--topbar);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.topinner{max-width:1180px;height:100%;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 27px 'Fraunces',serif;color:var(--deep);letter-spacing:-1.05px;cursor:pointer;border:0;background:none;padding:0;line-height:1;text-decoration:none}
.brandMark{width:30px;height:30px;display:block;flex:none;color:var(--deep)}
.brandLogin{font-size:30px;gap:11px}
.brandLogin .brandMark{width:34px;height:34px}
.topright{display:flex;align-items:center;gap:10px}
.themeToggle{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--deep);display:grid;place-items:center;font-size:16px;line-height:1;padding:0;flex:none}
.themeToggle:hover{border-color:var(--line-strong);background:var(--nav-active)}
.themeToggleFloat{position:fixed;top:16px;right:16px;z-index:8;box-shadow:var(--shadow)}
.iconbtn{border:0;background:transparent;font-size:19px;position:relative;color:var(--ink);min-width:44px;min-height:44px;padding:8px}
.dot{width:7px;height:7px;background:var(--orange);border-radius:50%;position:absolute;right:6px;top:6px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--avatar-bg);color:var(--avatar-ink);display:grid;place-items:center;font-weight:700;border:2px solid var(--avatar-ring);overflow:hidden}
.avatarimg{width:100%;height:100%;object-fit:cover;display:block}
.layout{max-width:1180px;padding:26px 30px 70px;margin:auto;display:grid;grid-template-columns:216px minmax(0,1fr);gap:36px}
.side{position:sticky;top:96px;align-self:start}
.sideuser{display:flex;align-items:center;gap:10px;padding:4px 6px 22px;border-bottom:1px solid var(--line);margin-bottom:14px}
.sideuser small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.nav{display:grid;gap:4px}
.nav button{border:0;background:none;text-align:left;padding:11px 12px;border-radius:9px;color:var(--nav);font-weight:600;font-size:13px;min-height:44px}
.nav button:hover,.nav button.active{background:var(--nav-active);color:var(--deep)}
.nav .ni{display:inline-grid;place-items:center;width:26px;vertical-align:-1px}
.navicon{width:20px;height:20px;display:block}
.sidecard{border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:28px;background:var(--sponsor)}
.sidecard b{font:700 15px 'Fraunces',serif}
.sidecard p{font-size:14px;color:var(--muted);line-height:1.55;margin:7px 0 12px}
.main{min-width:0}
.eyebrow{text-transform:uppercase;letter-spacing:1.2px;font-size:12px;font-weight:700;color:var(--link)}
.h1{font:700 32px 'Fraunces',serif;letter-spacing:-.55px;margin:7px 0}
.sub{font-size:14px;color:var(--muted);line-height:1.55}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 24px}
.pagehead .sub{margin:5px 0 0}
.pageActions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:none}
.pageActions .btn{flex:none}
.headerSearch{position:relative;display:flex;align-items:center;flex:none}
.headerSearch .searchToggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;flex:none;border-radius:999px}
.headerSearchField{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);width:min(260px,34vw);z-index:2}
.headerSearchInput{width:100%;height:44px;border:1px solid var(--line);border-radius:999px;padding:0 14px;background:var(--card);color:var(--ink);font-size:15px;outline:none}
.headerSearchInput:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.headerSearchInput[hidden],.searchResults[hidden],.searchHit[hidden],.searchEmpty[hidden]{display:none}
.searchResults{position:absolute;top:calc(100% + 8px);left:0;right:0;width:auto;max-height:360px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:8}
.searchHit{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:10px;border-radius:8px}
.searchHit:hover,.searchHit:focus-visible{background:var(--nav-active)}
.searchHit small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.searchEmpty{margin:8px 10px}
.btn{border:0;border-radius:9px;padding:11px 15px;background:var(--orange);color:var(--on-accent);font-weight:700;font-size:14px;min-height:44px;box-shadow:0 3px 8px #d96a3b22;transition:background .15s,transform .15s,border-color .15s}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn:hover{background:var(--orange-hover);transform:translateY(-1px)}
.btn.secondary{color:var(--ink);background:var(--sunken);border:1px solid var(--line);box-shadow:none}
.btn.secondary:hover{background:var(--nav-active);color:var(--ink)}
.btn.sage{background:var(--green);color:var(--on-green)}
.btn.small{padding:8px 12px;font-size:14px}
.card{border:1px solid var(--line);background:var(--card);border-radius:13px;padding:17px;box-shadow:var(--shadow)}
.fold{padding:0}
.foldSummary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:16px 17px}
.foldSummary::-webkit-details-marker{display:none}
.foldSummary span{display:flex;flex-direction:column;gap:2px}
.foldSummary b{font-size:14px}
.foldSummary small{color:var(--muted);font-size:12px;font-weight:500}
.foldSummary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none;margin-right:4px}
.fold[open] .foldSummary::after{transform:rotate(-135deg)}
.foldBody{padding:0 17px 17px}
.foldBody .switchrow:first-of-type{border-top:0}
.sectiontitle{display:flex;justify-content:space-between;align-items:center;margin:27px 0 13px}
.sectiontitle h2{font:700 19px 'Fraunces',serif;margin:0}
.textlink{border:0;background:transparent;color:var(--link);font-weight:700;font-size:14px}
.hero{border-radius:15px;padding:25px 26px;color:var(--on-hero);background:var(--hero);position:relative;overflow:hidden;min-height:194px;display:flex;align-items:flex-end}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,#fff 35%,transparent) 50%,transparent 65%);transform:translateX(-120%);animation:heroLight 900ms ease forwards;pointer-events:none}
.hero:after{content:none}
.heroMark{position:absolute;right:28px;top:22px;z-index:1;font-size:42px;line-height:1}
@keyframes heroLight{to{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none;content:none}}
.heroContent{position:relative;z-index:1;max-width:520px}
.hero .eyebrow,.eventHero .eyebrow,.loginart .eyebrow{color:var(--eyebrow-on-hero)}
.hero h2{font:700 29px 'Fraunces',serif;margin:8px 0}
.hero p{font-size:14px;color:var(--on-hero-soft);margin:0;line-height:1.5}
.heroMeta{display:flex;gap:19px;flex-wrap:wrap;margin-top:15px;font-size:12px;color:var(--on-hero-meta)}
.heroAction{margin-left:auto;align-self:flex-end;position:relative;z-index:1}
.hero .btn.secondary,.eventHero .btn.secondary{background:var(--hero-button-bg);color:var(--hero-button-ink);border-color:transparent}
.hero .btn.secondary:hover,.eventHero .btn.secondary:hover{background:#fff;color:var(--hero-button-ink)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.groupcard{padding:17px;min-height:156px;cursor:pointer;transition:transform .15s,border-color .15s}
.groupcard:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.groupicon{font-size:24px;margin-bottom:13px}
.groupcard h3{font-size:14px;margin:0 0 4px}
.groupcard p{font-size:14px;color:var(--muted);margin:0;line-height:1.45}
.groupfoot{border-top:1px solid var(--line);margin-top:14px;padding-top:11px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.eventrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.eventrow:first-of-type{border-top:0}
.mark{width:22px;height:22px;display:block}
.emptyMark{display:grid;place-items:center;margin-bottom:8px}
.emptyMark .mark{width:28px;height:28px}
.eventicon{width:43px;height:43px;border-radius:11px;background:var(--icon-bg);display:grid;place-items:center;font-size:19px;flex:none;color:var(--deep)}
.rowtxt{min-width:0;flex:1}
.rowtxt b{font-size:14px;display:block}
.rowtxt small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.pill{font-size:12px;font-weight:700;padding:6px 9px;border-radius:20px;background:var(--sage);color:var(--sage-text);white-space:nowrap}
.pill.orange{background:var(--peach);color:var(--peach-text)}
.pill.gray{background:var(--gray-bg);color:var(--gray-ink)}
.twoCol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.85fr);gap:17px}
.boxTitle{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.titleactions{display:flex;gap:12px;align-items:center;flex:none}
.eventHero{border-radius:13px;padding:24px;color:var(--on-hero);background:var(--hero);position:relative;overflow:hidden}
.eventHero:after{content:none}
.eventHero>*{position:relative;z-index:1}
.eventHero h2{font:700 29px 'Fraunces',serif;margin:6px 0}
.eventHero p{font-size:14px;color:var(--on-hero-soft);margin:0;line-height:1.5}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;font-size:12px;color:var(--on-hero-meta)}
.rsvp{display:flex;gap:8px;margin-top:15px}
.rsvp button{flex:1;border:1px solid var(--rsvp-line);border-radius:8px;background:var(--rsvp-bg);padding:10px 5px;min-height:44px;font-size:14px;font-weight:700;color:var(--rsvp-ink)}
.rsvp button.selected{background:var(--sage);border-color:var(--sage-line);color:var(--sage-text)}
.dish{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.dish:first-of-type{border:0}
.dish .eventicon{width:37px;height:37px;font-size:17px}
.dish button{margin-left:auto;flex:none}
.note{background:var(--note-bg);color:var(--note-ink);padding:12px;border-radius:9px;font-size:16px;line-height:1.55}
.form{display:grid;gap:13px}
.field label{display:block;font-size:12px;font-weight:700;margin:0 0 6px}
.field input,.field textarea,.field select,.searchField input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px;background:var(--sunken);color:var(--ink);font-size:16px;outline:none}
.field input:focus,.field textarea:focus,.field select:focus,.searchField input:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
.field textarea{min-height:90px;resize:vertical}
.field small{color:var(--muted);font-size:12px;display:block;margin-top:5px}
.draftChoices,.planSuggestions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.planChat{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;margin:4px 0 12px}
.planLine{display:flex}
.planLine.user{justify-content:flex-end}
.planLine .bubble{max-width:85%}
.planReady{margin:4px 0 12px}
.planReady .btn{width:100%}
.corrections{margin:8px 0 0;color:var(--muted);font-size:13px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.checkrow{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.checkrow input,.inviteMemberItem input{accent-color:var(--orange)}
.threadPage{display:grid;gap:14px}
.threadHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.threadMeta{margin:8px 0 0;color:var(--muted);font-size:14px}
.threadSwitch{display:grid;gap:8px;justify-items:end;color:var(--muted);font-size:12px;font-weight:700}
.threadPills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.threadPill{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px 'Manrope',sans-serif}
.threadMore{position:relative}
.threadMore summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 12px;font:700 13px 'Manrope',sans-serif}
.threadMore summary::-webkit-details-marker{display:none}
.threadMoreMenu{position:absolute;right:0;top:calc(100% + 6px);z-index:4;display:none;min-width:200px;max-height:240px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--shadow)}
.threadMore[open] .threadMoreMenu{display:grid;gap:4px}
.threadMoreMenu .threadPill{max-width:none;width:100%;text-align:left;border-radius:10px}
.threadPill:hover{border-color:var(--line-strong);background:var(--nav-active)}
.thread{background:linear-gradient(180deg,color-mix(in srgb,var(--orange) 12%,var(--card)),var(--card) 140px);border:1px solid var(--line);border-radius:24px;padding:8px 18px 14px;box-shadow:var(--shadow);min-height:64vh;display:flex;flex-direction:column}
.chatlist{display:flex;flex-direction:column;gap:16px;padding:16px 2px 10px;flex:1}
.message{display:flex;gap:10px;align-items:flex-end;padding:0;border:0}
.message.mine{flex-direction:row-reverse}
.messageBody{display:grid;gap:4px;max-width:min(520px,82%)}
.message.mine .messageBody{justify-items:end}
.message small{display:block;color:var(--muted);font-size:12px;margin:0}
.message small b{color:var(--ink)}
.bubble{background:var(--bubble);border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:16px;line-height:1.45;max-width:520px}
.message.mine .bubble{border-radius:18px 18px 6px 18px;background:var(--bubble-mine)}
.chatActions{display:flex;gap:12px;align-items:center;margin-top:2px}
.react{border:0;background:transparent;color:var(--muted);font-size:14px;padding:0;font-weight:700}
.react.on{color:var(--orange)}
.threadEmpty{margin:auto;text-align:center;padding:54px 18px;color:var(--muted);max-width:360px}
.threadEmptyMark{font-size:28px;color:var(--orange);display:grid;place-items:center}
.threadEmptyMark .mark{width:28px;height:28px}
.threadEmpty b{display:block;margin:8px 0 6px;color:var(--ink);font:700 26px 'Fraunces',serif}
.threadEmpty p{margin:0 0 16px;font-size:15px;line-height:1.45}
.threadEmpty .btn{margin-top:4px}
.chatcompose{margin-top:8px;display:flex;gap:4px;align-items:center;background:var(--sunken);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 8px}
.chatcompose input{flex:1;width:auto;min-width:0;border:0;background:transparent;border-radius:999px;box-shadow:none;padding:10px 12px;font-size:16px;line-height:1.3;outline:none}
.chatcompose input:focus{border:0;box-shadow:none}
.chatcompose .btn{flex:none;border-radius:999px;box-shadow:none}
.composeIcon,.composeGhost{border:0;background:transparent;color:var(--deep);font-weight:700;font-size:14px;padding:8px 10px;border-radius:999px}
.composeIcon{font-size:22px;line-height:1;padding:4px 10px}
.composeGhost:hover,.composeIcon:hover{background:var(--nav-active)}
.composeSend{border:0;border-radius:999px;background:var(--orange);color:var(--on-accent);font-weight:700;font-size:14px;padding:10px 16px}
.composeSend:hover{background:var(--orange-hover)}
.threadFoot{margin:8px 8px 0;color:var(--muted);font-size:12px}
.tagRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 4px 8px}
.tagRow>span{color:var(--muted);font-size:12px;font-weight:700}
.mention{color:var(--deep);font-weight:700}
.mentionMenu{display:grid;gap:2px;margin:0 4px 8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:var(--shadow)}
.mentionMenu[hidden]{display:none}
.mentionOption{border:0;background:transparent;color:var(--ink);text-align:left;border-radius:12px;padding:8px 10px;font-weight:700}
.mentionOption.active,.mentionOption:hover{background:var(--nav-active)}
.mentionEmpty{margin:6px 8px;color:var(--muted);font-size:13px}
.bioSuggestions{display:grid;gap:8px;margin-top:12px}
.bioSuggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--sunken);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4}
.bioSuggestion span{min-width:0}
.bioSuggestion b{flex:none;color:var(--deep);font-size:12px}
.bioSuggestion:hover{border-color:var(--line-strong);background:var(--nav-active)}
.chatImage{display:block;max-width:240px;margin-top:8px;border-radius:16px}
@media(max-width:560px){.threadHead{flex-direction:column;align-items:stretch}.thread{border-radius:18px;padding:8px 12px 12px;min-height:0}.threadSwitch,.threadPills{justify-items:start;justify-content:flex-start}}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table td{padding:11px 7px;border-bottom:1px solid var(--line);vertical-align:middle}
.table td:last-child{text-align:right}
.factline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.factline label{flex:none}
.factline input{min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--sunken);color:var(--ink);font-size:14px}
.factline input[name="place"]{flex:1;min-width:160px}
.detailFacts{margin-top:4px}
.detailActions{display:flex;gap:8px;align-items:center;margin-top:4px}
.emailLine{display:flex;align-items:center;gap:2px;min-width:0}
.emailLine .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eyeBtn{border:0;background:transparent;color:var(--deep);width:44px;height:44px;display:grid;place-items:center;border-radius:999px;padding:0;flex:none}
.eyeBtn:hover{background:var(--nav-active)}
.profilephoto{display:grid;justify-items:center;gap:6px}
.profilephoto .textlink{font-size:12px;padding:0}
.profilebig{width:72px;height:72px;font-size:23px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:7px 10px;border-radius:20px;background:var(--chip);border:1px solid var(--line);font-size:12px;color:var(--chip-ink)}
.chip.active{background:var(--chip-active);color:var(--chip-active-ink);border-color:var(--chip-active-line)}
.modalback{position:fixed;inset:0;background:var(--overlay);z-index:10;display:grid;place-items:center;padding:18px}
.modal{width:min(520px,100%);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:23px;max-height:90vh;overflow:auto;box-shadow:var(--modal-shadow)}
.modalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
.modalhead h2{font:700 23px 'Fraunces',serif;margin:0}
.close{border:0;background:transparent;font-size:22px;color:var(--muted);min-width:44px;min-height:44px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;background:var(--toast-bg);color:var(--toast-ink);border-radius:9px;padding:12px 17px;font-size:14px;box-shadow:var(--shadow);animation:fade 3s forwards}
@keyframes fade{0%,75%{opacity:1}100%{opacity:0;pointer-events:none}}
.login{max-width:980px;margin:8vh auto;padding:22px;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.loginart{min-height:440px;border-radius:20px;background:linear-gradient(135deg,#713329,#bd5f37 60%,#e6ae65);color:var(--on-hero);padding:38px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.loginart:before{content:'✦';position:absolute;font-size:330px;right:-10px;top:-72px;color:#ffffff13}
.loginart h1{font:700 42px 'Fraunces',serif;margin:10px 0}
.loginart p{max-width:340px;color:#ffead9;line-height:1.6}
.loginform h2{font:700 28px 'Fraunces',serif;margin:0 0 5px}
.loginform>p{color:var(--muted);font-size:14px;margin:0 0 22px}
.loginform .btn{width:100%;margin-top:13px}
.bottomnav{display:none}
.empty{padding:32px;text-align:center;color:var(--muted);font-size:14px}
.avatar.small{width:29px;height:29px;font-size:12px;flex:none}
.circleNav{display:grid;gap:2px;margin:-2px 0 5px 24px;padding-left:10px;border-left:1px solid var(--line)}
.nav .circleNavItem{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 9px;font-size:13px;font-weight:500;color:var(--muted)}
.nav .circleNavItem span:first-child{font-size:14px;flex:none}
.nav .circleNavItem span:last-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .circleNavItem.active{background:var(--nav-active);color:var(--deep);font-weight:700}
.nav .circleNavMore{color:var(--link);font-weight:700}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:var(--danger-hover);color:#fff}
.eventActions{display:flex;gap:8px;align-items:center;flex:none}
.circleActions{flex-wrap:wrap}
.searchField{max-width:520px;margin:0 0 18px}
.searchField input{border-radius:9px}
.sponsorOffer{margin-top:14px;background:var(--sponsor)}
.sponsorActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sponsorFee{margin:8px 0 0;font-size:14px;color:var(--note-ink);line-height:1.5}
.circleSearchItem[hidden],.eventrow[hidden],.inviteMemberItem[hidden]{display:none!important}
.inviteMemberList{display:grid;gap:7px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--sunken)}
.inviteMemberItem{display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:14px}
.eventActions .btn:disabled{opacity:.5;cursor:not-allowed}
.sharecard{margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--sunken)}
.sharecard .eyebrow{margin-bottom:8px}
.sharecopy{display:flex;gap:8px;align-items:center}
.shareurl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.sharetargets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.sharetarget{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:700;padding:2px 0;text-align:center;line-height:1.2}
.sharetarget span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--on-accent);font-size:14px}
.sharetarget.wa span{background:#1f8a4c;color:#fff}
.sharetarget.x span{background:var(--ink);color:var(--paper)}
.sharetarget.ig span{background:linear-gradient(135deg,#b84e28,#e3ad54);color:#fff}
.sharetarget:hover span{transform:translateY(-1px)}
.skip{position:absolute;left:12px;top:12px;transform:translateY(-140%);z-index:20;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:9px;border:1px solid var(--line);font-weight:700}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.groupcard[role="button"],.eventrow[role="button"]{cursor:pointer}
.groupcard[role="button"]:focus-visible,.eventrow[role="button"]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:850px){
  .layout{grid-template-columns:1fr;padding:21px 20px 90px}
  .side{display:none}
  .topinner{padding:0 20px}
  .bottomnav{display:flex;position:fixed;z-index:6;bottom:0;left:0;right:0;background:var(--bottomnav);backdrop-filter:blur(12px);border-top:1px solid var(--line);justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
  .bottomnav button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;line-height:1.2;display:grid;gap:3px;justify-items:center;min-width:44px;min-height:44px}
  .bottomnav button span{display:grid;place-items:center}
.bottomnav .navicon{width:22px;height:22px}
  .bottomnav button.active{color:var(--deep)}
  .twoCol{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:1fr;max-width:520px;gap:23px;margin:2vh auto}
  .loginart{min-height:250px;padding:25px}
  .loginart h1{font-size:34px}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .topbar{height:60px}
  .topright .hideMobile{display:none}
  .layout{padding:19px 15px 90px}
  .pagehead{align-items:flex-start;flex-direction:column}
  .pagehead>.btn{width:100%}
  .headerSearchField{position:fixed;top:68px;left:12px;right:12px;width:auto;transform:none;z-index:6}
  .h1{font-size:28px}
  .grid2,.grid3,.formgrid{grid-template-columns:1fr}
  .hero{padding:21px;display:block}
  .heroAction{margin:18px 0 0}
  .hero h2{font-size:25px}
  .groupcard{min-height:135px}
  .eventHero{padding:20px}
  .eventHero h2{font-size:25px}
  .rsvp{gap:5px}
  .login{padding:15px}
  .loginart{min-height:220px}
  .loginart h1{font-size:31px}
  .card{padding:14px}
  .eventActions{width:100%}
  .eventActions .btn{flex:1}
  .circleActions .btn:last-child{flex-basis:100%}
}
.switchrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.switchrow input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange);flex:none}
.switchrow span{display:flex;flex-direction:column;gap:2px}
.switchrow small{color:var(--muted);font-size:13px;line-height:1.4}
.switchrow.is-off{opacity:.55}
.topright{position:relative}
.accountmenu{position:relative}
.accountmenu .iconbtn{display:grid;place-items:center;padding:0}
.accountmenu .avatar{width:36px;height:36px}
.accountmenu .bellpanel{width:176px;min-width:0;max-width:calc(100vw - 32px);top:calc(100% + 6px);padding:4px;border-radius:10px}
.accountmenu .bellitem{min-height:44px;padding:10px 12px;font-size:13px;line-height:20px;border-radius:6px}
.accountmenu .bellitem + .bellitem{border-top:1px solid var(--line);border-top-left-radius:0;border-top-right-radius:0}
.accountmenu .bellitem:focus-visible{outline:2px solid var(--deep);outline-offset:-2px}
.bellbtn{position:relative}
.bellcount{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--orange);color:var(--on-accent);font-size:10px;line-height:16px;font-weight:700}
.bellpanel{position:absolute;top:48px;right:0;width:min(320px,82vw);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:8}
.bellitem{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:10px;border-radius:8px}
.bellitem:hover{background:var(--nav-active)}
.bellitem small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.groupcard:hover,.sharetarget:hover span{transform:none!important}
}

@media(max-width:560px){.brand{font-size:25px}.brandMark{width:28px;height:28px}}

.uploadStatus{align-self:center;flex-basis:100%;font-size:12px;color:var(--muted)}