/* ¿Y Qué Plan Hoy? — the route placard drawn with a fine line: the bus placard's
   colours and structure, hairline frames, a soft shadow and a calm type scale. */

:root {
  /* A light ground with a breath of the logo's violet; ink does the lettering and the frames. */
  --ground: #FBF9FF;
  --ground-2: #F1ECFA;
  --ground-soft: #FDFBFF;
  --surface: #FFFFFF;
  --ad-border: #C8BADD;
  --rule: #D6CEE6;
  --ink: #16111F;
  --text: #16111F;
  --text-dim: #4F4563;
  --paper: #FFFFFF;
  --paper-2: #F4F0FB;
  --yellow: #FFD23F;
  --fuchsia: #FF2E88;
  --fuchsia-solid: #D6106F;
  --cyan: #00C2D1;
  /* The logo's violet as a light enamel, so bands keep ink lettering like the other three. */
  --lilac: #C4B0FF;
  /* Each enamel's light tint, for cards that carry the colour on their frame, not their fill. */
  --fuchsia-tint: #FFEAF3;
  --cyan-tint: #E2F8FA;
  --yellow-tint: #FFF7DB;
  --lilac-tint: #F1ECFF;
  /* Frames for tinted cards: each enamel one step deeper, so the edge holds against the light ground. */
  --fuchsia-frame: #F0197A;
  --cyan-frame: #009AA6;
  --yellow-frame: #D9A400;
  --lilac-frame: #8F72F0;
  --violet: #5B21B6;
  --danger: #B3123F;

  /* Righteous, rounded like the logo, paints the placard's words, the big numerals
     and city names; Plus Jakarta Sans carries everything people read and press. */
  --display: "Righteous", sans-serif;
  --heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;

  --radius-board: 14px;
  --radius-band: 10px;
  --frame: 1px solid var(--line);
  /* Hairlines and soft elevation. */
  --line: #E6E0F0;
  --line-strong: #CFC5E0;
  --shadow-1: 0 1px 2px rgba(22, 17, 31, 0.05), 0 2px 8px rgba(22, 17, 31, 0.04);
  --shadow-2: 0 2px 4px rgba(22, 17, 31, 0.06), 0 10px 28px rgba(22, 17, 31, 0.08);
  --gutter: 16px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316111F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- Base ---------- */

html { scrollbar-color: #A79BBF var(--ground-2); }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  --mdb-body-font-family: var(--body);
  --mdb-body-bg: var(--ground);
  --mdb-body-color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }
input, select, textarea { caret-color: var(--fuchsia); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 28px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: var(--radius-band);
  background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.material-symbols-rounded { font-size: 1.25em; line-height: 1; vertical-align: -0.2em; }
@media (max-width: 639px) { .hide-sm { display: none !important; } }

.section-title {
  margin: 0 0 16px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
.section-title-sm { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
.section-lead { max-width: 62ch; margin: -6px 0 20px; color: var(--text-dim); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.section-head .section-title { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Buttons: painted plates and outlines ---------- */

.btn-plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px; box-shadow: var(--shadow-1);
  font: 600 0.98rem/1.1 var(--heading); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-plate:hover { box-shadow: var(--shadow-2); }
.btn-plate:active { transform: translateY(1px); }
.btn-plate-fuchsia { background: var(--fuchsia-solid); color: #FFFFFF; }
.btn-plate-fuchsia:hover { background: #BF0B62; color: #FFFFFF; }
/* No black buttons: the strong action is yellow with ink lettering; on a
   placard, where yellow would vanish or clash, it turns white. */
.btn-plate-ink { background: var(--yellow); color: var(--ink); }
.btn-plate-ink:hover { background: #FFDD66; color: var(--ink); }
.placard .btn-plate-ink { background: var(--surface); color: var(--ink); }
.placard .btn-plate-ink:hover { background: var(--ground-2); color: var(--ink); }
.btn-plate-yellow { background: var(--yellow); color: var(--ink); }
.btn-plate-yellow:hover { background: #FFDD66; color: var(--ink); }
.btn-plate.btn-block { width: 100%; }

.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: 600 0.9rem/1.1 var(--heading); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.btn-line:hover { background: var(--ground-2); color: var(--ink); border-color: var(--line-strong); }
.btn-line-ink { color: var(--ink); }
.btn-line-ink:hover { background: var(--ground-2); color: var(--ink); border-color: var(--line-strong); }
.btn-line-sm { min-height: 44px; padding: 0 12px; font-size: 0.9rem; }
.sheet .btn-line, .my-event .btn-line { color: var(--ink); }
.sheet .btn-line:hover, .my-event .btn-line:hover { background: var(--ground-2); color: var(--ink); border-color: var(--line-strong); }
.action-outline-danger { color: var(--danger) !important; }

/* ---------- Catalog strip: what the site is, live, and the ecosystem it belongs to ---------- */

.catalog-strip { display: none; background: var(--ink); color: #E4DDF2; font-size: 0.8rem; }
@media (min-width: 768px) { .catalog-strip { display: block; } }
.catalog-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 34px; }
.catalog-claim { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.catalog-claim-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 1px 8px;
  border-radius: 4px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #13A35A; box-shadow: 0 0 0 2px var(--ink); }
.catalog-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.catalog-links a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 8px; border-radius: 8px;
  color: #E4DDF2; font-weight: 600; text-decoration: none;
}
.catalog-links a:hover { color: var(--yellow); }
.catalog-links .material-symbols-rounded { font-size: 16px; color: var(--lilac); }
.catalog-sep { width: 1px; height: 14px; margin: 0 6px; background: #4A3F5E; }
.catalog-strip :focus-visible { outline-color: var(--yellow); }

/* ---------- Header: white bar with the bus livery stripe ---------- */

.topbar { position: relative; background: var(--surface); }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow) 0 33.3%, var(--fuchsia) 33.3% 66.6%, var(--cyan) 66.6% 100%);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding-bottom: 3px; }
.topbar-logo { display: inline-flex; flex-shrink: 0; }
.topbar-logo img { width: auto; height: 40px; display: block; }
.topbar-nav { display: flex; align-items: center; gap: 4px; }
.topbar-link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--text); font-family: var(--heading); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.topbar-link:hover { background: var(--ground-2); color: var(--violet); }
.topbar-cta { min-height: 44px; padding: 0 14px; margin-left: 6px; }
/* White lettering on the header's publish button; the fuchsia goes one shade
   deeper there so white keeps a 4.5:1 contrast. */
.btn-plate.topbar-cta { background: #D6106F; color: #FFFFFF; }
.btn-plate.topbar-cta:hover { background: #BF0B62; color: #FFFFFF; }
@media (max-width: 479px) {
  .topbar-cta { padding: 0 12px; font-size: 0.9rem; }
  .topbar-cta .material-symbols-rounded { display: none; }
  .topbar-link { padding: 0 8px; }
}

/* ---------- Account: sign in, sign up and the signed-in menu ---------- */

.account-signup { min-height: 44px; padding: 0 14px; margin-left: 4px; font-size: 0.9rem; }
/* Sign-in sits next to the fuchsia publish button: an outline, so the header
   keeps one strong action. */
.btn-plate.account-signup { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn-plate.account-signup:hover { background: var(--ground-2); color: var(--ink); }
.account-menu { position: relative; margin-left: 4px; }
.account-button {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; padding: 0 4px;
  border-radius: var(--radius-band); list-style: none; cursor: pointer; color: var(--ink);
}
.account-button::-webkit-details-marker { display: none; }
.account-button:hover { background: var(--ground-2); }
.account-initial {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--violet); color: #FFFFFF; font-weight: 700;
}
.account-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(280px, calc(100vw - 32px));
  padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-band); box-shadow: var(--shadow-2);
}
.account-who { display: flex; flex-direction: column; margin: 0 0 8px; padding: 0 8px 10px; border-bottom: 1px solid var(--line); }
.account-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.account-email { font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.account-links { list-style: none; margin: 0; padding: 0; }
.account-links a, .account-logout button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: var(--radius-band); background: transparent;
  color: var(--text); font: 700 0.95rem var(--body); text-decoration: none; text-align: left; cursor: pointer;
}
.account-links a:hover, .account-logout button:hover { background: var(--ground-2); color: var(--violet); }
.account-logout { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 639px) {
  .account-login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .account-signup { padding: 0 10px; font-size: 0.9rem; }
}

/* ---------- Auth pages (django-allauth) ---------- */

.auth-page { padding-top: 32px; padding-bottom: 48px; max-width: 480px; }
.auth-logo { display: block; width: auto; height: 56px; margin: 0 auto 12px; }
.auth-card h1 { margin: 0 0 8px; text-align: center; font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.auth-card h2 { margin: 20px 0 8px; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.auth-card p { color: var(--text); }
.auth-card a:not(.btn-plate) { color: var(--violet); font-weight: 700; }
.auth-lead { text-align: center; color: var(--text-dim) !important; }
.auth-google { width: 100%; background: var(--paper); color: var(--ink); }
.auth-google:hover { background: var(--ground-2); color: var(--ink); }
.auth-google svg { flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-dim); font-size: 0.9rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 2px; background: var(--rule); }
.auth-card .field { margin-bottom: 14px; }
.auth-card .field input { width: 100%; }
.auth-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; }
.auth-check input { width: 20px; height: 20px; accent-color: var(--violet); }
.auth-errors { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--danger); border-radius: var(--radius-band, 10px); background: #FDEBF0; color: var(--danger); font-weight: 700; list-style: none; }
.field-error { margin: 6px 0 0; color: var(--danger); font-weight: 700; font-size: 0.9rem; }
.field-help { margin: 6px 0 0; color: var(--text-dim); font-size: 0.8rem; }
.field-help ul { margin: 0; padding-left: 1.1em; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.auth-switch { margin: 20px 0 0; text-align: center; }
.auth-messages { list-style: none; margin: 0 0 14px; padding: 0; }
.auth-messages li { padding: 10px 14px; border: 1px solid var(--lilac); border-radius: var(--radius-band, 10px); background: var(--lilac-tint); color: var(--ink); }
.auth-card table { width: 100%; }

/* ---------- Placard: the painted sign that names the city and the day ---------- */

.placard-zone { padding: 28px 0 8px; }
.placard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
}

.placard-title { grid-column: 1; margin: 0; display: flex; flex-direction: column; font-weight: 400; }
.placard-kicker, .placard-where { text-transform: uppercase; line-height: 1; }
.placard-day { text-transform: uppercase; line-height: 0.92; letter-spacing: 0.005em; margin: 2px 0 4px; }
.placard-day-long { line-height: 0.95; overflow-wrap: anywhere; }
.placard-title-text { letter-spacing: -0.02em; line-height: 1.15; max-width: 26ch; overflow-wrap: anywhere; }
.placard-count {
  grid-column: 2; grid-row: 1; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0;
  font-weight: 700; font-size: 0.9rem;
}
.route-num {
  display: inline-grid; place-items: center;
  min-width: 58px; height: 58px; padding: 0 8px; border-radius: 999px;
  background: var(--ink); color: var(--yellow);
  font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.placard-intro { grid-column: 1 / -1; max-width: 70ch; margin: 6px 0 0; font-size: 1rem; font-weight: 500; }
.placard .actions { grid-column: 1 / -1; margin-top: 12px; }
.post-meta { grid-column: 1 / -1; margin: 6px 0 0; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 559px) {
  .placard { gap: 8px 12px; }
  .placard-intro-home { display: none; }
  .placard-count { font-size: 0.8rem; }
  .route-num { min-width: 48px; height: 48px; font-size: 1.35rem; }
  .placard-zone { padding-top: 16px; }
  .agenda-head .section-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

.placard-search {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end;
  margin-top: 16px; padding-top: 18px; border-top: 1px dashed rgba(22, 17, 31, 0.18);
}
.placard-search .field-grow { grid-column: 1 / -1; }
@media (max-width: 719px) { .placard-search { grid-template-columns: 1fr auto; margin-top: 12px; padding-top: 14px; } }
@media (min-width: 720px) { .placard-search { grid-template-columns: 1fr 210px auto; } .placard-search .field-grow { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.field input, .field select {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-band);
  background: var(--paper); color: var(--ink); font: 500 1rem var(--body);
}
.field select { appearance: none; padding-right: 40px; background: var(--paper) var(--chevron) no-repeat right 14px center / 14px; }
.field input::placeholder { color: var(--text-dim); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .placard :focus-visible { outline-color: var(--ink); }
.placard-search .btn-plate { min-height: 46px; }

/* ---------- Category tags ---------- */

.tone-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.tone-tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tone-tag .material-symbols-rounded {
  display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%;
  background: var(--tone, var(--yellow)); color: var(--ink); font-size: 17px;
}
.tone-tag:hover { border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-1); }
.tone-tag.is-active { background: var(--tone, var(--yellow)); color: var(--ink); border-color: transparent; }
.tone-tag.is-active .material-symbols-rounded { background: var(--surface); color: var(--ink); }
.tone-tag-count { font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; background: var(--ground-2); color: var(--text-dim); font-size: 0.8rem; }
.tone-tag.is-active .tone-tag-count { background: var(--surface); color: var(--ink); }
.tone-fuchsia { --tone: var(--fuchsia-solid); }
.tone-cyan { --tone: var(--cyan); }
.tone-yellow { --tone: var(--yellow); }
.tone-lilac { --tone: var(--lilac); }
.tone-plain { --tone: var(--ground-2); }
.tone-tags-row {
  flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 18px; padding: 2px var(--gutter) 8px;
  scroll-padding-inline: var(--gutter); scrollbar-width: thin;
}
.tone-tags-row .tone-tag { flex: 0 0 auto; }

/* ---------- Day rail: the one moving part ---------- */

.agenda { padding: 28px 0 56px; }
.placard-zone + .agenda { padding-top: 16px; }
.day-rail {
  display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1) 20px; padding: 4px var(--gutter) 8px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: thin;
}
.day {
  flex: 0 0 auto; scroll-snap-align: start;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-width: 64px; min-height: 72px; padding: 6px 8px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.day:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.day-name { font-weight: 700; font-size: 0.8rem; }
.day-num { font-family: var(--display); font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.day-num-word { font-family: var(--body); font-weight: 700; font-size: 0.8rem; line-height: 1.15; text-align: center; max-width: 7ch; }
.day-count {
  min-width: 26px; padding: 0 6px; border-radius: 999px;
  background: var(--lilac-tint); color: var(--violet); font-weight: 700; font-size: 0.72rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.day.is-quiet { color: var(--text-dim); }
.day.is-quiet .day-count { background: var(--rule); color: var(--text-dim); }
.day-all { min-width: 88px; }

.agenda-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.agenda-head .section-title { margin: 0 auto 0 0; }
.day-picker { display: flex; align-items: center; gap: 8px; }
.day-picker label { font-weight: 700; color: var(--text-dim); font-size: 0.9rem; }
.day-picker input {
  min-height: 44px; padding: 6px 10px; border-radius: var(--radius-band);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 0.95rem var(--body);
  color-scheme: light;
}

/* ---------- Bands: one plan, one destination ---------- */

.bands { display: grid; }
@media (min-width: 1000px) { .bands { grid-template-columns: 1fr 1fr; } }
.band {
  --band: var(--rule);
  --band-tint: var(--paper);
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 96px; padding: 12px 12px 12px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-1);
  text-decoration: none; transition: box-shadow 0.15s, transform 0.15s;
}
.band:hover { color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.band-fuchsia { --band: var(--fuchsia-solid); --band-frame: var(--fuchsia-frame); --band-tint: var(--fuchsia-tint); --band-ink: #B80D5A; }
.band-fuchsia .band-cat { color: #FFFFFF; }
.band-cyan { --band: var(--cyan); --band-frame: var(--cyan-frame); --band-tint: var(--cyan-tint); --band-ink: #00727B; }
.band-yellow { --band: var(--yellow); --band-frame: var(--yellow-frame); --band-tint: var(--yellow-tint); --band-ink: #7A5A00; }
.band-lilac { --band: var(--lilac); --band-frame: var(--lilac-frame); --band-tint: var(--lilac-tint); --band-ink: #5B3FD0; }
.band-paper { --band: #A79BBF; --band-frame: #8A7DA3; --band-tint: var(--paper); --band-ink: #5E527A; }

.band-stop {
  display: grid; place-content: center; justify-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--band); color: var(--ink);
  border: 0;
  text-align: center; line-height: 1; font-variant-numeric: tabular-nums;
}
.band-stop-label { font-weight: 700; font-size: 0.72rem; text-transform: lowercase; color: var(--ink); }
.band-stop-main { font-family: var(--display); font-size: 1.35rem; }
.band-stop-sub { font-weight: 700; font-size: 0.72rem; color: var(--ink); margin-top: 2px; }

.band-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.band-title {
  font-family: var(--heading); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(0.98rem, 2vw, 1.06rem); line-height: 1.32; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.band-meta { font-weight: 500; font-size: 0.9rem; line-height: 1.35; color: var(--text-dim); }
.band-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.band-cat {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 8px 1px 6px;
  border-radius: 999px; background: var(--band); color: var(--ink);
  border: 0;
  font-weight: 700; font-size: 0.72rem;
}
.band-cat .material-symbols-rounded { font-size: 16px; }
.band-thumb {
  display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden;
  border: 0; border-radius: 10px; background: var(--band-tint, var(--ground-2));
}
.band-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bands-more { margin: 18px 0 0; }

.stamp {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface); color: var(--text);
}
.stamp-free { background: #E8F7EE; color: #11663A; border-color: #BFE6CD; }
.stamp-past { background: var(--ground-2); color: var(--text-dim); border-color: var(--line-strong); }
.stamp-live { background: var(--paper); color: var(--ink); }
.band .stamp-free { background: #E8F7EE; color: #11663A; border-color: #BFE6CD; }

/* ---------- Empty, notices ---------- */

.empty-plate {
  padding: 28px 24px; border-radius: var(--radius-board); border: var(--frame);
  background: var(--paper-2); color: var(--ink);
}
.empty-plate p { margin: 0 0 14px; max-width: 60ch; }
.empty-title { font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.1rem; line-height: 1.2; }
.suggestions { margin: 0 0 18px; }
.suggestions-title { margin: 16px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.suggestions .tone-tags { margin-top: 8px; }
.notice {
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-band);
  background: var(--yellow-tint); color: var(--ink); font-weight: 600; border: 1px solid #F2DE9C;
}
.notice a { font-weight: 700; }
.flash { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-band); background: var(--cyan); color: var(--ink); font-weight: 700; }

/* ---------- Cities ---------- */

.cities { padding: 16px 0 44px; }
.city-plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.city-plate {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  min-height: 72px; padding: 12px 16px; border-radius: var(--radius-band);
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background-color 0.15s, color 0.15s;
}
.city-plate-name { font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; color: var(--ink); }
.city-plate-count { grid-column: 1; font-weight: 700; color: var(--text-dim); font-size: 0.9rem; }
.city-plate .material-symbols-rounded { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; }
.city-plate:hover { background: var(--yellow-tint); box-shadow: var(--shadow-2); color: var(--ink); }
.city-plate:hover .city-plate-name, .city-plate:hover .city-plate-count { color: var(--ink); }

/* ---------- Guides (blog) ---------- */

.guides { padding: 8px 0 48px; }
.guides-index { padding-top: 24px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.guide {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 20px; border-radius: var(--radius-band); border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background-color 0.15s;
}
.guide:hover { background: var(--surface); box-shadow: var(--shadow-2); color: var(--ink); }
.guide-cover { width: calc(100% + 40px); margin: -20px -20px 4px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px 8px 0 0; }
.guide-title { font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.1rem; line-height: 1.3; }
.guide-excerpt { color: #3D3450; }
.guide-meta { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 0.8rem; color: var(--violet); }

.post-layout { padding: 28px var(--gutter) 24px; }
.sponsor-notice { max-width: 68ch; margin: 0 auto 24px; padding: 12px 16px; border-radius: var(--radius-band); border: 1px dashed var(--line-strong); background: var(--surface); color: var(--text); }
.sponsor-notice .stamp { margin-right: 6px; }
.post-layout .notice { max-width: 68ch; margin: 0 auto 24px; }
.prose { max-width: 68ch; margin: 0 auto; font-size: 1.1rem; line-height: 1.7; color: var(--text); }
.prose h2 {
  margin: 2em 0 0.5em; font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.7rem; line-height: 1.2; color: var(--ink);
}
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--fuchsia); }
.prose a { color: var(--violet); font-weight: 700; text-decoration-thickness: 2px; }
.prose a:hover { color: var(--ink); }

/* ---------- Publish band ---------- */

.publish-band { margin-top: 24px; background: var(--fuchsia-solid); color: #FFFFFF; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.publish-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-top: 30px; padding-bottom: 30px; }
.publish-band-title { margin: 0 0 8px; font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.15; }
.publish-band p { margin: 0; font-weight: 600; font-size: 1rem; max-width: 52ch; color: #FFFFFF; }
.publish-band :focus-visible { outline-color: var(--ink); }
@media (max-width: 639px) {
  .publish-band-inner { flex-direction: column; gap: 20px; text-align: center; }
  .publish-band p { margin-inline: auto; }
  .publish-band .actions { justify-content: center; }
}

/* ---------- Footer ---------- */

/* The footer is its own white section under the coloured stripe, so it reads
   as the end of the page; the footer ad stays above it, on the page ground,
   instead of sharing the footer's background and blurring into it. */
.footer { background: var(--surface); color: var(--text-dim); padding: 48px 0 24px; box-shadow: 0 -1px 0 var(--rule); }
.footer-ad { margin-top: 40px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aents-lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.aents-lockup img { border-radius: 10px; }
.aents-lockup-text { display: flex; flex-direction: column; line-height: 1.1; }
.aents-wordmark { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.015em; }
.aents-tagline { font-weight: 600; font-size: 0.8rem; color: var(--violet); }
.aents-lockup:hover .aents-wordmark { color: var(--violet); }
.footer-origin {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 12px; max-width: 34ch;
  border-top: 2px solid; border-image: linear-gradient(90deg, var(--violet) 0 50%, #13A35A 50% 100%) 1;
  font-size: 0.9rem; color: var(--text-dim);
}
.footer-origin-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #13A35A; }
.footer-about { margin: 0; max-width: 38ch; font-size: 0.9rem; color: var(--text-dim); }
.footer-whatsapp { gap: 8px; background: var(--surface); }
.footer-links .material-symbols-rounded { font-size: 15px; margin-left: 4px; color: var(--text-dim); }
.footer-heading { margin: 0; font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.0625rem; color: var(--violet); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-col summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; list-style: none; cursor: pointer; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary .material-symbols-rounded { transition: transform 0.15s; color: var(--text-dim); }
.footer-col[open] summary .material-symbols-rounded { transform: rotate(180deg); }
@media (max-width: 767px) {
  .footer-grid { gap: 0; }
  .footer-brand { margin-bottom: 20px; }
  .footer-col { border-bottom: 1px solid var(--line); }
  .footer-col .footer-links { padding-bottom: 12px; }
}
@media (min-width: 768px) {
  .footer-col summary { min-height: 0; cursor: default; margin-bottom: 10px; }
  .footer-col summary .material-symbols-rounded { display: none; }
}
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--yellow) 0 33.3%, var(--fuchsia) 33.3% 66.6%, var(--cyan) 66.6% 100%);
}
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--violet); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; }
.footer-base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; }
.footer-base a:hover { color: var(--violet); }

/* ---------- Crumbs ---------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 14px; font-size: 0.9rem; color: var(--text-dim); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text); font-weight: 600; }
.crumbs a:hover { color: var(--violet); }
.crumbs .material-symbols-rounded { font-size: 18px; color: var(--text-dim); }

/* ---------- Event page ---------- */

.event-page-zone { background: var(--ground-soft); }
.event-page { padding-top: 24px; padding-bottom: 32px; }
/* On a phone the sheet is one column and its two wrappers dissolve into it, so
   the poster still follows the title and the map comes after the description.
   From 900px the aside (poster, map, publish) holds the right column and stays
   in view; before, that column carried only the poster and stood empty for the
   many events that have none. */
.event-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.event-main, .event-aside { display: contents; }
.event-placard { order: 1; }
.event-facts { order: 2; }
.event-poster { order: 3; }
.event-actions { order: 4; }
.event-dates { order: 5; }
.event-description { order: 5; }
.event-place { order: 6; }
.event-source { order: 7; }
.event-publish { order: 8; }
@media (min-width: 900px) {
  .event-sheet {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "actions actions" "main aside";
    gap: 20px 32px; align-items: start;
  }
  .event-placard { grid-area: head; }
  .event-actions { grid-area: actions; flex-wrap: nowrap; }
  .event-actions a { white-space: nowrap; }
  .event-main { grid-area: main; display: grid; gap: 18px; }
  .event-aside { grid-area: aside; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
}
.event-placard {
  padding: 18px 20px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-board);
  box-shadow: var(--shadow-1);
}
.event-placard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.event-title {
  margin: 0; font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em;
  max-width: 42ch; font-size: clamp(1.35rem, 2.8vw, 1.85rem); line-height: 1.22; overflow-wrap: anywhere;
}
.notice .stamp { margin-right: 6px; }
.event-summary { margin: 6px 0 0; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--text-dim); }
.event-countdown { display: inline-block; margin: 12px 0 0; padding: 3px 12px; border-radius: 999px; background: var(--violet); color: #FFFFFF; font-weight: 700; font-size: 0.9rem; }
.event-poster { margin: 0; }
.event-poster img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--ground-2); border: var(--frame); border-radius: var(--radius-board); }

.event-facts {
  margin: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-band);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.event-facts .fact {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.event-facts .fact:last-child { border-bottom: 0; }
.fact dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-dim); }
.fact dt .material-symbols-rounded { color: var(--violet); }
.fact dd { margin: 0; font-weight: 600; font-size: 1rem; color: var(--text); }
.fact-sub { display: block; font-weight: 500; font-size: 0.9rem; color: var(--text-dim); }
@media (max-width: 479px) { .event-facts .fact { grid-template-columns: 1fr; gap: 4px; } }
.fact-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.fact-link .material-symbols-rounded { font-size: 20px; }
.event-dates ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.event-dates a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  color: var(--text); font-weight: 600; text-decoration: none;
}
.event-dates a:hover { border-color: var(--violet); color: var(--violet); }
.event-description blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--line-strong); }
.event-description-more { margin: 10px 0 0; }
.event-description-more a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  color: var(--violet); font-weight: 700; text-underline-offset: 3px;
}
.event-description-more .material-symbols-rounded { font-size: 18px; }

.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event-actions .btn-plate { color: #FFFFFF; font-weight: 700; }
.event-actions .btn-plate:hover { color: #FFFFFF; }
.event-actions .btn-line { background: var(--surface); box-shadow: none; }
.event-description { color: var(--text); font-size: 1rem; line-height: 1.72; }
.event-description .section-title { margin-bottom: 10px; }
.event-description p { max-width: 62ch; margin: 0; overflow-wrap: anywhere; }
.event-place { border-radius: var(--radius-board); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.event-map { position: relative; height: clamp(220px, 36vw, 320px); display: grid; place-items: center; background: var(--ground-2); }
.event-map-placeholder {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; max-width: calc(100% - 32px);
  border-radius: var(--radius-band); background: var(--surface); border: 1px solid var(--line); font-weight: 700;
}
.event-map-placeholder .material-symbols-rounded { color: var(--fuchsia); }
.event-map.maplibregl-map { display: block; font-family: var(--body); }
.event-map.maplibregl-map:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.event-map .maplibregl-ctrl-top-right { top: 10px; right: 10px; }
.event-map .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid rgba(22, 17, 31, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 20px rgba(22, 17, 31, 0.14);
}
.event-map .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.event-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.event-map .maplibregl-ctrl-group button:hover { background-color: var(--ground-soft); }
.event-map .maplibregl-ctrl-group button:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.event-map .maplibregl-ctrl-attrib {
  padding: 2px 7px;
  border-radius: 8px 0 0 0;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-dim);
  font-size: 0.72rem;
  backdrop-filter: blur(8px);
}
.event-map .event-map-label .maplibregl-popup-content {
  max-width: 220px;
  padding: 8px 12px;
  border: 1px solid rgba(22, 17, 31, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font: 700 0.82rem/1.3 var(--body);
  text-align: center;
  box-shadow: 0 8px 24px rgba(22, 17, 31, 0.14);
  backdrop-filter: blur(8px);
}
.event-map .event-map-label .maplibregl-popup-tip { border-top-color: rgba(255, 255, 255, 0.96); }
.event-place-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.event-place-info .section-title { margin-bottom: 4px; }
.event-place-name { margin: 0; font-weight: 700; }
.event-place-address { margin: 0; color: var(--text-dim); }
.event-source {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.55;
  max-width: 62ch;
}
.event-page .event-placard,
.event-page .event-facts,
.event-page .event-place,
.event-page .ad-plate {
  border-radius: var(--radius-board);
  box-shadow: var(--shadow-1);
}
.related {
  margin-top: 0;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.related .section-head { margin-bottom: 20px; }
.related .band { height: 100%; }
.related .band-title { -webkit-line-clamp: 2; }
@media (min-width: 768px) {
  .related { padding-top: 40px; padding-bottom: 56px; }
}
@media (min-width: 1000px) {
  .related .bands > .band:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.event-publish {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 16px 18px; border-radius: var(--radius-band);
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 700; font-size: 1rem;
}
.event-map-pin { display: block; width: 48px; height: 48px; }
.event-map-pin-shape {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #FFFFFF;
  border-radius: 50% 50% 50% 14px;
  background: var(--violet);
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(22, 17, 31, 0.3);
  transform: rotate(-45deg);
}
.event-map-pin .material-symbols-rounded {
  font-size: 24px;
  transform: rotate(45deg);
}
@media (max-width: 639px) {
  .event-actions { display: grid; grid-template-columns: 1fr; }
  .event-actions a { width: 100%; white-space: normal; }
}

/* ---------- FAQ ---------- */

.later-holidays { margin-top: 44px; }
.later-holidays .section-title-sm { margin: 28px 0 12px; }
.faq { margin-top: 44px; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--violet); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 16px; color: var(--text-dim); max-width: 68ch; }

/* ---------- Organizers ---------- */

.organizers-placard .placard-day { font-size: clamp(2.6rem, 9vw, 4rem); }
.steps-zone { padding: 16px 0 24px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { padding: 20px; border-radius: var(--radius-band); background: var(--surface); border: 1px solid var(--line); }
.step .route-num { min-width: 44px; height: 44px; font-family: var(--heading); font-weight: 700; font-size: 1.1rem; }
.step h3 { margin: 14px 0 6px; font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.35rem; line-height: 1.25; color: var(--ink); }
.step p { margin: 0; color: var(--text-dim); }
.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gets li { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-band); background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.gets .material-symbols-rounded { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--lilac-tint); color: var(--violet); font-size: 22px; }
.gets h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.gets p { margin: 0; color: #3D3450; }
.faq-zone { padding-top: 0; }

/* ---------- Forms and the signed-in area (pages that keep MDB for fields) ---------- */

.form-page { padding-top: 32px; padding-bottom: 48px; }
.form-page-narrow { max-width: 500px; }
.form-page-mid { max-width: 760px; }
.publish-intro { max-width: 62ch; margin-bottom: 20px; }
.publish-intro p { color: var(--text-dim); font-size: 1.0625rem; }
.sheet {
  padding: 24px; border-radius: var(--radius-board); border: var(--frame);
  background: var(--paper); color: var(--ink);
  --mdb-body-color: var(--ink); --mdb-heading-color: var(--ink); --mdb-body-bg: var(--paper);
  --mdb-surface-bg: var(--paper); --mdb-surface-color: var(--ink);
}
.sheet .form-control, .sheet .form-select { background-color: var(--paper-2); color: var(--ink); color-scheme: light; }
.sheet .form-text, .sheet .helptext { color: var(--text-dim); }
.sheet input[type="file"] { max-width: 100%; }
.sheet { border-color: var(--ink); box-shadow: var(--shadow-1); }
/* ---------- Map point picker: tap the map, drag the pin, as on Geo Propiedades ---------- */

.map-point { display: grid; gap: 10px; }
.map-point-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.map-point-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 0.9rem/1 var(--body); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.map-point-btn .material-symbols-rounded { font-size: 20px; color: var(--violet); }
.map-point-btn:hover { background: var(--ground-2); border-color: #B5A7CF; }
.map-point-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.map-point-btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.map-point-btn[aria-busy="true"] .material-symbols-rounded { animation: map-point-spin 1s linear infinite; }
.map-point-clear .material-symbols-rounded { color: var(--danger); }
.map-point-clear:hover:not(:disabled) { background: #FDEEF2; border-color: #F0C2CF; color: var(--danger); }
@keyframes map-point-spin { to { transform: rotate(360deg); } }

.map-point-frame {
  position: relative; overflow: hidden; height: 360px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: #F8F4F0;
}
@media (min-width: 640px) { .map-point-frame { height: 440px; } }
.map-point-canvas { width: 100%; height: 100%; }
.map-point-canvas .maplibregl-canvas { cursor: crosshair; }
.map-point-canvas:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.map-point-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 24px); margin: 0; padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-1); color: var(--ink);
  font-size: 0.8rem; font-weight: 700; pointer-events: none;
}
.map-point-badge-dot { width: 10px; height: 10px; border-radius: 50%; background: #E0A800; flex: none; }
.map-point.has-point .map-point-badge-dot { background: #13A35A; }
.map-point-loading {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0;
  color: var(--text-dim); font-weight: 600;
}
.map-point-loading[hidden] { display: none; }
.map-point-controls { position: absolute; inset: auto 12px 42px 12px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.map-point-controls button { pointer-events: auto; cursor: pointer; }
.map-point-layer {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 12px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-1); font: 700 0.85rem/1 var(--body);
}
.map-point-layer:hover { background: var(--ground-2); }
.map-point-zoom { display: grid; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); pointer-events: auto; }
.map-point-zoom button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); }
.map-point-zoom button + button { border-top: 1px solid var(--line); }
.map-point-zoom button:hover { background: var(--ground-2); }
.map-point-frame .maplibregl-ctrl-bottom-left { left: 0; bottom: 0; }
.map-point-frame .maplibregl-ctrl-scale { margin: 0 0 6px 12px; }
.map-point-status { min-height: 1.4em; margin: 0; color: var(--text-dim); font-size: 0.9rem; }
.map-point-status:empty { display: none; }
@media (max-width: 479px) {
  .map-point-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .map-point-btn { justify-content: center; padding: 0 10px; }
  .map-point-clear { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .map-point-btn[aria-busy="true"] .material-symbols-rounded { animation: none; }
}
.sheet h1, .sheet h2 { color: var(--ink); }
.sheet .text-muted { color: var(--text-dim) !important; }
.sheet :focus-visible { outline-color: var(--violet); }
.site-form legend { font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: 1.35rem; color: var(--ink); margin-bottom: 10px; }
.form-group-set { margin-bottom: 20px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.form-control, .form-select { border: 1px solid var(--line-strong); border-radius: var(--radius-band); min-height: 48px; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.25); }
.form-label { font-weight: 700; color: var(--ink); }
.required-mark, .form-required-note { color: var(--danger); }
.form-required-note { margin: 0 0 20px; font-size: 0.9rem; font-weight: 700; }
.form-error-summary {
  margin: 0 0 20px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius-band); background: #fff6f8; color: var(--danger);
}
.form-error-summary p { margin: 0 0 6px; }
.form-error-summary ul { margin: 0; padding-left: 1.25rem; }
.form-error-summary a { color: inherit; font-weight: 700; }
.form-error-summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--danger) 25%, transparent); outline-offset: 2px; }
.site-form[aria-busy="true"] { cursor: progress; }
.site-form [type="submit"]:disabled { opacity: 0.72; cursor: wait; }
.gate-saved { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1F7A3A; }

.my-events-sub { color: var(--text-dim); }
.state-counts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; }
.state-counts li { padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.my-event { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-band); }
.my-event.is-past { background: var(--paper-2); }
.my-event h2 { color: var(--ink); }
.my-event-thumb { border-radius: 8px; object-fit: cover; border: 1px solid var(--line-strong); }
.my-event-audience { color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: 4px; }
.state-chip { display: inline-block; padding: 1px 10px; border-radius: 4px; border: 1px solid var(--line-strong); font-weight: 700; font-size: 0.72rem; }
.state-published { background: var(--cyan); }
.state-draft { background: var(--yellow); }
.state-archived, .state-past { background: var(--paper-2); }

/* MDB surfaces used by the backoffice: ink on white. */
.card { --mdb-card-color: var(--ink); color: var(--ink); }
.card .table { --mdb-table-color: var(--ink); }

/* ---------- Ad plate: dashed so it never reads as an event band ---------- */

.ad-zone { display: grid; margin-top: 28px; }
.ad-zone:empty { display: none; }
.ad-zone-prose { max-width: 68ch; margin: 36px auto 0; }
.ad-zone-footer { margin-top: 0; margin-bottom: 32px; }
.ad-plate {
  display: grid; gap: 8px; justify-items: start;
  padding: 18px 20px; border-radius: var(--radius-board);
  background: var(--paper); color: var(--ink); border: 1.5px dashed var(--ad-border);
}
.ad-plate p { margin: 0; }
.ad-plate-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-plate-who { font-weight: 700; font-size: 0.9rem; color: var(--text-dim); }
.ad-plate-title { font-family: var(--heading); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.2; }
.ad-plate-body { max-width: 62ch; }
.ad-plate .btn-plate { margin-top: 4px; }
.ad-plate :focus-visible { outline-color: var(--violet); }
.ad-plate-promo { background: var(--paper-2); }
.ad-plate-sell {
  display: inline-flex; align-items: center; min-height: 44px; justify-self: end; margin-top: 2px;
  font-weight: 700; font-size: 0.9rem; color: var(--violet); text-underline-offset: 0.2em;
}
.ad-plate-sell:hover { color: var(--ink); }

/* ---------- Mobile publish band: fixed at the bottom, clear of the content ---------- */

.mobile-cta { display: none; }
@media (max-width: 639px) {
  .site .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--fuchsia-solid); color: #FFFFFF; box-shadow: 0 -4px 16px rgba(22, 17, 31, 0.12);
    font-weight: 700; font-size: 1rem; text-decoration: none;
  }
  .site:has(> .mobile-cta) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .site .topbar-cta { display: none; }
}

/* ---------- Floating surfaces and motion ----------
   Cards float: a fine border plus a soft shadow tinted with the logo's violet,
   and they rise a little under the pointer. They enter as they scroll into
   view (scroll-driven where the browser has it, a short staggered fade-in on
   load where it does not). The reduced-motion rule below switches all of it
   off. */
:root {
  --float: 0 1px 2px rgba(22, 17, 31, 0.04), 0 6px 18px rgba(91, 33, 182, 0.07);
  --float-hover: 0 2px 4px rgba(22, 17, 31, 0.05), 0 16px 36px rgba(91, 33, 182, 0.14);
  --lift: translateY(-3px);
  --motion: 0.25s var(--ease-out);
}
.band, .day, .tone-tag, .event-facts, .event-place, .event-publish, .city-plate, .guide, .step, .gets li, .empty-plate, .ad-plate, .event-placard, .sheet, .my-event {
  border-color: var(--line);
  transition: box-shadow var(--motion), transform var(--motion), border-color var(--motion), background-color var(--motion);
}
.band { box-shadow: var(--float); }
.band:hover, .band:focus-visible { box-shadow: var(--float-hover); transform: var(--lift); border-color: var(--line-strong); }
.day, .tone-tag, .event-facts, .event-place, .event-publish, .city-plate, .guide, .step, .gets li, .event-placard, .sheet, .my-event { box-shadow: var(--float); }
.day:hover, .tone-tag:hover, .city-plate:hover, .guide:hover, .step:hover, .gets li:hover { box-shadow: var(--float-hover); transform: var(--lift); border-color: var(--line-strong); }
.band-thumb img { transition: transform 0.5s var(--ease-out); }
.band:hover .band-thumb img { transform: scale(1.06); }
.band-stop { transition: transform var(--motion); }
.band:hover .band-stop { transform: scale(1.05); }
.btn-plate, .btn-line { transition: background-color 0.15s, color 0.15s, box-shadow var(--motion), transform var(--motion); }
.btn-plate:hover, .btn-line:hover { transform: translateY(-1px); }
.btn-plate:active, .btn-line:active { transform: translateY(0) scale(0.98); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.event-placard { animation: rise 0.6s var(--ease-out) backwards; }
.day-rail .day, .tone-tags .tone-tag { animation: rise 0.45s var(--ease-out) backwards; }
.day-rail .day:nth-child(2), .tone-tags .tone-tag:nth-child(2) { animation-delay: 40ms; }
.day-rail .day:nth-child(3), .tone-tags .tone-tag:nth-child(3) { animation-delay: 80ms; }
.day-rail .day:nth-child(4), .tone-tags .tone-tag:nth-child(4) { animation-delay: 120ms; }
.day-rail .day:nth-child(5), .tone-tags .tone-tag:nth-child(5) { animation-delay: 160ms; }
.day-rail .day:nth-child(6), .tone-tags .tone-tag:nth-child(6) { animation-delay: 200ms; }
.day-rail .day:nth-child(n+7), .tone-tags .tone-tag:nth-child(n+7) { animation-delay: 240ms; }
/* Entrances fill backwards only: a fill that outlived the animation would pin
   transform and swallow the hover lift of the cards. */
.event-facts, .steps > *, .gets > * { animation: rise 0.5s var(--ease-out) backwards; }
.bands > *, .city-plates > *, .guide-list > * { animation: pop 0.6s var(--ease-out) backwards; }
.bands > :nth-child(2), .city-plates > :nth-child(2), .guide-list > :nth-child(2) { animation-delay: 50ms; }
.bands > :nth-child(3), .city-plates > :nth-child(3), .guide-list > :nth-child(3) { animation-delay: 100ms; }
.bands > :nth-child(4), .city-plates > :nth-child(4), .guide-list > :nth-child(4) { animation-delay: 150ms; }
.bands > :nth-child(5), .city-plates > :nth-child(5), .guide-list > :nth-child(5) { animation-delay: 200ms; }
.bands > :nth-child(n+6), .city-plates > :nth-child(n+6), .guide-list > :nth-child(n+6) { animation-delay: 250ms; }
/* Where the browser can tie an animation to scrolling, cards past the first
   screen rise as they come into view instead of all at once on load. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bands > :nth-child(n+5), .related .bands > * { animation: rise linear backwards; animation-delay: 0s; }
    .bands > :nth-child(n+5), .city-plates > *, .guide-list > *, .related .bands > * {
      animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}

/* Icons on the saturated enamels (fuchsia, cyan, lilac) are white; on yellow,
   where white would vanish, they stay ink. */
.tone-tag .material-symbols-rounded { color: #FFFFFF; }
.tone-yellow .material-symbols-rounded, .tone-tag.is-active .material-symbols-rounded { color: var(--ink); }
.band-cat .material-symbols-rounded { color: #FFFFFF; }
.band-yellow .band-cat .material-symbols-rounded { color: var(--ink); }
.band-lilac .band-cat .material-symbols-rounded, .tone-lilac .material-symbols-rounded { color: #FFFFFF; }

/* Category pills on the agenda cards carry white lettering, so they take
   each enamel's deep shade; yellow becomes amber to keep white readable. */
.band-cat { background: var(--band-ink, var(--band)); color: #FFFFFF; }
.band-cat .material-symbols-rounded { color: #FFFFFF; }
.band-yellow .band-cat, .band-yellow .band-cat .material-symbols-rounded { color: #FFFFFF; }

/* Footer base: rights on the left, legal links in the middle, origin on the
   right, on one aligned line; stacked and centred on a phone. */
.footer-base { justify-content: space-between; align-items: center; gap: 6px 24px; color: var(--text-dim); }
.footer-base > span { display: inline-flex; align-items: center; gap: 8px; }
.footer-base a { min-height: 44px; font-weight: 600; }
@media (max-width: 767px) {
  .footer-base { flex-direction: column; justify-content: center; gap: 4px; }
}

/* ================= Direction 2: playful modern =================
   The logo's own palette and attitude: violet into fuchsia, turquoise "HOY",
   yellow sparkles, rounded letters, and motion with a little bounce. */
:root {
  --brand-grad: linear-gradient(120deg, #5B21B6 0%, #8B2BE2 45%, #FF2E88 100%);
  --turquoise: #00D5E4;
  --radius-card: 20px;
}
body { background: radial-gradient(1200px 600px at 100% -10%, #F3E9FF 0%, transparent 60%), radial-gradient(900px 500px at -10% 30%, #FFF0F7 0%, transparent 55%), var(--ground); }

/* Hero placard: the logo's gradient, white lettering, turquoise HOY. */
/* The veil darkens the fuchsia end, where white text would fall to 3.5:1, so every line holds 4.5:1. */
.placard {
  background: linear-gradient(120deg, transparent 55%, rgba(22, 17, 31, 0.24) 100%), var(--brand-grad); color: #FFFFFF; border: 0;
  border-radius: 20px; padding: 30px 30px 26px;
  box-shadow: 0 18px 40px rgba(91, 33, 182, 0.28);
  overflow: hidden;
}
.placard::before, .placard::after {
  content: "✦"; position: absolute; width: auto; height: auto; border-radius: 0; background: none; opacity: 1;
  line-height: 1; color: var(--yellow); pointer-events: none; animation: twinkle 3s ease-in-out infinite;
}
.placard::before { font-size: 40px; top: 22px; left: auto; right: 150px; }
.placard::after { font-size: 22px; top: 70px; right: 118px; color: #FFFFFF; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.75; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
.placard-kicker, .placard-where { font-family: var(--display); color: #FFFFFF; letter-spacing: 0.01em; }
.placard-day { font-family: var(--display); color: var(--turquoise); text-shadow: 0 4px 0 rgba(22, 17, 31, 0.25); font-size: clamp(3rem, 10vw, 4.6rem); }
.placard-title-text { color: #FFFFFF; font-family: var(--heading); font-weight: 800; }
.placard-intro, .post-meta { color: #FFFFFF; }
.placard .route-num { background: var(--yellow); color: var(--ink); font-family: var(--display); box-shadow: 0 6px 16px rgba(22, 17, 31, 0.25); }
.placard-count { color: #FFFFFF; }
.placard-search { border-top: 1px dashed rgba(255, 255, 255, 0.35); }
.placard .field label { color: #FFFFFF; }
.placard .field input, .placard .field select { border: 0; border-radius: 999px; padding-left: 20px; box-shadow: 0 4px 14px rgba(22, 17, 31, 0.15); }
.placard .field select { padding-right: 40px; }
.placard .btn-plate-ink, .placard .btn-plate { background: var(--yellow); color: var(--ink); }
.placard .btn-plate-ink:hover { background: #FFDD66; color: var(--ink); }
.placard :focus-visible { outline-color: var(--yellow); }

/* Day rail: rounded tiles; the chosen day wears the brand gradient. */
.day { border-radius: 20px; border-color: transparent; background: var(--surface); box-shadow: var(--float); }
.day.is-selected { background: var(--brand-grad); border-color: transparent; color: #FFFFFF; box-shadow: 0 10px 24px color-mix(in srgb, #8B2BE2 35%, transparent); transform: translateY(-2px); }
.day-count { background: #FFF1B8; color: var(--ink); }
.day.is-selected .day-count { background: var(--yellow); color: var(--ink); }

/* Category chips: solid colour pills with white letters (ink on yellow). */
.tone-tag { border: 0; background: var(--tone, var(--lilac)); color: #FFFFFF; font-family: var(--heading); font-weight: 600; box-shadow: 0 4px 12px rgba(22, 17, 31, 0.08); }
.tone-yellow { color: var(--ink); }
/* The deep shade of each family: white letters need 4.5:1 on the pill. */
.tone-lilac { --tone: #5B3FD0; }
.tone-cyan { --tone: #00727B; }
.tone-tag .material-symbols-rounded { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; }
.tone-yellow .material-symbols-rounded { background: rgba(22, 17, 31, 0.1); color: var(--ink); }
.tone-tag:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 10px 22px rgba(22, 17, 31, 0.14); }
.tone-tag.is-active { color: #FFFFFF; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--tone, var(--lilac)); }
.tone-tag.is-active .material-symbols-rounded,
.tone-tag.is-active .tone-tag-count { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; }
.tone-yellow.is-active,
.tone-yellow.is-active .material-symbols-rounded,
.tone-yellow.is-active .tone-tag-count { color: var(--ink); }
.tone-tag-count { background: rgba(255, 255, 255, 0.3); color: inherit; }
.tone-tag:hover { color: #FFFFFF; }
.tone-yellow:hover { color: var(--ink); }
.tone-tag.tone-plain { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(22, 17, 31, 0.08); }
.tone-tag.tone-plain:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 22px rgba(22, 17, 31, 0.14); }
.tone-tag.tone-plain .material-symbols-rounded { background: var(--ground-2); color: var(--ink); }
.tone-tag.tone-plain .tone-tag-count { background: var(--ground-2); color: var(--text-dim); }
.tone-tag.tone-plain.is-active { --tone: var(--violet); background: var(--violet); color: #FFFFFF; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--violet); }
.tone-tag.tone-plain.is-active .material-symbols-rounded,
.tone-tag.tone-plain.is-active .tone-tag-count { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; }
/* The pills stay compact; the invisible strip keeps the 44 px touch target. */
.tone-tag { position: relative; }
.tone-tag::after { content: ""; position: absolute; inset: calc((100% - 44px) / 2) 0; }

/* Agenda cards: white, round, a big colour tile with the category icon. */
.band {
  border-radius: var(--radius-card); border: 1px solid #EEE8F7; background: var(--surface);
  padding: 12px; gap: 14px; box-shadow: 0 6px 18px rgba(91, 33, 182, 0.08);
  transition: transform 0.35s var(--ease-out), box-shadow 0.25s ease;
}
.band:hover, .band:focus-visible { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 18px 36px rgba(91, 33, 182, 0.16); border-color: #E2D8F3; }
.band-stop { background: transparent; color: var(--ink); width: 54px; height: auto; border-radius: 0; border: 0; }
.band-stop-label, .band-stop-sub { color: var(--text-dim); }
.band-stop-main { font-family: var(--display); font-size: 1.7rem; color: var(--band-frame, var(--violet)); }
/* The yellow frame on white is 2.3:1; the numeral takes the family's deep shade. */
.band-yellow .band-stop-main { color: var(--band-ink); }
.band-thumb {
  order: -1; width: 84px; height: 84px; border-radius: 14px; border: 0;
  background: var(--band, var(--lilac)); box-shadow: inset 0 -10px 20px rgba(22, 17, 31, 0.08);
}
.band-yellow .band-thumb { background: var(--yellow); }
.band-thumb .material-symbols-rounded { font-size: 40px; color: #FFFFFF; transition: transform 0.4s var(--ease-out); }
.band-yellow .band-thumb .material-symbols-rounded { color: var(--ink); }
.band:hover .band-thumb .material-symbols-rounded { transform: scale(1.18) rotate(-8deg); }
.band { grid-template-columns: auto auto minmax(0, 1fr); }
.band-title { font-family: var(--heading); font-weight: 700; font-size: clamp(1rem, 2vw, 1.12rem); }
.band-cat { border-radius: 999px; }

/* Buttons: yellow pills that squash a little when pressed. */
.btn-plate { border-radius: 999px; font-weight: 700; }
.btn-plate:hover { transform: translateY(-2px); }
.btn-plate:active { transform: translateY(0) scale(0.96); }

.section-title { font-weight: 800; }

/* Entrances with a little bounce. */
.placard { animation: pop 0.7s var(--ease-out) backwards; }

/* Calmer sizes: the menu, section titles, buttons, chips and card titles
   read smaller; placards and body text keep theirs. */
.topbar-link { font-size: 0.9rem; padding: 0 10px; }
.topbar-cta, .account-signup { font-size: 0.9rem; min-height: 40px; padding: 0 14px; }
.section-title { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; }
.section-title-sm { font-size: clamp(1rem, 1.7vw, 1.15rem); }
.btn-plate { font-size: 0.9rem; min-height: 42px; }
.btn-line { font-size: 0.9rem; }
.tone-tag { font-size: 0.8rem; min-height: 36px; padding: 0 12px 0 10px; }
.tone-tag .material-symbols-rounded { width: 22px; height: 22px; font-size: 15px; }
.band-title { font-size: clamp(0.95rem, 1.7vw, 1.02rem); }
.band-meta { font-size: 0.8rem; }
.day-name { font-size: 0.72rem; }
.event-title { font-size: clamp(1.3rem, 2.8vw, 1.75rem); }
.publish-band-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.footer-heading { font-size: 0.9rem; }

/* City cards: the pin tile cycles through the four enamels. */
.city-plates { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.city-plate {
  --city: var(--fuchsia);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0;
  min-height: 76px; padding: 12px 14px 12px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid #EEE8F7; box-shadow: 0 6px 18px rgba(91, 33, 182, 0.08);
  transition: transform 0.35s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}
.city-plates > li:nth-child(4n+2) .city-plate { --city: #00A9B6; }
.city-plates > li:nth-child(4n+3) .city-plate { --city: var(--yellow); }
.city-plates > li:nth-child(4n+4) .city-plate { --city: #8F72F0; }
.city-plate::before {
  content: "location_on"; grid-row: 1 / span 2; grid-column: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--city); color: #FFFFFF;
  font-family: "Material Symbols Rounded"; font-size: 26px; line-height: 1;
  transition: transform 0.4s var(--ease-out);
}
.city-plates > li:nth-child(4n+3) .city-plate::before { color: var(--ink); }
.city-plate-name {
  grid-column: 2; grid-row: 1; align-self: end;
  font-family: var(--heading); font-weight: 700; font-size: 1rem; text-transform: none; letter-spacing: -0.01em; color: var(--ink);
}
.city-plate-count { grid-column: 2; grid-row: 2; align-self: start; font-weight: 500; font-size: 0.8rem; color: var(--text-dim); }
.city-plate .material-symbols-rounded {
  grid-column: 3; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ground-2); color: var(--ink); font-size: 18px;
  transition: transform 0.3s var(--ease-out), background-color 0.2s, color 0.2s;
}
.city-plate:hover { background: var(--surface); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(91, 33, 182, 0.15); border-color: #E2D8F3; }
.city-plate:hover::before { transform: rotate(-8deg) scale(1.08); }
.city-plate:hover .material-symbols-rounded { transform: translateX(4px); background: var(--city); color: #FFFFFF; }
.city-plates > li:nth-child(4n+3) .city-plate:hover .material-symbols-rounded { color: var(--ink); }
.city-plate:hover .city-plate-name, .city-plate:hover .city-plate-count { color: inherit; }
.city-plate:hover .city-plate-name { color: var(--ink); }

/* Compact pass: one family (Plus Jakarta Sans) for everything people read
   and press, Righteous kept for the placard's big words; every surface a
   step tighter. */
body { font-size: 0.9rem; }
.topbar-inner { min-height: 58px; }
.topbar-logo img { height: 34px; }
.topbar-link { font-size: 0.8rem; font-weight: 600; min-height: 38px; padding: 0 9px; }
.topbar-cta, .account-signup { font-size: 0.8rem; min-height: 38px; padding: 0 13px; }
.catalog-strip-inner { min-height: 30px; }
.catalog-strip { font-size: 0.8rem; }

.placard-zone { padding: 18px 0 4px; }
.placard { padding: 22px 24px 20px; border-radius: 20px; }
.placard-kicker, .placard-where { font-size: clamp(0.9rem, 2vw, 1.1rem); }
.placard-day { font-size: clamp(2.4rem, 7.5vw, 3.5rem); }
.placard-title-text { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.placard-intro { font-size: 0.9rem; margin-top: 4px; }
.placard .route-num { min-width: 48px; height: 48px; font-size: 1.35rem; }
.placard-count { font-size: 0.8rem; }
.placard-search { margin-top: 12px; padding-top: 14px; gap: 8px; }
.field label { font-size: 0.8rem; }
.field input, .field select { min-height: 40px; font-size: 0.9rem; padding: 8px 14px; }
.placard-search .btn-plate { min-height: 40px; }
.placard::before { font-size: 30px; right: 120px; top: 18px; }
.placard::after { font-size: 16px; top: 56px; right: 96px; }

.agenda { padding: 18px 0 40px; }
.placard-zone + .agenda { padding-top: 12px; }
.day-rail { gap: 6px; margin-bottom: 14px; }
.day { min-width: 54px; min-height: 60px; padding: 5px 6px; border-radius: 14px; }
.day-name { font-size: 0.72rem; }
.day-num { font-size: 1.1rem; }
.day-count { font-size: 0.72rem; min-width: 22px; }
.day-num-word { font-size: 0.72rem; line-height: 1.15; }
.day-all { min-width: 70px; }
.day-picker label { font-size: 0.8rem; }
.day-picker input { min-height: 36px; font-size: 0.8rem; padding: 4px 10px; }
.tone-tags { gap: 6px; margin: 12px 0 2px; }
.tone-tags-row { margin: 12px calc(var(--gutter) * -1); padding-block: 6px 8px; }
.tone-tag { min-height: 32px; font-size: 0.8rem; padding: 0 11px 0 8px; gap: 5px; }
.tone-tag .material-symbols-rounded { width: 20px; height: 20px; font-size: 14px; margin-left: -2px; }
.agenda-head { margin-bottom: 12px; }
.section-title { font-size: clamp(1.02rem, 1.8vw, 1.2rem); margin-bottom: 12px; }
.section-head { margin-bottom: 14px; }

/* Editorial divider for featured sections: restrained, with one brand accent. */
.heading-row-accent {
  position: relative;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Clear page chapters without turning each section into a boxed panel. */
section.cities {
  padding-top: 30px;
  padding-bottom: 40px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
section.guides:not(.guides-index) {
  padding-top: 12px;
  padding-bottom: 48px;
  border-top: 0;
  background: var(--surface);
}
.cities .section-head,
.guides .section-head {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  section.cities {
    padding-top: 38px;
    padding-bottom: 52px;
  }
  section.guides:not(.guides-index) {
    padding-top: 16px;
    padding-bottom: 52px;
  }
}

.bands { gap: 10px; }
.band { min-height: 80px; padding: 9px; gap: 11px; border-radius: 14px; }
.band-thumb { width: 64px; height: 64px; border-radius: 14px; }
.band-thumb .material-symbols-rounded { font-size: 30px; }
.band-stop { width: 44px; }
.band-stop-main { font-size: 1.35rem; }
.band-stop-label, .band-stop-sub { font-size: 0.72rem; }
.band-title { font-size: 0.9rem; line-height: 1.3; }
.band-meta { font-size: 0.8rem; }
.band-stamps { gap: 5px; }
.band-cat, .stamp { min-height: 20px; font-size: 0.72rem; }
.band-cat .material-symbols-rounded { font-size: 13px; }

.city-plates { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.city-plate { min-height: 60px; padding: 9px 10px; border-radius: 14px; column-gap: 10px; }
.city-plate::before { width: 38px; height: 38px; border-radius: 14px; font-size: 21px; }
.city-plate-name { font-size: 0.9rem; }
.city-plate-count { font-size: 0.72rem; }
.city-plate .material-symbols-rounded { width: 28px; height: 28px; font-size: 15px; }
.cities { padding: 10px 0 32px; }

.btn-plate { min-height: 38px; font-size: 0.8rem; padding: 0 15px; }
.btn-line { min-height: 44px; font-size: 0.8rem; padding: 0 12px; }
.guide { padding: 16px; gap: 6px; }
.guide-title { font-size: 1rem; }
.guide-excerpt { font-size: 0.9rem; }
.publish-band-inner { padding-top: 32px; padding-bottom: 32px; }
.publish-band-title { font-size: clamp(1.2rem, 2.2vw, 1.4rem); color: #fff; }
.publish-band p { font-size: 0.9rem; }
.ad-plate { padding: 14px 16px; }
.ad-plate-title { font-size: clamp(1.05rem, 2vw, 1.25rem); }
.footer { padding: 36px 0 18px; font-size: 0.9rem; }
.footer-links a { min-height: 44px; }

/* Guide cards: a post without a cover gets a quiet header with its icon. */
.guide-list { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.guide {
  --guide: var(--surface);
  --guide-ink: var(--text-dim);
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border-radius: 20px; border: 1px solid #EEE8F7; background: var(--surface);
  box-shadow: 0 6px 18px rgba(91, 33, 182, 0.08);
  transition: transform 0.35s var(--ease-out), box-shadow 0.25s ease;
}
.guide:hover { background: var(--surface); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(91, 33, 182, 0.16); }
.guide-art { position: relative; display: grid; place-items: center; height: 92px; background: var(--guide); border-bottom: 1px solid rgba(91, 33, 182, 0.08); overflow: hidden; }
.guide-art .material-symbols-rounded { font-size: 36px; color: var(--guide-ink); transition: transform 0.4s var(--ease-out); }
.guide-art::after { content: "✦"; position: absolute; right: 18px; top: 12px; font-size: 20px; color: var(--guide-ink); opacity: 0.32; }
.guide:hover .guide-art .material-symbols-rounded { transform: scale(1.15) rotate(-8deg); }
.guide-cover { width: 100%; margin: 0; height: 120px; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.guide-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 12px; }
.guide-tag {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  background: var(--lilac-tint); color: var(--violet); font-weight: 700; font-size: 0.72rem;
}
.guide-title { font-family: var(--heading); font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.guide-excerpt {
  font-size: 0.8rem; line-height: 1.5; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
  font-weight: 500; font-size: 0.72rem; color: var(--text-dim);
}
.guide-more { display: inline-flex; align-items: center; gap: 2px; color: var(--violet); font-weight: 700; }
.guide-more .material-symbols-rounded { font-size: 16px; transition: transform 0.3s var(--ease-out); }
.guide:hover .guide-more .material-symbols-rounded { transform: translateX(4px); }

/* Ecosystem recommendations read as a useful product card, not a loud ad. */
.ad-plate { border-color: var(--ad-border); }
.ad-plate-partner {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  row-gap: 7px;
  padding: 22px 24px;
  border: 1.5px dashed var(--ad-border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.ad-plate-partner .ad-plate-head,
.ad-plate-partner .ad-plate-title,
.ad-plate-partner .ad-plate-body {
  grid-column: 1;
}
.ad-plate-partner .ad-plate-head { gap: 7px 10px; }
.ad-plate-partner .stamp {
  border: 1px solid #EAD797;
  border-radius: 999px;
  background: var(--yellow-tint);
  color: #6B5200;
  transform: none;
}
.ad-plate-partner .ad-plate-who { font-size: 0.8rem; font-weight: 600; }
.ad-plate-partner .ad-plate-title { font-size: clamp(1.08rem, 2vw, 1.3rem); }
.ad-plate-partner .ad-plate-body { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
.ad-plate-partner .btn-plate {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin: 0;
  white-space: nowrap;
  background: var(--violet);
  color: #FFFFFF;
  box-shadow: none;
}
.ad-plate-partner .btn-plate:hover { background: #4C1D95; color: #FFFFFF; }
@media (max-width: 767px) {
  .ad-plate-partner { grid-template-columns: 1fr; padding: 18px; }
  .ad-plate-partner .btn-plate {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 5px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Date range, day groups and pages of the agenda ---------- */

.day-picker { flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.day-picker-field { display: flex; flex-direction: column; gap: 4px; }
.day-picker-optional { font-weight: 500; }
.day-picker input, .day-picker .btn-line { min-height: 44px; }
.bands-day {
  margin: 22px 0 10px; font: 700 1rem/1.3 var(--heading); color: var(--ink);
}
.bands-day:first-child { margin-top: 4px; }
.bands-note { margin: -4px 0 10px; color: var(--text-dim); font-size: 0.9rem; }
.band-time { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 0; }
.pager .btn-line, .pager .btn-plate { min-height: 44px; }
.pager-status { color: var(--text-dim); font-weight: 600; font-size: 0.9rem; }

.event-topics { padding-block: 8px 24px; }

.live-rank { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1000px) { .live-rank { grid-template-columns: 1fr 1fr; } }
.live-reason { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 700; }
.live-position { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--violet); }

/* Touch targets: compact controls keep their look; an invisible strip reaches 44 px.
   :where() leaves any control that is already positioned as it is. */
:where(.btn-plate, .btn-line, .topbar-link, .topbar-logo, .catalog-strip a, .crumbs a, .footer li a, .footer span a) { position: relative; }
.btn-plate::after, .btn-line::after, .topbar-link::after, .topbar-logo::after, .catalog-strip a::after, .crumbs a::after, .footer li a::after, .footer span a::after {
  content: ""; position: absolute; inset: calc((100% - 44px) / 2) 0;
}
.field input, .field select, .day-picker input, .placard-search .btn-plate { min-height: 44px; }

/* A running title fills the placard, so the sparkles would land on its letters. */
.placard:has(.placard-title-text)::before, .placard:has(.placard-title-text)::after { content: none; }

/* ---------- Sharing ---------- */
.share { margin: 22px 0 8px; }
.share-label { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-actions .btn-line { display: inline-flex; align-items: center; gap: 6px; }
.share-status { min-height: 1.4em; margin: 8px 0 0; color: var(--violet); font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.venue-links { margin-top: 24px; }
.venue-more { margin: 16px 0 0; }
.event-actions .share { flex-basis: 100%; margin-bottom: 0; }
.event-actions .share .btn-line { width: auto; flex: 0 0 auto; }

/* ---------- Guide with a cover: the photo fills the placard and the words sit on it ---------- */
.post-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(380px, 46vw, 540px); align-content: end;
  background: var(--ink);
}
.post-hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* The veil is what keeps white text at 4.5:1 over any photo, a bright sky included. */
.placard.post-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 0; opacity: 1; animation: none;
  background: linear-gradient(to top, rgba(22, 17, 31, 0.92) 0%, rgba(22, 17, 31, 0.78) 45%, rgba(22, 17, 31, 0.3) 100%);
}
.post-hero .placard-title-text { font-size: clamp(1.9rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; }
.post-hero .placard-intro { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #FFFFFF; max-width: 62ch; margin-top: 12px; }
.post-hero .post-meta { color: #FFFFFF; margin-top: 12px; }
/* On a phone the words climb to the top of the photo, so the veil has to reach them. */
@media (max-width: 767px) {
  .placard.post-hero::before { background: linear-gradient(to top, rgba(22, 17, 31, 0.92) 0%, rgba(22, 17, 31, 0.8) 55%, rgba(22, 17, 31, 0.62) 100%); }
}