/* Fonts are served with the app, not from Google: no visitor data goes to a third party. Both are SIL Open Font License (fonts/OFL-*.txt). */
@font-face { font-family: 'Libre Franklin'; src: url('fonts/LibreFranklin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sofia Sans Condensed'; src: url('fonts/SofiaSansCondensed.woff') format('woff'); font-weight: 700 800; font-display: swap; }
/* Corners: cards keep their own corner; anything inside a card uses 6px so the gap stays even around the curve. Capsules and circles keep their shape. */
/* Layout: one phone-width column (up to 480px, so every phone in portrait fills edge to edge), photo-led Today, floating smoked-glass tab bar. Demo screens: layouts will change after review. */
:root {
  --fs-s: calc(12.5px * var(--ts, 1)); --fs-b: calc(15.5px * var(--ts, 1)); --fs-t: calc(21px * var(--ts, 1)); --fs-xl: calc(44px * var(--ts, 1));
  --bg: #FFFFFF; --canvas: #F3F3F4; --panel: #FFFFFF; --ink: #111113; --muted: #5E5E66; --hair: #E4E4E7;
  --rose: #963246; --wmNow: #963246; --roseHi: #FFE3E6; --onRose: #FFFFFF; --now: #963246; --onNow: #FFFFFF; --planInk: #963246; --focus: #2E62C9;
  --shadow: 0 6px 18px rgba(0,0,0,0.16); --bar: rgba(20,20,22,0.75); --barEdge: 0 8px 24px rgba(0,0,0,0.22); --barOff: #D2D2D8; --dot: #DE6B75;
  --film-g: #2E62C9; --film-t: #E9F1FE; --food-g: #A74900; --food-t: #FFECE3; --music-g: #7A4ABA; --music-t: #F2EDFE;
  --bus-g: #187C49; --bus-t: #E1F7E7; --bike-g: #047879; --bike-t: #DAF7F6; --ride-g: #3F4A5A; --ride-t: #ECEFF3;
  --pick-g: #8D5E00; --pick-t: #FCEEDB; --free-g: #3B7A2C; --free-t: #E6F6E3; --popup-g: #0D7570; --popup-t: #DDF3F1; --bar-g: #A2306B; --bar-t: #FCE7F1;
  --m-land: #F2F0EB; --m-road: #FFFFFF; --m-casing: #DDD9D0; --m-major: #FFF6DE; --m-park: #CDE8BE; --m-water: #A6D1F4; --m-label: #6F6A62; --m-mall: #EAD7C1;
  --field-edge: #8A8A92; --warn-bg: #FBE0D6; --warn-ink: #A0360F; --group: #F3F3F4; --roseTint: #F8E6E9; --roseTintInk: #963246; --accent: #963246;
  --m-block: #EBE6DC; --m-bldg: #DDD5C7; --m-alley: #F6F3ED; --m-path: #B9A57E; --m-tree: #86BB72;
  --btn-hl: rgba(255,255,255,0.30); --btn-lo: rgba(0,0,0,0.20); --btn-touch: rgba(0,0,0,0.14); --btn-top: rgba(255,255,255,0.10); --btn-glow: rgba(110,70,0,0.18);
  --font: -apple-system, 'Libre Franklin', 'Segoe UI', Roboto, sans-serif; /* iPhone and Mac Safari: SF Pro, Apple's own font. Everywhere else: Libre Franklin, an American gothic in the Franklin Gothic line. */
  /* Letter spacing by size for Libre Franklin. On Apple devices SF Pro keeps its own spacing (.apple sets these to 0). */
  --trk-xl: -0.015em; --trk-l: -0.01em; --trk-t: -0.005em; --trk-b: 0em; --trk-s: 0.005em;
  /* Main buttons: marquee gold with black text, the bulb color; black keeps it on the cinema side of red and yellow. */
  --btn: #F4C66E; --onBtn: #15120F;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E0E10; --canvas: #26262B; --panel: #1C1C1F; --ink: #F2F2F3; --muted: #A4A4AC; --hair: #34343A; --group: #0E0E10; --roseTint: #3A1A20; --roseTintInk: #DE6B75;
  --rose: #BA4A5E; --wmNow: #BA4A5E; --roseHi: #FFFFFF; --now: #BA4A5E; --onNow: #FFFFFF; --planInk: #DE6B75; --accent: #BA4A5E; --focus: #A5C5FE;
  --shadow: 0 8px 22px rgba(0,0,0,0.55); --bar: rgba(44,44,48,0.75); --barEdge: 0 0 0 1px rgba(255,255,255,0.12), 0 10px 28px rgba(0,0,0,0.5); --dot: #DE6B75;
  --film-g: #A5C5FE; --film-t: #1C2B47; --food-g: #FDAF87; --food-t: #412211; --music-g: #CFB5FF; --music-t: #302442;
  --bus-g: #95D6AB; --bus-t: #163221; --bike-g: #91D2D2; --bike-t: #143131; --ride-g: #BBC5D3; --ride-t: #282C32;
  --pick-g: #E4BD88; --pick-t: #382810; --free-g: #A3D498; --free-t: #1D3218; --popup-g: #7DD3CB; --popup-t: #12302E; --bar-g: #F2A6CB; --bar-t: #3D1A2B;
  --m-land: #1D1D1F; --m-road: #3A3A3E; --m-casing: #2A2A2D; --m-major: #4A4538; --m-park: #1F3A26; --m-water: #1B3D5C; --m-label: #A8A39B; --m-mall: #3A2E25;
  --field-edge: #7A7A82; --warn-bg: #42190E; --warn-ink: #FFC2A8; --m-block: #232326; --m-bldg: #2F2F34; --m-alley: #1A1A1C; --m-path: #5E5442; --m-tree: #2F5A33; color-scheme: dark;
  --btn-hl: rgba(255,255,255,0.22); --btn-lo: rgba(0,0,0,0.28); --btn-touch: rgba(0,0,0,0.70); --btn-top: rgba(255,255,255,0.06); --btn-glow: rgba(0,0,0,0.6); } }
:root[data-theme="dark"] {
  --bg: #0E0E10; --canvas: #26262B; --panel: #1C1C1F; --ink: #F2F2F3; --muted: #A4A4AC; --hair: #34343A; --group: #0E0E10; --roseTint: #3A1A20; --roseTintInk: #DE6B75;
  --rose: #BA4A5E; --wmNow: #BA4A5E; --roseHi: #FFFFFF; --now: #BA4A5E; --onNow: #FFFFFF; --planInk: #DE6B75; --accent: #BA4A5E; --focus: #A5C5FE;
  --shadow: 0 8px 22px rgba(0,0,0,0.55); --bar: rgba(44,44,48,0.75); --barEdge: 0 0 0 1px rgba(255,255,255,0.12), 0 10px 28px rgba(0,0,0,0.5); --dot: #DE6B75;
  --film-g: #A5C5FE; --film-t: #1C2B47; --food-g: #FDAF87; --food-t: #412211; --music-g: #CFB5FF; --music-t: #302442;
  --bus-g: #95D6AB; --bus-t: #163221; --bike-g: #91D2D2; --bike-t: #143131; --ride-g: #BBC5D3; --ride-t: #282C32;
  --pick-g: #E4BD88; --pick-t: #382810; --free-g: #A3D498; --free-t: #1D3218; --popup-g: #7DD3CB; --popup-t: #12302E; --bar-g: #F2A6CB; --bar-t: #3D1A2B;
  --m-land: #1D1D1F; --m-road: #3A3A3E; --m-casing: #2A2A2D; --m-major: #4A4538; --m-park: #1F3A26; --m-water: #1B3D5C; --m-label: #A8A39B; --m-mall: #3A2E25;
  --field-edge: #7A7A82; --warn-bg: #42190E; --warn-ink: #FFC2A8; --m-block: #232326; --m-bldg: #2F2F34; --m-alley: #1A1A1C; --m-path: #5E5442; --m-tree: #2F5A33; color-scheme: dark;
  --btn-hl: rgba(255,255,255,0.22); --btn-lo: rgba(0,0,0,0.28); --btn-touch: rgba(0,0,0,0.70); --btn-top: rgba(255,255,255,0.06); --btn-glow: rgba(0,0,0,0.6); }

* { box-sizing: border-box; }
/* The demo page used to supply this; a real page needs it so the map can fill the screen. */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); letter-spacing: var(--trk-b); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.phone { max-width: 480px; margin: 0 auto; min-height: 100%; position: relative; }
#view { padding-bottom: 128px; outline: none; }
.label { font-size: var(--fs-s); line-height: 1.15; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--canvas); color: var(--muted); }
.tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: var(--t); color: var(--g); }
.tile.s28 { width: 28px; height: 28px; } .tile.s44 { width: 44px; height: 44px; }
.k-film { --g: var(--film-g); --t: var(--film-t); } .k-food { --g: var(--food-g); --t: var(--food-t); } .k-music { --g: var(--music-g); --t: var(--music-t); }
.k-bus { --g: var(--bus-g); --t: var(--bus-t); } .k-bike { --g: var(--bike-g); --t: var(--bike-t); } .k-ride { --g: var(--ride-g); --t: var(--ride-t); }
.k-pick { --g: var(--pick-g); --t: var(--pick-t); } .k-free { --g: var(--free-g); --t: var(--free-t); }

