/* Lambton Family Hub — homepage phone dashboard, pass 1 (September 2026).
   PHONES ONLY. Every rule in this file sits inside the one max-width:700px
   block below (700px is the width the phone bar uses), so nothing here can
   reach the desktop homepage; tests/homepage-mobile-dash.test.mjs fails if a
   rule is ever added outside it. Loaded last, after homepage-editorial.css.

   Pass 1 covers the top of the page and stops at the Premier Sponsors:
   title row, greeting with the date line and the Sarnia weather line, four
   action cards, the search field, the quick-filter chips, the two Premier
   Sponsors. Everything below the sponsors is the homepage as it was and
   belongs to later passes (section 7 only recolours it and resets its type).

   The .m1-* elements ship hidden (index.html, <style id="m1-guard">) and are
   shown here. "html body" plus three repeats of the page class outranks the
   five older style sources. Nothing here names the shared chrome (.lfhx-*,
   .mobile-bottom-nav); the menu button stays where nav-footer.css and the
   legacy theme put it, and the title row leaves room for it. */

@media (max-width: 700px) {
  html body.homepage-autumn.homepage-autumn.homepage-autumn {
    --m1-green: #356382;        /* soft blue: emphasis, selected chips */
    --m1-ink: #22312b;          /* charcoal-green text */
    --m1-muted: #55635c;        /* secondary text, 6.4:1 on the ground */
    --m1-white: #fbfcfb;        /* crisp near-white: the dashboard ground */
    --m1-ground: #f2f5f3;       /* very pale grey-green: the page below the sponsors */
    --m1-line: #d5dcd7;         /* hairline */
    --m1-line-strong: #78877f;  /* search field border, 3.7:1 on white */
    --m1-sage: #e4eee7;         /* very pale sage */
    --m1-cool: #e6eef3;         /* very pale cool blue */
    --m1-greygreen: #ebf0ec;    /* very pale grey-green */
    /* No cream, sand or beige anywhere on the phone page (owner, 17 Sept 2026). */
  }

  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-only { display: block !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn { background: var(--m1-ground) !important; font-family: "Inter", Arial, sans-serif !important; color: var(--m1-ink); }

  /* ---------- 1. title row: a quiet all-caps wordmark and the menu button ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero { background: var(--m1-white) !important; border-bottom: 0 !important; padding: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-inner2 { display: block !important; padding: 12px 16px 16px !important; gap: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-left2 { display: block !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
  /* 42px tall to sit level with the menu button; 56px on the right keeps clear of it. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-h1 { display: flex !important; align-items: center; min-height: 42px; margin: 0 !important; padding: 0 56px 0 0 !important; line-height: 1 !important; min-width: 0; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-wordmark { display: block !important; padding: 0 !important; font: 600 13px/1.3 "Inter", Arial, sans-serif !important; letter-spacing: .17em !important; text-transform: uppercase !important; color: var(--m1-green) !important; white-space: nowrap; }
  /* The events line stays in the H1 for search engines and screen readers. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-title-place { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-tagline,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-today,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-proof { display: none !important; }

  /* ---------- 2. greeting (icon first), the date line and the weather line ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .m1-greet { margin: 14px 0 0 !important; }
    html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; margin: 0 !important; font: 600 clamp(19px, 5.4vw, 22px)/1.3 "Inter", Arial, sans-serif !important; letter-spacing: -.02em !important; color: var(--m1-ink) !important; }
  /* The mark follows the greeting words and closes the phrase, which is why
     the words carry no full stop (owner, 19 September 2026): sun, flower or
     moon by time of day. order:1 puts it after the words and order:2 keeps
     the date on the line below it, since the date is a full-width flex item
     and would otherwise come between them. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon { display: none; flex: none; order: 1; align-self: center; margin-left: 2px; width: 20px; height: 20px; color: #6f8279; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon svg { display: block; width: 20px; height: 20px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon:not(:empty) { display: block; }
  /* Three lines, in this order (owner, 19 September 2026): the icon and the
     greeting, then the date on its own line, then the weather. The date and
     the weather are the same size, 14.5px: the block had three sizes in it
     and read as three unrelated lines rather than a heading and two facts
     (owner, 19 September 2026). The desktop sheet already set both at 19px. The date used
     to sit beside the greeting and wrap under it only on a narrow phone, which
     made the top read as one long line on some phones and two on others. It is
     the same shape the desktop sheet already used, so both widths now agree. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-when { display: block; order: 2; flex: 1 1 100%; margin: 4px 0 0 !important; font: 400 14.5px/1.45 "Inter", Arial, sans-serif !important; letter-spacing: 0 !important; color: var(--m1-muted) !important; white-space: normal; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-when[hidden] { display: none !important; }
  /* The Sarnia weather line, filled by the site's weather function; hidden until a reading arrives. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-weather { margin: 2px 0 0 !important; font: 400 14.5px/1.45 "Inter", Arial, sans-serif !important; color: var(--m1-muted) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-weather[hidden] { display: none !important; }

  /* ---------- 3. four action cards, two by two ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .m1-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; list-style: none; margin: 14px 0 0 !important; padding: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tiles li { margin: 0; padding: 0; min-width: 0; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tile { display: flex !important; flex-direction: column; justify-content: flex-start; gap: 2px; box-sizing: border-box; height: 100%; padding: 10px 12px 11px; border: 1px solid var(--m1-line); border-radius: 13px; background: var(--m1-sage); color: var(--m1-ink) !important; text-decoration: none !important; box-shadow: none; -webkit-tap-highlight-color: rgba(31, 74, 58, .08); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tile--b { background: var(--m1-cool); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tile--c { background: var(--m1-greygreen); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tile--d { background: #fff; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-eyebrow { display: block; font: 600 10px/1.3 "Inter", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-green); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-title { display: block; font: 600 15px/1.25 "Inter", Arial, sans-serif; letter-spacing: -.01em; color: var(--m1-ink); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sub { display: block; font: 400 12px/1.35 "Inter", Arial, sans-serif; color: var(--m1-muted); }
  /* The "Pick for me" popup for an indoor place borrows the event popup's shell. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-pick-eyebrow { margin: 0 0 6px; font: 600 10px/1.3 "Inter", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--m1-green); }

  /* ---------- 4. search: the field itself, no panel around it ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .home-layout { padding-top: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .event-finder-column { margin: 0 -14px !important; padding: 0 16px !important; background: var(--m1-white) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 10px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters .hs-seg { padding: 0 !important; background: transparent !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg-grow { grid-column: 1 / -1 !important; border: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg-grow .hs-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch input#searchInput { height: 50px !important; min-height: 50px !important; padding: 0 12px 0 44px !important; border: 1.5px solid var(--m1-line-strong) !important; border-radius: 14px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355635c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") 16px 50% / 20px 20px no-repeat !important; color: var(--m1-ink) !important; font: 400 16px/1.3 "Inter", Arial, sans-serif !important; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
  /* Room for the clear button only once something is typed, so the prompt fits at 375px. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch input#searchInput:not(:placeholder-shown) { padding-right: 46px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch input#searchInput::placeholder { color: var(--m1-muted) !important; opacity: 1; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch input#searchInput:focus { border-color: var(--m1-green) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hsb-clear { top: 3px !important; right: 4px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 12px; background: transparent !important; color: var(--m1-muted) !important; font-size: 20px; }

  /* ---------- 5. quick filters: one row that scrolls sideways ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips { grid-column: 1 / -1; display: flex !important; flex-wrap: nowrap; gap: 8px; min-width: 0; margin: 10px -16px 0 !important; padding: 0 16px 2px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips::-webkit-scrollbar { display: none; }
  /* A last spacer, because a scroller drops its end padding in some browsers. */
  /* Today and This weekend are the two hero cards directly above the row, so
     the phone does not show them twice (owner, 19 September 2026); the
     701-900px finder still needs them, and the test still expects the markup. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip[data-date-filter] { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips::after { content: ""; flex: 0 0 8px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip { position: relative; flex: none; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: auto !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid #cdd4cc !important; border-radius: 10px !important; background: #fff !important; color: var(--m1-ink) !important; font: 500 14px/1 "Inter", Arial, sans-serif !important; letter-spacing: 0 !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap; box-shadow: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip.active,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip[aria-pressed="true"],
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip[aria-expanded="true"],
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip.is-on { border-color: #cfdbe3 !important; box-shadow: none !important; background: var(--m1-cool) !important; color: var(--m1-ink) !important; font-weight: 600 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip--select::after { content: ""; width: 6px; height: 6px; margin: -3px 1px 0 1px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
  /* The Ages chip is the phone's own picker laid invisibly over the pill. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip--select select { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; font-size: 16px !important; cursor: pointer; -webkit-appearance: none; appearance: none; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip--select:focus-within { outline: 3px solid var(--m1-green); outline-offset: 2px; }

  /* The rest of the finder (town, date, category, ages) opens from the Filters chip. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch:not(.m1-open) > .hs-seg:not(.hs-seg-grow),
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch:not(.m1-open) > .more-filters,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch:not(.m1-open) > .hs-go { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch.m1-open > .hs-seg:not(.hs-seg-grow) { margin-top: 14px !important; border: 0 !important; text-align: left !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-label { font: 600 13px/1.4 "Inter", Arial, sans-serif !important; color: var(--m1-ink) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch select,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-date-value { min-height: 46px !important; border: 1px solid #c3cbc3 !important; border-radius: 10px !important; background-color: #fff !important; color: var(--m1-ink) !important; font-size: 16px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-date-value { display: flex !important; align-items: center; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .more-filters { grid-column: 1 / -1 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .more-filters > summary { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 10px; background: transparent !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters[hidden] { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters .hs-seg { margin-top: 12px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters .filter-age-details { grid-column: 1 / -1 !important; padding: 12px 0 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .filter-age-details .age-specific { align-items: center !important; font-size: 14px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-go { grid-column: 1 / -1 !important; min-height: 48px !important; margin: 14px 0 0 !important; border-radius: 12px !important; background: var(--m1-green) !important; font: 600 16px/1.3 "Inter", Arial, sans-serif !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #resetFilters,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #savedEventsToggle { grid-column: 1 / -1 !important; justify-self: start; min-height: 44px; margin: 4px 0 -6px !important; padding: 4px 2px !important; color: var(--m1-green) !important; font: 500 14px/1.3 "Inter", Arial, sans-serif !important; }

  /* ---------- 6. Premier Sponsors: a permanent place under the filters ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero #heroSponsorCard { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors { margin: 0 -14px 14px !important; padding: 14px 16px 16px !important; background: var(--m1-white); border-bottom: 1px solid var(--m1-line); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors-card { box-sizing: border-box; padding: 11px 13px 13px; border: 1px solid var(--m1-line); border-radius: 15px; background: #fff; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors-card:empty { min-height: 116px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-eyebrow { display: block !important; margin: 0 0 8px !important; text-align: center !important; font: 600 11px/1.5 "Inter", Arial, sans-serif !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--m1-muted) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-eyebrow::before,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-eyebrow::after { content: none !important; display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .desktop-sponsor-label { display: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .mobile-sponsor-label { display: inline !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-spots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-logo-wrap { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; min-width: 0; height: 66px !important; min-height: 0 !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid var(--m1-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; text-decoration: none; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-logo-wrap img { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 46px !important; object-fit: contain !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-name { font: 600 15px/1.3 "Inter", Arial, sans-serif; color: var(--m1-ink); text-align: center; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-empty { margin: 0; text-align: center; font: 400 14px/1.5 "Inter", Arial, sans-serif; color: var(--m1-muted); }
  /* The Co-operators artwork is drawn the way the hero card draws it: the same
     file twice, the agency line enlarged a tenth. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-agency-logo { display: grid; width: 100%; min-width: 0; aspect-ratio: 600 / 161; align-items: center; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-agency-logo > span { grid-area: 1 / 1; display: flex; width: 100%; height: 100%; min-width: 0; align-items: center; justify-content: center; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-agency-logo img { width: 100% !important; max-height: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-agency-brand { clip-path: inset(0 0 27% 0); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-sponsors .psc-agency-line { clip-path: inset(73% 0 0 0); transform: scale(1.1); transform-origin: 50% 85%; pointer-events: none; }
  /* ---------- 7. the rest of the phone page: same type, no beige ----------
     The owner asked (17 Sept 2026) for one typeface on the phone homepage and
     no sand anywhere on it, so the parts below the sponsors are recoloured
     and reset to Inter here without changing their layout. Later passes
     rebuild them. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-label,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-event h3,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-event h3 a,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results h3,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-events-heading,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .saved-events-panel h3,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason h2,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band-title,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .cal-title,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-title,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box h2,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box h3 { font-family: "Inter", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--m1-ink) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-label { font-size: 17px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-event h3 { font-size: 16px !important; line-height: 1.35 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results h3,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason h2,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band-title { font-size: 21px !important; line-height: 1.25 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-title { font-size: 20px !important; line-height: 1.3 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event { background: #fff !important; border-color: var(--m1-line) !important; }
  /* The category colour frames the whole card, in the cool tones index.html
     defines (owner, 19 September 2026). It was a 4px left edge; at phone
     width, where the cards are one per row, the full frame is what separates
     one from the next. Same 2px as the desktop sheet. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event { border: 2px solid var(--cat-border, var(--m1-line)) !important; padding-left: 16px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-save[aria-pressed=true] { background: var(--m1-sage) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .saved-events-panel,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .homepage-aq-banner,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fairs-card-list a,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #calendar.cal-card,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box { background: #fff !important; border-color: var(--m1-line) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fair-date { color: var(--m1-green) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #newsletter.nl-band { background: var(--m1-sage) !important; border-top: 1px solid var(--m1-line) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band-eyebrow { color: #35576b !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .load-more-btn,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results button { background: var(--m1-green) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .load-more-btn { min-height: 44px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .events-progress-bar { background: var(--m1-green) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-more,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results a,
  html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fairs-card-btn { color: var(--m1-green) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-desc,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-row { background: var(--m1-greygreen) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-row strong { color: var(--m1-muted) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-btn-p,
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-close { background: var(--m1-green) !important; color: #fff !important; box-shadow: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-btn-s { background: #fff !important; border: 1px solid var(--m1-line) !important; color: var(--m1-ink) !important; text-decoration: none !important; box-shadow: none !important; }
  /* A day heading is one tap target across the whole row, not just its arrow. */
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid > .event-day-group { display: flex !important; align-items: stretch !important; padding: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-toggle { flex: 1 1 auto !important; width: 100% !important; justify-content: flex-start !important; min-height: 52px !important; padding: 8px 2px !important; text-align: left; cursor: pointer; -webkit-tap-highlight-color: rgba(31, 74, 58, .08); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-line { display: none !important; }
  /* The fall fairs panel is not part of the phone homepage (owner, 18 Sept 2026). */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .home-extras { display: none !important; }
  /* ---------- 8. Worth Knowing: a compact resource list (phones only) ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know { margin: 26px 0 8px !important; padding: 0 2px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-h { margin: 0 !important; font: 600 20px/1.25 "Inter", Arial, sans-serif !important; letter-spacing: -.02em !important; color: var(--m1-ink) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-lede { margin: 3px 0 12px !important; font: 400 14px/1.45 "Inter", Arial, sans-serif !important; color: var(--m1-muted) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-list > li { margin: 0; padding: 0; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; box-sizing: border-box; min-height: 60px; padding: 9px 12px 9px 10px; border: 1px solid var(--m1-line); border-radius: 12px; background: #fff; color: var(--m1-ink) !important; text-decoration: none !important; list-style: none; cursor: pointer; -webkit-tap-highlight-color: rgba(31, 74, 58, .08); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-row::-webkit-details-marker { display: none; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--m1-sage); color: var(--m1-green); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-title { font: 600 15px/1.3 "Inter", Arial, sans-serif; letter-spacing: -.01em; color: var(--m1-ink); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-sub { font: 400 13px/1.35 "Inter", Arial, sans-serif; color: var(--m1-muted); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-chev { color: #7f8f86; transition: transform .18s ease; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-choice[open] > .m1-know-row { border-radius: 12px 12px 0 0; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-choice[open] > .m1-know-row .m1-know-chev { transform: rotate(90deg); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-sub-rows { display: grid; border: 1px solid var(--m1-line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--m1-greygreen); overflow: hidden; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 14px 12px 62px; color: var(--m1-green) !important; font: 600 14.5px/1.3 "Inter", Arial, sans-serif; text-decoration: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-subrow + .m1-know-subrow { border-top: 1px solid var(--m1-line); }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-subnote { font: 400 12.5px/1.3 "Inter", Arial, sans-serif; color: var(--m1-muted); text-align: right; }
  /* ---------- 9. newsletter band: the Beehiiv form draws its own box, so nothing wraps it ---------- */
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .nl-band-inner { display: block !important; padding: 22px 16px 24px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .nl-band-copy { margin: 0 0 12px !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .nl-band-title { font-size: 20px !important; line-height: 1.25 !important; margin: 4px 0 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .nl-band-sub { margin: 4px 0 0 !important; font: 400 14px/1.45 "Inter", Arial, sans-serif !important; color: var(--m1-muted) !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .nl-band-form { flex: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .beehiiv-native-wrap { margin: 0 !important; min-height: 74px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .beehiiv-native-wrap iframe { display: block; width: 100% !important; margin: 0 !important; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band .beehiiv-native-wrap noscript a { display: block; padding: 14px; color: var(--m1-green); font: 600 15px/1.3 "Inter", Arial, sans-serif; }
  html body.homepage-autumn.homepage-autumn.homepage-autumn :is(button, a, input, select, summary):focus-visible { outline-color: var(--m1-green) !important; }
}