/* ============================================
   Discover Williams - Home Page
   A love letter to Williams, Arizona
   ============================================ */

:root {
  /* Earth + neon palette - Route 66 nostalgic warmth */
  --cream: #F5EFE0;
  --cream-soft: #F9F4E6;
  --cream-darker: #ECE3CC;
  --paper: #FBF8EF;

  --forest: #2C4A3A;
  --forest-deep: #1E3329;
  --forest-soft: #3D5C4B;

  --rust: #C04E1B;
  --rust-deep: #9D3F13;
  --rust-glow: #E4622A;

  --neon: #FF6B47;          /* live/now indicator only */
  --gold: #D49A3C;

  --ink: #1F1B14;
  --ink-soft: #4A4338;
  --ink-mute: #8C8474;
  --ink-faint: #BAB1A0;

  --border: rgba(44, 74, 58, 0.12);
  --border-strong: rgba(44, 74, 58, 0.22);

  /* type */
  --serif: 'Instrument Serif', 'Georgia', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* phone-frame sizing */
  --phone-width: 390px;
  --phone-height: 844px;
  --phone-radius: 44px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #2a2620;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   PHONE FRAME - so demo on laptop always looks like a phone
   ========================= */
.phone-frame {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at top, #3a342a 0%, #1f1b16 60%);
}

.phone-screen {
  width: 100%;
  max-width: var(--phone-width);
  height: var(--phone-height);
  max-height: calc(100vh - 48px);
  background: var(--cream);
  border-radius: var(--phone-radius);
  box-shadow:
    0 0 0 12px #0a0907,
    0 0 0 13px #2a2620,
    0 30px 80px rgba(0,0,0,0.5),
    0 0 120px rgba(192, 78, 27, 0.08);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* paper texture overlay - extremely subtle */
.phone-screen::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(192, 78, 27, 0.02), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(44, 74, 58, 0.02), transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* On mobile - fill the screen, no phone frame chrome */
@media (max-width: 480px) {
  .phone-frame {
    padding: 0;
    background: var(--cream);
  }
  .phone-screen {
    width: 100%;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* =========================
   STATUS / WEATHER STRIP
   ========================= */
.status-strip {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 239, 224, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 18px 10px 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
/* Weather + greeting stack on the left; the bookmark sits to their right. */
.status-strip__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-strip__weather {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 500;
}
.status-strip__temp {
  font-size: 16px;
  font-weight: 700;
  color: var(--rust);
  letter-spacing: 0;
}
.status-strip__sky::before { content: '·'; margin-right: 8px; color: var(--ink-faint); }
.status-strip__loc::before { content: '·'; margin-right: 8px; color: var(--ink-faint); }
.status-strip__greeting {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--forest);
}
.status-strip__time {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* =========================
   HERO
   ========================= */
.hero {
  position: relative;
  height: 540px;
  overflow: hidden;
  isolation: isolate;
}
/* Homepage hero. The image is the emotional hook so it stays large, but it
   must not be exactly full-height or the page looks like it ends there — the
   top of the concierge block should peek above the fold.
   Percentage, not vh, on purpose: the scroll container is .phone-screen, which
   is a fixed 844px frame on desktop and 100vh on mobile. So 82% resolves to
   the spec's 78–85vh target on a real phone and still behaves in the desktop
   demo, where vh would size against the browser window instead. */
.hero--home {
  height: 82%;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(1.08) contrast(1.02);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20, 14, 8, 0.15) 0%,
      rgba(20, 14, 8, 0.05) 30%,
      rgba(20, 14, 8, 0.55) 65%,
      rgba(20, 14, 8, 0.88) 100%);
}
.hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 24px 36px;
  color: #fff;
}
.hero__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.02;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
/* The homepage title is a full two-sentence line rather than a short phrase,
   so it steps down from 46px to keep the hero from overflowing. */
.hero__title--long {
  font-size: 34px;
  line-height: 1.08;
}
.hero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 280px;
}
.hero__sub--long {
  font-size: 16px;
  max-width: 330px;
}
.hero__cta-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.hero__link {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.hero__link:hover { color: #fff; border-color: rgba(255,255,255,0.7); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  text-decoration: none;
}
.btn--primary {
  background: var(--rust);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(192, 78, 27, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn--primary:hover {
  background: var(--rust-glow);
  transform: translateY(-1px);
  box-shadow:
    0 6px 22px rgba(192, 78, 27, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:active {
  transform: translateY(0);
}

/* =========================
   LOCALS WANT YOU TO KNOW - rotating note
   ========================= */
.locals {
  padding: 24px 20px 4px;
}
.locals__note {
  position: relative;
  background: #FFFBF0;
  border: 1px solid rgba(212, 154, 60, 0.4);
  border-radius: 6px;
  padding: 22px 22px 18px;
  box-shadow:
    0 1px 0 rgba(31, 27, 20, 0.04),
    0 6px 14px rgba(31, 27, 20, 0.07);
  /* slight rotation - feels like a Post-it */
  transform: rotate(-0.5deg);
  transform-origin: center;
}
.locals__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px;
  height: 18px;
  background: rgba(192, 78, 27, 0.18);
  border: 1px solid rgba(192, 78, 27, 0.22);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.locals__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rust);
  margin: 0 0 8px;
}
.locals__msg {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--forest-deep);
  margin: 0 0 14px;
  font-style: italic;
  transition: opacity 0.4s ease;
  min-height: 2.6em;
}
.locals__msg.is-fading { opacity: 0; }
.locals__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.locals__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(44, 74, 58, 0.2);
  transition: background 0.3s, transform 0.3s;
}
.locals__dots span.is-active {
  background: var(--rust);
  transform: scale(1.4);
}

/* =========================
   SECTION HEAD - reused
   ========================= */
.section-head {
  padding: 36px 24px 14px;
}
.section-head__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0 0 8px;
}
.section-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  margin: 0;
}
.section-head__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

