/* generated by build-urls/gen.py from index.html's inline styles; do not edit by hand */
:root { color-scheme: light; }
:root, :root[data-theme] { color-scheme: light !important; }
:root {
--x-navy: #0b2d52;
--x-navy-2: #164272;
--x-river: #2e86de;
--x-river-ink: #1a66c2;
--x-aqua: #14b8a6;
--x-sunrise: #ff8a3c;
--x-coral: #f0533f;
--x-coral-hover: #d9432f;
--x-blue: var(--x-river-ink);
--x-page: #f5f6f8;
--x-card: #ffffff;
--x-serif: Georgia, "Times New Roman", serif;
--x-max: 1200px;
}
html { scroll-behavior: smooth; background: var(--x-page); }
body { background: var(--x-page); color: var(--text-primary); }
.x-wrap { max-width: var(--x-max); margin: 0 auto; padding: 0 var(--gutter); }
.x-skip { position: absolute; left: -9999px; display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.x-skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--fill-primary-on); padding: 10px 14px; border-radius: var(--r-s); }
/* header */
.x-top { position: sticky; top: 0; z-index: 40; background: var(--mat-agent); backdrop-filter: var(--hark-blur); -webkit-backdrop-filter: var(--hark-blur); border-bottom: 1px solid var(--stroke-secondary); }
.x-top .x-wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.x-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: var(--tap); }
.x-logo svg { width: 52px; height: 34px; flex: none; }
.x-logo b { display: block; font: 700 21px/1 var(--sans); letter-spacing: 0.01em; color: light-dark(var(--x-navy), #f5f5f7); }
.x-logo small { display: block; font: var(--type-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; letter-spacing: 0.06em; }
.x-menu { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.x-menu a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-pill); font: var(--type-label); color: var(--text-primary); text-decoration: none; }
.x-menu a:hover { background: var(--hover-wash); }
.x-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--x-coral); color: #fff; font: var(--type-label); text-decoration: none; cursor: pointer; }
.x-cta:hover { background: var(--x-coral-hover); }
.x-ghost { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid currentColor; color: inherit; font: var(--type-label); text-decoration: none; }
.x-ghost:hover { background: var(--hover-wash); }
/* hero */
.x-hero { position: relative; color: #f5f5f7; background: var(--x-navy); overflow: visible; }
.x-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(19 40 74 / 0.88) 0%, rgb(19 40 74 / 0.55) 45%, rgb(19 40 74 / 0.1) 75%), linear-gradient(0deg, rgb(19 40 74 / 0.6), transparent 40%); }
.x-hero .x-wrap { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 64px; }
.x-hero__eyebrow { font: var(--type-tag); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; color: #ffd2a6; }
.x-hero h1 { font: 700 clamp(40px, 6vw, 68px)/1.02 var(--x-serif); margin: 0; max-width: 11ch; text-wrap: balance; }
.x-hero__sub { font: var(--type-lede); font-weight: var(--weight-regular); max-width: 34ch; margin: 18px 0 0; color: #f5f5f7e6; }
.x-hero__script { position: absolute; right: var(--gutter); bottom: 120px; z-index: 2; font: italic 400 clamp(20px, 2.4vw, 30px)/1.25 var(--x-serif); transform: rotate(-8deg); text-align: right; margin: 0; text-shadow: 0 2px 12px rgb(0 0 0 / 0.5); }
/* search panel */
.x-search { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 32px; max-width: 820px; padding: 8px; border-radius: var(--r-l); background: var(--fill-primary-on); color: var(--text-primary); box-shadow: var(--hark-shadow); }
.x-field { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: var(--r-m); }
.x-field + .x-field { border-left: 1px solid var(--stroke-primary); border-radius: 0; }
.x-field svg { width: 18px; height: 18px; flex: none; color: var(--text-secondary); }
.x-field input, .x-field select { flex: 1; min-width: 0; min-height: var(--tap); border: 0; background: transparent; color: inherit; font: var(--type-body); outline: none; }
.x-field select { cursor: pointer; }
.x-field:focus-within { box-shadow: inset 0 0 0 2px var(--x-river); border-radius: var(--r-s); }
/* category row */
.x-cats { display: flex; justify-content: space-between; gap: 8px; padding: 28px 0 8px; overflow-x: auto; scrollbar-width: none; }
.x-cat { flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; color: var(--text-primary); font: var(--type-label); cursor: pointer; border-radius: var(--r-m); }
.x-cat:hover { background: var(--hover-wash); }
.x-cat i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.14); transition: transform var(--dur-quick) var(--ease-out); }
.x-cat i svg { width: 26px; height: 26px; }
.x-cat[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--fill-primary-on), 0 0 0 5px var(--c); transform: scale(1.04); }
.x-cat[aria-pressed="true"] span { font-weight: var(--weight-bold); }
.x-cat small { font: var(--type-caption); color: var(--text-secondary); margin-top: -6px; }
/* sections */
.x-sec { padding: 48px 0 8px; scroll-margin-top: 72px; }
.x-sec__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.x-sec__head h2, .x-sec__head h1 { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--x-serif); margin: 0; color: light-dark(var(--x-navy), #f5f5f7); }
.x-sec__head p { font: var(--type-body); color: var(--text-secondary); margin: 6px 0 0; }
.x-more { display: inline-flex; align-items: center; min-height: var(--tap); font: var(--type-label); color: var(--x-blue); text-decoration: none; white-space: nowrap; }
.x-more:hover { text-decoration: underline; }
/* featured cards */
.x-feat { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: thin; }
.x-card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--fill-primary-on); border: 1px solid var(--stroke-primary); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / 0.05); }
.x-card__img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block; }
.x-card__body { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px; flex: 1; }
.x-card h3 { font: var(--type-body-strong); font-size: 16px; margin: 0; }
.x-card h3 a { display: flex; align-items: center; min-height: var(--tap); color: inherit; text-decoration: none; }
.x-card h3 a:hover { text-decoration: underline; }
.x-card__body > div { min-width: 0; }
.x-loc { display: flex; gap: 4px; align-items: baseline; font: var(--type-caption); color: var(--text-secondary); margin: 4px 0 0; }
.x-loc::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--x-coral); }
.x-card__info { grid-column: 1 / -1; font: var(--type-small); margin: 6px 0 0; color: var(--text-primary); }
.x-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; align-self: end; }
.x-tag { font: var(--type-tag); padding: 3px 9px; border-radius: 6px; background: var(--fill-tertiary); color: var(--text-primary); }
.x-tag--free { background: light-dark(#dff3e6, #173a26); color: light-dark(#1a6b3a, #8fe0ac); }
.x-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--stroke-primary); line-height: 1; align-self: start; }
.x-date em { font: 600 12px/1 var(--sans); font-style: normal; color: light-dark(#a8301d, #ff8f7a); letter-spacing: 0.06em; }
.x-date strong { font: 600 20px/1.1 var(--sans); margin-top: 2px; white-space: nowrap; }
.x-date strong.is-range { font-size: 15px; }
/* all events list */
/* calendar day strip (Preview, Oct 10): matches the site's button system */
.x-seg.x-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; padding: 0; background: transparent; }
.x-seg.x-cal button { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; border: 0; border-radius: var(--r-m); overflow: hidden; background-color: #fff; background-image: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%); color: var(--x-navy); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.x-seg.x-cal button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.x-seg.x-cal button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.x-cal__dow { display: block; padding: 6px 0 5px; background: rgba(11, 45, 82, .07); color: var(--x-navy); font: var(--type-caption); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.x-cal__num { display: block; padding: 8px 0 0; font: 700 26px/1 var(--x-serif); color: inherit; text-align: center; }
.x-cal__num.x-cal__num--all { font-size: 17px; line-height: 26px; white-space: nowrap; }
.x-cal__n { display: block; padding: 4px 4px 9px; font: var(--type-caption); color: var(--text-secondary); text-align: center; white-space: nowrap; }
.x-seg.x-cal button[aria-pressed="true"] { background: linear-gradient(180deg, #164272 0%, var(--x-navy) 100%); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.x-seg.x-cal button[aria-pressed="true"] .x-cal__dow { background: rgba(255, 255, 255, .12); color: #fff; }
.x-seg.x-cal button[aria-pressed="true"] .x-cal__n { color: rgba(255, 255, 255, .8); }
.x-seg.x-cal button.is-past:not([aria-pressed="true"]) { opacity: .5; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.x-seg.x-cal button:disabled { opacity: .4; cursor: default; transform: none; }
.x-tools:has(.x-cal) { flex-direction: column; align-items: stretch; }
@media (max-width: 420px) { .x-seg.x-cal { gap: 8px; } .x-cal__num { font-size: 24px; } .x-cal__num.x-cal__num--all { font-size: 15px; } }
.x-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.x-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--fill-tertiary); }
.x-seg button { min-height: var(--tap); min-width: var(--tap); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-primary); font: var(--type-label); cursor: pointer; }
.x-seg button[aria-pressed="true"] { background: var(--fill-primary-on); box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); }
.x-count { font: var(--type-small); color: var(--text-secondary); margin-left: auto; }
.x-reset { min-height: var(--tap); padding: 0 12px; border: 0; background: none; color: var(--x-blue); font: var(--type-label); cursor: pointer; }
.x-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stroke-primary); }
.x-row { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--stroke-secondary); align-items: start; }
.x-row h3 { font: var(--type-body-strong); font-size: 16px; margin: 0; }
.x-row p { margin: 4px 0 0; font: var(--type-small); }
.x-row .x-muted { color: var(--text-secondary); }
.x-row .x-tags { margin-top: 8px; }
.x-row .x-ghost { min-height: var(--tap); padding: 0 14px; font-size: 13px; color: var(--text-primary); background: var(--fill-primary-on); border-color: var(--stroke-primary); white-space: nowrap; }
.x-empty { padding: 32px 0; font: var(--type-body); color: var(--text-secondary); }
/* towns */
.x-towns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.x-town { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; border: 0; padding: 0; cursor: pointer; color: #fff; text-align: left; background: var(--x-navy); }
.x-town img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.x-town:hover img { transform: scale(1.05); }
.x-town::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(19 40 74 / 0.9), rgb(19 40 74 / 0.1) 60%); }
.x-town span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.x-town b { display: block; font: 600 18px/1.2 var(--sans); }
.x-town small { display: block; font: var(--type-caption); color: #f5f5f7e0; margin-top: 2px; }
.x-town em { position: absolute; top: 10px; right: 10px; z-index: 1; font: var(--type-tag); font-style: normal; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.92); color: var(--x-navy); }
.x-also { font: var(--type-small); color: var(--text-secondary); margin: 12px 0 0; }
.x-also button { min-height: var(--tap); border: 0; background: none; padding: 0 4px; color: var(--x-blue); font: var(--type-label); cursor: pointer; text-decoration: underline; }
/* new here + map */
.x-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.x-new { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; border-radius: var(--r-l); overflow: hidden; background: light-dark(#e9f0f8, #1b2534); }
.x-new img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.x-new div { padding: 28px 24px; align-self: center; }
.x-new h2 { font: 700 26px/1.15 var(--x-serif); margin: 0; color: light-dark(var(--x-navy), #f5f5f7); }
.x-new p { font: var(--type-body); margin: 12px 0 0; color: var(--text-secondary); }
.x-new .x-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.x-new .x-cta { background: var(--x-navy-2); }
.x-new .x-cta:hover { background: var(--x-navy); }
.x-map { position: relative; border-radius: var(--r-l); overflow: hidden; background: light-dark(#eef3ea, #1d2620); border: 1px solid var(--stroke-secondary); }
.x-map { display: flex; flex-direction: column; }
.x-map h2 { padding: 22px 24px 0; margin: 0; font: 700 24px/1.15 var(--x-serif); color: light-dark(var(--x-navy), #f5f5f7); }
.x-map__canvas { position: relative; flex: 1; aspect-ratio: 600 / 360; margin: 12px 0 8px; }
.x-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-map__note { margin: 0; padding: 0 24px 16px; font: var(--type-caption); color: var(--text-secondary); }
.x-map .land { fill: light-dark(#eef3ea, #1d2620); }
.x-map .sea { fill: light-dark(#b9d9ef, #17324a); }
.x-map .river { fill: none; stroke: light-dark(#9fcbe8, #2a5274); stroke-width: 7; stroke-linecap: round; }
.x-map .base { fill: light-dark(#d9e4cf, #2b3a2b); }
.x-map__soft { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font: italic 400 13px/1 var(--sans); color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.x-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-14px, -50%); display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); min-width: var(--tap); padding: 0 4px 0 0; border: 0; background: none; color: var(--text-primary); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; border-radius: var(--r-pill); }
.x-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 14px), -50%); padding: 0 0 0 4px; }
.x-pin svg { width: 28px; height: 28px; flex: none; }
.x-pin path { fill: var(--x-coral); stroke: #fff; stroke-width: 1.5; transition: transform var(--dur-quick) var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
.x-pin span { padding: 3px 7px; border-radius: var(--r-pill); background: var(--mat-agent); }
button.x-pin:hover path, button.x-pin:focus-visible path, .x-pin.is-on path { transform: scale(1.18); fill: var(--x-navy-2); }
.x-pin.is-on span { background: var(--x-navy-2); color: #fff; }
.x-pin.is-empty { cursor: default; color: var(--text-secondary); }
.x-pin.is-empty path { fill: #7d8796; }
/* newsletter band */
.x-band { margin-top: 56px; background-color: var(--x-navy); background-image: linear-gradient(100deg, var(--x-navy) 0%, var(--x-navy-2) 100%); color: #f5f5f7; }
.x-band .x-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.x-band__script { font: italic 400 clamp(28px, 3.4vw, 40px)/1.15 var(--x-serif); margin: 0; transform: rotate(-4deg); color: #ffd2a6; }
.x-band h2 { font: 700 26px/1.15 var(--x-serif); margin: 0; }
.x-band p { font: var(--type-body); margin: 8px 0 0; color: #f5f5f7cc; }
.x-sub { display: flex; gap: 8px; margin-top: 16px; max-width: 480px; }
.x-sub input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 0; font: var(--type-body); background: #fff; color: #1d1d1f; }
.x-sub input:focus { outline: 3px solid #ffd2a6; }
.x-sub .x-cta { min-height: 48px; }
.x-sub__msg { min-height: 1.3em; font: var(--type-small); margin: 10px 0 0; color: #ffd2a6; }
.x-perks { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 18px 0 0; font: var(--type-small); color: #f5f5f7e6; }
.x-perks li::before { content: "✓ "; color: #ffd2a6; }
/* footer */
.x-foot { padding: 28px 0 36px; font: var(--type-small); color: var(--text-secondary); }
.x-foot .x-wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.x-foot nav { display: flex; flex-wrap: wrap; gap: 4px; }
.x-foot nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; color: var(--text-primary); text-decoration: none; font: var(--type-label); }
.x-foot nav a:hover { text-decoration: underline; }
.x-foot p { margin: 0; }
/* phone bottom nav */
.x-tabbar { display: none; }
@media (max-width: 1000px) {
.x-feat { grid-auto-columns: calc((100% - 16px) / 2.3); }
.x-towns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-duo { grid-template-columns: minmax(0, 1fr); }
.x-menu li.x-hide-md { display: none; }
}
@media (max-width: 720px) {
.x-menu, .x-top .x-cta { display: none; }
.x-top .x-wrap { min-height: 60px; }
.x-hero .x-wrap { padding-top: 48px; padding-bottom: 32px; }
.x-hero h1 { font-size: 38px; max-width: 12ch; }
.x-hero__script { display: none; }
.x-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; }
.x-map__canvas { aspect-ratio: 600 / 520; }
.x-map__lejeune { display: none; }
.x-search .x-field:first-child { grid-column: 1 / -1; }
.x-field + .x-field { border-left: 0; }
.x-field { background: var(--fill-tertiary); border-radius: var(--r-pill) !important; }
.x-search .x-cta { grid-column: 1 / -1; }
.x-cats { justify-content: flex-start; padding-top: 20px; }
.x-cat { flex: 0 0 76px; }
.x-feat { grid-auto-columns: 82%; }
.x-row { grid-template-columns: auto minmax(0, 1fr); }
.x-row > .x-row__where, .x-row > .x-row__go { grid-column: 2; }
.x-count { margin-left: 0; width: 100%; }
.x-towns { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.x-town { scroll-snap-align: start; }
.x-new { grid-template-columns: 1fr; }
.x-new img { min-height: 0; aspect-ratio: 16 / 9; }
.x-band .x-wrap { grid-template-columns: 1fr; gap: 16px; }
.x-foot { padding-bottom: 104px; }
.x-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--mat-agent); backdrop-filter: var(--hark-blur); -webkit-backdrop-filter: var(--hark-blur); border-top: 1px solid var(--stroke-primary); }
.x-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; justify-content: center; font: var(--type-tag); color: var(--text-secondary); text-decoration: none; }
.x-tabbar a.is-on { color: var(--x-blue); }
.x-tabbar svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .x-town img, .x-cat i, .x-pin path { transition: none; } }
/* clickable cards + full list */
.x-card, .x-row { cursor: pointer; }
.x-card:hover { border-color: var(--stroke-secondary); box-shadow: var(--hark-shadow); }
.x-row h3 a { color: inherit; text-decoration: none; }
.x-row h3 a:hover { text-decoration: underline; }
.x-all[hidden], .x-feat[hidden], .x-bank { display: none; }
.x-all h3.x-dayhead { font: 700 22px/1.2 var(--x-serif); color: light-dark(var(--x-navy), #f5f5f7); margin: 20px 0 12px; }
.x-all h3.x-dayhead:first-child { margin-top: 4px; }
.x-all__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .x-all__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
.x-all__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.x-all .x-card { flex-direction: row; }
.x-all .x-card__img { width: 104px; aspect-ratio: auto; flex: none; }
.x-all .x-card__body { padding: 10px 12px; }
.x-all .x-tags { display: none; }
}
/* event sheet */
.x-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.x-sheet[hidden] { display: none; }
.x-sheet__bg { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); animation: x-fade var(--dur-quick) var(--ease-out); }
.x-sheet__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--fill-primary-on); color: var(--text-primary); border-radius: var(--r-l); box-shadow: var(--hark-shadow); animation: x-pop var(--dur-quick) var(--ease-out); }
.x-sheet__photo { position: relative; }
.x-sheet__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.x-sheet__x, .x-heart { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; cursor: pointer; }
.x-sheet__x { position: absolute; top: 12px; right: 12px; background: var(--mat-agent); color: var(--text-primary); backdrop-filter: var(--hark-blur); -webkit-backdrop-filter: var(--hark-blur); z-index: 1; }
.x-sheet__x svg, .x-heart svg { width: 20px; height: 20px; }
.x-sheet__body { padding: 20px 24px 24px; }
.x-sheet__top { display: flex; gap: 12px; align-items: start; justify-content: space-between; }
.x-sheet h2 { font: 700 26px/1.15 var(--x-serif); margin: 0; color: light-dark(var(--x-navy), #f5f5f7); }
.x-heart { flex: none; background: var(--fill-tertiary); color: var(--text-primary); }
.x-heart[aria-pressed="true"] { color: var(--x-coral); }
.x-heart[aria-pressed="true"] path { fill: currentColor; }
.x-sheet__facts { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font: var(--type-small); }
.x-sheet__facts dt { color: var(--text-secondary); }
.x-sheet__facts dd { margin: 0; }
.x-sheet__facts a { color: var(--x-blue); font: var(--type-label); display: inline-flex; align-items: center; min-height: var(--tap); }
.x-sheet__blurb { font: var(--type-body); margin: 14px 0 0; }
.x-sheet__tip { font: var(--type-small); margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--fill-tertiary); }
.x-sheet__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.x-sheet__btns .x-ghost { background: none; cursor: pointer; color: var(--text-primary); border-color: var(--stroke-primary); }
.x-sheet__msg { min-height: 1.3em; margin: 10px 0 0; font: var(--type-small); color: var(--text-secondary); }
@keyframes x-fade { from { opacity: 0; } }
@keyframes x-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes x-up { from { transform: translateY(100%); } }
@media (max-width: 720px) {
.x-sheet { align-items: flex-end; padding: 0; }
.x-sheet__panel { max-width: none; max-height: 90vh; max-height: 90dvh; border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: x-up; }
.x-sheet__body { padding: 16px var(--gutter) 24px; }
}
@media (prefers-reduced-motion: reduce) { .x-sheet__bg, .x-sheet__panel { animation: none; } }
/* add event, card hearts, forms, footer extras */
.x-add { background: none; cursor: pointer; color: var(--text-primary); border-color: var(--stroke-primary); white-space: nowrap; padding: 0 16px; }
@media (max-width: 720px) { .x-add { margin-left: auto; } }
.x-card { position: relative; }
.x-card__heart { position: absolute; top: 10px; right: 10px; z-index: 1; background: var(--mat-agent); backdrop-filter: var(--hark-blur); -webkit-backdrop-filter: var(--hark-blur); }
@media (max-width: 720px) { .x-all .x-card__heart { top: 6px; right: auto; left: 54px; } }
.x-form { display: grid; gap: 14px; margin-top: 16px; }
.x-ff label { display: block; font: var(--type-label); margin-bottom: 6px; }
.x-ff__opt { font: var(--type-small); color: var(--text-secondary); }
.x-ff input, .x-ff select, .x-ff textarea { box-sizing: border-box; width: 100%; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--stroke-primary); border-radius: var(--r-s); background: var(--fill-primary-on); color: var(--text-primary); font: var(--type-body); }
.x-ff input:focus, .x-ff select:focus, .x-ff textarea:focus { outline: 2px solid var(--x-river); outline-offset: 1px; }
.x-check { display: flex; gap: 10px; align-items: center; min-height: var(--tap); font: var(--type-small); }
.x-check input { width: 20px; height: 20px; flex: none; }
.x-form__send .x-cta { cursor: pointer; }
.x-legal-note, .x-form__note, .x-form__alt { font: var(--type-small); color: var(--text-secondary); margin: 0 0 10px; }
.x-form__note { margin: 10px 0 0; }
.x-form__alt { margin: 16px 0 0; }
.x-legal-note a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
.x-row h3 a { display: inline-flex; align-items: center; min-height: var(--tap); }
.x-foot__more { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.x-foot__link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-primary); font: var(--type-label); text-decoration: underline; }
.x-foot details summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; color: var(--text-primary); font: var(--type-label); }
.x-foot details p { max-width: 70ch; margin: 0 0 8px; }
.x-bh { margin-top: 12px; }
/* seasonal layer (shown by SEASONS config in the script) */
[data-season][hidden] { display: none !important; }
.x-ribbon { display: block; height: 32px; background: var(--x-season-bg, #1b1420); color: var(--x-season-fg, #ff8a3d); text-decoration: none; font: var(--type-small); font-weight: var(--weight-medium); }
.x-ribbon .x-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; white-space: nowrap; }
.x-ribbon svg { flex: none; width: 34px; height: 16px; }
.x-ribbon span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.x-ribbon b { font-weight: var(--weight-bold); }
.x-ribbon:hover b { text-decoration: underline; }
.x-ribbon:focus-visible { outline: 2px solid var(--x-season-fg, #ff8a3d); outline-offset: -2px; }
.x-menu .x-season a { gap: 6px; }
.x-menu .x-season svg { width: 18px; height: 18px; flex: none; color: var(--x-season-dark, #c4500f); }
.x-ribbon svg.x-ribbon__ic { width: 16px; height: 16px; }
.x-ribbon:not([href]) { cursor: default; }
.x-ribbon:not([href]):hover b { text-decoration: none; }
.x-sheet__checked { margin: 10px 0 0; font: var(--type-small); color: var(--text-secondary); }
a.x-cat { text-decoration: none; }
.x-hero__img { z-index: 0; }
.x-hero__night { position: absolute; top: 18px; right: var(--gutter); z-index: 3; width: 150px; height: 84px; color: #f5f5f7; opacity: 0.4; pointer-events: none; }
.x-hw-sub { font: var(--type-tag); font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-left: 8px; vertical-align: middle; }
.x-hw-soon { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stroke-primary); max-width: 720px; }
.x-hw-soon li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--stroke-secondary); }
.x-hw-soon b { font: var(--type-label); }
.x-hw-soon span { font: var(--type-small); color: var(--text-secondary); }
.x-hw-send { margin-top: 20px; background: none; cursor: pointer; color: var(--text-primary); border-color: var(--stroke-primary); }
@media (max-width: 720px) {
.x-ribbon .x-wrap { justify-content: flex-start; }
.x-top .x-menu.x-in-season { display: flex; margin-left: auto; }
.x-menu.x-in-season li:not(.x-season) { display: none; }
.x-menu .x-season a { padding: 0; width: var(--tap); justify-content: center; }
.x-menu .x-season a span { display: none; }
.x-ribbon, .x-ribbon .x-wrap { height: var(--tap); }
.x-in-season ~ .x-add { margin-left: 0; }
.x-hero__night { width: 110px; height: 62px; top: 10px; }
}
/* header, one line */
.x-top { background: rgba(255, 255, 255, .94); }
.x-top .x-wrap { gap: 14px; white-space: nowrap; }
.x-logo b { font: 800 20px/1 var(--sans); color: var(--x-navy); letter-spacing: 0.02em; }
.x-logo small { font: 500 9.5px/1 var(--sans); letter-spacing: 0.16em; color: #4a5568; margin-top: 4px; }
.x-logo svg { width: 56px; height: 34px; }
.x-menu { gap: 0; flex-wrap: nowrap; }
.x-menu a, .x-menu button { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 9px; border: 0; border-radius: var(--r-pill); background: none; font: 500 13px/1 var(--sans); color: #1f2937; text-decoration: none; white-space: nowrap; cursor: pointer; }
.x-menu a:hover, .x-menu button:hover { color: var(--x-blue); background: none; }
.x-iconbtn { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; color: var(--x-navy); cursor: pointer; }
.x-iconbtn svg { width: 19px; height: 19px; }
.x-addev { flex: none; padding: 0 18px; white-space: nowrap; }
@media (max-width: 1180px) { .x-menu li.x-hide-lg { display: none; } }
@media (max-width: 720px) {
.x-top .x-addev { display: inline-flex; padding: 0 14px; }
.x-iconbtn { margin-left: auto; }
.x-logo small { display: none; }
}
/* hero search pill + script */
.x-search { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0; padding: 6px 6px 6px 8px; border-radius: var(--r-pill); background: #fff; color: #1f2937; box-shadow: 0 10px 30px rgba(13, 45, 67, .22); }
.x-search .x-field { min-height: 46px; padding: 0 14px; }
.x-search .x-field + .x-field { border-left: 1px solid #e3e6eb; }
.x-search .x-field:focus-within { border-radius: var(--r-pill); }
.x-field--sel { position: relative; }
.x-field--sel select { appearance: none; -webkit-appearance: none; padding-right: 18px; font: 500 14px/1 var(--sans); color: #1f2937; }
.x-field--sel::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #4a5568; pointer-events: none; }
.x-search > .x-cta { min-height: 46px; padding: 0 28px; color: #fff; font-weight: 600; }
.x-hero__script { right: calc(var(--gutter) + 2vw); bottom: 96px; font: 700 clamp(24px, 2.8vw, 36px)/1.05 "Caveat", cursive; color: #fff; transform: rotate(-9deg); }
.x-hero__script svg { display: block; width: 100%; max-width: 260px; height: 26px; margin: 4px 0 0 auto; color: #ffb347; }
@media (max-width: 720px) {
.x-search { border-radius: var(--r-l); padding: 10px; gap: 8px; }
.x-search .x-field + .x-field { border-left: 0; }
}
/* category strip */
.x-catstrip { background: #fff; border-bottom: 1px solid #e8ebf0; }
.x-cats { justify-content: center; gap: 80px; padding: 22px 0 18px; }
.x-cat { flex: 0 0 auto; gap: 8px; padding: 6px 2px; color: #1f2937; font: 500 13px/1.2 var(--sans); white-space: nowrap; }
.x-cat[hidden] { display: none; }
.x-cat:hover { background: none; }
.x-cat i { width: 46px; height: 46px; background: var(--c); color: #fff; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(13, 45, 67, .2); }
.x-cat i svg { width: 22px; height: 22px; }
.x-cat:hover i { transform: translateY(-2px); }
.x-cat[aria-pressed="true"] i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 4px 12px rgba(13, 45, 67, .2); transform: none; }
.x-cat small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .x-cats { gap: 40px; } }
@media (max-width: 720px) { .x-cats { justify-content: flex-start; gap: 20px; padding: 18px 4px 14px; } }
/* section headings */
.x-sec__head { align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.x-sec__head > div { min-width: 0; }
.x-sec__head h2, .x-sec__head h1 { font: 700 clamp(26px, 3vw, 32px)/1.15 var(--x-serif); color: var(--x-navy); }
.x-sec__head p { font: 400 14px/1.4 var(--sans); color: #5b6472; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-more { flex: none; color: var(--x-blue); font: 600 14px/1 var(--sans); margin-left: auto; }
@media (max-width: 720px) { .x-sec__head p { white-space: normal; } .x-more { font-size: 13px; } }
/* featured cards + carousel */
.x-carousel { position: relative; }
.x-feat { gap: 20px; grid-auto-columns: calc((100% - 3 * 20px) / 4); padding: 6px 2px 20px; scrollbar-width: none; -ms-overflow-style: none; }
.x-feat::-webkit-scrollbar { display: none; }
.x-feat[hidden], .x-carousel:has(.x-feat[hidden]) .x-arrow { display: none; }
.x-fcard .x-fcard__media { position: relative; }
.x-fcard .x-card__img { aspect-ratio: 16 / 10; }
.x-fcard .x-date { position: absolute; left: 14px; bottom: -24px; z-index: 1; margin: 0; width: 54px; min-width: 0; height: 54px; padding: 0; gap: 2px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(13, 45, 67, .18); }
.x-fcard .x-date em { color: #e0312b; font-weight: 700; }
.x-fcard .x-date strong { font: 700 22px/1 var(--sans); color: #111827; margin: 0; }
.x-fcard .x-date strong.is-range { font-size: 15px; }
.x-fcard .x-card__body { display: flex; flex-direction: column; gap: 0; padding: 8px 14px 14px; }
.x-fcard h3, .x-fcard .x-loc { margin-left: 66px; }
.x-fcard h3 { font: 600 15px/1.3 var(--sans); color: #111827; }
.x-fcard h3 a { min-height: 36px; }
.x-fcard .x-loc { margin-top: 0; font: 400 12.5px/1.35 var(--sans); color: #5b6472; }
.x-fcard .x-loc::before { width: 12px; height: 12px; border-radius: 0; transform: none; align-self: center; background: #5b6472; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-6.8 8-13a8 8 0 0 0-16 0c0 6.2 8 13 8 13zm0-10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-6.8 8-13a8 8 0 0 0-16 0c0 6.2 8 13 8 13zm0-10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; }
.x-fcard .x-card__info { margin: 10px 0 0; font: 400 13px/1.4 var(--sans); color: #374151; }
.x-fcard .x-tags { margin-top: auto; padding-top: 12px; }
.x-fcard .x-card__heart { top: 10px; right: 10px; width: 38px; height: 38px; min-width: var(--tap); min-height: var(--tap); background-color: #fff; color: var(--x-navy); }
.x-fcard .x-card__heart svg { width: 18px; height: 18px; }
.x-arrow { position: absolute; right: -18px; top: calc(50% - 32px); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background-color: #fff; color: #111827; cursor: pointer; }
.x-arrow svg { width: 20px; height: 20px; }
@media (max-width: 1000px) { .x-feat { grid-auto-columns: calc((100% - 20px) / 2.3); } }
@media (max-width: 720px) {
.x-feat { grid-auto-columns: 82%; }
.x-arrow { right: 4px; }
.x-all .x-fcard { flex-direction: column; }
.x-all .x-fcard .x-card__img { width: 100%; aspect-ratio: 16 / 10; }
.x-all .x-fcard .x-card__body { padding: 8px 14px 14px; }
.x-all .x-fcard .x-tags { display: flex; }
.x-all .x-fcard .x-card__heart { top: 10px; right: 10px; left: auto; }
}
/* all-events list rows */
.x-list { border-top-color: #e3e6eb; }
.x-row { grid-template-columns: 72px minmax(0, 1.4fr) minmax(0, 1fr) auto; border-bottom-color: #e3e6eb; }
.x-row .x-date { box-sizing: border-box; width: 72px; min-width: 72px; height: 58px; margin: 0; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(13, 45, 67, .1); }
.x-row .x-date em { color: #e0312b; font-weight: 700; }
.x-row .x-date strong { color: #111827; }
.x-row .x-ghost { background: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%); color: var(--x-navy); border: 1px solid rgba(11, 45, 82, .2); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.x-row .x-ghost:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.x-row .x-ghost:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
@media (max-width: 720px) { .x-row { grid-template-columns: 72px minmax(0, 1fr); } }
/* halloween strip + hub grids */
.x-hwgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 4px 0 8px; }
.x-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; width: 100%; }
.x-tag--halloween { --t: #d9621f; }
@media (max-width: 1000px) { .x-hwgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .x-hwgrid { grid-template-columns: minmax(0, 1fr); } }
/* button depth */
.x-cta, .x-ghost, .x-seg button, .x-heart, .x-iconbtn, .x-arrow {
box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out);
}
.x-cta { background: linear-gradient(180deg, #f4664f 0%, var(--x-coral) 55%, #e1462f 100%); color: #fff; }
.x-cta:hover { background: linear-gradient(180deg, #ef5a44 0%, var(--x-coral-hover) 100%); }
.x-ghost, .x-seg button, .x-heart, .x-iconbtn, .x-arrow { background-image: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%); }
.x-ghost { background-color: #fff; color: var(--x-navy); border-color: rgba(11, 45, 82, .25); }
.x-seg { background: transparent; gap: 8px; padding: 0; }
.x-seg button { background-color: #fff; color: var(--x-navy); }
.x-seg button[aria-pressed="true"] { background: linear-gradient(180deg, #164272 0%, var(--x-navy) 100%); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.x-heart { background-color: #fff; color: var(--x-navy); }
.x-cta:hover, .x-ghost:hover, .x-seg button:hover, .x-heart:hover, .x-iconbtn:hover, .x-arrow:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.x-cta:active, .x-ghost:active, .x-seg button:active, .x-heart:active, .x-iconbtn:active, .x-arrow:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.x-new .x-cta { background: linear-gradient(180deg, #164272 0%, var(--x-navy) 100%); }
/* cards: white, instant, lift on hover */
.x-card { background: var(--x-card); border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(13, 45, 67, .08); opacity: 1 !important; animation: none !important; transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.x-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(13, 45, 67, .16); border-color: transparent; }
.x-heart svg { display: block; opacity: 1; }
/* category chips */
.x-tags { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.x-tag { --t: #5b6472; flex: none; white-space: nowrap; background: color-mix(in srgb, var(--t) 13%, #fff); color: color-mix(in srgb, var(--t) 72%, #000); font-weight: var(--weight-medium); }
.x-tag--music { --t: #e8455a; }
.x-tag--food { --t: #e8771f; }
.x-tag--markets { --t: #2e86de; }
.x-tag--outdoors { --t: #2e9a5f; }
.x-tag--kids { --t: #2f7fd0; }
.x-tag--arts { --t: #8145c7; }
.x-tag--military { --t: #0b2d52; }
.x-tag--water { --t: #1c9c99; }
.x-tag--festivals { --t: #e33a66; }
.x-tag--free { --t: #1a6b3a; background: #dff3e6; color: #1a6b3a; }
.x-card__heart { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .x-card { transition: none; } .x-card:hover { transform: none; } }
/* validation fixes: contrast, tap targets, header fit */
:root { --x-blue: var(--x-river-ink); }
.x-cta { background-color: #c9351f; background-image: linear-gradient(180deg, #d8402a 0%, #c0321d 100%); color: #fff; }
.x-cta:hover { background-color: #b02c19; background-image: linear-gradient(180deg, #c63621 0%, #a92916 100%); }
.x-new .x-cta, .x-seg button[aria-pressed="true"] { background-color: var(--x-navy); background-image: linear-gradient(180deg, #164272 0%, var(--x-navy) 100%); color: #fff; }
.x-cat small { display: none; }
.x-search { scroll-margin-top: 90px; }
.x-search--flash { box-shadow: 0 0 0 3px #ffb347, 0 10px 30px rgba(13, 45, 67, .22); }
.x-logo small { font-size: 12px; letter-spacing: 0.06em; }
.x-fcard h3 a { min-height: var(--tap); }
@media (max-width: 1000px) {
.x-logo small { display: none; }
.x-top .x-menu li.x-season { display: none; }
.x-top .x-menu.x-in-season { margin-left: auto; }
}
@media (max-width: 720px) {
.x-top .x-menu.x-in-season { display: none; }
.x-top .x-wrap { gap: 8px; }
.x-logo { gap: 6px; }
.x-logo svg { width: 40px; height: 26px; }
.x-logo b { font-size: 16px; }
}
@media (max-width: 440px) {
.x-addev__t { display: none; }
.x-top .x-addev { width: var(--tap); padding: 0; font-size: 20px; }
}
/* pass 1b: town tiles */
.x-towns { padding: 4px 2px 10px; }
.x-town { border-radius: var(--r-m); box-shadow: 0 6px 18px rgba(13, 45, 67, .18); }
.x-town::after { background: linear-gradient(0deg, rgba(10, 22, 44, .92) 0%, rgba(10, 22, 44, .55) 32%, rgba(10, 22, 44, 0) 62%); }
.x-town span { left: 14px; right: 14px; bottom: 12px; min-width: 0; }
.x-town b { font: 700 18px/1.2 var(--sans); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-town small { color: #fff; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
/* pass 1b: new to the area */
.x-new { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); background: light-dark(#EAF1F7, #1b2534); box-shadow: 0 2px 10px rgba(13, 45, 67, .08); }
.x-new > img { position: relative; z-index: 0; margin-right: -64px; width: calc(100% + 64px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%); }
.x-new > div { position: relative; z-index: 1; min-width: 0; padding: 28px 28px 28px 8px; }
.x-new h2 { font: 700 clamp(22px, 2.2vw, 27px)/1.18 var(--x-serif); }
.x-new p { max-width: 42ch; }
.x-new .x-btns { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
.x-new .x-btns > * { flex: none; white-space: nowrap; padding: 0 18px; }
.x-new .x-ghost { background: #fff; background-image: none; color: var(--x-navy); border: 1.5px solid rgba(11, 45, 82, .35); }
@media (max-width: 720px) {
.x-new > img { margin: 0 0 -48px; width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.x-new > div { padding: 0 20px 24px; }
}
/* pass 1b: map */
.x-map { color-scheme: light; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(13, 45, 67, .08); color: #1d1d1f; }
.x-map h2 { color: var(--x-navy); }
.x-map__canvas { margin: 12px 16px 0; border-radius: var(--r-m); overflow: hidden; background: #EEF2EC; }
.x-map .land { fill: #EEF2EC; }
.x-map .base { fill: #E1E8DB; }
.x-map .sea { fill: #CFE6F5; }
.x-map .river { stroke: #CFE6F5; stroke-width: 8; }
.x-map .river--thin { stroke-width: 5; }
.x-map__soft { color: #4f6a80; }
.x-pin { transform: translate(-8px, -50%); gap: 8px; padding: 0 2px 0 0; color: #1d1d1f; }
.x-pin svg { width: 16px; height: 21px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
.x-pin path { fill: #e0312b; }
.x-pin span { padding: 2px 6px; background: rgba(255, 255, 255, .85); font: 600 13px/1.2 var(--sans); }
button.x-pin:hover path, button.x-pin:focus-visible path, .x-pin.is-on path { fill: #b3231e; }
.x-pin.is-on span { background: #e0312b; color: #fff; }
.x-pin--base { cursor: default; }
.x-pin--base path { fill: var(--x-navy); }
.x-pin--base span { color: var(--x-navy); }
.x-pin.is-empty { color: #4b5563; }
.x-map__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px 24px; }
.x-map__note { padding: 0; color: #5b6472; }
.x-map__explore { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); background: #fff; color: var(--x-blue); font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(13, 45, 67, .18); transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.x-map__explore:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 45, 67, .22); }
@media (max-width: 720px) {
.x-map__canvas { aspect-ratio: 1 / 1; margin: 12px 12px 0; }
.x-map__foot { padding: 12px 12px 14px 16px; }
}
/* pass 1b: join band */
.x-band { position: relative; isolation: isolate; overflow: hidden; background: var(--x-navy); color: #fff; }
.x-band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.x-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 45, 82, .72); }
.x-band .x-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.1fr); gap: 32px; padding-top: 52px; padding-bottom: 52px; }
.x-band__links { display: flex; justify-content: space-between; gap: 8px; }
.x-band__links a, .x-band__links button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: var(--tap); padding: 6px 2px; border: 0; border-radius: var(--r-s); background: none; color: #fff; font: 500 13px/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.x-band__links a:hover, .x-band__links button:hover { background: rgba(255, 255, 255, .1); }
.x-band__links a:focus-visible, .x-band__links button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.x-band__links svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.x-band__script { font: 700 clamp(40px, 4.2vw, 56px)/1.02 "Caveat", cursive; color: #fff; transform: rotate(-6deg); text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.x-band__join { min-width: 0; }
.x-band h2 { font: 700 26px/1.15 var(--x-serif); color: #fff; }
.x-band__join > p { color: rgba(255, 255, 255, .88); max-width: 44ch; }
.x-bh { box-sizing: border-box; width: 100%; max-width: 420px; margin-top: 16px; padding: 4px; border-radius: 999px; background: #fff; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.x-bh iframe { display: block; width: 100% !important; min-width: 312px; max-width: none !important; border: 0; border-radius: 999px; }
.x-perks { gap: 10px 20px; margin-top: 18px; font: 500 13px/1.2 var(--sans); color: #fff; }
.x-perks li { display: inline-flex; align-items: center; gap: 6px; }
.x-perks li::before { content: none; }
.x-perks svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 1100px) {
.x-band .x-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.x-band__links { grid-column: 1 / -1; order: 3; max-width: 520px; }
}
@media (max-width: 720px) {
.x-band { margin-top: 40px; }
.x-band .x-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 40px; padding-bottom: 40px; }
.x-band__script { font-size: 44px; transform: rotate(-4deg); }
.x-band__links { order: 3; max-width: none; }
.x-band__links a, .x-band__links button { font-size: 12px; }
.x-band__links svg { width: 28px; height: 28px; }
.x-bh { max-width: none; }
}
/* pass 1b: footer */
.x-foot nav a { gap: 6px; }
.x-foot nav svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: light-dark(var(--x-navy), #f5f5f7); }
.x-foot__legal { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--stroke-secondary); font: var(--type-caption); color: var(--text-secondary); }
.x-foot__legal p { max-width: 90ch; overflow-wrap: anywhere; }
.x-foot__legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-primary); text-decoration: underline; }
.x-foot__legal a { min-width: var(--tap); justify-content: center; }
@media (max-width: 720px) {
.x-towns { grid-auto-columns: 66%; }
.x-town span { left: 12px; right: 12px; }
}
@media (max-width: 400px) {
.x-new > div { padding: 0 16px 22px; }
.x-new .x-btns { gap: 8px; }
.x-new .x-btns > * { padding: 0 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .x-cta, .x-ghost, .x-seg button, .x-heart, .x-iconbtn, .x-arrow { transition: none; } .x-cta:hover, .x-ghost:hover, .x-seg button:hover, .x-heart:hover, .x-iconbtn:hover, .x-arrow:hover { transform: none; } }
/* ===== pass 2: phone (max-width 640px) ===== */
.x-burger, .x-drawer, .x-m, .x-showall, .x-cat--phone { display: none; }
@media (max-width: 720px) {
.x-drawer { display: block; position: fixed; inset: 0; z-index: 85; visibility: hidden; transition: visibility 0s linear 220ms; }
.x-drawer.is-open { visibility: visible; transition-delay: 0s; }
.x-drawer__bg { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); opacity: 0; transition: opacity 220ms var(--ease-out); }
.x-drawer.is-open .x-drawer__bg { opacity: 1; }
.x-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(320px, 86vw); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px calc(20px + env(safe-area-inset-bottom)); background: #fff; color: #1f2937; box-shadow: -12px 0 32px rgba(13, 45, 67, .2); transform: translateX(100%); transition: transform 220ms var(--ease-out); }
.x-drawer.is-open .x-drawer__panel { transform: none; }
.x-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.x-drawer__head p { margin: 0; font: 700 20px/1 var(--x-serif); color: var(--x-navy); }
.x-drawer__x { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--x-navy); cursor: pointer; }
.x-drawer__x svg { width: 22px; height: 22px; }
.x-drawer__list { list-style: none; margin: 4px 0 18px; padding: 0; }
.x-drawer__list li { border-bottom: 1px solid #e8ebf0; }
.x-drawer__list a, .x-drawer__list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 4px; border: 0; background: none; color: #1f2937; font: 600 16px/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.x-drawer__list a:hover, .x-drawer__list button:hover { color: var(--x-blue); }
.x-drawer__hw { color: var(--x-season-dark, #b4500f) !important; }
.x-drawer__hw svg { width: 22px; height: 22px; flex: none; }
.x-drawer__add { width: 100%; min-height: 48px; margin-top: auto; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .x-drawer, .x-drawer__bg, .x-drawer__panel { transition: none; } }
@media (max-width: 640px) {
.x-d { display: none !important; }
.x-m { display: inline; }
/* header */
.x-ribbon .x-wrap { gap: 6px; }
.x-ribbon span { white-space: nowrap; }
.x-top { position: sticky; top: 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; }
.x-top .x-wrap { box-sizing: border-box; height: 58px; min-height: 0; max-height: 60px; gap: 8px; }
.x-top .x-menu, .x-top .x-menu.x-in-season, .x-top .x-addev, .x-top #find-btn { display: none !important; }
.x-logo { flex: 1 1 auto; min-width: 0; gap: 8px; }
.x-logo svg { width: 40px; height: 26px; }
.x-logo > span { display: block; min-width: 0; }
.x-logo b { font: 800 17px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap; }
.x-logo small { display: block; margin-top: 3px; font: 500 12px/1.1 var(--sans); letter-spacing: 0.01em; text-transform: none; color: #4a5568; white-space: nowrap; }
.x-burger { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--x-navy); cursor: pointer; }
.x-burger svg { width: 26px; height: 26px; }
.x-sec, main [id], #join, #about { scroll-margin-top: 72px; }
/* hero */
.x-hero .x-wrap { padding-top: 30px; padding-bottom: 26px; }
.x-hero__eyebrow { margin-bottom: 10px; }
.x-hero h1 { font: 700 30px/1.12 var(--x-serif); max-width: 15ch; }
.x-hero__sub { display: none; }
.x-search { display: flex; flex-wrap: wrap; gap: 10px; position: relative; margin-top: 18px; padding: 0; border-radius: 0; background: none; box-shadow: none; max-width: none; }
.x-search.x-search--flash { box-shadow: none; }
.x-search.x-search--flash .x-field:first-child { box-shadow: 0 0 0 3px #ffb347; }
.x-search .x-field { background: #fff; color: #1f2937; border-radius: var(--r-pill) !important; box-shadow: 0 6px 18px rgba(13, 45, 67, .22); }
.x-search .x-field:first-child { flex: 1 1 100%; min-height: 50px; padding: 0 54px 0 18px; }
.x-search .x-field:first-child > svg { display: none; }
.x-search .x-field:first-child input { font: 400 15px/1.2 var(--sans); }
.x-search .x-field:first-child input::placeholder { color: #6b7280; }
.x-search .x-search__go { position: absolute; top: 3px; right: 3px; width: var(--tap); height: var(--tap); min-height: 0; padding: 0; border-radius: 50%; background: none; background-image: none; color: #1f2937; box-shadow: none; }
.x-search .x-search__go:hover { transform: none; box-shadow: none; background: #f1f3f6; }
.x-search__ic { width: 22px; height: 22px; }
.x-search__t { display: none; }
.x-search .x-field--sel { flex: 0 1 auto; width: auto; min-width: 0; min-height: var(--tap); padding: 0 30px 0 14px; gap: 7px; }
.x-search .x-field--sel svg { width: 16px; height: 16px; color: #1f2937; }
.x-search .x-field--sel select { flex: 0 1 auto; width: auto; min-width: 0; field-sizing: content; padding-right: 0; font: 500 14px/1 var(--sans); text-overflow: ellipsis; }
.x-search .x-field--sel::after { right: 13px; }
}
.x-search__ic { display: none; }
@media (max-width: 640px) { .x-search__ic { display: block; } }
@media (max-width: 640px) {
/* category swipe row: ~4.5 circles visible */
.x-catstrip { overflow: hidden; }
.x-cats { justify-content: flex-start; gap: 0; padding: 16px 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.x-cat { flex: 0 0 calc(100% / 4.5); box-sizing: border-box; min-width: 0; padding: 6px 2px; font: 500 12px/1.2 var(--sans); scroll-snap-align: start; }
.x-cat > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.x-cat--phone { display: flex; }
.x-cats > a[href="#hub"] { order: 0; }
.x-cat--music { order: 1; }
.x-cat[data-cat="food"] { order: 2; }
.x-cat[data-cat="outdoors"] { order: 3; }
.x-cat[data-cat="kids"] { order: 4; }
.x-cat--more { order: 5; }
.x-cat[data-cat="community"] { order: 6; }
.x-cat[data-cat="free"] { order: 7; }
/* featured + halloween strip: compact rows */
.x-sec__head { align-items: baseline; gap: 12px; margin-bottom: 14px; }
.x-sec__head h2, .x-sec__head h1 { font-size: 24px; }
.x-more { min-width: var(--tap); justify-content: flex-end; color: var(--x-blue); font: 600 14px/1 var(--sans); }
.x-carousel .x-arrow { display: none; }
#feat { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 12px; overflow: visible; scroll-snap-type: none; padding: 2px 0 6px; }
#hw-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 2px 0 6px; }
#feat > .x-fcard, #hw-strip > .x-fcard {
display: grid; grid-template-columns: 88px 42px minmax(0, 1fr) 24px; grid-template-rows: auto auto 1fr;
grid-template-areas: "m d t h" "m d l l" "m g g g"; column-gap: 10px; row-gap: 0; align-items: start;
box-sizing: border-box; min-height: 108px; padding: 10px; background: #fff; border: 0; border-radius: 14px; box-shadow: 0 2px 12px rgba(13, 45, 67, .09); scroll-snap-align: none;
}
#feat > .x-fcard:hover, #hw-strip > .x-fcard:hover { transform: none; box-shadow: 0 2px 12px rgba(13, 45, 67, .09); }
#feat .x-fcard__media, #hw-strip .x-fcard__media, #feat .x-card__body, #hw-strip .x-card__body { display: contents; }
#feat .x-card__img, #hw-strip .x-card__img { grid-area: m; width: 88px; height: 88px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
#feat .x-date, #hw-strip .x-date { grid-area: d; position: static; box-sizing: border-box; width: 42px; height: 46px; margin: 0; padding: 0; border: 1px solid #e3e6eb; border-radius: 9px; box-shadow: none; background: #fff; }
#feat .x-date em, #hw-strip .x-date em { font-size: 12px; }
#feat .x-date strong, #hw-strip .x-date strong { font: 700 18px/1 var(--sans); }
#feat .x-date strong.is-range, #hw-strip .x-date strong.is-range { font-size: 12px; letter-spacing: -0.02em; }
#feat .x-fcard h3, #hw-strip .x-fcard h3 { grid-area: t; margin: -4px 0 0; font: 600 15px/1.25 var(--sans); }
#feat .x-fcard h3 a, #hw-strip .x-fcard h3 a { min-height: var(--tap); }
#feat .x-fcard .x-loc, #hw-strip .x-fcard .x-loc { grid-area: l; margin: -4px 0 0; min-width: 0; font: 400 12.5px/1.3 var(--sans); white-space: normal; overflow: visible; overflow-wrap: anywhere; display: block; }
#feat .x-fcard .x-loc::before, #hw-strip .x-fcard .x-loc::before { display: inline-block; vertical-align: -2px; margin-right: 3px; }
#feat .x-card__info, #hw-strip .x-card__info { display: none; }
#feat .x-tags, #hw-strip .x-tags { grid-area: g; margin: 6px 0 0; padding: 0; align-self: end; }
#feat .x-tags li:nth-child(n+3), #hw-strip .x-tags li:nth-child(n+3) { display: none; }
#feat .x-tag, #hw-strip .x-tag { font-size: 12px; padding: 2px 8px; }
#feat .x-card__heart, #hw-strip .x-card__heart { grid-area: h; position: static; justify-self: end; width: var(--tap); height: var(--tap); margin: -10px -10px 0 0; background: none; background-image: none; box-shadow: none; color: #4b5563; }
#feat .x-card__heart:hover, #hw-strip .x-card__heart:hover { transform: none; box-shadow: none; }
#feat .x-card__heart[aria-pressed="true"], #hw-strip .x-card__heart[aria-pressed="true"] { color: var(--x-coral); }
#feat .x-card__heart svg, #hw-strip .x-card__heart svg { width: 22px; height: 22px; }
/* all-events list: tight ~96px rows, first 8 then "Show all" */
.x-tools { margin-bottom: 10px; }
.x-list .x-listday { display: block; padding: 16px 0 6px; border-bottom: 1px solid #e3e6eb; font: 700 17px/1.2 var(--x-serif); color: var(--x-navy); }
.x-list .x-listday:first-child { padding-top: 6px; }
.x-list.is-clipped .x-later { display: none; }
.x-row { grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; align-items: start; }
.x-row .x-date { grid-row: 1 / span 2; width: 56px; min-width: 56px; height: 52px; }
.x-row .x-date strong.is-range { font-size: 14px; }
.x-row h3 { font: 600 15px/1.25 var(--sans); }
.x-row h3 a { min-height: var(--tap); margin: -6px 0; }
.x-row p { margin: 2px 0 0; font: 400 13px/1.35 var(--sans); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.x-row .x-muted, .x-row .x-tags, .x-row > .x-row__go, .x-row__where p:not(.x-loc) { display: none; }
.x-row > .x-row__where { grid-column: 2; min-width: 0; }
.x-row__where .x-loc { display: block; margin: 2px 0 0; font: 400 12.5px/1.35 var(--sans); }
.x-row__where .x-loc::before { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.x-showall:not([hidden]) { display: flex; justify-content: center; width: 100%; min-height: 46px; margin-top: 14px; font: 600 14px/1 var(--sans); }
/* join band: stacked, full-width embed, perks 2x2 */
.x-band .x-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 36px; padding-bottom: 36px; }
.x-band__links { display: none; }
.x-band__script { order: 1; font-size: 36px; }
.x-band__join { order: 2; width: 100%; }
.x-band h2 { font-size: 24px; }
.x-bh { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; padding: 4px; border-radius: 26px; overflow: hidden; }
.x-bh iframe { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.x-bh > div, .x-bh form { width: 100% !important; max-width: 100% !important; }
.x-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 18px; }
.x-perks li { min-width: 0; }
/* towns: 3 small tiles in view, swipe for the rest */
.x-towns { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 0 8px; scrollbar-width: none; }
.x-towns::-webkit-scrollbar { display: none; }
.x-town { aspect-ratio: 1 / 0.82; border-radius: 12px; box-shadow: 0 4px 12px rgba(13, 45, 67, .16); }
.x-town em { display: none; }
.x-town span { left: 8px; right: 8px; bottom: 7px; }
.x-town b { font: 700 13px/1.2 var(--sans); }
.x-town small { margin-top: 1px; font: 500 12px/1.3 var(--sans); }
.x-also { font-size: 13px; margin-top: 6px; }
}
@media (max-width: 720px) {
/* bottom tab bar: fixed, solid, safe-area; content padded above it */
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
.x-foot { padding-bottom: 28px; }
.x-tabbar { box-sizing: border-box; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--stroke-primary); box-shadow: 0 -4px 14px rgba(13, 45, 67, .08); }
.x-season-on .x-tabbar { border-top: 3px solid var(--x-season-ink); }
.x-season-on .x-tabbar a.is-on { color: var(--x-season-tab, var(--x-season-ink)); }
.x-tabbar a, .x-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 0; border: 0; background: none; color: #6b7280; font: 500 12px/1 var(--sans); text-decoration: none; cursor: pointer; transition: none; }
.x-tabbar a.is-on { color: var(--x-blue); font-weight: 600; }
.x-tabbar svg { width: 24px; height: 24px; }
.x-tabbar a:focus-visible, .x-tabbar button:focus-visible { outline: 2px solid var(--x-river); outline-offset: -2px; border-radius: 10px; }
}
.x-listday { display: none; }
.x-town small > span { position: static; left: auto; right: auto; bottom: auto; z-index: auto; }
/* pass 2 end */
/* fix pass: card body starts at the left edge, clearing the badge on the photo */
@media (min-width: 641px) {
.x-fcard .x-card__body, .x-all .x-fcard .x-card__body { padding: 30px 16px 16px; }
.x-fcard h3, .x-fcard .x-loc { margin-left: 0; }
.x-fcard .x-loc { width: 100%; box-sizing: border-box; }
.x-fcard h3 a { min-height: 0; padding: 12.5px 0; margin: -12.5px 0; }
.x-fcard .x-card__body > .x-tags { align-self: stretch; }
}
/* fix pass: chips left-aligned on every card and row */
.x-tags, .x-card .x-tags, .x-row .x-tags, #feat .x-tags, #hw-strip .x-tags, .x-hubgrid .x-tags, .x-all .x-tags { justify-content: flex-start; justify-self: stretch; text-align: left; }
.x-tag { text-align: left; }
/* fix pass: clock + time · cost line */
.x-time { display: flex; align-items: flex-start; gap: 6px; min-width: 0; margin: 6px 0 0; font: 400 13px/1.4 var(--sans); color: #374151; overflow-wrap: anywhere; }
.x-time svg { flex: none; width: 14px; height: 14px; margin-top: 2.5px; color: #5b6472; }
.x-time span { min-width: 0; }
.x-fcard .x-time + .x-loc { margin-top: 4px; }
.x-row p.x-time { margin-top: 4px; }
@media (max-width: 640px) {
#feat > .x-fcard, #hw-strip > .x-fcard { grid-template-rows: auto auto auto 1fr; grid-template-areas: "m d t h" "m d i i" "m d l l" "m g g g"; }
#feat .x-fcard .x-time, #hw-strip .x-fcard .x-time { grid-area: i; margin: -6px 0 0; font-size: 12.5px; line-height: 1.3; }
#feat .x-fcard .x-time svg, #hw-strip .x-fcard .x-time svg { width: 13px; height: 13px; margin-top: 1.5px; }
#feat .x-fcard .x-time + .x-loc, #hw-strip .x-fcard .x-time + .x-loc { margin: 3px 0 0; }
.x-row p.x-time { margin: 2px 0 0; }
}
/* fix pass: one line pumpkin for Halloween (white in the category circle, orange elsewhere) */
.x-menu .x-season svg.x-pumpkin { color: #c4500f; }
.x-drawer__hw svg.x-pumpkin { color: #b4500f; }
/* fix pass: hero script never touches the search pill */
@media (max-width: 1099.98px) { .x-hero__script { display: none; } }
@media (min-width: 1100px) {
.x-hero__script { bottom: 168px; max-width: 280px; pointer-events: none; }
.x-hero__script svg { max-width: 240px; }
}
/* round 2 · 1: join band, plain rounded embed box and a big bright script */
.x-band .x-bh { box-sizing: border-box; width: 100%; max-width: 460px; min-width: 0; padding: 8px; border-radius: 12px; background: #fff; overflow: visible; }
.x-band .x-bh iframe, .x-band .x-bh > div, .x-band .x-bh form { display: block; width: 100% !important; min-width: 280px !important; max-width: 100% !important; border: 0; border-radius: 8px; }
.x-band .x-band__script { font: 700 clamp(44px, 5vw, 72px)/1.05 "Caveat", cursive; color: #fff; opacity: 1; text-shadow: 0 2px 16px rgba(0, 0, 0, .4); overflow-wrap: break-word; }
@media (max-width: 640px) { .x-band .x-bh { max-width: 460px; } }
/* round 3: wider signup so the email placeholder shows in full */
.x-band .x-bh { max-width: 540px; }
.x-band .x-bh iframe, .x-band .x-bh > div, .x-band .x-bh form { width: 100% !important; min-width: 340px !important; max-width: 100% !important; }
.x-band .x-bh form, .x-band .x-bh > div > div { display: flex; flex-wrap: nowrap; gap: 8px; }
.x-band .x-bh input[type="email"], .x-band .x-bh input:not([type]), .x-band .x-bh input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; }
@media (min-width: 1101px) {
.x-band .x-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(540px, 1.3fr); }
}
@media (max-width: 639px) {
.x-band .x-bh { max-width: 100%; }
.x-band .x-bh iframe, .x-band .x-bh > div, .x-band .x-bh form { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}
/* round 2 · 2: New to the Area buttons always show in full */
.x-new .x-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.x-new .x-btns > * { flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap; overflow: visible; }
@media (max-width: 640px) { .x-new .x-btns { gap: 12px; } }
/* round 2 · 3: Halloween hub as its own view, Featured's 4-across grid */
.x-hub[hidden] { display: none !important; }
.x-hub__back { display: inline-flex; margin: 0 0 8px; }
#hw-groups, #hw-groups .x-hubgrid { width: 100%; }
#hw-groups .x-hubgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1100px) { #hw-groups .x-hubgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
#hw-groups .x-hubgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 2px 0 6px; }
#hw-groups .x-hubgrid > .x-fcard {
display: grid; grid-template-columns: 88px 42px minmax(0, 1fr) 24px; grid-template-rows: auto auto auto 1fr;
grid-template-areas: "m d t h" "m d i i" "m d l l" "m g g g"; column-gap: 10px; row-gap: 0; align-items: start;
box-sizing: border-box; min-height: 108px; padding: 10px; background: #fff; border: 0; border-radius: 14px; box-shadow: 0 2px 12px rgba(13, 45, 67, .09);
}
#hw-groups .x-hubgrid > .x-fcard:hover { transform: none; box-shadow: 0 2px 12px rgba(13, 45, 67, .09); }
#hw-groups .x-fcard__media, #hw-groups .x-card__body { display: contents; }
#hw-groups .x-card__img { grid-area: m; width: 88px; height: 88px; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
#hw-groups .x-date { grid-area: d; position: static; box-sizing: border-box; width: 42px; height: 46px; margin: 0; padding: 0; border: 1px solid #e3e6eb; border-radius: 9px; box-shadow: none; background: #fff; }
#hw-groups .x-date em { font-size: 12px; }
#hw-groups .x-date strong { font: 700 18px/1 var(--sans); }
#hw-groups .x-date strong.is-range { font-size: 12px; letter-spacing: -0.02em; }
#hw-groups .x-fcard h3 { grid-area: t; margin: -4px 0 0; font: 600 15px/1.25 var(--sans); }
#hw-groups .x-fcard h3 a { min-height: var(--tap); }
#hw-groups .x-fcard .x-time { grid-area: i; margin: -6px 0 0; font-size: 12.5px; line-height: 1.3; }
#hw-groups .x-fcard .x-loc { grid-area: l; margin: 3px 0 0; min-width: 0; font: 400 12.5px/1.3 var(--sans); white-space: normal; overflow: visible; overflow-wrap: anywhere; display: block; }
#hw-groups .x-card__info { display: none; }
#hw-groups .x-tags { grid-area: g; display: flex; margin: 6px 0 0; padding: 0; align-self: end; }
#hw-groups .x-tag { font-size: 12px; padding: 2px 8px; }
#hw-groups .x-card__heart { grid-area: h; position: static; justify-self: end; width: var(--tap); height: var(--tap); margin: -10px -10px 0 0; background: none; background-image: none; box-shadow: none; color: #4b5563; }
#hw-groups .x-card__heart[aria-pressed="true"] { color: var(--x-coral); }
#hw-groups .x-card__heart svg { width: 22px; height: 22px; }
}
/* round 2 · 4: chip rows wrap, chips never clip */
.x-tags, .x-card .x-tags, .x-row .x-tags, #feat .x-tags, #hw-strip .x-tags, #hw-groups .x-tags, .x-all .x-tags { flex-wrap: wrap; overflow: visible; white-space: normal; }
.x-tag { flex: none; max-width: 100%; overflow: visible; text-overflow: clip; white-space: nowrap; }
/* round 2 · 5: every Halloween chip is orange */
.x-tag.x-tag--halloween { background: #FFF0E5; color: #A84E0C; }
.x-tag.x-tag--season, #hw-strip .x-tag, #hw-groups .x-tag { background: var(--x-chip-bg, #FFF0E5); color: var(--x-chip-fg, #A84E0C); }
/* round 4 · 1: New to the Area stacks on phones, photo on top with its fade */
@media (max-width: 600px) {
.x-new { grid-template-columns: minmax(0, 1fr); }
.x-new > img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; margin: 0 0 -40px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
.x-new > div { align-self: start; padding: 0 20px 24px; }
.x-new .x-btns { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-left: 0; padding-left: 0; }
.x-new .x-btns > * { flex: 0 0 auto; }
}
@media (max-width: 400px) { .x-new > div { padding: 0 16px 22px; } }
/* round 4 · 2: band icon row, more room and labels wrap to two centred lines */
.x-band__links { flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 16px; }
.x-band__links a, .x-band__links button { flex: 1 1 72px; min-width: min-content; max-width: 132px; padding: 6px 0; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; }
@media (max-width: 720px) { .x-band__links { column-gap: 16px; } }
/* logo (2026): Boss's traced artwork as images; height fixed, width follows each file's ratio */
.x-logo img, .x-dlogo img, .x-flogo img { display: block; flex: none; width: auto; max-width: none; }
.x-top .x-logo { flex: none; gap: 0; }
.x-top .x-logo img { height: 64px; }
.x-top.x-logo-56 .x-logo img { height: 56px; }
.x-top.x-logo-48 .x-logo img { height: 48px; }
.x-top .x-fit-off { display: none !important; }
@media (min-width: 1001px) and (max-width: 1320px) {
.x-top .x-wrap { gap: 10px; }
.x-top .x-menu a, .x-top .x-menu button { padding: 0 6px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
.x-top .x-logo img, .x-top.x-logo-56 .x-logo img { height: 52px; }
}
@media (max-width: 720px) {
.x-top .x-logo img { height: 44px; }
}
@media (max-width: 640px) {
.x-top .x-logo { flex: 0 1 auto; }
}
@media (max-width: 379px) {
.x-top .x-logo img { height: 38px; }
}
/* drawer logo */
.x-dlogo { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.x-dlogo img { height: 40px; }
/* footer: stacked logo */
.x-flogo { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 20px; border-bottom: 1px solid var(--stroke-secondary); text-align: center; text-decoration: none; }
.x-flogo img { height: 120px; }
.x-flogo::after { content: ""; width: 36px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--x-aqua); }
/* phone tab bar motion */
@media (max-width: 720px) {
.x-tabbar a, .x-tabbar button { position: relative; -webkit-tap-highlight-color: transparent; transition: color .25s ease; }
.x-tabbar a svg, .x-tabbar button svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: 50% 60%; }
.x-tabbar a::before { content: ""; position: absolute; top: 4px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: 15px; background: currentColor; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.x-tabbar a.is-on::before { opacity: .12; transform: scale(1); }
.x-tabbar a.is-on svg { transform: translateY(-2px) scale(1.12); }
.x-tabbar a:active svg, .x-tabbar button:active svg { transform: scale(.86); transition-duration: .12s; }
}
@media (prefers-reduced-motion: reduce) {
.x-tabbar a, .x-tabbar button, .x-tabbar svg, .x-tabbar a::before { transition: none !important; }
}
/* header: menu button in the right corner on phones */
@media (max-width: 720px) {
.x-top .x-logo { margin-right: auto; }
.x-top .x-burger { margin-left: 4px; margin-right: -6px; }
}
/* tab icon animations (play on tap) */
.x-tabbar svg * { transform-box: view-box; }
.x-tabbar .t-door { transform-origin: 10px 17px; }
.x-tabbar .t-glow { opacity: 0; }
.x-tabbar .t-roof { transform-origin: 12px 10px; }
.x-tabbar .t-needle { transform-origin: 12px 12px; }
.x-tabbar .t-bldg { transform-origin: 12px 21px; }
.x-play[data-anim="home"] .t-door { animation: t-door 1s cubic-bezier(.22,1,.36,1); }
.x-play[data-anim="home"] .t-glow { animation: t-glow 1s ease; }
.x-play[data-anim="home"] .t-roof { animation: t-roof .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes t-door { 0% { transform: scaleX(1); } 35%, 60% { transform: scaleX(.18); } 100% { transform: scaleX(1); } }
@keyframes t-glow { 0%, 10% { opacity: 0; } 35%, 60% { opacity: .35; } 100% { opacity: 0; } }
@keyframes t-roof { 0% { transform: translateY(0); } 40% { transform: translateY(-1.6px); } 100% { transform: translateY(0); } }
.x-play[data-anim="events"] .t-dates { animation: t-dates .9s cubic-bezier(.65,0,.35,1); }
.x-play[data-anim="events"] .t-rings { animation: t-rings .5s ease 2; transform-origin: 12px 5px; }
@keyframes t-dates { 0% { transform: translateY(0); } 45% { transform: translateY(-11.1px); } 55% { transform: translateY(-11.1px); } 100% { transform: translateY(0); } }
@keyframes t-rings { 50% { transform: translateY(-1.2px); } }
.x-play[data-anim="map"] .t-needle { animation: t-needle 1.1s cubic-bezier(.34,1.3,.64,1); }
@keyframes t-needle { 0% { transform: rotate(0); } 60% { transform: rotate(400deg); } 80% { transform: rotate(350deg); } 100% { transform: rotate(360deg); } }
.x-play[data-anim="towns"] .t-b1 { animation: t-rise .7s cubic-bezier(.34,1.56,.64,1); }
.x-play[data-anim="towns"] .t-b2 { animation: t-rise .7s cubic-bezier(.34,1.56,.64,1) .12s backwards; }
.x-play[data-anim="towns"] .t-win { animation: t-win .9s ease .25s backwards; }
@keyframes t-rise { 0% { transform: scaleY(.2); opacity: .2; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes t-win { 0%, 30% { opacity: 0; } 60% { opacity: 1; stroke-width: 2.6; } 100% { opacity: 1; } }
.x-play[data-anim="more"] .t-dot { animation: t-dot .55s cubic-bezier(.34,1.56,.64,1); }
.x-play[data-anim="more"] .t-dot:nth-of-type(2) { animation-delay: .08s; }
.x-play[data-anim="more"] .t-dot:nth-of-type(3) { animation-delay: .16s; }
@keyframes t-dot { 40% { transform: translateY(-3.5px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .x-tabbar .x-play *, .x-tabbar [class^="t-"] { animation: none !important; } }
/* sheet fix 2026-10-09: sticky close, no iOS zoom, dvh */
.x-sheet__bar { position: sticky; top: 0; z-index: 3; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.x-sheet__bar .x-sheet__x { position: relative; top: 12px; right: 12px; pointer-events: auto; background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.x-sheet--form .x-sheet__bar { height: auto; padding: 8px 8px 4px; background: var(--fill-primary-on); border-bottom: 1px solid var(--stroke-primary); }
.x-sheet--form .x-sheet__bar .x-sheet__x { top: 0; right: 0; box-shadow: none; }
.x-form__btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.x-form__btns .x-ghost { background: none; cursor: pointer; color: var(--text-primary); border: 1px solid var(--stroke-primary); }
@media (max-width: 720px) { input, select, textarea, .x-ff input, .x-ff select, .x-ff textarea, .x-field input, .x-field select, .x-search .x-field:first-child input, .x-search .x-field--sel select, .x-field--sel select { font-size: 16px !important; } }
/* sheet fix 2 2026-10-09: no sideways pan on iPhone */
html { overflow-x: hidden; }
.x-sheet__panel { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.x-sheet input, .x-sheet select, .x-sheet textarea, .x-form input, .x-form select, .x-form textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.x-form input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; }
.x-form input[type=date]::-webkit-date-and-time-value { text-align: left; }
.x-ff { min-width: 0; max-width: 100%; }
/* ---- Pet of the Week ---- */
.x-pet { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 0; overflow: hidden; border-radius: var(--r-l); background: #fff; box-shadow: 0 6px 24px rgba(11,45,82,.10); }
.x-pet__media { position: relative; background: #F6EAD3; min-height: 220px; }
.x-pet__media img, .x-pet__media video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.x-pet__media--video { display: flex; align-items: center; justify-content: center; padding: 16px; }
.x-pet__media video, .x-pet__media img.x-pet__anim { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #E9E9EB; box-shadow: 0 4px 16px rgba(11,45,82,.12); }
@media (max-width: 720px) { .x-pet__media video, .x-pet__media img.x-pet__anim { max-height: 62vh; } }
.x-pet__badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; background: #0B2D52; color: #fff; font: var(--type-label); font-size: 13px; }
.x-pet__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.x-pet__name { font: 700 28px/1.1 var(--x-serif); color: #0B2D52; margin: 0; }
.x-pet__who { margin: 0; font: var(--type-small); color: var(--text-secondary); }
.x-pet__fact { margin: 0; font: var(--type-body); }
.x-pet__fact b { color: #C9351F; }
.x-pet__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.x-pet__btns .x-ghost { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--stroke-primary); background: #fff; color: #0B2D52; font: var(--type-label); cursor: pointer; }
.x-pet__btns svg { width: 18px; height: 18px; }
.x-pet__msg { min-height: 1.2em; margin: 0; font: var(--type-small); color: var(--text-secondary); }
.x-pet__cta { margin: 12px 0 0; font: var(--type-small); color: var(--text-secondary); }
.x-pet__cta a { color: #1A66C2; font-weight: 600; }
.x-ff input[type=file] { padding: 10px; min-height: 52px; background: #F7F9FC; }
.x-pet-prev { display: block; max-width: 100%; max-height: 180px; margin-top: 8px; border-radius: 10px; }
@media (max-width: 720px) {
.x-pet { grid-template-columns: 1fr; }
.x-pet__body { padding: 16px var(--gutter, 16px) 18px; }
.x-pet__name { font-size: 24px; }
}
/* weather alert bar (data in #wx-alert-data; hides itself after "until") */
.x-wx { display: block; background: #FFF4D6; color: #0B2D52; border-bottom: 1px solid #F2C14E; text-decoration: none; font-size: 14px; line-height: 1.35; }
.x-wx[hidden] { display: none; }
.x-wx .x-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 9px; padding-bottom: 9px; text-align: left; }
.x-wx svg { flex: none; width: 20px; height: 20px; color: #C9351F; }
.x-wx b { font-weight: 700; }
.x-wx u { text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 640px) { .x-wx { font-size: 13px; } .x-wx .x-wrap { justify-content: flex-start; gap: 8px; padding-top: 8px; padding-bottom: 8px; } }
/* forecast chips on event rows and Top Picks cards (NWS, filled in by the browser) */
.x-fc { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; padding: 0; list-style: none; }
.x-fc li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: #EEF5FC; color: #0B2D52; font-size: 12.5px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.x-fc li.is-wet { background: #E6F3F1; }
.x-fc li.is-storm { background: #FFF1E6; }
.x-fc svg { width: 16px; height: 16px; flex: none; }
.x-fc small { font-weight: 500; color: #44546a; font-size: 12px; }
.x-fc-note { margin-top: 4px; font-size: 13px; color: #44546a; }
/* audit fix 2026-10-11 */ .x-also button,.x-also .x-nb{white-space:nowrap}
.wxw { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg,#EEF5FB,#FFF6EC); border: 1px solid rgba(15,40,70,.08); }
.wxw__lbl { flex: none; display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; padding-right: 10px; border-right: 1px solid rgba(15,40,70,.12); }
.wxw__lbl b { font-size: 13px; color: #0B2D52; }
.wxw__lbl span { font-size: 11px; color: #1F4E79; }
.wxw__days { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; gap: 6px; min-width: 0; }
.wxw__day { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff; border-radius: 12px; padding: 6px 4px; box-shadow: 0 1px 4px rgba(15,40,70,.06); font-size: 13px; white-space: nowrap; }
.wxw__day b { font-size: 11.5px; font-weight: 700; color: #5B6B7B; text-transform: uppercase; letter-spacing: .03em; }
.wxw__day i { font-style: normal; font-size: 17px; line-height: 1; }
.wxw__day strong { font-size: 14px; color: #1d1d1f; }
.wxw__day em { font-style: normal; font-size: 11px; color: #1F4E79; }
.wxw__day.is-wet { background: #E3EEF8; } .wxw__day.is-wet em { font-weight: 700; }
@media (min-width: 721px) { .wxw { max-width: 620px; } }
.x-calbtn { margin-left: 8px; }
#wx-alert.is-warning { background: #B42318 !important; color: #fff !important; }
#wx-alert.is-warning * { color: #fff !important; }
.x-tot[hidden]{display:none!important}
.x-tot .x-map{margin-bottom:18px}
.x-tot .x-pin.is-soon path{fill:#7d8796}
.x-tot .x-pin.is-soon span{color:var(--text-secondary)}
.x-tot .x-pin b{font-weight:700;margin-left:4px;color:var(--x-coral)}
.x-tot .x-pin.is-on b{color:#fff}
.x-tot .x-pin.x-pin--left{transform:translate(calc(-100% + 8px),-50%)}
.x-tot .x-pin.is-soon{cursor:pointer}
#tot-filter,#tot-list,.tot-soon li{scroll-margin-top:96px}
.tot-soon li{transition:background .3s,border-color .3s}
.tot-soon li.is-flash{border-color:var(--x-coral)!important;border-style:solid!important;background:#ffe6d6!important;box-shadow:0 0 0 3px rgba(255,138,60,.35)}
.tot-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tot-item{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;padding:14px 16px;border:1px solid var(--stroke-secondary);border-radius:var(--r-l);background:var(--bg-primary,#fff)}
.tot-item .x-date{grid-row:1/span 4;align-self:start;position:static;width:48px;height:52px;margin:0;border:1px solid #e3e6eb;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}
.tot-item .x-date em{font:700 11px/1 var(--sans);font-style:normal;color:var(--x-coral);text-transform:uppercase}
.tot-item .x-date strong{font:700 20px/1.1 var(--sans);color:var(--x-navy)}
.tot-item h3{margin:0;font:600 16px/1.25 var(--sans);color:light-dark(var(--x-navy),#f5f5f7)}
.tot-item p{margin:0;font:400 14px/1.4 var(--sans);color:var(--text-secondary)}
.tot-item .tot-meta{color:var(--text-primary)}
.tot-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tot-acts a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--stroke-primary);font:600 13px/1 var(--sans);color:var(--text-primary);text-decoration:none}
.tot-acts a:first-child{background:var(--x-navy);border-color:var(--x-navy);color:#fff}
.tot-h3{margin:26px 0 10px;font:700 20px/1.2 var(--x-serif);color:light-dark(var(--x-navy),#f5f5f7)}
.tot-soon{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.tot-soon li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border:1px dashed var(--stroke-primary);border-radius:12px;font:400 14px/1.3 var(--sans)}
.tot-soon li span{color:var(--text-secondary);font-size:13px}
.tot-soon a{font-size:13px;color:var(--x-navy-2);white-space:nowrap;min-height:var(--tap);display:inline-flex;align-items:center}
.tot-empty{padding:12px 0;color:var(--text-secondary)}
.tot-foot{margin-top:16px;font:var(--type-caption);color:var(--text-secondary)}
.tot-clear{border:0;background:none;color:var(--x-navy-2);font:600 13px var(--sans);min-height:var(--tap);cursor:pointer;padding:0}
/* illustrated category art (Boss, Oct 10) */
.x-cat i.x-art { width: 64px; height: 64px; padding: 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(13, 45, 67, .18); }
.x-cat i.x-art img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.x-cat[aria-pressed="true"] i.x-art { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c), 0 4px 12px rgba(13, 45, 67, .18); }
@media (max-width: 640px) { .x-cat i.x-art { width: 54px; height: 54px; } }
/* Halloween dress-up: night-sky panels for the Halloween strip, hub and trick-or-treat map (Creepster: SIL OFL, Font Diner) */
@font-face { font-family: "Creepster"; src: url("/creepster.woff2") format("woff2"); font-display: swap; }
.x-season-halloween #holiday, .x-season-halloween #hub, .x-spooky, #tot {
--spk-ink: #F4ECFF; --spk-dim: #C9BEDF; --spk-orange: #FF8A3C; --spk-glow: rgba(255,138,60,.55);
position: relative; isolation: isolate; overflow: hidden; margin-top: 40px; padding: 30px 24px 150px; border-radius: 26px; color: var(--spk-ink);
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M0 0L118.0 0.0M0 0L109.0 45.2M0 0L83.4 83.4M0 0L45.2 109.0M0 0L0.0 118.0M24.0 0.0Q18.8 3.7 20.4 8.4Q16.0 10.7 17.0 17.0Q10.7 16.0 8.4 20.4Q3.7 18.8 0.0 24.0M48.0 0.0Q37.7 7.5 40.8 16.9Q31.9 21.3 33.9 33.9Q21.3 31.9 16.9 40.8Q7.5 37.7 0.0 48.0M74.0 0.0Q58.1 11.5 62.9 26.1Q49.2 32.9 52.3 52.3Q32.9 49.2 26.1 62.9Q11.5 58.1 0.0 74.0M100.0 0.0Q78.5 15.6 85.0 35.2Q66.5 44.4 70.7 70.7Q44.4 66.5 35.2 85.0Q15.6 78.5 0.0 100.0%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.32%22 stroke-width=%221%22/%3E%3Cpath d=%22M62 0v40%22 stroke=%22%23fff%22 stroke-opacity=%22.35%22/%3E%3Cg transform=%22translate(62 44)%22 fill=%22%230a0d1c%22 stroke=%22%23fff%22 stroke-opacity=%22.5%22 stroke-width=%22.6%22%3E%3Cellipse rx=%224%22 ry=%225%22/%3E%3Cpath d=%22M-4-2l-6-4M-4 1l-7 0M-4 3l-6 5M4-2l6-4M4 1l7 0M4 3l6 5%22 fill=%22none%22/%3E%3C/g%3E%3C/svg%3E") left top / 120px 120px no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 140%22%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%2212%22 cy=%2218%22 r=%221%22 opacity=%22.7%22/%3E%3Ccircle cx=%2264%22 cy=%2242%22 r=%22.8%22 opacity=%22.5%22/%3E%3Ccircle cx=%22118%22 cy=%2212%22 r=%221.3%22 opacity=%22.8%22/%3E%3Ccircle cx=%22170%22 cy=%2258%22 r=%22.9%22 opacity=%22.55%22/%3E%3Ccircle cx=%22204%22 cy=%2222%22 r=%221%22 opacity=%22.6%22/%3E%3Ccircle cx=%2240%22 cy=%2296%22 r=%22.8%22 opacity=%22.45%22/%3E%3Ccircle cx=%2296%22 cy=%2278%22 r=%221.1%22 opacity=%22.6%22/%3E%3Ccircle cx=%22150%22 cy=%22118%22 r=%22.8%22 opacity=%22.45%22/%3E%3Ccircle cx=%22196%22 cy=%22100%22 r=%221.2%22 opacity=%22.65%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 140px repeat, radial-gradient(120% 80% at 50% 115%, rgba(255,138,60,.28), transparent 60%), linear-gradient(180deg, #0B2D52 0%, #1C1840 55%, #140F2C 100%);
box-shadow: 0 18px 40px rgba(11,45,82,.25);
}
.x-season-halloween #holiday::before, .x-season-halloween #hub::before, .x-spooky::before, #tot::before { content: ""; position: absolute; z-index: 0; right: 130px; bottom: 50px; width: 150px; height: 97px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 170 110%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%22.35%22 stop-color=%22%23FFB47A%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FF8A3C%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22m%22 cx=%22.38%22 cy=%22.35%22 r=%22.75%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFF6E6%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23F7E2C0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E9C99A%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx=%22120%22 cy=%2246%22 r=%2244%22 fill=%22url(%23g)%22/%3E%3Ccircle cx=%22120%22 cy=%2246%22 r=%2222%22 fill=%22url(%23m)%22/%3E%3Ccircle cx=%22113%22 cy=%2240%22 r=%224%22 fill=%22%23E2C493%22 opacity=%22.35%22/%3E%3Ccircle cx=%22127%22 cy=%2252%22 r=%225.5%22 fill=%22%23E2C493%22 opacity=%22.3%22/%3E%3Cg fill=%22%2307081a%22 opacity=%22.9%22%3E%3Cg transform=%22translate(58 30) scale(1.05)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3CanimateTransform attributeName=%22transform%22 type=%22scale%22 values=%221 1;1 .4;1 1%22 dur=%220.6s%22 repeatCount=%22indefinite%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(84 18) scale(0.75)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3CanimateTransform attributeName=%22transform%22 type=%22scale%22 values=%221 1;1 .4;1 1%22 dur=%220.5s%22 repeatCount=%22indefinite%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(40 48) scale(0.6)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3CanimateTransform attributeName=%22transform%22 type=%22scale%22 values=%221 1;1 .4;1 1%22 dur=%220.55s%22 repeatCount=%22indefinite%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; animation: spk-float 9s ease-in-out infinite; }
.x-season-halloween #holiday::after, .x-season-halloween #hub::after, .x-spooky::after, #tot::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 150px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 220%22%3E%3Cg transform=%22translate(200 0) scale(-1 1)%22%3E%3Cpath fill=%22%2307081a%22 d=%22M61.0 220.5Q65.8 187.8 60.4 162.5L72.6 161.7Q65.8 187.8 79.0 219.5ZM60.4 162.8Q64.8 143.1 58.3 126.2L66.6 125.2Q64.8 143.1 72.6 161.4ZM59.3 122.9Q68.1 115.8 77.4 104.6L81.6 108.4Q68.1 115.8 65.6 128.5ZM79.4 103.7Q87.4 107.2 95.8 104.2L95.9 108.0Q87.4 107.2 79.6 109.3ZM97.1 104.7Q100.2 110.4 104.7 112.1L103.0 114.1Q100.2 110.4 94.5 107.6ZM104.8 112.2Q107.3 115.1 109.7 117.6L108.5 118.9Q107.3 115.1 103.0 114.1ZM109.9 118.0Q109.4 120.3 111.1 122.5L109.9 122.9Q109.4 120.3 108.2 118.5ZM109.3 117.4Q111.7 118.9 114.2 119.1L113.9 120.3Q111.7 118.9 108.8 119.1ZM104.0 111.8Q106.9 113.5 110.7 113.0L110.5 114.8Q106.9 113.5 103.7 114.4ZM110.7 113.0Q113.3 113.9 115.1 113.9L115.0 115.1Q113.3 113.9 110.5 114.8ZM110.6 113.0Q113.5 113.9 115.7 113.5L115.6 114.7Q113.5 113.9 110.6 114.8ZM110.2 113.1Q112.7 113.1 114.1 111.4L114.7 112.5Q112.7 113.1 111.0 114.7ZM96.5 104.3Q101.2 107.4 105.8 108.7L104.9 111.1Q101.2 107.4 95.1 107.9ZM106.4 109.1Q108.1 112.2 110.3 114.9L108.8 116.0Q108.1 112.2 104.3 110.7ZM110.4 115.4Q109.5 117.7 110.8 120.0L109.6 120.2Q109.5 117.7 108.7 115.6ZM110.4 115.4Q109.2 118.3 110.7 120.5L109.5 120.6Q109.2 118.3 108.7 115.6ZM110.0 114.7Q112.2 116.7 114.6 117.4L114.1 118.5Q112.2 116.7 109.1 116.3ZM105.5 108.6Q108.7 110.2 112.4 109.8L112.2 111.5Q108.7 110.2 105.2 111.2ZM113.1 110.3Q113.0 112.4 114.8 114.4L113.7 114.9Q113.0 112.4 111.5 111.0ZM112.9 110.0Q113.9 112.3 116.1 113.4L115.2 114.2Q113.9 112.3 111.7 111.3ZM112.4 109.8Q114.8 110.9 116.9 110.2L116.8 111.5Q114.8 110.9 112.3 111.5ZM77.0 105.2Q83.4 100.6 85.3 91.4L88.7 93.2Q83.4 100.6 82.0 107.8ZM85.1 92.1Q87.0 86.3 87.1 80.5L89.7 80.8Q87.0 86.3 88.9 92.6ZM87.5 79.7Q91.6 78.0 94.0 73.9L95.2 75.2Q91.6 78.0 89.3 81.6ZM94.1 73.8Q97.5 73.0 99.3 70.4L100.0 71.3Q97.5 73.0 95.1 75.3ZM93.9 73.9Q96.0 72.0 98.2 69.9L99.1 70.7Q96.0 72.0 95.2 75.2ZM93.9 74.0Q96.0 71.5 98.3 68.9L99.2 69.6Q96.0 71.5 95.3 75.1ZM87.1 81.0Q86.3 76.7 85.0 72.5L86.7 72.0Q86.3 76.7 89.6 80.3ZM85.1 72.6Q84.7 68.9 83.0 66.4L84.2 66.0Q84.7 68.9 86.7 72.0ZM85.0 72.1Q85.9 69.0 86.8 65.5L88.0 65.7Q85.9 69.0 86.8 72.5ZM85.2 72.8Q83.4 70.6 81.8 68.4L82.7 67.6Q83.4 70.6 86.6 71.7ZM85.1 92.7Q85.5 86.8 83.9 82.2L86.5 81.8Q85.5 86.8 88.9 92.0ZM84.0 81.5Q86.1 78.4 87.2 74.7L88.8 75.4Q86.1 78.4 86.4 82.5ZM87.7 74.2Q91.1 74.3 93.0 72.6L93.4 73.7Q91.1 74.3 88.3 75.9ZM87.1 75.3Q87.8 72.1 86.3 69.9L87.5 69.7Q87.8 72.1 88.9 74.9ZM84.0 82.5Q84.3 78.1 81.6 75.4L83.2 74.8Q84.3 78.1 86.4 81.5ZM81.5 75.0Q83.2 72.7 82.7 70.1L83.9 70.3Q83.2 72.7 83.3 75.3ZM81.7 75.6Q81.3 72.9 79.1 71.0L80.1 70.4Q81.3 72.9 83.2 74.6ZM59.8 128.9Q53.0 117.7 42.3 112.6L45.9 108.2Q53.0 117.7 65.1 122.5ZM41.7 111.8Q40.6 103.3 34.2 97.6L37.5 95.6Q40.6 103.3 46.5 108.9ZM34.0 96.5Q35.3 91.8 35.3 85.9L37.9 86.0Q35.3 91.8 37.8 96.8ZM35.4 86.5Q34.8 82.1 32.6 79.2L34.3 78.5Q34.8 82.1 37.8 85.4ZM32.9 79.6Q31.9 77.3 29.0 76.4L29.7 75.4Q31.9 77.3 34.0 78.1ZM32.7 79.3Q31.7 76.4 30.5 74.5L31.6 73.9Q31.7 76.4 34.2 78.5ZM35.5 85.3Q39.3 83.0 40.1 78.4L41.7 79.3Q39.3 83.0 37.7 86.6ZM40.7 78.0Q44.1 77.9 46.2 77.0L46.4 78.2Q44.1 77.9 41.1 79.7ZM40.1 78.4Q42.4 76.3 43.3 73.4L44.3 74.0Q42.4 76.3 41.7 79.3ZM34.7 98.2Q29.9 93.7 25.6 90.4L27.2 88.3Q29.9 93.7 37.0 95.1ZM25.1 89.4Q25.8 84.6 24.7 80.4L26.4 80.2Q25.8 84.6 27.7 89.2ZM24.7 80.6Q23.9 77.5 22.7 74.9L23.9 74.5Q23.9 77.5 26.4 79.9ZM24.9 80.9Q23.4 77.5 20.7 75.8L21.6 75.0Q23.4 77.5 26.2 79.7ZM24.9 80.9Q22.8 78.0 20.5 76.2L21.4 75.3Q22.8 78.0 26.2 79.6ZM25.8 90.5Q23.5 87.1 18.2 86.2L19.0 84.6Q23.5 87.1 27.0 88.2ZM17.9 86.0Q15.8 82.9 14.0 81.6L14.8 80.7Q15.8 82.9 19.2 84.7ZM18.5 86.3Q15.6 85.7 12.6 85.7L12.6 84.5Q15.6 85.7 18.6 84.5ZM41.4 111.2Q41.0 103.9 37.4 95.5L41.0 94.4Q41.0 103.9 46.8 109.5ZM37.3 94.7Q40.8 89.5 39.3 84.7L41.9 85.1Q40.8 89.5 41.1 95.2ZM39.6 84.0Q42.3 82.2 44.8 79.4L46.0 80.7Q42.3 82.2 41.5 85.8ZM45.2 79.2Q47.4 79.7 50.2 78.3L50.5 79.5Q47.4 79.7 45.6 80.9ZM44.9 79.3Q47.5 78.9 49.2 76.9L49.8 78.0Q47.5 78.9 45.9 80.8ZM39.4 85.5Q38.7 81.6 36.0 78.9L37.6 78.0Q38.7 81.6 41.7 84.2ZM36.3 79.2Q34.6 77.2 31.9 75.8L32.6 74.8Q34.6 77.2 37.3 77.7ZM36.3 79.2Q34.2 76.8 32.4 76.3L33.0 75.3Q34.2 76.8 37.3 77.7ZM37.3 95.1Q38.6 88.9 36.9 84.4L39.5 84.1Q38.6 88.9 41.1 94.7ZM37.1 85.0Q35.1 80.8 33.0 77.8L34.5 76.9Q35.1 80.8 39.3 83.5ZM32.9 77.2Q33.8 75.0 33.9 72.1L35.1 72.3Q33.8 75.0 34.6 77.5ZM32.8 77.3Q33.6 73.8 33.5 71.1L34.7 71.1Q33.6 73.8 34.6 77.4ZM33.0 77.9Q31.3 74.6 29.8 73.0L30.8 72.3Q31.3 74.6 34.5 76.8ZM36.9 84.5Q38.2 80.4 35.5 76.7L37.3 76.3Q38.2 80.4 39.4 84.0ZM35.7 77.0Q34.0 73.9 32.5 71.7L33.5 71.0Q34.0 73.9 37.2 76.0ZM35.7 77.0Q34.8 74.4 33.0 72.4L34.0 71.8Q34.8 74.4 37.2 76.0ZM35.5 76.3Q36.8 73.6 36.8 70.9L38.0 71.1Q36.8 73.6 37.3 76.6ZM60.4 161.9Q66.1 145.3 63.5 122.9L71.8 123.1Q66.1 145.3 72.6 162.3ZM64.3 120.5Q76.5 112.5 80.3 102.1L84.8 105.5Q76.5 112.5 70.9 125.6ZM82.3 101.0Q92.3 102.0 98.9 100.5L99.2 104.3Q92.3 102.0 82.8 106.6ZM98.1 100.8Q105.4 98.8 108.9 94.9L110.2 97.1Q105.4 98.8 100.1 104.1ZM109.9 94.8Q114.1 96.8 118.3 97.8L117.8 99.5Q114.1 96.8 109.2 97.3ZM118.7 98.0Q120.7 101.0 122.9 102.3L122.1 103.2Q120.7 101.0 117.5 99.3ZM118.1 97.8Q121.2 98.5 123.7 97.9L123.7 99.1Q121.2 98.5 118.1 99.6ZM118.5 97.9Q120.6 100.0 123.8 101.2L123.2 102.2Q120.6 100.0 117.6 99.4ZM109.4 94.7Q114.5 95.7 118.1 94.4L118.2 96.2Q114.5 95.7 109.7 97.3ZM117.8 94.5Q121.2 93.8 124.2 92.5L124.7 93.6Q121.2 93.8 118.4 96.1ZM118.2 94.4Q120.9 95.2 124.6 95.4L124.5 96.6Q120.9 95.2 118.0 96.2ZM117.7 94.5Q120.9 93.8 122.8 91.8L123.4 92.8Q120.9 93.8 118.6 96.1ZM98.8 100.5Q105.4 102.4 109.8 99.4L110.2 102.0Q105.4 102.4 99.4 104.3ZM110.8 99.6Q113.7 103.1 116.9 104.1L116.0 105.6Q113.7 103.1 109.3 101.8ZM117.3 105.0Q116.7 107.7 116.5 110.1L115.3 110.0Q116.7 107.7 115.6 104.8ZM116.4 104.0Q119.4 104.9 122.0 103.8L122.1 105.0Q119.4 104.9 116.5 105.7ZM116.4 104.0Q119.6 104.6 122.3 103.7L122.4 104.9Q119.6 104.6 116.5 105.7ZM110.1 99.4Q113.1 100.8 118.0 100.5L117.9 102.2Q113.1 100.8 109.9 102.0ZM118.6 100.7Q120.3 103.0 122.2 104.6L121.4 105.5Q120.3 103.0 117.4 102.0ZM118.6 100.7Q120.3 103.2 122.2 104.4L121.4 105.3Q120.3 103.2 117.4 102.0ZM118.3 100.5Q120.3 102.6 123.1 103.0L122.6 104.1Q120.3 102.6 117.6 102.2ZM80.0 102.5Q87.3 96.0 88.3 88.9L91.7 90.7Q87.3 96.0 85.0 105.1ZM88.6 88.6Q94.4 85.2 95.9 81.1L97.9 82.8Q94.4 85.2 91.4 91.1ZM95.9 81.1Q100.1 79.0 101.1 75.6L102.5 76.8Q100.1 79.0 97.9 82.8ZM100.9 76.0Q102.2 73.6 102.2 71.3L103.4 71.6Q102.2 73.6 102.7 76.4ZM100.9 76.0Q101.9 73.4 102.3 71.1L103.5 71.4Q101.9 73.4 102.7 76.4ZM96.5 80.7Q100.3 80.5 103.9 78.6L104.4 80.3Q100.3 80.5 97.3 83.2ZM104.2 78.6Q106.1 79.4 109.0 79.4L108.9 80.6Q106.1 79.4 104.0 80.4ZM103.5 78.9Q105.4 77.6 107.3 75.3L108.2 76.1Q105.4 77.6 104.8 80.1ZM103.9 78.6Q106.6 78.6 109.2 77.3L109.6 78.4Q106.6 78.6 104.4 80.3ZM88.5 88.6Q94.1 84.5 96.5 79.3L98.5 80.9Q94.1 84.5 91.5 91.0ZM96.3 79.5Q99.0 75.9 100.7 72.5L102.3 73.4Q99.0 75.9 98.6 80.8ZM101.3 72.1Q104.1 72.9 106.7 71.4L106.9 72.6Q104.1 72.9 101.6 73.8ZM100.6 73.2Q100.9 70.0 99.2 67.9L100.4 67.5Q100.9 70.0 102.3 72.7ZM96.9 78.9Q101.6 78.0 104.3 75.8L105.1 77.4Q101.6 78.0 98.1 81.3ZM104.2 75.8Q107.2 74.9 109.2 73.4L109.8 74.4Q107.2 74.9 105.1 77.4ZM103.9 76.1Q105.9 74.3 107.4 71.8L108.4 72.5Q105.9 74.3 105.4 77.1ZM64.3 125.6Q60.1 112.2 49.4 104.1L53.9 100.7Q60.1 112.2 70.9 120.5ZM49.8 104.5Q44.3 96.0 37.7 92.5L40.3 89.6Q44.3 96.0 53.6 100.3ZM37.1 91.3Q38.3 84.3 35.8 78.4L38.4 78.0Q38.3 84.3 40.9 90.8ZM35.9 78.0Q38.1 72.8 38.1 68.2L39.9 68.5Q38.1 72.8 38.4 78.5ZM38.1 68.2Q38.8 64.4 39.4 60.5L40.6 60.6Q38.8 64.4 39.9 68.4ZM38.3 67.8Q41.5 65.7 42.1 62.5L43.1 63.2Q41.5 65.7 39.7 68.8ZM36.2 79.1Q32.8 74.7 29.8 71.4L31.1 70.2Q32.8 74.7 38.1 77.4ZM29.5 70.8Q30.0 67.1 30.1 64.0L31.3 64.1Q30.0 67.1 31.3 70.9ZM29.7 71.3Q27.8 67.2 26.2 65.0L27.2 64.4Q27.8 67.2 31.2 70.4ZM29.6 71.2Q29.3 67.9 26.9 65.4L28.0 64.8Q29.3 67.9 31.2 70.4ZM37.2 91.6Q38.1 85.3 34.1 79.3L36.6 78.6Q38.1 85.3 40.9 90.5ZM34.1 78.9Q36.5 74.5 34.9 70.3L36.7 70.4Q36.5 74.5 36.7 79.0ZM34.9 70.0Q36.7 67.6 37.3 64.0L38.5 64.4Q36.7 67.6 36.6 70.6ZM34.9 70.5Q35.4 66.7 33.6 64.0L34.8 63.7Q35.4 66.7 36.6 70.1ZM34.9 80.2Q30.8 77.9 27.5 76.5L28.2 74.9Q30.8 77.9 35.9 77.8ZM27.0 76.2Q26.5 72.8 24.3 71.0L25.3 70.4Q26.5 72.8 28.6 75.3ZM27.1 76.3Q26.0 73.1 23.6 71.8L24.5 71.0Q26.0 73.1 28.5 75.1ZM28.3 76.5Q25.7 77.3 23.7 78.9L23.1 77.9Q25.7 77.3 27.3 75.0ZM51.1 105.2Q42.9 99.7 32.3 100.1L33.1 96.4Q42.9 99.7 52.3 99.6ZM31.4 99.6Q27.5 93.7 22.2 90.0L24.1 88.1Q27.5 93.7 34.0 96.9ZM21.9 89.3Q23.5 85.0 21.0 81.1L22.8 80.8Q23.5 85.0 24.4 88.9ZM21.1 81.1Q21.3 77.6 20.2 75.1L21.3 74.8Q21.3 77.6 22.8 80.8ZM21.1 81.3Q20.5 78.9 19.4 76.4L20.6 76.0Q20.5 78.9 22.8 80.6ZM21.0 80.9Q22.8 78.1 21.6 74.7L22.8 74.8Q22.8 78.1 22.8 81.0ZM23.2 90.4Q19.5 89.8 14.6 90.3L14.6 88.5Q19.5 89.8 23.1 87.8ZM14.9 90.2Q11.3 90.3 9.0 92.1L8.6 91.0Q11.3 90.3 14.3 88.5ZM14.9 90.2Q11.8 90.2 9.6 92.0L9.1 90.9Q11.8 90.2 14.3 88.5ZM31.6 99.8Q27.6 94.0 20.8 91.4L22.3 89.3Q27.6 94.0 33.8 96.7ZM21.2 91.6Q17.0 89.8 11.9 89.0L12.3 87.3Q17.0 89.8 21.8 89.1ZM11.5 88.7Q10.2 86.0 6.8 83.7L7.6 82.9Q10.2 86.0 12.7 87.5ZM11.6 88.9Q8.2 86.6 5.6 84.9L6.3 83.9Q8.2 86.6 12.6 87.4ZM21.4 91.7Q16.6 90.2 12.5 90.6L12.6 88.8Q16.6 90.2 21.6 89.0ZM12.2 90.5Q8.8 88.1 6.0 87.6L6.5 86.5Q8.8 88.1 12.9 88.9ZM12.3 90.6Q9.9 89.0 6.8 88.6L7.1 87.5Q9.9 89.0 12.8 88.9ZM13.2 90.4Q10.1 91.5 8.1 94.6L7.3 93.7Q10.1 91.5 12.0 89.1Z%22/%3E%3Cpath fill=%22%2307081a%22 d=%22M40 220q16-10 21-28h18q5 18 23 28z%22/%3E%3C/g%3E%3C/svg%3E") right -10px bottom / 136px 150px no-repeat, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 40%22%3E%3Cg fill=%22%2307081a%22%3E%3Crect x=%220%22 y=%2216%22 width=%2224%22 height=%221.6%22/%3E%3Crect x=%220%22 y=%2233%22 width=%2224%22 height=%221.6%22/%3E%3Crect x=%225.3%22 y=%2210%22 width=%221.4%22 height=%2230%22/%3E%3Cpath d=%22M6 4l2 6.5H4z%22/%3E%3Crect x=%2217.3%22 y=%2212%22 width=%221.4%22 height=%2228%22/%3E%3Cpath d=%22M18 7l1.8 5.5h-3.6z%22/%3E%3C/g%3E%3C/svg%3E") 0 calc(100% - 22px) / 24px 40px repeat-x, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 100%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232a2152%22/%3E%3Cstop offset=%221%22 stop-color=%22%2315112e%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%230d0c22%22/%3E%3Cstop offset=%221%22 stop-color=%22%2307081a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22url(%23b)%22 d=%22M0 100V48C90 30 170 40 250 50S420 26 600 40V100Z%22/%3E%3Cpath fill=%22url(%23f)%22 d=%22M0 100V70C120 58 220 74 330 70S500 58 600 66V100Z%22/%3E%3C/svg%3E") center bottom / 100% 100px no-repeat; pointer-events: none; }
.x-season-halloween #holiday > *, .x-season-halloween #hub > *, .x-spooky > *, #tot > * { position: relative; z-index: 1; }
.x-season-halloween #holiday .x-sec__head :is(h1, h2), .x-season-halloween #hub .x-sec__head :is(h1, h2), .x-spooky .x-sec__head :is(h1, h2), #tot .x-sec__head :is(h1, h2), .x-season-halloween #holiday .tot-h3, .x-season-halloween #hub .tot-h3, .x-spooky .tot-h3, #tot .tot-h3, .x-season-halloween #holiday h3.x-dayhead, .x-season-halloween #hub h3.x-dayhead, .x-spooky h3.x-dayhead, #tot h3.x-dayhead { font-family: "Creepster", var(--x-serif); font-weight: 400; letter-spacing: .03em; color: var(--spk-orange); text-shadow: 0 0 14px var(--spk-glow), 0 2px 0 #3a1a05; }
.x-season-halloween #holiday .x-sec__head :is(h1, h2), .x-season-halloween #hub .x-sec__head :is(h1, h2), .x-spooky .x-sec__head :is(h1, h2), #tot .x-sec__head :is(h1, h2) { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.05; }
.x-season-halloween #holiday h3.x-dayhead, .x-season-halloween #hub h3.x-dayhead, .x-spooky h3.x-dayhead, #tot h3.x-dayhead, .x-season-halloween #holiday .tot-h3, .x-season-halloween #hub .tot-h3, .x-spooky .tot-h3, #tot .tot-h3 { font-size: 26px; border-color: rgba(255,255,255,.14); }
.x-season-halloween #holiday .x-sec__head p, .x-season-halloween #hub .x-sec__head p, .x-spooky .x-sec__head p, #tot .x-sec__head p, .x-season-halloween #holiday .x-also, .x-season-halloween #hub .x-also, .x-spooky .x-also, #tot .x-also, .x-season-halloween #holiday .tot-foot, .x-season-halloween #hub .tot-foot, .x-spooky .tot-foot, #tot .tot-foot, .x-season-halloween #holiday .x-map__note, .x-season-halloween #hub .x-map__note, .x-spooky .x-map__note, #tot .x-map__note, .x-season-halloween #holiday #tot-filter, .x-season-halloween #hub #tot-filter, .x-spooky #tot-filter, #tot #tot-filter { color: var(--spk-dim); }
.x-season-halloween #holiday .x-more, .x-season-halloween #hub .x-more, .x-spooky .x-more, #tot .x-more, .x-season-halloween #holiday .tot-clear, .x-season-halloween #hub .tot-clear, .x-spooky .tot-clear, #tot .tot-clear, .x-season-halloween #holiday .x-hw-soon a, .x-season-halloween #hub .x-hw-soon a, .x-spooky .x-hw-soon a, #tot .x-hw-soon a, .x-season-halloween #holiday .tot-soon a, .x-season-halloween #hub .tot-soon a, .x-spooky .tot-soon a, #tot .tot-soon a { color: #FFB27A; }
.x-season-halloween #holiday .x-hw-sub, .x-season-halloween #hub .x-hw-sub, .x-spooky .x-hw-sub, #tot .x-hw-sub { color: var(--spk-dim); text-shadow: none; font-family: var(--sans); }
.x-season-halloween #holiday .x-hw-soon, .x-season-halloween #hub .x-hw-soon, .x-spooky .x-hw-soon, #tot .x-hw-soon { border-color: rgba(255,255,255,.18); }
.x-season-halloween #holiday .x-hw-soon li, .x-season-halloween #hub .x-hw-soon li, .x-spooky .x-hw-soon li, #tot .x-hw-soon li { border-color: rgba(255,255,255,.12); }
.x-season-halloween #holiday .x-hw-soon b, .x-season-halloween #hub .x-hw-soon b, .x-spooky .x-hw-soon b, #tot .x-hw-soon b, .x-season-halloween #holiday .tot-soon b, .x-season-halloween #hub .tot-soon b, .x-spooky .tot-soon b, #tot .tot-soon b { color: var(--spk-ink); }
.x-season-halloween #holiday .x-hw-soon span, .x-season-halloween #hub .x-hw-soon span, .x-spooky .x-hw-soon span, #tot .x-hw-soon span, .x-season-halloween #holiday .tot-soon li span, .x-season-halloween #hub .tot-soon li span, .x-spooky .tot-soon li span, #tot .tot-soon li span { color: var(--spk-dim); }
.x-season-halloween #holiday .x-hw-send, .x-season-halloween #hub .x-hw-send, .x-spooky .x-hw-send, #tot .x-hw-send { color: var(--spk-ink); border-color: var(--spk-orange); background: rgba(255,138,60,.08); }
.x-season-halloween #holiday .x-hw-send:hover, .x-season-halloween #hub .x-hw-send:hover, .x-spooky .x-hw-send:hover, #tot .x-hw-send:hover { background: var(--spk-orange); color: #1C1840; }
/* cards: white, orange glow, a cobweb on the photo corner */
.x-season-halloween #holiday .x-card, .x-season-halloween #hub .x-card, .x-spooky .x-card, #tot .x-card, .x-season-halloween #holiday .tot-item, .x-season-halloween #hub .tot-item, .x-spooky .tot-item, #tot .tot-item { box-shadow: 0 0 0 1px rgba(255,138,60,.45), 0 10px 26px rgba(0,0,0,.35) !important; }
.x-season-halloween #holiday .x-card:hover, .x-season-halloween #hub .x-card:hover, .x-spooky .x-card:hover, #tot .x-card:hover { box-shadow: 0 0 0 2px var(--spk-orange), 0 0 24px var(--spk-glow), 0 12px 28px rgba(0,0,0,.4) !important; }
.x-season-halloween #holiday .x-card::after, .x-season-halloween #hub .x-card::after, .x-spooky .x-card::after, #tot .x-card::after { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 38px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M0 0L40 0M0 0L37 15M0 0L28 28M0 0L15 37M0 0L0 40M10 0Q8 4 9.3 3.8Q6 6 7 7Q4 6 3.8 9.3Q4 8 0 10M22 0Q18 7 20 8Q14 12 15.5 15.5Q12 14 8 20Q7 18 0 22M34 0Q29 10 31.5 12.8Q23 18 24 24Q18 23 12.8 31.5Q10 29 0 34%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%22.8%22/%3E%3C/svg%3E") 0 0 / contain no-repeat; pointer-events: none; opacity: .9; }
.x-season-halloween #holiday .x-tag--season, .x-season-halloween #hub .x-tag--season, .x-spooky .x-tag--season, #tot .x-tag--season { background: #1C1840 !important; color: #FFB27A !important; }
.x-season-halloween #holiday .x-date, .x-season-halloween #hub .x-date, .x-spooky .x-date, #tot .x-date { border-color: #FFC9A3 !important; }
/* the trick-or-treat map at night */
#tot .x-map { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
#tot .x-map { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(255,138,60,.12), 0 20px 40px rgba(0,0,0,.3); }
#tot .x-map__canvas { background: #1A1538; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.45); }
#tot .spk-sky { position: absolute; left: 4px; top: 4px; width: 46%; max-width: 240px; pointer-events: none; }
#tot .spk-web { position: absolute; right: 0; top: 0; width: 54px; height: 54px; pointer-events: none; }
#tot .spk-fog { animation: spk-fog 14s ease-in-out infinite alternate; }
@keyframes spk-fog { from { transform: translateX(-18px); } to { transform: translateX(22px); } }
#tot .x-pin svg { visibility: hidden; }
#tot .x-pin::after { content: ""; position: absolute; left: -4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205c1-2%202-3%204-3%22%20stroke%3D%22%233E7A2C%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2214%22%20rx%3D%2210.5%22%20ry%3D%228.5%22%20fill%3D%22%23F07A1E%22%20stroke%3D%22%23FFD9A8%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M12%206c-3%203-3%2013%200%2016M12%206c3%203%203%2013%200%2016M7%207.5c-3%204-3%2010%200%2013M17%207.5c3%204%203%2010%200%2013%22%20stroke%3D%22%23C4520F%22%20stroke-width%3D%22.9%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M6.5%2012l2.5-2.5%201.5%203zM17.5%2012l-2.5-2.5-1.5%203zM6.5%2016c2%202.5%209%202.5%2011%200l-2%20.6-1-1-1.2%201.2-1.3-1.2-1.3%201.2-1.2-1.2-1%201z%22%20fill%3D%22%23FFF07A%22/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 0 7px rgba(255,140,40,.85)); pointer-events: none; }
#tot .x-pin.x-pin--left::after { left: auto; right: -4px; }
#tot .x-pin.is-soon::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205c1-2%202-3%204-3%22%20stroke%3D%22%236F7A66%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2214%22%20rx%3D%2210.5%22%20ry%3D%228.5%22%20fill%3D%22%232A1F3D%22%20stroke%3D%22%23A99CC6%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M12%206c-3%203-3%2013%200%2016M12%206c3%203%203%2013%200%2016%22%20stroke%3D%22%23A99CC6%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%22.9%22%20fill%3D%22none%22/%3E%3C/svg%3E"); filter: none; width: 19px; height: 19px; margin-top: -9.5px; left: -1.5px; }
#tot .x-pin.is-soon.x-pin--left::after { left: auto; right: -1.5px; }
#tot .x-pin:not(.is-soon)::before { content: ""; position: absolute; left: 8px; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,40,.55), rgba(255,150,40,0) 70%); animation: spk-flicker 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes spk-flicker { 0%,100% { opacity: .55; transform: scale(.9); } 40% { opacity: 1; transform: scale(1.1); } 60% { opacity: .7; } }
#tot .x-map__soft { color: #FFB878; font-family: var(--x-serif); letter-spacing: .18em; text-transform: uppercase; font-size: 11px; font-style: italic; }
#tot .x-pin span { background: rgba(12,10,32,.82); color: #F4ECFF; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 12px rgba(0,0,0,.35); font-weight: 600; }
#tot .x-pin:not(.is-soon) span { border-color: rgba(255,138,60,.7); }
#tot .x-pin.is-soon span { color: #B8AED3; font-weight: 500; }
#tot .x-pin path { fill: var(--spk-orange); stroke: #FFE2C8; filter: drop-shadow(0 0 6px var(--spk-glow)); }
#tot .x-pin.is-soon svg { transform: scale(.72); transform-origin: 50% 100%; }
#tot .x-pin.is-soon path { fill: #1A1538; stroke: #B8AED3; stroke-width: 2; filter: none; }
#tot .x-pin.is-on span { background: var(--spk-orange); color: #1C1840; border-color: var(--spk-orange); }
#tot .x-pin b { color: #FF9E5E; }
#tot .x-pin.is-on b { color: #1C1840; }
@keyframes spk-pulse { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
#tot .tot-soon li { border-color: rgba(255,255,255,.28); }
#tot .tot-soon li.is-flash { background: #FFE6D6 !important; }
#tot .tot-soon li.is-flash b, #tot .tot-soon li.is-flash span, #tot .tot-soon li.is-flash a { color: #1C1840; }
@keyframes spk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes spk-flicker { 0%, 100% { filter: drop-shadow(0 -2px 4px rgba(255,138,60,.35)); } 45% { filter: drop-shadow(0 -3px 10px rgba(255,138,60,.7)); } 60% { filter: drop-shadow(0 -2px 6px rgba(255,138,60,.45)); } }
@media (max-width: 720px) {
.x-season-halloween #holiday, .x-season-halloween #hub, .x-spooky, #tot { margin-inline: calc(var(--gutter, 16px) * -1); border-radius: 0; padding: 26px var(--gutter, 16px) 130px; }
.x-season-halloween #holiday::before, .x-season-halloween #hub::before, .x-spooky::before, #tot::before { width: 120px; height: 78px; right: 96px; bottom: 50px; }
.x-season-halloween #holiday::after, .x-season-halloween #hub::after, .x-spooky::after, #tot::after { height: 124px; background-size: 109px 120px, 24px 40px, 100% 100px; }
.x-season-halloween #holiday .x-sec__head :is(h1, h2), .x-season-halloween #hub .x-sec__head :is(h1, h2), .x-spooky .x-sec__head :is(h1, h2), #tot .x-sec__head :is(h1, h2) { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.x-season-halloween #holiday::before, .x-season-halloween #hub::before, .x-spooky::before, #tot::before { animation: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 170 110%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%22.35%22 stop-color=%22%23FFB47A%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%23FF8A3C%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22m%22 cx=%22.38%22 cy=%22.35%22 r=%22.75%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFF6E6%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23F7E2C0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E9C99A%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx=%22120%22 cy=%2246%22 r=%2244%22 fill=%22url(%23g)%22/%3E%3Ccircle cx=%22120%22 cy=%2246%22 r=%2222%22 fill=%22url(%23m)%22/%3E%3Ccircle cx=%22113%22 cy=%2240%22 r=%224%22 fill=%22%23E2C493%22 opacity=%22.35%22/%3E%3Ccircle cx=%22127%22 cy=%2252%22 r=%225.5%22 fill=%22%23E2C493%22 opacity=%22.3%22/%3E%3Cg fill=%22%2307081a%22 opacity=%22.9%22%3E%3Cg transform=%22translate(58 30) scale(1.05)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(84 18) scale(0.75)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(40 48) scale(0.6)%22%3E%3Cg%3E%3Cpath d=%22M0 2.4C-1.2-.4-3.6-2-9.6-1.2c2.4 1 2.4 2.9 1.8 4.5 1.8-1.3 3.5-.8 4.5 1C-2.4 2.7-1.1 2.6 0 3.7 1.1 2.6 2.4 2.7 3.3 4.3c1-1.8 2.7-2.3 4.5-1C7.2 1.7 7.2-.2 9.6-1.2 3.6-2 1.2-.4 0 2.4z%22/%3E%3Ccircle cy=%22-.5%22 r=%221.5%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.x-season-halloween #holiday::after, .x-season-halloween #hub::after, .x-spooky::after, #tot::after { animation: none; }
#tot .spk-fog { animation: none; }
#tot .x-pin::before { animation: none !important; display: none; }
}
#tot #tot-canvas { aspect-ratio: 1328 / 800 !important; background: #0E1430; overflow: hidden; border-radius: 18px; box-shadow: 0 18px 40px rgba(10,12,40,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
#tot #tot-canvas::before, #tot #tot-canvas::after { display: none !important; }
#tot .tot-night { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#tot .x-pin svg { display: none !important; }
#tot .x-pin::after { content: "" !important; left: 0 !important; right: auto !important; width: 14px !important; height: 14px !important; margin-top: -7px !important; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF4D6 0 22%, #FFB347 45%, #E8761E 100%) !important; box-shadow: 0 0 0 3px rgba(255,190,110,.28), 0 0 14px 4px rgba(255,160,60,.75), 0 0 34px 10px rgba(255,140,40,.35); }
#tot .x-pin.x-pin--left::after { left: auto !important; right: 0 !important; }
#tot .x-pin:not(.is-soon)::before { display: block !important; content: ""; position: absolute; left: 7px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid rgba(255,190,110,.65); background: none; animation: totRing 2.4s ease-out infinite !important; }
#tot .x-pin.x-pin--left:not(.is-soon)::before { left: auto; right: 7px; margin: -22px -22px 0 0; }
#tot .x-pin.is-soon::after { width: 10px !important; height: 10px !important; margin-top: -5px !important; background: rgba(200,210,255,.18) !important; border: 1.5px solid rgba(214,222,255,.75); box-shadow: 0 0 10px rgba(190,205,255,.35); }
#tot .x-pin span { background: rgba(14,18,44,.62) !important; -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(255,255,255,.18) !important; color: #F2F4FF !important; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(0,0,0,.35) !important; }
#tot .x-pin:not(.is-soon) span { border-color: rgba(255,186,110,.75) !important; }
#tot .x-pin.is-soon span { color: #C6CCE8 !important; background: rgba(14,18,44,.5) !important; }
#tot .x-pin b { color: #FFC07A !important; }
#tot .x-pin.is-on span { background: #FFB347 !important; color: #1A1530 !important; }
#tot .x-pin.is-on b { color: #1A1530 !important; }
@keyframes totRing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tot .x-pin::before { animation: none !important; opacity: .5; } }
@media (max-width: 720px) { #tot .x-pin span { font-size: 11px !important; padding: 3px 7px !important; } #tot .x-pin.is-soon span { display: none; } #tot #tot-canvas { margin: 12px 0 0 !important; border-radius: 14px; } }
@media (max-width: 720px) {
.x-sec { padding-top: 30px; }
.x-sec__head { margin-bottom: 12px; }
.x-sec__head p { margin-top: 4px; }
/* Pet of the Week: shorter photo */
.x-pet__media { min-height: 0; }
.x-pet__media img:not(.x-pet__anim) { max-height: 280px; object-position: center 35%; }
.x-pet__media video, .x-pet__media img.x-pet__anim { max-height: 300px; }
/* trick-or-treat events: slimmer action buttons */
.tot-list { gap: 10px; }
.tot-acts { gap: 6px; }
.tot-acts a { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
/* Halloween night towns: compact two-column chips */
.tot-soon { grid-template-columns: 1fr 1fr; gap: 6px; }
.tot-soon li { padding: 9px 12px !important; min-height: 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; line-height: 1.2; }
.tot-soon li span, .tot-soon li br { display: none; }
.tot-soon li a { font-size: 0; flex: none; text-decoration: none; min-height: 28px !important; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; }
.tot-soon li a::after { content: "↗"; font-size: 14px; }
.tot-h3::after { display: block; margin-top: 4px; content: "Hours not announced yet. Tap a town for its official page."; font: 500 12px/1.3 var(--sans, system-ui); letter-spacing: 0; text-transform: none; opacity: .8; }
.tot-list li p:not(.tot-meta) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#events .x-sec__head p + p { display: none; }
/* holiday strip: swipe sideways instead of a tall stack */
.x-hwgrid { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 10px; margin: 0 -2px; }
.x-hwgrid::-webkit-scrollbar { display: none; }
.x-hwgrid > * { scroll-snap-align: start; flex: 0 0 84% !important; width: 84% !important; max-width: none !important; }
/* band + footer */
.x-band { margin-top: 28px; }
.x-band__script { font-size: 30px !important; }
.x-flogo img { height: 72px; width: auto; }
.x-foot { padding-top: 20px; }
.wxw { margin-top: 4px; }
}
.x-foot__explore { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 6px; font-size: 13px; line-height: 1.4; }
.x-foot__explore b { flex-basis: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.x-foot__explore a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }