/* Events (/events) — the village notice board (rebuild, 2026-09-29).
   The next five events are pinned to a cork board with the month's wall calendar
   hung beneath them; recurring groups are index cards taped up in a row; the rest
   of the season reads as an agenda, one month at a time, with the month's name
   riding alongside its events. Markup comes from js/events.js (unchanged, shared
   with the homepage) — this file only restyles it. Behaviour: js/pages/events.js.
   Everything is scoped to body.p-events. */

.p-events { --cork: #ecd9ae; --frame-a: #c99a45; --frame-b: #a67a2c; }
.p-events main h2, .p-events main h3 { color: var(--navy); }
.p-events .ev-main { padding-top: clamp(18px, 3vw, 36px); }
.p-events .ev-main > .container { max-width: 1200px; }

/* ---------- opening ---------- */
.p-events .ev-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.p-events .ev-hero-actions .btn { min-height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .p-events .ev-hero-actions a:hover .ev-down { transform: translateY(4px); }
}

/* ---------- the cork board: next five + the wall calendar ---------- */
.p-events .month-cal.ev-board {
  position: relative;
  width: auto;
  margin: 0 0 clamp(36px, 5vw, 64px);
  border: 0;
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.6vw, 48px) clamp(14px, 3vw, 40px) clamp(28px, 3.8vw, 50px);
  background-color: var(--cork);
  background-image: radial-gradient(rgba(122, 91, 19, .17) 1.2px, transparent 1.7px), radial-gradient(rgba(255, 255, 255, .4) 1px, transparent 1.5px);
  background-size: 14px 14px, 23px 23px;
  background-position: 0 0, 7px 9px;
  box-shadow: inset 0 0 0 12px var(--frame-a), inset 0 0 0 15px var(--frame-b), inset 0 10px 26px 10px rgba(122, 91, 19, .24), var(--shadow);
}
@media (max-width: 560px) {
  .p-events .month-cal.ev-board { border-radius: 26px; box-shadow: inset 0 0 0 8px var(--frame-a), inset 0 0 0 10px var(--frame-b), inset 0 8px 18px 6px rgba(122, 91, 19, .22), var(--shadow); padding: 24px 16px 22px; }
}

/* the board's headings are paper labels pinned to the cork */
.p-events .ev-board .month-heading,
.p-events .ev-board .month-fold > summary {
  position: relative;
  display: inline-block;
  margin: 0 0 26px 6px;
  padding: 10px 22px 9px;
  border: 0;
  border-radius: 4px;
  background: var(--navy);
  color: var(--paper);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.15;
  box-shadow: 0 12px 18px -12px rgba(40, 25, 5, .7);
  transform: rotate(-1.4deg);
}
.p-events .ev-board .month-heading::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--gold) 34% 100%); box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .4);
}

/* next five: visible at every width here (the shared stylesheet hides it on wide screens) */
.p-events .next-five { display: block; margin: 0 0 clamp(34px, 4vw, 52px); padding: 0; }
.p-events .next-five .event-list {
  display: grid;
  gap: clamp(26px, 2.8vw, 36px) clamp(20px, 2.4vw, 30px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 640px) {
  .p-events .next-five .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-events .next-five .event-row:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .p-events .next-five .event-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* a pinned card */
.p-events .next-five .event-row {
  --tilt: -1.2deg; --pin: var(--brick);
  position: relative;
  flex-direction: row;
  gap: 16px;
  margin: 0;
  padding: 26px 22px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 18px 26px -18px rgba(60, 40, 10, .6);
  transform: rotate(var(--tilt));
}
.p-events .next-five .event-row:nth-child(5n+2) { --tilt: 1.1deg; --pin: var(--blue-ink); }
.p-events .next-five .event-row:nth-child(5n+3) { --tilt: -.7deg; --pin: var(--gold-deep); }
.p-events .next-five .event-row:nth-child(5n+4) { --tilt: .8deg; --pin: var(--sage); }
.p-events .next-five .event-row:nth-child(5n+5) { --tilt: -1.6deg; --pin: var(--brick); }
.p-events .next-five .event-row::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--pin) 32% 100%);
  box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35);
}
/* date and title side by side, the rest of the note across the whole card */
.p-events .next-five .event-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; }
.p-events .next-five .event-body { display: contents; }
.p-events .next-five .event-date { grid-column: 1; grid-row: 1; }
.p-events .next-five .event-body h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.p-events .next-five .event-body > :not(h3) { grid-column: 1 / -1; }
.p-events .next-five .event-meta { margin-top: 16px; }
/* on the board a note is kept short; every event is written out in full in the list below */
.p-events .next-five .event-body > p:not(.event-meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.p-events .next-five .event-row:first-child .event-body > p:not(.event-meta) { -webkit-line-clamp: 6; font-size: 17px; }
.p-events .next-five .event-row:first-child { padding: 34px clamp(22px, 2.6vw, 34px) 30px; }
.p-events .next-five .event-row:first-child { align-content: start; }
@media (min-width: 1000px) {
  /* the next event is a wide notice across the top of the board... */
  .p-events .next-five .event-row:first-child { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 34px); }
  .p-events .next-five .event-row:first-child .event-date { grid-row: 1 / span 3; }
  .p-events .next-five .event-row:first-child .event-body h3 { grid-column: 2; grid-row: 1; align-self: start; padding-right: 0; }
  .p-events .next-five .event-row:first-child .event-meta { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .p-events .next-five .event-row:first-child .event-meta span:first-child { font-size: 20px; }
  .p-events .next-five .event-row:first-child { --tilt: -.5deg; }
  .p-events .next-five .event-row:first-child .event-body > p:not(.event-meta) { grid-column: 3; grid-row: 1; align-self: end; margin: 0; }
  .p-events .next-five .event-row:first-child .event-tags { grid-column: 3; grid-row: 2; align-self: start; margin-top: 14px; }
  /* ...and the four after it are narrower notes: calendar block on top, then the title */
  .p-events .next-five .event-row:not(:first-child) { grid-template-columns: minmax(0, 1fr); }
  .p-events .next-five .event-row:not(:first-child) .event-body h3 { grid-column: 1; grid-row: 2; margin-top: 14px; font-size: 19px; }
  .p-events .next-five .event-row:not(:first-child) .event-meta { margin-top: 10px; }
  .p-events .next-five .event-row:not(:first-child) .event-date { width: 64px; }
  .p-events .next-five .event-row:not(:first-child) .event-date .day { font-size: 28px; }
}
.p-events .next-five .event-row:first-child h3 { font-size: clamp(22px, 2.2vw, 28px); }
.p-events .next-five .event-row:first-child .event-date { width: 84px; }
.p-events .next-five .event-row:first-child .event-date .day { font-size: 40px; }
.p-events .next-five .event-row:first-child::after {
  content: none; position: absolute; top: 14px; right: 16px; font-family: var(--f-hand); font-size: 22px; line-height: 1; color: var(--brick-ink); transform: rotate(4deg);
}
@media (max-width: 420px) { .p-events .next-five .event-row:first-child::after { display: none; } }
.p-events .next-five .event-row:first-child h3 { padding-right: 40px; }
@media (max-width: 420px) { .p-events .next-five .event-row:first-child h3 { padding-right: 0; } }

/* ---------- every event: the calendar block and the words ---------- */
.p-events .event-row { position: relative; }
.p-events .event-date { width: 70px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--navy), 0 6px 10px -6px rgba(20, 32, 58, .4); border-radius: 12px; padding: 0 0 6px; }
.p-events .event-date .dow { display: block; margin: 0 0 4px; padding: 4px 0 3px; background: var(--navy); color: var(--gold); font-size: 12px; letter-spacing: .12em; }
.p-events .event-date .day { font-size: 31px; line-height: 1.1; }
.p-events .event-date .mon { color: var(--gold-dark); }
.p-events .event-body h3 { font-size: 20px; line-height: 1.22; margin: 0 0 8px; }
.p-events .event-body h3 a { color: var(--navy); font-weight: 600; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--ease); }
.p-events .event-body h3 a:hover { background-size: 100% 3px; color: var(--navy); }
.p-events .event-meta { display: grid; gap: 3px; margin: 0 0 10px; font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.p-events .event-meta span + span::before { content: none; }
.p-events .event-meta span:first-child { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--navy); }
.p-events .event-body > p:not(.event-meta) { font-size: 15.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.p-events .event-tags { gap: 6px; margin-top: 12px; }
.p-events .event-tags .pill { font-family: var(--f-display); font-weight: 500; background: var(--blue-soft); color: var(--blue-ink); border: 0; border-radius: 999px; padding: 4px 12px; }
.p-events .event-tags .pill--gold { background: var(--gold-soft); color: var(--gold-dark); }
.p-events .event-row.is-highlight { outline: 3px solid var(--gold-deep); outline-offset: 4px; }

/* ---------- the wall calendar, hung on the board ---------- */
.p-events .month-fold { position: relative; }
.p-events .month-fold > summary { list-style: none; cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; }
.p-events .month-fold > summary::-webkit-details-marker { display: none; }
.p-events .month-fold > summary::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 20px; line-height: 1; }
.p-events .month-fold[open] > summary::after { content: "\2212"; }
.p-events .month-fold > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
@media (min-width: 700px) { .p-events .ev-board .month-fold > summary { display: none; } }

.p-events .month-fold-body {
  position: relative;
  margin: 8px auto 0;
  max-width: 1040px;
  padding: 44px clamp(12px, 2.4vw, 30px) clamp(18px, 2.4vw, 28px);
  border-radius: 8px 8px 14px 14px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(122, 91, 19, .15), 0 26px 40px -24px rgba(60, 40, 10, .7);
}
/* the binding along the top: a navy strip and its rings */
.p-events .month-fold-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; border-radius: 8px 8px 0 0;
  background: var(--navy);
}
.p-events .month-fold-body::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: -9px; height: 26px;
  background: radial-gradient(circle at 50% 30%, transparent 0 4px, #8a94a8 4.5px 6.5px, transparent 7px) 0 0 / 34px 26px repeat-x;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 60%);
}
.p-events .mc-head { margin: 0 0 14px; gap: 12px; }
.p-events .mc-head h2 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.02em; }
.p-events .mc-nav { gap: 8px; }
.p-events .mc-nav button { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid var(--navy); background: var(--paper); color: var(--navy); font-size: 24px; line-height: 1; box-shadow: 0 3px 0 var(--navy); }
.p-events .mc-nav button:hover { background: var(--gold-soft); }
.p-events .mc-nav button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--navy); }
.p-events .mc-nav button:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.p-events .mc-grid { gap: 0; border-top: 2px solid var(--navy); border-left: 1px solid rgba(29, 44, 76, .14); }
.p-events .mc-dow { padding: 8px 0; font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--navy); border-right: 1px solid rgba(29, 44, 76, .14); border-bottom: 1px solid rgba(29, 44, 76, .14); background: var(--gold-soft); }
.p-events .mc-day { min-height: 118px; border: 0; border-right: 1px solid rgba(29, 44, 76, .14); border-bottom: 1px solid rgba(29, 44, 76, .14); border-radius: 0; background: #fff; padding: 8px 7px; }
.p-events .mc-day:nth-child(7n), .p-events .mc-day:nth-child(7n+1) { background: #fbf8f0; }
.p-events .mc-day .mc-num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--navy); }
.p-events .mc-day.mc-other { opacity: 1; }
.p-events .mc-day.mc-other .mc-num { color: #6b7489; }
.p-events .mc-day.mc-other .mc-evt { opacity: .78; }
/* today is circled by hand */
.p-events .mc-day.mc-today { box-shadow: inset 0 0 0 3px var(--gold); border-color: rgba(29, 44, 76, .14); }
.p-events .mc-day.mc-today .mc-num { border-radius: 50%; box-shadow: 0 0 0 2.5px var(--brick); transform: rotate(-8deg); color: var(--brick-ink); }
.p-events .mc-day.mc-has { background: #fff; }
.p-events button.mc-day { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; }
.p-events button.mc-day .mc-num { align-self: flex-start; }
.p-events button.mc-day:hover { background: var(--gold-soft); }
.p-events button.mc-day:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: -3px; z-index: 1; }
.p-events .mc-evt { margin-top: 5px; padding: 4px 7px; border-radius: 3px 8px 3px 3px; background: var(--gold-soft); border-left: 3px solid var(--gold-deep); color: var(--navy-deep); font-weight: 700; font-size: 12.5px; line-height: 1.28; }
.p-events .mc-evt:nth-of-type(3n+2) { background: var(--blue-soft); border-left-color: var(--blue-ink); }
.p-events .mc-evt:nth-of-type(3n+3) { background: var(--sage-soft); border-left-color: var(--sage-ink); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .p-events button.mc-day .mc-evt { transition: translate .3s var(--spring); }
  .p-events button.mc-day:hover .mc-evt { translate: 0 -2px; }
}
@media (max-width: 700px) {
  .p-events .month-fold-body { padding: 38px 6px 10px; }
  .p-events .mc-head { padding: 0 6px; }
  .p-events .mc-day { min-height: 54px; padding: 4px 2px; text-align: center; }
  .p-events button.mc-day { text-align: center; }
  .p-events .mc-day .mc-num { min-width: 26px; height: 26px; font-size: 14.5px; }
  .p-events .mc-day.mc-has::after { content: ""; display: block; width: 8px; height: 8px; margin: 3px auto 0; border-radius: 50%; background: var(--brick); }
  .p-events .mc-day.mc-has .mc-num { background: var(--gold-soft); border-radius: 50%; }
  .p-events .mc-dow { font-size: 11.5px; letter-spacing: .02em; }
}
@media (max-width: 360px) {
  .p-events .month-cal.ev-board { width: auto; margin-inline: -6px; padding: 22px 10px 18px; border-radius: 22px; }
  .p-events .month-fold-body { padding-inline: 2px; }
}

/* ---------- the filter (added by js/pages/events.js) ---------- */
.p-events .ev-filter { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.p-events .ev-filter-label { font-family: var(--f-hand); font-size: 25px; line-height: 1; color: var(--gold-dark); margin-right: 4px; transform: rotate(-2deg); }
.p-events .ev-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper); color: var(--navy); font: 600 16px/1 var(--f-display); cursor: pointer;
  box-shadow: 0 3px 0 rgba(29, 44, 76, .12);
}
.p-events .ev-chip:hover { border-color: var(--gold); background: #fff; }
.p-events .ev-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--paper); box-shadow: 0 3px 0 var(--navy-deep); }
.p-events .ev-chip .n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-dark); font-size: 13.5px; }
.p-events .ev-chip[aria-pressed="true"] .n { background: var(--gold); color: var(--navy); }
.p-events .ev-chip:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.p-events .ev-filter-status { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--muted); min-height: 1.4em; }
@media (prefers-reduced-motion: no-preference) {
  .p-events .ev-chip { transition: background-color .2s, border-color .2s, color .2s, translate .2s var(--ease); }
  .p-events .ev-chip:active { translate: 0 2px; }
}

