/* Community pages — /community/<town>/, rendered by taxonomy-pdt_place.php.
   The page is in the community section, so it inherits body.tone-community:
   --tone is the ribbon's periwinkle band, --tone-ink its readable ink. Every
   colour here names one of those roles, never a hex. */

.cmty-wrap {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--pw-pad) clamp(48px, 6vw, 80px);
}

/* ── Hero photograph ────────────────────────────────────────────────
   assets/img/communities/<slug>.jpg, 2:1. Full width of the page well, and
   on a wide screen it runs to the edges of the gutters so the town arrives
   before its name does. */
.cmty-hero {
	margin: 0 calc(var(--pw-pad) * -1) 0;
	background: var(--color-surface-inverse);
	line-height: 0;
}
.cmty-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* ── Banner ─────────────────────────────────────────────────────────── */
.cmty-banner {
	padding: clamp(18px, 2.4vw, 30px) 0 clamp(14px, 2vw, 22px);
	background: linear-gradient(to bottom, var(--tone) 0 3px, transparent 3px 4px,
		color-mix(in srgb, var(--tone) 55%, transparent) 4px 5.5px, transparent 5.5px 6.5px,
		color-mix(in srgb, var(--tone) 28%, transparent) 6.5px 7.5px) no-repeat top / 100% 8px;
	margin-top: 6px;
}
.cmty-banner.has-hero {
	margin-top: 0;
	padding-top: clamp(14px, 1.8vw, 22px);
	background-image: linear-gradient(to bottom, var(--tone) 0 3px, transparent 3px 4px,
		color-mix(in srgb, var(--tone) 55%, transparent) 4px 5.5px, transparent 5.5px 6.5px,
		color-mix(in srgb, var(--tone) 28%, transparent) 6.5px 7.5px);
}
.cmty-banner .pdt-page-eyebrow { margin: 14px 0 8px; }
.cmty-banner .pdt-page-title { margin: 0; }
.cmty-dek {
	margin: 10px 0 0;
	max-width: 62ch;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.cmty-meta {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.cmty-meta a { color: var(--tone-ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--tone) 50%, transparent); }
.cmty-meta a:hover { border-bottom-color: var(--tone-ink); }
.cmty-dot { color: var(--tone); }

/* ── Town switcher ──────────────────────────────────────────────────── */
.cmty-towns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 18px 0 clamp(24px, 3vw, 36px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}
.cmty-town {
	display: inline-block;
	padding: 7px 14px 6px;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text-secondary);
	background: color-mix(in srgb, var(--tone) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
	border-radius: 999px;
	transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cmty-town:hover { background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--tone-ink); }
.cmty-town.is-here { background: var(--tone); border-color: var(--tone); color: var(--night); }
.cmty-town-all {
	background: none;
	border-color: transparent;
	color: var(--tone-ink);
	letter-spacing: .08em;
	margin-left: auto;
}
.cmty-town-all:hover { background: none; text-decoration: underline; }

/* ── Lead block: the town's own front page ──────────────────────────── */
.cmty-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
	margin-bottom: clamp(32px, 4vw, 52px);
}
.cmty-lead-img { display: block; margin-bottom: 14px; overflow: hidden; background: var(--color-surface-sunken); }
.cmty-lead-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); }
.cmty-lead-main:hover .cmty-lead-img img { transform: scale(1.02); }
.cmty-lead-head {
	margin: 6px 0 8px;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}
.cmty-lead-head a { color: var(--color-text); text-decoration: none; }
.cmty-lead-head a:hover { color: var(--tone-ink); }
.cmty-lead-deck {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.cmty-lead-rail { display: flex; flex-direction: column; }
.cmty-lead--text .cmty-lead-head { font-size: clamp(28px, 3vw, 42px); }
.cmty-lead--text .cmty-lead-main {
	padding-top: 4px;
	border-top: 3px solid var(--tone);
}

/* ── Rows: the shared list item for every module ────────────────────── */
.cmty-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid var(--color-border);
	text-decoration: none;
}
.cmty-row:first-child { border-top: 0; padding-top: 0; }
.cmty-row-thumb { flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; background: var(--color-surface-sunken); }
.cmty-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmty-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmty-row-kicker {
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--tone-ink);
}
.cmty-row-head {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.cmty-row:hover .cmty-row-head { color: var(--tone-ink); }
.cmty-row-date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-tertiary);
}

