/* ============================================
   OLIO & STRADA
   Stylesheet — vintage editorial, responsive
   Breakpoints: 1024px (tablet), 640px (mobile)
============================================ */

:root {
  /* Palette adopted from capsulehotel.ch — warm cream paper, cool blue-black
     ink, deep aubergine in place of oxblood, vivid orange pop for primary
     CTAs (was --rust). Variable NAMES stay (--oxblood etc.) so the rest of
     the stylesheet doesn't need a sweeping rename; the values change. */
  --paper: #f3eade;
  --paper-deep: #e8dec8;
  --ink: #141628;
  --ink-soft: #4a4858;
  --oxblood: #54003e;
  --oxblood-deep: #3a0029;
  --rust: #ea5b0c;
  --cream: #faf5e6;
  --line: rgba(20, 22, 40, 0.18);
  --line-strong: rgba(20, 22, 40, 0.45);

  /* Type scale */
  --logo-size: clamp(44px, 7vw, 86px);
  --section-title: clamp(24px, 4vw, 32px);
  --month-divider: clamp(26px, 4.5vw, 36px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Bodoni Moda', Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184, 83, 30, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(122, 31, 31, 0.05) 0%, transparent 40%);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: hidden;
}

body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  opacity: 0.35; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* ============================================
   SPONSOR STRIP
============================================ */
.sponsor-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  z-index: 3;
}
.sponsor-strip.empty { display: none; }
.sponsor-strip a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 2px;
}
.sponsor-strip a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.sponsor-strip .label { color: var(--rust); margin-right: 8px; }

/* ============================================
   MASTHEAD
============================================ */
header { padding: 28px 0 24px; }

.top-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}
.top-strip .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--oxblood); border-radius: 50%;
  margin: 0 6px; vertical-align: middle;
}

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0 16px;
}
.masthead-left, .masthead-right {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  line-height: 1.8;
}
.masthead-right { text-align: right; }
.masthead-center { text-align: center; }

/* Masthead nav links — small caps mono links nested in the right column.
   Underline-on-hover keeps the text-stack quiet. */
.masthead-right a,
.top-strip a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.masthead-right a:hover,
.top-strip a:hover { border-bottom-color: var(--oxblood); }

/* Clickable wordmark on the About page — keeps the visual weight of the
   logo without picking up the default link underline. */
.logo a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.logo {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: var(--logo-size);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo .amp {
  color: var(--oxblood);
  font-weight: 400;
  padding: 0 6px;
  font-size: 0.85em;
}

.tagline {
  font-family: 'Special Elite', 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
  letter-spacing: 0.05em;
}

/* Status bar — full-browser-width rules with content aligned to the
   container's inner padding. Three-column grid keeps the center cell
   reliably centered even when the right slot is empty before JS runs. */
.status-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px max(16px, calc(50vw - 50%));
  margin: 16px calc(-50vw + 50%) 0;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  gap: 12px;
}
.status-bar .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}
.status-bar .status-center {
  justify-self: center;
  text-align: center;
}
.status-bar .status-right { justify-self: end; }
.pulse {
  width: 8px; height: 8px;
  background: var(--oxblood);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Loading-state pulse — slow opacity cycle so placeholder text doesn't
   glitch or blink. Removed via JS the moment real content lands. */
.is-loading {
  animation: olio-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes olio-loading-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}
@media (prefers-reduced-motion: reduce) {
  .is-loading { animation: none; opacity: 0.7; }
}

/* ============================================
   FEATURED EVENT
============================================ */
.featured-section { margin: 0 0 40px; }
.featured-section.empty { display: none; }

.featured-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--oxblood);
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--oxblood);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.featured-label .sponsored {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 9px;
}

.featured-event {
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 32px;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  box-shadow: 6px 6px 0 var(--oxblood);
}
.featured-event .featured-date {
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 24px;
}
.featured-event .featured-month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--oxblood);
  font-weight: 700;
}
.featured-event .featured-day {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  margin: 4px 0;
}
.featured-event .featured-weekday {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}
.featured-event .featured-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 10px;
}
.featured-event .featured-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.featured-event .featured-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 580px;
}
.featured-event .featured-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}