/* ---------- recurring events: index cards taped in a row ---------- */
.p-events #events-list > .month-heading {
  display: block; margin: clamp(34px, 4vw, 52px) 0 22px; padding: 0; border: 0;
  font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.02em;
}
.p-events #events-list > .month-heading:first-child { margin-top: 22px; }
.p-events .event-list:has(> .event-row:not([data-date])) {
  display: grid; gap: 34px clamp(18px, 2.2vw, 26px); grid-template-columns: minmax(0, 1fr); padding-top: 12px; align-items: start;
}
@media (min-width: 640px) { .p-events .event-list:has(> .event-row:not([data-date])) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .p-events .event-list:has(> .event-row:not([data-date])) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-events #events-list .event-row:not([data-date]) {
  --band: var(--gold); --tilt: -.5deg;
  flex-direction: column; gap: 14px; padding: 26px 22px 22px; border: 0; border-radius: 4px 4px 14px 14px;
  background:
    linear-gradient(var(--band), var(--band)) 0 0 / 100% 7px no-repeat,
    var(--paper);
  box-shadow: 0 16px 24px -18px rgba(60, 40, 10, .55), 0 0 0 1px rgba(29, 44, 76, .06);
  transform: rotate(var(--tilt));
}
.p-events #events-list .event-row:not([data-date]):nth-child(4n+2) { --band: var(--blue); --tilt: .6deg; }
.p-events #events-list .event-row:not([data-date]):nth-child(4n+3) { --band: var(--sage); --tilt: -.3deg; }
.p-events #events-list .event-row:not([data-date]):nth-child(4n+4) { --band: var(--brick); --tilt: .4deg; }
/* a strip of tape holds each card up */
.p-events #events-list .event-row:not([data-date])::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: rgba(243, 229, 192, .82); border-left: 2px dotted rgba(255, 255, 255, .6); border-right: 2px dotted rgba(255, 255, 255, .6);
  box-shadow: 0 1px 3px rgba(60, 40, 10, .18); transform: rotate(-3deg);
}
/* "every 1st sat" becomes a round stamp */
.p-events #events-list .event-row:not([data-date]) .event-date {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px; align-self: flex-start;
  width: auto; aspect-ratio: auto; min-height: 34px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--navy); box-shadow: none;
}
.p-events #events-list .event-row:not([data-date]) .event-date .dow,
.p-events #events-list .event-row:not([data-date]) .event-date .mon { margin: 0; padding: 0; background: none; color: var(--paper); font: 600 15px/1 var(--f-display); letter-spacing: .02em; text-transform: none; width: auto; }
.p-events #events-list .event-row:not([data-date]) .event-date .mon { color: var(--gold); text-transform: capitalize; }
.p-events #events-list .event-row:not([data-date]) .event-date .day { order: -1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 16px; padding: 0; line-height: 1; }
/* the circling arrow turns once when you reach for the card: it comes round again */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .p-events #events-list .event-row:not([data-date]) .event-date .day { transition: rotate .9s var(--ease); }
  .p-events #events-list .event-row:not([data-date]):hover .event-date .day { rotate: 1turn; }
}

