/* Town pages (letsrallytonight.com/in/<market>, Build HQ n-us-townpages). Shared with site.css; the pages are written by scripts/build-town-pages.mjs.
   Cover cards with the days separated (mockup mockups/n-us-townpages.html, "B+"). Dark only, like the rest of the site. */
.tw-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.tw-hero{padding:34px 0 8px;display:grid;gap:22px}
@media(min-width:900px){.tw-hero{grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding-top:48px}}
.tw-eyebrow{font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text)}
.tw-hero h1{font-size:clamp(34px,7.4vw,56px);line-height:1;letter-spacing:-.03em;margin:8px 0 12px}
.tw-hero .tw-quick{font-size:18px;color:var(--muted);max-width:44ch}
.tw-hero .tw-quick b{color:var(--text)}
.tw-steps{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.tw-steps li{display:flex;gap:12px;align-items:flex-start;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.tw-steps i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--teal-ink);display:grid;place-items:center;font:800 13px var(--body);font-style:normal}
.tw-steps b{display:block;font:800 15px var(--display)}
.tw-steps span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.tw-how{display:inline-block;margin-top:10px;font:700 14px var(--body);color:var(--teal-text);text-decoration:none}
.tw-how:hover{text-decoration:underline}
.tw-heroform{display:none;margin-top:16px;max-width:420px}
@media(min-width:900px){.tw-heroform{display:block}}

/* day strip */
.tw-strip{position:sticky;top:var(--tw-head,60px);z-index:20;margin:18px -20px 6px;padding:10px 20px;background:rgba(10,15,24,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tw-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:520px}
.tw-days a{display:block;text-align:center;text-decoration:none;color:var(--muted);background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:6px 0;font:700 10px var(--body);letter-spacing:.06em}
.tw-days a b{display:block;font:800 16px var(--display);color:var(--text);letter-spacing:0}
.tw-days a.on{border-color:var(--teal);background:rgba(79,209,197,.1)}
.tw-days a.off{opacity:.45;pointer-events:none}

/* a day */
.tw-day{scroll-margin-top:calc(var(--tw-head,60px) + 80px);margin-top:22px}
.tw-dayhd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:12px}
.tw-dayhd h2{font-size:clamp(22px,4.4vw,28px);letter-spacing:-.02em}
.tw-dayhd span{font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tw-dayhd .tw-today{color:var(--teal-text)}
.tw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.tw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:340px){.tw-grid{grid-template-columns:1fr}}