/* ============================================
   FILTERS
============================================ */
/* Filter bar — full-browser-width top + bottom rules with a centered
   inner column that caps both the pill row and the search input at the
   same width. They read as equal-width siblings stacked vertically. */
.filters {
  padding: 18px max(16px, calc(50vw - 50%));
  margin: 0 calc(-50vw + 50%) 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
/* Label, category-pill group, and search row inherit the same 880px
   column so they stack as equal-width siblings centered in the bar. */
.filter-group,
.filter-search-row,
.filters-label {
  width: 100%;
  max-width: 880px;
}
.filters-label { text-align: left; }
.filter-group { justify-content: flex-start; }

/* Saved pill + search input share one row. Saved is the primary
   filter so it always sits adjacent to the search, not wrapped into
   the category list above. */
.filter-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.filter-search-row .search-input {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  flex-basis: 0;
}
.filter-search-row .filter-btn-saved {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Tuck the filter away once the user scrolls past the events section.
   JS toggles this class on/off based on IntersectionObserver watching
   .events-section. While hidden the bar is also pointer-events:none so
   it doesn't intercept clicks meant for content underneath. */
.filters.is-tucked {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .filters { transition: opacity 0.15s linear; }
  .filters.is-tucked { transform: none; }
}
.filters-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}
.filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 22px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.filter-btn:hover { background: var(--ink); color: var(--paper); }
.filter-btn.active { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.filter-btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* Saved filter pill — separated from the category list with a small
   left margin and a leading bookmark glyph. Count pill appears once
   the user has saved at least one event. */
.filter-btn-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.filter-btn-saved svg { display: block; opacity: 0.85; }
.filter-btn-saved .saved-count {
  display: inline-block;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  font-size: 9.5px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 9px;
  margin-left: 2px;
}
.filter-btn-saved.active .saved-count {
  background: var(--cream);
  color: var(--oxblood);
}

.search-input {
  /* Always stack below the filter pills — flex-basis: 100% forces a new
     line. Cap max-width so it never extends wider than the natural pill
     row above it. */
  width: 100%;
  flex-basis: 100%;
  max-width: 760px;
  margin-left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 10px 12px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.search-input:focus { outline: none; border-color: var(--oxblood); }

/* ============================================
   EVENTS LIST
============================================ */
.events-section { padding-bottom: 60px; }

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: var(--section-title);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
}
.event-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}

/* Each month is a <details> element. The first month is open by default;
   months 2+ render their <summary> as a big "Load [Month]" button. The
   <summary> has TWO visual states with separate inner spans:
   - .month-divider-open  → shown when [open]: classic month-header layout
   - .month-divider-closed → shown when collapsed: button-style call-to-action
*/
.month-group {
  margin: 24px 0 0;
}
.month-group[open] + .month-group { margin-top: 32px; }

.month-divider {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
}
.month-divider::-webkit-details-marker { display: none; }
.month-group:first-of-type .month-divider { padding-top: 0; }

/* Toggle the two inner-span states based on [open] */
.month-divider-open,
.month-divider-closed { display: none; }
.month-group[open] > .month-divider .month-divider-open { display: flex; }
.month-group:not([open]) > .month-divider .month-divider-closed { display: flex; }

/* OPEN state — classic divider styling */
.month-divider-open {
  padding: 32px 0 14px;
  border-bottom: 2px solid var(--ink);
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

/* CLOSED state — Load-month button + 7-day preview grid */
.month-divider-closed {
  padding: 22px 24px 20px;
  margin: 16px 0 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.month-divider:hover .month-divider-closed {
  background: var(--cream);
  border-color: var(--ink);
}
.load-month-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.load-month-label {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  font-style: italic;
  color: var(--oxblood);
  letter-spacing: -0.01em;
}
.load-month-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* 7-day preview grid — density teaser inside collapsed month buttons.
   has-events: oxblood border + count tag · no-events: diagonal X overlay */
.month-preview-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.month-preview-day {
  position: relative;
  border: 1px solid var(--line);
  padding: 10px 4px 10px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
  overflow: hidden;
}
.month-preview-day.has-events { border-color: var(--oxblood); }
.month-divider:hover .month-preview-day.has-events { background: var(--cream); }

/* Diagonal cross for empty days — two SVG lines stretched corner-to-corner
   under the date, dimmed so the date itself stays legible. */
.mpd-cross {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.45;
}
.month-preview-day.no-events { color: var(--ink-soft); }
.month-preview-day.no-events .mpd-num { color: var(--ink-soft); }

.mpd-weekday {
  display: block;
  position: relative;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.mpd-num {
  display: block;
  position: relative;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}
.month-preview-day.has-events .mpd-num { color: var(--oxblood); }

/* Count tag — clearly a label, not a number, so it can't be confused with
   the date. Mono uppercase tracked-out, tiny. */
.mpd-count {
  display: block;
  position: relative;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}

@media (max-width: 640px) {
  .month-preview-grid { gap: 4px; }
  .month-preview-day { padding: 8px 2px 8px; }
  .mpd-num { font-size: 17px; }
  .mpd-weekday { font-size: 8px; letter-spacing: 0.1em; }
  .mpd-count { font-size: 7.5px; }
}
.month-divider h2 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: var(--month-divider);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin: 0;
}
.month-divider .year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.2em;
}
.month-divider .month-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
/* Chevron removed — the open-state divider stands on its own as the month
   header; closed-state has the "→" character in .load-month-count. */
.month-days {
  padding-top: 8px;
}
/* Fade-in for month bodies when <details open> first paints or is
   re-opened. The 'open' attribute toggle drives the animation. */
.month-group[open] > .month-days {
  animation: olio-month-fade 320ms ease-out;
}
@keyframes olio-month-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .month-group[open] > .month-days { animation: none; }
}

/* ============================================
   DAY BLOCKS — shared date column, multiple events stacked
============================================ */
.day-block {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background 0.2s ease;
  /* Skip rendering offscreen day blocks — huge perf win when 100+ events
     are in the DOM. The browser only paints them as they scroll into view.
     contain-intrinsic-size reserves placeholder height so the scrollbar
     and anchor offsets don't jump as content paints in. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 220px;
}
.day-block:hover { background: rgba(122, 31, 31, 0.025); }

/* Fade-in for the whole events container the first time JS populates it.
   Smooths the otherwise abrupt "Loading events…" → full calendar swap. */
#events-container {
  animation: olio-fade-in 360ms ease-out;
}
@keyframes olio-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #events-container { animation: none; }
}

