/*
 * Homepage — the live answer layer.
 * --signal is used only where something is genuinely live.
 */

/* Hero ------------------------------------------------------------------ */
.ob-home-hero {
  position: relative;
  color: var(--paper);
  background: var(--atlantic-deep);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  overflow: hidden;
}
.ob-home-hero__media { position: absolute; inset: 0; }
.ob-home-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ob-home-hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    oklch(0.16 0.025 235 / .55) 0%,
    oklch(0.16 0.025 235 / .78) 45%,
    oklch(0.16 0.025 235 / .95) 100%);
}
.ob-home-hero__inner {
  position: relative; max-width: var(--max-w); margin: 0 auto;
  padding: 56px 20px 28px;
  display: grid; gap: 22px;
}
.ob-home-hero__wordmark {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .22em; font-size: .78rem; opacity: .8; margin: 0;
}
.ob-home-hero__kicker {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; opacity: .82; margin: -14px 0 0;
}
.ob-home-hero__headline {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: .92; margin: 0;
}
.ob-home-hero__dateline {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 0;
}
.ob-home-hero__lede { font-family: var(--font-serif); font-size: 1.25rem; max-width: 44ch; margin: 0; opacity: .92; }

.ob-home-hero__stream { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 62ch; }
.ob-home-hero__stream li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid oklch(1 0 0 / .16);
  font-size: .95rem;
}
.ob-home-hero__stream time {
  font-family: var(--font-display); letter-spacing: .08em;
  min-width: 5.2em; opacity: .85;
}
.ob-home-hero__stream a { color: inherit; text-decoration: none; border-bottom: 1px solid oklch(1 0 0 / .3); }
.ob-home-hero__stream a:hover { border-color: var(--signal); }
.ob-home-hero__stream span.where { opacity: .6; font-size: .8rem; margin-left: auto; text-align: right; }

/* Right now ------------------------------------------------------------- */
.ob-now {
  position: relative; z-index: 2;
  background: var(--ink); color: var(--paper);
}
.ob-now__inner { max-width: var(--max-w); margin: 0 auto; padding: 16px 20px 18px; display: grid; gap: 12px; }
.ob-now__head { display: flex; align-items: center; gap: 10px; }
.ob-now__label {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .2em; font-size: .74rem;
}
.ob-now__stamp { margin-left: auto; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.ob-now__grid {
  margin: 0; display: grid; gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.ob-now__cell dt {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; opacity: .55; margin: 0 0 2px;
}
.ob-now__cell dd { margin: 0; font-family: var(--font-display); font-size: 1.18rem; letter-spacing: .02em; }
.ob-now__counts {
  list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px;
  border-top: 1px solid oklch(1 0 0 / .14); font-size: .8rem; opacity: .85;
}
.ob-now__counts strong { font-family: var(--font-display); font-size: 1rem; }
.ob-now__counts .is-live { color: var(--signal); opacity: 1; }

/* Sticky barrier pulse -------------------------------------------------- */
.ob-pulsebar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--ink) 94%, transparent);
  color: var(--paper);
  display: none;
}
.ob-pulsebar.is-visible { display: block; }
.ob-pulsebar__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.ob-pulsebar a { color: inherit; text-decoration: none; opacity: .7; }
.ob-pulsebar a:hover { opacity: 1; }
.ob-pulsebar__jump { margin-left: auto; display: flex; gap: 16px; }

/* Day navigation -------------------------------------------------------- */
.ob-daynav {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 14px 0; margin: 0 0 6px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}
.ob-daynav__btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; padding: 8px 14px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  background: transparent; color: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ob-daynav__btn:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.ob-daynav__btn.is-active { background: var(--ink); color: var(--paper); }
.ob-daynav__more { margin-left: auto; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }

/* Community filter ------------------------------------------------------ */
.ob-comfilter { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 4px; }

/* Sections -------------------------------------------------------------- */
.ob-sec { max-width: var(--max-w); margin: 0 auto; padding: 44px 20px; }
.ob-sec--tonight { background: color-mix(in oklab, var(--sandstone) 22%, transparent); max-width: none; }
.ob-sec--tonight > * { max-width: var(--max-w); margin-inline: auto; }
.ob-sec__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.ob-sec__title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0;
}
.ob-sec__lede { font-family: var(--font-serif); font-size: 1.05rem; margin: 0; opacity: .78; }
.ob-sec__stamp, .ob-sec__more {
  margin-left: auto; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6;
}

/* Event stream ---------------------------------------------------------- */
.ob-stream { list-style: none; margin: 0; padding: 0; }
.ob-ev {
  display: grid; align-items: baseline; gap: 4px 16px;
  grid-template-columns: 6.4em minmax(0, 1fr) auto;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.ob-ev--pick { background: color-mix(in oklab, var(--sandstone) 16%, transparent); }
.ob-ev__time { font-family: var(--font-display); letter-spacing: .08em; font-size: .92rem; opacity: .8; }
.ob-ev__body { display: grid; gap: 3px; min-width: 0; }
.ob-ev__pick {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal);
}
.ob-ev__title { font-family: var(--font-display); font-size: 1.22rem; text-decoration: none; color: inherit; }
.ob-ev__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.ob-ev__where { font-size: .8rem; opacity: .72; display: flex; gap: 10px; flex-wrap: wrap; }
.ob-ev__where a { color: inherit; }
.ob-ev__town { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; opacity: .75; }
.ob-ev__note { font-family: var(--font-serif); font-size: .95rem; opacity: .8; }
.ob-ev__tags { display: flex; gap: 4px; flex-wrap: wrap; grid-column: 3; }
.ob-ev__actions { grid-column: 2 / -1; display: flex; gap: 12px; }
.ob-act {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5;
  text-decoration: none;
}
.ob-act:hover { opacity: 1; }
.ob-act[aria-pressed="true"] { opacity: 1; color: var(--signal); }
.ob-empty { font-family: var(--font-serif); font-size: 1.05rem; opacity: .7; padding: 18px 0; }