/* ---------- one-time events: an agenda, month by month ---------- */
@media (min-width: 1000px) {
  .p-events #events-list { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .p-events #events-list > * { grid-column: 1 / -1; }
  .p-events #events-list > .month-heading:has(+ .event-list > .event-row[data-date]) { grid-column: 1; position: sticky; top: calc(var(--osv-header-h) + 24px); }
  .p-events #events-list > .month-heading + .event-list:has(> .event-row[data-date]) { grid-column: 2; margin-top: clamp(34px, 4vw, 52px); }
}
/* the month's page: a torn-off calendar sheet */
.p-events #events-list > .month-heading:has(+ .event-list > .event-row[data-date]) {
  position: relative; width: max-content; max-width: 100%;
  padding: 34px 26px 20px; border-radius: 6px 6px 16px 16px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 18px no-repeat, var(--paper);
  box-shadow: 0 18px 28px -20px rgba(29, 44, 76, .6), 0 0 0 1px rgba(29, 44, 76, .07);
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1;
}
@media (min-width: 1000px) { .p-events #events-list > .month-heading:has(+ .event-list > .event-row[data-date]) { width: 100%; } }
.p-events #events-list > .month-heading:has(+ .event-list > .event-row[data-date])::before {
  content: ""; position: absolute; top: -7px; left: 26px; right: 26px; height: 16px;
  background: radial-gradient(circle at 50% 50%, var(--cream) 0 4px, #8a94a8 4.5px 6px, transparent 6.5px) 0 0 / 40px 16px repeat-x;
}
.p-events #events-list > .month-heading:has(+ .event-list > .event-row[data-date])::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--gold);
}