.day-date {
  text-align: center;
  padding-top: 4px;
  border-right: 1px solid var(--line);
  padding-right: 28px;
  position: sticky;
  top: 72px;
}

.day-events {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.event-row {
  display: block;
  position: relative;
  /* Reserve right rail for the absolutely-positioned action buttons so the
     body text never collides with them. The actions are out of flow so they
     don't influence the row height — the row is sized purely by the body. */
  padding-right: 174px; /* 150px button rail + 24px gutter */
}

/* When multiple events on same day, separate them with a thin rule.
   The action buttons are absolutely positioned at top:0 of .event-row,
   so for second+ rows we offset them down to clear the dashed rule
   and match the first row's spacing above the buttons. */
.day-block.multi .event-row + .event-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.day-block.multi .event-row + .event-row .event-actions {
  top: 22px;
}

.event-month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--oxblood);
  font-weight: 700;
}
.event-day {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin: 4px 0;
}
.event-weekday {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}

.event-body { min-width: 0; }

.event-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 10px;
}
.event-tag.cars-coffee { background: var(--oxblood); }
.event-tag.show { background: var(--rust); }
.event-tag.track { background: var(--ink); }
.event-tag.meet { background: var(--ink-soft); }
.event-tag.rally { background: var(--oxblood-deep); }
.event-tag.lifestyle { background: #2d4a4a; }

.event-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 8px;
}
/* Linked event titles keep the ink color but get a faint oxblood-tinted
   underline so they're clearly clickable without shouting. Uses native
   text-decoration with text-underline-offset so the line sits 2px under
   the baseline (much tighter than a border-bottom on the element box). */