/* "More questions locals answer →" / "Six more things locals mention →".
   Deliberately not "See all" — that's directory language. */
.section-more-wrap {
  padding: 16px 24px 0;
}
.section-more {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 78, 27, 0.3);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.section-more:hover {
  color: var(--rust-deep);
  border-bottom-color: var(--rust);
}

/* =========================
   CONCIERGE - the main homepage block
   Four fixed questions. No free-text input by design.
   ========================= */
.concierge {
  padding-bottom: 4px;
}
.concierge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 24px 0;
}
/* Quiet label sitting directly on top of the options — deliberately
   subordinate to the line above it, so sans rather than serif, small and low
   contrast. Shared with .qa__start on locals-say.html, which pairs the same
   headline with the same label. */
.concierge__start,
.qa__start {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-mute);
  margin: 14px 0 0;
  padding: 0 24px;
}
/* Only when the label is present — the grid keeps its own spacing elsewhere. */
.concierge__start + .concierge__grid {
  padding-top: 8px;
}
/* The questions are longer than the old one-word tile labels, so these run a
   little taller and size the text down a step. */
.concierge__tile {
  aspect-ratio: 1 / 1.05;
}
.concierge__tile .tile__text h3 {
  font-size: 19px;
  line-height: 1.1;
}
.concierge__tile .tile__media {
  flex: 0 0 42%;
}
.concierge__more {
  padding: 16px 24px 0;
}

/* Retired 8 August 2026: the standalone .canyon-cta section was removed from
   index.html — it is now the first card in .concierge above, so its rules
   have been deleted rather than left as dead CSS. */

/* =========================
   INSIDER - Only in Williams (3 featured)
   ========================= */
.insider {
  position: relative;
  padding-bottom: 24px;
}
.insider__rail {
  display: flex;
  gap: 14px;
  padding: 20px 24px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.insider__rail::-webkit-scrollbar { display: none; }

.insider-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(44, 74, 58, 0.04),
    0 8px 22px rgba(31, 27, 20, 0.08);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}
.insider-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.insider-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.insider-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
  font-weight: 400;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.insider-card__num-of {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  position: relative;
  top: -2px;
}
.insider-card__body {
  padding: 18px 20px 22px;
}
.insider-card__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--forest-deep);
  letter-spacing: -0.005em;
}
.insider-card__body p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-soft);
}
/* Only 01, 03 and 06 have detail pages. Those three carry
   .insider-card--linked and get a "Read more" affordance so the other six
   read as cards rather than broken links. */
.insider-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}
.insider-card__more svg {
  display: block;
  transition: transform 0.15s ease;
}
.insider-card--linked:hover .insider-card__more svg {
  transform: translateX(3px);
}

.insider__footnote {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  text-align: center;
  margin: 8px 24px 0;
  padding: 12px;
  border-top: 1px dashed var(--border);
}

/* =========================
   WHERE TO EAT - meal rail
   ========================= */
.eat {
  padding-bottom: 12px;
}
.eat__rail {
  display: flex;
  gap: 12px;
  padding: 20px 24px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eat__rail::-webkit-scrollbar { display: none; }

.eat-card {
  flex: 0 0 46%;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(31, 27, 20, 0.06);
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.eat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 27, 20, 0.1);
}
.eat-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.eat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eat-card__body {
  padding: 14px 16px 18px;
}
.eat-card__time {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 6px;
}
.eat-card__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--forest-deep);
  letter-spacing: -0.005em;
}
.eat-card__body p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-mute);
}

/* =========================
   TONIGHT
   ========================= */
