/* ==========================================================================
   Jonamac Events Calendar

   Every colour, size and typeface below reads from a custom property. The
   Design panel in the admin writes those properties inline, so nothing here
   needs editing to restyle the calendar. The values in this block are only
   the fallbacks used before anything is saved.

   Namespaced under .jm-cal and .jm-se so page builder globals cannot reach in.
   ========================================================================== */

.jm-cal,
.jm-se {
	/* Set by the Design panel */
	--jm-bg: transparent;
	--jm-cream: #FFEFD0;
	--jm-ink: #422520;
	--jm-accent: #D09024;
	--jm-accent-ink: #422520;

	--jm-day-bg: #3B2A24;
	--jm-day-bg-has: #52382E;
	--jm-day-bg-hover: #6A4739;
	--jm-border: #FFEFD0;
	--jm-border-width: 3px;
	--jm-radius: 18px;
	--jm-gap: 10px;
	--jm-marker-size: 6px;
	--jm-aspect: 1 / 1.1;
	--jm-day-min: 104px;

	--jm-cat-food-trucks: #D09024;
	--jm-cat-live-music: #789C7E;
	--jm-cat-entertainment: #8CA7BE;
	--jm-cat-after-hours: #6E5A8C;
	--jm-cat-haunt: #AB5700;
	--jm-cat-special-events: #96435B;

	/* Two faces: one for reading, one for the small label furniture. */
	--jm-font: 'VC Henrietta Trial', Georgia, serif;
	--jm-font-ui: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--jm-bar-ink: #FFEFD0;
	--jm-scale: 1;
	--jm-num-weight: 700;
	--jm-label-transform: uppercase;
	--jm-label-spacing: 0.06em;

	--jm-card-bg: #3B2A24;
	--jm-card-border: #FFEFD0;
	--jm-cta-bg: #D09024;
	--jm-cta-ink: #422520;

	/* Headroom left above anything the calendar scrolls to. Raise it to clear
	   a sticky site header. */
	--jm-scroll-offset: 24px;

	/* Derived from the above, so one border colour drives every rule and tint */
	--jm-border-soft: color-mix(in srgb, var(--jm-border) 38%, transparent);
	--jm-hairline: color-mix(in srgb, var(--jm-border) 16%, transparent);
	--jm-surface: color-mix(in srgb, var(--jm-border) 7%, transparent);
	--jm-surface-strong: color-mix(in srgb, var(--jm-border) 14%, transparent);
	--jm-radius-sm: calc(var(--jm-radius) * 0.55);

	font-family: var(--jm-font);
	color: var(--jm-cream);
	background: var(--jm-bg);
	box-sizing: border-box;
	container-type: inline-size;
	display: block;
	width: 100%;

	/* Stated rather than inherited. A page builder section set to centre its
	   text would otherwise centre every event name in the list. The few parts
	   that should be centred say so themselves below. */
	text-align: left;
}

.jm-cal--boxed,
.jm-se--boxed {
	padding: clamp(16px, 3cqw, 32px);
	border-radius: var(--jm-radius);
}

.jm-cal *,
.jm-se * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
}

/* Restore inheritance for colour the way the reset above does for the font.
   A theme rule as plain as `h2 { color: #1b2a3a }` beats an inherited value, so
   without this an event title picks up the theme's heading colour instead of
   the calendar's. :where() keeps this at the specificity of the namespace
   alone, so every component rule below still overrides it. */
.jm-cal :where(h1, h2, h3, h4, h5, h6, p, li, a, span, div, small, strong, em, time),
.jm-se :where(h1, h2, h3, h4, h5, h6, p, li, a, span, div, small, strong, em, time) {
	color: inherit;
}

/* The label font: weekday row, filter chips, view buttons, the bars on each
   day, and the category and time labels in the event rows. */
.jm-dow,
.jm-chip,
.jm-cal__view,
.jm-pill,
.jm-event__cat,
.jm-event__slot,
.jm-event__when,
.jm-daycard__close,
.jm-list__date small,
.jm-se-entry__meta,
.jm-se__cta {
	font-family: var(--jm-font-ui);
}

/* Zero-specificity reset via :where(), so every component rule below outranks
   it. A plain `.jm-cal button` selector would beat single-class rules like
   .jm-day and strip their borders. */
:where(.jm-cal, .jm-se) button {
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.jm-cal :focus-visible,
.jm-se :focus-visible {
	outline: 2px solid var(--jm-cream);
	outline-offset: 2px;
}

.jm-cal__heading {
	font-size: calc(clamp(1.5rem, 3cqw, 2.25rem) * var(--jm-scale));
	font-weight: 700;
	margin-bottom: 0.75em;
	text-wrap: balance;
}

/* --------------------------------------------------------------- toolbar */

.jm-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.jm-cal__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.jm-cal__nav[hidden] {
	display: none;
}

.jm-cal__arrow {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 2px solid var(--jm-border);
	border-radius: 999px;
	display: grid;
	place-items: center;
	color: var(--jm-cream);
	transition: background-color 250ms ease, opacity 250ms ease;
}

.jm-cal__arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

.jm-cal__arrow:hover:not(:disabled) {
	background: var(--jm-surface-strong);
}

.jm-cal__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.jm-cal__title {
	font-size: calc(clamp(1.125rem, 2.4cqw, 1.75rem) * var(--jm-scale));
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--jm-cream);
}

.jm-cal__views {
	display: inline-flex;
	border: 2px solid var(--jm-border);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.jm-cal__view {
	padding: 7px 18px;
	text-align: center;
	border-radius: 999px;
	font-size: calc(0.9375rem * var(--jm-scale));
	letter-spacing: var(--jm-label-spacing);
	text-transform: var(--jm-label-transform);
	color: var(--jm-cream);
	transition: background-color 250ms ease, color 250ms ease;
}

.jm-cal__view.is-active {
	background: var(--jm-cream);
	color: var(--jm-ink);
	font-weight: 700;
}

/* --------------------------------------------------------------- filters */

.jm-cal__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.jm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border-radius: 999px;
	border: 2px solid var(--jm-border-soft);
	color: var(--jm-cream);
	font-size: calc(0.875rem * var(--jm-scale));
	line-height: 1.2;
	opacity: 0.55;
	transition: opacity 250ms ease, border-color 250ms ease, background-color 250ms ease;
}

.jm-chip__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--jm-chip-color, var(--jm-cream));
	flex: 0 0 auto;
}

.jm-chip.is-on {
	opacity: 1;
	border-color: var(--jm-chip-color, var(--jm-border));
	background: color-mix(in srgb, var(--jm-chip-color, transparent) 18%, transparent);
}

.jm-chip:hover {
	opacity: 1;
}

/* ------------------------------------------------------------ month grid */

.jm-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--jm-gap);
}

.jm-dow {
	background: var(--jm-cream);
	color: var(--jm-ink);
	font-size: calc(clamp(0.6875rem, 1.3cqw, 1rem) * var(--jm-scale));
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
	text-align: center;
	padding: 6px 0;
	border-radius: 999px;
	align-self: center;
	overflow: hidden;
	min-width: 0;
}

.jm-day {
	position: relative;
	min-width: 0;

	/* Grid items get an automatic minimum size from their contents, which beats
	   the aspect ratio: a square carrying four pills grows taller than an empty
	   one and the row goes ragged. Clearing the minimum lets the ratio decide
	   the height for every square, full or not. Overflow stays visible here so
	   the decorative icon can still hang off the corner; the pill stack does
	   its own clipping. */
	min-height: 0;

	aspect-ratio: var(--jm-aspect);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 8px 8px 9px;
	border: var(--jm-border-width) solid var(--jm-border);
	border-radius: var(--jm-radius);
	background: var(--jm-day-bg);
	color: var(--jm-cream);
	font-size: calc(clamp(1rem, 1.9cqw, 1.3125rem) * var(--jm-scale));
	font-weight: var(--jm-num-weight);
	text-align: center;
	transition: background-color 300ms ease, transform 300ms ease;
}

.jm-day--empty {
	border: none;
	background: transparent;
}

.jm-day--has {
	background: var(--jm-day-bg-has);
}

button.jm-day:hover,
button.jm-day:focus-visible {
	background: var(--jm-day-bg-hover);
}

button.jm-day:hover .jm-day__num,
button.jm-day:focus-visible .jm-day__num {
	transform: scale(1.1);
}

.jm-day__num {
	display: inline-block;
	flex: 0 0 auto;
	transition: transform 300ms ease;
	line-height: 1;
}

.jm-day--today {
	box-shadow: inset 0 0 0 2px var(--jm-cream);
}

.jm-day.is-selected {
	background: var(--jm-day-bg-hover);
	box-shadow: inset 0 0 0 2px var(--jm-accent);
}

/* One horizontal pill per category on the day, stacked along the bottom of the
   square so the date keeps the top. */
.jm-day__pills {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: 3px;
	width: 100%;
	margin-top: auto;
	min-height: 0;
	overflow: hidden;
}

.jm-pill {
	display: block;
	width: 100%;
	height: var(--jm-marker-size);
	flex: 0 0 var(--jm-marker-size);
	border-radius: 999px;
	background: var(--jm-mark, var(--jm-cream));
}

.jm-pill__label {
	display: none;
}

/* ---------------------------------------------------------- named bars */

/* With names on, each event gets its own bar rather than each category, so the
   square stops being a fixed shape and grows with what is on that day. Grid
   stretch then levels every square in the row. */
.jm-cal--labels .jm-day {
	aspect-ratio: auto;
	min-height: var(--jm-day-min);
	justify-content: flex-start;
	gap: 5px;
}

/* Named bars follow the date instead of hugging the bottom. A row is as tall
   as its busiest day, so bottom alignment would leave a gap under the date on
   every quieter square in that row. */
.jm-cal--labels .jm-day__pills {
	gap: 3px;
	margin-top: 0;
	justify-content: flex-start;
}

.jm-cal--labels .jm-pill {
	height: auto;
	flex: 0 0 auto;
	min-height: var(--jm-marker-size);
	padding: 3px 8px 4px;
	border-radius: calc(var(--jm-radius) * 0.35);
	color: var(--jm-bar-ink);
	font-size: calc(0.6875rem * var(--jm-scale));
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jm-cal--labels .jm-pill__label {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jm-cal--labels .jm-pill--more {
	position: static;
	padding: 1px 2px 0;
	color: var(--jm-cream);
	font-size: calc(0.625rem * var(--jm-scale));
	font-weight: 400;
	text-align: left;
	opacity: 0.7;
}

/* Pulled out of the stack and into the corner, so the pills keep a common
   bottom edge across every square in the row. */
.jm-pill--more {
	position: absolute;
	top: 7px;
	right: 9px;
	width: auto;
	height: auto;
	background: none;
	font-size: calc(0.625rem * var(--jm-scale));
	font-weight: 400;
	line-height: 1;
	opacity: 0.7;
}

/* Decorative icons carried over from the original calendar. */
.jm-day--icon::after {
	content: "";
	position: absolute;
	bottom: -18%;
	right: -26%;
	width: 55%;
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
	animation: jm-drift 2.4s linear infinite;
}

@property --jm-amp {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.jm-day--icon {
	--jm-amp: 0;
	transition: --jm-amp 450ms ease-out;
	z-index: 1;
}

.jm-day--icon:hover,
.jm-day--icon:focus-visible {
	--jm-amp: 1;
}

@keyframes jm-drift {
	0%    { transform: translate(0, 0); }
	25%   { transform: translate(calc(-8px * var(--jm-amp)), 0); }
	37.5% { transform: translate(calc(-5.66px * var(--jm-amp)), calc(4px * var(--jm-amp))); }
	50%   { transform: translate(0, 0); }
	62.5% { transform: translate(calc(5.66px * var(--jm-amp)), calc(-4px * var(--jm-amp))); }
	75%   { transform: translate(calc(8px * var(--jm-amp)), 0); }
	100%  { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.jm-day--icon::after { animation: none; }
	.jm-cal *, .jm-se * { transition-duration: 1ms !important; }
}

/* ------------------------------------------------------- detail and list */

/* Both scroll targets carry their own headroom, so the browser positions them
   exactly the way it positions an anchor link. */
.jm-cal,
.jm-detail {
	scroll-margin-top: var(--jm-scroll-offset);
}

.jm-detail {
	margin-top: 18px;
}

.jm-detail[hidden] {
	display: none;
}

.jm-daycard {
	border: 2px solid var(--jm-border-soft);
	border-radius: var(--jm-radius);
	background: var(--jm-surface);
	padding: clamp(16px, 2.5cqw, 26px);
}

.jm-daycard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--jm-border-soft);
}

.jm-daycard__date {
	font-size: calc(clamp(1.0625rem, 2cqw, 1.375rem) * var(--jm-scale));
	font-weight: 700;
}

.jm-daycard__count {
	font-size: calc(0.875rem * var(--jm-scale));
	opacity: 0.7;
}

.jm-daycard__close {
	font-size: calc(0.8125rem * var(--jm-scale));
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
	opacity: 0.75;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	color: var(--jm-cream);
}

.jm-events {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
}

/* Category, then what it is, then when. Everything hangs from the top of the
   row so a two line title never pushes the other columns down with it. */
.jm-event {
	display: grid;
	grid-template-columns: minmax(104px, 148px) minmax(0, 1fr) minmax(0, auto);
	grid-template-areas: "cat body when";
	align-items: start;
	gap: 10px 18px;
	padding: 13px 0;
	border-bottom: 1px solid var(--jm-hairline);
}

.jm-event:last-child {
	border-bottom: none;
}

.jm-event__cat {
	grid-area: cat;
	justify-self: start;
	font-size: calc(0.6875rem * var(--jm-scale));
	line-height: 1.2;
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid var(--jm-mark, var(--jm-border-soft));
	background: color-mix(in srgb, var(--jm-mark, transparent) 16%, transparent);
	color: var(--jm-cream);
	white-space: nowrap;
	margin-top: 2px;
}

.jm-event__body {
	grid-area: body;
	min-width: 0;
	text-align: left;
}

.jm-event__when {
	grid-area: when;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
	font-size: calc(0.875rem * var(--jm-scale));
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jm-event__slot {
	font-size: calc(0.6875rem * var(--jm-scale));
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
	opacity: 0.65;
}

.jm-event__time {
	opacity: 0.9;
}

.jm-event__title {
	font-size: calc(1.0625rem * var(--jm-scale));
	font-weight: 700;
	line-height: 1.3;
	display: block;
	color: var(--jm-cream);
}

a.jm-event__title {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 250ms ease;
}

a.jm-event__title:hover {
	border-bottom-color: currentColor;
}

.jm-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 3px;
	font-size: calc(0.8125rem * var(--jm-scale));
	opacity: 0.78;
	line-height: 1.4;
}

.jm-event__meta span::after {
	content: "·";
	margin-left: 8px;
	opacity: 0.5;
}

.jm-event__meta span:last-child::after {
	content: none;
}

.jm-event__summary {
	margin-top: 5px;
	font-size: calc(0.9375rem * var(--jm-scale));
	line-height: 1.5;
	opacity: 0.85;
	max-width: 62ch;
}

.jm-list__month {
	margin-bottom: 26px;
}

.jm-list__month-title {
	font-size: calc(clamp(1.125rem, 2.2cqw, 1.5rem) * var(--jm-scale));
	font-weight: 700;
	padding-bottom: 8px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--jm-border-soft);
}

.jm-list__day {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--jm-hairline);
}