.event-title a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(122, 31, 31, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.event-title a:hover {
  color: var(--oxblood);
  text-decoration-color: var(--oxblood);
}

.event-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}

.event-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.event-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 580px;
}

.event-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 10px;
  opacity: 0.7;
}
.event-source a {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: rgba(74, 63, 56, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, text-decoration-style 0.15s ease;
}
.event-source a:hover {
  color: var(--oxblood);
  text-decoration: underline solid;
  text-decoration-color: var(--oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Desktop: absolutely positioned in the top-right corner of the event-row.
   Out of flow means the buttons never affect the row height — the row is
   sized purely by the body content. Mobile (≤640px) drops back to static
   flow as a bottom row. */
.event-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-btn-share {
  font-family: inherit;
  cursor: pointer;
}

/* Save / bookmark button — same chrome as the calendar buttons, with a
   small bookmark glyph. Active (saved) state fills the glyph with oxblood
   and shifts the chrome to match. */
.cal-btn-save {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cal-btn-save svg { display: block; flex-shrink: 0; }
.cal-btn-save.is-saved {
  color: var(--cream);
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.cal-btn-save.is-saved:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.cal-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  min-height: 28px;
  border: 1px solid var(--ink-soft);
  background: transparent;
  color: var(--ink-soft);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.cal-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cal-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.empty {
  padding: 80px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
}
.empty-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  margin-bottom: 12px;
}
.empty-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Footer featured slot — slightly smaller / less aggressive */
.featured-footer {
  margin: 0 0 40px;
}

.featured-footer .featured-event {
  box-shadow: 4px 4px 0 var(--ink-soft);
}

/* ============================================
   AUCTIONS FEED (On The Block)
============================================ */
.auctions-section {
  margin: 40px 0 60px;
}

/* Inter-month auction strip — sits between each <details class="month-group">
   in the calendar. Same internal layout as .auctions-section but with extra
   vertical breathing room and a subtle top/bottom rule to feel like an
   editorial sidebar break. Fades in on first paint. */
.auction-strip {
  margin: 56px 0 40px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  animation: olio-fade-in 360ms ease-out;
}
.auction-strip > .auctions-grid {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .auction-strip { margin: 36px 0 28px; padding: 24px 0; }
}

.auctions-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--oxblood);
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--oxblood);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.auctions-label .auctions-sub {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.15em;
}
.auctions-label .auctions-sub a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.auctions-label .auctions-sub a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.auctions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.auctions-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px dashed var(--line-strong);
}

.auction-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auction-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--oxblood);
}

.auction-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-deep);
}

.auction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auction-image-fallback {
  background: linear-gradient(135deg, var(--paper-deep), var(--ink-soft));
}

.auction-source {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--paper);
}

.auction-meta {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auction-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auction-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--oxblood);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: auto;
}

.auctions-disclaimer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 20px;
  opacity: 0.7;
}

/* ============================================
   NEWSLETTER
============================================ */
.newsletter-section {
  margin: 40px 0;
  padding: 48px 40px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.newsletter-text h3 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 8px;
}
.newsletter-text p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper-deep);
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--paper);
}
.newsletter-form input {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 14px 16px;
  min-height: 48px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.newsletter-form input::placeholder { color: var(--ink-soft); }
.newsletter-form input:focus { outline: none; background: var(--oxblood-deep); }

.newsletter-form button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0 24px;
  min-height: 48px;
  background: var(--oxblood);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 0;
  white-space: nowrap;
}
.newsletter-form button:hover { background: var(--rust); }

.newsletter-success {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream);
  padding: 12px;
  background: var(--oxblood);
}