/* a card: the whole thing is one link */
.tw-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:18px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .2s var(--ease),border-color .2s}
.tw-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.tw-card:hover .tw-src u{text-decoration:underline}
.tw-card.past{opacity:.5}
.tw-cover{height:104px;position:relative;background:linear-gradient(135deg,var(--k,#5E7196),#0b1424)}
.tw-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,15,24,.7))}
.tw-cover em{position:absolute;left:10px;bottom:8px;z-index:2;font:800 11px var(--body);font-style:normal;letter-spacing:.1em;color:#fff;text-transform:uppercase}
.tw-cover small{position:absolute;right:8px;top:8px;z-index:2;font:800 10px var(--body);letter-spacing:.08em;background:rgba(0,0,0,.45);color:#fff;border-radius:99px;padding:3px 8px}
.tw-bd{padding:10px 11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.tw-bd b{font:800 15px/1.18 var(--display);overflow-wrap:anywhere}
.tw-bd span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.tw-src{margin-top:auto;padding-top:6px;font:600 11px/1.35 var(--body);color:var(--faint)}
.tw-src u{color:var(--teal-text);text-decoration:none}
.tw-usual{font:700 11px var(--body);color:var(--soon)}

/* the sign-up cards */
.tw-join{background:linear-gradient(160deg,rgba(79,209,197,.14),rgba(79,209,197,.03));border:1px solid rgba(79,209,197,.4);border-radius:20px;padding:16px;margin:22px 0}
.tw-join h3{font:800 20px/1.15 var(--display);margin:0 0 4px}
.tw-join p{margin:0 0 10px;color:var(--muted);font-size:14px}
.tw-form{display:flex;gap:8px;flex-wrap:wrap}
.tw-form .field{flex:1 1 200px;min-width:0}
.tw-form .btn{flex:0 0 auto}
.tw-fine{display:block;margin-top:8px;font-size:12px;color:var(--faint)}
.tw-err{color:var(--live);font-size:13px;margin-top:6px}
.tw-done{display:none}
.tw-joined .tw-donebox{display:block}.tw-joined .tw-formbox{display:none}
.tw-donebox{display:none}
.tw-ref{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px;color:var(--muted);word-break:break-all;margin:8px 0}
.tw-refbtns{display:flex;gap:8px;flex-wrap:wrap}

/* places and how it works */
.tw-sec{margin-top:34px}
.tw-sec h2{font-size:clamp(22px,4.4vw,30px);letter-spacing:-.02em;margin-bottom:6px}
.tw-sec>p{color:var(--muted);max-width:68ch;margin:0 0 14px}
.tw-places{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:520px}
.tw-places li{display:flex;justify-content:space-between;gap:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:15px}
.tw-places span{color:var(--muted)}
.tw-cards4{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.tw-cards4{grid-template-columns:repeat(2,1fr)}}
.tw-cards4 div{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:14px}
.tw-cards4 b{font:800 16px var(--display)}
.tw-cards4 span{display:block;color:var(--muted);font-size:14px;margin-top:3px}
.tw-where{margin-top:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--muted);font-size:14px}
.tw-where summary{cursor:pointer;font-weight:800;color:var(--text)}
.tw-where p{margin:8px 0 0}
.tw-empty{border:1px dashed var(--line-2);border-radius:18px;padding:22px;text-align:center;color:var(--muted);margin:22px 0}
.tw-empty b{display:block;color:var(--text);font:800 18px var(--display);margin-bottom:4px}
.tw-towns{display:flex;flex-wrap:wrap;gap:8px}
.tw-towns a{border:1px solid var(--line);border-radius:99px;padding:6px 13px;text-decoration:none;color:var(--muted);font-size:14px}
.tw-towns a:hover{color:var(--text);border-color:var(--line-2)}
.tw-legal{margin:26px 0 8px;font-size:12.5px;color:var(--faint);max-width:80ch;line-height:1.55}
.tw-legal a{color:var(--muted)}
.tw-sample{display:inline-block;font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--soon);padding:4px 9px;border-radius:6px;margin-bottom:8px}

/* the sticky bar and the sheet */
.tw-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none;transform:translateY(0);transition:transform .35s var(--ease),opacity .25s}
.tw-bar.gone{transform:translateY(130%);opacity:0}
.tw-bar>div{pointer-events:auto;max-width:760px;margin:0 auto;background:rgba(17,24,38,.96);border:1px solid rgba(79,209,197,.5);border-radius:20px;padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,.5);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tw-bar b{font:800 14px var(--display);flex:1 1 200px}
.tw-bar form{display:flex;gap:6px;flex:1 1 260px}
.tw-bar .field{padding:10px 12px;font-size:14px;min-width:0;flex:1}
.tw-bar .btn{padding:10px 16px;font-size:14px;border-radius:12px}
.tw-bar button.x{pointer-events:auto;appearance:none;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px 8px}
body.tw-pad{padding-bottom:120px}
.tw-sheetback{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:none}
.tw-sheetback.on{display:block}
.tw-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:560px;margin:0 auto;background:var(--ink-2);border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .3s var(--ease)}
.tw-sheet.on{transform:translateY(0)}
.tw-grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 12px}
.tw-sheet h3{font:800 21px/1.12 var(--display);margin:2px 0 4px}
.tw-sheet .tw-when{font:700 14px var(--body);color:var(--text)}
.tw-sheet p{color:var(--muted);font-size:14px;margin:6px 0 12px}
.tw-sheet .tw-close{display:block;margin:10px auto 0;appearance:none;border:0;background:transparent;color:var(--faint);font:600 13px var(--body);cursor:pointer}
.tw-open{display:none}
.tw-sheet.ok .tw-open{display:flex}
.tw-sheet.ok .tw-formbox{display:none}
@media(min-width:760px){.tw-sheet{bottom:50%;transform:translateY(50%) scale(.96);border-radius:26px;border-bottom:1px solid var(--line);opacity:0;pointer-events:none}.tw-sheet.on{transform:translateY(50%) scale(1);opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.tw-card,.tw-bar,.tw-sheet{transition:none}}

/* phones: the site's tab bar floats at the bottom, so the sign-up bar sits above it and the steps shrink to titles to let the events start on the first screen */
@media(max-width:899px){
  .tw-bar{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body.tw-pad{padding-bottom:190px}
  .tw-hero{padding-top:22px;gap:14px}
  .tw-hero .tw-quick{font-size:16px}
  .tw-steps{grid-template-columns:1fr;gap:6px}
  .tw-steps li{padding:8px 12px;align-items:center}
  .tw-steps span{display:none}
  .tw-steps b{font-size:14px}
  .tw-steps i{width:22px;height:22px;font-size:12px}
}
@media(max-width:899px){.tw-bar b{display:none}.tw-bar>div{padding:8px 10px;flex-wrap:nowrap}.tw-bar form{flex:1 1 auto}.tw-bar .tw-err{position:absolute;left:14px;bottom:-1px}}
.tw-sheet .tw-form .field{flex-basis:150px}

/* cover photos from the app's own library, graded like the Rally cards (black and white, more contrast, the kind's color blended in, a dark fade) */
.tw-pic{position:absolute;inset:0;filter:grayscale(1) contrast(1.25) brightness(.9)}
.tw-pic img{display:block;width:100%;height:100%;object-fit:cover}
.tw-tint{position:absolute;inset:0;background:var(--k,#5E7196);mix-blend-mode:color;opacity:.75;pointer-events:none}
.tw-cover:after{z-index:1}
.tw-cover em,.tw-cover small{z-index:3}