/* ============================================================
   AFFMASHUP — DESIGN TOKENS
   Kolet structure & discipline × AFFMashup colour & personality
   ============================================================ */

:root{
  /* ---- neutrals ---- */
  --ink:#0F0D14;            /* warm near-black — headers, footer, dark hero */
  --ink-2:#1B1722;          /* raised dark surface */
  --cream:#FAF4EA;          /* primary canvas */
  --cream-2:#F3EADC;        /* recessed cream */
  --white:#FFFFFF;
  --line:#E7DCC9;           /* hairline on cream */
  --line-2:#EFE7DA;

  /* ---- accents (AFFMashup) ---- */
  --coral:#FF6B4A;
  --coral-soft:#FFE7E0;
  --teal:#177268;
  --teal-soft:#D9F0EA;
  --lav:#C7B9FF;
  --lav-soft:#EDE8FF;
  --butter:#FFD84D;
  --butter-soft:#FFF3C9;
  --plum:#2B1B4D;           /* dark-hero glow only */
  --tg:#229ED9;             /* Telegram */
  --li:#0A66C2;             /* LinkedIn */

  /* ---- text ---- */
  --tx:var(--ink);
  --tx-72:rgba(15,13,20,.72);
  --tx-54:rgba(15,13,20,.54);
  --tx-38:rgba(15,13,20,.38);
  --on:#FFFFFF;
  --on-72:rgba(255,255,255,.72);
  --on-48:rgba(255,255,255,.48);
  --on-14:rgba(255,255,255,.14);

  /* ---- type ---- */
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;

  /* ---- radius ladder (Kolet: 14/24/32/40) ---- */
  --r-sm:14px; --r-lg:24px; --r-xl:32px; --r-2xl:40px; --r-pill:999px;

  /* ---- sticker shadow (AFFMashup signature) ---- */
  --stk:4px 4px 0 var(--ink);
  --stk-sm:3px 3px 0 var(--ink);
  --key:inset 0 0 0 2.5px var(--ink);
  --sh:0 2px 10px rgba(15,13,20,.06);
  --sh-lg:0 18px 44px rgba(15,13,20,.13);

  /* ---- layout ---- */
  --gut:clamp(16px,4vw,56px);
  --maxw:1300px;
  --hdr:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--cream);color:var(--tx);
  font-family:var(--body);font-size:16px;line-height:1.62;font-weight:450;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0;
  font-optical-sizing:auto}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.06}
h2{font-size:clamp(1.85rem,3.5vw,3.05rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.32rem);letter-spacing:-.03em}
h4{font-size:1.02rem;letter-spacing:-.028em}
p{margin:0}

/* two-tone heading spans — max ONE per heading */
.co{color:var(--coral)}
.te{color:var(--teal)}
.bt{color:var(--butter)}
.lv{color:var(--lav)}
/* italic serif accent — place names, party lines */
.it{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.012em}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:clamp(52px,7vw,110px)}
.sect--sm{padding-block:clamp(34px,4.4vw,64px)}
.bg-cream{background:var(--cream)}
.bg-white{background:var(--white)}
.bg-ink{background:var(--ink);color:var(--on)}
.bg-teal{background:var(--teal);color:var(--on)}
.bg-lav{background:var(--lav)}
.bg-butter{background:var(--butter)}

/* ---------- section heads ---------- */
.eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-38);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.eyebrow::before{content:"✦";color:var(--coral);font-size:.85rem;letter-spacing:0}
.bg-ink .eyebrow,.bg-teal .eyebrow{color:var(--on-48)}
.bg-ink .eyebrow::before,.bg-teal .eyebrow::before{color:var(--butter)}
.head{margin-bottom:clamp(26px,3.4vw,44px);max-width:56ch}
.head--c{margin-inline:auto;text-align:center;max-width:44ch}
.head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;max-width:none;flex-wrap:wrap}
.lede{margin-top:14px;font-size:clamp(1rem,1.15vw,1.1rem);color:var(--tx-72);line-height:1.66;max-width:62ch}
.bg-ink .lede,.bg-teal .lede{color:var(--on-72)}
.head--c .lede{margin-inline:auto}

/* ---------- buttons (pill only) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;
  border-radius:var(--r-pill);font-family:var(--body);font-size:.97rem;font-weight:750;letter-spacing:-.012em;
  white-space:nowrap;transition:transform .16s cubic-bezier(.2,.9,.3,1),box-shadow .16s ease,background .16s ease,color .16s ease}
.btn--coral{background:var(--coral);color:#151210;box-shadow:var(--stk-sm)}
.btn--coral:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,13,20,.28)}
.btn--butter{background:var(--butter);color:var(--ink);box-shadow:var(--stk-sm)}
.btn--butter:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn--white{background:#fff;color:var(--ink);box-shadow:var(--stk-sm)}
.btn--white:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn--out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--out:hover{background:var(--ink);color:#fff}
.btn--lg{min-height:60px;padding:0 32px;font-size:1.04rem}
.btn--sm{min-height:42px;padding:0 18px;font-size:.88rem}
.bg-ink .btn--out,.dark .btn--out{color:#fff;box-shadow:inset 0 0 0 2px var(--on-48)}
.bg-ink .btn--out:hover,.dark .btn--out:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #fff}

.tl{display:inline-flex;align-items:center;gap:8px;font-weight:750;font-size:.95rem;color:var(--coral);white-space:nowrap}
.tl:hover{gap:12px}
.bg-ink .tl{color:var(--butter)}

/* ---------- tags & stickers ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tag--coral{background:var(--coral);color:#fff}
.tag--teal{background:var(--teal);color:#fff}
.tag--lav{background:var(--lav);color:var(--ink)}
.tag--butter{background:var(--butter);color:var(--ink)}
.tag--ghost{background:rgba(255,255,255,.14);color:#fff}

/* the AFFMashup sticker: keyline + hard offset, tilted */
.stick{box-shadow:var(--key),var(--stk);transform:rotate(-3deg);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease}
.stick:hover{transform:rotate(-3deg) translate(-3px,-3px);box-shadow:var(--key),7px 7px 0 var(--ink)}
.stick--r{transform:rotate(2.5deg)}
.stick--r:hover{transform:rotate(2.5deg) translate(-3px,-3px)}
.stick--flat{transform:none}
.stick--flat:hover{transform:translate(-3px,-3px)}

/* card base */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--key),7px 7px 0 var(--ink)}

/* avatar / initial dot */
.dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.04em}

/* ---------- yes / no marks ---------- */
.yes,.no{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;position:relative}
.yes{background:var(--teal)}
.no{background:rgba(15,13,20,.1)}
.yes::after{content:"";width:9px;height:5px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.no::after{content:"×";color:var(--tx-38);font-size:.95rem;font-weight:700;line-height:1}

/* ---------- accordion ---------- */
.acc__i{border-bottom:1px solid var(--line)}
.acc__i:first-child{border-top:1px solid var(--line)}
.acc__b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;text-align:left;
  font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.22rem);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.acc__b:hover{color:var(--coral)}
.acc__p{position:relative;width:22px;height:22px;flex:none}
.acc__p::before,.acc__p::after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:.22s ease}
.acc__p::before{left:0;top:10px;width:22px;height:2.4px}
.acc__p::after{left:10px;top:0;width:2.4px;height:22px}
.acc__i.open .acc__p::after{transform:rotate(90deg);opacity:0}
.acc__pan{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.2,.9,.3,1)}
.acc__pan>div{padding:0 0 26px;color:var(--tx-72);max-width:76ch;font-size:1rem;line-height:1.7}
.acc__pan a{color:var(--coral);font-weight:700}