/* ============================================
   SUBMIT
============================================ */
.submit-section {
  margin: 40px 0 60px;
  padding: 56px 40px;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  text-align: center;
  position: relative;
}
.submit-section::before, .submit-section::after {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.submit-section::before { left: 8px; }
.submit-section::after { right: 8px; }

.submit-section h3 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 38px;
  font-weight: 900;
  font-style: italic;
  margin-bottom: 12px;
}
.submit-section p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.submit-btn {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 16px 32px;
  min-height: 48px;
  background: var(--oxblood);
  color: var(--cream);
  text-decoration: none;
  transition: background 0.15s ease;
}
.submit-btn:hover { background: var(--oxblood-deep); }

/* ============================================
   FOOTER
============================================ */
footer {
  border-top: 3px double var(--ink);
  padding: 48px 0 40px;
  margin-top: 40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ============================================
   ABOUT PAGE — /about.html
============================================ */
/* PORTRAIT FRAME — clean. Paper background, thin ink border, image,
   centered caption block. No corner brackets, no inner mat, no
   decorative keylines. Max-width 728px (30% larger than the prior 560). */
.about-portrait {
  margin: 40px 0 32px;
  display: flex;
  justify-content: center;
}
.portrait-frame {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 22px 18px;
  box-shadow: 8px 8px 0 var(--oxblood);
  max-width: 728px;
  width: 100%;
}
.portrait-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-deep);
}
.portrait-caption {
  margin-top: 16px;
  text-align: center;
}
.portrait-name-line {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.portrait-meta-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.portrait-credit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.portrait-credit a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.portrait-credit a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .portrait-frame {
    padding: 14px 14px 12px;
    box-shadow: 5px 5px 0 var(--oxblood);
  }
  .portrait-name-line { font-size: 17px; }
}

/* Spacing for the Missione section when it appears as a second
   .about-bio block on the about page. */
.about-mission-section { margin-top: 16px; }

/* ELSEWHERE — clean horizontal row of icons. No labels, no rules,
   centered under the bio columns. */
.about-links {
  margin: 0 auto 56px;
  max-width: 720px;
}
.elsewhere-socials {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  padding: 24px 0 0;
}
.elsewhere-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.elsewhere-socials a:hover {
  color: var(--oxblood);
  transform: translateY(-2px);
}
.elsewhere-socials a svg { display: block; }
@media (max-width: 640px) {
  .elsewhere-socials { gap: 16px; }
}

.about-section-title {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  font-style: italic;
  color: var(--oxblood);
  margin: 56px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.about-bio {
  max-width: 720px;
  margin: 0 auto 16px;
}
.about-bio p {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 28px;
  color: var(--ink);
}
.about-bio p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .about-section-title { margin: 36px 0 16px; }
  .about-bio p { font-size: 17px; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 40px;
}

.footer-col-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-grid h4 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.footer-grid a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  min-height: 24px;
  transition: all 0.15s ease;
}

.footer-grid a:hover {
  border-bottom-color: var(--oxblood);
  color: var(--ink);
}

/* Submit-an-event is the primary action in the Contribute column.
   Matches the oxblood treatment of the submit-btn CTA elsewhere. */
.footer-grid a.footer-submit {
  color: var(--oxblood);
  font-weight: 700;
}
.footer-grid a.footer-submit:hover {
  color: var(--oxblood-deep);
  border-bottom-color: var(--oxblood-deep);
}

/* Featured Sources list — flow into 2 columns on desktop, single on mobile.
   Room to grow without restructuring HTML. */
.footer-sources {
  column-count: 2;
  column-gap: 32px;
  -webkit-column-count: 2;
  -webkit-column-gap: 32px;
}
.footer-sources a {
  break-inside: avoid;
}

/* Social icons */
.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

.footer-socials a {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  min-height: 38px;
  transition: all 0.18s ease;
}

.footer-socials a:hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: transparent;
  transform: translateY(-1px);
}

.footer-socials svg {
  display: block;
  width: 18px;
  height: 18px;
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  flex-wrap: wrap;
  gap: 12px;
}
/* When .footer-bottom is the only child of footer (about page), drop the
   redundant 1px rule — footer's own 3px double border-top already separates
   it from the page. Otherwise (index page) the footer-grid sits above and
   the 1px rule does the work of separating the colophon from the columns. */
