/* The calendar page: the bookshelf's cream paper (light in dark mode too), serif throughout.
   Every token the dark block sets is set back here, or it bleeds through (the free chip's green went pale).
   Gold is a fill (#B9822A, the one thing to tap); gold words are --accent-text, dark enough to read (4.5:1 or better on paper, sunk and white).
   Muted is 5.2:1 on paper; the focus ring is the gold words' colour, 5.4:1 on paper. A chosen chip or switch is ink, not gold. */
body:has(.bookshelf) {
  --bg: #F4F0E9; --surface: #fff; --sunk: #EAE3D8; --ink: #2a2622; --muted: #6b6358; --line: #DED6CA;
  --accent: #B9822A; --accent-text: #845A12; --focus: #845A12; --accent-ink: #fff; --accent-soft: #F6ECD9; --plank: #D8CCBA;
  --ok: #2f6b3a; --warn: #a23b2a; --smile: #c08a2c; --smile-soft: #fbf1dc;
  color-scheme: light;
}
.bookshelf { max-width: 1100px; margin: 0 auto; padding: 0 16px calc(48px + env(safe-area-inset-bottom)); }
/* The masthead: the name left, Instagram and About right. */
.shelf-nav { display: flex; align-items: center; gap: 18px; padding: 8px 0; font-size: 14px; }
.bookshelf .wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 600 clamp(23px, 2vw, 27px)/1 var(--serif); letter-spacing: -.005em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-links { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.bookshelf .site-links a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; }
.bookshelf .site-links .site-about { padding: 0 6px; font: 16px var(--sans); }
.bookshelf .site-links a:hover { color: var(--accent-text); }
.bookshelf .site-links .site-about[aria-current=page] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.bookshelf button.shelf-new { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.bookshelf button.shelf-new:hover { border-color: var(--ink); }
.shelf-head { display: grid; gap: 4px; justify-items: start; margin: 36px 0 28px; }
.shelf-head p { margin: 0; font-size: 15px; }

/* /admin: drafts are muted and marked; only the admins see them. */
.admin-mark { margin-left: -8px; padding: 1px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.draft-mark { display: inline-block; padding: 0 6px; border-radius: 5px; border: 1px dashed var(--muted); color: var(--muted); font: 600 12px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; vertical-align: .2em; }
.event.draft, .arow.draft { opacity: .7; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px var(--line); }
.event.draft:hover, .arow.draft:hover { opacity: 1; }
.season-stats .drafts dd { color: var(--muted); }
.admin-actions { padding-top: 12px; border-top: 1px solid var(--line); }
label.check { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
label.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* The foot of every page: whose site, where to find her, and the promise. */
.site-foot { max-width: 1100px; margin: 0 auto; padding: 6px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 16px/1.4 var(--serif); color: var(--muted); text-align: center; }
.site-foot p { margin: 0; }
.site-foot a { display: inline-block; padding: 12px 2px; color: var(--ink); }

/* Chips, the view switch, the filter row and forms, from the family app's lists. */
.chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.small { padding: 1px 9px; font-size: 13px; color: var(--muted); }
.years { display: flex; flex-wrap: wrap; gap: 6px; }
.narrow-form .field { margin-bottom: 8px; }
.row > .field.wide { flex: 3 1 220px; }
.row > .field.narrow { flex: 0 1 120px; }
.row > .field.fit { flex: 0 0 auto; }
.narrow-form { max-width: 560px; }
.narrow-form .row > .field { flex: 1 1 120px; }
.errors { margin: 0 0 12px; padding-left: 18px; }
.hint { font-size: 13px; margin: 4px 0 0; }
.panel-who { margin: 6px 0 0; color: var(--muted); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.panel-actions form { display: inline; margin: 0; }
.view-switch { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.view-switch a { position: relative; padding: 4px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none; }
.view-switch a.on { background: var(--ink); color: #fff; }
/* A thumb's height to tap (44px) without a taller pill. */
.view-switch a::after { content: ""; position: absolute; inset: -8px 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.filters input[type=search] { flex: 1 1 100%; width: 100%; min-height: 44px; font-size: 16px; padding: 10px 14px; border-radius: 999px; }
.filters .chips { display: inline-flex; gap: 4px; }
.filters button.chip { min-height: 40px; font: 15px var(--sans); padding: 8px 14px; white-space: nowrap; cursor: pointer; background: var(--surface); border-color: var(--line); color: var(--ink); }
.filters button.chip:hover { border-color: var(--accent); }
.filters button.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-count { margin-left: auto; font-size: 14px; white-space: nowrap; }
.filter-empty { margin: 0 0 16px; }
.filter-close { margin: 0 0 12px; font-size: 14px; }
/* The search's clear x, in the site's muted ink instead of the system blue. */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-left: 6px; cursor: pointer; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 4.5l9 9m0-9l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 4.5l9 9m0-9l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=search]::-webkit-search-cancel-button:hover { background: var(--ink); }
.festive { width: 1.2em; height: 1.2em; vertical-align: -.25em; }

.season-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: end; gap: 12px 32px; margin: 28px 0 22px; }
.season-head h1 { max-width: 17em; margin: 0; font: 500 clamp(30px, 3.6vw, 46px)/1.08 var(--serif); text-wrap: balance; }
.season-head .season-sub { max-width: 36em; margin-top: 6px; font: clamp(17px, 1.4vw, 19px)/1.4 var(--serif); color: var(--muted); }
.season-sub a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.season-sub a:hover { text-decoration-color: var(--ink); }
.season-head .years { margin-top: 10px; }
.season-stats { display: flex; gap: 22px; margin: 0; }
.season-stats div { display: grid; }
.season-stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.season-stats dd { margin: 0; font: 500 clamp(30px, 8vw, 36px)/1 var(--serif); color: var(--ink); }
.season-stats button.stat-open { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-left: -9px; padding: 2px 8px 2px 9px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.season-stats button.stat-open::after { content: "›"; font: 600 .55em var(--sans); color: var(--accent-text); }
.season-stats button.stat-open:hover { box-shadow: 0 0 0 1px var(--accent); }
.season-stats button.stat-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Filters sit on the paper, so chips are white with the amber accent when on.
   The bar sticks as the list scrolls, its top (the search) tucked off the screen so the chip row stays:
   4px + the 44px search + the 8px gap is the 52px it sits above the top, and the group headings stick under the 52px left. */
.season-filters { position: sticky; top: -52px; z-index: 3; margin: 0 -16px 16px; padding: 4px 16px; row-gap: 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: top .2s ease-out; }
.season-filters.is-stuck { box-shadow: 0 1px 0 var(--line); }
/* 🔍 brings the search back down over the list. */
.season-filters.is-searching { top: 0; }
.filters-sentinel { height: 1px; margin-bottom: -1px; }
.season-filters input[type=search] { height: 44px; min-height: 0; padding-block: 0; }
.filter-row .chips { flex: 1 1 auto; min-width: 0; }
.filter-row { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; }
.season-filters button.filter-find { display: none; flex: none; position: relative; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 17px; cursor: pointer; }
.season-filters.is-stuck button.filter-find { display: grid; }
.season-filters.has-query button.filter-find::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.season-filters.is-stuck button.chip { min-height: 36px; padding: 6px 12px; font-size: 14px; }
/* "3 of 40" sits at the end of the search, so the bar keeps its height. */
.season-filters .filter-count { position: absolute; top: 4px; right: 30px; height: 44px; display: flex; align-items: center; font-size: 14px; pointer-events: none; }
.season-filters:has(.filter-count:not(:empty)) input[type=search] { padding-right: 84px; }
@media (prefers-reduced-motion: reduce) { .season-filters { transition: none; } }
.season-filters input[type=search] { background: #fff; border-color: var(--line); }
.season-filters button.chip { background: #fff; color: var(--ink); }
.season-filters button.chip:hover { border-color: var(--accent); }
/* On a phone Free only and the kind chips scroll sideways in one row instead of stacking; the right edge fades so the next chip shows there's more. */
.season-filters .chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 56px 2px 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.season-filters .chips::-webkit-scrollbar { display: none; }
.season-filters .chips .chip { flex: none; }
.season-filters .chips .free-toggle { margin-right: 6px; }
.season-filters button.chip.active, .season-filters button.free-toggle.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.season-group { margin: 0 0 30px; }
/* The rail above already shows all of today, so the list starts at what's next; a filter brings today's rows back. */
.season[data-lead=today]:not(.is-filtered) .season-group[data-bucket=today] { display: none; }
.season-group-head { margin: 0 0 10px 4px; font: 500 clamp(22px, 6vw, 26px)/1 var(--serif); color: var(--ink); }
.season-group-head small { font: italic 400 17px var(--serif); color: var(--muted); margin-left: 4px; }
.season-group.passed .season-group-head { color: var(--muted); }
/* In the list a group's name stays at the top while its rows scroll under it. */
.view-list .season-group-head { position: sticky; top: 52px; z-index: 1; margin: 0 0 4px; padding: 6px 4px; background: var(--bg); }
.chip.small { background: var(--sunk); border-color: transparent; color: var(--ink); }
.chip.small.free { background: color-mix(in srgb, var(--ok) 14%, #fff); color: var(--ok); font-weight: 600; }
@media (max-width: 640px) {
  .season-head { grid-template-columns: 1fr; margin: 12px 0 16px; gap: 10px; }
  .season-head h1 { font-size: 26px; text-wrap: wrap; }
  .season-head .season-sub { margin-top: 2px; }
  /* What's on today, just under, says what the counts did; admin keeps Drafts. */
  .season-stats { gap: 16px; }
  .season-stats > div:not(.drafts) { display: none; }
  .season-stats:not(:has(.drafts)) { display: none; }
}

/* The panel: the facts, the way to its page, and who found it. */
.event-panel .panel-who { color: var(--muted); }
.event-panel-head { display: flex; align-items: center; gap: 14px; padding-right: 48px; }
.event-panel-head > div:last-child { min-width: 0; }
.event-panel-head .panel-who { margin: 0 0 2px; }
.event-panel-head h2 { margin: 0; font-size: clamp(22px, 6vw, 26px); overflow-wrap: anywhere; }
.event-panel-art { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: var(--tint); }
.event-panel-art .festive { width: 36px; height: 36px; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .15)); }
.event-panel-art span { font-size: 30px; }
.event-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px; margin: 0; font-size: 15px; }
.event-facts dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 3px; }
.event-facts dd { margin: 0; }
.event-facts .muted { font-size: 14px; }
/* Map stays a word in the line, but a thumb's height to tap. */
.event-facts a.event-map { display: inline-block; padding: 11px 2px; margin-block: -10px; }
.event-go { margin: 4px 0 0; }
/* Whoever found it is credited, linking their post. */
.event-credit { margin: 0; font: italic 16px/1.4 var(--serif); color: var(--muted); }
.event-credit a { display: inline-block; padding: 11px 0; margin-block: -11px; color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.event-credit a:hover { text-decoration-color: var(--ink); }

/* The calendar: three month grids, a day showing its marks and how much is open. */
/* Calendar | List over the season, moved down from the masthead so the top reads like a site; on a phone the calendar's Month | Agenda sits at the other end. */
.season-controls { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.season-controls .view-switch a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; font-size: 15px; }
/* Month | Agenda is a phone choice; a wider screen always has the three grids. */
.calendar-mode { display: none; margin-left: auto; }
.month-head { display: flex; align-items: baseline; justify-content: space-between; }
.month-nav { display: none; gap: 6px; }
.calendar-key { margin: 0 0 18px; font-size: 13px; }
.calendar-key .key-hint::before { content: "· "; }
.calendar-key .key { display: inline-block; padding: 1px 8px; border-radius: 6px; margin-right: 4px; }
.calendar-key .on { background: var(--sunk); color: var(--ink); }
.calendar-key .opens, .calendar-key .last { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
/* Opens and last-day marks: a muted ink that still reads on white and on the paper (3:1 or better); on-the-day marks stay darkest. */
:root { --mark-edge: #8F8473; }
.calendar { display: grid; gap: 34px; }
.calendar .month { scroll-margin-top: 12px; }
.month-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month-grid .dow { padding: 0 0 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.month-grid .blank { min-height: 0; }
.month-grid .day { min-height: 104px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); overflow: hidden; }
.month-grid .day.quiet { background: rgb(255 255 255 / .45); box-shadow: none; }
/* A day gone by goes quiet (muted words, no card) rather than see-through, so its marks still read. */
.month-grid .day.past { background: rgb(255 255 255 / .5); box-shadow: none; }
.season .month-grid .day.past button.day-open { color: var(--muted); }
.month-grid .day.today { box-shadow: inset 0 0 0 2px var(--accent); opacity: 1; }
.season button.day-open { display: grid; grid-template-rows: auto 1fr auto; width: 100%; height: 100%; min-height: inherit; padding: 6px 6px 5px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; }
.season button.day-open:hover { background: var(--accent-soft); }
.day-number { font: 600 15px/1 var(--serif); }
.month-grid .today .day-number { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -3px 0 0 -4px; border-radius: 50%; background: var(--ink); color: #fff; }
.day-marks { display: grid; align-content: start; gap: 2px; margin-top: 4px; min-width: 0; }
.mark { display: block; padding: 1px 5px; border-radius: 5px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark.on { background: var(--sunk); }
.mark.opens, .mark.last { box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.mark.more { color: var(--muted); padding-left: 2px; }
.day-count { font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .month-grid { gap: 2px; }
  .month-grid .day { min-height: 58px; border-radius: 8px; }
  .season button.day-open { padding: 4px; }
  .day-number { font-size: 13px; }
  /* Marks become dots on a phone; the day's panel has the names. */
  .day-marks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
  .mark { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: none; }
  .mark.on { background: var(--ink); }
  .mark.opens, .mark.last { background: var(--mark-edge); }
  .mark.more { display: none; }
  /* No count on a phone: the marks are enough at this size, and the day's list has the rest. */
  .day-count { display: none; }
  /* The key as one small line of dots, matching the grid. */
  .calendar-key { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; }
  .calendar-key .key { padding: 0; margin-right: 8px; background: none; box-shadow: none; color: var(--muted); }
  .calendar-key .key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--mark-edge); }
  .calendar-key .key.on::before { background: var(--ink); }
  .calendar-key .key-hint { display: block; }
  .calendar-key .key-hint::before { content: none; }
  .calendar-mode { display: inline-flex; }
  /* List mode: one month at a time, days as a number over dots, the day's list under. */
  .calendar--list { gap: 14px; }
  .calendar--list .month:not(.shown) { display: none; }
  .calendar--list .month-nav { display: inline-flex; }
  .calendar--list .month-nav button { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 20px; display: inline-grid; place-items: center; cursor: pointer; }
  .calendar--list .month-nav button:disabled { opacity: .3; cursor: default; }
  .calendar--list .month-grid .day { min-height: 46px; background: none; box-shadow: none; }
  .calendar--list .month-grid .day.past { opacity: .5; }
  .calendar--list .month-grid .day.today { opacity: 1; }
  .calendar--list .month-grid .day.selected { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); opacity: 1; }
  .calendar--list .season button.day-open { grid-template-rows: auto auto; justify-items: center; align-content: start; padding: 6px 2px 4px; }
  .calendar--list .day-number { font-size: 15px; }
  .calendar--list .month-grid .today .day-number { margin: -3px 0 0; }
}

/* A day's list (the panel's, or under the month): everything open, each a button into its event. */
.calendar-agenda { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.calendar-agenda:empty { display: none; }
.agenda-day { margin: 0 0 4px; font: 500 20px/1.2 var(--serif); color: var(--ink); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.day-row { display: flex; align-items: center; gap: 6px; }
.calendar-agenda button.day-row-open, .side-panel button.day-row-open { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; text-align: left; font: inherit; color: var(--ink); background: var(--sunk); border: 0; border-radius: 10px; cursor: pointer; }
.calendar-agenda button.day-row-open:hover, .side-panel button.day-row-open:hover { background: var(--accent-soft); }
.day-row-emoji { font-size: 20px; flex: none; }
.day-row-text { display: grid; min-width: 0; }
.day-row-text strong { font: 600 16px/1.2 var(--serif); }
.day-row-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  /* Admin's badge and Add wrap under the name on a phone. */
  .season .shelf-nav { flex-wrap: wrap; gap: 0 12px; }
}

/* The list: Group and Sort in one row over rows, one activity each. */
.list-controls { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 18px; align-items: center; margin-top: -8px; }
.list-controls > label.list-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; font-size: 14px; }
/* Group and Sort drawn like the chips (Safari's own select is a grey stepper): a white pill with a chevron. */
.list-controls select { -webkit-appearance: none; appearance: none; width: auto; min-width: 0; height: 40px; padding: 0 34px 0 14px; font-size: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a2622' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
.list-controls select:hover { border-color: var(--ink); }
/* What and When as before; Hours and Cost share the room so a cost can wrap to two lines instead of cutting off. */
.rows-head { display: grid; grid-template-columns: minmax(220px, 2.1fr) minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(130px, 1.3fr) minmax(100px, .8fr); gap: 0 12px; align-items: center; }
.rows-head { grid-column: 1 / -1; padding: 6px 12px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rows-groups { grid-column: 1 / -1; }
.view-list .season-group { margin-bottom: 22px; }
.rows { display: grid; gap: 3px; }
.arow { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.arow.passed { opacity: .6; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.arow.passed:hover { opacity: 1; }
.season button.arow-open { display: grid; grid-template-columns: minmax(220px, 2.1fr) minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(130px, 1.3fr) minmax(100px, .8fr); gap: 0 12px; align-items: center; width: 100%; padding: 7px 12px; text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; border-radius: 12px; cursor: pointer; }
.season button.arow-open:hover { background: var(--accent-soft); }
.arow-what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.arow-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--tint); }
.arow-icon .festive { width: 22px; height: 22px; }
.arow-icon span { font-size: 18px; }
.arow-text { display: grid; min-width: 0; }
.arow-text strong { font: 600 16px/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow-when { display: grid; line-height: 1.25; }
.arow-when small { font-size: 12px; color: var(--accent-text); font-weight: 600; }
.arow.coming .arow-when small { color: var(--muted); font-weight: 400; }
.arow-hours, .arow-cost { font-size: 12.5px; color: var(--muted); overflow: hidden; }
.arow-hours { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.arow-cost .chip.small { background: var(--sunk); border-color: transparent; color: var(--ink); border-radius: 10px; line-height: 1.3; padding-block: 2px; max-width: 100%;
  display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* No hours given: say so, quietly, in the table; a phone's row just leaves the line out. */
.arow-hours-none { color: var(--muted); font-style: italic; }
.arow-cost .chip.small.free { background: color-mix(in srgb, var(--ok) 14%, #fff); color: var(--ok); font-weight: 600; }
.arow-area { font-size: 13px; color: var(--muted); }
/* The area is its own column on a wide screen; on a phone it leads the small line. */
.arow-text-area { display: none; }
@media (max-width: 860px) {
  .rows-head { display: none; }
  .season button.arow-open { grid-template-columns: 1fr; gap: 2px; padding: 9px 12px; }
  .arow-text small { font-size: 13px; }
  .arow-text-area { display: inline; }
  .arow-text-area + .arow-text-place::before { content: " · "; }
  .arow-when, .arow-cost { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding-left: 44px; }
  .arow-hours { font-size: 13px; padding-left: 44px; }
  .arow-hours:has(.arow-hours-none) { display: none; }
  .arow-area { display: none; }
  .arow-cost:empty, .arow-when:empty, .arow-hours:empty { display: none; }
  .list-controls { gap: 0 14px; margin-bottom: 4px; }
  .list-controls > label.list-pick { font-size: 13px; }
}
/* An iPad upright: two rows side by side, so a row isn't 700px wide with its words in the left half. */
@media (min-width: 700px) and (max-width: 860px) {
  .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .arow { display: flex; }
  .season button.arow-open { align-content: start; }
}


/* /about: one screen, the site's story, how listings are checked, where to say something's wrong. */
.about { max-width: 640px; }
.about-page { padding: 12px 0 8px; }
.about-page h1 { margin: 6px 0 8px; font: 500 clamp(28px, 7vw, 40px)/1.08 var(--serif); text-wrap: balance; }
.about-page .about-lede { margin: 0 0 4px; font: 18px/1.4 var(--serif); }
.about-page h2 { margin: 18px 0 4px; font: 600 20px/1.2 var(--serif); }
.about-page p, .about-page li { font-size: 16px; line-height: 1.45; }
.about-page p { margin: 0; }
.about-page ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.about-page a:not(.today-cta) { color: var(--ink); text-underline-offset: 3px; }
.about-page .about-cta { max-width: 420px; margin-top: 20px; }