/* ---------- marquee ---------- */
.mq{overflow:hidden;white-space:nowrap;user-select:none}
.mq__t{display:inline-flex;align-items:center;gap:0;animation:mqs 34s linear infinite;will-change:transform}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- reveal (class added at runtime by JS) ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .58s cubic-bezier(.2,.9,.3,1),transform .58s cubic-bezier(.2,.9,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- fixed chrome ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--coral);z-index:120}
.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;z-index:110;opacity:0;pointer-events:none;transition:.22s ease;box-shadow:0 8px 22px rgba(15,13,20,.3)}
.totop.on{opacity:1;pointer-events:auto}
.totop:hover{background:var(--coral)}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  padding:14px 24px;border-radius:var(--r-pill);font-size:.9rem;font-weight:750;z-index:200;
  opacity:0;transition:opacity .2s ease,transform .2s ease;box-shadow:0 12px 32px rgba(0,0,0,.34)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   AFFMASHUP — UNIVERSAL CHROME
   Live ticker · black sticky header · mega menus · drawer · footer
   ============================================================ */

/* ---------- live-now ticker ---------- */
.live{background:var(--coral);color:#151210;position:relative;z-index:70;overflow:hidden}
.live__in{display:flex;align-items:center;min-height:44px}
.live__l{display:inline-flex;align-items:center;gap:8px;flex:none;padding:0 16px 0 var(--gut);height:44px;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.live__l i{width:7px;height:7px;border-radius:50%;background:var(--butter);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.live .mq{flex:1;min-width:0}
.live .mq__t{animation-duration:44s}
.live__i{display:inline-flex;align-items:center;gap:9px;padding:0 26px;font-size:.82rem;font-weight:600;white-space:nowrap}
.live__i b{font-weight:800}
.live__i span{color:#151210}
.live__i::before{content:"●";font-size:.55rem;color:var(--butter)}

/* ---------- black sticky header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff}
.hdr__in{display:flex;align-items:center;gap:16px;min-height:var(--hdr);min-width:0}
/* flex:0 1 auto, not flex:none -- the brand is the only thing in the header
   that may absorb a shortfall, so the controls (and therefore .brg, the only
   route to navigation below 1200px) can never be pushed off-screen. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 1 auto;min-width:36px}
.brand__m{width:36px;height:36px;border-radius:11px;background:var(--coral);color:#fff;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.06em;transform:rotate(-4deg);box-shadow:2px 2px 0 var(--butter)}
/* The wordmark is what gets clipped, NOT .brand. overflow:hidden on .brand cuts
   the mark's rotated corners and its 2px butter drop-shadow. */
.brand__t{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.055em;color:#fff;
  min-width:0;overflow:hidden;white-space:nowrap}
.brand__t i{font-style:normal;color:var(--coral)}

.nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav>a,.nav__b{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:10px;
  font-size:.93rem;font-weight:650;color:rgba(255,255,255,.86);white-space:nowrap;transition:.15s ease}
.nav>a:hover,.nav__b:hover,.nav__b[aria-expanded="true"]{background:rgba(255,255,255,.11);color:#fff}
.nav__b svg{opacity:.5;transition:transform .18s ease}
.nav__b[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__it{position:relative}.hdr__in{position:relative}

.mm{position:absolute;top:calc(100% + 14px);left:0;width:min(940px,calc(100vw - 40px));max-width:calc(100vw - 24px);
  background:#fff;color:var(--tx);border-radius:var(--r-xl);box-shadow:var(--key),8px 8px 0 var(--coral);padding:26px}
.mm--w{width:min(1040px,calc(100vw - 40px))}
.mm--r{left:auto;right:0;box-shadow:var(--key),-8px 8px 0 var(--teal)}
/* Anchored to its trigger now, not the header, so every panel opens directly
   under the word you clicked.
   The first attempt right-aligned the last two items to stop them overflowing.
   That was wrong: .nav__it is only as wide as its button, so `right:0` pins the
   panel's RIGHT edge to the button and throws it ~450px to the left. The nav
   only renders above 1200px and the last trigger sits at x=486, so 486+560=1046
   always fits -- left-align all three and there is nothing to clamp. */
.nav__it .mm{left:0;right:auto}
.nav__it .mm--r{left:0;right:auto}
.mm__g{display:grid;grid-template-columns:repeat(2,1fr) 1.3fr;gap:26px}
.mm__g--4{grid-template-columns:repeat(3,1fr) 1.3fr}
.mm__l{font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-38);margin-bottom:11px}
.mm__c a{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;margin-inline:-10px;border-radius:10px;transition:.14s ease}
.mm__c a:hover{background:var(--coral-soft)}
.mm__c b{display:block;font-size:.92rem;font-weight:700;letter-spacing:-.015em}
.mm__c span{display:block;font-size:.78rem;color:var(--tx-54);line-height:1.4}
.mm__c em{font-style:normal;font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.1em;
  background:var(--teal);color:#fff;padding:2px 5px;border-radius:4px;margin-left:6px;vertical-align:2px}
.mm__f{background:var(--butter-soft);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  box-shadow:inset 0 0 0 2px var(--ink)}
.mm__f p{font-size:.85rem;color:var(--tx-72);line-height:1.5}
.mm__ft{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:2px solid var(--ink);
  font-size:.82rem;color:var(--tx-54)}
.mm__ft a{font-weight:750;color:var(--tx)}
.mm__ft a:hover{color:var(--coral)}

.hdr__end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icb{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.11);transition:.15s ease;flex:none}
.icb:hover{background:var(--coral)}
.brg{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.11);flex-direction:column;gap:5px;
  align-items:center;justify-content:center;flex:none}
.brg span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:.22s ease}
.brg[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.brg[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:1200px){.nav{display:none}.brg{display:flex}}
body:has(#drw:not([hidden])) .hdr{position:fixed;top:0;left:0;right:0;z-index:81}
body:has(#drw:not([hidden])) .drw{z-index:80}
body:has(#drw:not([hidden])) .live{z-index:1}
body:has(#drw:not([hidden])){overflow:hidden}
@media(max-width:560px){.hdr__cta{display:none}}

/* ---------- mobile sign-in (user report, 17 Aug 2026) ----------
   Below 560px .hdr__cta is display:none, so a phone had NO sign-in control in
   the header at all. The only route left was: open the hamburger, scroll past
   twenty links, tap "Join the community" at the very bottom. On an event page
   there was no join CTA anywhere in the viewport. That is why the Telegram
   option read as "not seen".

   This SWAPS rather than adds. P0-1 established this bar has no spare width --
   a fourth 40px icon reproduces exactly the clipping that fix removed. Saved
   events is meaningless to someone who is not signed in and is in the drawer
   anyway, so signed out the sign-in icon takes its slot; signed in, nothing
   changes and .hdr__signin stays hidden by the base rule. Net width delta in
   both states: zero.

   :has() is already load-bearing above (the drawer stacking rules), so this
   adds no new support requirement. .aff-acct is what aff-auth.js swaps in once
   /api/auth/me resolves -- the same auth signal the login modal script uses. */
.hdr__signin{display:none}
@media(max-width:560px){
  body:not(:has(.aff-acct)) .hdr__signin{display:grid}
  body:not(:has(.aff-acct)) .hdr__end>a.icb[href="/saved"]{display:none}
}
/* The drawer briefly carried its own sign-in button at the top as well as
   "Join the community" at the bottom -- two controls opening the same modal,
   one screen apart. The top one is gone; the header sign-in icon above covers
   quick access, so nothing is buried by dropping it. Rules kept out of the
   sheet entirely rather than left orphaned: build_shell_css.py fails the build
   if a shell class has a rule but no markup. */

/* ---------- header fit (UI audit 13 Aug 2026, P0-1) ----------
   The hamburger was clipped 5px at 360px -- Galaxy S, Pixel -- and sat flush to
   the viewport edge at 375px and 390px. It is the ONLY route to navigation
   below 1200px.

   It only reproduced SIGNED IN, which is why it survived QA: aff-auth.js does
   `cta.parentNode.replaceChild(wrap, cta)`, swapping .hdr__cta -- which is
   display:none below 560px -- for the .aff-acct pill. Signing in therefore does
   not merely add a control, it turns a hidden slot into a visible ~45px one.
   Signed out .hdr__end is 148px and fits everywhere; signed in it is ~197px.

   The old shrink steps fired at 380px and 340px but the layout ran out of room
   at ~400px, so 341-400px -- the two most common phone widths in the world --
   belonged to no breakpoint at all. */
@media(max-width:460px){
  .hdr__in{gap:10px}
  .hdr__end{gap:6px}
  .icb{width:40px;height:40px}
  .brg{width:42px;height:42px}
}
@media(max-width:400px){
  .brand__t{font-size:1.12rem}
  .icb{width:38px;height:38px}
  .brg{width:38px;height:38px}
  /* Saved events is also in the drawer and in the account menu. Dropping it
     from the bar buys 46px, which is what keeps the wordmark alive at 360px. */
  .hdr__end>a.icb[href="/saved"]{display:none}
  /* The account pill is not a fixed box -- it is a 26px avatar plus 6/10px
     padding and a 1.5px border. Setting width/height on it squashes the avatar,
     so shrink the padding instead. The .hdr prefix is load-bearing twice over:
     .aff-acct is not in lib/shell/markup.js, so build_shell_css.py drops any
     selector that names no chrome class; and the base rule is injected into
     <head> at runtime by aff-auth.js, so this needs to win on specificity
     rather than on order. */
  .hdr .aff-acct__btn{padding:5px;gap:0}
}

/* ---------- search overlay ---------- */
.srch{position:fixed;inset:0;z-index:90;background:rgba(15,13,20,.6);backdrop-filter:blur(6px);display:grid;
  place-items:start center;padding:14vh var(--gut) 0}
.srch__b{width:min(680px,100%);background:#fff;border-radius:var(--r-xl);box-shadow:var(--key),8px 8px 0 var(--coral);overflow:hidden}
.srch__f{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:2px solid var(--ink)}
.srch__f input{flex:1;border:0;outline:0;font-family:var(--body);font-size:1.06rem;font-weight:600;background:transparent;min-width:0}
.srch__r{max-height:52vh;overflow:auto;padding:10px}
.srch__r a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px}
.srch__r a:hover,.srch__r a.on{background:var(--cream)}
.srch__r b{font-size:.94rem;font-weight:700}
.srch__r span{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--tx-38)}
.srch__e{padding:26px;text-align:center;color:var(--tx-54);font-size:.92rem}

/* ---------- drawer ---------- */
/* While the drawer is open the header is pinned explicitly rather than left to
   position:sticky. Sticky holds fine until the drawer opens and then gives up
   (measured: header at 0 before, -2456 after, on a page whose <html> computes
   overflow 'clip visible'), which left the menu floating with a 74px band of
   page content where the header should be. Fixed is unconditional. */
.drw{position:fixed;left:0;right:0;top:var(--hdr);z-index:59;background:var(--ink);color:#fff;
  max-height:calc(100dvh - var(--hdr));overflow:auto;overscroll-behavior:contain;
  border-top:1px solid rgba(255,255,255,.12)}
.drw__in{display:flex;flex-direction:column;padding-block:14px 30px}
.drw__g{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin:20px 0 4px}
.drw__in>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;min-height:48px;
  border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--display);font-size:1.1rem;font-weight:700;letter-spacing:-.03em}
.drw__in>a span{font-family:var(--mono);font-size:.7rem;font-weight:700;color:rgba(255,255,255,.4)}
.drw__cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;padding-block:clamp(46px,6vw,82px) 28px}
.ftr__top{display:grid;grid-template-columns:1.05fr 2.7fr;gap:clamp(28px,4vw,60px);padding-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid rgba(255,255,255,.13)}
.ftr__br{display:flex;flex-direction:column;gap:15px;align-items:flex-start;max-width:38ch}
.ftr__br p{font-size:.87rem;color:rgba(255,255,255,.58);line-height:1.66}
.ftr__st{display:flex;gap:24px;flex-wrap:wrap}
.ftr__st div{display:flex;flex-direction:column}
.ftr__st b{font-family:var(--display);font-size:1.28rem;font-weight:800;letter-spacing:-.045em}
.ftr__st span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ftr__soc{display:flex;gap:9px}
.ftr__soc a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.15s ease}
.ftr__soc a:hover{background:var(--coral)}

.ftr__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ftr__h{font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-bottom:12px}
.ftr__cols a{display:block;padding:6px 0;font-size:.86rem;font-weight:550;color:rgba(255,255,255,.72);transition:.14s ease}
.ftr__cols a:hover{color:var(--coral)}

.ftr__cloud{padding-block:clamp(22px,3vw,32px);border-bottom:1px solid rgba(255,255,255,.13)}
.cloud{display:flex;flex-wrap:wrap;gap:12px 10px}
.cloud a{padding:7px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);font-size:.78rem;font-weight:600;
  color:rgba(255,255,255,.66);transition:.14s ease}
.cloud a:hover{background:var(--coral);color:#fff}

.ftr__bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;
  font-size:.8rem;color:rgba(255,255,255,.42)}
.ftr__lg{display:flex;gap:16px;flex-wrap:wrap}
.ftr__lg a:hover{color:var(--coral)}
@media(max-width:1000px){.ftr__top{grid-template-columns:1fr}.ftr__cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.ftr__cols{grid-template-columns:1fr}}

/* ---------- sticky mobile join bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;align-items:center;gap:12px;
  padding:11px var(--gut);background:var(--ink);color:#fff;border-top:2px solid var(--coral)}
.mbar__l{display:flex;flex-direction:column;min-width:0;flex:1}
.mbar__l b{font-family:var(--display);font-size:.94rem;font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar__l span{font-family:var(--mono);font-size:.62rem;color:rgba(255,255,255,.5);letter-spacing:.06em}
@media(max-width:900px){
  .mbar{display:flex}
  body{padding-bottom:74px}
  .totop{bottom:84px}
  .toast{bottom:150px}
}

/* ============================================================
   AFFMASHUP — HOMEPAGE SECTIONS
   ============================================================ */

.brk{display:inline}
@media(max-width:900px){.brk{display:none}}

/* ============ 1. HERO ============ */
.hero{background:var(--ink);color:var(--on);position:relative;overflow:hidden;
  padding-block:clamp(46px,6vw,86px) clamp(52px,6.5vw,96px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 82% at 84% 8%,rgba(255,107,74,.30),transparent 62%),
             radial-gradient(ellipse 52% 74% at 4% 96%,rgba(199,185,255,.20),transparent 62%),
             radial-gradient(ellipse 40% 60% at 50% 50%,rgba(43,27,77,.5),transparent 70%)}
.hero__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-48);margin-bottom:18px}
.hero__k i{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 1.8s ease-in-out infinite}
.hero h1{max-width:17ch;font-size:clamp(2.2rem,4.2vw,3.55rem)}
.hero__p{margin-top:20px;font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--on-72);line-height:1.62;max-width:46ch}
.hero__p mark{background:var(--butter);color:var(--ink);padding:1px 6px;border-radius:5px;font-weight:700;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .btn--out{color:#fff;box-shadow:inset 0 0 0 2px var(--on-48)}
.hero .btn--out:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.hero__tr{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--on-48);font-size:.84rem}
.hero__tr b{color:#fff;font-weight:750}
.hero__av{display:flex}
.hero__av span{width:30px;height:30px;border-radius:50%;margin-left:-9px;border:2px solid var(--ink);
  display:grid;place-items:center;font-family:var(--display);font-size:.72rem;font-weight:800;color:var(--ink)}
.hero__av span:first-child{margin-left:0}

/* stat mosaic — the AFFMashup collage, restructured */
.mos{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(58px,auto);gap:10px}
.mos>*{color:var(--ink);border-radius:var(--r-sm);display:flex;flex-direction:column;justify-content:center;padding:14px 16px;
  box-shadow:var(--key),var(--stk-sm);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease}
.mos>*:hover{transform:translate(-2px,-2px);box-shadow:var(--key),6px 6px 0 var(--ink)}
.mos b{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:800;letter-spacing:-.055em;line-height:1}
.mos span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(15,13,20,.5);margin-top:5px}
.mos .m1{grid-column:span 3;background:#fff}
.mos .m2{grid-column:span 3;background:var(--butter)}
.mos .m3{grid-column:span 2;background:var(--teal);color:#fff}
.mos .m3 span{color:rgba(255,255,255,.66)}
.mos .m4{grid-column:span 2;background:var(--lav)}
.mos .m5{grid-column:span 2;background:var(--coral);color:#fff}
.mos .m5 span{color:rgba(255,255,255,.72)}
.mos .m6{grid-column:span 6;background:#fff;flex-direction:row;align-items:center;gap:12px;justify-content:space-between}
.mos .m6 p{font-size:.84rem;color:var(--tx-72);font-weight:600;line-height:1.45}
.mos .m6 p b{font-family:var(--body);font-size:inherit;font-weight:800;letter-spacing:normal;color:var(--tx)}
.mos .m6 .tag{flex:none}

/* city collage strip under the mosaic */
.coll{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.coll a{border-radius:var(--r-sm);min-height:64px;display:flex;flex-direction:column;justify-content:center;padding:11px 13px;
  box-shadow:var(--key),var(--stk-sm);transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.coll a:hover{transform:translate(-2px,-2px)}
.coll b{font-family:var(--serif);font-style:italic;font-size:1.14rem;line-height:1.1;letter-spacing:-.01em}
.coll span{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.62;margin-top:3px}
.coll .c1{background:var(--coral);color:#fff}
.coll .c2{background:var(--teal);color:#fff}
.coll .c3{background:var(--lav);color:var(--ink)}
.coll .c4{background:var(--butter);color:var(--ink)}

@media(max-width:1000px){
  .hero__in{grid-template-columns:1fr}
  .hero h1{max-width:22ch}
}
@media(max-width:520px){
  .mos{grid-template-columns:repeat(4,1fr)}
  .mos .m1,.mos .m2,.mos .m3,.mos .m4,.mos .m5{grid-column:span 2}
  .mos .m6{grid-column:span 4;flex-direction:column;align-items:flex-start}
  .coll{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:330px){
  .mos{grid-template-columns:1fr}
  .mos .m1,.mos .m2,.mos .m3,.mos .m4,.mos .m5,.mos .m6{grid-column:span 1}
  .coll{grid-template-columns:1fr}
}

/* ============ 2. MARQUEE STRIP ============ */
.strip{background:var(--ink);color:#fff;padding-block:15px;border-top:1px solid rgba(255,255,255,.1)}
.strip__i{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-family:var(--display);
  font-size:clamp(1.02rem,1.6vw,1.34rem);font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.strip__i::after{content:"✦";color:var(--coral);font-size:.86em}
.strip__i:nth-child(even)::after{color:var(--butter)}

/* ============ 3. ORGANISER WALL ============ */
.orgs{padding-block:clamp(30px,3.6vw,52px);background:var(--cream);border-bottom:1px solid var(--line)}
.orgs__l{text-align:center;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-38);margin-bottom:22px}
.orgs__g{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.orgs__g a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:#fff;box-shadow:inset 0 0 0 1.6px var(--line);font-size:.87rem;font-weight:700;letter-spacing:-.015em;
  color:var(--tx-72);transition:.15s ease}
.orgs__g a:hover{box-shadow:inset 0 0 0 2px var(--ink);color:var(--tx);transform:translateY(-2px)}
.orgs__g a i{font-style:normal;font-family:var(--mono);font-size:.63rem;font-weight:700;color:var(--coral)}

/* ============ 4. HAPPENING NOW ============ */
.now{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nowc{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.nowc:hover{transform:translateY(-4px)}
.nowc::after{content:"";position:absolute;inset:auto -30% -50% auto;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,74,.34),transparent 70%)}
.nowc__t{position:relative;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.nowc__t i{width:6px;height:6px;border-radius:50%;background:var(--butter);animation:pulse 1.6s ease-in-out infinite}
.nowc h3{position:relative;font-size:1.24rem}
.nowc__m{position:relative;display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--on-72);margin-top:auto}
.nowc__m b{color:#fff;font-weight:700}
@media(max-width:860px){.now{grid-template-columns:1fr}}

/* ============ 5. CALENDAR PLANNER ============ */
.plan{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.plan__l ul{display:flex;flex-direction:column;gap:11px;margin-top:24px}
.plan__l li{display:flex;align-items:flex-start;gap:11px;font-size:.97rem;color:var(--tx-72);line-height:1.5}
.plan__l li i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal);display:grid;place-items:center;margin-top:1px}
.plan__l li i::after{content:"";width:8px;height:4.5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.plan__cta{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}

.cal{background:#fff;border-radius:var(--r-xl);padding:clamp(16px,2vw,26px);box-shadow:var(--key),var(--stk)}
.cal__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cal__h b{font-family:var(--display);font-size:1.26rem;font-weight:800;letter-spacing:-.04em}
.cal__nav{display:flex;gap:6px}
.cal__nav button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cream);transition:.14s ease}
.cal__nav button:hover:not(:disabled){background:var(--ink);color:#fff}
.cal__nav button:disabled{opacity:.3;cursor:not-allowed}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.cal__dow span{text-align:center;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;color:var(--tx-38)}
.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal__d{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--cream);font-size:.86rem;font-weight:650;color:var(--tx-54);transition:.14s ease;min-height:38px;position:relative}
.cal__d.pad{background:transparent}
.cal__d.has{background:var(--butter);color:var(--ink);font-weight:750;cursor:pointer}
.cal__d.has:hover,.cal__d.has:focus-visible{background:var(--ink);color:#fff;transform:scale(1.06)}
.cal__d.hot{background:var(--coral);color:#fff}
.cal__d.hot:hover{background:var(--ink)}
.cal__d.today{box-shadow:inset 0 0 0 2.5px var(--ink)}
.cal__d em{font-style:normal;font-family:var(--mono);font-size:.53rem;font-weight:700;opacity:.72;line-height:1}
.cal__out{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);min-height:96px}
.cal__out p.e{font-size:.9rem;color:var(--tx-54)}
.cal__ev{display:flex;align-items:center;gap:12px;padding:9px 0}
.cal__ev+.cal__ev{border-top:1px solid var(--line-2)}
.cal__ev b{font-size:.93rem;font-weight:700;letter-spacing:-.015em}
.cal__ev span{font-family:var(--mono);font-size:.68rem;color:var(--tx-38);margin-left:auto;white-space:nowrap}
.cal__ev .dot{width:32px;height:32px;font-size:.82rem}
.cal__lg{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-38)}
.cal__lg span{display:inline-flex;align-items:center;gap:6px}
.cal__lg i{width:10px;height:10px;border-radius:3px}
@media(max-width:960px){.plan{grid-template-columns:1fr}}
@media(max-width:400px){.cal__d{min-height:34px;font-size:.78rem;border-radius:9px}.cal__g,.cal__dow{gap:3px}}

/* ============ 6. EVENT CARDS ============ */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{padding:9px 17px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.6px var(--line);
  font-size:.87rem;font-weight:700;color:var(--tx-72);transition:.15s ease;min-height:40px}
.chip:hover{box-shadow:inset 0 0 0 2px var(--ink);color:var(--tx)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}

.evg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ev{background:#fff;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease}
.ev:hover{transform:translate(-3px,-3px);box-shadow:var(--key),7px 7px 0 var(--ink)}
.ev__im{position:relative;aspect-ratio:16/8.4;background:var(--cream-2);overflow:hidden;border-bottom:2.5px solid var(--ink)}
.ev__im img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.ev:hover .ev__im img{transform:scale(1.05)}
.ev__f{position:absolute;top:10px;right:10px}
.ev__b{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.ev__d{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--coral)}
.ev h3{font-size:1.06rem;line-height:1.22}
.ev__x{font-size:.85rem;color:var(--tx-54);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ev__m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:13px;
  border-top:1px solid var(--line-2);font-size:.8rem;color:var(--tx-72)}
.ev__m span{display:inline-flex;align-items:center;gap:5px}
.ev__m svg{flex:none;opacity:.45}
@media(max-width:1100px){.evg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.evg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.evg{grid-template-columns:1fr}}

/* ============ 7. FEATURED SPOTLIGHT ============ */
.spot{background:var(--coral);border-radius:var(--r-2xl);color:#fff;display:grid;grid-template-columns:1.06fr .94fr;
  overflow:hidden;box-shadow:var(--key),6px 6px 0 var(--ink)}
.spot__l{padding:clamp(26px,3.6vw,50px);display:flex;flex-direction:column;gap:15px;align-items:flex-start;justify-content:center}
.spot h2{font-size:clamp(1.7rem,3vw,2.6rem);max-width:15ch}
.spot p{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.62;max-width:46ch}
.spot__f{display:flex;gap:22px;flex-wrap:wrap;margin-top:4px}
.spot__f div{display:flex;flex-direction:column}
.spot__f b{font-family:var(--display);font-size:1.24rem;font-weight:800;letter-spacing:-.045em}
.spot__f span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.spot__r{position:relative;min-height:280px;background:var(--ink)}
.spot__r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
@media(max-width:900px){.spot{grid-template-columns:1fr}.spot__r{min-height:200px;order:-1}
  .spot__r img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}}

/* ============ 8. AFTERPARTIES ============ */
.party{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.party__t{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pt{border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px;min-height:150px;
  box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.pt:hover{transform:translate(-3px,-3px)}
.pt b{font-family:var(--display);font-size:1.1rem;font-weight:800;letter-spacing:-.035em}
.pt p{font-size:.84rem;line-height:1.5;opacity:.78}
.pt em{font-style:normal;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6;margin-top:auto}
.pt--1{background:#fff}.pt--2{background:var(--butter)}.pt--3{background:var(--teal);color:#fff}.pt--4{background:#fff}
@media(max-width:900px){.party{grid-template-columns:1fr}}
@media(max-width:400px){.party__t{grid-template-columns:1fr}}

/* ============ 9. CITIES ============ */
.cty{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cty a{border-radius:var(--r-lg);padding:18px 24px;min-width:158px;display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease}
.cty a:hover{transform:translate(-3px,-3px);box-shadow:var(--key),7px 7px 0 var(--ink)}
.cty b{font-family:var(--serif);font-style:italic;font-size:1.55rem;line-height:1;letter-spacing:-.015em}
.cty span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.66}
.cty .k1{background:var(--coral);color:#fff}
.cty .k2{background:var(--teal);color:#fff}
.cty .k3{background:var(--lav);color:var(--ink)}
.cty .k4{background:var(--butter);color:var(--ink)}
.cty .k5{background:#fff;color:var(--ink)}
.ctyf{max-width:520px;margin:0 auto 26px;position:relative}
.ctyf input{width:100%;min-height:54px;padding:0 20px 0 48px;border-radius:var(--r-pill);border:0;outline:0;
  background:#fff;box-shadow:var(--key);font-family:var(--body);font-size:1rem;font-weight:600}
.ctyf svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--tx-38)}
.ctyf__n{text-align:center;margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-38)}

/* ============ 10. TRAVEL GUIDES ============ */
.trv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trvc{background:var(--cream);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:11px;
  box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.trvc:hover{transform:translate(-3px,-3px)}
.trvc__h{display:flex;align-items:center;gap:11px}
.trvc__h b{font-family:var(--display);font-size:1.18rem;font-weight:800;letter-spacing:-.038em}
.trvc ul{display:flex;flex-direction:column;gap:7px}
.trvc li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--tx-72);line-height:1.45}
.trvc li svg{flex:none;margin-top:3px;opacity:.5}
.trvc__f{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.64rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
@media(max-width:900px){.trv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.trv{grid-template-columns:1fr}}

/* ============ 11. MONTH HUBS ============ */
.mth{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mth a{background:rgba(255,255,255,.1);border-radius:var(--r-lg);padding:20px 18px;display:flex;flex-direction:column;gap:5px;
  transition:.16s ease;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.2)}
.mth a:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.mth a:hover span{color:rgba(15,13,20,.5)}
.mth b{font-family:var(--display);font-size:1.16rem;font-weight:800;letter-spacing:-.04em}
.mth span{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.mth .pk{box-shadow:inset 0 0 0 2.5px var(--butter)}
@media(max-width:900px){.mth{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.mth{grid-template-columns:repeat(2,1fr)}}
@media(max-width:300px){.mth{grid-template-columns:1fr}}

/* ============ 12. COMPARE ============ */
.cmp{background:#fff;border-radius:var(--r-xl);box-shadow:var(--key),var(--stk);overflow:hidden}
.cmp__t{display:flex;gap:6px;padding:14px;border-bottom:2.5px solid var(--ink);overflow-x:auto;scrollbar-width:none}
.cmp__t::-webkit-scrollbar{display:none}
.cmp__t button{padding:9px 15px;border-radius:var(--r-pill);font-size:.84rem;font-weight:700;color:var(--tx-54);
  white-space:nowrap;transition:.14s ease;min-height:40px}
.cmp__t button:hover{background:var(--cream)}
.cmp__t button.on{background:var(--ink);color:#fff}
.cmp__p{display:grid;grid-template-columns:1fr auto 1fr}
.cmp__s{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:11px}
.cmp__s:last-child{background:var(--cream)}
.cmp__s h3{font-size:1.2rem}
.cmp__s ul{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cmp__s li{display:flex;justify-content:space-between;gap:12px;font-size:.87rem;padding:7px 0;border-bottom:1px solid var(--line-2)}
.cmp__s li b{font-weight:750;text-align:right}
.cmp__s li span{color:var(--tx-54)}
.cmp__v{display:grid;place-items:center;padding:0 8px;background:var(--ink);color:#fff;
  font-family:var(--display);font-size:1.02rem;font-weight:800;letter-spacing:-.04em}
@media(max-width:760px){.cmp__p{grid-template-columns:1fr}.cmp__v{padding:9px;font-size:.86rem}}

/* ============ 13. TOOLS ============ */
.tls{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tl-c{background:#fff;border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s ease;min-height:190px}
.tl-c:hover{transform:translate(-3px,-3px);box-shadow:var(--key),7px 7px 0 var(--ink)}
.tl-c__i{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;box-shadow:var(--stk-sm)}
.tl-c b{font-family:var(--display);font-size:1.1rem;font-weight:800;letter-spacing:-.035em}
.tl-c p{font-size:.85rem;color:var(--tx-72);line-height:1.5}
.tl-c__f{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:6px}
.tl-c:hover .tl-c__f{gap:11px}
.i-coral{background:var(--coral);color:#fff}
.i-teal{background:var(--teal);color:#fff}
.i-lav{background:var(--lav);color:var(--ink)}
.i-butter{background:var(--butter);color:var(--ink)}
@media(max-width:1000px){.tls{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tls{grid-template-columns:1fr}}

/* ============ 14. AWARDS ============ */
.awd{background:var(--butter);border-radius:var(--r-2xl);padding:clamp(26px,3.6vw,52px);box-shadow:var(--key),6px 6px 0 var(--ink)}
.awd__g{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:26px}
.awd__g div{background:rgba(255,255,255,.7);border-radius:var(--r-sm);padding:15px 17px;
  box-shadow:inset 0 0 0 2px var(--ink);display:flex;flex-direction:column;gap:4px;transition:.16s ease}
.awd__g div:hover{background:#fff;transform:translateY(-3px)}
.awd__g b{font-family:var(--display);font-size:.99rem;font-weight:800;letter-spacing:-.032em;line-height:1.2}
.awd__g span{font-size:.78rem;color:rgba(15,13,20,.6);line-height:1.4}
.awd__b{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:2px solid var(--ink)}
.awd__b p{font-size:.9rem;color:rgba(15,13,20,.72);max-width:52ch}
@media(max-width:900px){.awd__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.awd__g{grid-template-columns:1fr}}

/* ============ 15. REVIEWS ============ */
.rvw{position:relative}
.rvw__t{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.rvw__t::-webkit-scrollbar{display:none}
.rq{flex:0 0 min(408px,84vw);scroll-snap-align:start;background:#fff;border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--key),var(--stk)}
.rq__s{display:flex;gap:3px;color:var(--butter)}
.rq__s i{width:15px;height:15px;background:currentColor;display:block;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rq p{font-family:var(--serif);font-size:1.16rem;line-height:1.48;letter-spacing:-.01em}
.rq__a{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
.rq__a b{font-size:.92rem;font-weight:750;display:block}
.rq__a span{font-size:.78rem;color:var(--tx-54)}
.rvw__n{display:flex;gap:8px;margin-top:20px;justify-content:center}
.rvw__n button{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--ink);
  display:grid;place-items:center;transition:.14s ease}
.rvw__n button:hover{background:var(--ink);color:#fff}

/* ============ 16. STATS ============ */
.stg{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(26px,3.6vw,56px);align-items:center}
.stn{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.stn div{background:rgba(255,255,255,.07);border-radius:var(--r-lg);padding:20px;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.16)}
.stn b{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:800;letter-spacing:-.055em;line-height:1}
.stn span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--on-48)}
.bars{display:flex;flex-direction:column;gap:13px}
.bar__t{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:6px}
.bar__t b{font-family:var(--mono);font-size:.82rem;color:var(--butter)}
.bar__r{height:11px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden}
.bar__r i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--coral);
  transition:width 1s cubic-bezier(.2,.9,.3,1)}
.bar:nth-child(2) .bar__r i{background:var(--butter)}
.bar:nth-child(3) .bar__r i{background:var(--teal)}
.bar:nth-child(4) .bar__r i{background:var(--lav)}
.bar:nth-child(5) .bar__r i{background:#fff}
@media(max-width:900px){.stg{grid-template-columns:1fr}}
@media(max-width:340px){.stn{grid-template-columns:1fr}}

/* ============ 17. BEST-OF LISTS ============ */
.best{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bestc{background:#fff;border-radius:var(--r-xl);padding:clamp(22px,2.6vw,34px);box-shadow:var(--key),var(--stk)}
.bestc h3{font-size:1.42rem;margin-bottom:4px}
.bestc>p{font-size:.9rem;color:var(--tx-54);margin-bottom:18px}
.bestc ol{display:flex;flex-direction:column}
.bestc li{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.bestc li:last-child{border-bottom:0}
.bestc li i{font-style:normal;font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--tx-38);width:20px;flex:none}
.bestc li b{font-size:.94rem;font-weight:700;letter-spacing:-.015em}
.bestc li span{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--tx-54);white-space:nowrap;text-align:right}
@media(max-width:820px){.best{grid-template-columns:1fr}}

/* ============ 18. HOW IT WORKS ============ */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:h}
.howc{background:var(--cream);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:11px;
  box-shadow:var(--key),var(--stk)}
.howc__n{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-size:1.06rem;font-weight:800;letter-spacing:-.04em}
.howc b{font-family:var(--display);font-size:1.28rem;font-weight:800;letter-spacing:-.04em}
.howc p{font-size:.92rem;color:var(--tx-72);line-height:1.58}
@media(max-width:860px){.how{grid-template-columns:1fr}}

/* ============ 19. JOIN (Telegram / LinkedIn) ============ */
.join{background:var(--teal);border-radius:var(--r-2xl);padding:clamp(26px,3.6vw,56px);color:#fff;
  box-shadow:var(--key),6px 6px 0 var(--ink);position:relative;overflow:hidden}
.join::after{content:"";position:absolute;inset:auto -8% -40% auto;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,216,77,.3),transparent 68%);pointer-events:none}
.join__g{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.door{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px;
  align-items:flex-start;box-shadow:var(--key),var(--stk);transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.door:hover{transform:translate(-3px,-3px)}
.door__i{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:var(--stk-sm)}
.door b{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:-.04em}
.door p{font-size:.88rem;color:var(--tx-72);line-height:1.55}
.door ul{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--tx-72)}
.door li{display:flex;gap:8px}
.door li::before{content:"✦";color:var(--coral);flex:none}
.tgg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:26px}
.tgg a{background:rgba(255,255,255,.13);border-radius:var(--r-sm);padding:13px 15px;display:flex;flex-direction:column;gap:3px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24);transition:.15s ease}
.tgg a:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.tgg b{font-size:.86rem;font-weight:750;letter-spacing:-.02em}
.tgg span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;opacity:.66}
@media(max-width:820px){.join__g{grid-template-columns:1fr}.tgg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:320px){.tgg{grid-template-columns:1fr}}

/* ============ 20. SEO PROSE ============ */
.seo{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.seo__l{position:sticky;top:calc(var(--hdr) + 22px)}
.seo__b h3{font-size:clamp(1.16rem,1.7vw,1.4rem);margin:30px 0 11px}
.seo__b h3:first-child{margin-top:0}
.seo__b p{font-size:1rem;color:var(--tx-72);line-height:1.76;margin-bottom:13px;max-width:74ch}
.seo__b a{color:var(--coral);font-weight:700;text-decoration:underline;text-decoration-thickness:1.6px;text-underline-offset:2.5px}
.seo__b strong{color:var(--tx);font-weight:750}
@media(max-width:900px){.seo{grid-template-columns:1fr}.seo__l{position:static}}

/* ============ 21. FAQ ============ */
.faq{display:grid;grid-template-columns:.66fr 1.34fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.faq__l{position:sticky;top:calc(var(--hdr) + 22px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(max-width:900px){.faq{grid-template-columns:1fr}.faq__l{position:static}}

/* ============ 22. CLOSER ============ */
.close{background:var(--butter);border-radius:var(--r-2xl);padding:clamp(28px,4vw,64px);position:relative;overflow:hidden;
  box-shadow:var(--key),6px 6px 0 var(--ink)}
.close__in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.close h2{font-size:clamp(1.9rem,3.4vw,3rem);max-width:14ch}
.close p{margin-top:14px;font-size:1.02rem;color:rgba(15,13,20,.72);line-height:1.62;max-width:46ch}
.close__f{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.close__f input{flex:1;min-width:200px;min-height:56px;padding:0 22px;border-radius:var(--r-pill);border:0;outline:0;
  background:#fff;box-shadow:var(--key);font-family:var(--body);font-size:1rem;font-weight:600}
.close__n{margin-top:13px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(15,13,20,.5)}
.close__r{display:flex;flex-direction:column;gap:10px}
.close__r div{background:#fff;border-radius:var(--r-lg);padding:16px 20px;display:flex;align-items:center;gap:13px;
  box-shadow:var(--key),var(--stk-sm)}
.close__r b{font-family:var(--display);font-size:1.16rem;font-weight:800;letter-spacing:-.04em}
.close__r span{font-size:.83rem;color:var(--tx-54);line-height:1.4}
@media(max-width:900px){.close__in{grid-template-columns:1fr}}

/* ============ ultra-narrow: Galaxy Fold (280px) ============ */
@media(max-width:360px){
  :root{--gut:14px}
  h1{font-size:1.92rem}
  h2{font-size:1.56rem}
  .btn{min-height:48px;padding:0 20px;font-size:.92rem;width:100%}
  .hero__cta .btn,.plan__cta .btn,.close__f .btn{width:100%}
  .chips{gap:6px}
  .chip{font-size:.8rem;padding:8px 13px}
  .cty a{min-width:0;width:100%;padding:15px 18px}
  .cty b{font-size:1.32rem}
  .rq{flex-basis:88vw;padding:20px}
  .rq p{font-size:1.04rem}
  .awd,.join,.close,.spot{border-radius:var(--r-xl)}
  .mq__t{animation-duration:56s}
}
@media(max-width:300px){
  .hero__tr{flex-wrap:wrap}
  .orgs__g a{font-size:.78rem;padding:7px 12px}
  .cal{padding:12px}
}

/* tags inside flex-column blocks must not stretch */
.cmp__s .tag,.spot__l .tag,.awd .tag,.join .tag,.close .tag,.rq .tag,.mm__f .tag{align-self:flex-start}


@media(max-width:340px){.tl{white-space:normal}.plan,.plan__l,.bestc,.best__g,.head--split{min-width:0}.plan,.best__g{grid-template-columns:1fr}.head--split{flex-wrap:wrap;gap:10px}.bestc{padding:16px}.sect,.sect--sm{padding-inline:0;overflow-x:clip}.plan__l,.plan__r,.bestc,.best__g>*{max-width:100%}body{overflow-wrap:anywhere}}
/* Final header step. Deliberately still display:none on the wordmark rather
   than the usual visually-hidden shuffle: the brand anchor already carries
   aria-label="AFFMashup home", so the accessible name never degrades to "A".
   The rest of the header ladder is at the .hdr__end rules above -- add steps
   there, do not stack another header block here. */
@media(max-width:340px){.brand__t{display:none}.brand{gap:0}.icb{width:34px;height:34px}.brg{width:36px;height:36px}.hdr__end{gap:5px}.hdr__in{padding-inline:10px}}


/* Consolidated review-round overrides (deduped). */
/* ============================================================ Review-round fixes (mega-menu weight, contrast, spacing) ============================================================ */ /* --- Mega-menu: was oversized and "retro" -- grey mono labels, deep padding, 940px panel. Make it compact with legible, high-contrast text. --- */ .mm{width:min(560px,calc(100vw - 24px));border-radius:16px;padding:0}
.mm--w{width:min(560px,calc(100vw - 24px))}
.mm__g,.mm__g--4{grid-template-columns:1fr!important;gap:0;padding:10px}
.mm__l{font-family:var(--body);font-size:.68rem;font-weight:800;letter-spacing:.10em; text-transform:uppercase;color:var(--tx-54);padding:6px 10px 4px;margin:0}
.mm__c a{padding:8px 10px;border-radius:9px;gap:2px}
.mm__c a b{font-size:.93rem;font-weight:650;color:var(--tx);letter-spacing:-.01em}
.mm__c a span span,.mm__c a>span>span{font-size:.78rem;color:var(--tx-54)}
.mm__c a:hover{background:var(--paper-2,#f5f1ea)}
.mm__ft{padding:9px 12px;font-size:.8rem;border-top:1px solid var(--line-2)}
.mm__ft a{font-weight:650;color:var(--tx)}
/* Nav trigger text was low-contrast against the dark header. */ .nav__b{color:rgba(255,255,255,.88);font-weight:600;font-size:.93rem}
.nav__b:hover,.nav__it.on .nav__b{color:#fff}
/* --- Calendar: shorter, rows aligned left with an icon --- */ .cal__d{min-height:34px}
.cal__ev{display:flex;align-items:center;gap:10px;padding:7px 0;text-align:left}
.cal__ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none}
.cal__evt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.cal__evt b{font-size:.9rem;line-height:1.25}
.cal__evt>span{font-size:.76rem;color:var(--tx-54)}
/* --- Review cards: tighter inside and between --- */ .rq{padding:16px}
.rvw,.rvw__t{gap:12px}
.rq blockquote p{margin:0;font-size:.92rem;line-height:1.45}
.rq figcaption{margin-top:10px;padding-top:10px}
/* --- Dull body text: lift the muted tone so copy is readable --- */ .plan__l li,.close__l li,.join__l li{color:var(--tx)}
.plan__l li span,.join li span{color:var(--tx)}
/* --- No dead space under the footer --- */ html,body{margin-bottom:0}
body>:last-child{margin-bottom:0}
.ftr{margin-bottom:0;padding-bottom:26px}
/* --- Back-to-top must float above content, not sit after the footer --- */ .totop{position:fixed!important;right:18px;bottom:18px;z-index:70;opacity:0;pointer-events:none; transition:opacity .2s ease}
.totop.on,.totop.show{opacity:1;pointer-events:auto}
.prog{position:fixed!important;top:0;left:0;z-index:99}
/* --- Prevent the flash of unstyled markup on reload: hide the body until the shell stylesheet has applied, then reveal. --- */ html.aff-loading body{visibility:hidden}
html.aff-ready body{visibility:visible}
@media(min-width:900px){.cal__d{min-height:38px}}
@media(max-width:900px){.totop{bottom:76px}}

/* --- Mega-menu: drop the retro hard-offset shadow and heavy border.
       A soft shadow + hairline border reads as a modern dropdown. --- */
.mm,.mm--w,.mm--r{box-shadow:0 18px 44px rgba(15,13,20,.16),0 2px 6px rgba(15,13,20,.06)!important;
  border:1px solid var(--line-2,#eee7dc)!important;border-radius:14px!important}
.mm__l{letter-spacing:.08em;font-size:.66rem;color:var(--tx-54)}
.mm__c a{padding:7px 10px}
.mm__c a b{font-weight:600}
.mm__ft{background:transparent}

/* --- Only ONE hamburger. A legacy mobile toggle/shell still renders alongside
       the v4 burger, so two appeared on phones. --- */
.aff-public-mobile-toggle,.aff-public-mobile-shell,
button[class*="aff-public-mobile"],div[class*="aff-public-mobile-shell"]{display:none!important}

/* --- Dropdown: remove the dead space, tighten to a clean list --- */
.mm{padding:0!important}
.mm__g,.mm__g--4{padding:6px!important;gap:0!important}
.mm__l{padding:8px 10px 2px!important;margin:0!important}
.mm__c{gap:0!important}
.mm__c a{padding:7px 10px!important;margin:0!important}
.mm__c a span span,.mm__c a>span>span{line-height:1.3}
.mm__f{display:none!important}
.mm__ft{padding:8px 12px!important;margin:0!important}

/* --- Calendar rows: align hard left, icon then text --- */
.cal__ev{justify-content:flex-start!important;text-align:left!important;width:100%}
.cal__evt{align-items:flex-start!important;text-align:left!important;flex:1 1 auto}
.cal__ic{margin-right:2px}

/* --- Back-to-top: consistent, above the mobile join bar --- */
.totop{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;border:0;box-shadow:0 6px 18px rgba(15,13,20,.24)}
@media(max-width:900px){.totop{right:14px;bottom:84px;width:36px;height:36px}}

/* --- Calendar: shorter grid, readable day list -------------------------------
   `.cal__d{aspect-ratio:1}` made every cell as tall as it was wide (80px at
   desktop), so the month grid alone ran 502px. Give the cells a fixed, shorter
   height instead.
   The day list under the grid was unreadable because the generic `.cal__ev span`
   rule also matched the `.cal__evt` wrapper: the event title inherited 38% grey
   AND the mono face, while `margin-left:auto` shoved the whole row 485px to the
   right. Style the wrapper and the city span separately. */
.cal__d{aspect-ratio:auto;height:clamp(36px,3.6vw,46px);min-height:0}
.cal__ev .cal__evt{font-family:var(--body);color:var(--tx);margin-left:0;gap:1px}
.cal__ev .cal__evt b{color:var(--ink);font-family:var(--body);font-weight:750;
  font-size:.92rem;letter-spacing:-.01em}
.cal__ev .cal__evt>span{font-family:var(--mono);color:var(--tx-54);
  font-size:.72rem;margin-left:0}
.cal__ev:hover .cal__evt b,.cal__ev:focus-visible .cal__evt b{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.cal__out{min-height:0}

/* --- Review carousel: close the gaps ----------------------------------------
   The track gap is 10px, but the cards sat 90px apart: `<figure>` and
   `<blockquote>` carry a UA default `margin:1em 40px`, which was never reset.
   That same 40px is why the quote text started well inside the card. */
.rvw__t .rq{margin:0;padding:16px 18px}
.rq blockquote{margin:0}
.rq figcaption{margin:0}
.rvw__t{gap:12px}

/* --- Join cards: two real buttons instead of one whole-card link ------------
   The docx asks the Telegram card to offer BOTH "Sign up with Telegram" and a
   separate "Join group". A nested <a> inside the old card-link would be invalid
   HTML, so the card is a <div> now and the buttons are real links. */
.door__b{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.door__b .btn{cursor:pointer}
.door__b .btn:not(.btn--ink){background:var(--cream);color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink)}
.door__b .btn:not(.btn--ink):hover{background:var(--ink);color:#fff}

/* --- Events grid → featured spotlight: kill the doubled gap ------------------
   Both sections are bg-white and sit flush, so `.sect` bottom padding (~90px)
   and `.sect--sm` top padding (~56px) stacked into ~146px of dead white space
   between the last event card and the spotlight. Collapse it where they meet;
   every other section keeps its normal rhythm. */
.sect.bg-white:has(#evg){padding-bottom:30px}
.sect--sm.bg-white:has(.spot){padding-top:8px}
@media(max-width:720px){
  .sect.bg-white:has(#evg){padding-bottom:22px}
  .sect--sm.bg-white:has(.spot){padding-top:6px}
}

/* ============================================================
   TOUCH TARGETS — UI audit 13 Aug 2026, P0-2
   ============================================================
   Measured with tools/verify-targets.js at 390px across 13 page types, drawer
   open: 856 controls under 44x44. 690 of them (81%) are the seven chrome
   selectors below, which is why they are fixed here rather than page by page.
   WCAG 2.5.8 sets a 24px floor; Apple HIG and Material both want 44-48px, and
   44 is the real bar for a site people use one-handed in a conference hall.

   Three techniques, and the choice is not stylistic:

   a) ISOLATED controls that must not reflow (header, footer icons) get a
      transparent ::after that expands the hit area only. Nothing moves.
      Do NOT reach for `display:inline-flex` + min-height here: it overrides the
      `display:none` hiding .hdr__cta on phones and pops a 165px "Join free"
      button into the mobile header. That is trap 7 and the audit hit it too.

   b) STACKED or WRAPPED link lists get real height. At 34px spacing a 44px hit
      area overlaps its neighbours and you tap the wrong link.

   c) Controls with room to grow 2-4px just take min-height. */

/* (a) hit-area only — the header must not reflow, it was just fixed in P0-1 */
.brg,.icb,.ftr__soc a{position:relative}
.brg::after,.icb::after,.ftr__soc a::after{content:"";position:absolute;top:50%;left:50%;
  width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.brand{position:relative}
.brand::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:max(100%,44px);
  transform:translate(-50%,-50%)}
/* .tl is an inline "see all ->" inside running text; real height would push the
   line box and re-wrap the paragraph around it. */
.tl{position:relative}
.tl::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:44px;
  transform:translate(-50%,-50%)}

/* The marquee is the one place ::after cannot work: .mq is overflow:hidden,
   which clips hit testing as well as painting, so a 44px pseudo-element on a
   21px link is cropped straight back to 21px. Give the links real height --
   .live__in already reserves 44px, so the bar does not grow. */
.live__i{min-height:44px}

/* (b) stacked / wrapped lists — real height, negative margin keeps the rhythm.
   The padding values are derived, not guessed: .ftr__cols a has an 18px line
   box (.86rem at the inherited line-height) and .cloud a a 16px one, so 13 and
   14 respectively are what land exactly on 44. 11/12 left both at 40px. */
.ftr__cols a{padding-block:13px;margin-block:-7px;min-height:44px}
/* .cloud is the exception: a negative margin restores the rhythm in a STACKED
   list, but in a WRAPPED FLEX row it eats the row gap instead. The pill paints
   its whole 44px padding box, so 10px of gap minus 7px of margin at each end
   left the rows OVERLAPPING by 4px -- measured on the live footer, not guessed.
   Flex `gap` already owns the rhythm here, so keep the height and drop the
   margin. Do not re-add it without re-measuring .ftr__cloud row positions. */
.cloud a{padding-block:14px;margin-block:0;min-height:44px}

/* (c) 2-10px short — just grow them */
.orgs__g a,.chip,.cmp__t button{min-height:44px}
.rvw__n button,.cal__nav button{width:44px;height:44px}
/* Calendar day cells were 44x36 (clamp min 36px). Raising the floor to 44 adds
   ~48px to the month grid on a phone; a ::after would overflow the 5px grid gap
   by 4px on each side and steal taps from the row above. Height wins. */
.cal__d{height:clamp(44px,3.6vw,46px)}

/* keyboard skip link: off-screen until focused */
.skip{position:absolute;left:-9999px;top:10px;z-index:10000;background:#151210;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{left:10px;outline:3px solid #ff6b4a;outline-offset:2px}