footer > .footer-bottom:only-child {
  border-top: none;
  padding-top: 0;
}
.footer-dot { color: var(--oxblood); }

/* ============================================
   SUBMISSION FORM PAGE
============================================ */
/* Lightweight masthead above the submission form — wordmark + tagline only,
   no top-strip or status-bar. Keeps the form focused while still anchoring
   the page to the brand. */
.form-masthead {
  text-align: center;
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.form-masthead .logo { line-height: 0.92; }
.form-masthead .tagline { margin-top: 12px; }
@media (max-width: 640px) {
  .form-masthead { padding: 24px 0 20px; }
}

.form-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0;
}
.form-page .back-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  display: inline-block;
  margin-bottom: 32px;
  min-height: 24px;
}
.form-page .back-link:hover { color: var(--oxblood); border-color: var(--oxblood); }

.form-page h1 {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.form-page .lead {
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 32px;
  line-height: 1.5;
}

.form-field {
  margin-bottom: 24px;
}
.form-field label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 700;
}
.form-field label .required { color: var(--oxblood); margin-left: 4px; }
.form-field label .hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-left: 8px;
  font-size: 10px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; /* 16px prevents iOS zoom */
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  font-feature-settings: 'tnum';
}
.form-field textarea {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  background: var(--paper);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Honeypot — hide from humans */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-submit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 18px 32px;
  min-height: 52px;
  background: var(--oxblood);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
  margin-top: 16px;
}
.form-submit:hover { background: var(--oxblood-deep); }
.form-submit:disabled { background: var(--ink-soft); cursor: not-allowed; }

.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form-status.success { background: #2d4a2b; color: var(--cream); }
.form-status.error { background: var(--oxblood); color: var(--cream); }
.form-status[hidden] { display: none; }

.form-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 24px;
  padding: 16px;
  border-left: 2px solid var(--oxblood);
  background: var(--paper-deep);
}

/* ============================================
   TABLET BREAKPOINT — 1024px
============================================ */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  .featured-event {
    grid-template-columns: 110px 1fr;
    gap: 24px;
    padding: 24px;
  }
  .featured-event .featured-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
  }
  .featured-event .featured-actions .cal-btn { flex: 1; }
  .featured-event .featured-day { font-size: 56px; }

  .event {
    grid-template-columns: 90px 1fr;
    gap: 20px;
  }
  .event-date { padding-right: 20px; }
  .event-day { font-size: 42px; }
  /* Legacy .event-actions (used by the old single-card render path and
     .featured-event). DO NOT broaden this to bare `.event-actions` —
     that would also flatten the new right-rail layout on .event-row. */
  .event .event-actions,
  .featured-event .featured-actions {
    flex-direction: row;
    min-width: 0;
    margin-top: 8px;
  }
  .event .event-actions .cal-btn,
  .featured-event .featured-actions .cal-btn { flex: 1; }

  .day-block {
    grid-template-columns: 90px 1fr;
    gap: 20px;
  }
  .day-date { padding-right: 20px; }
  .event-day { font-size: 42px; }
  /* Right-rail event-actions persist all the way down to the mobile (640px)
     breakpoint — only the date column tightens at tablet. The flex-row
     override that used to live here has moved to @media (max-width: 640px). */

  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .newsletter-text h3 { font-size: 30px; }

  .auctions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ============================================
   FILTER WRAP BREAKPOINT — 1160px
   The filter label + pills + search bar all fit on a single row above
   1160px; below that the search bar drops to its own full-width row
   beneath the pills. Sits between the 1024px tablet and the default
   desktop blocks because the filter row hits its natural cramped point
   well before the rest of the page needs tablet treatment.