.tonight {
  padding-bottom: 12px;
}
.tonight__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 0;
}
.tonight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--paper);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.2s;
}
.tonight-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 27, 20, 0.08);
}
.tonight-card__media {
  flex: 0 0 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
}
.tonight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tonight-card__body {
  flex: 1;
  min-width: 0;
}
.tonight-card__tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--forest);
  color: var(--cream);
  margin-bottom: 6px;
}
.tonight-card__tag--live {
  background: var(--neon);
  position: relative;
  padding-left: 18px;
}
.tonight-card__tag--live::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: pulse 1.6s infinite;
}
.tonight-card__tag--warn { background: var(--gold); color: var(--ink); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.tonight-card__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--forest-deep);
}
.tonight-card__body p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-mute);
}
.tonight-card__chev {
  color: var(--ink-faint);
  flex: 0 0 auto;
}

/* =========================
   CANYON CAMS
   ========================= */
.cams {
  padding-bottom: 12px;
}
.cams__rail {
  display: flex;
  gap: 12px;
  padding: 20px 24px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cams__rail::-webkit-scrollbar { display: none; }

.cam-card {
  flex: 0 0 72%;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(31, 27, 20, 0.06);
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.cam-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 27, 20, 0.1);
}
.cam-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
}
.cam-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cam-card__live {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cam-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 0 rgba(255, 107, 71, 0.7);
  animation: pulse 1.6s infinite;
  display: inline-block;
}
.cam-card__body {
  padding: 12px 14px 16px;
}
.cam-card__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--forest-deep);
  letter-spacing: -0.005em;
}
.cam-card__body p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink-mute);
}
.cams__credit {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-faint);
  text-align: center;
  padding: 6px 24px 4px;
  margin: 0;
  letter-spacing: 0.01em;
}

/* =========================
   EXPLORE - single entry point
   ========================= */
.explore {
  padding-bottom: 24px;
}
.explore__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 24px 0;
}
.explore__single {
  padding: 4px 24px 0;
}
/* One wide tile rather than a square in a grid */
.explore__browse {
  aspect-ratio: auto;
  flex-direction: row;
  align-items: stretch;
  min-height: 104px;
}
.explore__browse .tile__text {
  justify-content: center;
  padding: 16px 18px;
}
.explore__browse .tile__media {
  flex: 0 0 38%;
}
.tile {
  position: relative;
  aspect-ratio: 1 / 1.15;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s;
}
.tile:hover { transform: translateY(-2px); }
.tile__text {
  padding: 14px 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tile__text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.tile__text p {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.75;
}
.tile__media {
  flex: 0 0 50%;
  overflow: hidden;
}
.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--rust {
  background: var(--rust);
  color: var(--cream);
}
.tile--green {
  background: var(--forest);
  color: var(--cream);
}
.tile--cream {
  background: var(--cream-darker);
  color: var(--forest-deep);
}

/* =========================
   FOOTER
   ========================= */
.foot {
  padding: 36px 24px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}
.foot__signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--forest);
  margin: 0 0 6px;
}
.foot__meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* =========================
   BOTTOM NAV
   ========================= */
.botnav {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  background: rgba(245, 239, 224, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  /* float at the bottom of the phone-screen */
  margin-top: auto;
}

/* On real phones the phone-screen IS the viewport — pin the nav to the
   viewport bottom so it stays visible without scrolling. */
@media (max-width: 480px) {
  .botnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.botnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.botnav__item.is-active { color: var(--forest); }
.botnav__item.is-active svg { stroke-width: 2.2; }
.botnav__item:hover { color: var(--forest); }
.botnav__item span {
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-size: 9.5px;
}

/* botnav is inside phone-screen which scrolls - so we need it position:sticky inside the scroll container.
   Already handled via .phone-screen overflow-y auto */

/* =========================
   MY WILLIAMS - empty state + scaffold
   ========================= */
.mine-body { background: var(--cream); }
.mine-head {
  padding: 28px 24px 12px;
}
.mine-head__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 8px;
}
.mine-head__title {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.mine-head__sub {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 32ch;
}
.mine-empty {
  padding: 48px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.mine-empty__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--cream-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rust);
}
.mine-empty h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.mine-empty p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 28ch;
}
.mine-empty__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: var(--forest);
  color: var(--cream);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.2s;
}
.mine-empty__cta:hover {
  background: var(--forest-deep);
  transform: translateY(-1px);
}

/* ============ MAKE A DAY ENTRY (home) ============ */
.makeday {
  padding: 20px 20px 0;
}
.makeday__card {
  display: block;
  background: var(--forest);
  color: var(--cream);
  border-radius: 18px;
  padding: 22px 22px 18px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(28, 51, 41, 0.18);
  position: relative;
  overflow: hidden;
}
.makeday__card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(212, 154, 60, 0.25), transparent 70%);
  pointer-events: none;
}
.makeday__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.makeday__title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 8px;
  font-weight: 400;
}
.makeday__sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245, 239, 224, 0.82);
  margin: 0 0 14px;
}
.makeday__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.makeday__chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(245, 239, 224, 0.1);
  border: 1px solid rgba(245, 239, 224, 0.22);
  color: var(--cream);
}
.makeday__chip--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest-deep);
  font-weight: 600;
}

