/* Lambton Family Hub — homepage desktop dashboard, pass 1 (September 2026). WIDE SCREENS ONLY. Every rule sits inside the one min-width:701px block below, the mirror of homepage-mobile-dash.css's max-width:700px block, so nothing here can reach the approved phone page. Loaded last. Pass 1 gives the desktop the phone dashboard's top and its finish: the photo hero goes and the same calm top takes its place (greeting, date and weather on the left, the four action cards on the right); the page moves to the phone palette (near-white, pale sage / cool blue / grey-green, deep green, charcoal-green text, no beige) and to Inter throughout; the search row, the events, the right column and the footer keep their places and are recoloured. Passes 2 and 3 reworked the events area, Worth Knowing and the right column. Pass 4 takes the repetition out. The desktop page was carrying the same site map twice -- the 29-row rail under a header that already reaches all 29 -- and the same four filters three times over, as the hero's cards, the finder's selects and a chip row between them. The rail goes at every width and the chips go from 901px up, where the finder is open in one row; the page is two columns from there, events and the right column, on the hero's own 40px gutter. Nothing above is unwound: the palette, the type and the three passes' components all stay. See sections 2 and 8. "html body" plus three repeats of the page class outranks homepage-desktop.css's doubled class and every older sheet. Nothing here names the shared chrome (.lfhx-*); the footer wears its modifier from footer-themes.css. */ @media (min-width: 701px) { html body.homepage-autumn.homepage-autumn.homepage-autumn { /* the phone palette, and the desktop sheet's own tokens re-pointed at it */ --m1-green: #356382; --m1-ink: #22312b; --m1-muted: #55635c; --m1-white: #fbfcfb; --m1-ground: #f2f5f3; --m1-line: #d5dcd7; --m1-line-strong: #78877f; --m1-sage: #e4eee7; --m1-cool: #e6eef3; --m1-greygreen: #ebf0ec; --d-acc: #356382; --d-acc-dk: #3c7194; --d-tint: #e4eee7; --d-ground: #f2f5f3; --d-panel: #fff; --d-soft: #fbfcfb; --d-line: #d5dcd7; --d-hair: #e3e8e4; --d-ink: #22312b; --d-ink2: #55635c; --d-ink3: #6f7d76; --d-ink4: #6f7d76; --rust: #356382; --teal: #356382; --teal-dk: #3c7194; --teal-pale: #e4eee7; --ink: #22312b; --ink-mid: #55635c; --border: #d5dcd7; background: var(--m1-ground) !important; color: var(--m1-ink) !important; font-family: "Inter", Arial, sans-serif !important; } /* One typeface: every serif heading on the page becomes Inter, weight and size doing the work. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-h1, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-wordmark, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-rail-brand, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .finder-heading, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-events-heading, 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 .saved-events-panel h3, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel h2, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-head b, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend b, 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 { font-family: "Inter", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: -.015em !important; color: var(--m1-ink) !important; } /* ---------- 1. the top: greeting on the left, the four cards on the right ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero { background: var(--m1-white) !important; border: 0 !important; border-bottom: 1px solid var(--m1-line) !important; padding: 0 !important; overflow: visible !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero::before, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero::after { display: none !important; content: none !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-inner2 { display: block !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-left2 { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(400px, 560px) !important; grid-template-rows: auto !important; align-items: center !important; column-gap: 40px !important; row-gap: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 30px 40px 32px !important; box-sizing: border-box; } /* The H1 stays in the page for search engines and screen readers; the header already shows the name. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-h1 { 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, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-mode, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero #heroSponsorCard { display: none !important; } /* The phone's greeting and cards, shown here too. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .m1-greet { display: block !important; grid-column: 1; grid-row: 1; margin: 0 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .m1-tiles { display: grid !important; grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0 !important; padding: 0 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 0; margin: 0 !important; font: 600 44px/1.15 "Inter", Arial, sans-serif !important; letter-spacing: -.03em !important; color: var(--m1-ink) !important; } /* The mark follows the words here too: the greeting string is shared with the phone, and with its full stop gone an icon in front would leave the line looking unfinished. order:2 on the date keeps it the line below. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon { display: none; flex: none; order: 1; align-self: center; margin-left: 2px; width: 34px; height: 34px; color: #6f8279; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon svg { display: block; width: 34px; height: 34px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello-icon:not(:empty) { display: block; } /* On a wide screen the date takes its own line under the greeting, and the weather the line after. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-when { display: block; order: 2; flex: 1 1 100%; margin: 8px 0 0 !important; font: 400 19px/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; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-weather { margin: 4px 0 0 !important; font: 400 19px/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; } 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%; min-height: 96px; padding: 14px 16px 15px; border: 1px solid var(--m1-line); border-radius: 14px; background: var(--m1-sage); color: var(--m1-ink) !important; text-decoration: none !important; box-shadow: none; transition: border-color .15s ease; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-tile:hover { border-color: var(--m1-line-strong); } 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 11px/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 17px/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 13.5px/1.35 "Inter", Arial, sans-serif; color: var(--m1-muted); } /* ---------- 2. one destination, one place on the page ---------- The rail listed all 29 destinations the sticky header already reaches through its seven cells and the Activities and Guides menus, so the desktop homepage carried the same site map twice and spent 236px of every wide screen on the second copy. The header keeps the job: it is the shared chrome every other page wears and it stays put on scroll, which the rail never did. The width goes to the events, which are what the page is for, and Worth Knowing keeps the five family destinations in the body where a parent is already reading. The markup stays in index.html and is only hidden here: it is what sync-nav-fallback.js generates, what nav.js re-stamps when the season turns, and what tests/nav-coverage.test.mjs reads to prove every page is reachable. Phones never showed it. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-rail { display: none !important; } /* ---------- 3. the search row ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch { background: transparent !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg-grow, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters > .hs-seg, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-date-seg { background: #fff !important; border-color: var(--m1-line) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg-grow:focus-within, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters > .hs-seg:focus-within { border-color: var(--m1-green) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch input#searchInput, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch select, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-value, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-date-value { color: var(--m1-ink) !important; background: #fff !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-label { color: var(--m1-muted) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .hs-go { background: var(--m1-green) !important; color: #fff !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #resetFilters, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #savedEventsToggle { color: var(--m1-green) !important; } /* The quick-filter chips, for the widths that still need them. From 901px the finder is open in one row above, and every chip was a second control for something already on screen: Today and This weekend repeated the Date select and the two cards in the hero, Free repeated the Category select, Ages repeated the Ages select 40px higher, and Indoor repeated Worth Knowing's Indoor Ideas. They are hidden there (section 8). Between 701 and 900px the finder is still the folded panel with Category and Ages behind More filters, so the chips are the only quick route to them and stay. */ html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips { display: flex !important; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; order: 99; margin: 2px 0 0 !important; padding: 0; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid var(--m1-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--m1-ink) !important; font: 500 14px/1 "Inter", Arial, sans-serif !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chip:hover { border-color: var(--m1-line-strong) !important; } 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.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); } 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; cursor: pointer; } /* Filters is a phone control (it opens the folded finder); the finder is already open here. */ html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #m1ChipFilters { display: none !important; } /* ---------- 4. events, right column, fairs, newsletter ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn #events, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel, html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event, html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fairs-card-list a, html body.homepage-autumn.homepage-autumn.homepage-autumn .saved-events-panel, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .no-results, 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 .lfh-panel-accent { background: var(--m1-sage) !important; border-color: var(--m1-sage) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-sp-label, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-dn { color: var(--m1-muted) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-rule, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid > .event-day-group { border-color: var(--m1-line) !important; } /* Each premier sponsor sits in its own quiet well (owner, 19 September 2026: "a slight border behind the premier sponsors on desktop"). The two logos used to float on the panel's white with a hairline between them, which read as an accident of spacing rather than a paid placement. The frame is the panel's own line colour, so it says "placed" without competing with the artwork. Desktop only: this whole file is min-width 701px, and the phone card is settled. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-sp-row { border: 1px solid var(--m1-line) !important; border-radius: 10px !important; background: #fff !important; padding: 12px 10px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-sp-row + .lfh-sp-row { border-top: 1px solid var(--m1-line) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn a.lfh-sp-row:hover { border-color: var(--m1-line-strong) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-d.today, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-d.sel { background: var(--m1-green) !important; color: #fff !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-d:hover:not(.other):not(.disabled) { background: var(--m1-greygreen) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-d.has::after, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-key i { background: var(--m1-green) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-nav { background: var(--m1-greygreen) !important; color: var(--m1-ink) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend time, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-head a, 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 .fair-date, html body.homepage-autumn.homepage-autumn.homepage-autumn .nl-band-eyebrow { color: var(--m1-green) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-side-btn, html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fairs-card-btn, 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; color: #fff !important; border-color: var(--m1-green) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .load-more-btn:hover, html body.homepage-autumn.homepage-autumn.homepage-autumn #fairSeason .fairs-card-btn:hover { background: var(--d-acc-dk) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .events-progress { background: var(--m1-greygreen) !important; } 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-save:hover { background: var(--m1-greygreen) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-save[aria-pressed=true] { background: var(--m1-sage) !important; 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-form { background: #fff !important; border: 1px solid var(--m1-line) !important; box-shadow: none !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-btn-p, html body.homepage-autumn.homepage-autumn.homepage-autumn .modal-box .modal-close { background: var(--m1-green) !important; color: #fff !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; } /* ---------- 5. events area (pass 2): the phone's proportions, one row per day heading ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn #events { padding: 22px 24px 24px !important; border-radius: 14px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-events-heading { font-size: 22px !important; margin: 0 0 6px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid { gap: 14px 16px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid > .event-day-group { padding: 14px 0 8px !important; border-bottom: 1px solid var(--m1-line) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-toggle { width: 100% !important; min-height: 44px !important; cursor: pointer; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-label { font-size: 19px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .edg-count { font: 400 13.5px/1.4 "Inter", Arial, sans-serif !important; color: var(--m1-muted) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event { border-radius: 12px !important; padding: 15px 16px 13px !important; box-shadow: none !important; } /* The category colour was a 4px stripe down the left edge; it frames the whole card now (owner, 19 September 2026), so a card reads as its category wherever the eye lands on it rather than only at the margin. 2px, not the stripe's 4px: four heavy edges on a white card at this size is a box, not an accent. The padding loses the extra left inset the stripe needed, so the text block sits where it did. */ html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event { border: 2px solid var(--cat-border, var(--m1-line)) !important; } /* The card does not react to hover at all (owner, 19 September 2026: "drop the hover change on the cards"). It still has to say so explicitly: the older sheet's hover swaps border-color to grey and adds a lift and a shadow, all !important, so this rule holds the resting border, the flat surface and the still card against it. Nothing here is a hover-only affordance -- the whole card is the link, and "More info" is in it. */ html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid article.home-event:hover { border-color: var(--cat-border, var(--m1-line)) !important; background: #fff !important; transform: none !important; box-shadow: none !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-event h3 { font-size: 16.5px !important; line-height: 1.35 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-fact, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-detail, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-description { color: var(--m1-muted) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-fact svg, html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-detail svg { color: #7f8f86 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #eventsGrid .home-category { font: 600 10.5px/1.5 "Inter", Arial, sans-serif !important; letter-spacing: .14em !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .load-more-btn { border-radius: 12px !important; font: 600 15px/1.3 "Inter", Arial, sans-serif !important; } /* ---------- 6. Worth Knowing on wide screens (pass 2): five across under the events ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know { display: block !important; grid-column: 2 / -1; grid-row: 3; margin: 0 !important; padding: 22px 24px 24px !important; background: #fff; border: 1px solid var(--m1-line); border-radius: 14px; box-sizing: border-box; min-width: 0; } html body.homepage-autumn.homepage-autumn.homepage-autumn .home-extras { grid-row: 4 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-h { margin: 0 !important; font: 600 22px/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 16px !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-know-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-list > li { margin: 0; padding: 0; min-width: 0; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; height: 100%; min-height: 128px; padding: 14px 14px 14px; border: 1px solid var(--m1-line); border-radius: 12px; background: var(--m1-white); color: var(--m1-ink) !important; text-decoration: none !important; list-style: none; cursor: pointer; transition: border-color .15s ease; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-row:hover { border-color: var(--m1-line-strong); } 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: 2px; 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.4 "Inter", Arial, sans-serif; color: var(--m1-muted); } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-chev { display: none; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-choice { display: block; height: 100%; } 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-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; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 14px; color: var(--m1-green) !important; font: 600 14px/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); } /* ---------- 7. right column (pass 3): sponsors, your saved plans, a compact calendar, this weekend ---------- */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-side { display: flex !important; flex-direction: column; gap: 16px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel { padding: 18px 20px 20px !important; border-radius: 14px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel h2 { font-size: 17px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-head a { font: 600 13px/1.4 "Inter", Arial, sans-serif; color: var(--m1-green) !important; text-decoration: none; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-head a:hover { text-decoration: underline; text-underline-offset: 3px; } /* The sidebar newsletter panel goes; the band at the foot of the page does that job. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-side .lfh-panel-accent { display: none !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved { display: block !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved[hidden] { display: none !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--m1-line); } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-row:first-child { border-top: 0; padding-top: 2px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-when { grid-row: 1 / span 2; align-self: start; padding-top: 2px; font: 600 11px/1.5 "Inter", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--m1-green); } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-title { font: 600 14.5px/1.35 "Inter", Arial, sans-serif; color: var(--m1-ink); text-decoration: none; overflow-wrap: anywhere; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-title:hover { text-decoration: underline; text-underline-offset: 3px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-time { font: 400 13px/1.4 "Inter", Arial, sans-serif; color: var(--m1-muted); } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-more { padding: 10px 0 0; border-top: 1px solid var(--m1-line); } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-saved-more a { font: 600 13.5px/1.4 "Inter", Arial, sans-serif; color: var(--m1-green); text-decoration: none; } /* A calmer calendar: smaller cells, the day marks in green, today filled. */ html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-head { margin: 0 0 6px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-head b { font-size: 15px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-nav { width: 30px !important; height: 30px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-dn { padding: 2px 0 !important; font-size: 10.5px !important; letter-spacing: .06em; text-transform: uppercase; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-grid .cal-d { height: 30px !important; font-size: 12.5px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-cal-key { margin: 8px 0 0 !important; font-size: 12px !important; color: var(--m1-muted) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-panel-rule { margin: 14px 0 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend .lfh-wk-row, html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend > * { border-color: var(--m1-line) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend time { font-size: 11px !important; letter-spacing: .08em !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-weekend b { font-size: 14.5px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn :is(button, a, input, select, summary):focus-visible { outline-color: var(--m1-green) !important; } } /* With the rail gone the page is two columns from 901px: the events and the right column, held to the hero's own 40px gutter so the finder starts on the same line as the greeting above it. Below 901px the older sheets already stack everything and hide the rail, so nothing here reaches them. */ @media (min-width: 901px) { /* ---------- 8. the chips, where the finder is already open ---------- Section 3 has the full list of what each one repeated. */ html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips { display: none !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .home-layout { grid-template-columns: minmax(0, 1fr) 320px !important; padding: 0 40px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .event-finder-column { grid-column: 1 / -1 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #events { grid-column: 1 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-side { grid-column: 2 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know { grid-column: 1 / -1 !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .home-extras { grid-column: 1 / -1 !important; } } /* Tablets (701–900px) still use the older stacked layout for the finder; on them the finder is a panel, so give it the palette rather than the sand. */ @media (min-width: 701px) and (max-width: 900px) { html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .hero-left2 { grid-template-columns: 1fr !important; row-gap: 18px !important; padding: 22px 20px 24px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .lfh-hero .m1-tiles { grid-column: 1; grid-row: 2; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-hello { font-size: 32px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch { background: var(--m1-white) !important; border: 1px solid var(--m1-line) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .m1-chips { grid-column: 1 / -1; } html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch > .hs-seg, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters .hs-seg, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch .more-filters, html body.homepage-autumn.homepage-autumn.homepage-autumn #homeSearch #extraFilters { background: var(--m1-white) !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know { margin: 20px 0 0 !important; padding: 18px 16px 18px !important; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html body.homepage-autumn.homepage-autumn.homepage-autumn .m1-know-row { flex-direction: row; align-items: center; min-height: 64px; } }