/* Today hero and Plan card */
.hero { position: relative; height: clamp(318px, 50svh, 520px); color: #FFFFFF; overflow: hidden; background: #2A2A2E; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.42) 24%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.72) 100%); }
.top { position: relative; height: 56px; padding: 0 4px 0 16px; display: flex; align-items: center; gap: 8px; }
.wm { font-size: calc(23px * var(--ts, 1)); font-weight: 600; letter-spacing: var(--trk-t); } .wm b { font-weight: 800; color: var(--wmNow); }
.hero .wm b { color: #FFFFFF; }
.hero .pill { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.top .brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.top .menu { margin-left: auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 0 4px; }
.top .menu { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; }
.top .brand { grid-column: 2; grid-row: 1; justify-self: center; }
.head .top { padding: 0; margin: 0 -4px; }
.hero h1 { position: absolute; left: 16px; right: 16px; bottom: 48px; font-size: var(--fs-xl); line-height: 1.04; font-weight: 700; letter-spacing: var(--trk-xl); }
.pcard { position: relative; margin: 0 14px; padding: 0; width: calc(100% - 28px); border-radius: 14px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.pcard .label { color: var(--muted); }
.pcard .pt { margin-top: 3px; font-size: var(--fs-t); line-height: 1.1; font-weight: 700; letter-spacing: var(--trk-t); }
.pcard .pm { font-size: var(--fs-s); line-height: 18px; color: var(--muted); }
.cd { min-width: 88px; height: 70px; padding: 0 8px; border-radius: 6px; background: var(--rose); color: var(--roseHi); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cd .label { color: var(--roseHi); font-size: calc(10px * var(--ts, 1)); }
.cd b { font-size: calc(31px * var(--ts, 1)); line-height: 33px; font-weight: 700; letter-spacing: var(--trk-l); font-variant-numeric: tabular-nums; } .cd small { font-size: calc(13px * var(--ts, 1)); font-weight: 700; }
.pcard.empty { grid-template-columns: minmax(0, 1fr) auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--btn); color: var(--onBtn); font-weight: 700; font-size: var(--fs-b); text-align: center; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: var(--fs-b); border-radius: 10px; }
.btn.on { background: var(--canvas); color: var(--ink); }

/* Shelves */
.shh { margin: 24px 16px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shh h2, .shh h3 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-t); line-height: 1.1; font-weight: 700; letter-spacing: var(--trk-t); }
.lk { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--fs-b); font-weight: 600; white-space: nowrap; }
.rail { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.post { flex: 0 0 168px; }
.post .im { position: relative; width: 168px; height: 240px; border-radius: 12px; overflow: hidden; background: var(--canvas); }
.post .im img, .land img, .sq img { width: 100%; height: 100%; object-fit: cover; }
.bd { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: var(--panel); color: var(--ink); font-size: var(--fs-s); line-height: 1.35; font-weight: 700; }
.bd.now { background: var(--now); color: var(--onNow); letter-spacing: 0.06em; }
.bd.plan { color: var(--planInk); }
.k { margin-top: 8px; display: flex; align-items: center; gap: 5px; font-size: var(--fs-s); line-height: 1.2; font-weight: 600; color: var(--g); }
.t { font-size: var(--fs-b); line-height: 1.25; font-weight: 700; }
.post .t { margin-top: 3px; }
.m { font-size: var(--fs-s); line-height: 17px; color: var(--muted); }
.land { flex: 0 0 216px; } .land .im { height: 122px; border-radius: 12px; overflow: hidden; } .land .t { margin-top: 8px; }
.sq { flex: 0 0 150px; } .sq .im { height: 150px; border-radius: 12px; overflow: hidden; } .sq .t { margin-top: 8px; }
.tc { flex: 0 0 150px; min-height: 112px; padding: 12px; border: 1px solid var(--hair); border-radius: 6px; background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; }
.spon { margin: 24px 16px 0; padding: 12px; border: 1px solid var(--hair); border-radius: 14px; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; background: var(--panel); }
.spon img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.empty-note { margin: 0 16px; padding: 16px; border: 1px dashed var(--hair); border-radius: 14px; color: var(--muted); }

/* Tab pages */
.head { padding: 0 16px; }
.head .top { padding: 0; }
.head .wm { font-size: calc(20px * var(--ts, 1)); }
.head h1 { margin-top: 18px; font-size: var(--fs-xl); line-height: 1.04; font-weight: 700; letter-spacing: var(--trk-xl); overflow-wrap: break-word; text-wrap: balance; }
.head .sub { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--muted); }
.head .sub > span:last-child { min-width: 0; }
.head .sub svg { flex: none; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 16px 16px 4px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: 0 0 52px; height: 60px; border-radius: 14px; border: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--fs-s); font-weight: 600; color: var(--muted); text-align: center; }
.day b { font-size: var(--fs-t); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .day[aria-pressed="true"] b { color: #FFFFFF; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 2px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips .chip { flex: none; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--hair); font-size: var(--fs-b); font-weight: 600; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.list { margin: 12px 16px 0; }
.row { width: 100%; display: grid; grid-template-columns: 70px 36px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.row:first-child { border-top: 0; }
.row .tm { font-size: var(--fs-b); font-weight: 600; font-variant-numeric: tabular-nums; }
.row.past { opacity: 0.55; }
.row .end { color: var(--planInk); }
.row.place { grid-template-columns: 56px minmax(0, 1fr) auto; }
.row.place img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.group { margin: 20px 16px 0; font-size: var(--fs-s); font-weight: 700; color: var(--muted); }
.search { margin: 16px 16px 0; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--canvas); display: flex; align-items: center; gap: 10px; color: var(--muted); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: calc(16px * var(--ts, 1)); outline: none; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.note { margin: 16px 16px 0; padding: 14px; border-radius: 14px; background: var(--canvas); font-size: var(--fs-b); line-height: 20px; color: var(--muted); }

/* Detail pages */
.dhero { position: relative; height: 300px; overflow: hidden; color: #FFFFFF; background: #2A2A2E; }
.dhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dhero .shade { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%); }
.dhero h1 { position: absolute; left: 16px; right: 16px; bottom: 18px; font-size: var(--fs-xl); line-height: 1.04; font-weight: 700; letter-spacing: var(--trk-xl); overflow-wrap: break-word; text-wrap: balance; }
.back { position: absolute; z-index: 2; left: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; border-radius: 22px; background: rgba(0,0,0,0.45); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dbody { padding: 16px 16px 0; display: grid; gap: 10px; }
.dbody .kick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fact { font-size: var(--fs-b); line-height: 23px; max-width: 60ch; }
.picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 6px; }
.picker label { display: grid; gap: 4px; font-size: var(--fs-s); color: var(--muted); }
.picker select { height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); font-size: calc(16px * var(--ts, 1)); }

/* Floating smoked-glass tab bar */
.gbar { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100% - 24px)); height: 70px; border-radius: 35px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--bar); box-shadow: var(--barEdge); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.gbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-s); line-height: 1.15; font-weight: 600; color: var(--barOff); white-space: nowrap; text-align: center; border-radius: 35px; }
.gbar button[aria-current="page"] { color: #FFFFFF; }
.gbar button[aria-current="page"] span::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--dot); }
.gbar span { position: relative; }
/* Tab labels work like iPhone's own tab bar: they don't grow with the text-size setting, and they shrink a little on narrow
   phones so "Boulder 101" never spills into its neighbor. Below 300px wide (heavy browser zoom) only the icons show;
   screen readers still read each label. */