/* ============ DEMO BANNER (owner POV link) ============ */
.demo-banner {
  padding: 24px 20px 8px;
}
.demo-banner__card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-darker);
  border: 1px dashed var(--ink-mute);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
}
.demo-banner__body { flex: 1; }
.demo-banner__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 4px;
}
.demo-banner__title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.15;
  margin: 0 0 4px;
  font-weight: 400;
  color: var(--ink);
}
.demo-banner__sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.demo-banner__chev {
  color: var(--ink-mute);
  flex-shrink: 0;
}

/* ============ HOST BAR (persistent white-label strip — used across pages) ============ */
.host-bar[hidden] { display: none !important; }
.host-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--forest);
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.host-bar--standalone { padding: 10px 14px 9px; }
.host-bar__label {
  color: rgba(245,239,224,0.7);
  font-weight: 400;
}
.host-bar__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cream);
}
.host-bar--linked {
  justify-content: space-between;
  padding: 8px 14px;
}
.host-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.host-bar__back svg { stroke-width: 2.5; }
.host-bar--linked .host-bar__center {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.host-bar__spacer { width: 60px; flex-shrink: 0; }

/* =========================
   BOOKMARK BUTTON - header entry to my-williams.html
   (My Williams was removed from the bottom nav; this is how you reach it.)
   No count badge by design.
   ========================= */
.bookmark-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(31, 27, 20, 0.16);
  background: var(--cream);
  color: var(--forest);
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bookmark-btn:hover {
  background: rgba(44, 74, 58, 0.06);
  border-color: var(--forest);
}
.bookmark-btn svg { display: block; }

/* Floating variant for the block headers (.todo-head, .today-head) that have
   no flex row to sit in. Parent gets position:relative below. */
.bookmark-btn--float {
  position: absolute;
  top: 22px;
  right: 20px;
}
/* .todo-head and .locals-head set their own position/padding in discover.css
   and locals-say.css, which load after this file. */
.today-head {
  position: relative;
}
/* today.html already has the notifications bell parked top-right, so the
   bookmark sits to its left rather than on top of it. */
.today-head--bell .bookmark-btn--float {
  top: 33px;
  right: 70px;
}

/* =========================
   HEART BUTTON (on listing cards)
   ========================= */
.todo-item__media { position: relative; }
.mine-item__media { position: relative; }

.heart-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: transform 0.14s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  z-index: 2;
}
.heart-btn svg { width: 18px; height: 18px; }
.heart-btn:hover { transform: scale(1.08); }
.heart-btn:active { transform: scale(0.9); }
.heart-btn.is-active {
  color: var(--rust, #C04E1B);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.heart-btn.is-pop {
  animation: heartPop 0.34s ease;
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* =========================
   MY WILLIAMS — saved list
   ========================= */
.mine-count {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.mine-actions {
  display: flex;
  gap: 10px;
  padding: 16px 18px 8px;
  align-items: center;
}
.mine-actions__share {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--forest, #2C4A3A);
  color: var(--cream, #F5EFE0);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mine-actions__share:hover { background: var(--forest-deep, #1E3328); transform: translateY(-1px); }
.mine-actions__share:disabled { opacity: 0.6; cursor: progress; transform: none; }
.mine-actions__share svg { display: block; }
.mine-actions__clear {
  padding: 14px 16px;
  background: transparent;
  color: var(--ink-soft, rgba(31,27,20,0.6));
  border: 1px solid rgba(31, 27, 20, 0.16);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mine-actions__clear:hover { color: var(--ink); border-color: rgba(31,27,20,0.32); }

.mine-list {
  list-style: none;
  padding: 8px 18px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mine-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(28, 51, 41, 0.06);
}
.mine-item__media {
  width: 120px;
  height: 120px;
  background: var(--cream-darker, #E5DDC8);
  overflow: hidden;
}
.mine-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mine-item__media .heart-btn {
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
}
.mine-item__media .heart-btn svg { width: 16px; height: 16px; }

.mine-item__body {
  padding: 12px 14px 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.mine-item__cat {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust, #C04E1B);
  margin: 0;
}
.mine-item__name {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink, #1F1B14);
  margin: 0;
}
.mine-item__note {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft, rgba(31,27,20,0.65));
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mine-item__meta {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: rgba(31,27,20,0.55);
  margin: 4px 0 0;
}

/* =========================================================
   INSIDER STORY PAGES (insider-01..09.html)
   ========================================================= */
.insider-page {
  display: flex;
  flex-direction: column;
  background: var(--cream, #F5EFE0);
  color: var(--ink, #1F1B14);
}

.insider-page__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  background: var(--cream, #F5EFE0);
  position: sticky;
  top: 0;
  z-index: 4;
}
.insider-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--forest, #2C4A3A);
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px 6px 4px;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.insider-page__back svg { display: block; }
.insider-page__count {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 27, 20, 0.55);
}

.insider-page__hero {
  margin: 0;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #ddd;
}
.insider-page__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insider-page__head {
  padding: 24px 22px 8px;
}
.insider-page__eyebrow {
  margin: 0 0 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust, #C04E1B);
  font-weight: 600;
}
.insider-page__title {
  margin: 0 0 14px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink, #1F1B14);
}
.insider-page__lede {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(31, 27, 20, 0.78);
}

.insider-page__body {
  padding: 18px 22px 8px;
}
.insider-page__body p {
  margin: 0 0 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(31, 27, 20, 0.86);
}
.insider-page__body p:last-child { margin-bottom: 0; }

.insider-page__details {
  margin: 22px 22px 0;
  padding: 18px 18px 16px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(31, 27, 20, 0.06);
}
.insider-page__details-title {
  margin: 0 0 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest, #2C4A3A);
  font-weight: 600;
}
.insider-page__dl {
  margin: 0;
  display: grid;
  gap: 12px;
}
.insider-page__dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: baseline;
}
.insider-page__dl dt {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 27, 20, 0.5);
  font-weight: 600;
}
.insider-page__dl dd {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #1F1B14);
}

.insider-page__link {
  margin: 18px 22px 24px;
}
.insider-page__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--forest, #2C4A3A);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 74, 58, 0.35);
  padding-bottom: 2px;
}
.insider-page__link a:hover { color: var(--rust, #C04E1B); border-bottom-color: var(--rust, #C04E1B); }

/* Linked insider cards on home — keep visual identical to article cards */
a.insider-card,
a.insider-card--linked {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
a.insider-card:hover {
  transform: translateY(-2px);
}
a.insider-card:active {
  transform: translateY(0);
}

/* Hide per-card category eyebrow when a single-category filter is selected */
body.is-cat-filtered .todo-item__cat { display: none; }

/* =========================
   TODAY — Bulletin board
   ========================= */
.today-body {
  background: var(--cream);
}
.section-head--bare { padding-bottom: 0; }

.today-head {
  padding: 36px 24px 18px;
}
.today-head__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0 0 8px;
}
.today-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  margin: 0 0 10px;
}
.today-head__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

/* Morning note — one written card above the blocks. Same paper card
   treatment as .tonight-card; type sizes borrowed from .today-item__title
   and .bell-caption. No new colours, no new type scale. */
.morning-note {
  margin: 6px 24px 0;
  padding: 18px 20px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.morning-note[hidden] { display: none; }

.morning-note__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0 0 8px;
}
.morning-note__body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--forest-deep);
  margin: 0 0 10px;
}
.morning-note__by {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0;
}
.morning-note__by[hidden] { display: none; }

.today-block {
  padding: 18px 24px 4px;
}
.today-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.today-block__rule {
  flex: 0 0 24px;
  height: 1px;
  background: var(--forest);
  opacity: 0.5;
}
.today-block__title {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forest);
  margin: 0;
}

.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.today-item {
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(31, 27, 20, 0.08);
}
.today-item:last-child { border-bottom: none; }

.today-item__time {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.today-item__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--forest-deep);
  margin: 0 0 4px;
}
.today-item__context {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.today-item--empty {
  color: var(--ink-mute);
  font-style: italic;
  padding: 14px 0;
}

.today-foot {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
  padding: 24px 24px 4px;
  margin: 0;
}

/* =========================
   STAGE 3b — Live status badges + map pin pulse
   ========================= */

/* Listing status badge (sits between name and note on Discover cards) */
.todo-item__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 500;
  line-height: 1.2;
}
.todo-item__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex: 0 0 6px;
}
.todo-item__status--open   { color: var(--forest); }
.todo-item__status--live   { color: var(--rust); }
.todo-item__status--closed { color: var(--ink-mute); }

/* "Open now" chip — subtle forest tint when inactive, fills when active */
.todo-chip--open {
  border-color: rgba(44, 74, 58, 0.35);
  color: var(--forest);
}
.todo-chip--open.is-active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

/* Pin sheet status line */
.pin-sheet__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pin-sheet__status--open   { color: var(--forest); }
.pin-sheet__status--live   { color: var(--rust); }
.pin-sheet__status--closed { color: var(--ink-mute); }

/* Map pin pulse — only on pins with kind=live. A visible rust ring
   expands outward from behind the teardrop, like a sonar ping.
   Two rings, phase-offset, so there's always something on screen. */
.pin--pulse .pin__marker { isolation: isolate; }
.pin--pulse .pin__marker::before,
.pin--pulse .pin__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 2.5px solid rgba(192, 78, 27, 0.95);
  background: rgba(192, 78, 27, 0.18);
  box-shadow: 0 0 0 1.5px rgba(245, 239, 224, 0.6);
  pointer-events: none;
  animation: dw-pin-pulse 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  z-index: 0;
}
.pin--pulse .pin__marker::after { animation-delay: 1.1s; }
.pin--pulse .pin__teardrop { position: relative; z-index: 1; }
@keyframes dw-pin-pulse {
  0%   { transform: scale(0.55); opacity: 0;    }
  15%  { opacity: 0.95;                          }
  85%  { opacity: 0.1;                           }
  100% { transform: scale(2.8);  opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .pin--pulse .pin__marker::before,
  .pin--pulse .pin__marker::after {
    animation: none; opacity: 0.55; transform: scale(1.8);
  }
  .pin--pulse .pin__marker::after { display: none; }
}

/* ---------- Stage 4a: visitor save counts ---------- */
/* Quiet "♥ 47" badge on listing cards where saves >= 10.
   Same mute treatment as the meta line — not a CTA, not a star rating. */
.todo-item__saves {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  line-height: 1;
}
.todo-item__saves-icon {
  width: 12px;
  height: 12px;
  fill: var(--ink-mute);
  flex-shrink: 0;
  opacity: 0.85;
}

/* "Most saved" filter chip — same shape as Open now but rust-tinted text */
.todo-chip--saved {
  /* Inherits base .todo-chip — just a hint of warmth on the inactive state */
}
.todo-chip--saved.is-active {
  background: var(--rust);
  color: var(--cream);
  border-color: var(--rust);
}

/* ---------- Stage 4b: "What people are saying" interim sheet ---------- */
/* Tap a listing card → bottom sheet. Mirrors map's pin-sheet pattern but
   scoped to the phone frame on Discover. Visitor vs Google notes differ
   subtly (forest vs cream-warm). Form sits below the list; on submit, it
   swaps for a Google bridge panel. */

.todo-item--tappable { cursor: pointer; }
.todo-item--tappable:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 12px;
}

body.notes-locked { overflow: hidden; }

.notes-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 20, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 1000;
}
.notes-backdrop.is-open { opacity: 1; pointer-events: auto; }
.notes-backdrop[hidden] { display: none; }

