@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap");
  :root {
    --ink: #1c1f26;
    --ink-soft: #5b5d63;
    --paper: #faf8f3;
    --card: #ffffff;
    --line: #e1dbcd;
    --brass: #a8721f;
    --brass-ink: #6e4b14;
    --river: #2f6b64;
    --plum: #7a4a6e;
    --grey: #8a8d93;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    font-family: "Source Sans 3", -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    margin: 0;
  }
  body.page-fill-viewport { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body.page-fill-viewport nav { flex: 0 0 auto; }
  h1, h2, .brand, nav a {
    font-family: "Barlow Condensed", -apple-system, "Segoe UI", Arial, sans-serif;
  }
  nav {
    background: var(--ink);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 3px solid var(--brass);
  }
  .brand {
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.02em;
    padding: 16px 20px 16px 0;
    margin-right: 8px;
  }
  nav a.tab {
    color: #b9bcc6;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
  }
  nav a.tab.active { color: #fff; border-bottom-color: var(--brass); }
  nav a.tab:hover { color: #fff; }
  main { max-width: none; margin: 0; padding: 28px 32px 60px; width: 100%; }
  /* calendar + farmers-markets pages: fill the viewport exactly (no page
     scroll) instead of the normal scrolling-page behavior every other page uses */
  main.main-fill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 28px 20px 32px;
  }
  h1 { font-size: 30px; font-weight: 700; margin: 0 0 2px; letter-spacing: 0.01em; }
  .subtitle { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; line-height: 1.5; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 3px; margin-bottom: 14px; overflow: hidden; }
  .card img { width: 100%; max-height: 220px; object-fit: cover; display: block; background: var(--line); }
  .card-body { padding: 16px 18px; }
  .card-title-row { display: flex; align-items: baseline; gap: 8px; }
  .cat-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
  .card-title { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; font-family: "Barlow Condensed", sans-serif; }
  .card-title:hover { color: var(--brass-ink); }
  .btn-icon {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brass); text-decoration: none; font-size: 14px; line-height: 1;
  }
  .btn-icon:hover { background: var(--brass-ink); }
  .card-meta { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
  .tag { display: inline-block; border: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; padding: 2px 8px; border-radius: 10px; margin: 8px 4px 0 0; }
  .blurb { font-size: 14px; color: var(--ink); margin: 10px 0; line-height: 1.5; }
  .btn { display: inline-block; background: var(--brass); color: #fff !important; text-decoration: none; padding: 8px 14px; border-radius: 3px; font-size: 13px; font-weight: 600; margin-top: 6px; border: none; cursor: pointer; }
  .btn:hover { background: var(--brass-ink); }
  .btn.secondary { background: transparent; color: var(--ink-soft) !important; border: 1px solid var(--line); }
  .btn.secondary:hover { background: var(--line); color: var(--ink) !important; }
  .source-link { font-size: 11px; color: var(--grey); margin-left: 8px; }
  form.filters { background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
  form.filters label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
  form.filters input, form.filters select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; background: #fff; color: var(--ink); }
  .checkbox-field { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; }
  .checkbox-field label { margin: 0; font-size: 13px; color: var(--ink); }
  .day-heading { font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); margin: 26px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
  .empty { color: var(--ink-soft); font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 20px; }
  code { background: var(--line); padding: 2px 6px; border-radius: 3px; font-size: 12px; }
  .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .cal-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
  .cal-nav { display: flex; gap: 8px; }
  .cal-layout { flex: 1 1 auto; display: flex; gap: 20px; overflow: hidden; min-height: 0; }
  .cal-main { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
  .cal-headerrow { display: grid; grid-template-columns: repeat(7, 1fr); flex: 0 0 auto; }
  .cal-headerrow div { font-family: "Barlow Condensed", sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px; }
  .cal-wrap { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--card); min-height: 0; }
  .cal-body { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; min-height: 0; }
  .cal-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; cursor: pointer; }
  .cal-cell.other-month { background: #f3efe4; }
  .cal-cell.other-month .cal-daynum { color: var(--grey); }
  .cal-cell.other-month { cursor: default; }
  .cal-cell.is-today .cal-daynum { color: var(--brass-ink); }
  .cal-cell.is-selected { background: #fbf2dd; box-shadow: inset 0 0 0 2px var(--brass); }
  .cal-cell:not(.other-month):hover { background: #f7f2e4; }
  .cal-daynum { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 4px; flex: 0 0 auto; }
  .cal-chip { display: block; color: var(--ink); text-decoration: none; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; flex: 0 0 auto; }
  .cal-chip:hover { text-decoration: underline; }
  .cal-more { display: block; font-size: 11px; color: var(--brass-ink); text-decoration: none; margin-top: 2px; flex: 0 0 auto; }
  .cal-side { flex: 0 0 340px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: var(--card); border: 1px solid var(--line); }
  .cal-side-head { flex: 0 0 auto; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
  .cal-side-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
  .cal-side-count { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
  .cal-side-list { flex: 1 1 auto; overflow-y: auto; padding: 14px; min-height: 0; }
  .side-card { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin-bottom: 12px; }
  .side-card:last-child { margin-bottom: 0; }
  .side-card-title-row { display: flex; align-items: baseline; gap: 6px; }
  .side-card-title-row a { flex: 1 1 auto; min-width: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none; }
  .side-card-title-row a:hover { color: var(--brass-ink); }
  .side-card-title-row .btn-icon { flex: 0 0 auto; }
  .side-card-img { width: 100%; height: 90px; object-fit: cover; border-radius: 3px; margin-bottom: 8px; background: var(--line); }

  /* 3-up grid (browse-all + highlights): info left, picture right */
  .content-narrow { max-width: 1700px; margin: 0 auto; }
  .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
  .card-grid .day-heading { grid-column: 1 / -1; }
  .card-grid .card { margin-bottom: 0; display: flex; flex-direction: row; height: 250px; border-radius: 6px; border-left: 4px solid var(--brass); box-shadow: 0 2px 6px rgba(28,31,38,.10), 0 6px 16px rgba(28,31,38,.06); transition: box-shadow .15s, transform .15s; }
  .card-grid .card:hover { box-shadow: 0 4px 10px rgba(28,31,38,.14), 0 12px 24px rgba(28,31,38,.10); transform: translateY(-2px); }
  .card-grid .day-heading { margin: 18px 0 0; }
  .card-grid .card-body { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 16px; }
  .card-grid .card img { order: 2; flex: 0 0 38%; width: 38%; height: 100%; max-height: none; }
  .card-grid .blurb { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 8px 0 0; padding-right: 6px; scrollbar-width: thin; }
  @media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } }

  /* farmers markets page - same fill-the-viewport, map + side-list pattern as the calendar */
  .fm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; flex: 0 0 auto; }
  .fm-toolbar-label { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
  .day-filter { display: flex; gap: 6px; flex-wrap: wrap; }
  .day-filter button { padding: 5px 13px; border: 1px solid var(--line); background: #fff; border-radius: 20px; font-size: 13px; cursor: pointer; color: var(--ink-soft); font-family: "Source Sans 3", sans-serif; }
  .day-filter button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .fm-layout { flex: 1 1 auto; display: flex; gap: 20px; overflow: hidden; min-height: 0; }
  #farmers-map { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 3px; }
  .fm-side { flex: 0 0 320px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: var(--card); border: 1px solid var(--line); }
  .fm-side-count { flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
  .fm-side-list { flex: 1 1 auto; overflow-y: auto; }
  .fm-item { padding: 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
  .fm-item:hover { background: #f7f2e4; }
  .fm-item.fm-dimmed { display: none; }
  .fm-item .name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; }
  .fm-item .when { font-size: 12.5px; color: var(--brass-ink); font-weight: 600; margin-top: 2px; }
  .fm-item .meta { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

  /* farmers-market toggle + generated-at stamp */
  .hide-over-toggle { margin-left: 16px; font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
  .stamp { color: var(--ink-soft); font-size: 12px; margin: -12px 0 16px; }
  .noscript { color: var(--ink-soft); }

  /* long URLs in descriptions shouldn't cause horizontal scrollbars */
  .blurb { overflow-wrap: anywhere; }
  .cal-side-list { overflow-x: hidden; }

  /* active tag filters, shown as removable pills under the filter form */
  .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
  .pills[hidden] { display: none; }
  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; }
  .pill.in { background: var(--river); }
  .pill.out { background: #a23b2f; }
  .pill button { border: 0; background: rgba(255,255,255,.25); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
  .pill button:hover { background: rgba(255,255,255,.45); }

  /* ===== Tablet / phone ===== */
  @media (max-width: 900px) {
    /* farmers markets: the fixed-to-the-viewport map+list layout becomes a normal scrolling
       page - map on top, market list underneath */
    html, body { height: auto; }
    body.page-fill-viewport { height: auto; min-height: 100vh; overflow: visible; display: block; }
    main.main-fill { display: block; overflow: visible; padding: 16px 16px 40px; }
    .fm-layout { display: block; overflow: visible; }
    #farmers-map { height: 62vh; min-height: 340px; margin-bottom: 14px; }
    .fm-side { display: block; overflow: visible; }
    .fm-side-list { overflow: visible; }
  }

  @media (max-width: 700px) {
    nav { padding: 0 12px; }
    .brand { font-size: 19px; padding: 14px 12px 14px 0; margin-right: 0; }
    nav a.tab { font-size: 15px; padding: 14px 10px; }
    main { padding: 18px 16px 48px; }
    h1 { font-size: 26px; }
    .subtitle { font-size: 13.5px; }

    /* filters: two columns, search and Clear full width; 16px inputs stop iOS zooming on focus */
    form.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; align-items: end; }
    form.filters > div:first-child, #f-clear-wrap { grid-column: 1 / -1; }
    form.filters input, form.filters select { width: 100%; font-size: 16px; padding: 9px 10px; min-width: 0; }
    #f-clear-wrap .btn { width: 100%; padding: 10px; }
    .pill { font-size: 14px; padding: 5px 7px 5px 12px; }
    .pill button { width: 26px; height: 26px; font-size: 17px; }
    .legend { gap: 6px 14px; font-size: 12.5px; }

    /* event cards: one column, image on top instead of beside the text */
    .card-grid { grid-template-columns: 1fr; gap: 18px; }
    .card-grid .card { flex-direction: column; height: auto; }
    .card-grid .card img { order: -1; flex: none; width: 100%; height: 170px; }
    .card-grid .card-body { overflow: visible; padding: 12px 14px 14px; }
    .card-grid .blurb { flex: none; max-height: 132px; }
    .card-grid .card:hover { transform: none; }
    .day-heading { font-size: 17px; }

    /* farmers markets */
    .fm-toolbar { gap: 8px; }
    .day-filter button { padding: 8px 14px; font-size: 14px; }
    .hide-over-toggle { margin-left: 0; font-size: 14px; padding: 4px 0; }
    .fm-item { padding: 12px 14px; }
    .leaflet-control-attribution { font-size: 9px; }
  }

  /* tablets: two columns, but stack each card (image on top) - side-by-side is too tight at this width */
  @media (max-width: 900px) {
    .card-grid { gap: 18px; }
    .card-grid .card { flex-direction: column; height: auto; }
    .card-grid .card img { order: -1; flex: none; width: 100%; height: 160px; }
    .card-grid .card-body { overflow: visible; padding: 12px 14px 14px; }
    .card-grid .blurb { flex: none; max-height: 132px; }
    .card-grid .card:hover { transform: none; }
  }

  /* very narrow phones: two filter columns are too tight for date fields, so stack them */
  @media (max-width: 380px) {
    form.filters { grid-template-columns: minmax(0, 1fr); }
    nav a.tab { padding: 14px 8px; font-size: 14px; }
    .brand { font-size: 17px; }
  }

  /* ===== Phone typography and touch sizing (Google: text >= 12px, body ~16px, tap targets ~48px) ===== */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  @media (max-width: 700px) {
    body { font-size: 16px; }
    .subtitle { font-size: 15px; }
    .stamp { font-size: 13px; }
    form.filters label { font-size: 13px; }
    .legend { font-size: 13px; }
    .card-title { font-size: 20px; }
    .card-meta { font-size: 14px; }
    .tag { font-size: 12px; padding: 3px 10px; }
    .source-link { font-size: 12px; }
    .blurb { font-size: 16px; line-height: 1.5; }
    .btn { font-size: 15px; }
    .pill { font-size: 15px; }
    .day-heading { font-size: 19px; }
    .day-filter button { font-size: 15px; min-height: 44px; }
    .hide-over-toggle { font-size: 15px; }
    .hide-over-toggle input { width: 22px; height: 22px; }
    .fm-side-count { font-size: 13px; }
    .fm-item .name { font-size: 17px; }
    .fm-item .when { font-size: 14px; }
    .fm-item .meta { font-size: 13px; }
    .leaflet-control-attribution { font-size: 12px; }
    .leaflet-popup-content { font-size: 15px; line-height: 1.4; }

    /* bigger tap targets: the calendar button and the pill remove buttons */
    .btn-icon { width: 40px; height: 40px; font-size: 19px; }
    .pill button { width: 32px; height: 32px; font-size: 19px; }
    form.filters input, form.filters select { min-height: 44px; }

    /* date fields: iOS gives them a fixed intrinsic width that pokes out of their column */
    form.filters > div { min-width: 0; }
    form.filters input[type="date"] {
      -webkit-appearance: none; appearance: none;
      display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
      background-color: #fff; text-align: left;
    }
    form.filters input[type="date"]::-webkit-date-and-time-value { text-align: left; min-width: 0; }
  }