/* v215: /trick-or-treat/ page. Only this page loads this file. */
.page h1.tot-title,.tot-title{margin:18px auto 10px;text-align:center;line-height:1}
.tot-title span{display:block}
.tot-kicker{font:800 clamp(15px,2.2vw,20px)/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--sign-cream,#fff0d2);text-shadow:0 2px 0 #000}
.tot-main{margin:10px 0 8px;font:400 clamp(44px,8.5vw,92px)/.95 'Spooky Sign',Georgia,serif;text-transform:uppercase;letter-spacing:.01em;
  background:linear-gradient(180deg,#ffd27a 0,#ff952f 40%,#f45b32 72%,#b8301a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;text-shadow:none;-webkit-text-stroke:1.5px #2a0d05;filter:drop-shadow(0 4px 0 #1a0606) drop-shadow(0 0 18px rgba(255,120,30,.45))}
.tot-tagline{text-transform:none;letter-spacing:0;font:600 clamp(16px,2.4vw,21px)/1.3 var(--body),sans-serif;color:#f3dfbf;text-shadow:0 1px 3px #000}
.tot-intro{max-width:860px;margin:18px auto;padding:18px 22px;border-radius:14px;background:rgba(24,9,33,.88);border:2px solid #c9893a;color:#f6e9d4;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tot-intro p{text-align:left;margin:0 0 10px;font-size:16px;line-height:1.55}
.tot-intro p:last-child{margin-bottom:0}
.tot-intro b{color:#ffc37a}
.tot-updated{color:#d9c39b;font-style:italic}
.tot-note{padding-left:12px;border-left:3px solid #ff952f}
.tot-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 6px}
.tot-chip{font:800 16px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;min-height:44px;border-radius:999px;border:2px solid #c9893a;background:#1e0b28;color:#fff0d2;cursor:pointer}
.tot-chip.is-on{background:linear-gradient(180deg,#ff8a3d,#e0461f);border-color:#ffd27a;color:#fff}
.tot-chip:focus-visible{outline:3px solid #39ff14;outline-offset:2px}
.tot-sub{margin:18px 4px 10px;font:800 21px/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#ffc37a;text-shadow:0 2px 0 #000}
.tot-region[hidden],.tot-group[hidden]{display:none}
.tot-kind{display:inline-block;margin:4px 0 2px;padding:3px 10px;border-radius:999px;font:700 12px/1.3 var(--body),sans-serif;letter-spacing:.04em;text-transform:uppercase;background:#3b1650;color:#fff0d2;border:1px solid #8e5bb0}
.tot-line{margin:6px 0 0;font-size:15px;line-height:1.45}
.tot-credit{margin:8px 0 0;font-size:13.5px;line-height:1.4;font-style:italic;opacity:.85}
.tot-more{text-wrap:balance;max-width:860px;margin:20px auto 30px;padding:14px 18px;border-radius:12px;background:rgba(24,9,33,.85);color:#f6e9d4;text-align:center}
.tot-more a{color:#ffc37a}
@media (max-width:700px){.tot-intro{padding:14px 16px}.tot-intro p{font-size:15.5px}}
/* v219: sign art replaces the .tot-main text title */
.tot-sign{margin:6px auto 6px;max-width:920px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.tot-sign img{display:block;width:100%;height:auto}
/* v220: "Neighborhoods" / "Trick-or-treat events" subheads styled like the region emblem titles (Spooky Emblem, weathered gold fill, same shadow stack) */
.tot-sub{margin:26px 4px 14px;font:850 clamp(20px,3.2vw,34px)/1.1 'Spooky Emblem',Georgia,serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:none;
  background-image:url('./brand/letter-weathering.svg'),linear-gradient(#fff3d9 12%,#ffe0a7 48%,#e5b974 100%);background-size:120px 60px,100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 #fff3d144) drop-shadow(0 1px 0 #573820) drop-shadow(0 2px 0 #100713) drop-shadow(0 3px 2px #0009)}
/* v221: tagline in the emblem lettering; intro box widened to the card grid and the three notes set side by side so the neighborhoods come up sooner */
.tot-title .tot-tagline{margin-top:4px;font:850 clamp(17px,2vw,26px)/1.15 'Spooky Emblem',Georgia,serif;letter-spacing:.5px;text-transform:uppercase;text-wrap:balance;text-shadow:none;
  background-image:url('./brand/letter-weathering.svg'),linear-gradient(#fff3d9 12%,#ffe0a7 48%,#e5b974 100%);background-size:120px 60px,100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 #fff3d144) drop-shadow(0 1px 0 #573820) drop-shadow(0 2px 0 #100713) drop-shadow(0 3px 2px #0009)}
.tot-intro{width:min(1300px,calc(100vw - 32px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:14px 0;padding:14px 20px;box-sizing:border-box}
.tot-intro p{font-size:15px;line-height:1.45;margin-bottom:8px}
@media (min-width:900px){.tot-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);gap:10px 22px}.tot-intro p{margin:0}.tot-intro p:first-child{grid-column:1/-1}}
@media (max-width:700px){.tot-intro{width:calc(100vw - 20px);padding:12px 13px}.tot-intro p{font-size:14.5px;line-height:1.42}}
/* v222: breathing room between the top-of-page pieces (date line, sign, tagline, info box, show chips) */
.page h1.tot-title,.tot-title{margin:30px auto 32px}
.tot-title .tot-sign{margin:22px auto 26px}
.tot-title .tot-tagline{margin-top:0}
.tot-intro{margin:0 0 32px}
.tot-filter{margin:0 auto 22px}
@media (max-width:700px){.page h1.tot-title,.tot-title{margin:22px auto 24px}.tot-title .tot-sign{margin:16px auto 18px}.tot-intro{margin:0 0 24px}.tot-filter{margin:0 auto 18px}}
.tot-intro{padding:18px 24px}
@media (min-width:900px){.tot-intro{gap:14px 26px}}
@media (max-width:700px){.tot-intro{padding:14px 15px}.tot-intro p{margin-bottom:12px}.tot-intro p:last-child{margin-bottom:0}}