.notes-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(420px, 100vw);
  max-height: 86vh;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 40px rgba(31, 27, 20, 0.22);
  transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1010;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notes-sheet.is-open { transform: translate(-50%, 0); }
.notes-sheet[hidden] { display: none; }

.notes-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(31, 27, 20, 0.18);
  margin: 10px auto 6px;
  flex-shrink: 0;
}

.notes-sheet__head {
  position: relative;
  padding: 6px 22px 14px;
  border-bottom: 1px solid rgba(31, 27, 20, 0.08);
  flex-shrink: 0;
}
.notes-sheet__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.notes-sheet__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  padding-right: 36px;
  letter-spacing: -0.005em;
}
.notes-sheet__close {
  position: absolute;
  top: 4px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.notes-sheet__close:hover { color: var(--ink); }

.notes-sheet__body {
  padding: 16px 22px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Why locals send people here ---- */
.notes-locals {
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(31, 27, 20, 0.08);
}
.notes-locals[hidden] { display: none; }
.notes-locals__label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.notes-locals__body {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.42;
  color: var(--forest);
  margin: 0;
}

.notes-vibe {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--forest);
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(31, 27, 20, 0.08);
}
.notes-vibe[hidden] { display: none; }

/* ---- What people order ---- */
.notes-dishes { margin: 0 0 18px; }
.notes-dishes[hidden] { display: none; }
.notes-dishes__head,
.notes-gate__q {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.notes-dishes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dish {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(212, 154, 60, 0.08);
  border: 1px solid rgba(212, 154, 60, 0.22);
}
.dish__name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.dish__detail {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---- Verified by the business ---- */
/* Neither editorial nor a review — the business speaking on the record. The
   forest rule down the left side and the paper panel keep it visibly apart
   from the italic vibe line above and the tinted note cards below, without
   introducing a colour that isn't already in the palette. */
.notes-verified {
  margin: 0 0 18px;
  padding: 12px 0 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--forest);
  border-radius: 0 10px 10px 0;
}
.notes-verified[hidden] { display: none; }
.notes-verified__label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 6px;
}
.notes-verified__body {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.notes-verified__link {
  display: inline-block;
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(44, 74, 58, 0.28);
  padding-bottom: 1px;
}
.notes-verified__link:hover { border-bottom-color: var(--forest); }

/* ---- Their own site ---- */
.notes-site { margin: 0 0 18px; }
.notes-site[hidden] { display: none; }
.notes-site__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(44, 74, 58, 0.28);
  padding-bottom: 2px;
}
.notes-site__link:hover { border-bottom-color: var(--forest); }

/* ---- Been here? gate ---- */
.notes-gate {
  /* Both states live in this box — the question with its two buttons, and the
     shorter "not yet" reply that replaces it. A shared min-height stops the
     bottom of the sheet jumping when one swaps for the other. */
  min-height: 68px;
}
.notes-gate__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notes-gate__btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.notes-gate__btn--yes {
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--forest);
}
.notes-gate__btn--yes:hover { background: #244038; }
.notes-gate__btn--no {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(31, 27, 20, 0.18);
}
.notes-gate__btn--no:hover { border-color: rgba(31, 27, 20, 0.34); }
.notes-gate__done {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

.notes-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notes-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
  padding: 12px 0;
}

.note {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(31, 27, 20, 0.08);
}
.note--visitor {
  background: rgba(44, 74, 58, 0.04);
  border-color: rgba(44, 74, 58, 0.15);
}
.note--google {
  background: rgba(192, 78, 27, 0.04);
  border-color: rgba(192, 78, 27, 0.14);
}
.note--new {
  animation: dw-note-in 0.4s ease;
}
@keyframes dw-note-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.note__body {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 6px;
}
.note__meta {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

.notes-form-wrap {
  border-top: 1px solid rgba(31, 27, 20, 0.08);
  padding-top: 16px;
}
.notes-form__label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.notes-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: #FFFCF4;
  border: 1px solid rgba(31, 27, 20, 0.18);
  border-radius: 10px;
  resize: vertical;
  min-height: 70px;
}
.notes-form__input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 74, 58, 0.15);
}
.notes-form__row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
.notes-form__name {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: #FFFCF4;
  border: 1px solid rgba(31, 27, 20, 0.18);
  border-radius: 10px;
  min-width: 0;
}
.notes-form__name:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 74, 58, 0.15);
}
.notes-form__submit {
  flex-shrink: 0;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.notes-form__submit:hover { background: #244038; }

/* Bridge panel — replaces the form after submit */
.notes-bridge {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(192, 78, 27, 0.06);
  border: 1px solid rgba(192, 78, 27, 0.18);
}
.notes-bridge__lead {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--forest);
  margin: 0 0 6px;
}
.notes-bridge__body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 12px;
}
.notes-bridge__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.notes-bridge__primary {
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  background: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 10px;
  cursor: pointer;
}
.notes-bridge__primary:hover { background: #A8431A; }
.notes-bridge__ghost {
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid rgba(31, 27, 20, 0.18);
  border-radius: 10px;
  cursor: pointer;
}
.notes-bridge__ghost:hover { color: var(--ink); }
.notes-bridge__status {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--forest);
  margin: 10px 0 0;
  min-height: 14px;
}