.jm-list__date {
	font-weight: 700;
	line-height: 1.25;
	padding-top: 10px;
	font-size: calc(1rem * var(--jm-scale));
}

.jm-list__date small {
	display: block;
	font-weight: 400;
	font-size: calc(0.8125rem * var(--jm-scale));
	opacity: 0.7;
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
}

.jm-list__day.is-today .jm-list__date {
	color: var(--jm-accent);
}

.jm-empty {
	padding: 28px 0;
	opacity: 0.7;
	font-size: calc(1rem * var(--jm-scale));
}

.jm-cal__noscript ul {
	list-style: none;
	margin-top: 10px;
}

.jm-cal__noscript li {
	padding: 6px 0;
	border-bottom: 1px solid var(--jm-border-soft);
}

/* -------------------------------------------------------- special events */

.jm-se--page {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 5cqw, 56px);
}

/* One entry per event, image beside the text on wide screens and stacked on
   narrow ones. No links out: everything about the event is here. */
.jm-se-entry {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(20px, 3cqw, 40px);
	align-items: start;
	padding-bottom: clamp(28px, 5cqw, 56px);
	border-bottom: 1px solid var(--jm-border-soft);
}

.jm-se-entry:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* No featured image, no image column: the write up takes the full width rather
   than being squeezed into the narrow half with a void beside it. */
.jm-se-entry--noimage {
	grid-template-columns: minmax(0, 1fr);
}

.jm-se-entry--past {
	opacity: 0.55;
}

.jm-se-entry__media {
	border-radius: var(--jm-radius);
	overflow: hidden;
	background: var(--jm-card-bg);
	border: 2px solid color-mix(in srgb, var(--jm-card-border) 30%, transparent);
}

.jm-se-entry__media img {
	width: 100%;
	height: auto;
	display: block;
}

.jm-se-entry__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.jm-se-entry__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jm-se-entry__title {
	font-size: calc(clamp(1.5rem, 3.4cqw, 2.25rem) * var(--jm-scale));
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.jm-se-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: calc(0.875rem * var(--jm-scale));
	text-transform: var(--jm-label-transform);
	letter-spacing: var(--jm-label-spacing);
	color: var(--jm-accent);
}