/* ── The desk: the town's standing modules ──────────────────────────── */
.cmty-desk {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
	margin-bottom: clamp(28px, 3.5vw, 48px);
}
.cmty-module .section-header { margin-top: 0; }
.cmty-flag .section-more { margin-left: auto; }
.cmty-events { display: flex; flex-direction: column; gap: 10px; }
.cmty-empty {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.cmty-empty a { color: var(--tone-ink); }
.cmty-note {
	margin: 12px 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.cmty-module--homes { margin-bottom: clamp(28px, 3.5vw, 48px); }
.cmty-homes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

/* ── Newsletter signup ──────────────────────────────────────────────── */
.cmty-signup {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
	gap: clamp(18px, 2.5vw, 40px);
	align-items: center;
	margin-bottom: clamp(24px, 3vw, 36px);
	padding: clamp(20px, 2.6vw, 30px);
	background: var(--color-surface-inverse);
	color: var(--color-text-inverse);
	border-top: 3px solid var(--tone-on-dark);
}
.cmty-signup-kicker {
	margin: 0 0 6px;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--tone-on-dark);
}
.cmty-signup-head {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: clamp(20px, 2vw, 27px);
	line-height: var(--leading-snug);
	color: var(--color-text-inverse);
}
.cmty-signup-blurb {
	margin: 0;
	max-width: 54ch;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: rgba(233, 207, 159, .78);
}
.cmty-signup-form .tnp-field { margin: 0 0 8px; }
.cmty-signup-form input[type="email"],
.cmty-signup-form input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: var(--color-text-inverse);
	background: rgba(255, 244, 220, .08);
	border: 1px solid rgba(255, 244, 220, .24);
	border-radius: 0;
}
.cmty-signup-form input::placeholder { color: rgba(233, 207, 159, .55); }
.cmty-signup-form input[type="submit"],
.cmty-signup-form .tnp-submit {
	width: 100%;
	padding: 12px 18px;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--night);
	background: var(--tone-on-dark);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.cmty-signup-form input[type="submit"]:hover { filter: brightness(1.06); }
.cmty-meta-sub { font-weight: var(--weight-semibold); }

@media (max-width: 760px) {
	.cmty-signup { grid-template-columns: minmax(0, 1fr); }
}

/* ── Tip box ────────────────────────────────────────────────────────── */
.cmty-tip {
	margin-bottom: clamp(32px, 4vw, 52px);
	padding: clamp(20px, 2.6vw, 32px);
	background: color-mix(in srgb, var(--tone) 12%, var(--color-surface));
	border-left: 4px solid var(--tone);
}
.cmty-tip h2 {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.cmty-tip p {
	margin: 0 0 16px;
	max-width: 60ch;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.cmty-tip-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cmty-tip .btn-primary {
	display: inline-block;
	padding: 11px 20px 10px;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--tone-ink);
	border: 1px solid var(--tone-ink);
	color: var(--color-text-on-action);
}
.cmty-tip .btn-primary:hover { filter: brightness(.92); }
.cmty-tip-alt {
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tone-ink);
}
.cmty-tip-alt:hover { text-decoration: underline; }

/* ── The archive below ──────────────────────────────────────────────── */
.cmty-wrap .archive-grid { margin-bottom: clamp(24px, 3vw, 36px); }
/* Most of the older archive has no art: an empty picture box reads as a
   broken image, so a text card is simply a text card. */
.cmty-wrap .card-img:empty { display: none; }

@media (max-width: 900px) {
	.cmty-lead { grid-template-columns: minmax(0, 1fr); }
	.cmty-desk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.cmty-town-all { margin-left: 0; }
	.cmty-row-thumb { flex-basis: 56px; width: 56px; height: 56px; }
}

/* ── The dashboard ───────────────────────────────────────────────────
   A town page answers "what is going on here" before it shows the paper's
   own coverage: weather, the team, the calendar, the notices, the market.
   Cards are independent — one with no data is not rendered at all and the
   grid closes the gap. Colours name a role (--tone / --tone-ink); the team
   card is the one place a card carries its school's own colour, passed in
   as --team from the team record. */