.gbar button { font-size: clamp(10.5px, 3.3vw, 12.5px); letter-spacing: var(--trk-s); }
@media (max-width: 299px) { .gbar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Sheets and toast */
.sheet { width: min(480px, 100%); max-width: 100%; margin: auto auto 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 20px 20px 0 0; background: var(--panel); color: var(--ink); }
.sheet::backdrop { background: rgba(0,0,0,0.45); }
.sheet h2 { font-size: var(--fs-t); font-weight: 700; margin-bottom: 12px; }
.sheet .opts { display: grid; gap: 8px; margin: 8px 0 16px; }
.sheet .opt { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair); font-weight: 600; display: flex; align-items: center; }
.sheet .opt[aria-pressed="true"] { border-color: var(--accent); background: var(--roseTint); color: var(--roseTintInk); }
.sheet .acts { display: grid; gap: 8px; margin-top: 16px; }
.toast { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(98px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: var(--fs-b); }

/* Round 2 drafts */
.pill.now { background: var(--now); color: var(--onNow); }
.k-popup { --g: var(--popup-g); --t: var(--popup-t); }
.rate { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: var(--fs-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.rate .star { color: #E8A317; }
.rate .pill { height: 18px; margin-left: 4px; font-size: var(--fs-s); }
.land { flex: 0 0 280px; } .land .im { height: 180px; border-radius: 14px; } .land .t { font-size: var(--fs-b); }

/* Marquee: cinema readerboard with chase bulbs. Under the Plan card, or a full-width band at the top. */
.marquee { position: relative; width: calc(100% - 32px); margin: 24px 16px 0; padding-bottom: 14px; }
/* The marquee overlaps the bottom of the photo; your Plan starts the panels below it. */
.hero + .marquee { margin-top: -34px; z-index: 2; }
.marquee + .secs { margin-top: 8px; }
.mq-board { display: block; width: 100%; border-radius: 12px; overflow: hidden; border: 2px solid #0B0B0B; box-shadow: 0 10px 18px -10px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.07), inset 0 0 0 1px rgba(255,214,140,0.28); background: #15120F; color: #FFF6E3; text-align: center; }
.marquee .bulbs { display: block; height: 14px; background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 50% / 16px 14px space no-repeat; }
.marquee .mq { display: block; padding: 4px 14px 6px; border-block: 1px solid rgba(255,214,140,0.22); background: #1F1A15; }
.mq-k { display: block; font-size: var(--fs-s); line-height: 1.15; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #F4C66E; }
.mq-t { display: block; margin-top: 2px; font: 800 36px/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.mq-s { display: block; margin-top: 3px; font: 700 14px/18px 'Sofia Sans Condensed', var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: #E7D9BF; }

/* What's On photo cards */

/* Stand-in map */
.map-scroll { position: absolute; inset: 0; overflow: auto; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-canvas { position: relative; }
.mapsvg { position: absolute; inset: 0; }
.m-land { fill: var(--m-land); } .m-park { fill: var(--m-park); } .m-water { stroke: var(--m-water); stroke-width: 14; stroke-linecap: round; }
.m-casing line { stroke: var(--m-casing); stroke-width: 22; } .m-road line { stroke: var(--m-road); stroke-width: 18; } .m-major line { stroke: var(--m-major); stroke-width: 18; }
.m-mall { fill: var(--m-mall); }
.m-label text, text.m-label { fill: var(--m-label); font: 600 12px var(--font); letter-spacing: 0.04em; text-anchor: middle; paint-order: stroke; stroke: var(--m-land); stroke-width: 3px; }
.m-mall-label { font-style: italic; } .m-park-label { fill: #3D7A33; } .m-water-label { fill: #2C6EA8; }
.you { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 9px; background: #2E7CF6; border: 3px solid #FFFFFF; box-shadow: 0 0 0 9px rgba(46,124,246,0.2); transform: translate(-50%, -50%); }
.pin { position: absolute; z-index: 3; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; --pin: #566273; }
.pin .dot { width: 32px; height: 32px; border-radius: 16px; background: var(--pin); color: #FFFFFF; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.pin .tip { width: 0; height: 0; margin-top: -1px; border: 6px solid transparent; border-top-color: var(--pin); }
.pin .nm { position: absolute; top: 100%; margin-top: 1px; white-space: nowrap; font-size: var(--fs-s); font-weight: 700; color: var(--ink); text-shadow: 0 0 3px var(--m-land), 0 0 3px var(--m-land), 0 0 3px var(--m-land), 0 0 3px var(--m-land); }
.pin[aria-pressed="true"] { z-index: 4; } .pin[aria-pressed="true"] .dot { transform: scale(1.375); }
:root:not([data-motion="reduce"]) .pin .dot { transform-origin: 50% 100%; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.pin.p-food { --pin: #C25600; } .pin.p-film { --pin: #3F75DD; } .pin.p-music { --pin: #8B5DCE; } .pin.p-popup { --pin: #0F7F79; } .pin.p-bar { --pin: #B0376F; } .pin.p-free { --pin: #4D8C3E; }
.map-top { position: absolute; z-index: 5; left: 10px; right: 10px; top: 8px; display: grid; gap: 6px; }
.map-top .top { height: 50px; padding: 0 4px 0 14px; border-radius: 16px; background: var(--panel); box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.map-top .wm { font-size: calc(20px * var(--ts, 1)); }
.map-note { position: absolute; z-index: 5; left: 12px; bottom: 40px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,0.12); font-size: var(--fs-s); color: var(--muted); }
.recenter { position: absolute; z-index: 5; right: 12px; bottom: 36px; width: 44px; height: 44px; border-radius: 22px; background: var(--panel); color: #2E7CF6; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.mc-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Menu panel */
.sheet { max-height: 92vh; overflow-y: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; }
.close-x { width: 44px; height: 44px; margin-right: -10px; display: inline-flex; align-items: center; justify-content: center; }

.k-bar { --g: var(--bar-g); --t: var(--bar-t); }
.checked { margin: 10px 0 0; font-size: var(--fs-s); opacity: 0.8; }

/* Ticket stub tucked under the marquee: notched ends and a perforation, like an admission ticket. */
/* The ticket stub: the button is a 44 px tall, see-through tap area centred on the stub; the notched stub itself is drawn by ::before
   (a mask would also cut the tap area, so it sits on the drawing only). */
.mq-ticket { position: absolute; z-index: 3; left: 50%; bottom: -9px; transform: translateX(-50%); isolation: isolate; height: 44px; padding: 0 16px 0 14px; display: inline-flex; align-items: center; gap: 6px;
  color: #FFFFFF; font: 800 12px/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; background: none; }
.mq-ticket::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 9px; height: 26px;
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  background: linear-gradient(180deg, var(--btn-hl) 0 1px, transparent 1px calc(100% - 2px), var(--btn-lo) calc(100% - 2px)),
    linear-gradient(180deg, var(--btn-top), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0.6) 50%, transparent 0) 10px 0 / 1px 4px repeat-y var(--accent); }
/* Lit like the other filled buttons. The shadows go on the button as a filter, because the mask that notches the stub would cut a box-shadow. */
.mq-ticket { filter: drop-shadow(0 1px 1px var(--btn-touch)) drop-shadow(0 3px 6px var(--btn-glow)); }
.mq-ticket:active { filter: none; }
.mq-ticket:active::before { background: linear-gradient(180deg, rgba(0,0,0,0.22), transparent 4px),
    linear-gradient(180deg, rgba(255,255,255,0.6) 50%, transparent 0) 10px 0 / 1px 4px repeat-y var(--accent); }
.mq-ticket:focus-visible { outline-offset: 3px; }

/* Marquee color options */
.mq-c-white .mq-board { background: #2A2622; color: #151311; }
.mq-c-white .mq { background: #FBF7EE; border-block-color: #D9CFBD; }
.mq-c-white .mq-k { color: #963246; } /* the board is cream in both modes */ .mq-c-white .mq-s { color: #3A3530; }

/* Today sections: each in its own panel, and a <section> with its own heading for screen readers. */
.secs { margin-top: 12px; padding: 4px 0 4px; background: var(--group); }
.sec { margin: 12px 10px; padding-bottom: 16px; border-radius: 20px; background: var(--panel); overflow: hidden; }
.sec .shh { margin: 14px 14px 10px; }
.sec .rail { padding: 0 14px 2px; }
.sec h2:focus { outline: none; }

/* Accessibility: past rows keep readable contrast (no opacity fade on text that stays tappable). */
.row.past { opacity: 1; }
.row.past .t, .row.past .tm { color: var(--muted); }
.chip { min-height: 40px; }

/* Touch targets: 44 px minimum everywhere (Apple's guideline; WCAG 2.2 AA asks for 24). */
.btn.small { min-height: 44px; }
.chip { min-height: 44px; min-width: 44px; justify-content: center; }
.pin { padding: 6px; } .pin .nm { margin-top: -5px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Snap the first card to the gutter, not the screen edge. */
.rail { scroll-padding-inline: 16px; }
.sec .rail { scroll-padding-inline: 14px; }

/* Buttons center their content; keep every card in a rail top-aligned. */
.rail { align-items: flex-start; }

/* Accessibility settings (menu). Defaults follow the phone where the phone has a setting. */
:root[data-text="large"] { --ts: 1.15; } :root[data-text="larger"] { --ts: 1.3; }
:root[data-contrast="more"] { --muted: #3A3A40; --hair: #8A8A92; --dot: #FFFFFF; --field-edge: #55555C; }
@media (prefers-color-scheme: dark) { :root[data-contrast="more"]:not([data-theme="light"]) { --muted: #D8D8DE; --hair: #7A7A82; } }
:root[data-contrast="more"][data-theme="dark"] { --muted: #D8D8DE; --hair: #7A7A82; }
:root[data-contrast="more"] .hero .shade, :root[data-contrast="more"] .nf-im::after, :root[data-contrast="more"] .post.is-film .im::after, :root[data-contrast="more"] .dhero .shade { background: rgba(0,0,0,0.55); }
:root[data-contrast="more"] .pill { box-shadow: inset 0 0 0 1px currentColor; }
:root[data-contrast="more"] .gbar button { color: #FFFFFF; }
:root[data-transparency="reduce"] .gbar, :root[data-contrast="more"] .gbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141416; }
:root[data-transparency="reduce"] .back { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,0.75); }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before { transition-property: opacity, color, background-color, border-color !important; animation: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] :active { transform: none !important; }
.a11y { display: grid; gap: 14px; margin: 4px 0 8px; }
.a11y .lbl { display: block; margin-bottom: 6px; font-weight: 700; font-size: var(--fs-b); }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg3 button { min-height: 44px; border-radius: 12px; border: 1px solid var(--hair); font-weight: 600; font-size: var(--fs-b); text-align: center; }
.seg3 button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.switch { width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--hair); }
.switch .k2 { display: grid; gap: 2px; } .switch .k2 b { font-size: var(--fs-b); } .switch .k2 span { font-size: var(--fs-s); color: var(--muted); }
.switch i { position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--hair); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.switch[aria-checked="true"] i { background: var(--accent); } .switch[aria-checked="true"] i::after { left: 23px; }

/* Top bar: menu left, logo centered, a small Demo tag top right. */
.demo-tag { justify-self: end; align-self: start; margin-top: 10px; padding: 2px 6px; border-radius: 5px; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--canvas); color: var(--muted); }
.hero .demo-tag { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.top .demo-tag { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 12px; }

/* Festival date line, on the photo under the logo. 60% black keeps white text above 4.5:1 on the brightest photo. */
.daypill { position: relative; width: fit-content; margin: 0; padding: 6px 12px; border-radius: 8px; background: rgba(0,0,0,0.6); color: #FFFFFF; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--fs-s); font-weight: 600; }
:root[data-transparency="reduce"] .daypill, :root[data-contrast="more"] .daypill { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141416; }


/* Plan rows: the title opens the page; at least 44 px tall even with a one-line address. */
.pl-open { min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

/* Home: date and weather side by side on the photo. */
.hero-pills { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 16px; }
.wxpill { display: inline-flex; align-items: center; gap: 5px; }
.wxpill::before { content: ""; position: absolute; inset: -8px -4px; } /* 44 px tap area */

/* What's On: cards on the gray band, an All showings pill in burgundy. */

/* Map: the map fills the top, the list slides up over it as the page scrolls. */
.mapwrap { position: sticky; top: 0; height: 64vh; min-height: 420px; overflow: hidden; background: var(--m-land); }
.map-top .search.on-map { margin: 0; height: 46px; background: var(--panel); box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.mchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -10px; padding: 0 10px 6px; scrollbar-width: none; }
.mchips::-webkit-scrollbar { display: none; }
.mchip { flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.14); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-b); }
.mchip svg { color: var(--g); }
.mchip[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; } .mchip[aria-pressed="true"] svg { color: inherit; }
.msheet { position: relative; z-index: 6; margin-top: -24px; min-height: 60vh; padding: 6px 0 8px; border-radius: 22px 22px 0 0; background: var(--panel); box-shadow: 0 -6px 20px rgba(0,0,0,0.12); }
.grab { display: block; width: 40px; height: 5px; margin: 2px auto 0; border-radius: 3px; background: var(--hair); }
.mcard { margin: 14px 16px 0; padding: 12px; border-radius: 16px; border: 1px solid var(--hair); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.mcard > img { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.m-block rect { fill: var(--m-block); } .m-bldg rect { fill: var(--m-bldg); } .m-alley line { stroke: var(--m-alley); stroke-width: 5; }
.m-path { stroke: var(--m-path); stroke-width: 3; stroke-dasharray: 6 5; } .m-tree circle { fill: var(--m-tree); }
.m-district { fill: var(--m-label); opacity: 0.55; font: 700 15px var(--font); letter-spacing: 0.4em; text-anchor: middle; }
.popc { flex: 0 0 240px; } .popc .im { position: relative; height: 160px; border-radius: 14px; overflow: hidden; background: var(--canvas); }
.popc img { width: 100%; height: 100%; object-fit: cover; } .popc .t { margin-top: 3px; }
.row.place img { width: 64px; height: 64px; } .row.place { grid-template-columns: 64px minmax(0, 1fr) auto; }

/* Plan: one card per item, the name first, a colored pill for what kind of place or event it is. */
.plan-secs { margin-top: 16px; padding: 0 12px 16px; }
.plan-secs .group { margin: 18px 4px 8px; }
.plcs { display: grid; gap: 10px; }
.plc { padding: 14px 14px 14px 16px; border-radius: 10px; background: var(--panel); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.plc-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.plc-time { font-size: var(--fs-b); font-weight: 700; font-variant-numeric: tabular-nums; }
.tpill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--t); color: var(--g); font-size: var(--fs-s); font-weight: 700; }
.plc-name { display: block; font-size: var(--fs-t); line-height: 1.2; font-weight: 700; letter-spacing: var(--trk-t); }
.plc-leave { display: block; margin-top: 4px; color: var(--planInk); font-weight: 700; font-size: var(--fs-s); }
.plc.past .plc-name, .plc.past .plc-time { color: var(--muted); }

/* Boulder 101 */
.wx-temp { font-size: var(--fs-xl); line-height: 1; font-weight: 700; letter-spacing: var(--trk-xl); font-variant-numeric: tabular-nums; }
.bus-stop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 14px; }
.deps { list-style: none; margin: 12px 14px 0; padding: 0; }
.deps li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; border-top: 1px solid var(--hair); }
.route { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--bus-g); color: var(--bus-t); font: 800 var(--fs-b)/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.06em; }
.deps .to { font-weight: 600; } .mins { text-align: right; } .mins b { font-size: var(--fs-t); font-weight: 700; font-variant-numeric: tabular-nums; } .mins .m { display: block; }
.bus-walk, .bus-note { margin: 12px 14px 0; }
.sheet .bus-stop, .sheet .deps, .sheet .bus-walk, .sheet .bus-note { margin-left: 0; margin-right: 0; }
.k-em { --g: var(--planInk); --t: var(--roseTint); }
.faq summary, .srcs summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker, .srcs summary::-webkit-details-marker { display: none; }
.faq[open] summary > svg, .srcs[open] summary > svg { transform: rotate(180deg); }
.callrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 0; border-top: 1px solid var(--hair); color: inherit; text-decoration: none; }
.callrow .num { display: block; margin-top: 1px; font-size: var(--fs-t); font-weight: 700; color: var(--planInk); font-variant-numeric: tabular-nums; }
.callrow .go { color: var(--planInk); }
.fact-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.fact-txt { display: block; margin-top: 3px; font-size: var(--fs-b); line-height: 1.45; }
.faqs { margin: 0 14px; }
.faq + .faq { border-top: 1px solid var(--hair); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 10px 0; font-size: var(--fs-b); line-height: 1.3; font-weight: 600; }
.faq p { margin: 0 0 14px; font-size: var(--fs-b); line-height: 1.5; color: var(--muted); }

.menu-sheet { background: var(--group); }
.mfoot { margin: 18px 0 4px; text-align: center; font-size: var(--fs-s); color: var(--muted); }

/* Menu: three round quick actions, then grouped rows; the open one shows its panel under itself. */
.qrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 104px; padding: 6px 2px; border-radius: 16px; text-align: center; font-weight: 600; font-size: var(--fs-s); line-height: 1.25; }
.circ { width: 60px; height: 60px; border-radius: 30px; background: var(--t); color: var(--g); display: flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.qa[aria-expanded="true"] .circ { border-color: var(--g); }
.group { margin-top: 14px; border-radius: 16px; background: var(--panel); overflow: hidden; }
.grow { width: 100%; min-height: 64px; padding: 10px 14px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--hair); text-align: left; }
.group > .grow:first-child { border-top: 0; }
.grow[aria-expanded="true"] > svg { transform: rotate(180deg); }
.mpanel { margin-top: 10px; padding: 12px 14px 14px; border-radius: 16px; background: var(--panel); }
.group .mpanel { margin: 0; border-radius: 0; padding-top: 0; }
.mpanel .fact { margin-bottom: 8px; }
.mp-title { font-size: var(--fs-t); font-weight: 700; } .mp-sub { margin: 2px 0 6px; }

.gjump { display: flex; gap: 8px; overflow-x: auto; padding: 16px 16px 2px; scrollbar-width: none; }
.gjump::-webkit-scrollbar { display: none; }
.gjump .chip { flex: none; }
/* Jump buttons wear the same pink and lettering as the section titles they lead to. Auto margins center them and still let them scroll when they don't fit. */
.gjump .gchip { min-height: 44px; padding: 0 12px; border: 0; border-radius: 22px; background: var(--roseTint); color: var(--roseTintInk); font: 800 var(--fs-b)/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.06em; text-transform: uppercase; }
.gjump .gchip:first-child { margin-left: auto; } .gjump .gchip:last-child { margin-right: auto; }
.guide { padding: 0 16px; }
.gsec { scroll-margin-top: 12px; }
.gdiv { display: flex; align-items: center; gap: 12px; margin: 28px 0 8px; }
.gdiv::before, .gdiv::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.gpill { padding: 8px 16px; border-radius: 18px; background: var(--roseTint); color: var(--roseTintInk); font: 800 var(--fs-s)/1.1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.gpill:focus { outline: none; } .gpill:focus-visible { outline: 2px solid var(--focus); }
.gr { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 128px; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hair); }
.gdiv + .gr { border-top: 0; padding-top: 6px; }
.gr .no { align-self: start; padding-top: 6px; font: 800 calc(26px * var(--ts, 1))/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.04em; color: var(--planInk); }
.gr-t { display: block; font-size: var(--fs-t); line-height: 1.1; font-weight: 700; letter-spacing: var(--trk-t); overflow-wrap: break-word; hyphens: auto; }
.gr-s { display: block; margin-top: 6px; font-size: var(--fs-b); line-height: 1.3; color: var(--muted); }
.gr img { width: 128px; height: 128px; border-radius: 16px; object-fit: cover; }
@media (max-width: 370px) { .gr { grid-template-columns: 30px minmax(0, 1fr) 92px; } .gr img { width: 92px; height: 92px; } .gr-t { font-size: var(--fs-t); } }
:root[data-text="larger"] .gr { grid-template-columns: 30px minmax(0, 1fr) 92px; } :root[data-text="larger"] .gr img { width: 92px; height: 92px; }

/* Guide pages */
.gkick { font: 800 var(--fs-s)/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--planInk); }
.gintro { font-size: var(--fs-b); line-height: 1.5; }
.dsub { margin-top: 16px; font-size: var(--fs-t); line-height: 1.15; font-weight: 700; letter-spacing: var(--trk-t); }
.gi-lv { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--free-t); color: var(--free-g); font-size: var(--fs-s); font-weight: 700; }
.gi-w { display: flex; align-items: flex-start; gap: 5px; } .gi-w svg { flex: none; margin-top: 1px; }
.gi-x { font-size: var(--fs-b); line-height: 1.5; }
.gi-bus { display: flex; gap: 8px; font-size: var(--fs-b); line-height: 1.45; font-weight: 600; color: var(--bus-g); } .gi-bus svg { flex: none; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 15px; background: var(--canvas); font-size: var(--fs-s); font-weight: 600; }
a.btn { text-decoration: none; }
.btn.wide { width: 100%; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tips li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: var(--fs-b); line-height: 1.45; } .tips svg { color: var(--planInk); }
/* Guide places: a row with a small photo that opens in place (details/summary). Same pattern on Hiking, Viewpoints, Ski and Nearby towns. */
.guide-body .deck { margin: 4px -16px 0; padding: 14px 12px 18px; background: var(--canvas); display: grid; gap: 10px; }
.dd-i { background: var(--panel); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.dd-s { list-style: none; display: grid; grid-template-columns: 84px minmax(0, 1fr) 32px; gap: 12px; align-items: center; min-height: 104px; padding: 10px 12px 10px 10px; cursor: pointer; }
.dd-s::-webkit-details-marker { display: none; }
.dd-th { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; background: var(--canvas); }
.dd-th.ph-none { display: grid; place-items: center; align-content: center; gap: 4px; background: repeating-linear-gradient(135deg, var(--canvas) 0 10px, var(--panel) 10px 20px); color: var(--muted); }
.dd-th.ph-none em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.dd-tx { display: grid; gap: 8px; min-width: 0; }
.dd-n { font: 800 var(--fs-t)/1.02 'Sofia Sans Condensed', var(--font); text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.dd-no { color: var(--planInk); margin-right: 7px; }
.dd-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-m .gi-lv { height: 24px; font-size: var(--fs-s); }
.dd-c { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 12px; background: var(--canvas); font-size: var(--fs-s); font-weight: 600; line-height: 1.2; }
.dd-chev { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--canvas); color: var(--ink); }
:root:not([data-motion="reduce"]) .dd-chev { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.dd-i[open] .dd-chev { transform: rotate(180deg); }
.dd-i[open] .dd-s { border-bottom: 1px solid var(--hair); }
.dd-b { padding: 14px 16px 16px; display: grid; gap: 10px; }
.dd-h { margin: 14px 4px 0; font: 800 var(--fs-s)/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dd-tips { display: grid; gap: 10px; padding: 12px 12px 14px; border-radius: 6px; background: var(--canvas); }
.dd-tt { font: 800 var(--fs-s)/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--planInk); }
.dd-list { margin: 0; padding: 0; list-style: none; display: grid; }
.dd-list > li, .dd-list > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: var(--fs-b); line-height: 1.45; }
.dd-list > :first-child { border-top: 0; padding-top: 2px; }
.dd-list > li > span:last-child { align-self: center; }
.dd-list dt { display: contents; font-weight: 700; }
.dd-list dt .tile { grid-row: span 2; }
.dd-list dt { font-size: var(--fs-s); }
.dd-list dd { grid-column: 2; margin: 0; }
.k-warn { --g: var(--warn-ink); --t: var(--warn-bg); }
.dd-go { display: grid; gap: 4px; padding: 12px 12px 14px; border-radius: 6px; border: 1px solid var(--hair); }
.go-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); }
.dd-go .dd-tt + .go-row { border-top: 0; }
.go-l { font-size: var(--fs-s); font-weight: 700; }
.go-x { font-size: var(--fs-b); line-height: 1.45; }
.go-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .go-btns.stack { grid-template-columns: minmax(0, 1fr); } .go-btns.stack .go-btn { justify-content: flex-start; }
.go-btn { min-width: 0; } .go-btn svg { flex: none; }
.go-row > div > .go-btn { margin-top: 8px; }
.go-btn { min-height: 44px; } .dd-b .btn { border-radius: 6px; }
.dd-warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn-ink) 35%, transparent); font-size: var(--fs-b); line-height: 1.45; font-weight: 600; } .dd-warn svg { flex: none; margin-top: 2px; }
.dd-gen { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 14px 14px 14px 12px; border-radius: 14px; background: var(--pick-t); color: var(--ink); border: 1px solid color-mix(in srgb, var(--pick-g) 35%, transparent); font-size: var(--fs-b); line-height: 1.45; }
.dd-gen svg { color: var(--pick-g); margin-top: 1px; } .dd-gen b { color: var(--pick-g); }
:root[data-contrast="more"] .dd-gen { border-color: var(--pick-g); } :root[data-contrast="more"] .dd-warn { border-color: var(--warn-ink); }
.dd-card { padding: 4px 16px; border-radius: 16px; background: var(--panel); }
.dd-card .fact-row:first-child { border-top: 0; }
.dd-b .acts2 { margin-top: 2px; }
.guide-body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 370px) { .dd-s { grid-template-columns: 64px minmax(0, 1fr) 32px; } .dd-th { width: 64px; height: 64px; } .dd-facts div { grid-template-columns: 1fr; gap: 2px; } }
:root[data-text="larger"] .dd-s { grid-template-columns: 64px minmax(0, 1fr) 32px; } :root[data-text="larger"] .dd-th { width: 64px; height: 64px; } :root[data-text="larger"] .dd-facts div { grid-template-columns: 1fr; gap: 2px; }
.gbox { padding: 14px; border-radius: 16px; background: var(--canvas); display: grid; gap: 12px; }
.gbox .bus-stop, .gbox .deps, .gbox .bus-walk, .gbox .bus-note { margin-left: 0; margin-right: 0; }
.gbox .bus-note { padding: 0; border-radius: 6px; }
.gfaq { margin: 0; }
.srcs { margin-top: 12px; border-top: 1px solid var(--hair); }
.srcs summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.srcs ul { list-style: none; margin: 0; padding: 0 0 8px; }
.srcs a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink); font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.wxbig { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.wxbig .wx-temp { font: 800 var(--fs-xl)/0.9 'Sofia Sans Condensed', var(--font); }
.wxbig .t2 { display: block; font-size: var(--fs-t); font-weight: 700; }
.wx-sum { display: flex; gap: 8px; font-size: var(--fs-b); line-height: 1.45; font-weight: 700; color: var(--ink); } .wx-sum svg { flex: none; margin-top: 2px; color: var(--planInk); }

/* Detail pages: one big action, then Website, Call and Directions; then everything we know, one row each. */
.acts2 { display: grid; gap: 8px; margin-top: 4px; }
.act-main { min-height: 52px; padding: 0 18px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--btn); color: var(--onBtn); font-weight: 700; font-size: var(--fs-b); text-decoration: none; }
.act-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.act-row.c1 { grid-template-columns: minmax(0, 1fr); } .act-row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.act { min-height: 66px; padding: 8px 4px; border-radius: 14px; background: var(--canvas); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-weight: 700; font-size: var(--fs-s); text-decoration: none; text-align: center; }
.act svg { color: var(--planInk); }
.freeline { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: var(--free-t); color: var(--free-g); font-weight: 700; }
.info { margin-top: 6px; }
.info-row { min-height: 52px; padding: 10px 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; font-size: var(--fs-b); }
.info-row > span .m { display: block; } .info-row > svg:first-child { color: var(--muted); } .info-row > svg:last-child { color: var(--muted); }
.info .checked { color: var(--muted); }
.vcard { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--hair); }
.vcard img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.save-row { display: flex; }
.mc-next { margin-top: 2px; }
.save-row .btn:not(.on) { background: var(--roseTint); color: var(--roseTintInk); }

/* Feel like an app on a phone: no gray tap flash, no double-tap delay, no text selection on long-press of controls,
   inner scrollers keep their scroll to themselves, and a small press-down on tappable cards and buttons. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, summary, select { touch-action: manipulation; }
button, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rail, .nf-rail, .days, .chips, .mchips, .gjump, .map-scroll, .sheet, .cf-list { overscroll-behavior: contain; }
.sheet { max-height: 92dvh; }
.mapwrap { height: 64svh; }
:root:not([data-motion="reduce"]) :is(.btn, .act, .act-main, .chip, .mchip, .wxcard, .day, .qa, .vcard, .gr img, .post .im, .land .im, .sq .im, .popc .im, .nf-im) { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
:root:not([data-motion="reduce"]) :is(.btn, .act, .act-main, .chip, .mchip, .wxcard, .day, .qa, .vcard):active { transform: scale(0.97); }
:root:not([data-motion="reduce"]) .gr:active img, :root:not([data-motion="reduce"]) :is(.post, .land, .sq, .popc):active .im, :root:not([data-motion="reduce"]) .nf:active .nf-im { transform: scale(0.97); }

/* Lit buttons (Oct 16, 2026; shadows softened Nov 9): every filled button is lit from above. A 1px light line on the top edge, a darker line at the bottom,
   a tight shadow where it meets the page, a soft shadow below in the button's own color, and a slightly lighter top. Pressed, the light goes and it sinks in.
   Light and dark values live in the --btn-* tokens. Outline buttons stay flat. */
:is(.act-main, .btn:not(.ghost):not(.on)) { background-image: linear-gradient(180deg, var(--btn-top), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 var(--btn-hl), inset 0 -2px 0 var(--btn-lo), 0 1px 2px var(--btn-touch), 0 4px 12px -4px var(--btn-glow); }
:is(.act-main, .btn:not(.ghost):not(.on)):active { background-image: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.30); }
:root[data-contrast="more"] :is(.act-main, .btn:not(.ghost):not(.on)) { background-image: none; }
.srcs .cred { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: var(--fs-s); }
.srcs .cred a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cred-l { font-size: var(--fs-s); color: var(--muted); }

/* Film posters: a free mood photo in burgundy duotone with the title set on top (no studio artwork). */
/* Contact page: one form. Fields have a visible edge (3:1), 16px text so iPhone does not zoom, errors under the field they belong to.
   The Reason dropdown looks like the other fields when closed; its list drops under it and covers the form until a reason is picked. */
.cf { padding: 6px 16px 24px; }
.cf-back { width: 44px; height: 44px; margin: 4px 0 0 -6px; border-radius: 22px; background: var(--canvas); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.cf h1 { margin: 12px 0 8px; font-size: var(--fs-xl); line-height: 1.02; font-weight: 700; letter-spacing: var(--trk-xl); }
.cf-intro { margin: 0; font-size: var(--fs-b); line-height: 1.45; }
.cf-slow { margin: 8px 0 0; font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
.cf-faq { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 16px; padding: 8px 12px; border-radius: 12px; background: var(--canvas); text-align: left; font-size: var(--fs-b); }
.cf-faq b { font-weight: 700; } .cf-faq > svg { color: var(--muted); }
.cf-f { display: grid; gap: 7px; margin-top: 22px; }
.cf-f label, .cf-lab { font-size: var(--fs-b); font-weight: 700; }
.cf-f label small { font-size: var(--fs-s); font-weight: 500; color: var(--muted); }
.cf-f input, .cf-f textarea, .cf-pick { width: 100%; min-height: 52px; padding: 13px 14px; border: 1.5px solid var(--field-edge); border-radius: 12px; background: var(--panel); color: var(--ink); font: 16px/1.4 var(--font); }
.cf-f textarea { min-height: 140px; resize: vertical; }
.cf-f input::placeholder, .cf-f textarea::placeholder { color: var(--muted); opacity: 1; }
.cf-f input:focus, .cf-f textarea:focus { outline: none; border: 2px solid var(--planInk); padding: 12.5px 13.5px; }
.cf-dd { position: relative; }
.cf-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.cf-pick.empty span { color: var(--muted); }
.cf-pick svg { flex: none; color: var(--planInk); }
.cf-pick[aria-expanded="true"] { border: 2px solid var(--planInk); padding: 12.5px 13.5px; }
.cf-pick[aria-expanded="true"] svg { transform: rotate(180deg); }
.cf-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--hair); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.cf-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 6px; font-size: var(--fs-b); line-height: 1.35; text-align: left; }
.cf-opt[aria-checked="true"] { background: var(--roseTint); color: var(--roseTintInk); font-weight: 700; }
.cf-opt svg { flex: none; }
.cf-f.bad input, .cf-f.bad textarea, .cf-dd.bad .cf-pick { border: 2px solid var(--warn-ink); padding: 12.5px 13.5px; }
.cf-err { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: var(--fs-s); line-height: 1.4; font-weight: 600; color: var(--warn-ink); }
.cf-err svg { flex: none; margin-top: 1px; }
.cf-send { width: 100%; margin-top: 24px; min-height: 52px; font-size: var(--fs-b); }
.cf-priv { margin: 12px 0 0; font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
.cf-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; color: var(--planInk); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cf-demo { display: inline-block; margin-top: 14px; padding: 4px 8px; border-radius: 6px; background: var(--canvas); font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cf-done { display: grid; justify-items: center; text-align: center; padding: 72px 8px 0; }
.cf-ok { width: 72px; height: 72px; }
.cf-done h1 { margin-top: 20px; }
.cf-done .btn { margin-top: 26px; min-width: 200px; min-height: 48px; }
/* What's On rows: tall posters, title on the photo, time and venue underneath. Posters grow with the text size so titles keep whole words. */
.nf-rows { padding: 4px 0 28px; }
.nf-sec { margin-top: 22px; }
.nf-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 16px 10px; }
.nf-h h2 { margin: 0; font-size: var(--fs-t); line-height: 1.15; font-weight: 700; letter-spacing: var(--trk-t); }
.nf-h span { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.nf-rail { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.nf-rail::-webkit-scrollbar { display: none; }
.nf { flex: 0 0 calc(148px * var(--ts, 1)); min-width: 0; display: grid; gap: 1px; text-align: left; scroll-snap-align: start; }
.nf-im { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; margin-bottom: 7px; border-radius: 8px; overflow: hidden; background: var(--canvas); }
.nf-im img { width: 100%; height: 100%; object-fit: cover; }
.nf-im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.78) 100%); }
.nf-type { position: absolute; z-index: 1; left: 9px; right: 9px; bottom: 10px; display: grid; gap: 4px; color: #FFFFFF; }
.nf-type b { font: 800 calc(25px * var(--ts, 1))/0.9 'Sofia Sans Condensed', var(--font); text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.nf-type small { font-size: calc(10.5px * var(--ts, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; }
.nf-im .bd { z-index: 2; left: 6px; top: 6px; }
.nf-t { font-size: var(--fs-b); line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.nf-v { font-size: var(--fs-s); line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf.over .nf-im { opacity: 0.5; }
.nf.over .nf-t { color: var(--muted); }
.nf:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.post.is-film .im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.72) 100%); }
.ptype { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 4px; color: #FFFFFF; }
.ptype b { font: 800 calc(30px * var(--ts, 1))/0.9 'Sofia Sans Condensed', var(--font); text-transform: uppercase; letter-spacing: 0.005em; overflow-wrap: anywhere; text-wrap: balance; }
.ptype small { font-size: calc(10.5px * var(--ts, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.post .im .bd { z-index: 2; }
.spon-ph { width: 72px; height: 72px; border-radius: 10px; flex: none; }
.ph-none { display: grid; place-items: center; align-content: center; gap: 4px; background: repeating-linear-gradient(135deg, var(--canvas) 0 10px, var(--panel) 10px 20px); color: var(--muted); }
.ph-none em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }

/* Event page: Save is a full-width button right under the date. Filled when it is the page's main action (free events), tinted when Get tickets or RSVP leads. */
.save-row.big { margin-top: 14px; }
.save-row.big .btn { flex: 1; min-height: 52px; border-radius: 14px; font-size: var(--fs-b); }
.save-row.big.lead .btn:not(.on) { background: var(--btn); color: var(--onBtn); }
.save-row.big .btn.on { border: 1px solid var(--hair); }
/* What's On: parts of the day as one sticky segmented row; tap jumps, the row lights the part on screen. */
.tjump { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; padding: 8px 16px 6px; margin-top: 8px; background: var(--bg); }
.tjump .track { display: flex; gap: 2px; padding: 3px; border-radius: 24px; background: var(--canvas); }
.tjump button { flex: 1; min-height: 44px; border-radius: 21px; font-size: var(--fs-s); font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.tjump button small { font-size: var(--fs-s); font-weight: 600; opacity: 0.7; }
.tjump button[aria-current="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.4) inset; }
.nf-sec { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 66px); }
.nf-h h2:focus { outline: none; }

/* ---------- Event pages: the ticket (Nov 11, 2026) ----------
   Maroon ticket stock with a little grain, notched corners and a perforated stub. Wood type in cream and marquee-gold ink,
   the way a Hatch Show Print bill is printed, with the facts in labeled fields like a box office ticket. Same stock in dark mode.
   Saved: the stub tears off, turns marquee gold and is stamped "In your plan", so a saved event reads as yours at a glance. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --tk-ink: #FFF6E3; --tk-gold: #F4C66E; --tk-mut: rgba(255, 246, 227, 0.68); --tk-line: rgba(255, 232, 176, 0.45); }
.x-body { padding-bottom: 16px; }
.tk-wrap { --stub: 58px; --tk-bg: linear-gradient(180deg, var(--hb-top) 0%, var(--hb) 45%, var(--hb-floor) 100%); --tk-acc: var(--tk-gold); --tk-tag: var(--tk-ink); --tk-tag-ink: var(--hb); --tk-press: rgba(30, 6, 12, 0.45);
  margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); filter: drop-shadow(0 1px 1px rgba(21,18,15,0.14)) drop-shadow(0 6px 10px rgba(21,18,15,0.16)); }
.tk, .tk-stub { color: var(--tk-ink); background: var(--grain), var(--tk-bg); }
/* notched corners; the two on the right are half of the perforation's punch */
.tk { min-width: 0;
  -webkit-mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000), radial-gradient(circle 9px at 0 100%, #0000 98%, #000), radial-gradient(circle 8px at 100% 0, #0000 98%, #000), radial-gradient(circle 8px at 100% 100%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 9px at 0 0, #0000 98%, #000), radial-gradient(circle 9px at 0 100%, #0000 98%, #000), radial-gradient(circle 8px at 100% 0, #0000 98%, #000), radial-gradient(circle 8px at 100% 100%, #0000 98%, #000);
  mask-composite: intersect; }
.tk-stub { display: flex; align-items: center; justify-content: center; border-left: 2px dashed var(--tk-line);
  -webkit-mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000), radial-gradient(circle 8px at 0 100%, #0000 98%, #000), radial-gradient(circle 9px at 100% 0, #0000 98%, #000), radial-gradient(circle 9px at 100% 100%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000), radial-gradient(circle 8px at 0 100%, #0000 98%, #000), radial-gradient(circle 9px at 100% 0, #0000 98%, #000), radial-gradient(circle 9px at 100% 100%, #0000 98%, #000);
  mask-composite: intersect; }
.tk p, .tk dl, .tk dd { margin: 0; }
.tk-main { min-width: 0; margin: 12px 0 12px 12px; padding: 12px 14px 12px; border: 1.5px solid var(--tk-line); }
.tk-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-k b { padding: 5px 9px 4px; background: var(--tk-tag); color: var(--tk-tag-ink); font: 800 13px/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.24em; text-transform: uppercase; }
.tk-l, .tk-f dt { font-size: calc(10.5px * var(--ts, 1)); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tk-mut); }
.tk-l { margin-top: 12px !important; }
.tk-e, .tk-wd, .tk-d, .tk-t, .tk-f dd { font-family: 'Sofia Sans Condensed', var(--font); font-weight: 800; text-transform: uppercase; }
.tk-e { margin-top: 2px !important; font-size: calc(21px * var(--ts, 1)); line-height: 1; letter-spacing: 0.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tk-wd { margin-top: 12px !important; font-size: calc(14px * var(--ts, 1)); letter-spacing: 0.34em; color: var(--tk-acc); }
.tk-d { font-size: calc(58px * var(--ts, 1)); line-height: 0.86; letter-spacing: 0.01em; color: var(--tk-acc); text-shadow: 1.5px 1px 0 var(--tk-press); }
.tk-t { margin-top: 2px !important; font-size: calc(30px * var(--ts, 1)); line-height: 0.95; }
.tk-t small { margin-left: 8px; font-size: 0.5em; letter-spacing: 0.06em; color: var(--tk-mut); }
.tk-rule { margin: 12px 0 10px; border-top: 3px solid var(--tk-line); border-bottom: 1px solid var(--tk-line); padding-top: 2px; }
.tk-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.tk-f div { min-width: 0; } .tk-f .w { grid-column: 1 / -1; }
.tk-f dd { margin-top: 2px; font-size: calc(18px * var(--ts, 1)); line-height: 1.05; letter-spacing: 0.06em; overflow-wrap: break-word; }
.tk-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; }
.tk-go svg { flex: none; color: var(--tk-acc); }
.tk-fine { margin-top: 12px !important; font-size: calc(11px * var(--ts, 1)); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tk-mut); }
.tk-brand, .tk-plan { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 calc(14px * var(--ts, 1))/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.34em; text-transform: uppercase; white-space: nowrap; }
.tk-brand { color: #FFFFFF; }
.tk-plan { padding: 10px 6px; border: 2.5px solid currentColor; border-radius: 5px; letter-spacing: 0.22em; transform: rotate(176deg); }
/* Saved: torn along the perforation, the stub pulled a little away */
.tk-wrap.saved .tk { clip-path: polygon(0 0, 100% 0.00%, calc(100% - 6px) 5.56%, 100% 11.11%, calc(100% - 6px) 16.67%, 100% 22.22%, calc(100% - 6px) 27.78%, 100% 33.33%, calc(100% - 6px) 38.89%, 100% 44.44%, calc(100% - 6px) 50.00%, 100% 55.56%, calc(100% - 6px) 61.11%, 100% 66.67%, calc(100% - 6px) 72.22%, 100% 77.78%, calc(100% - 6px) 83.33%, 100% 88.89%, calc(100% - 6px) 94.44%, 100% 100.00%, 0 100%); }
.tk-wrap.saved .tk-stub { border-left: 0; clip-path: polygon(0 0.00%, 6px 5.56%, 0 11.11%, 6px 16.67%, 0 22.22%, 6px 27.78%, 0 33.33%, 6px 38.89%, 0 44.44%, 6px 50.00%, 0 55.56%, 6px 61.11%, 0 66.67%, 6px 72.22%, 0 77.78%, 6px 83.33%, 0 88.89%, 6px 94.44%, 0 100.00%, 100% 100%, 100% 0); transform: translate(7px, 5px) rotate(4deg); transform-origin: 0 0; }
:root[data-text="larger"] .tk-f { grid-template-columns: 1fr; }
:root[data-contrast="more"] .tk-wrap { --tk-mut: rgba(255, 246, 227, 0.9); --tk-line: rgba(255, 232, 176, 0.75); }
/* Saved: the torn stub turns marquee gold and keeps it; the ticket itself stays maroon. */
.tk-wrap.saved .tk-stub { --tk-bg: linear-gradient(180deg, #F8D58E 0%, #F4C66E 45%, #DFA94F 100%); color: #2A1A12; }
.btn.x-save { margin-top: 18px; width: 100%; min-height: 54px; border-radius: 14px; font-size: var(--fs-b); }
.btn.x-save.quiet { background: var(--roseTint); color: var(--roseTintInk); }
.btn.x-save.on { background: transparent; background-image: none; color: var(--ink); border: 1.5px solid var(--hair); box-shadow: none; }
.x-main { margin-top: 10px; } .x-main .act-main { width: 100%; }
.x-ended { margin-top: 16px; }
.x-hr { height: 1px; background: var(--hair); margin: 18px 0; border: 0; }
.x-label { font: 800 13px/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.x-go { display: grid; grid-template-columns: repeat(3, 1fr); }
.x-go a { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: var(--fs-b); color: var(--ink); text-decoration: none; }
.x-go a + a { border-left: 1px solid var(--hair); } .x-go svg { color: var(--accent); }
.x-about { font-size: 17px; line-height: 1.5; margin: 0; }
.x-note { margin-top: 18px; color: var(--muted); font-size: var(--fs-s); }
.x-h2 { margin: 28px 16px 12px; font-size: var(--fs-t); font-weight: 700; letter-spacing: var(--trk-t); }
.x-shows { margin: 0 16px 24px; }
.x-show { display: grid; grid-template-columns: 64px minmax(0,1fr) 44px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.x-show:last-child { border-bottom: 1px solid var(--hair); }
.x-show .dd { text-align: center; }
.x-show .dd small { display: block; font: 800 12px/1 'Sofia Sans Condensed', var(--font); letter-spacing: 0.16em; color: var(--muted); }
.x-show .dd b { display: block; font: 800 32px/1 'Sofia Sans Condensed', var(--font); }
.x-show .tm { font-size: 18px; font-weight: 700; } .x-show .vn { color: var(--muted); font-size: var(--fs-s); } .x-show .tag { color: var(--accent); font-weight: 700; }
.x-show.past { opacity: 0.55; }
.x-bm { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid var(--hair); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.x-bm.on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
/* A saved showing is printed on the ticket's stock, its date on the gold stub. */
.x-show.tkt { margin: 8px 0; padding: 10px 12px; border: 0; border-radius: 4px; color: var(--tk-ink); background: var(--grain), linear-gradient(180deg, var(--hb-top) 0%, var(--hb) 45%, var(--hb-floor) 100%); }
.x-show.tkt + .x-show { border-top: 0; }
.x-show.tkt .dd { padding: 6px 0; border-radius: 3px; background: linear-gradient(180deg, #F8D58E 0%, #F4C66E 45%, #DFA94F 100%); }
.x-show.tkt .dd small { color: #7A2639; } .x-show.tkt .dd b { color: #2A1A12; }
.x-show.tkt .vn { color: var(--tk-mut); } .x-show.tkt .tag { color: var(--tk-gold); }
.x-show.tkt .x-bm.on { background: var(--tk-ink); border-color: var(--tk-ink); color: var(--hb); }
/* ---------- motion ---------- */
/* The grab strip covers the sheet's whole top edge, so a thumb anywhere along it drags the sheet; the bar is drawn in the middle. */
.sgrab { position: relative; width: auto; height: 27px; margin: -20px -16px 0; border-radius: 0; background: none; touch-action: none; cursor: grab; }
.sgrab::after { content: ''; position: absolute; left: 50%; top: 12px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--hair); }
.sheet-head, #sheet > h2 { touch-action: pan-x; }
.sheet-head h2, #sheet > h2 { -webkit-user-select: none; user-select: none; }
/* Narrow phones and larger text: the time bar drops its counts, and scrolls sideways before it would shrink anyone's text. */
.tjump .track { overflow-x: auto; scrollbar-width: none; container-type: inline-size; } .tjump .track::-webkit-scrollbar { display: none; }
.tjump button { flex: 1 0 auto; padding: 0 10px; }
@container (max-width: 329px) { .tjump button small { display: none; } }
:root[data-text="large"] .tjump button small, :root[data-text="larger"] .tjump button small { display: none; }
/* Getting there: on narrow screens each icon sits above its label, as in iPhone action rows, so "Directions" never crowds "Uber". */
.x-go { container-type: inline-size; }
@container (max-width: 339px) { .x-go a { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 4px; text-align: center; } }
:root[data-text="larger"] .x-go a { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 4px; text-align: center; }
.tjump::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
::view-transition-group(hero) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; width: 100%; object-fit: cover; }
/* card and page use the same photo file, so one copy moves and resizes; two crossfading crops read as a ghost */
::view-transition-image-pair(hero) { overflow: hidden; }
/* always move the big page photo (sharp), never the small card's copy (soft when enlarged) */
:root.vt-open::view-transition-old(hero) { display: none; } :root.vt-open::view-transition-new(hero) { animation: none; }
:root.vt-back::view-transition-new(hero) { display: none; } :root.vt-back::view-transition-old(hero) { animation: none; }
/* the page's shade, title and back button fade in over the moving photo instead of popping in at the end */
.vt .dhero .shade { view-transition-name: dshade; } .vt .dhero h1 { view-transition-name: dtitle; } .vt .dhero .back { view-transition-name: dback; }
::view-transition-new(dshade), ::view-transition-new(dtitle), ::view-transition-new(dback) { animation-delay: 140ms; animation-duration: 130ms; }
::view-transition-old(dshade), ::view-transition-old(dtitle), ::view-transition-old(dback) { animation-duration: 110ms; }
::view-transition-old(root) { animation-duration: 130ms; } ::view-transition-new(root) { animation-duration: 200ms; }
/* the photo's dark backing would stay behind as a gray box while the photo moves; hide it during the transition */
.vt .dhero { background: transparent; }
.gbar { view-transition-name: tabbar; }

/* ---------- launch, before the lineup ---------- */
/* Sign-up pop-up: the cream marquee board as a centered card (cream in both modes, like the home marquee). */
.su { width: min(360px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 2px solid #0B0B0B; border-radius: 14px; background: #FBF7EE; color: #151311; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,214,140,0.28); overflow: auto; overscroll-behavior: contain; }
.su::backdrop { background: rgba(12,9,7,0.62); }
.su-top { padding: 6px 0; background: #2A2622; border-bottom: 1px solid #D9CFBD; }
.su .bulbs { display: block; height: 14px; background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 50% / 16px 14px space no-repeat; }
.su-x { position: absolute; top: 30px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; color: #3A3530; }
.su-body { padding: 16px 20px 16px; }
.su-k { margin: 0; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #963246; }
.su-k { padding-right: 36px; }
.su-h { margin: 6px 0 0; font: 800 calc(31px * var(--ts, 1))/0.98 'Sofia Sans Condensed', var(--font); letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; color: #151311; }
.su-b { margin: 10px 0 0; color: #3A3530; text-wrap: pretty; }
.su form { display: grid; gap: 10px; margin-top: 14px; }
.su .cf-f { margin-top: 0; }
.su .cf-f input { background: #FFFFFF; color: #151311; border-color: #8A8178; }
.su .cf-f input::placeholder { color: #6E665E; }
.su .cf-f input:focus { border-color: #963246; }
.su .cf-err { color: #A0360F; }
.su-go { width: 100%; min-height: 48px; }
.su-later { display: block; width: 100%; min-height: 44px; margin-top: 4px; color: #3A3530; font-weight: 600; text-align: center; }
.su-priv { margin: 2px 0 0; font-size: var(--fs-s); color: #5E5650; text-align: center; text-wrap: balance; }
.su-h:focus { outline: none; }
.su-prev { display: inline-block; margin: 10px 0 0; padding: 3px 8px; border-radius: 5px; background: #EFE6D3; color: #5E5650; font-size: var(--fs-s); font-weight: 700; }
.su .su-go:last-child { margin-top: 16px; }

/* What's On before the lineup */
.soon-dates { padding: 0 16px; }
.soon-dates .fact-row:first-child { border-top: 0; padding-top: 0; }
.soon-sub { margin: -4px 16px 8px; }
.soon-press { margin: 10px 16px 0; }
.sec .checked { margin: 8px 16px 0; }
.row.place .soon-th { width: 64px; height: 64px; border-radius: 12px; }
/* Home: one wide card for getting around */
.tc.tc-wide { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: calc(100% - 32px); min-height: 0; margin: 0 16px; text-align: left; }
/* Photo credit links: full 44 px tap targets */
.cred-l a { display: inline-block; min-width: 44px; text-align: center; }
/* Fun: games and nights out */
:root { --fun-g: #0B6E99; --fun-t: #E1F3FB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fun-g: #8FD3F0; --fun-t: #10303D; } }
:root[data-theme="dark"] { --fun-g: #8FD3F0; --fun-t: #10303D; }
.k-fun { --g: var(--fun-g); --t: var(--fun-t); }
.pin.p-fun { --pin: #1478A6; }
.games { margin: 12px 0 0; font-size: var(--fs-b); }
/* A place without a photo yet: stripes and its category icon, filling the photo box */
.pimg-ph { width: 100%; height: 100%; color: var(--g, var(--muted)); }
.row.place .pimg-ph { width: 64px; height: 64px; border-radius: 12px; }
.mcard .pimg-ph { width: 72px; height: 72px; border-radius: 12px; flex: none; }
.dhero.no-photo { background: repeating-linear-gradient(135deg, #2A2A2E 0 14px, #333338 14px 28px); }
/* ---------- the real map ---------- */
/* The map fills the screen. The list panel overlaps its bottom; scroll or tap Show list to pull it up. */
.mapwrap { height: 100svh; min-height: 560px; }
/* .mapwrap in front so this beats maplibre-gl.css (.maplibregl-map sets position: relative), whichever file loads last. */
.mapwrap .realmap { position: absolute; inset: 0; background: var(--m-land, #F5F3EE); }
.realmap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.msheet { margin-top: -236px; min-height: 74vh; }
.msheet-top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.msheet-top .grab { margin: 0; }
.list-toggle { position: absolute; right: 12px; top: 4px; min-height: 44px; }
/* Zoom and location: large buttons in one group, easy to hit with a thumb. */
.mapctl { position: absolute; z-index: 5; right: 12px; bottom: 256px; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); box-shadow: 0 4px 16px rgba(0,0,0,0.18); overflow: hidden; }
.mapctl button { width: 56px; height: 56px; display: grid; place-items: center; color: var(--ink); }
.mapctl button + button { border-top: 1px solid var(--hair); }
.mapctl [data-locate] { color: #2E7CF6; }
.mapctl button:active { background: var(--canvas); }
.mapfail { position: absolute; z-index: 6; left: 16px; right: 16px; top: 42%; display: grid; gap: 10px; justify-items: center; padding: 16px; border-radius: 16px; background: var(--panel); box-shadow: 0 6px 20px rgba(0,0,0,0.2); text-align: center; font-weight: 600; }
.mapfail[hidden] { display: none; }
.mapfail p { margin: 0; }
/* Pins: bigger dots; names show when zoomed in close, or on the pin you tapped. */
.realmap .pin .dot { width: 38px; height: 38px; border-radius: 19px; }
.realmap .pin .nm { display: none; text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg); }
.realmap.names .pin .nm, .realmap .pin[aria-pressed="true"] .nm { display: block; }
.realmap .pin[aria-pressed="true"] { z-index: 4; }
.realmap .pin[aria-pressed="true"] .dot { transform: scale(1.18); box-shadow: 0 0 0 3px var(--pin), 0 2px 8px rgba(0,0,0,0.35); }
.k-out { --g: var(--free-g); --t: var(--free-t); }
.pin.p-out { --pin: #3E7D31; }
.pin.p-venue { --pin: #566273; }
/* Map credit: required by OpenStreetMap; kept small, above the list panel. */
.realmap .maplibregl-ctrl-bottom-left { bottom: 244px; }
.realmap .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 28px; }
.realmap .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 44px; min-width: 44px; }
.realmap .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 22px; }
.realmap .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; background-position: center; background-repeat: no-repeat; background-size: 22px 22px; border-radius: 22px; }
.realmap .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { width: 44px; padding: 0; }
/* Arts & culture */
.k-arts { --g: var(--music-g); --t: var(--music-t); }
.pin.p-arts { --pin: #7A4ABA; }
.arts-g { margin: 18px 16px 6px; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Add to Home Screen card: maroon, above the tab bar, same colors in light and dark. */
.ahc { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); width: min(456px, calc(100% - 24px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: 10px 0 10px 12px; border-radius: 18px;
  background: #963246; color: #FFF6E3; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.ahc img { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 0 0 2px #FFF6E3; }
.ahc-t { display: grid; min-width: 0; } .ahc-t .t { font-weight: 700; font-size: var(--fs-b); line-height: 1.2; } .ahc-t .m { font-size: var(--fs-s); color: #F6DCE0; }
.ahc-go { min-height: 44px; padding: 0 18px; border-radius: 22px; background: #FFF6E3; color: #963246; font-weight: 700; }
.ahc-x { width: 44px; height: 44px; display: grid; place-items: center; color: #F6DCE0; }
.ahc :focus-visible { outline-color: #FFF6E3; }
#view.has-ahc { padding-bottom: 210px; }
/* Where to tap: little drawings of the browser with the button circled */
.sheet .sheet-head h2.ah-wh { font: 800 calc(36px * var(--ts, 1))/0.96 'Sofia Sans Condensed', var(--font); letter-spacing: 0.03em; text-transform: uppercase; }
.ah-sub { margin-top: 4px; color: var(--muted); }
.ah-steps { list-style: none; margin: 0; padding: 0; }
.ah-steps li { margin-top: 18px; }
.ah-lab { display: flex; gap: 10px; align-items: baseline; font-weight: 600; margin-bottom: 8px; }
.ah-lab b { font: 800 calc(24px * var(--ts, 1))/1 'Sofia Sans Condensed', var(--font); color: var(--roseTintInk); min-width: 14px; }
.ah-lab small { display: block; margin-top: 3px; font-size: var(--fs-s); font-weight: 400; color: var(--muted); }
.ah-pic { border-radius: 14px; background: var(--canvas); padding: 12px; }
.ah-sbar { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.ah-addr { height: 36px; border-radius: 18px; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; }
.ah-circ { width: 36px; height: 36px; border-radius: 18px; background: var(--panel); display: grid; place-items: center; color: var(--ink); }
.ah-ring { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 6px var(--rose); }
.ah-menu { display: grid; gap: 6px; }
.ah-mi { height: 40px; border-radius: 10px; background: var(--panel); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14.5px; }
.ah-mi.on { font-weight: 700; box-shadow: inset 0 0 0 2px var(--rose); }
.ah-ph { height: 8px; border-radius: 4px; background: var(--hair); flex: 1; max-width: 120px; }
.ah-addbar { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 14px; padding: 2px 2px 10px; }
.ah-blue { color: #2E62C9; } :root[data-theme="dark"] .ah-blue { color: #6FA0FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ah-blue { color: #6FA0FF; } }
.ah-hit { font-weight: 700; padding: 6px 10px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--rose); }
.ah-tog { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--panel); font-size: 14.5px; }
.ah-tog i { width: 42px; height: 26px; border-radius: 13px; background: #34C759; position: relative; } .ah-tog i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 11px; background: #FFFFFF; }
.ah-inst { background: var(--panel); border-radius: 12px; padding: 14px; display: grid; gap: 12px; font-size: 14.5px; }
.ah-row { display: flex; justify-content: flex-end; gap: 14px; align-items: center; color: #2E62C9; font-weight: 600; }
.mpanel .acts + .m { margin-top: 12px; }

/* Sign-up as a rose poster (replaces the cream board): countdown, festival dates, one field. Fixed colors, so dark mode matches light. */
.su { border: 0; border-radius: 20px; background: #963246; color: #FFF6E3; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55); }
.su::backdrop { background: rgba(10,10,12,0.55); }
.su-body { position: relative; padding: 22px 22px 14px; }
.su-x { top: 6px; right: 6px; color: #F6DCE0; }
.su-cd { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-right: 40px; }
.su-cd b { font: 800 calc(52px * var(--ts, 1))/0.9 'Sofia Sans Condensed', var(--font); color: #F4C66E; }
.su-cd span { font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #F6DCE0; }
.su-rule { display: block; border-top: 1.5px dashed rgba(255,246,227,0.4); margin: 14px 0 12px; }
.su-k { color: #F4C66E; padding-right: 0; }
.su-big { margin: 8px 0 0; font: 800 calc(64px * var(--ts, 1))/0.86 'Sofia Sans Condensed', var(--font); letter-spacing: 0.02em; text-transform: uppercase; }
.su-b { margin-top: 14px; color: #F6DCE0; }
.su-h { color: #FFF6E3; }
.su .cf-f input { background: #FFF6E3; border-color: #FFF6E3; color: #151311; }
.su .cf-f input:focus { border-color: #F4C66E; }
.su .cf-err { color: #FFE0A8; }
.su .su-go { background-color: #FFF6E3; color: #963246; } /* cream button on the rose poster */
.su .su-go:active { background-color: #F1E6CF; }
.su-later { color: #F6DCE0; }
.su-priv { color: #F2C9D0; }
.su-prev { background: rgba(255,246,227,0.16); color: #FFF6E3; }
.su :focus-visible { outline-color: #FFF6E3; }

/* Breathing room, measured against Boulder 101: rows with 16px above and below, a gap under every title, 32px before each section. */
.apple { --trk-xl: 0em; --trk-l: 0em; --trk-t: 0em; --trk-b: 0em; --trk-s: 0em; }
.m { line-height: 1.45; }
.shh { margin: 32px 16px 14px; }
.sec { margin: 16px 10px; padding-bottom: 20px; }
.sec .shh { margin: 20px 16px 14px; }
.sec .rail { padding: 0 16px 2px; scroll-padding-inline: 16px; }
.rail { gap: 16px; }
.land .t { margin-top: 10px; } .land .m { margin-top: 2px; }
.tc { min-height: 120px; padding: 16px; }
.list { margin: 16px 16px 0; }
.row { padding: 16px 0; column-gap: 14px; }
.row .m { margin-top: 3px; }
.fact { line-height: 1.55; }
.fact-row { padding: 16px 0; gap: 14px; }
.dbody { padding: 20px 16px 0; gap: 16px; }
.act-row { gap: 10px; }
.act { min-height: 72px; }
.info-row { min-height: 60px; padding: 14px 0; }
.x-about { line-height: 1.55; }

/* Logo lower and bigger; room for the notch and status bar when the app opens from the Home Screen. */
.top { height: auto; min-height: 56px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
.head .top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.wm, .head .wm { font-size: calc(28px * var(--ts, 1)); }
.map-top .wm { font-size: calc(24px * var(--ts, 1)); }
/* Measured gaps: at least 24px between the main pieces on every phone size and text size. */
.top, .head .top { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.head h1 { margin-top: 26px; }
.marquee + .secs { margin-top: 20px; }
/* "Sundance in Boulder" on the marquee: room above and below, and tracking that keeps the three words together. */
.marquee .mq { padding-top: 10px; }
.mq-k { letter-spacing: 0.14em; word-spacing: -0.08em; }
.mq-t { margin-top: 6px; }
/* "Boulder, today.": a tighter space after the comma, and the two lines closer when it wraps. */
.hero h1 { word-spacing: -0.08em; line-height: 0.96; }
/* The lineup ticket: a taller stub and bigger letters. */
.mq-ticket { font-size: 14px; padding: 0 18px 0 16px; gap: 8px; }
.mq-ticket::before { top: 4px; height: 36px; }

/* Grouped page, after Apple's grouped lists: tabs sit on a very light grey so white cards read as cards. Lighter than iOS's #F2F2F7 to keep the page feeling white. */
:root { --gbg: #F5F5F7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gbg: var(--bg); } }
:root[data-theme="dark"] { --gbg: var(--bg); }
body.grouped { background: var(--gbg); }
body.grouped .secs { background: transparent; }
body.grouped .note { background: var(--panel); }
body.grouped .tjump { background: var(--gbg); }

/* Boulder 101 as grouped cards: one rounded card per section, a small grey label above it. */
.guide { padding: 0 16px 8px; }
.guide .gdiv { margin: 30px 4px 8px; justify-content: flex-start; }
.guide .gdiv::before, .guide .gdiv::after { display: none; }
.guide .gpill { padding: 0; background: none; color: var(--muted); font-size: calc(13px * var(--ts, 1)); letter-spacing: 0.1em; }
.guide .gr { background: var(--panel); padding: 14px 16px 14px 14px; grid-template-columns: 34px minmax(0, 1fr) 104px; border-top: 1px solid var(--hair); }
.guide .gdiv + .gr { border-top: 0; padding-top: 14px; border-radius: 20px 20px 0 0; }
.guide .gr:last-child { border-radius: 0 0 20px 20px; }
.guide .gdiv + .gr:last-child { border-radius: 20px; }
.guide .gr img { width: 104px; height: 104px; border-radius: 14px; }

/* Sign-up as a two-tone card: the rose poster on top, an iOS-style form on white below. Same colors in light and dark. */
.su { background: #FFFFFF; color: #151311; }
.su-body { padding: 0 0 12px; }
.su-poster { position: relative; padding: 22px 22px 20px; background: #963246; color: #FFF6E3; }
.su-low { padding: 16px 20px 0; }
.su-low .su-b { margin-top: 0; color: #5E5E66; }
.su-low .su-h { color: #151311; }
.su .cf-f input { height: 52px; border-radius: 12px; font-size: 17px; background: #F2F2F7; border-color: transparent; color: #111113; }
.su .cf-f input::placeholder { color: #8A8A8E; }
.su .cf-f input:focus { border-color: #963246; }
.su .cf-err { color: #A0360F; }
.su .su-go { background-color: #963246; color: #FFFFFF; }
.su .su-go:active { background-color: #7E2A3B; }
.su-later { color: #5E5E66; }
.su-priv { color: #6E6E73; }
.su-prev { background: #F2F2F7; color: #5E5E66; }
.su-low :focus-visible { outline-color: #2E62C9; }
/* Narrow phones (iPhone SE size): smaller photos so topic titles keep their width. */
@media (max-width: 359px) { .guide .gr { grid-template-columns: 28px minmax(0, 1fr) 76px; gap: 10px; padding: 12px; } .guide .gr img { width: 76px; height: 76px; border-radius: 12px; } }
/* Privacy and Contact under the sign-up's small print */
.su-links { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 2px 0 0; color: #8A8A8E; }
.su-links button { min-height: 44px; padding: 0 10px; color: #963246; font-size: var(--fs-s); font-weight: 600; }
/* Short screens (iPhone SE size): a smaller poster so the whole sign-up, small print included, fits without scrolling. */
@media (max-height: 640px) {
  .su-poster { padding: 14px 18px 14px; }
  .su-cd b { font-size: calc(36px * var(--ts, 1)); }
  .su-rule { margin: 8px 0 8px; }
  .su-big { margin-top: 4px; font-size: calc(42px * var(--ts, 1)); }
  .su-low { padding-top: 12px; }
  .su .cf-f input { height: 46px; }
  .su form { margin-top: 10px; gap: 8px; }
  .su-go { min-height: 46px; }
}
@media (max-height: 640px) { .su-poster { padding: 12px 18px; } .su-big { font-size: calc(38px * var(--ts, 1)); } .su-cd b { font-size: calc(32px * var(--ts, 1)); } .su-body { padding-bottom: 6px; } }

/* Section headers as a marquee band (Nov 9, 2026): maroon velvet with a light top-to-floor shade, a row of bulbs,
   cream poster type and a short gold rule. One maroon on every header; buttons carry the marquee gold.
   Bulbs match the Today marquee board: same size and spacing, and `space` keeps every bulb whole at both ends on any screen width. */
:root { --hb: #7A2639; --hb-top: #833547; --hb-floor: #4F1925; --bulb: #F4C66E; --onHb: #FFF6E3; }
.sec .shh { position: relative; gap: 6px; margin: 0 0 16px; padding: 26px 16px 20px; color: var(--onHb);
  background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 4px / 16px 14px space no-repeat,
    linear-gradient(180deg, var(--hb-top) 0%, var(--hb) 45%, var(--hb-floor) 100%); }
.sec .shh::after { content: ""; position: absolute; left: 16px; bottom: 10px; width: 36px; height: 3px; border-radius: 2px; background: var(--bulb); }
.sec .shh h2 { font: 800 calc(23px * var(--ts, 1))/1.05 'Sofia Sans Condensed', var(--font); letter-spacing: 0.03em; text-transform: uppercase; color: var(--onHb); }
.sec .shh .lk { color: var(--onHb); font-size: calc(14px * var(--ts, 1)); }
.sec .shh .tile { background: none; color: var(--bulb); }
.sec .shh .tile svg { width: 24px; height: 24px; }
.sec .shh :focus-visible { outline-color: var(--onHb); }
/* Narrower phones (most Androids are 360px wide): a smaller title so "Eat and drink nearby" stays on one line.
   At iPhone SE (1st gen) width, "See all" keeps its name for screen readers but shows only the arrow. Larger text may wrap, by design. */
@media (max-width: 374px) { .sec .shh h2 { font-size: calc(20px * var(--ts, 1)); } }
@media (max-width: 339px) {
  .sec .shh h2 { font-size: calc(19px * var(--ts, 1)); }
  .sec .shh .lk { font-size: 0; min-width: 44px; justify-content: center; }
}
/* The lineup ticket takes the button color. */
.mq-ticket { --accent: var(--btn); color: var(--onBtn); }

/* Icons stand alone (Nov 9, 2026): no pastel squares or circles behind them, solid icons in the app's one accent. */
.tile, .circ { background: none; color: var(--planInk); --g: var(--planInk); }
.qa .circ svg { width: 30px; height: 30px; }
.fact-row .tile svg, .grow .tile svg { width: 24px; height: 24px; }

/* Smaller corners (Nov 9, 2026): 10px on cards and groups, 8px on photos and buttons, 10px on the tall buttons. */
.sec, .group, .guide .gdiv + .gr:last-child { border-radius: 10px; }
.guide .gdiv + .gr { border-radius: 10px 10px 0 0; }
.guide .gr:last-child { border-radius: 0 0 10px 10px; }
.land .im, .post .im, .popc .im, .row.place img, .gr img, .guide .gr img, .pcard, .note { border-radius: 8px; }
.btn, .btn.small, .act { border-radius: 8px; }
.act-main, .btn.x-save, .save-row.big .btn { border-radius: 10px; }
.sheet { border-radius: 14px 14px 0 0; }

/* Boulder 101 jump buttons: a thin outline instead of the rose tint (Nov 9, 2026). Capsules keep their shape. */
:root { --chipEdge: rgba(150,50,70,0.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chipEdge: rgba(222,107,117,0.5); } }
:root[data-theme="dark"] { --chipEdge: rgba(222,107,117,0.5); }
.gjump .gchip { background: none; color: var(--planInk); box-shadow: inset 0 0 0 1px var(--chipEdge); }

/* Page titles on a short photo (Nov 10, 2026): darkened at the top for the logo and at the bottom for the title.
*/
.head.ph { display: flex; flex-direction: column; min-height: calc(250px + env(safe-area-inset-top, 0px)); padding: 0 16px 20px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.72) 100%), var(--hp) center / cover, #2A2A2E; }
.head.ph .wm, .head.ph .wm b, .head.ph .menu { color: #FFFFFF; }
.head.ph .wm, .head.ph h1 { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } .head.ph .menu svg { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); } /* bright facades behind the logo */
.head.ph h1 { margin-top: auto; padding-top: 24px; color: #FFFFFF; }
.head.ph .sub { color: rgba(255, 255, 255, 0.88); }

/* Boulder 101's January card: shown until the live forecast loads, or when it can't (Nov 10, 2026). */
.wxcard { position: relative; display: block; width: calc(100% - 32px); min-height: 168px; margin: 16px 16px 0; padding: 16px; border-radius: 10px; overflow: hidden; text-align: left; color: #FFFFFF;
  background: linear-gradient(90deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%), var(--wp) center / cover, #2A2A2E; }
.wxcard .k { display: block; padding-right: 44px; font-size: calc(17px * var(--ts, 1)); font-weight: 600; }
.wxcard .n { display: block; margin-top: 14px; font: 800 calc(72px * var(--ts, 1))/0.9 'Sofia Sans Condensed', var(--font); }
.wxcard .l { display: block; margin-top: 6px; font-size: var(--fs-b); font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.wxcard .chev { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-transparency="reduce"] .wxcard .chev, :root[data-contrast="more"] .wxcard .chev { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141416; }
.sheet .wxbig { margin-top: 4px; } .sheet .wx-sum { margin-top: 12px; } .sheet .dsub { margin-top: 26px; }

/* Live weather (Nov 10, 2026), in BoulderNOW's own style: the snowy Flatirons photo, poster numerals like the section titles,
   the next hours on a smoked strip. The forecast sheet opens on the same photo, then plain cards. */
.wxlive { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: calc(100% - 32px); margin: 16px 16px 0; padding: 14px 16px 10px; border-radius: 10px;
  text-align: left; color: #FFFFFF; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.55)), url(img/w-snow.jpg) center / cover, #2A2A2E; }
.wl-city { font-size: calc(15px * var(--ts, 1)); font-weight: 700; }
.wl-t { display: block; margin-top: 6px; font: 800 calc(68px * var(--ts, 1))/0.86 'Sofia Sans Condensed', var(--font); }
.wl-side { display: grid; justify-items: end; align-content: start; gap: 3px; padding-top: 4px; text-align: right; font-size: calc(14px * var(--ts, 1)); font-weight: 600; }
.wl-hl { font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.wl-hrs, .wxs-hrs { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; }
.wl-hrs li, .wxs-hrs li { display: grid; justify-items: center; gap: 6px; font-size: calc(13px * var(--ts, 1)); font-weight: 600; }
.wl-hrs b, .wxs-hrs b { font-size: calc(16px * var(--ts, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-hrs { margin: 14px -8px 0; padding: 10px 0 8px; border-radius: 10px; background: rgba(10, 10, 12, 0.42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wl-hrs svg { width: 22px; height: 22px; }
:root[data-transparency="reduce"] .wl-hrs, :root[data-contrast="more"] .wl-hrs { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 12, 0.78); }
/* Weather icons: sun and moon in their own colors; clouds, rain and snow white on the photo, slate on the sheet's cards */
.wi { display: inline-flex; line-height: 0; } .wi.wx-sun { color: #FFD86B; } .wi.wx-moon { color: #F1EAD3; }
.wxs-card .wi { color: #6F7C90; } .wxs-card .wi.wx-sun { color: #D9961A; } .wxs-card .wi.wx-moon { color: #8C7F5A; }
/* The forecast sheet: the visible title stays for screen readers only, the photo card says it */
.wx-live .sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wxs-hero { padding: 18px 16px 20px; border-radius: 14px; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6)), url(img/w-snow.jpg) center / cover, #2A2A2E; }
.wxs-city { font-size: calc(17px * var(--ts, 1)); font-weight: 700; }
.wxs-t { margin-top: 8px; font: 800 calc(110px * var(--ts, 1))/0.84 'Sofia Sans Condensed', var(--font); }
.wxs-c { margin-top: 8px; font-size: calc(20px * var(--ts, 1)); font-weight: 600; }
.wxs-hl { margin-top: 2px; font-size: var(--fs-b); font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.wxs-card { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--canvas); }
.wxs-card h3, .wxs-tips .dsub { padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: calc(13px * var(--ts, 1)); font-weight: 600; color: var(--muted); }
.wxs-tips .dsub { margin-top: 0; border-bottom: 0; }
.wxs-hrs { margin-top: 10px; }
.wxs-days { list-style: none; margin: 0; padding: 0; }
.wxs-days li { display: grid; grid-template-columns: 52px 26px 40px minmax(0, 1fr) 40px; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--hair); }
.wxs-days li:first-child { border-top: 0; }
.wxs-days .dn, .wxs-days .dl, .wxs-days .dh { font-size: calc(17px * var(--ts, 1)); font-weight: 600; }
.wxs-days .dl, .wxs-days .dh { text-align: right; font-variant-numeric: tabular-nums; } .wxs-days .dl { color: var(--muted); }
.wxs-days .bar { position: relative; height: 5px; border-radius: 3px; background: var(--hair); }
.wxs-days .bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #7FA7C9, #F4C66E); }
.wxs-days .bar b { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 5px; background: var(--panel); transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--ink); }
.wxs-src { margin-top: 14px; font-size: var(--fs-s); text-align: center; color: var(--muted); }

/* Every section title in the app sits on the maroon marquee band, and section cards get a very subtle shadow (Nov 11, 2026). */
:root { --secShadow: 0 1px 2px rgba(21, 18, 15, 0.08), 0 5px 14px -6px rgba(21, 18, 15, 0.2); }
:root[data-theme="dark"] { --secShadow: none; } /* shadows don't show on a dark page */
.sec, .guide .gsec, .plan-secs .plc, body.grouped .note, .wxlive, .wxcard { box-shadow: var(--secShadow); }
/* One band look for every section title */
.guide .gdiv, .plan-secs .group, .msheet .shh {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 26px 16px 20px; color: var(--onHb);
  background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 4px / 16px 14px space no-repeat,
    linear-gradient(180deg, var(--hb-top) 0%, var(--hb) 45%, var(--hb-floor) 100%); }
.guide .gdiv::after, .plan-secs .group::after, .msheet .shh::after { content: ""; display: block; position: absolute; left: 16px; bottom: 10px; width: 36px; height: 3px; border-radius: 2px; background: var(--bulb); }
.guide .gdiv::before { display: none; }
.guide .gpill, .plan-secs .group, .msheet .shh h2 { font: 800 calc(23px * var(--ts, 1))/1.05 'Sofia Sans Condensed', var(--font); letter-spacing: 0.03em; text-transform: uppercase; color: var(--onHb); }
/* Boulder 101: each part is one card, its band on top */
.guide .gsec { margin-top: 24px; border-radius: 10px; overflow: hidden; }
.guide .gsec:first-child { margin-top: 16px; }
.guide .gdiv { margin: 0; border-radius: 0; }
.guide .gpill { padding: 0; background: none; }
.guide .gdiv + .gr { border-radius: 0; border-top: 0; }
.guide .gr:last-child, .guide .gdiv + .gr:last-child { border-radius: 0 0 10px 10px; }
/* Plan: each day gets a band, its plans below */
.plan-secs .group { margin: 24px 0 10px; border-radius: 10px; }
.plan-secs .group:first-child { margin-top: 8px; }
/* Map list */
.msheet .shh { margin: 4px 12px 12px; border-radius: 10px; }

/* What's On with Boulder's public listings (Nov 11, 2026): the lineup notice on top, then poster rows under maroon bands. */
.lnote { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; width: calc(100% - 32px); margin: 16px 16px 0; padding: 20px 14px 12px; border-radius: 10px; text-align: left;
  color: var(--onHb); box-shadow: var(--secShadow);
  background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 4px / 16px 14px space no-repeat,
    linear-gradient(180deg, var(--hb-top) 0%, var(--hb) 45%, var(--hb-floor) 100%); }
.ln-k { grid-column: 1; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bulb); }
.ln-t { grid-column: 1; font: 800 calc(22px * var(--ts, 1))/1.05 'Sofia Sans Condensed', var(--font); text-transform: uppercase; }
.ln-go { grid-column: 2; grid-row: 1 / 3; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--btn); color: var(--onBtn); font-weight: 700; font-size: calc(14px * var(--ts, 1)); white-space: nowrap; }
.lnote:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:root:not([data-motion="reduce"]) .lnote { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
:root:not([data-motion="reduce"]) .lnote:active { transform: scale(0.98); }
/* A poster with no fitting photo: dark card, a row of whole bulbs, the name in poster type. */
.nf-type-only .nf-im { background: linear-gradient(160deg, #2A211C, #15120F); }
.nf-type-only .nf-im::after { background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 4px / 16px 14px space no-repeat; }
.nf-type-only .nf-type small { color: var(--bulb); opacity: 1; }
/* Long names wrap at word breaks and stop after a few lines, never mid-word. */
.nf-type b { overflow-wrap: normal; word-break: normal; hyphens: manual; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.nf-type b.long { font-size: calc(20px * var(--ts, 1)); line-height: 0.95; -webkit-line-clamp: 5; }
.wsec { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 66px); }
/* The band's small line gives way first; the title wraps only when nothing else fits. */
.wsec .shh h2 { flex-shrink: 0.001; }
.wsec .shs { text-align: right; font-size: calc(13px * var(--ts, 1)); font-weight: 600; color: #F6DCE0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wsec .nf-rail { padding: 0 16px 2px; scroll-padding-inline: 16px; }
.ev-note { margin: 12px 10px; } .ev-note p { margin: 0 0 10px; } .ev-note p:last-child, p.ev-note { margin-bottom: 0; }
.evsrc { margin: 4px 16px 18px; font-size: var(--fs-s); line-height: 1.4; color: var(--muted); }
.ev-host { margin: 6px 0 0; text-align: center; }
.ev-also { margin-bottom: 4px; border-top: 1px solid var(--hair); }
.ev-also button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--hair); text-align: left; }
.ev-also .t { display: block; font-weight: 700; } .ev-also .m { display: block; }
.dhero.ev-dark { background: radial-gradient(circle at 50% 50%, #FFE8B0 0 2.4px, rgba(255,196,90,0.5) 3.4px, rgba(255,196,90,0) 6px) 0 calc(env(safe-area-inset-top, 0px) + 6px) / 16px 14px space no-repeat, linear-gradient(160deg, #2A211C, #15120F); }
/* A listed event's name in poster type, sized to fit under the back button. */
.dhero.ev h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
  font: 800 calc(36px * var(--ts, 1))/0.95 'Sofia Sans Condensed', var(--font); letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; }
.dhero.ev.long h1 { font-size: calc(30px * var(--ts, 1)); }
/* When the part-of-day bar sticks under a notch, the strip above it fills in so posters don't scroll behind the clock. */
.tjump.stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: env(safe-area-inset-top, 0px); background: inherit; }

/* Stand-in photos say so on the page; a missing photo leaves its dark frame instead of a broken-image mark. */
.ph-tag { position: absolute; right: 12px; top: calc(16px + env(safe-area-inset-top, 0px)); padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,0.58); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
img.img-missing { visibility: hidden; }

/* For businesses */
.bz-secs .sec { padding-bottom: 16px; }
.bz-p { margin: 0 16px 14px; font-size: var(--fs-b); line-height: 1.45; }
.bz-go { display: flex; margin: 0 16px; min-height: 50px; }
.bz-foot { margin: 6px 16px 28px; line-height: 1.45; }
.bz-own { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 20px; padding: 0 2px; border-top: 1px solid var(--hair); color: var(--muted); font-size: var(--fs-s); font-weight: 600; text-align: left; }

/* Pop-ups: scrolling over the dim backdrop stays out of the page behind. */
.sheet::backdrop, .su::backdrop { overflow: hidden; overscroll-behavior: contain; }