/* the agenda: a dotted path runs down past each date */
.p-events #events-list .event-list:has(> .event-row[data-date]) { position: relative; gap: 18px; padding-left: 0; }
.p-events #events-list .event-list:has(> .event-row[data-date])::before {
  content: ""; position: absolute; top: 20px; bottom: 20px; left: calc(clamp(16px, 2vw, 24px) + 35px); width: 0;
  border-left: 3px dotted rgba(166, 122, 44, .5); z-index: 0;
}
.p-events #events-list .event-row[data-date] {
  gap: clamp(16px, 2vw, 26px); padding: clamp(18px, 2vw, 24px) clamp(16px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); box-shadow: var(--shadow); z-index: 1;
}
.p-events #events-list .event-row[data-date] .event-date { position: relative; z-index: 1; }
@media (max-width: 560px) {
  .p-events .event-row { flex-direction: row; gap: 14px; }
  .p-events .event-date { display: flex; flex-direction: column; width: 62px; padding: 0 0 5px; align-items: stretch; }
  .p-events .event-date .day { font-size: 27px; }
  .p-events .event-body h3 { font-size: 18.5px; }
  .p-events .next-five .event-row { padding: 24px 16px 18px; }
  .p-events .next-five .event-row:first-child { padding: 28px 16px 22px; }
  .p-events .next-five .event-row:first-child .event-date { width: 70px; }
  .p-events .next-five .event-row:first-child .event-date .day { font-size: 32px; }
  .p-events #events-list .event-list:has(> .event-row[data-date])::before { left: calc(16px + 30px); }
  .p-events #events-list .event-row:not([data-date]) { flex-direction: column; padding: 24px 18px 20px; }
}
@media (max-width: 360px) {
  .p-events .event-row { flex-direction: column; }
  .p-events #events-list .event-list:has(> .event-row[data-date])::before { display: none; }
}

/* ---------- know an event? a postcard with a snapshot ---------- */
.p-events .events-empty.ev-share {
  position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center;
  margin: clamp(56px, 7vw, 96px) auto 0; max-width: 980px; padding: clamp(26px, 3.6vw, 44px);
  border: 0; border-radius: var(--r-lg); text-align: left; color: var(--text);
  background: var(--paper); box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
.p-events .ev-share::after { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(166, 122, 44, .32); border-radius: 20px; pointer-events: none; }
.p-events .ev-share-photo { margin: 0; padding: 10px 10px 34px; background: #fff; border-radius: 3px; box-shadow: 0 16px 26px -16px rgba(60, 40, 10, .55); transform: rotate(-3deg); position: relative; z-index: 1; }
.p-events .ev-share-photo::before { content: ""; position: absolute; top: -12px; left: 50%; width: 86px; height: 24px; margin-left: -43px; background: rgba(215, 164, 62, .45); transform: rotate(4deg); }
.p-events .ev-share-photo img { display: block; width: 100%; height: auto; }
.p-events .ev-share-words { position: relative; z-index: 1; }
.p-events .ev-share h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; }
.p-events .ev-share p { font-size: 18px; color: var(--text); margin: 0 0 22px; max-width: 30em; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .p-events .ev-share-photo { transition: transform .5s var(--spring); }
  .p-events .ev-share:hover .ev-share-photo { transform: rotate(1deg) translateY(-4px); }
}
@media (max-width: 700px) {
  .p-events .events-empty.ev-share { grid-template-columns: 1fr; text-align: center; padding: 30px 20px 28px; }
  .p-events .ev-share-photo { width: min(78%, 280px); margin: 0 auto; }
  .p-events .ev-share p { margin-inline: auto; }
}
/* the renderer's own empty/failed notes */
.p-events #events-list .events-empty, .p-events #month-view .events-empty { background: var(--paper); border-radius: var(--r); color: var(--text); }

/* ---------- movement: every piece means something ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the board's cards get pinned up, one after another, once the calendar has loaded */
  .p-events .ev-board.is-pinning .next-five .event-row { animation: ev-pinned 1s var(--ease) both; transform-origin: 50% -8px; }
  .p-events .ev-board.is-pinning .next-five .event-row::before { animation: ev-pin-drop .55s var(--spring) both; }
  .p-events .ev-board.is-pinning .next-five .event-row:nth-child(2), .p-events .ev-board.is-pinning .next-five .event-row:nth-child(2)::before { animation-delay: .12s; }
  .p-events .ev-board.is-pinning .next-five .event-row:nth-child(3), .p-events .ev-board.is-pinning .next-five .event-row:nth-child(3)::before { animation-delay: .24s; }
  .p-events .ev-board.is-pinning .next-five .event-row:nth-child(4), .p-events .ev-board.is-pinning .next-five .event-row:nth-child(4)::before { animation-delay: .36s; }
  .p-events .ev-board.is-pinning .next-five .event-row:nth-child(5), .p-events .ev-board.is-pinning .next-five .event-row:nth-child(5)::before { animation-delay: .48s; }
  @keyframes ev-pinned { 0% { transform: translateY(-16px) rotate(calc(var(--tilt) - 4deg)); } 55% { transform: translateY(0) rotate(calc(var(--tilt) + 1.6deg)); } 80% { transform: rotate(calc(var(--tilt) - .6deg)); } 100% { transform: rotate(var(--tilt)); } }
  @keyframes ev-pin-drop { 0% { transform: translateY(-22px) scale(1.3); } 60% { transform: translateY(2px) scale(.94); } 100% { transform: none; } }

  /* paper lifts off the board when you reach for it; the pin gives a little wiggle */
  .p-events .next-five .event-row, .p-events #events-list .event-row:not([data-date]) { transition: transform .45s var(--spring), box-shadow .45s var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .p-events .next-five .event-row:hover, .p-events #events-list .event-row:not([data-date]):hover { transform: rotate(0) translateY(-6px); box-shadow: 0 30px 40px -24px rgba(60, 40, 10, .6); }
    .p-events .ev-board:not(.is-pinning) .next-five .event-row:hover::before,
    .p-events .ev-board.is-settled .next-five .event-row:hover::before { animation: ev-wiggle .6s var(--ease); }
    @keyframes ev-wiggle { 30% { transform: rotate(-18deg); } 60% { transform: rotate(12deg); } }
  }

  /* turning the wall calendar to another month */
  .p-events .ev-board.turn-next .mc-grid { animation: ev-page-next .5s var(--ease); transform-origin: 50% 0; }
  .p-events .ev-board.turn-prev .mc-grid { animation: ev-page-prev .5s var(--ease); transform-origin: 50% 0; }
  @keyframes ev-page-next { from { transform: perspective(900px) rotateX(-14deg) translateY(-8px); opacity: .35; } to { transform: none; opacity: 1; } }
  @keyframes ev-page-prev { from { transform: perspective(900px) rotateX(12deg) translateY(8px); opacity: .35; } to { transform: none; opacity: 1; } }

  /* a day you tap on the calendar: its events glow where they wait in the list */
  .p-events .event-row.is-highlight { animation: ev-found 1.6s var(--ease); }
  @keyframes ev-found { 0% { box-shadow: 0 0 0 0 rgba(215, 164, 62, .7); } 60% { box-shadow: 0 0 0 16px rgba(215, 164, 62, 0); } 100% { box-shadow: var(--shadow); } }

  /* filtering: the cards that stay settle back into place */
  .p-events #events-list.is-filtering .event-row:not([hidden]) { animation: ev-settle .5s var(--ease); }
  @keyframes ev-settle { from { transform: translateY(10px) rotate(var(--tilt, 0deg)); opacity: .4; } to { transform: rotate(var(--tilt, 0deg)); opacity: 1; } }
}
.p-events [hidden] { display: none !important; }