.dash {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	align-items: start;
	gap: clamp(14px, 1.6vw, 22px);
	margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.dash-card {
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 1.6vw, 22px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--tone);
}
.dash-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}
.dash-title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-sm);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tone-ink);
}
.dash-more {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}
.dash-more:hover { color: var(--tone-ink); }
.dash-note {
	margin: auto 0 0;
	padding-top: 12px;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.dash-empty {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.dash-empty a { color: var(--tone-ink); }
.dash-empty code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .92em;
	padding: 1px 5px;
	background: color-mix(in srgb, var(--tone) 14%, transparent);
	border-radius: 2px;
}

/* Weather ---------------------------------------------------------- */
.wx-icon { display: block; }
.wx-now {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border);
}
.wx-now-icon { color: var(--tone-ink); flex: none; }
.wx-now-temp {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: 38px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--color-text);
}
.wx-now-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--color-text-secondary);
}
.wx-now-text em {
	font-style: normal;
	font-size: var(--text-2xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.wx-days {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.wx-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 2px;
	text-align: center;
}
.wx-day.is-night { background: color-mix(in srgb, var(--tone) 8%, transparent); }
.wx-day-name {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}
.wx-day-icon { color: var(--tone-ink); }
.wx-day-temp {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	color: var(--color-text);
}
.wx-day-low {
	font-weight: var(--weight-regular);
	font-size: var(--text-sm);
	color: var(--color-text-tertiary);
}
.wx-day-precip {
	min-height: 12px;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	color: var(--color-section-community-ink);
}

/* The team --------------------------------------------------------- */
.dash-team { border-top-color: var(--team, var(--tone)); }
.dash-team .dash-title { color: var(--color-text); }
.team-top {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}
.team-logo img, .team-crest {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	object-fit: contain;
}
.team-crest {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: 26px;
	color: #fff;
	background: var(--team, var(--tone));
	border-radius: 50%;
}
.team-facts { display: flex; flex-direction: column; gap: 2px; }
.team-record {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: 30px;
	line-height: 1;
	color: var(--color-text);
}
.team-mascot {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.team-games { margin: 10px 0 0; padding: 0; list-style: none; }
.team-game {
	display: grid;
	grid-template-columns: 34px 48px minmax(0, 1fr);
	align-items: baseline;
	column-gap: 8px;
	row-gap: 1px;
	padding: 8px 0;
	border-bottom: 1px solid var(--soft-line, rgba(28,23,18,.09));
	font-family: var(--font-ui);
	font-size: var(--text-md);
}
.team-game-result { grid-row: 1 / span 2; }
.team-game-score { grid-row: 1 / span 2; }
.team-game-opp { grid-column: 3; }
.team-game-sport { grid-column: 3; }
.team-game-result {
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-sm);
	color: var(--color-text-tertiary);
}
.team-game.is-win .team-game-result { color: var(--color-feedback-success); }
.team-game.is-loss .team-game-result { color: var(--color-feedback-error); }
.team-live {
	padding: 1px 6px;
	font-size: var(--text-2xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-feedback-live);
	border-radius: 2px;
}
.team-game-score {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.team-game-opp { color: var(--color-text-secondary); min-width: 0; }
.team-game-sport {
	font-size: var(--text-2xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.team-next {
	margin: 12px 0 0;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--color-text-secondary);
}
.team-next-label {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 7px 1px;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-2xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--team, var(--tone));
}
.team-next-sport, .team-next-when {
	margin-left: 8px;
	font-size: var(--text-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

/* Calendar --------------------------------------------------------- */
.dash-events-list, .dash-notices-list, .market-list { margin: 0; padding: 0; list-style: none; }
.dash-event a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 9px 0;
	border-bottom: 1px solid var(--soft-line, rgba(28,23,18,.09));
	text-decoration: none;
}
.dash-event:last-child a { border-bottom: 0; }
.dash-event-date {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 4px 0 5px;
	background: color-mix(in srgb, var(--tone) 14%, transparent);
	border-top: 2px solid var(--tone);
}
.dash-event-mon {
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-2xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tone-ink);
}
.dash-event-day {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	line-height: 1.05;
	color: var(--color-text);
}
.dash-event-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-event-title {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.dash-event a:hover .dash-event-title { color: var(--tone-ink); }
.dash-event-meta {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-text-tertiary);
}

/* Notices ---------------------------------------------------------- */
.dash-notice a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 9px 0;
	border-bottom: 1px solid var(--soft-line, rgba(28,23,18,.09));
	text-decoration: none;
}
.dash-notice:last-child a { border-bottom: 0; }
.dash-notice-title {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.dash-notice a:hover .dash-notice-title { color: var(--tone-ink); }
.dash-notice-date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

/* The roads ---------------------------------------------------------
   One row per AZ511 event near the town: a tag for what kind of thing it
   is (closed / incident / roadwork / advisory), the road and direction,
   ADOT's own line, and how far out it is. The tag is the only colour. */
.dash-roads-list { margin: 0; padding: 0; list-style: none; }
.dash-road {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--soft-line, rgba(28,23,18,.09));
}
.dash-road:last-child { border-bottom: 0; }
.dash-road-tag {
	display: inline-block;
	margin-top: 3px;
	padding: 2px 7px 1px;
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	color: #fff;
	background: var(--road-tag, var(--color-text-tertiary));
}
.dash-road.is-closed      { --road-tag: #b3261e; }
.dash-road.is-incident    { --road-tag: #c2410c; }
.dash-road.is-roadwork    { --road-tag: #b7791f; }
.dash-road.is-restriction { --road-tag: var(--color-text-tertiary); }
.dash-road.is-event       { --road-tag: var(--color-section-community); }
/* Within 15 miles of one of our towns: the row is lifted on a tint of its
   own tag colour with a bar down the left, and the meta line names the town.
   No word for it — the colour is the word. */
.dash-road.is-near {
	margin: 3px 0;
	padding: 10px 12px 10px 11px;
	border-bottom: 0;
	border-left: 3px solid var(--road-tag);
	border-radius: 0 10px 10px 0;
	background: color-mix(in srgb, var(--road-tag) 10%, var(--color-surface));
}
.dash-road.is-near + .dash-road:not(.is-near) { border-top: 1px solid var(--soft-line, rgba(28,23,18,.09)); }
.dash-road.is-near .dash-road-meta { color: var(--road-tag); font-weight: 700; }
.dash-road-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-road-title {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
}
.dash-road-desc {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-secondary);
}
.dash-road-meta {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}

/* The market ------------------------------------------------------- */
.market-figures {
	display: flex;
	gap: clamp(16px, 3vw, 32px);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}
.market-figure { display: flex; flex-direction: column; gap: 2px; }
.market-n {
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	font-size: 26px;
	line-height: 1;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.market-l {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}
.market-list li a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--soft-line, rgba(28,23,18,.09));
	font-family: var(--font-ui);
	font-size: var(--text-md);
	text-decoration: none;
	color: var(--color-text-secondary);
}
.market-list li:last-child a { border-bottom: 0; }
.market-list li a:hover .market-addr { color: var(--tone-ink); }
.market-addr { min-width: 0; }
.market-price { font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }

@media (max-width: 480px) {
	.wx-now-temp { font-size: 32px; }
	.team-game { grid-template-columns: 32px 44px minmax(0, 1fr); }
}

/* ── The board, second pass (Sept 10 2026) ───────────────────────────
   The first version was five identical cream cards in a row: correct and
   forgettable. This one gives each tile the colour of the thing it carries —
   the sky is an actual sky, the team wears its school's colours, the calendar
   is periwinkle, notices rust, the market gold — and lays them out as a bento
   rather than a fence: two wide tiles on top, three narrow ones under.

   Restraint: the colour and the scale are the whole idea. No shadows, no
   gradients anywhere except the sky, and the type is the paper's own. */
@media (min-width: 900px) {
	.dash {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		align-items: stretch;
	}
	.dash-weather { grid-column: span 3; }
	.dash-team    { grid-column: span 3; }
	.dash-events  { grid-column: span 2; }
	.dash-notices { grid-column: span 2; }
	/* The spare tile stands in the notices slot, so it takes the notices
	   width — otherwise it falls back to a single column and the bottom row
	   goes ragged. */
	.dash-submit  { grid-column: span 2; }
	.dash-market  { grid-column: span 2; }
	.dash-roads   { grid-column: span 2; }
	/* Without the team tile the sky takes half and the three fill the rest. */
	.dash-weather:last-of-type { grid-column: span 3; }
}

.dash-card {
	border: 0;
	border-top: 4px solid var(--accent, var(--tone));
	border-radius: 14px;
	background: color-mix(in srgb, var(--accent, var(--tone)) 7%, var(--color-surface));
}
.dash-events  { --accent: var(--color-section-community); --accent-ink: var(--color-section-community-ink); }
.dash-notices { --accent: var(--color-section-civic);     --accent-ink: var(--color-section-civic-ink); }
.dash-market  { --accent: var(--color-section-utility);   --accent-ink: var(--color-section-utility-ink); }
/* The roads tile is ADOT's word, not the paper's, so it wears the utility tone
   like the market; the tag on each row carries the warning colour instead. */
.dash-roads   { --accent: var(--color-section-utility);   --accent-ink: var(--color-section-utility-ink); }
/* The newsroom is the one asking on this tile, so it wears the news tone —
   the other four are already spoken for. */
.dash-submit  { --accent: var(--color-section-news);      --accent-ink: var(--color-section-news-ink); }
.dash-card .dash-title { color: var(--accent-ink, var(--tone-ink)); }

/* ── The sky ─────────────────────────────────────────────────────── */
.dash-weather {
	--accent: var(--sky-top);
	position: relative;
	overflow: hidden;
	background: linear-gradient(170deg, var(--sky-top) 0%, var(--sky-bottom) 78%);
	color: var(--sky-ink);
	border-top-color: color-mix(in srgb, var(--sky-top) 70%, #000);
}
.dash-weather .dash-title { color: color-mix(in srgb, var(--sky-ink) 80%, transparent); }
.dash-weather .dash-more { color: color-mix(in srgb, var(--sky-ink) 62%, transparent); }
.dash-weather .dash-more:hover { color: var(--sky-ink); }
.dash-weather .dash-note {
	color: color-mix(in srgb, var(--sky-ink) 52%, transparent);
	padding-top: 14px;
}
/* A sun or moon sitting behind the temperature, cropped by the tile. */
.dash-weather::before {
	content: '';
	position: absolute;
	top: -46px;
	right: -30px;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sky-ink) 22%, transparent), transparent 68%);
	pointer-events: none;
}
.dash-weather .wx-now {
	position: relative;
	align-items: flex-end;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--sky-ink) 22%, transparent);
}
.dash-weather .wx-now-icon { color: var(--sky-ink); opacity: .92; }
.dash-weather .wx-now-temp {
	font-size: clamp(52px, 6.5vw, 76px);
	line-height: .86;
	letter-spacing: -.045em;
	color: var(--sky-ink);
}
.wx-now-temp i { font-style: normal; font-size: .42em; vertical-align: super; letter-spacing: 0; }
.dash-weather .wx-now-text { color: color-mix(in srgb, var(--sky-ink) 88%, transparent); padding-bottom: 6px; }
.dash-weather .wx-now-text em { color: color-mix(in srgb, var(--sky-ink) 58%, transparent); }