.jm-se-entry__summary {
	font-size: calc(1.0625rem * var(--jm-scale));
	line-height: 1.5;
	font-weight: 600;
	max-width: 62ch;
}

.jm-se-entry__content {
	line-height: 1.65;
	max-width: 68ch;
	font-size: calc(1rem * var(--jm-scale));
}

.jm-se-entry__content > * + * {
	margin-top: 1em;
}

/* Blank paragraphs from the editor should take up no room. */
.jm-se-entry__content p:empty {
	display: none;
}

.jm-se-entry__content h2,
.jm-se-entry__content h3 {
	margin-top: 1.4em;
	font-weight: 700;
	font-size: calc(1.25rem * var(--jm-scale));
}

.jm-se-entry__content ul,
.jm-se-entry__content ol {
	padding-left: 1.3em;
}

.jm-se-entry__content li + li {
	margin-top: 0.35em;
}

.jm-se-entry__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--jm-radius-sm);
}

.jm-se-entry__content a {
	color: inherit;
}

.jm-se__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 6px;
	padding: 13px 30px;
	border-radius: 999px;
	background: var(--jm-cta-bg);
	color: var(--jm-cta-ink);
	font-weight: 700;
	letter-spacing: var(--jm-label-spacing);
	text-transform: var(--jm-label-transform);
	text-decoration: none;
	font-size: calc(1rem * var(--jm-scale));
	transition: filter 250ms ease;
}

.jm-se__cta:hover {
	filter: brightness(1.1);
}

/* ---------------------------------------------------------------- mobile */

@container (max-width: 560px) {
	.jm-cal__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.jm-cal__nav {
		justify-content: space-between;
	}

	.jm-cal__views {
		justify-content: center;
	}

	.jm-cal__view {
		flex: 1;
		text-align: center;
		padding: 7px 10px;
	}

	.jm-day {
		aspect-ratio: 1 / 1;
		border-width: max(2px, calc(var(--jm-border-width) - 1px));
		border-radius: calc(var(--jm-radius) * 0.7);
		gap: 4px;
		padding: 5px 5px 6px;
		font-size: calc(clamp(0.6875rem, 3cqw, 0.9375rem) * var(--jm-scale));
	}

	.jm-day__pills {
		gap: 2px;
	}

	.jm-pill {
		height: max(3px, calc(var(--jm-marker-size) * 0.65));
	}

	/* Three pills is all a phone-sized square can carry legibly. */
	.jm-day__pills .jm-pill:nth-child(n + 4) {
		display: none;
	}

	/* A name cannot be read in a square this size, so the bars go back to
	   being colour only no matter what the setting says. */
	.jm-cal--labels .jm-day {
		aspect-ratio: 1 / 1;
		min-height: 0;
		justify-content: flex-start;
	}

	.jm-cal--labels .jm-pill {
		height: max(3px, calc(var(--jm-marker-size) * 0.65));
		min-height: 0;
		padding: 0;
		border-radius: 999px;
		font-size: 0;
	}

	.jm-cal--labels .jm-pill__label {
		display: none;
	}

	.jm-cal--labels .jm-pill--more {
		display: none;
	}

	.jm-dow {
		font-size: calc(clamp(0.5rem, 2.4cqw, 0.75rem) * var(--jm-scale));
		padding: 4px 0;
	}

	.jm-list__day {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.jm-list__date {
		padding-top: 0;
	}

	.jm-se-entry {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The event row loses its third column before the rest of the calendar needs
   to change, because three columns of text get cramped first. */
@container (max-width: 760px) {
	.jm-event {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"cat  when"
			"body body";
		gap: 8px 14px;
	}

	.jm-event__when {
		justify-self: end;
		align-self: center;
		white-space: normal;
	}

	.jm-event__cat {
		margin-top: 0;
	}
}

/* On a phone the row gives up on columns entirely and reads top to bottom:
   what kind of thing it is, what it is, when it happens. All flush left. */
@container (max-width: 560px) {
	.jm-event {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"cat"
			"body"
			"when";
		gap: 7px;
		padding: 15px 0;
	}

	.jm-event__cat,
	.jm-event__body,
	.jm-event__when {
		justify-self: start;
		text-align: left;
	}

	/* Slot and time sit on one line rather than stacking again. */
	.jm-event__when {
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 8px;
		align-self: auto;
		white-space: normal;
	}
}

@container (max-width: 420px) {
	.jm-event__when {
		font-size: calc(0.8125rem * var(--jm-scale));
	}

	.jm-event__cat {
		font-size: calc(0.625rem * var(--jm-scale));
		padding: 4px 9px;
	}
}