/* ---------- Stage 3c: morning-notes bell on Today ---------- */
/* Quiet bell, top-right of the Today header. Tap → ask permission.
   Once on, a single test notification fires so the visitor sees the
   shape of a morning note. Concept demo — no real push backend. */

.today-head--bell {
  position: relative;
}
.bell-btn {
  position: absolute;
  top: 32px;
  right: 22px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(31, 27, 20, 0.16);
  background: var(--cream);
  color: var(--ink-mute);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.bell-btn:hover { color: var(--ink); }
.bell-btn__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 12px 5px;
}
.bell-btn__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bell-btn[data-state="on"] {
  color: var(--forest);
  background: rgba(44, 74, 58, 0.08);
  border-color: rgba(44, 74, 58, 0.3);
}
.bell-btn[data-state="on"] .bell-btn__shape {
  fill: var(--forest);
  stroke: var(--forest);
}
.bell-btn[data-state="on"] .bell-btn__clapper {
  stroke: var(--forest);
}
.bell-btn[data-state="on"] .bell-btn__dot {
  opacity: 1;
  transform: scale(1);
}
.bell-btn[data-state="on"] .bell-btn__icon {
  animation: dw-bell-ring 0.6s ease-out;
}
@keyframes dw-bell-ring {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-14deg); }
  40%  { transform: rotate(11deg); }
  60%  { transform: rotate(-7deg); }
  80%  { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.bell-btn[data-state="blocked"] {
  opacity: 0.55;
  cursor: default;
}

.bell-caption {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 12px 0 0;
  letter-spacing: 0.01em;
  min-height: 18px;
}
.bell-caption[data-tone="on"]      { color: var(--forest); }
.bell-caption[data-tone="blocked"] { color: var(--ink-mute); font-style: italic; }
.bell-caption:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bell-btn[data-state="on"] .bell-btn__icon { animation: none; }
}