@media print {
  .p-events .month-cal.ev-board { background: none; box-shadow: none; padding: 0; }
  .p-events .ev-filter, .p-events .ev-share-photo, .p-events .ev-hero-actions { display: none; }
  .p-events .event-row { transform: none !important; box-shadow: none !important; }
}

/* the agenda reads compactly: when first, then where, cost and who on one flowing line */
.p-events #events-list .event-row[data-date] .event-meta { display: block; }
.p-events #events-list .event-row[data-date] .event-meta span { display: inline; }
.p-events #events-list .event-row[data-date] .event-meta span:first-child { display: block; margin-bottom: 2px; }
.p-events #events-list .event-row[data-date] .event-meta span + span:not(:nth-child(2))::before { content: "\00b7"; margin: 0 .45em; color: var(--gold-deep); }
.p-events #events-list .event-row[data-date] .event-tags { margin-top: 8px; }
.p-events .ev-board .month-fold > summary { display: inline-flex; }
@media (min-width: 700px) { .p-events .ev-board .month-fold > summary { display: none; } }
/* on phones the chips ride in one row that slides sideways, instead of five rows of buttons */
@media (max-width: 699px) {
  .p-events .ev-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .p-events .ev-filter::-webkit-scrollbar { display: none; }
  .p-events .ev-chip { flex: 0 0 auto; white-space: nowrap; }
  .p-events .ev-filter-label { flex: 0 0 auto; }
}
@media (max-width: 700px) { .p-events button.mc-day .mc-num { align-self: center; } }