.dash-weather .wx-day { border-radius: 8px; padding: 9px 2px; }
.dash-weather .wx-day.is-night { background: color-mix(in srgb, var(--sky-ink) 12%, transparent); }
.dash-weather .wx-day-name { color: color-mix(in srgb, var(--sky-ink) 62%, transparent); }
.dash-weather .wx-day-icon { color: color-mix(in srgb, var(--sky-ink) 86%, transparent); }
.dash-weather .wx-day-temp { color: var(--sky-ink); }
.dash-weather .wx-day-low { color: color-mix(in srgb, var(--sky-ink) 55%, transparent); }
.dash-weather .wx-day-precip { color: color-mix(in srgb, var(--sky-ink) 70%, transparent); }

/* ── The team, in its own colours ────────────────────────────────── */
.dash-team {
	--accent: var(--team, var(--tone));
	background: color-mix(in srgb, var(--team, var(--tone)) 9%, var(--color-surface));
}
.dash-team .dash-title { color: var(--color-text); }
.dash-team .team-top {
	align-items: center;
	margin: -4px -4px 0;
	padding: 10px 12px;
	background: var(--team, var(--tone));
	border-radius: 10px;
	border-bottom: 0;
	color: var(--team-ink, #fff);
}
.dash-team .team-record { color: var(--team-ink, #fff); font-size: clamp(26px, 3vw, 34px); white-space: nowrap; }
.dash-team .team-mascot { color: color-mix(in srgb, var(--team-ink, #fff) 78%, transparent); }
.dash-team .team-crest { background: color-mix(in srgb, var(--team-ink, #fff) 22%, transparent); color: var(--team-ink, #fff); }
.dash-team .team-logo img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.dash-team .team-next-label { background: var(--team, var(--tone)); color: var(--team-ink, #fff); }

/* ── Calendar chips get a little more presence ───────────────────── */
.dash-event-date {
	border-radius: 8px;
	border-top: 0;
	background: var(--accent, var(--tone));
	color: var(--color-text-inverse);
	width: 44px;
}
.dash-event-mon { color: color-mix(in srgb, #fff 86%, transparent); }
.dash-event-day { color: #fff; font-size: var(--text-xl); }
.dash-event a:hover .dash-event-title { color: var(--accent-ink, var(--tone-ink)); }

/* ── The market's numbers do the talking ─────────────────────────── */
.market-n { font-size: clamp(26px, 3vw, 34px); color: var(--accent-ink, var(--color-text)); }

/* The town's scoreboard strip sits under the board, tighter than the
   section-page version. */
.sb--town { margin-top: 4px; }
.sb--town .sb-bar { border-bottom-color: var(--tone); }
.sb--town .sb-title { font-size: var(--text-lg); }

@media (prefers-reduced-motion: no-preference) {
	.dash-card { transition: transform var(--dur-base) var(--ease-standard); }
	.dash-card:hover { transform: translateY(-2px); }
}

/* ── The spare tile ───────────────────────────────────────────────────
   A town with no public notices this week has a tile going begging. It
   asks for the two things only a reader can supply, set as a short list
   of destinations rather than a wall of buttons — the fuller pitch still
   runs at the foot of the page, and the dashboard is a board, not a
   poster. */
.dash-submit-lede {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-secondary);
}
.dash-submit-list { list-style: none; margin: 0; padding: 0; }
.dash-submit-list li + li { border-top: 1px solid var(--color-border); }
.dash-submit-list a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
}
.dash-submit-list li:first-child a { padding-top: 0; }
.dash-submit-list li:last-child a { padding-bottom: 0; }
.dash-submit-title {
	display: block;
	font-family: var(--font-accent);
	font-weight: var(--flag-weight, 600);
	font-size: var(--text-sm);
	letter-spacing: .04em;
	color: var(--tone-ink);
}
.dash-submit-list a:hover .dash-submit-title { text-decoration: underline; }
.dash-submit-title::after { content: ' \2192'; }
.dash-submit-note {
	display: block;
	margin-top: 2px;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--color-text-tertiary);
}

/* ── Event artwork in the "What's on" tile ──
   The poster component itself lives in pages/events.css, which town pages
   deliberately do not load (60 KB of calendar UI they have no use for), so
   the handful of rules it needs is repeated here. Keep the two in step:
   the frame takes the artwork's proportions, the image is contained, and a
   blurred copy of it fills whatever is left. */
.dash-event .pdt-poster {
	position: relative;
	display: block;
	overflow: hidden;
	background: #24150C;
	isolation: isolate;
	flex: none;
	width: 46px;
	aspect-ratio: 2 / 3;
}
.dash-event .pdt-poster.is-landscape { aspect-ratio: 3 / 2; }
.dash-event .pdt-poster.is-square    { aspect-ratio: 1 / 1; }
.dash-event .pdt-poster-wash {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center;
	filter: blur(8px) saturate(1.3) brightness(0.6);
	z-index: 0;
}
.dash-event .pdt-poster-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* The date block is the anchor; with artwork beside it the two share a row. */
.dash-event.has-poster .dash-event-date { width: 34px; }

/* ── Local pages (inc/local-seo.php): intro, facts box, links strip, weather page, beats ── */
.cmty-intro { max-width: 70ch; margin: 10px 0 0; font-size: var(--text-md, 1.05rem); line-height: 1.55; }
.cmty-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 6px; }
.cmty-facts div { margin: 0; }
.cmty-facts dt { font-family: var(--font-accent); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.cmty-facts dd { margin: 2px 0 0; font-weight: var(--weight-semibold, 600); }
.cmty-about { margin-top: clamp(32px, 4vw, 52px); padding-top: 4px; }
.cmty-about .cmty-intro { margin: 0 0 16px; color: var(--color-text-muted, inherit); }
.cmty-about .cmty-facts { margin: 0; }
.cmty-links { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 clamp(20px, 3vw, 32px); font-size: var(--text-sm); }
.cmty-links-label { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); opacity: .7; margin-right: 4px; }
.cmty-links a { padding: 4px 11px; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; color: inherit; }
.cmty-links a:hover { border-color: currentColor; }
.local-head { margin-bottom: 14px; }
.local-head .cmty-meta { margin-top: 8px; opacity: .8; }
.local-rows { margin-bottom: 24px; }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 10px 0 20px; }
.wx-grid--one { grid-template-columns: minmax(0, 720px); }
.wx-page-card .wx-days { flex-wrap: wrap; }
.wx-periods { list-style: none; margin: 8px 0 20px; padding: 0; max-width: 720px; }
.wx-periods li { display: grid; grid-template-columns: 8.5em 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.wx-periods .n { font-weight: var(--weight-semibold, 600); }
.local-events { max-width: 820px; }
.cmty-tip-alt-line { margin: 18px 0 30px; }