@font-face{font-family:Jost;src:url('/assets/jost-400.woff2');font-weight:400;font-display:swap}@font-face{font-family:Jost;src:url('/assets/jost-500.woff2');font-weight:500;font-display:swap}@font-face{font-family:Jost;src:url('/assets/jost-600.woff2');font-weight:600;font-display:swap}@font-face{font-family:'Cormorant Garamond';src:url('/assets/cormorant.woff2');font-weight:600;font-display:swap}
:root{--navy:#0a1a2b;--navy2:#112b3d;--cream:#f7f3eb;--card:#fffcf6;--line:#d9d1c4;--gold:#d6b77a;--ink:#15212b;--muted:#596670}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 Jost,system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.55}a{color:inherit;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #629eb2;outline-offset:3px}[hidden]{display:none!important}.column{max-width:720px;margin:0 auto;padding-left:18px;padding-right:18px}header{background:var(--navy);color:var(--cream)}.header-inner{max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:18px}.logo img{display:block;width:120px;height:auto}.wide{display:none!important}nav{display:flex;gap:12px;align-items:center}.icon{border:0;background:transparent;font-size:28px;min-width:44px;min-height:44px;line-height:1}.avatar{border:0;border-radius:50%;background:var(--gold);color:var(--navy);width:44px;height:44px;font-weight:600}.hero{padding-top:0;padding-bottom:20px}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.1;font-weight:600}h1{font-size:30px;margin:0 0 16px}h2{font-size:27px;margin:0}h3{font-size:23px;margin:0 0 2px}.search{display:flex;align-items:center;gap:10px;border-radius:999px;background:var(--card);color:var(--muted);padding:8px 16px;min-height:48px}.search span{font-size:24px}.search input{border:0;outline:0;background:transparent;min-width:0;width:100%;color:var(--ink)}.sticky{position:sticky;top:0;z-index:5;background:var(--cream);border-bottom:1px solid var(--line);padding:10px 0}.tabs{display:flex;gap:4px;background:#ece5d8;border-radius:999px;padding:4px}.tabs button{border:0;background:none;border-radius:999px;min-height:44px;flex:1;padding:8px 14px;font-weight:500}.tabs button[aria-selected=true]{background:var(--navy);color:white}.filter-row{display:flex;gap:7px;overflow:auto;scrollbar-width:none;margin:12px 0 4px}.pill{min-height:44px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:var(--card);padding:8px 15px;font-size:14px}.pill[aria-pressed=true],.pill.active{background:var(--navy);color:white;border-color:var(--navy)}#active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px;font-size:13px;color:var(--muted)}.remove{border:1px solid #e2cc9e;border-radius:999px;background:#fcf4df;min-height:44px;padding:6px 10px}main{padding-top:16px;padding-bottom:30px}#status{color:var(--muted);font-size:14px;margin:0 0 8px}.day-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:22px 0 12px}.text-button{border:0;background:transparent;text-decoration:underline;min-height:44px;font-size:14px;font-weight:500}.card{display:block;text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:10px}.card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.time{font-weight:600;font-size:14px}.where{color:var(--muted);font-size:14px}.hook{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:21px;line-height:1.2;margin:6px 0 2px;padding-left:11px;border-left:3px solid var(--gold);color:var(--navy)}.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:12px;padding-top:10px;border-top:1px solid #ece4d6}.free{background:#e5f4e4;color:#1f5a2e;border:1px solid #bedcbd;border-radius:999px;font:400 12px Jost,system-ui;padding:2px 8px}.shelf{display:flex;overflow:auto;gap:10px;scroll-snap-type:x proximity;padding-bottom:8px}.shelf .card{flex:0 0 255px;scroll-snap-align:start}.anytime{margin:18px 0 22px}.anytime h3{font:500 15px Jost,system-ui;margin-bottom:8px}.anytime .card{flex-basis:210px}.empty{padding:24px;background:var(--card);border:1px dashed var(--line);border-radius:16px;color:var(--muted)}footer{color:var(--muted);font-size:12px;text-align:center;padding-top:24px;padding-bottom:28px;border-top:1px solid var(--line)}dialog{border:0;border-radius:24px 24px 0 0;background:var(--card);color:var(--ink);padding:0;width:min(720px,100%);max-width:100%;max-height:92dvh;margin:auto auto 0;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#0a1a2baa}.sheet-inner{padding:20px 20px 30px}.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.sheet-top h2{font-size:27px}.detail-title{font-size:32px;margin:12px 0 5px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.tag{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px}.opinion{background:#f0edff;color:#454078}.actions{display:flex;gap:8px;margin:18px 0}.actions button,.actions a{flex:1;text-align:center;min-height:54px;border:1px solid var(--line);border-radius:14px;padding:10px 8px;background:white;text-decoration:none}.body-copy{white-space:pre-line;font-size:16px}.facts{padding:16px;background:#f1ebdf;border-radius:16px;margin:18px 0}.facts h3{font:600 16px Jost,system-ui}.facts p{margin:8px 0}.primary{border:0;border-radius:999px;min-height:48px;background:var(--navy);color:white;padding:12px 22px;text-align:center;text-decoration:none;display:inline-block}.link-row{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}.secondary-link{border:1px solid var(--navy);border-radius:999px;min-height:48px;padding:11px 20px;text-align:center;text-decoration:none}.field{display:block;margin:18px 0}.field input,.field select{display:block;width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:10px;background:white;margin-top:8px}.choices{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}.bottom-actions{display:flex;gap:12px;align-items:center;margin-top:26px}.bottom-actions .primary{flex:1}.notice{background:#f1ebdf;border-radius:12px;padding:14px;color:var(--muted);font-size:14px}.calendar-option{display:block;width:100%;background:white;border:1px solid var(--line);border-radius:12px;min-height:52px;padding:14px;margin:10px 0;text-decoration:none;text-align:left}.fine{font-size:13px;color:var(--muted)}@media(min-width:800px){.header-inner{padding:18px 30px}.compact{display:none!important}.wide{display:block!important;width:300px!important}.hero{padding-top:12px;padding-bottom:28px}h1{font-size:38px}dialog{border-radius:22px;margin:auto;max-height:88vh}.sheet-inner{padding:28px}.card{padding:20px}}@media(min-width:960px){.column{max-width:1120px;padding-left:32px;padding-right:32px}.header-inner{max-width:1120px;padding:18px 32px}.search{max-width:640px}.sticky .column{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.tabs{flex:0 0 auto}.tabs button{min-width:130px}.filter-row{margin:0}#active-filters{flex-basis:100%}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.grid .card{margin:0;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}.grid .card .meta{margin-top:auto}.grid .card .hook{margin-bottom:12px}.grid .card:hover{box-shadow:0 6px 20px #0a1a2b1f;transform:translateY(-2px)}.day-heading{margin:34px 0 14px}footer.column{max-width:1120px}}@media(min-width:1280px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#sheet[data-mode=detail] .sheet-top{margin-bottom:4px}
#sheet[data-mode=detail] .sheet-top h2{font:500 12px Jost,system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#sheet[data-mode=detail] .detail-title{margin:0 0 8px;line-height:1.1}
.detail-hook{font-size:23px;margin:0 0 18px}
.info{margin:0 0 18px;background:white;border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.info div{display:flex;gap:14px;padding:11px 0}
.info div+div{border-top:1px solid var(--line)}
.info dt{flex:0 0 52px;font:500 12px Jost,system-ui;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.info dd{margin:0;font-weight:500;font-size:15px}
.info .addr{color:var(--muted);font-weight:400;font-size:14px}
.detail-cta{display:block;width:100%;margin:20px 0 10px}
.detail-actions{margin:0 0 14px}
.detail-actions button,.detail-actions a{min-height:46px;font-size:14px}
.report{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.detail-actions a{display:flex;align-items:center;justify-content:center}

.hook{white-space:nowrap;overflow:hidden}

/* Site review fixes, Nov 3 2026 */
.shelf .card,.anytime .card{flex:0 0 280px;width:280px;min-width:0}
.anytime{margin:26px 0 8px}.anytime .day-heading .fine{margin:0}
/* Swipe rows, Nov 3 2026: no scrollbar, whole cards only. Phones swipe with the next card peeking; desktop shows exactly three with arrows. */
.anytime .day-heading{align-items:flex-end}.anytime .day-heading .fine{margin:4px 0 0}
/* Category chips replace the By category tab (Nov 4 2026): one row under the date filters, several can be on at once. */
.cat-row{display:flex;gap:7px;overflow:auto;scrollbar-width:none;margin:8px 0 2px}.cat-row::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;border:1px solid #e0d3bb;border-radius:999px;background:var(--card);padding:6px 14px;font-size:14px;color:var(--ink)}
.chip[aria-pressed=true]{background:#f1e4c4;border-color:var(--gold);color:var(--navy);font-weight:500}
@media(min-width:960px){.cat-row{flex-basis:100%;margin:0}}
.shelf-wrap{position:relative}
.shelf{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:4px 18px 14px;scroll-padding:0 18px}
.shelf::-webkit-scrollbar{display:none}
.shelf .card,.anytime .card{flex:0 0 84%;width:auto;max-width:340px;min-width:0;margin:0;scroll-snap-align:start}
.shelf-arrow{display:none;position:absolute;top:calc(50% - 26px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--navy);box-shadow:0 4px 14px rgba(10,26,43,.12);font:400 28px/1 'Cormorant Garamond',Georgia,serif;align-items:center;justify-content:center;padding:0 0 3px;transition:opacity .15s,transform .15s}
.shelf-arrow:hover{transform:scale(1.06)}.shelf-arrow.prev{left:-26px}.shelf-arrow.next{right:-26px}
@media(min-width:700px){.shelf{margin:0 -28px;padding-left:28px;padding-right:28px;scroll-padding:0 28px;gap:14px}.shelf .card,.anytime .card{flex-basis:calc((100% - 14px)/2.15);max-width:none}}
@media(min-width:960px){.shelf{margin:0;padding:4px 0 14px;scroll-padding:0;gap:16px}.shelf .card,.anytime .card{flex-basis:calc((100% - 32px)/3)}.shelf .card{transition:box-shadow .15s,transform .15s}.shelf .card:hover{box-shadow:0 6px 20px #0a1a2b1f;transform:translateY(-2px)}}
@media(min-width:700px) and (hover:hover){.shelf-arrow{display:flex}}
@media(min-width:700px) and (max-width:959px){.shelf-arrow.prev{left:-14px}.shelf-arrow.next{right:-14px}}
/* Ticket cards, Nov 3 2026: time stub with notches, "What at Where" headline, one why-line, one quiet details line. */
/* Picture cards (Nov 4 2026): picture left, gold time line, one-line title, why-line, then venue, city and repeats. */
.card.pic,.grid .card.pic{display:flex;flex-direction:row;align-items:center;gap:14px;padding:10px;border-radius:14px}
.pic .p-img{flex:none;width:96px;height:96px;border-radius:10px;object-fit:cover;background:#ece5d8}
.pic .p-tile{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold);font-size:30px}
.pic .p-body{display:flex;flex-direction:column;min-width:0;flex:1}
.pic .p-eye{font:600 12px/1.3 Jost,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9a7a3c;margin-bottom:3px}
.pic .p-eye b{background:var(--gold);color:var(--navy);border-radius:5px;padding:1px 6px;margin-right:6px;font-weight:600}
.card.pic h3,.anytime .card.pic h3{font:600 22px/1.15 'Cormorant Garamond',Georgia,serif;color:var(--navy);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic .why{display:block;margin:2px 0 0;color:#5d6871;font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic .p-line{display:flex;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;align-items:center;margin-top:6px;font:500 12px/1.3 Jost,system-ui,sans-serif;color:#596670}
.pic .p-line>*{flex:none}.pic .p-line>:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Italic venue names lean past their box, so the last letter got shaved off ("Bass Performance Hal") with no "…". A little room on the right keeps every letter whole, and a long name still ends in "…" (final review, Nov 4 2026). */
.pic .p-line>i:first-child{padding-right:.25em;margin-right:-.1em}
.pic .p-line>*+*:before{content:"·";margin:0 6px;color:#c9b48a;font-style:normal}
.pic .p-free{color:#1f5a2e}.pic .p-rep{color:#8a6a2c}
.chip img{width:24px;height:24px;border-radius:50%;margin:-2px 7px -2px -8px;vertical-align:middle;object-fit:cover}
.shelf .card.pic h3{font-size:20px}
@media(min-width:1280px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.series-label{font:600 11px Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a7a3c;margin:4px 0 8px}
.series-dates{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.series-dates button{border:1px solid var(--line);border-radius:10px;background:white;padding:6px 10px;font:500 13px/1.25 Jost,system-ui,sans-serif;text-align:center;min-height:44px}
.series-dates button small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.series-dates button.on{background:var(--navy);border-color:var(--navy);color:white}
.detail-title i{font-weight:500;color:#6d6656}
.sheet-top h2{font:500 12px Jost,system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet-top{margin-bottom:8px}
@media(min-width:800px){.header-inner{padding-top:14px;padding-bottom:6px}.hero{padding-top:4px;padding-bottom:22px}h1{font-size:34px;margin-bottom:14px}.wide{display:none!important}.compact{display:block!important}.logo img{width:120px}}
@media(min-width:960px){.header-inner{padding-left:32px;padding-right:32px}}
/* iPad portrait: two columns (Nov 3 2026) */
@media(min-width:700px) and (max-width:959px){.column{max-width:none;padding-left:28px;padding-right:28px}.header-inner{max-width:none;padding-left:28px;padding-right:28px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}.grid .card{margin:0;display:flex;flex-direction:column}.grid .card .meta{margin-top:auto}.grid .card .hook{margin-bottom:12px}}
.anytime .card h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:23px;margin:0 0 2px}

/* Cards (creative pass, Nov 3 2026): category in gold, title, when and where, then a quiet teaser that opens with the hook. */
.card{display:flex;flex-direction:column;background:#fffcf7;border-color:#e6ddcf;box-shadow:0 2px 10px rgba(10,26,43,.04)}
.card .card-tag{font:600 11px/1.4 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a7a3c;margin:0 0 6px}
.card h3,.anytime .card h3{font:600 24px/1.2 'Cormorant Garamond',Georgia,serif;color:var(--navy);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card .meta,.grid .card .meta{order:0;margin:4px 0 0;padding:0;border:0;font-size:13.5px;color:var(--muted)}
.card .teaser{margin:12px 0 0;font-size:15px;line-height:1.5;color:#5d6871;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.card .teaser .lead{font-weight:500;color:var(--navy)}
.body-copy .lead{font-weight:500;color:var(--navy)}
#sheet[data-mode=detail] .sheet-top h2{font-weight:600;letter-spacing:.14em;color:#9a7a3c}
.card .meta span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .card-top-line{font:600 11px/1.4 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .card-cat{color:#9a7a3c}.card .card-top-line .dot{color:#c9b48a}.card .card-time{color:var(--navy);font-weight:500}

/* First load: show the full layout (both tabs) with placeholder cards while the feed loads, so no half-built layout flashes. */
.skeleton{display:grid;gap:16px}.skeleton i{display:block;height:118px;border-radius:16px;background:linear-gradient(90deg,#efe8db 0,#f7f2e8 50%,#efe8db 100%);background-size:200% 100%;animation:pop-shimmer 1.2s ease-in-out infinite}@media(min-width:960px){.skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1280px){.skeleton{grid-template-columns:repeat(3,minmax(0,1fr))}}@keyframes pop-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.skeleton i{animation:none}}

/* Wide windows (Nov 4 2026): the page fills the window (up to 1760px) instead of stopping at 1120px. Three columns from 1600px (each day shows 6, so two full rows); the Anytime row shows four. */
@media(min-width:960px){.column,footer.column,.header-inner{max-width:1760px}.skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1600px){.column,footer.column,.header-inner{padding-left:48px;padding-right:48px}.grid,.skeleton{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.shelf{gap:18px}.shelf .card,.anytime .card{flex-basis:calc((100% - 54px)/4)}.search{max-width:720px}}

/* Filter bar and spacing (Jessica, Nov 4 2026: "weird spacing and use of space", chip icons unreadable).
   Chips are words only, one pill style (navy = selected), no empty gap above the first section.
   Wide screens (1440px+): dates | categories in one row; 960px+: tagline and search side by side. Phones: a smaller header. */
#active-filters:empty{display:none}
main{padding-top:4px}
#results>:first-child .day-heading,#results>.day-heading:first-child,#results>:first-child>.day-heading:first-child{margin-top:14px}
.pill,.chip{min-height:40px;padding:6px 14px;font-size:14px;border:1px solid #e0d3bb;background:var(--card);border-radius:999px}
.chip[aria-pressed=true],.pill[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:500}
.sticky{padding:10px 0}
.filter-row{margin:0 0 8px}.cat-row{margin:0}
@media(max-width:959px){.header-inner{padding:12px 18px 6px}.logo img{width:92px}.avatar{width:38px;height:38px}h1{font-size:25px;margin:0 0 12px}.hero{padding-bottom:14px}}
@media(min-width:1440px){
 .sticky .column{flex-wrap:nowrap;gap:14px}
 .filter-row{margin:0;flex:none}
 .cat-row{flex:1 1 auto;min-width:0;flex-basis:auto;padding-left:14px;border-left:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
}
@media(min-width:960px){
 .sticky .column{gap:8px 14px}
 .hero{display:flex;align-items:center;gap:36px;padding-bottom:22px}
 .hero h1{margin:0;white-space:nowrap;font-size:32px}
 .hero .search{flex:1;max-width:620px}
}

/* Three columns from 1440px (Jessica, Nov 4 2026: her ~1570px window showed 2). Below 1440 a third column cuts many titles. */
@media(min-width:1440px){.grid,.skeleton{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.shelf{gap:18px}.shelf .card,.anytime .card{flex-basis:calc((100% - 54px)/4)}}

/* Header A, the slim bar (Jessica picked it Nov 4 2026). One navy row: logo, search, then Saved and account.
   The headline lives in the search prompt (and stays as a hidden h1 for screen readers). Phones: logo and icons, then search.
   Filter bar: Filters is an outline button with a sliders icon at the end; chips keep one weight when picked; the match count
   is for screen readers only (an empty feed still shows its own message). */
.sr-only,#status{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.header-inner{flex-wrap:wrap;gap:10px 28px;padding-top:12px;padding-bottom:12px}
.header-inner .logo{flex:none}.header-inner .logo img{display:block;width:80px;height:auto}
.header-inner nav{order:2;margin-left:auto;gap:6px}
.header-inner .search{order:3;flex:1 1 100%;min-height:44px;max-width:none;font-size:15px}
.avatar{background:transparent;border:1.5px solid var(--gold);color:var(--gold);width:38px;height:38px;font-weight:500}
.hero{display:none}
@media(min-width:800px){
 .header-inner{flex-wrap:nowrap;padding-top:14px;padding-bottom:14px}
 .header-inner .logo img{width:106px}
 .header-inner .search{order:1;flex:1 1 auto;max-width:640px;min-height:48px;margin:0 auto;font-size:16px}
 .avatar{width:40px;height:40px}
}
.pill,.chip{font-weight:500}
.filters-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:6px 14px;border:1px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font-size:14px;font-weight:500;white-space:nowrap}
.filters-btn svg{flex:none}
/* Phones and tablets: dates with Filters on the right, categories on the next line. */
@media(max-width:959px){
 .sticky .column{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
 .filter-row{grid-column:1;margin:0}
 .filters-btn{grid-column:2;grid-row:1}
 .cat-row{grid-column:1/-1;margin-top:8px}
 #active-filters{grid-column:1/-1}
}
@media(max-width:480px){.filters-btn{width:40px;padding:0}.filters-btn span{display:none}}
/* 960-1439px: dates and Filters on one line, categories under them. 1440px+: all one line, Filters last. */
@media(min-width:960px){.filter-row{order:1}.filters-btn{order:2;margin-left:auto}.cat-row{order:3}#active-filters{order:4}}
@media(min-width:1440px){.filter-row{order:1}.cat-row{order:2}.filters-btn{order:3;margin-left:0}}
/* Drill down in place: after Drinks, the category row shows "‹ Drinks" and its specific chips (no third row). */
.cat-row .chip.back{gap:4px;background:var(--navy);color:#fff;border-color:var(--navy)}
.cat-row .chip.back span{font-size:18px;line-height:1;margin-top:-2px}
.cat-row[data-drill]:not([data-drill=""]) .chip.back[aria-pressed=false]{background:var(--card);color:var(--navy);border-color:var(--navy)}
/* No dead ends: one quiet line above the venues that work any night. */
.fallback-line{font-size:14px;color:var(--muted);margin:14px 0 12px}
/* The close button's focus ring only for keyboard users (it showed every time the sheet opened). */
dialog.pointer #close-sheet:focus{outline:none}
/* Anytime picks under a chip sit in a grid: every card full width (they came out staggered on phones). */
.anytime .grid .card{width:100%;max-width:none;flex:none}
/* Room for the Saved heart (#49) at the card's top right, so a long eyebrow never runs under it. */
.card.pic .p-eye{padding-right:28px}

/* "Something off?" and "Send feedback" sheet (Jessica, Nov 4 2026). */
.report .off{border:0;background:none;padding:10px 8px;min-height:44px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.foot-feedback{font-size:12px;color:var(--muted);min-height:44px}
#sheet[data-mode=report] .sheet-top h2{font:500 12px Jost,system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#report-form .about{font:600 22px/1.15 'Cormorant Garamond',Georgia,serif;margin:0 0 2px}
#report-form .sub{font-size:14px;color:var(--muted);margin:0}
#report-form .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
#report-form .chip{border:1px solid var(--line);background:white;border-radius:999px;padding:9px 15px;font-size:14px;min-height:44px}
#report-form .chip.on{background:var(--navy);border-color:var(--navy);color:white}
#report-form textarea{display:block;width:100%;min-height:84px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:16px/1.4 Jost,system-ui,sans-serif;background:white;color:var(--ink);resize:none}
#report-form .count{font-size:12px;color:var(--muted);text-align:right;margin-top:4px}
#report-form .send{display:block;width:100%;margin-top:12px}
#report-form .report-fine{text-align:center;margin-top:10px}
#report-form .report-error{color:#8a2f1d;text-align:center;margin-top:10px}
.thanks{text-align:center;padding:18px 6px 6px}
.thanks .spark{display:block;font-size:30px;color:var(--gold);margin-bottom:6px}
.thanks h3{font-size:28px;margin:0 0 8px}
.thanks p{color:var(--muted);margin:0 0 18px;font-size:15px}
.thanks .primary{min-width:160px}
/* Grid follows the screen (Jessica, Nov 4 2026: "4 wide", "adjust based on browser/screen"). Replaces the 3-from-1440 rule.
   Under 700px 1 column; 700-1199px 2; 1200-1439px 3 (at 1100 some short titles still cut); 1440px+ 4 with the picture on top. Content stops at 1600px wide,
   so big monitors keep 4 columns with wider margins. */
@media(min-width:700px){.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.grid .card{margin:0}}
@media(min-width:1200px){.grid,.skeleton{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.column,footer.column,.header-inner{max-width:1600px}}
@media(min-width:1440px){
 .grid,.skeleton{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 .column,footer.column,.header-inner{padding-left:48px;padding-right:48px}
}
.grid.flat{margin-top:22px}
/* Picture-on-top cards everywhere (Jessica, Nov 4 2026: "i like that card style... let's update to that one").
   Phones use a wider 2:1 crop so about two cards fit on screen; 700px and up use 16:10. */
.card.pic,.grid .card.pic,.shelf .card.pic,.anytime .card.pic{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.pic .p-img{width:100%;height:auto;aspect-ratio:2/1;border-radius:0}
.pic .p-tile{font-size:34px}
.pic .p-body{padding:10px 14px 12px}
.card.pic .p-eye{padding-right:0}
@media(min-width:700px){.pic .p-img{aspect-ratio:16/10}.pic .p-body{padding:12px 14px 14px}}
/* Anytime picks look different from dated Moments: a soft gold wash and a thin gold edge (no badge over the picture). */
.card.pic.any{background:#f8f0de;border-color:rgba(214,183,122,.55)}
.card.pic.any .p-eye{color:#8a6a2c}
/* No picture: the plain POP tile. */
.pic .p-tile{font:600 30px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.06em}
/* #49's heart now sits on the picture: a dark circle keeps it visible on light pictures. */
.card.pic .heart{background:rgba(10,26,43,.55);color:#f7f3eb}
.card.pic .heart.on{color:var(--gold)}
.card.pic .heart:hover{background:rgba(10,26,43,.75)}
/* Top line: time and kind on the left, the city on the right. */
.card.pic .p-eye{display:flex;align-items:baseline;gap:10px}
.pic .p-when{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic .p-city{flex:none;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:500}
.card.pic{position:relative}
/* Anytime and Moment cards match (Jessica, Nov 4 2026): on phones every picture is the same height, swipe row or list. */
@media(max-width:699px){.pic .p-img{aspect-ratio:auto;height:172px}}
/* Page speed (Nov 4 2026): placeholders are shaped like a card (picture block, two text lines) so nothing jumps when the cards arrive. */
.skeleton i{height:auto;aspect-ratio:5/4;animation:none;background:linear-gradient(#ece5d8,#ece5d8) top/100% 60% no-repeat,linear-gradient(#e9e1d2,#e9e1d2) 14px calc(60% + 16px)/40% 10px no-repeat,linear-gradient(#e9e1d2,#e9e1d2) 14px calc(60% + 38px)/72% 16px no-repeat,#faf6ef}
/* Today headline (Jessica picked option B, Nov 4 2026): gold date line, a headline that says what is on, and a header
   that hugs its cards instead of floating under the filter bar. "See all" is a quiet arrow link on every section. */
#results>:first-child .day-heading,#results>.day-heading:first-child,#results>:first-child>.day-heading:first-child{margin-top:18px}
.day-heading{align-items:flex-end;margin-bottom:12px}
@media(min-width:960px){.day-heading{margin-bottom:12px}}
.today-eye{margin:0 0 2px;font:600 12px/1.4 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a7a3c}
.today-eye b{color:#c9b48a;font-weight:400;margin:0 4px}
.today-head h2{font-size:32px;line-height:1.1}
@media(max-width:699px){.today-head h2{font-size:26px}}

/* Full-width "See all" under each day section, so nobody has to scroll back up to the heading link (Nov 4 2026). */
.see-all{display:block;width:100%;margin:12px 0 4px;min-height:48px;padding:11px 18px;border:1px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font-weight:500;font-size:15px}
.see-all:hover{background:var(--navy);color:var(--cream)}
@media(min-width:700px){.see-all{width:auto;min-width:260px;margin:16px auto 4px}}
/* "Good for" chips in Filters (Jessica, Nov 4 2026): crowd tags such as Free, Late night and Kid-friendly. */
.good-for{border:0;padding:0;min-width:0}
.good-for legend{padding:0;margin-bottom:8px}
.good-chips{display:flex;flex-wrap:wrap;gap:8px}

/* Category tag bottom right of the card, location moves up to the time line (Jessica Nov 4 2026). */
.pic .p-line>.p-cat{margin-left:auto;padding-left:10px;color:#9a7a3c;font:600 11px/1.3 Jost,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pic .p-line>.p-cat:before{content:none}
.pic .p-line>.p-cat:first-child{margin-left:auto}
/* One See all per day (Jessica Nov 4 2026): it rests under the day's cards, and while that day is on screen it floats at the bottom of the screen. */
.see-all{position:sticky;bottom:16px;z-index:5;background:var(--navy);color:var(--cream);box-shadow:0 6px 18px rgba(10,26,43,.25)}
.see-all:hover{background:#13304d;color:var(--cream)}
/* Card review (art director + UX, Nov 4 2026): time leads in gold, place is quieter, category is a small label, floating See all is a compact pill. */
.pic .p-where{color:#6b7680;font-weight:500}
.pic .p-line>.p-cat{font-size:10.5px;color:#8a6a2c;background:#f3ead8;border-radius:6px;padding:2px 7px;margin-left:auto}
.card.pic.any .p-line>.p-cat{background:#efe2c4}
.pic .p-line{gap:0}.pic .p-line>.p-cat{flex:none}
.see-all{width:auto;min-width:220px;margin:14px auto 4px;padding:10px 26px;min-height:44px}
/* v5 order: category label at the top right, beside the time. */
.pic .p-eye{display:flex;align-items:center;gap:10px}
.pic .p-eye>.p-cat{margin-left:auto;flex:none;font:600 10.5px/1.3 Jost,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a6a2c;background:#f3ead8;border-radius:6px;padding:2px 7px}
.card.pic.any .p-eye>.p-cat{background:#efe2c4}
.pic .p-line>.p-where{color:#6b7680;font-style:normal}
.pic .p-place{display:block;margin-top:2px;font:500 12px/1.3 Jost,system-ui,sans-serif;color:#6b7680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}