.ob-tonight__hh { margin-top: 22px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); }
.ob-tonight__hh-label {
  display: inline-flex; align-items: center; gap: 8px; color: var(--signal);
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
}
.ob-tonight__hh ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ob-tonight__hh li { font-size: .9rem; }
.ob-tonight__hh li span { opacity: .6; font-size: .78rem; margin-left: 6px; }

/* Where to go ----------------------------------------------------------- */
.ob-wtg { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: color-mix(in oklab, var(--ink) 14%, transparent); }
.ob-wtg__item a {
  display: grid; gap: 5px; padding: 20px 18px; text-decoration: none; color: inherit;
  background: var(--paper); height: 100%;
  transition: background var(--t-fast) var(--ease);
}
.ob-wtg__item a:hover { background: color-mix(in oklab, var(--sandstone) 26%, var(--paper)); }
.ob-wtg__name { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }
.ob-wtg__for { font-size: .82rem; opacity: .72; }
.ob-wtg__open { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }

/* What's good ----------------------------------------------------------- */
.ob-good { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ob-good__card { display: grid; gap: 10px; align-content: start; }
.ob-good__media img { width: 100%; height: 170px; object-fit: cover; display: block; filter: saturate(.9); }
.ob-good__q { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin: 0; }
.ob-good__a { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.ob-good__a a { color: inherit; text-decoration: none; }
.ob-good__a a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ob-good__meta { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0; }
.ob-good__flag { margin-left: 8px; color: var(--signal); }
.ob-good__note { font-family: var(--font-serif); font-size: 1rem; margin: 0; opacity: .82; }

/* Live map -------------------------------------------------------------- */
.ob-livemap { position: relative; display: grid; gap: 12px; }
.ob-livemap__layers { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-livemap__canvas {
  height: min(70vh, 560px); width: 100%;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  background: color-mix(in oklab, var(--fog) 40%, var(--paper));
}
.ob-livemap__panel {
  position: absolute; right: 14px; bottom: 14px; width: min(330px, calc(100% - 28px));
  background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  padding: 16px; z-index: 5;
}
.ob-livemap__close { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 1.2rem; cursor: pointer; }
.ob-livemap__panel h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 2px; }
.ob-livemap__panel .meta { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.ob-livemap__panel .open { color: var(--signal); }
.ob-livemap__panel ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; }
.ob-livemap__panel h4 { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .55; margin: 12px 0 0; }
.ob-pin {
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  background: var(--atlantic-deep); border: 2px solid var(--paper);
}
.ob-pin.is-live { background: var(--signal); }

/* Communities ----------------------------------------------------------- */
.ob-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ob-towns a {
  display: inline-block; padding: 9px 16px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
}
.ob-towns a:hover { background: var(--ink); color: var(--paper); }

/* Brand, below the fold ------------------------------------------------- */
.ob-brand {
  background: var(--atlantic-deep); color: var(--paper); margin-top: 28px;
}
.ob-brand__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 56px 20px;
  display: grid; gap: 16px; max-width: min(var(--max-w), 100%);
}
.ob-brand__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0; }
.ob-brand__body { font-family: var(--font-serif); font-size: 1.15rem; max-width: 58ch; margin: 0; opacity: .88; }
.ob-brand__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.ob-brand__links a { color: inherit; opacity: .75; text-decoration: none; }
.ob-brand__links a:hover { opacity: 1; }

@media (max-width: 720px) {
  .ob-ev { grid-template-columns: 5.4em minmax(0, 1fr); }
  .ob-ev__tags { grid-column: 2; }
  .ob-home-hero__inner { padding-top: 40px; }
}

/* v4.3.2 island selector */
.ob-home-islands{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.25rem}
.ob-home-islands__item{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;padding:.4rem .85rem;border:1px solid color-mix(in srgb,var(--paper) 45%,transparent);color:var(--paper);text-decoration:none;transition:background var(--t-fast) var(--ease)}
.ob-home-islands__item:hover,.ob-home-islands__item.is-active{background:var(--paper);color:var(--ink)}
.ob-comfilter__island{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--sea-weathered);margin:0 .25rem 0 .75rem;align-self:center}
.ob-comfilter__island:first-child{margin-left:0}
.ob-towns__island{flex-basis:100%;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;margin-top:.75rem}
.ob-towns__island a{color:var(--sea-weathered)}

/* The Barrier Layer — what to wear */
.ob-layer { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .75rem; margin:.9rem 0 .4rem; padding:.7rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ob-layer__kicker { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--sea-weathered); }
.ob-layer__label { font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; letter-spacing:.02em; color:var(--atlantic-deep); }
.ob-layer__tip { font-family:var(--font-serif); font-style:italic; font-size:1.05rem; }
.ob-layer__meta { flex-basis:100%; font-size:.78rem; color:var(--sea-weathered); }