/* =========================
   ADD TO HOME SCREEN
   Injected by a2hs.js. iOS gets instructions (Safari has no install API,
   the share sheet is the only route), Android gets a real one-tap button.
   --a2hs-bottom is set at runtime to clear a bottom nav where there is one.
   ========================= */
.a2hs {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: var(--a2hs-bottom, 0px);
  width: 100%;
  max-width: var(--phone-width);
  transform: translate(-50%, 110%);
  transition: transform 420ms cubic-bezier(0.22, 0.8, 0.3, 1);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 44px rgba(31, 27, 20, 0.20);
  padding: 20px 22px calc(18px + env(safe-area-inset-bottom));
}

/* Sitting on top of a nav rather than the screen edge — the safe-area pad
   belongs to the nav, and the lower corners should be visible. */
.a2hs[style*='--a2hs-bottom'] {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 22px;
}

.a2hs--visible { transform: translate(-50%, 0); }

.a2hs__title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.12;
  color: var(--forest-deep);
  margin: 0 0 5px;
}

.a2hs__sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 15px;
}

.a2hs__steps {
  list-style: none;
  margin: 0 0 17px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.a2hs__step {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

.a2hs__step strong { font-weight: 600; }

.a2hs__glyph {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(44, 74, 58, 0.08);
  color: var(--forest);
}

.a2hs__actions { display: flex; gap: 10px; align-items: center; }

.a2hs__btn {
  flex: 1;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  background: var(--forest);
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
}

.a2hs__btn:active { background: var(--forest-deep); }

.a2hs__dismiss {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  background: none;
  border: 0;
  padding: 13px 12px;
  cursor: pointer;
}

/* iOS: no install button exists, so the steps carry the weight and
   "Got it" becomes the only (and therefore primary) action. */
.a2hs[data-mode='ios'] .a2hs__btn,
.a2hs[data-mode='ios'] .a2hs__sub--android { display: none; }

.a2hs[data-mode='ios'] .a2hs__dismiss {
  flex: 1;
  color: var(--cream);
  background: var(--forest);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}

/* Android: the button does the work, so the manual steps are noise. */
.a2hs[data-mode='android'] .a2hs__steps,
.a2hs[data-mode='android'] .a2hs__sub--ios { display: none; }

/* On a laptop the sheet is fixed to the viewport, which would leave it
   hanging below the phone frame. Sit it on the frame's bottom edge instead,
   and round the lower corners to the phone's inner radius. */
@media (min-width: 481px) {
  .a2hs {
    bottom: calc(var(--a2hs-bottom, 0px) + (100vh - min(var(--phone-height), 100vh - 48px)) / 2);
    border-radius: 22px 22px 38px 38px;
  }
  .a2hs[style*='--a2hs-bottom'] { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .a2hs { transition: none; }
}

/* ============ CONTRIBUTE CARD (campaign, switched off from build-config.js) ============ */
.contribute { padding: 24px 20px 0; }
.contribute[hidden] { display: none !important; }
.contribute__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--forest, #2C4A3A);
  color: var(--cream, #F5EFE0);
  border-radius: 14px;
  padding: 18px 18px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(44, 74, 58, 0.22);
}
.contribute__body { flex: 1; min-width: 0; }
.contribute__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dusk, #E8B08B);
  margin: 0 0 4px;
}
.contribute__title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 4px;
  color: inherit;
}
.contribute__sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(245, 239, 224, 0.82);
  margin: 0;
}
.contribute__btn {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rust, #B85C38);
  border-radius: 999px;
  padding: 11px 16px;
}
.foot__help { margin: 0 0 8px; font-family: var(--sans); font-size: 13px; }
.foot__help a { color: var(--rust, #B85C38); text-decoration: underline; text-underline-offset: 3px; }
.foot__help[hidden] { display: none !important; }

/* ============ COMING SOON TILES (not clickable, dimmed) ============ */
.tile--soon {
  cursor: default;
  opacity: 0.62;
  box-shadow: none;
}
.tile--soon .tile__media img { filter: grayscale(0.6); }
.tile__soon {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* ============ TODAY: THIS WEEKEND + EMPTY STATE ============ */
.today-weekend__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: -6px 0 12px;
}
.weekend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.weekend-card {
  background: var(--cream-soft, #F9F4E6);
  border: 1px solid rgba(31, 27, 20, 0.10);
  border-radius: 16px;
  padding: 16px 16px 14px;
}
.weekend-card__venue {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 6px;
}
.weekend-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.12;
  color: var(--forest-deep, #1E3329);
  margin: 0 0 6px;
}
.weekend-card__when {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.weekend-card__cost {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cream-darker, #ECE3CC);
  font-weight: 500;
  color: var(--ink-soft);
}
.weekend-card__blurb, .weekend-card__highlight, .weekend-card__note {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.weekend-card__highlight { margin-top: 8px; color: var(--ink); }
.weekend-card__note { margin-top: 8px; font-size: 13px; color: var(--ink-mute); }
.today-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 6px 24px 0;
}
.today-empty[hidden], .today-weekend[hidden], .today-block[hidden] { display: none !important; }