/* The Lambton List
   Separate visual system from Lambton Family Hub.
   The public List uses its own chrome, four quick-link boxes and a time-led event card.
   Shared data/functions are infrastructure only; they do not define this brand. */

:root{
  /* After Dark (owner's pick, 26 September 2026): a night-out palette for an
     adult listings site, deliberately not the Hub's daytime one. Near-black
     ground, charcoal cards, warm off-white text, amber for times, prices and
     every accent, and a hot pink kept for the 19+ badge alone. */
  --ll-bg:#0e0f12;
  --ll-surface:#17191e;
  --ll-surface-2:#1f2228;
  --ll-ink:#f3f1ec;
  --ll-muted:#a6aab3;
  --ll-accent:#f5b544;
  --ll-on-accent:#15120a;
  --ll-accent-soft:rgba(245,181,68,.14);
  --ll-hot:#ff6b8b;
  --ll-line:#2c3038;
  --ll-shadow:0 10px 30px rgba(0,0,0,.35);
  --ll-width:1180px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ll-page{
  margin:0;
  background:var(--ll-bg);
  color:var(--ll-ink);
  font-family:'Inter',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.ll-filter-open{overflow:hidden}
a{color:inherit}
button,select{font:inherit}
.ll-shell,.ll-wrap{width:min(var(--ll-width),calc(100% - 3rem));margin-inline:auto}
.ll-skip{
  position:absolute;left:1rem;top:-5rem;z-index:2000;
  background:var(--ll-accent);color:var(--ll-on-accent);padding:.7rem 1rem;text-decoration:none
}
.ll-skip:focus{top:1rem}

/* Standalone Lambton List chrome. No LFH header/footer classes. */
.ll-site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(14,15,18,.93);border-bottom:1px solid var(--ll-line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.ll-header-row{min-height:76px;display:flex;align-items:center;gap:2rem}
.ll-wordmark{
  display:grid;gap:.12rem;line-height:1;text-decoration:none;flex:none
}
.ll-wordmark strong{
  color:var(--ll-ink);font-size:1.3rem;font-weight:850;letter-spacing:-.035em
}
.ll-wordmark small{
  color:var(--ll-muted);font-size:.6rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase
}
.ll-primary-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.ll-primary-nav>a,.ll-nav-categories>summary{
  min-height:42px;display:flex;align-items:center;
  border-radius:6px;padding:.62rem .78rem;
  color:var(--ll-ink);font-size:.86rem;font-weight:700;text-decoration:none;cursor:pointer;
  list-style:none
}
.ll-primary-nav>a:hover,.ll-primary-nav>a:focus-visible,.ll-nav-categories>summary:hover,.ll-nav-categories>summary:focus-visible{
  background:var(--ll-accent-soft);color:var(--ll-accent);outline:none
}
.ll-nav-categories{position:relative}
.ll-nav-categories>summary::-webkit-details-marker{display:none}
.ll-nav-categories>summary::after{content:'+';margin-left:.42rem;color:var(--ll-accent);font-size:1rem}
.ll-nav-categories[open]>summary::after{content:'–'}
.ll-category-menu{
  position:absolute;right:0;top:calc(100% + .45rem);width:250px;
  padding:.55rem;background:var(--ll-surface);border:1px solid var(--ll-line);border-radius:6px;box-shadow:var(--ll-shadow)
}
.ll-category-menu a{
  display:block;padding:.67rem .72rem;border-radius:4px;text-decoration:none;font-size:.85rem;font-weight:650
}
.ll-category-menu a:hover,.ll-category-menu a:focus-visible{background:var(--ll-accent-soft);outline:none}
.ll-mobile-menu{display:none;margin-left:auto;position:relative}
.ll-mobile-menu>summary{
  list-style:none;border:1px solid var(--ll-line);border-radius:6px;padding:.58rem .72rem;font-weight:750;cursor:pointer
}
.ll-mobile-menu>summary::-webkit-details-marker{display:none}
.ll-mobile-panel{
  position:absolute;right:0;top:calc(100% + .45rem);width:min(320px,calc(100vw - 2rem));
  max-height:72vh;overflow:auto;padding:.75rem;background:var(--ll-surface);border:1px solid var(--ll-line);border-radius:6px;box-shadow:var(--ll-shadow)
}
.ll-mobile-panel a,.ll-mobile-panel strong{display:block;padding:.66rem .7rem}
.ll-mobile-panel a{border-radius:4px;text-decoration:none;font-size:.88rem;font-weight:650}
.ll-mobile-panel a:hover,.ll-mobile-panel a:focus-visible{background:var(--ll-accent-soft);outline:none}
.ll-mobile-panel strong{padding-top:.9rem;color:var(--ll-muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}

.ll-site-footer{margin-top:0;background:#07080a;border-top:1px solid var(--ll-line);color:var(--ll-ink)}
.ll-footer-top{display:flex;justify-content:space-between;gap:3rem;padding:2.5rem 0 2rem}
.ll-footer-brand strong{display:block;font-size:1.15rem}
.ll-footer-brand p{max-width:580px;margin:.55rem 0 0;color:var(--ll-muted);line-height:1.65}
.ll-footer-links{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.65rem 1.2rem}
.ll-footer-links a{color:var(--ll-ink);text-decoration:none;font-size:.86rem}
.ll-footer-links a:hover,.ll-footer-links a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ll-footer-bottom{padding:1rem 0 1.35rem;border-top:1px solid var(--ll-line);color:var(--ll-muted);font-size:.76rem}
.ll-mobile-bar{display:none}

/* The sister site switch above the header (26 October 2026), a slim
   segmented control since 1 November 2026 like the Hub's (nav-footer.css):
   one 44px row, the List's own side in a soft amber tint with an amber
   hairline and amber name, Lambton Family Hub beside it, each site's line
   shown from 701px only. It scrolls away with the page. Built by
   sisterSwitch() in list-chrome.mjs. */
.lfh-sister--list,.lfh-sister--list *{box-sizing:border-box}
.lfh-sister--list{display:block;margin:0;padding:6px 16px;background:var(--ll-bg,#0e0f12);border-bottom:1px solid #2c3038}
.lfh-sister--list .lfh-sister-switch{
  display:flex;gap:3px;width:max-content;max-width:100%;margin:0 auto;padding:3px;
  border:1px solid #2c3038;border-radius:10px;background:#17191e
}
.lfh-sister--list .lfh-sister-side{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:4px 14px;border-radius:8px;
  background:transparent;color:#a6aab3;text-align:center;text-decoration:none;white-space:nowrap;font-family:'Inter',system-ui,sans-serif
}
.lfh-sister--list .lfh-sister-side strong{font-size:15px;font-weight:600;line-height:1.2;color:#f3f1ec}
.lfh-sister--list .lfh-sister-side span{font-size:14px;font-weight:400;line-height:1.2;color:#a6aab3}
.lfh-sister--list .lfh-sister-side span::before{content:"\00b7";margin-right:6px}
.lfh-sister--list .lfh-sister-side.is-current{background:rgba(245,181,68,.12);box-shadow:inset 0 0 0 1px rgba(245,181,68,.55)}
.lfh-sister--list .lfh-sister-side.is-current strong{color:#f5b544;font-weight:700}
.lfh-sister--list a.lfh-sister-side:hover strong{text-decoration:underline;text-underline-offset:3px}
.lfh-sister--list a.lfh-sister-side:focus-visible{outline:3px solid #f5b544;outline-offset:-3px}
@media(max-width:700px){
  .lfh-sister--list{padding:6px 12px}
  .lfh-sister--list .lfh-sister-switch{width:100%}
  .lfh-sister--list .lfh-sister-side{flex:1 1 0;min-width:0;padding:4px 8px}
  .lfh-sister--list .lfh-sister-side span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:360px){.lfh-sister--list .lfh-sister-side{padding:4px 6px}.lfh-sister--list .lfh-sister-side strong{font-size:14px}}

/* Our sister site, in the footer. */
.ll-footer-sister{padding:0 0 1.75rem}
.ll-footer-sister-head{margin:0 0 .35rem;color:var(--ll-muted);font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.ll-footer-sister a{display:inline-flex;align-items:center;min-height:44px;color:var(--ll-accent);font-size:1rem;font-weight:750;text-decoration:none}
.ll-footer-sister a:hover,.ll-footer-sister a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ll-footer-sister p:last-child{margin:0;color:var(--ll-muted);line-height:1.6}

/* One line after the List's event lists, pointing families to the Hub. */
.ll-sister-nudge{margin:1.25rem 0 0}
.ll-sister-nudge a{display:inline-block;padding:10px 0;color:var(--ll-accent);font-size:1rem;font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.ll-sister-nudge a:focus-visible{outline:3px solid var(--ll-accent);outline-offset:3px;border-radius:4px}

/* Hero */
.ll-hero{background:var(--ll-bg);border-bottom:1px solid var(--ll-line)}
.ll-hero .ll-wrap{padding:clamp(2rem,4vw,3.4rem) 0 clamp(1.6rem,3vw,2.6rem)}
.ll-eyebrow,.ll-kicker{
  margin:0 0 .72rem;color:var(--ll-accent);
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase
}
.ll-hero h1{
  max-width:860px;margin:0;color:var(--ll-ink);
  font-size:clamp(2.6rem,9vw,5.2rem);font-weight:900;line-height:.94;letter-spacing:-.055em
}
.ll-intro{
  max-width:790px;margin:.8rem 0 0;color:var(--ll-muted);
  font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.65
}
/* The link to the business directory under the intro. One line on a wide
   screen, two on a phone; no hover colour, the amber edge is the affordance. */
.ll-dir-link{
  display:flex;align-items:center;gap:.9rem;width:fit-content;max-width:100%;min-height:44px;
  margin:1.2rem 0 0;padding:.65rem 1rem;box-sizing:border-box;
  background:var(--ll-surface);border:1px solid var(--ll-line);border-left:3px solid var(--ll-accent);border-radius:10px;
  color:var(--ll-ink);text-decoration:none
}
.ll-dir-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;min-width:0}
.ll-dir-text b{font-size:.98rem;font-weight:750}
.ll-dir-text span{color:var(--ll-muted);font-size:.84rem;line-height:1.35}
.ll-dir-arrow{color:var(--ll-accent);font-weight:800;font-size:1.1rem}
.ll-dir-link:active{border-color:var(--ll-accent)}
.ll-dir-link:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-dir-link:hover .ll-dir-text b{text-decoration:underline;text-underline-offset:3px}
/* The four boxes: the List's version of the Hub homepage's action cards.
   Two by two on a phone, four across from 700px. No hover colour: the
   resting state is the affordance, and the box on screen carries a ring. */
.ll-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1.6rem 0 0;padding:0;list-style:none}
.ll-tiles li{margin:0;min-width:0}
.ll-tile{
  display:flex;flex-direction:column;gap:.15rem;height:100%;min-height:92px;
  padding:.8rem .9rem .85rem;border:1px solid var(--ll-line);border-radius:12px;
  background:var(--ll-surface);color:var(--ll-ink);text-decoration:none;
  -webkit-tap-highlight-color:rgba(245,181,68,.12)
}
.ll-tile--d{background:transparent;border-style:dashed}
.ll-tile-eyebrow{color:var(--ll-accent);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ll-tile-title{font-size:.98rem;font-weight:750;line-height:1.25;letter-spacing:-.01em}
.ll-tile-sub{color:var(--ll-muted);font-size:.76rem;line-height:1.35}
.ll-tile:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-tile.is-active{border-color:var(--ll-accent);box-shadow:inset 0 0 0 1px var(--ll-accent)}
.ll-jump{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.8rem}
.ll-jump button,.ll-sheet-actions button{
  min-height:44px;border:1px solid var(--ll-line);border-radius:8px;
  background:transparent;color:var(--ll-ink);padding:.62rem .9rem;font-weight:750;cursor:pointer
}
.ll-jump button:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-sheet-actions button:last-child{border-color:var(--ll-accent);background:var(--ll-accent);color:var(--ll-on-accent)}
@media(min-width:700px){
  .ll-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:2rem}
  .ll-tile{min-height:112px;padding:1rem 1.1rem 1.05rem}
  .ll-tile-title{font-size:1.06rem}
  .ll-tile-sub{font-size:.8rem}
}

/* Results */
.ll-listing{padding:3.2rem 0 5rem}
.ll-list-layout{display:block}
.ll-list-main{min-width:0}
.ll-calendar-panel{display:none}
.ll-list-head{
  display:flex;justify-content:space-between;align-items:end;gap:2rem;
  padding-bottom:.35rem;border-bottom:0
}
.ll-list-head h2{margin:0;font-size:clamp(1.75rem,4vw,2.7rem);letter-spacing:-.045em}
.ll-count{margin:0;color:var(--ll-muted);font-size:.86rem}
.ll-results{display:grid;gap:0}
.ll-load-more-wrap{display:flex;justify-content:center;margin-top:1.35rem}
.ll-load-more-wrap[hidden]{display:none!important}
.ll-load-more-wrap button{min-height:44px;padding:.7rem 1.15rem;border:1px solid var(--ll-accent);border-radius:5px;background:transparent;color:var(--ll-accent);font-weight:800;cursor:pointer}
.ll-load-more-wrap button:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-day-divider{display:flex;align-items:center;gap:.8rem;margin:1.45rem 0 .8rem;color:var(--ll-accent);font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.ll-day-divider::after{content:'';height:1px;flex:1;background:var(--ll-line)}
.ll-date-status{display:flex;align-items:center;gap:.65rem;margin:1rem 0 0;padding:.72rem .82rem;border:1px solid var(--ll-line);border-radius:5px;background:var(--ll-surface);color:var(--ll-muted);font-size:.84rem}
.ll-date-status[hidden]{display:none!important}
.ll-date-status strong{color:var(--ll-ink)}
.ll-date-status button{margin-left:auto;border:0;background:transparent;color:var(--ll-accent);font-weight:800;cursor:pointer}

/* LL_FILTER_MODE. The edge function stamps the mode on <body>; the page ships
   in date mode. Date mode hides every category control, category mode hides
   the date-only additions, and neither needs the script to have run. */
body[data-ll-filter-mode="date"] [data-ll-category-control]{display:none!important}
body[data-ll-filter-mode="category"] [data-ll-date-only]{display:none!important}

/* One date control on each screen (date mode): the Date field on a phone or
   tablet, the rail's calendar from 900px, where the field would repeat it.
   "More filters" (community, 19+) lives where each screen already looks for
   it: the phone bar's Filter up to 600px, this hero button in between, the
   rail from 900px. */
.ll-calendar-more{display:none}
@media(max-width:600px){.ll-jump{display:none}}
@media(min-width:900px){
  .ll-jump{display:none}
  body[data-ll-filter-mode="date"] .ll-date-filter{display:none}
  .ll-calendar-more{display:block;width:100%;min-height:44px;margin-top:.5rem;border:1px solid var(--ll-line);border-radius:5px;background:transparent;color:var(--ll-ink);font-weight:800;cursor:pointer}
  .ll-calendar-more:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
}

/* Date filter: one field that opens the calendar and nothing else. The
   native date input covers the field invisibly, so a tap anywhere on it opens
   the phone's own calendar; the text underneath says what is chosen. */
.ll-date-filter{display:flex;align-items:center;gap:.6rem;margin:1rem 0 .2rem}
.ll-date-label{flex:none;color:var(--ll-muted);font-size:.86rem;font-weight:750}
.ll-date-field{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  min-height:48px;padding:.6rem .85rem;border:1px solid var(--ll-line);border-radius:10px;background:var(--ll-surface);
  color:var(--ll-ink);font-size:16px;font-weight:700
}
.ll-date-field svg{width:20px;height:20px;flex:none;color:var(--ll-accent)}
.ll-date-field.is-active{border-color:var(--ll-accent);background:var(--ll-accent-soft);color:var(--ll-accent);box-shadow:inset 0 0 0 1px var(--ll-accent)}
.ll-date-field:focus-within{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-date-field input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;
  font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none
}
.ll-date-field input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;opacity:0;cursor:pointer}
.ll-date-clear{flex:none;min-height:48px;padding:0 .4rem;border:0;background:transparent;color:var(--ll-accent);font:inherit;font-size:.95rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ll-date-clear[hidden]{display:none}
@media(min-width:700px){
  .ll-date-field{flex:0 1 280px}
}

@media(min-width:900px){
  .ll-list-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.2rem;align-items:start}
  .ll-calendar-panel{display:block;position:sticky;top:96px;padding:1.05rem;border:1px solid var(--ll-line);border-radius:6px;background:var(--ll-surface);box-shadow:var(--ll-shadow)}
  .ll-calendar-head{padding-bottom:.8rem;border-bottom:1px solid var(--ll-line)}
  .ll-calendar-head .ll-kicker{margin-bottom:.32rem}
  .ll-calendar-head h2{margin:0;font-size:1.2rem;letter-spacing:-.025em}
  .ll-calendar-nav{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:.4rem;margin:.9rem 0}
  .ll-calendar-nav strong{text-align:center;font-size:.9rem}
  .ll-calendar-nav button{width:40px;height:40px;border:1px solid var(--ll-line);border-radius:5px;background:var(--ll-surface-2);color:var(--ll-ink);font-weight:800;cursor:pointer}
  .ll-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem}
  .ll-cal-dow{display:grid;place-items:center;height:28px;color:var(--ll-muted);font-size:.66rem;font-weight:800}
  .ll-cal-empty{height:34px}
  .ll-cal-day{position:relative;display:grid;place-items:center;height:34px;border:0;border-radius:5px;background:transparent;color:var(--ll-ink);font-size:.78rem}
  button.ll-cal-day{cursor:pointer}
  button.ll-cal-day:hover,button.ll-cal-day:focus-visible{background:var(--ll-accent-soft);outline:none}
  .ll-cal-day.has-events::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--ll-accent)}
  .ll-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--ll-accent)}
  .ll-cal-day.is-selected{background:var(--ll-accent);color:var(--ll-on-accent);font-weight:850}
  .ll-cal-day.is-selected.has-events::after{background:var(--ll-on-accent)}
  .ll-cal-day.is-past{color:var(--ll-muted);opacity:.5}
  .ll-calendar-key{display:flex;align-items:center;gap:.42rem;margin:.8rem 0 0;color:var(--ll-muted);font-size:.7rem}
  .ll-calendar-key span{width:6px;height:6px;border-radius:50%;background:var(--ll-accent)}
  .ll-calendar-clear{width:100%;min-height:40px;margin-top:.85rem;border:1px solid var(--ll-line);border-radius:5px;background:var(--ll-surface-2);color:var(--ll-ink);font-weight:800;cursor:pointer}
  .ll-calendar-clear[hidden]{display:none}
}

/* Event cards. The day is the divider above, so a card leads with its time:
   a narrow time column, then what it is, the title, where, who, and the
   facts as small soft chips. The whole card opens the event page (the title
   link is stretched over it); the website button sits above that layer. */
.ll-event-card{
  position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:1.25rem;
  margin:0 0 .7rem;padding:1.1rem 1.25rem;
  background:var(--ll-surface);border:1px solid var(--ll-line);border-radius:10px;color:inherit
}
.ll-card-side{display:flex;flex-direction:column;gap:.6rem;min-width:0;padding:.2rem 1rem 0 0;border-right:1px solid var(--ll-line)}
.ll-card-time{display:grid;align-content:start;gap:.2rem;margin:0}
/* Running right now: a small amber flag under the time, and the card's
   edge in the accent. Listings that have ended are gone from the list. */
.ll-on-now{align-self:start;padding:.18rem .42rem;border-radius:4px;background:var(--ll-accent);color:var(--ll-on-accent);font-size:.68rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ll-event-card.is-on-now{border-color:var(--ll-accent)}
/* The poster, when a listing has one. The server ships the empty slot, so
   the card is already this size when the browser adds the picture. */
.ll-poster{display:block;width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--ll-surface-2)}
.ll-poster img{display:block;width:100%;height:100%;object-fit:cover}
.ll-card-time strong{color:var(--ll-accent);font-size:1.25rem;font-weight:800;line-height:1.2;white-space:nowrap}
.ll-card-time span{color:var(--ll-muted);font-size:.76rem;line-height:1.3}
.ll-card-body{min-width:0}
.ll-card-kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .35rem;
  color:var(--ll-accent);font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase
}
.ll-badge{padding:.12rem .4rem;border-radius:4px;background:var(--ll-hot);color:#1a0a0f;font-size:.64rem;letter-spacing:.04em}
.ll-card-body h3{
  margin:0;color:var(--ll-ink);
  font-size:clamp(1.12rem,1.8vw,1.32rem);font-weight:750;line-height:1.25;letter-spacing:-.02em
}
.ll-card-title{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.ll-card-title::after{content:'';position:absolute;inset:0;border-radius:10px}
.ll-card-title:focus-visible{outline:none}
.ll-card-title:focus-visible::after{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-card-meta{display:block;margin-top:.5rem}
.ll-meta-item{display:flex;align-items:flex-start;gap:.4rem;min-width:0}
.ll-meta-item svg{width:15px;height:15px;flex:none;margin-top:.12rem;stroke:var(--ll-accent)}
.ll-location-copy{display:grid;gap:.1rem;min-width:0}
.ll-location-copy strong{color:var(--ll-ink);font-size:.9rem;font-weight:650;line-height:1.3}
.ll-location-copy small{color:var(--ll-muted);font-size:.8rem;line-height:1.35}
.ll-card-credit{display:block;margin:.45rem 0 0;color:var(--ll-muted);font-size:.8rem;line-height:1.4}
.ll-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.8rem}
.ll-chip{
  display:inline-flex;align-items:center;min-height:26px;padding:.18rem .55rem;border-radius:6px;
  background:var(--ll-surface-2);color:var(--ll-ink);font-size:.76rem;font-weight:650;line-height:1.2
}
.ll-chip.is-cost{background:var(--ll-accent-soft);color:var(--ll-accent);font-weight:800}
/* Save sits in the card's top corner, above the stretched title link, and
   the text wraps around it. Saved fills the mark and takes the soft teal. */
.ll-save{
  position:relative;z-index:1;float:right;display:inline-flex;align-items:center;gap:.35rem;
  min-height:44px;margin:-.35rem -.35rem .3rem .6rem;padding:0 .75rem;border:1px solid var(--ll-line);border-radius:8px;
  background:transparent;color:var(--ll-ink);font:inherit;font-size:.84rem;font-weight:750;cursor:pointer;
  -webkit-tap-highlight-color:rgba(245,181,68,.12)
}
.ll-save svg{width:17px;height:17px;flex:none}
.ll-save[aria-pressed="true"]{border-color:var(--ll-accent);background:var(--ll-accent);color:var(--ll-on-accent)}
.ll-save[aria-pressed="true"] svg{fill:currentColor}
.ll-save:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
/* The List's "Saved plans" links: how many are coming up, once there are any. */
.ll-plans-count{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;margin-left:.35rem;padding:0 .3rem;border-radius:6px;background:var(--ll-accent);color:var(--ll-on-accent);font-size:.7rem;font-weight:800;line-height:1}
.ll-plans-count[hidden]{display:none}
.ll-card-website{
  position:relative;z-index:1;display:inline-flex;align-items:center;min-height:40px;margin-left:auto;
  padding:0 .85rem;border:1px solid var(--ll-accent);border-radius:8px;background:transparent;
  color:var(--ll-accent);font-size:.82rem;font-weight:750;text-decoration:none
}
.ll-card-website::after{content:' ↗';white-space:pre}
.ll-card-website:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}

.ll-empty{padding:3rem 0;border-bottom:1px solid var(--ll-line)}
.ll-empty h3{margin:0 0 .6rem;font-size:1.3rem}
.ll-empty p{max-width:650px;margin:0;color:var(--ll-muted);line-height:1.7}

/* Filters */
.ll-sheet{position:fixed;inset:0;z-index:1000}
.ll-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.6)}
.ll-sheet-panel{
  position:absolute;right:0;top:0;width:min(420px,100%);height:100%;overflow:auto;
  background:var(--ll-surface);color:var(--ll-ink);padding:1.5rem;box-shadow:-20px 0 50px rgba(0,0,0,.5)
}
.ll-sheet-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ll-line);padding-bottom:1rem}
.ll-sheet-top h2{margin:0;font-size:1.22rem}
.ll-sheet-top button{border:0;background:transparent;font-size:2rem;cursor:pointer}
.ll-sheet-panel label{display:grid;gap:.45rem;margin-top:1.25rem;font-size:.82rem;font-weight:750}
.ll-sheet-panel input[type=search]{width:100%;min-height:44px;border:1px solid var(--ll-line);border-radius:10px;background:var(--ll-surface-2);padding:.72rem;color:var(--ll-ink);font:inherit;font-size:16px}
.ll-sheet-panel input[type=search]::placeholder{color:var(--ll-muted)}
.ll-sheet-panel input[type=search]:focus-visible{outline:2px solid var(--ll-accent);outline-offset:2px}
.ll-sheet-panel select{width:100%;border:1px solid var(--ll-line);border-radius:5px;background:var(--ll-surface-2);padding:.72rem;color:var(--ll-ink)}
.ll-sheet-panel .ll-check{display:flex;align-items:center;gap:.6rem}
.ll-sheet-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:2rem}
.ll-sheet-actions button:first-child{border-color:var(--ll-line);color:var(--ll-muted)}

/* The hidden Hub staging route still has the old LFH structural classes.
   Keep only the small List wordmark override there; the public domain never uses these. */
.ll-page .ll-brand-copy{display:grid;gap:.12rem;line-height:1}
.ll-page .ll-brand-copy strong{color:var(--ll-accent);font-size:1.18rem;font-weight:850}
.ll-page .ll-brand-copy small{color:var(--ll-muted);font-size:.55rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:820px){
  .ll-primary-nav{display:none}
  .ll-mobile-menu{display:block}
  .ll-shell,.ll-wrap{width:min(var(--ll-width),calc(100% - 2rem))}
  .ll-footer-top{display:block}
  .ll-footer-links{margin-top:1.25rem}
}

@media(max-width:600px){
  body.ll-page{padding-bottom:60px}
  .ll-header-row{min-height:66px}
  .ll-wordmark strong{font-size:1.12rem}
  .ll-wordmark small{font-size:.52rem}
  .ll-hero .ll-wrap{padding:1.6rem 0 1.4rem}
  .ll-hero h1{font-size:clamp(2rem,10vw,3.4rem)}
  .ll-tile{padding:.7rem .8rem}
  .ll-intro{font-size:1rem}
  .ll-listing{padding:2.5rem 0 4rem}
  .ll-list-head{display:block}
  .ll-count{margin-top:.6rem}
  .ll-event-card{grid-template-columns:64px minmax(0,1fr);gap:.85rem;padding:.9rem .95rem}
  .ll-card-side{padding-right:.7rem}
  .ll-card-time strong{font-size:.9rem;white-space:normal}
  .ll-card-time span{font-size:.7rem}
  .ll-card-body h3{font-size:1.06rem}
  .ll-card-foot{margin-top:.65rem}
  .ll-card-website{flex-basis:100%;justify-content:center;min-height:44px;margin:.2rem 0 0}
  .ll-footer-top{padding:2rem 0 1.5rem}
  .ll-mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:85;
    display:grid;grid-template-columns:repeat(5,1fr);
    min-height:58px;background:var(--ll-bg);border-top:1px solid var(--ll-line)
  }
  .ll-mobile-bar a,.ll-mobile-bar button{
    display:flex;align-items:center;justify-content:center;
    min-width:0;border:0;background:var(--ll-bg);color:var(--ll-muted);font-family:inherit;font-size:.68rem;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer
  }
  .ll-mobile-bar a:hover,.ll-mobile-bar a:focus-visible,.ll-mobile-bar button:hover,.ll-mobile-bar button:focus-visible{background:var(--ll-accent-soft);color:var(--ll-accent);outline:none}
  .ll-sheet-panel{top:auto;bottom:0;height:auto;max-height:88%;border-radius:10px 10px 0 0}
}

/* A wide screen takes two cards across, so a week of listings is not one
   long column beside the calendar. Each day's divider spans both. */
@media(min-width:1100px){
  .ll-results{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.8rem;align-items:stretch}
  .ll-day-divider,.ll-results>.ll-empty{grid-column:1/-1}
  .ll-event-card{grid-template-columns:80px minmax(0,1fr);gap:1rem;padding:1rem 1.05rem}
  .ll-card-time strong{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}