============================================ */
@media (max-width: 1160px) {
  /* Filter row wraps to multiple lines when pills don't fit on one.
     No horizontal scrolling — pills wrap, never overflow off-screen.
     Day-date sticky offset bumps so it clears the taller filter bar. */
  .filters {
    padding: 14px max(16px, calc(50vw - 50%));
    gap: 12px;
    row-gap: 12px;
  }
  .day-date { top: 124px; }
  .filters-label { width: auto; }
  .filter-group {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }
  .search-input {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================
   MOBILE BREAKPOINT — 640px
============================================ */
@media (max-width: 640px) {
  .container { padding: 0 16px; }

  .sponsor-strip {
    font-size: 9px;
    letter-spacing: 0.15em;
    padding: 8px 0;
  }

  /* TIDIER MOBILE HEADER — collapse the masthead to just the wordmark
     and a short tagline. Drop the "Established 2026" left-block and the
     "Updated Every 48 Hours" right-block (both redundant with the
     status-bar). Reclaims ~80px of vertical real estate above the fold. */
  header { padding: 12px 0 8px; }

  .top-strip {
    font-size: 9px;
    letter-spacing: 0.1em;
    padding-bottom: 6px;
    gap: 8px;
  }
  .top-strip .ts-left { display: none; }
  .top-strip .ts-center { flex: 1; text-align: left; }
  .top-strip .ts-right { text-align: right; }

  .masthead {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 4px;
    padding: 10px 0 6px;
  }
  .masthead-left,
  .masthead-right { display: none; }

  .logo { line-height: 1; font-size: clamp(40px, 13vw, 64px); }
  .tagline { font-size: 11.5px; margin-top: 6px; line-height: 1.45; }

  .status-bar {
    /* Mobile: collapse the 3-column grid so the center cell occupies
       the full row and reads centered. Keep the full-bleed padding so
       the top border still runs edge-to-edge. */
    grid-template-columns: 1fr;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 10px max(16px, calc(50vw - 50%));
    text-align: center;
    border-bottom: none;
  }
  .status-bar .live { justify-self: center; }
  .status-bar .status-center { justify-self: center; }
  .status-bar .status-right { display: none; }

  .featured-section { margin-bottom: 32px; }
  .featured-label { font-size: 9px; letter-spacing: 0.2em; }
  .featured-label .sponsored { font-size: 8px; }

  .featured-event {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    box-shadow: 4px 4px 0 var(--oxblood);
  }
  .featured-event .featured-date {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
  }
  .featured-event .featured-day { font-size: 44px; margin: 0; }
  .featured-event .featured-title { font-size: 22px; }
  .featured-event .featured-actions { flex-direction: column; }

  .filters {
    /* Mobile: keep the full-bleed top/bottom rules (no margin breakout
       change needed — base rule already does it) but tighten padding. */
    padding: 14px max(16px, calc(50vw - 50%));
    gap: 12px;
    margin-bottom: 24px;
    /* unstick on mobile - takes too much vertical space */
    position: static;
  }
  .filters-label {
    width: 100%;
    margin-bottom: 4px;
  }
  /* Mobile: pills wrap to multiple rows rather than scrolling. Slightly
     tighter padding so more fit per row. */
  .filter-group {
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
  }
  .filter-btn {
    padding: 8px 12px;
    min-height: 38px;
    font-size: 10.5px;
  }
  .search-input {
    margin-left: 0;
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom */
  }

  .events-header { margin-bottom: 18px; }
  .section-title { font-size: 24px; }

  .month-divider { padding: 24px 0 10px; }
  .month-divider h2 { font-size: 24px; gap: 10px; }
  .month-divider .year { font-size: 11px; }

  /* Tighten vertical rhythm between collapsed month modules on mobile —
     previously 8 + 24 + 16 = ~48px between sibling closed Load-Month cards.
     Cut to ~16px total. */
  .month-group { margin: 12px 0 0; }
  .month-group[open] + .month-group { margin-top: 18px; }
  .month-divider-closed { padding: 16px 14px 14px; margin: 4px 0 4px; gap: 12px; }
  .month-divider-open { padding: 20px 0 10px; }

  .event {
    grid-template-columns: 64px 1fr;
    gap: 16px;
    padding: 20px 0;
  }
  .event-date {
    padding-right: 14px;
    padding-top: 2px;
  }
  .event-month { font-size: 10px; letter-spacing: 0.15em; }
  .event-day { font-size: 34px; }
  .event-weekday { font-size: 10.5px; }

  /* Mobile: tight 5px gap between day-blocks (2.5px top + 2.5px bottom)
     instead of the previous 40px. Day-block border-bottom does the
     visual separation between cards. */
  .day-block {
    grid-template-columns: 56px 1fr;
    gap: 12px;
    padding: 6px 0;
  }
  .day-date {
    padding-right: 10px;
    padding-top: 2px;
    position: static;
  }
  .day-block.multi .event-row + .event-row {
    margin-top: 10px;
    padding-top: 10px;
  }
  /* Mobile: drop the desktop right-rail padding and put actions back in
     the normal flow as a full-width row at the bottom of each event. */
  .event-row {
    padding-right: 0;
  }
  .event-row .event-actions {
    position: static;
    flex-direction: row;
    width: auto;
    max-width: none;
    margin-top: 12px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .event-row .event-actions .cal-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    min-height: 40px;
    font-size: 10px;
  }

  .event-tag { font-size: 10px; padding: 3px 8px; margin-bottom: 8px; }
  .event-title { font-size: 20px; margin-bottom: 6px; }
  .event-meta { font-size: 11.5px; gap: 12px; margin-bottom: 8px; }
  .event-time { font-size: 13px; }
  .event-location { font-size: 11.5px; }
  .event-desc { font-size: 15px; line-height: 1.5; }
  .event-source { font-size: 11px; }

  .newsletter-section {
    padding: 28px 18px;
    margin: 28px -16px;
  }
  .newsletter-text h3 { font-size: 26px; }
  .newsletter-text p { font-size: 13px; line-height: 1.55; }
  .newsletter-form {
    flex-direction: column;
    border: none;
  }
  .newsletter-form input {
    font-size: 16px; /* prevent iOS zoom */
    border: 1px solid var(--paper);
    border-bottom: none;
  }
  .newsletter-form button { padding: 14px; }

  .auctions-section { margin: 28px 0 36px; }
  .auctions-label { font-size: 10.5px; letter-spacing: 0.2em; }
  .auctions-label .auctions-sub { font-size: 10px; }
  /* 2-up auction grid on mobile so more listings fit above the fold. */
  .auctions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .auction-title { font-size: 13px; line-height: 1.25; }
  .auction-price { font-size: 11px; }
  .auction-source { font-size: 9px; padding: 3px 6px; }

  .submit-section {
    padding: 28px 18px;
    margin: 28px 0 36px;
  }
  .submit-section h3 { font-size: 28px; }
  .submit-section p { font-size: 13px; line-height: 1.55; }
  .submit-btn {
    width: 100%;
    padding: 16px;
    font-size: 11px;
  }

  /* MOBILE FOOTER — tighter type, two-column sources, no min-height
     padding on link rows. Footer was the heaviest block on the page; now
     reads as a quick directory rather than a wall of mono text. */
  footer { padding: 24px 0 24px; margin-top: 24px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .footer-col-left { gap: 18px; }
  .footer-grid h4 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .footer-grid a {
    padding: 2px 0;
    min-height: 0;
    font-size: 13px;
    line-height: 1.5;
  }
  .footer-sources {
    column-count: 2;
    -webkit-column-count: 2;
    column-gap: 16px;
  }
  .footer-sources a { font-size: 12px; }
  .footer-socials { gap: 14px; }
  .footer-socials a { width: 28px; height: 28px; }
  .footer-socials svg { width: 20px; height: 20px; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 4px;
    font-size: 9px;
    padding-top: 12px;
  }

  /* FORM PAGE - MOBILE */
  .form-page { padding: 28px 0; }
  .form-page h1 { font-size: 36px; line-height: 1; }
  .form-page .lead { font-size: 16px; margin-bottom: 24px; }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-row .form-field { margin-bottom: 20px; }
}

/* ============================================
   PRINT
============================================ */
@media print {
  body::before, .sponsor-strip, .filters, .submit-section, .newsletter-section,
  .event-actions, footer { display: none !important; }
  .event { page-break-inside: avoid; }
}

/* ============================================
   REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}