/* Mantel Red — the public pages' whole skin.
 *
 * ZERO JavaScript runs on these pages, so everything here has to work as CSS:
 * state comes from :hover, :focus-visible, [aria-current] and :target, never
 * from a class a script toggles.
 *
 * ── THE SWAP SEAM ──────────────────────────────────────────────────────────
 * Block A below is the PLACEHOLDER paint: raw colour and face values that are
 * not yet Mantel's real identity. Block B maps those raws onto the semantic
 * names every rule in this file uses. Nothing under Block B ever names a raw
 * value, so landing the real tokens is: replace Block A, adjust the two font
 * families, done — no component is touched. */

/* ── Block A · raw values (PLACEHOLDER — swap with the landing's) ─────────── */
:root {
  /* Dark is the DEFAULT, because mantel.la's is: a reader crossing from the
     landing into /eventos must not be handed a cream page. Only these
     primitives change per theme; Block B below never does. */
  --c-paper: #0e0e0e;
  --c-surface: #1a1917;
  --c-ink: #f0ede8;
  --c-ink-2: #989488;
  --c-ink-3: #8f8a80;
  --c-line: #2a2825;
  --c-line-2: #35332f;
  --c-brand: #f4384f;
  --c-brand-deep: #c9203a;
  /* The fill under near-white ink. The bright brand is for INK and hairlines;
     as a fill it is 3.25:1 against cream, so a solid CTA uses this instead. */
  --c-brand-cta: #c9203a;
  --c-brand-tint: #2b1518;
  --c-dark: #0a0a09;
  /* Ink on a solid brand fill, and on the near-black a poster sits on. Both
     stay light in either theme, so they are their own primitives rather than
     --c-paper, which flips. */
  --c-on-brand: #f0ede8;
  --c-on-dark: #f6f1e7;

  --face-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
  --face-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The other two voices the brand owns: the serif is a venue's signature,
     the mono is anything you read as a fact — an hour, a date, a price. */
  --face-serif: "Gilda Display", Georgia, "Times New Roman", serif;
  --face-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Block A2 · the light palette ──────────────────────────────────────────
   The landing's own switching rule, copied exactly: light applies when the OS
   asks for it unless the document is stamped dark, and a document stamped
   light wins either way. Red ships no JavaScript, so in practice it follows
   the OS — which is what we want. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --c-paper: #f6f1e7;
    --c-surface: #fcf9f2;
    --c-ink: #241d15;
    --c-ink-2: #6f6757;
    --c-ink-3: #6b6459;
    --c-line: #ddd4c1;
    --c-line-2: #cfc5ae;
    --c-brand: #b31f33;
    --c-brand-deep: #8f1928;
    --c-brand-cta: #b31f33;
    --c-brand-tint: #f7e6e6;
    --c-on-brand: #fffdf8;
    --accent-type-mix: black;
    --accent-type-pct: 55%;
    --accent-rule-pct: 30%;
    --accent-type-l: 0.44;
    --accent-type-c: 1.6;
  }
}
:root[data-theme='light'] {
  --c-paper: #f6f1e7;
  --c-surface: #fcf9f2;
  --c-ink: #241d15;
  --c-ink-2: #6f6757;
  --c-ink-3: #6b6459;
  --c-line: #ddd4c1;
  --c-line-2: #cfc5ae;
  --c-brand: #b31f33;
  --c-brand-deep: #8f1928;
  --c-brand-tint: #f7e6e6;
  --c-on-brand: #fffdf8;
  --accent-type-mix: black;
  --accent-type-pct: 55%;
  --accent-rule-pct: 30%;
  --accent-type-l: 0.44;
  --accent-type-c: 1.6;
}

/* ── Block B · semantic tokens (stable names; components use only these) ──── */
:root {
  --bg: var(--c-paper);
  --surface: var(--c-surface);
  --ink: var(--c-ink);
  --muted: var(--c-ink-2);
  --faint: var(--c-ink-3);
  --line: var(--c-line);
  --line-strong: var(--c-line-2);
  --brand: var(--c-brand);
  --brand-hover: var(--c-brand-deep);
  --brand-fill: var(--c-brand-cta);
  --brand-fg: var(--c-on-brand);
  --brand-tint: var(--c-brand-tint);
  /* The ground a 4:5 poster sits on: a photograph shot for Instagram is dark
     more often than not, and letterboxing it against cream makes every card
     look broken. */
  --art-bg: var(--c-dark);
  --art-fg: var(--c-on-dark);

  --font-display: var(--face-display);
  --font-sans: var(--face-text);
  --font-serif: var(--face-serif);
  --font-mono: var(--face-mono);
  /* How far a venue's accent is pushed toward the page's ink before it is
     used as TYPE. A pastel on near-black is fine; a navy is not — and in
     light the reverse. Rules and washes use the accent raw; type uses this. */
  --accent-type-mix: white;
  --accent-type-pct: 30%;
  /* And how far a rule or wash is pulled toward ink: nothing on the dark
     ground, a little on cream, where a pastel rule would vanish. */
  --accent-rule-pct: 0%;
  /* Lightness a venue accent is pinned to when it is type, and the chroma
     multiplier. Dark: lifted, chroma kept. Light: deep, chroma pushed. */
  --accent-type-l: 0.83;
  --accent-type-c: 1;

  --measure: 62ch;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --wrap: 64rem;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;

  --focus: 0 0 0 3px var(--brand-tint), 0 0 0 5px var(--brand);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark light; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.4em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.25rem, 3.4vw, 1.55rem); }
h3 { font-size: 1.08rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); }
main.wrap { padding-top: var(--s5); padding-bottom: var(--s8); }
.lede { color: var(--muted); max-width: var(--measure); font-size: 1.05rem; margin: 0 0 var(--s5); }
.note { color: var(--muted); }
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand); font-weight: 600; margin: 0 0 var(--s2);
}

/* ── Chrome: the lockup, the nav, the footer ──────────────────────────────── */
.nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 3.5rem; flex-wrap: wrap;
}
/* The lockup is the IG one: a brand square, then the wordmark. Drawn in CSS so
   there is no asset to 404 and it recolours with the tokens. */
.lockup { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.35rem 0; }
.lockup i { width: 1.05rem; height: 1.05rem; background: var(--brand); display: block; flex: none; }
.lockup b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.01em; line-height: 1;
}
.lockup small {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding-left: 0.1rem;
}

.nav nav { display: flex; align-items: center; gap: var(--s1); }
.nav nav a {
  display: inline-block; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--muted); font-size: 0.95rem; font-weight: 500;
}
.nav nav a:hover { color: var(--ink); background: var(--bg); }
/* Active is the item's OWN fill — never an inset rail or a border on one side. */
.nav nav a[aria-current="page"] { color: var(--ink); background: var(--brand-tint); font-weight: 600; }

/* City context on a city-scoped page: the place, said once, under the chrome. */
.context {
  border-bottom: 1px solid var(--line); background: var(--bg);
  font-size: 0.85rem; color: var(--muted);
}
.context .wrap { display: flex; align-items: center; gap: var(--s2); padding-block: 0.5rem; flex-wrap: wrap; }
.context a { color: var(--muted); text-decoration: none; }
.context a:hover { color: var(--ink); text-decoration: underline; }
.context strong { color: var(--ink); font-weight: 600; }

/* body is a min-height column, so main takes the slack and the footer sits at
   the bottom instead of floating mid-viewport on a short page. */
main { flex: 1 0 auto; }
.foot { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface); margin-top: var(--s8); }
.foot .wrap { padding-block: var(--s6); display: grid; gap: var(--s5); }
.foot p { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: var(--measure); }
.foot .foot-what { color: var(--ink); font-size: 1rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: 0.9rem; }
.foot nav a { color: var(--muted); }
.foot nav a:hover { color: var(--ink); }
@media (min-width: 48rem) {
  .foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
}

/* ── Filters: a segmented control, then a subordinate barrio row ──────────── */
.filters { margin: 0 0 var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.seg {
  display: inline-flex; flex-wrap: wrap; padding: 0.25rem; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.seg a {
  display: inline-block; padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { background: var(--brand-fill); color: var(--brand-fg); font-weight: 600; }

.facet { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; width: 100%; }
.facet > span {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; flex: none;
}
/* «Por fecha»: a real form, because a tab that renders the same page as the one
   beside it is a lie. One row on a phone, no JavaScript. */
.daypick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.daypick label { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.daypick input[type="date"] { width: auto; min-width: 10rem; min-height: 2.6rem; padding: 0.45rem 0.7rem; }
.daypick .btn { min-height: 2.6rem; padding-block: 0.45rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
/* On a phone the barrios are eleven chips and wrap to four rows, pushing the
   first event below the fold. One scrollable row instead — no JS, and a
   keyboard tab still scrolls the focused chip into view. */
@media (max-width: 46rem) {
  .facet { display: grid; gap: var(--s2); }
  .facet .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 0.15rem; margin: 0 calc(var(--s4) * -1); padding-inline: var(--s4);
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--s4);
    /* The row is sliced at the viewport edge with nothing to say so. A fade
       out of the last chip is the affordance — the scroll position cannot be
       read without JavaScript, so it fades the end, which is where the row
       always starts. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .facet .chips::-webkit-scrollbar { display: none; }
  .facet .chips li { flex: none; scroll-snap-align: start; }
}
.chips a {
  display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  text-decoration: none; font-size: 0.85rem; color: var(--muted);
  border: 1px solid var(--line); background: transparent;
}
.chips a:hover { border-color: var(--line-strong); color: var(--ink); }
.chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 500; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.cards {
  align-items: start;
  display: grid; gap: var(--s4); padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--line-strong); }
.card > a { text-decoration: none; display: block; }
.card > a:focus-visible { box-shadow: var(--focus); border-radius: var(--radius); }
.card .body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 0.15rem; }
.card h3 { margin: 0 0 0.1rem; line-height: 1.2; }
.card .kind {
  margin: 0 0 0.15rem; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand); font-weight: 600;
}
.card .when { margin: 0; font-size: 0.92rem; color: var(--ink); }
.card .who, .card .cover { margin: 0; font-size: 0.88rem; color: var(--muted); }
.card .cover { margin-top: 0.2rem; }
/* The poster: 4:5, CONTAINED on a dark ground, so a portrait flyer and a
   landscape photo both arrive whole instead of cropped through the middle. */
.card .art { aspect-ratio: 4 / 5; background: var(--art-bg); display: grid; place-items: center; }
.card .art img { width: 100%; height: 100%; object-fit: contain; }
/* With no poster there is nothing to letterbox, so the dark ground shrinks to
   a band with the venue's name instead of half a screen of black. */
.card .art.blank { aspect-ratio: 5 / 2; display: grid; place-items: center; }
.card .art.blank span {
  font-family: var(--font-display); color: var(--art-fg); opacity: 0.5; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ── The empty state: the state this page is in most of the time ──────────── */
.blank-slate {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: var(--s6) var(--s5); text-align: center; display: grid; gap: var(--s3); justify-items: center;
}
.blank-slate h2 { margin: 0; font-size: clamp(1.2rem, 3.4vw, 1.5rem); }
.blank-slate p { margin: 0; color: var(--muted); max-width: 34ch; }
.blank-slate .actions { margin: var(--s2) 0 0; justify-content: center; }
.blank-slate .mark { width: 2.5rem; height: 2.5rem; background: var(--brand-tint); display: grid; place-items: center; border-radius: var(--radius-sm); }
.blank-slate .mark i { width: 0.9rem; height: 0.9rem; background: var(--brand); display: block; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.15rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
  font-size: 0.95rem; background: var(--brand-fill); color: var(--brand-fg); border: 1px solid var(--brand-fill);
  min-height: 2.75rem; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--ink); background: var(--surface); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }

/* ── The event page ───────────────────────────────────────────────────────── */
/* (1) The identity comes first on a phone — the kind, the name and the facts —
   then the poster, then the words and the actions. A 4:5 flyer above the facts
   is 60% of the screen before the date, which is the one thing the page was
   opened for. On a wide screen the poster takes its own column and the reading
   order is unchanged. */
.hero { display: grid; gap: var(--s4); margin-bottom: var(--s5); grid-template-areas: "id" "art" "rest"; }
.hero .hero-id { grid-area: id; }
.hero .art { grid-area: art; }
.hero .hero-rest { grid-area: rest; }
/* (2) No forced ratio: a 16:9 flyer is 16:9 and a portrait is portrait, so
   nothing arrives as a black slab with the picture stranded in the middle. The
   dark ground and `contain` still catch the one case that needs them — a
   portrait tall enough to be clamped by max-height. */
.hero .art { background: var(--art-bg); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.hero .art img { width: 100%; height: auto; max-height: 68svh; object-fit: contain; }
.hero h1 { margin-bottom: var(--s2); }
.hero .facts { margin: 0; display: grid; gap: 0.2rem; }
.hero .facts b { font-size: 1.05rem; font-weight: 600; }
.hero .facts span { color: var(--muted); }
@media (min-width: 46rem) {
  /* `auto 1fr` so the poster's extra height lands BELOW the description
     instead of being split between the two rows, which opened a gap between
     the price line and the text. */
  .hero { grid-template-columns: 22rem 1fr; grid-template-areas: "art id" "art rest"; grid-template-rows: auto 1fr; align-items: start; gap: var(--s6); }
  .hero .art { align-self: start; }
  .hero .art img { max-height: none; }
}

/* State, said as a chip rather than as a sentence tacked onto the kind line. */
.state {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface);
}
.state.live { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-fg); }
.state.live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; display: block; }
.state.past { background: transparent; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.panel h2 { margin: 0 0 var(--s3); font-size: 1.1rem; }
.panel > :last-child { margin-bottom: 0; }
.people { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.people li { display: flex; align-items: center; gap: var(--s3); }
.people .who-mark {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none;
}
.people b { display: block; font-weight: 600; }
.people small { color: var(--muted); }

/* The actions follow you down a long page on a phone, where the Reservar
   button would otherwise be a scroll away from wherever you stopped reading. */
/* Not sticky after all: inside .hero-rest its sticky range was that one div,
   so it never followed anyone anywhere. A plain bar under the facts is honest
   and never covers them. */
.sticky-actions {
  margin: var(--s5) 0 0; padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
}
.sticky-actions .actions { margin: 0; }
.sticky-actions .btn { flex: 1 1 8rem; }
@supports (backdrop-filter: blur(6px)) {
  .sticky-actions { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
}
@media (min-width: 46rem) {
  .sticky-actions { position: static; margin: var(--s5) 0 0; padding: 0; background: none; border: 0; backdrop-filter: none; }
  .sticky-actions .btn { flex: 0 0 auto; }
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
/* One field = label, control, and a line under it that is the hint or, when the
   field is wrong, the reason. The app's `Field` in the same three parts. */
form { margin: 0 0 var(--s5); }
.field { display: grid; gap: 0.3rem; margin: 0 0 var(--s4); max-width: 26rem; }
.field > label, .field > .lb { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.field-msg { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.field-msg.hint { color: var(--muted); }
.field-msg.error { color: var(--brand); font-weight: 500; }
.field.wide, .field:has(textarea) { max-width: var(--measure); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"],
input:not([type]), select, textarea {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; min-height: 2.9rem; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
}
textarea { min-height: 6rem; padding-block: 0.6rem; line-height: 1.5; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--muted) 50%), linear-gradient(-45deg, transparent 49%, var(--muted) 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.2rem; }
::placeholder { color: var(--faint); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus); border-color: var(--brand); outline: none; }
/* Invalid reddens the control itself — never a bar down one side. */
.field[data-invalid="true"] :is(input, select, textarea) { border-color: var(--brand); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--brand); }

/* Checkbox and radio as chips: the whole label is the hit target, and checked
   is the chip's own fill. */
label.chip-check, label:has(input[type="radio"]), label:has(input[type="checkbox"]) {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--ink); font-weight: 400;
  padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); cursor: pointer; font-size: 0.9rem; min-height: 2.4rem;
}
label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
label:has(input:focus-visible) { box-shadow: var(--focus); }
label.chip-check input, label:has(input[type="radio"]) input { accent-color: var(--brand); }
label:has(input:checked) input { accent-color: var(--bg); }

/* A consent box is a sentence, not a chip. */
label.consent:has(input[type="checkbox"]), label.consent {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0; border: 0; background: none;
  border-radius: 0; font-size: 0.95rem; line-height: 1.45; max-width: var(--measure); min-height: 0;
}
label.consent:has(input:checked), label.consent:has(input[type="checkbox"]:checked) { background: none; color: var(--ink); border: 0; }
label.consent input { margin-top: 0.28rem; flex: none; accent-color: var(--brand); }

/* The one-time code: one box, digits big enough to read back off a screen. */
.field:has(.code) { max-width: 13rem; }
input.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; font-weight: 600;
  letter-spacing: 0.42em; text-align: center; padding: 0.7rem 0 0.7rem 0.42em; font-variant-numeric: tabular-nums;
  min-height: 3.4rem;
}

/* A refusal that belongs to the whole form, not to one field. */
.alert {
  border: 1px solid var(--brand); border-left-width: 1px; background: var(--brand-tint); color: var(--brand);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); font-weight: 500;
  max-width: var(--measure);
}
/* The index of what failed, above a long form. Its links are the guaranteed
   way to the field when the browser ignores `autofocus`. */
.errors {
  border: 1px solid var(--brand); background: var(--brand-tint); border-radius: var(--radius-sm);
  padding: var(--s4) var(--s4) var(--s3); margin: 0 0 var(--s5); max-width: var(--measure);
}
.errors b { display: block; color: var(--brand); margin-bottom: var(--s2); }
.errors ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.errors li { color: var(--brand); font-size: 0.92rem; }
.errors a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* An anchor jump must not tuck the field under the sticky chrome. */
.field { scroll-margin-top: 5rem; }

/* What just happened, after a redirect. */
.done {
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4); max-width: var(--measure);
}
.done b { display: block; }
.done span { color: var(--muted); font-size: 0.9rem; }

form .actions { margin-top: var(--s4); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
fieldset > legend { padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: var(--s3); }

/* The long form's save: it follows you down the page and says what it will do,
   because on a phone the button is otherwise a screen away from the field you
   just changed. */
.save-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; justify-content: space-between;
  margin: var(--s5) calc(var(--s4) * -1) 0; padding: var(--s3) var(--s4);
  background: var(--surface); border-top: 1px solid var(--line);
}
.save-bar p { margin: 0; color: var(--muted); font-size: 0.85rem; max-width: 34ch; }
.save-bar .btn { flex: none; }
@supports (backdrop-filter: blur(6px)) {
  .save-bar { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); }
}
@media (min-width: 46rem) {
  .save-bar { margin-inline: 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
}

/* A form that IS the page: «Entra con tu correo», the code, the confirmation. */
.gate { max-width: 26rem; margin: var(--s6) auto var(--s8); }
.gate .steps { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); color: var(--muted); font-size: 0.92rem; }
.gate .steps li { display: flex; gap: var(--s3); align-items: baseline; }
.gate .steps b { color: var(--ink); font-family: var(--font-display); font-weight: 700; flex: none; }

/* «¿Algo raro con este aviso?» — a disclosure, which is the one interactive
   thing HTML gives us with no script. Closed it is a quiet line; open it is a
   real form with a reason and room to explain. */
details.report { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s5); max-width: var(--measure); }
details.report > summary {
  cursor: pointer; color: var(--muted); font-size: 0.9rem; list-style: none;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border-radius: var(--radius-sm);
}
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary::before { content: "＋"; color: var(--brand); font-weight: 700; }
details.report[open] > summary::before { content: "－"; }
details.report > summary:hover { color: var(--ink); }
details.report > summary:focus-visible { box-shadow: var(--focus); }
details.report form { margin-top: var(--s4); }

/* ── Bits ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--brand); font-size: 0.82rem; font-weight: 600;
}
.empty { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); color: var(--muted); background: var(--surface); }
.stack { display: grid; gap: var(--s4); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s4); }
ul.plain { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
ul.plain li { padding-left: 1.1rem; position: relative; color: var(--ink); }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; background: var(--brand); }


/* ══════════════════════════════════════════════════════════════════════════
   THE LOOK — the cartelera as a programme you scan by the hour.
   City page first; the classes below are new, so every other page keeps
   rendering with what it had until the look rolls across.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chrome, in the look ─────────────────────────────────────────────────── */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); }
.lockup b { font-family: var(--font-display); font-weight: 200; font-size: 1.5rem; letter-spacing: -0.02em; }
.lockup small { font-family: var(--font-mono); font-weight: 500; }
.nav nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0; padding: 0.4rem 0.55rem; }
.nav nav a:hover { background: none; color: var(--ink); }
.nav nav a[aria-current="page"] { background: none; color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.context { background: var(--bg); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.foot { background: var(--bg); }
.foot .foot-what { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.35; }
.foot nav { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.mast { margin: var(--s5) 0 var(--s6); }
.mast .k {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: 0 0.6em;
}
.mast .k b { color: var(--brand); font-weight: 500; }
.mast h1 {
  font-family: var(--font-display); font-weight: 200; font-size: clamp(3.4rem, 13vw, 8.5rem);
  line-height: 0.92; letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
.mast h1 i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--brand); }
.mast .lede { font-family: var(--font-sans); margin: var(--s4) 0 0; max-width: 46ch; }

/* The two filter strips: text, not pills. The active one is ink with a line
   under it — its own line, never a rail beside it. */
.strip { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; gap: 0 1.1rem; padding: 0; margin: 0; list-style: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: none; }
.strip a { color: var(--muted); text-decoration: none; padding: 0.55rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.strip a:hover { color: var(--ink); }
.strip a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.strips { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--s5) 0 0; display: grid; gap: 0; }
.strips > * { padding: 0.15rem 0; }
.strips .facet { display: flex; align-items: baseline; gap: 0.9rem; border-top: 1px solid var(--line); flex-wrap: nowrap; min-width: 0; }
.strips .facet > span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--faint); flex: none; padding: 0.55rem 0; }
.strips .chips { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 1.1rem; margin: 0; padding: 0; list-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
@media (min-width: 46rem) {
  .strips .chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent); }
}
.strips .chips::-webkit-scrollbar { display: none; }
.strips .chips li { flex: none; }
.strips .chips a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 0.55rem 0; display: inline-block; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; white-space: nowrap; }
.strips .chips a:hover { color: var(--ink); border-color: transparent; }
.strips .chips a[aria-current="page"] { color: var(--ink); background: none; border-bottom-color: var(--brand); font-weight: 500; }
.strips .daypick { padding: 0.4rem 0; border-top: 1px solid var(--line); }
.strips .daypick label { font-family: var(--font-mono); }

/* ── The programme ───────────────────────────────────────────────────────── */
.prog { list-style: none; padding: 0; margin: 0; }
/* A service day, when the list spans more than one. */
.prog .day {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding: var(--s6) 0 var(--s2); margin: 0;
}
.prog .day b { color: var(--ink); font-weight: 500; }

/* A row is one house on the street. `--venue` is that house's accent; the
   rule above and the hover wash use it raw, the type through the mix so a
   navy on black or a mint on cream can still be read. */
/* A venue's accent, worn three ways. `--venue-type` is the accent AS TYPE:
   its lightness is pinned to a value that clears 4.5:1 on the ground and its
   chroma is kept — or lifted — so a mint on cream is still mint, only deep,
   rather than the grey a plain mix toward black leaves behind. The mix line is
   the fallback for a browser without relative colour. */
.row, .house {
  --venue: var(--brand);
  --venue-type: color-mix(in oklab, var(--venue) calc(100% - var(--accent-type-pct)), var(--accent-type-mix));
  --venue-type: oklch(from var(--venue) var(--accent-type-l) calc(c * var(--accent-type-c)) h);
  --venue-rule: color-mix(in oklab, var(--venue) calc(100% - var(--accent-rule-pct)), var(--ink));
  --venue-wash: color-mix(in oklab, var(--venue) 8%, transparent);
  position: relative;
}
.row > a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "hour hour" "body art"; column-gap: var(--s4);
  text-decoration: none; color: inherit; padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line);
  transition: background-color 0.2s;
}
/* The rule above, drawn in the venue's colour: the reveal draws it in. */
.row > a::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--venue-rule);
  transform-origin: left; animation: draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.row > a:hover, .row > a:focus-visible { background: color-mix(in oklab, var(--venue) 8%, transparent); box-shadow: none; outline: none; }
.row > a:focus-visible .name { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 0.15em; }

/* TIME IS THE HERO. */
.row .hour {
  grid-area: hour; font-family: var(--font-display); font-weight: 200; font-variant-numeric: tabular-nums;
  font-size: clamp(4.2rem, 19vw, 9rem); line-height: 0.9; letter-spacing: -0.045em; color: var(--venue-type);
  margin: 0 0 var(--s2); animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.row .hour { display: grid; gap: 0.35rem; }
.row .hour .hh { white-space: nowrap; }
.row .hour .till { font-size: 0.72rem; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
@keyframes rise { from { transform: translateY(0.12em); } to { transform: none; } }
.row .body { grid-area: body; min-width: 0; }
.row .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.25rem; text-wrap: balance; }
.row .sig { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--venue-type); margin: 0 0 0.45rem; }
.row .meta { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0; }
.row .meta span + span::before { content: "·"; margin: 0 0.6em; color: var(--faint); }
.row .meta .cover { color: var(--ink); }
/* The poster on the city page is small and pasted, not framed; the type
   carries the row. */
/* On a phone the type carries the row alone; the poster waits for the event
   page, where it is the whole point. */
.row .art { display: none; }

@media (min-width: 46rem) {
  .row > a { grid-template-columns: minmax(19rem, 0.32fr) 1fr auto; grid-template-areas: "hour body art"; align-items: start; column-gap: var(--s6); padding: var(--s5) 0; }
  .row .hour { font-size: clamp(4.5rem, 7.6vw, 7.2rem); margin: 0; line-height: 0.85; }
  .row .art { display: block; grid-area: art; width: 6.5rem; aspect-ratio: 4 / 5; object-fit: cover; align-self: start; margin-top: 0.2rem; }
  .row .body { padding-top: 0.45rem; }
  .row .art { width: 6.5rem; }
}

/* ── Empty ───────────────────────────────────────────────────────────────── */
.void { padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--line); }
.void h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 var(--s4); max-width: 14ch; }
.void p { color: var(--muted); max-width: 40ch; margin: 0 0 var(--s5); }
.void .actions { margin: 0; }
.void .btn { background: none; color: var(--brand); border: 1px solid var(--brand); border-radius: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.void .btn:hover { background: var(--brand); color: var(--c-on-brand); }
.void .btn.ghost { border-color: var(--line-strong); color: var(--ink); }
.void .btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .row > a::before, .row .hour { animation: none; }
  .row > a { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE LOOK, rolled across. From here down the shared primitives take the
   same language as the city page: display in Bricolage 200, signatures in
   the serif, facts in mono, the brand as ink, square corners, rules not
   boxes, and a house's accent wherever there is a house.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type defaults, in the look ─────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; }
h1 i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--brand); }
h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); }
h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; }
.lede { max-width: 46ch; }
.eyebrow { font-family: var(--font-mono); font-weight: 500; }
.note { font-size: 0.92rem; }

/* ── Buttons: outlined, mono, the brand as ink; hover fills ─────────────── */
.btn { border-radius: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  background: none; color: var(--brand); border: 1px solid var(--brand); padding: 0.7rem 1.2rem; }
.btn:hover { background: var(--brand); color: var(--c-on-brand); border-color: var(--brand); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.house .btn { color: var(--venue-type); border-color: var(--venue-type); }
.house .btn:hover { background: var(--venue-type); color: var(--bg); }
.link-btn { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.06em; }

/* ── Panels become ruled sections ───────────────────────────────────────── */
.panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: var(--s4) 0 var(--s5); margin: 0; }
.panel h2 { margin-bottom: var(--s3); }
.people .who-mark { border-radius: 0; background: var(--venue-wash, var(--brand-tint)); color: var(--venue-type, var(--brand)); font-weight: 200; font-size: 1.3rem; }
.people b { font-family: var(--font-display); font-weight: 500; }
.people small { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; }
.state { border-radius: 0; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
.state.live { background: var(--brand); border-color: var(--brand); color: var(--c-on-brand); }
.badge { border-radius: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: 1px solid var(--brand); color: var(--brand); padding: 0.3rem 0.65rem; }
.plain li::before { top: 0.66em; }

/* The empty states everywhere take the city page's void. */
.blank-slate { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; text-align: left; justify-items: start; padding: var(--s6) 0 var(--s7); }
.blank-slate .mark { display: none; }
.blank-slate h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 8vw, 4.5rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: none; color: var(--ink); max-width: 16ch; }
.blank-slate p { max-width: 40ch; }
.blank-slate .actions { justify-content: flex-start; }

/* ── Chrome bits still on old rules ─────────────────────────────────────── */
.context strong { font-weight: 500; }
.done, .alert, .errors { border-radius: 0; }
.done { border: 0; border-top: 2px solid var(--brand); background: none; padding: var(--s3) 0; }
.done b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.alert { background: none; border: 1px solid var(--brand); }
.errors { background: none; }
.errors b { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Forms, in the look ──────────────────────────────────────────────────── */
.field > label, .field > .lb, label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.field-msg { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea {
  border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding-inline: 0; min-height: 2.8rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; border-bottom-color: var(--brand); border-bottom-width: 2px; }
.field[data-invalid="true"] :is(input, select, textarea), :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: var(--brand); border-bottom-width: 2px; }
textarea { border: 1px solid var(--line-strong); padding: 0.6rem 0.8rem; }
select { background-position: calc(100% - 0.6rem) 55%, calc(100% - 0.25rem) 55%; padding-right: 1.6rem; }
label.chip-check, label:has(input[type="radio"]), label:has(input[type="checkbox"]) { border-radius: 0; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
label.consent:has(input[type="checkbox"]), label.consent { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
input.code { border: 1px solid var(--line-strong); padding-inline: 0 0.42em; font-family: var(--font-display); font-weight: 200; font-size: 2.6rem; letter-spacing: 0.3em; }
input.code:focus-visible { border-color: var(--brand); border-width: 1px; }
fieldset > legend { font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.save-bar { border-radius: 0; }
.save-bar p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; }
.gate .steps b { font-weight: 200; font-size: 1.4rem; }
.gate .steps { font-family: var(--font-sans); }
details.report > summary { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
details.report > summary::before { content: "+"; }
details.report[open] > summary::before { content: "−"; }

/* ── A house: the venue page, the event page ─────────────────────────────── */
.house-mast { margin: var(--s5) 0 var(--s5); }
.house-mast .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: 0 0.6em; }
.house-mast .k b { color: var(--venue-type); font-weight: 500; }
.house-mast h1 { margin: 0; color: var(--ink); }
.house-mast .sig { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 3.6vw, 1.7rem); line-height: 1.25; color: var(--venue-type); margin: var(--s3) 0 0; max-width: 30ch; }
.house-mast .facts { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: 0.3em 0; }
.house-mast .facts span + span::before { content: "·"; margin: 0 0.6em; color: var(--faint); }
.house-mast .facts a { color: inherit; }
.house .prog { border-bottom: 1px solid var(--line); }
.house h2 { color: var(--venue-type); }
.house .panel { border-top-color: var(--line); }

/* ── The event page: the hour first, then the flyer, whole ───────────────── */
.flyer { display: grid; gap: var(--s5); grid-template-areas: "id" "art" "rest"; margin-bottom: var(--s6); }
.flyer .hero-id { grid-area: id; }
.flyer .art { grid-area: art; }
.flyer .hero-rest { grid-area: rest; }
.flyer .hour { font-family: var(--font-display); font-weight: 200; font-variant-numeric: tabular-nums; font-size: clamp(5rem, 24vw, 11rem); line-height: 0.85; letter-spacing: -0.045em; color: var(--venue-type); margin: 0 0 var(--s3); display: grid; gap: 0.4rem; }
.flyer .hour .till { font-size: 0.74rem; font-family: var(--font-mono); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.flyer h1 { font-weight: 500; font-size: clamp(1.9rem, 7vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--s2); }
.flyer .sig { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 3.6vw, 1.6rem); color: var(--venue-type); margin: 0 0 var(--s3); }
.flyer .facts { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; display: grid; gap: 0.25rem; }
.flyer .facts b { color: var(--ink); font-weight: 500; }
.flyer .facts .state { justify-self: start; margin-bottom: 0.3rem; }
/* Pasted, not framed: no radius, no ground, whole. A slight lean on a wide
   screen is what a flyer on a wall does; on a phone it is flat and full. */
.flyer .art { background: none; border-radius: 0; overflow: visible; display: block; }
.flyer .art img { width: 100%; height: auto; max-height: none; object-fit: unset; display: block; }
.flyer .prose { max-width: 52ch; font-size: 1.05rem; }
.flyer .sticky-actions { border-top-color: var(--line); }
@media (min-width: 46rem) {
  .flyer { grid-template-columns: 1fr 24rem; grid-template-areas: "id art" "rest art"; column-gap: var(--s7); align-items: start; }
  .flyer .art { transform: rotate(-1.2deg); transform-origin: top center; margin-top: 0.5rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
  .flyer .hour { font-size: clamp(6rem, 11vw, 10rem); }
}
@media (prefers-reduced-motion: reduce) { .flyer .art { transform: none; } }

/* ── Trabajos: the «Se busca» column ─────────────────────────────────────── */
.ads { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ad { position: relative; }
.ad > a { display: block; text-decoration: none; color: inherit; padding: var(--s5) 0; border-bottom: 1px solid var(--line); transition: background-color 0.2s; }
.ad > a::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--venue-rule); transform-origin: left; animation: draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ad > a:hover, .ad > a:focus-visible { background: var(--venue-wash); outline: none; box-shadow: none; }
.ad .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--venue-type); margin: 0 0 var(--s2); font-weight: 500; }
.ad .k i { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-weight: 400; margin-right: 0.5em; }
.ad h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem, 6.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 var(--s2); text-wrap: balance; max-width: 22ch; }
.ad .sig { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--venue-type); margin: 0 0 var(--s3); }
.ad .meta { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0; }
.ad .meta span + span::before { content: "·"; margin: 0 0.6em; color: var(--faint); }
.ad .meta .pay { color: var(--ink); }
@media (min-width: 46rem) {
  .ad > a { display: grid; grid-template-columns: 9rem 1fr; column-gap: var(--s6); }
  .ad .k { grid-column: 1; margin: 0.35rem 0 0; }
  .ad .k i { display: block; margin: 0 0 0.2rem; }
  .ad h3, .ad .sig, .ad .meta { grid-column: 2; }
}
/* The posting itself */
.ad-page .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--venue-type); margin: 0 0 var(--s2); font-weight: 500; }
.ad-page .k i { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.15rem; margin-right: 0.5em; }
.ad-page h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.3rem, 8.5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em; max-width: 18ch; }
.ad-page .sig { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 3.6vw, 1.6rem); color: var(--venue-type); margin: var(--s3) 0 var(--s4); }
.ad-page .facts { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s5); display: grid; gap: 0.25rem; }
.ad-page .facts b { color: var(--ink); font-weight: 500; }
.ad-page .prose { max-width: 52ch; font-size: 1.05rem; }

/* ── Personal: the ficha ─────────────────────────────────────────────────── */
.ficha { border: 1px solid var(--line-strong); padding: 0; margin: var(--s5) 0; max-width: 46rem; }
.ficha > * { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); margin: 0; }
.ficha > :first-child { border-top: 0; }
.ficha .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ficha .head b { color: var(--brand); font-weight: 500; }
.ficha .who h1, .ficha .who .name { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 8vw, 3.8rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 var(--s2); }
.ficha .who .sig { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 3.4vw, 1.45rem); color: var(--brand); margin: 0; }
.ficha .row2 { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s3); align-items: baseline; border-top: 1px solid var(--line); padding: var(--s3) var(--s5); }
.ficha .row2 dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ficha .row2 dd { margin: 0; }
.ficha .row2 dd .badge { margin-right: 0.4rem; }
.ficha .stamp { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); padding: 0.3rem 0.6rem; display: inline-block; transform: rotate(-2deg); }
.ficha .foot { border-top: 1px solid var(--line); background: none; margin: 0; }
.ficha .foot .wrap { padding: 0; display: block; }
.ficha .foot p { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
/* The editor lives inside the same card. */
.ficha form { margin: 0; }
.ficha .panel { padding: var(--s4) 0 var(--s3); border-top: 0; }
.ficha section.panel { border-top: 1px solid var(--line); padding: var(--s4) var(--s5); }
.ficha .save-bar { margin: 0; border: 0; border-top: 1px solid var(--line); padding: var(--s3) var(--s5); }
@media (min-width: 46rem) { .ficha .save-bar { border-radius: 0; border: 0; border-top: 1px solid var(--line); } }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.lost { padding: var(--s7) 0 var(--s8); }
.lost .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--s3); }
.lost h1 { font-size: clamp(3.4rem, 15vw, 9rem); margin: 0 0 var(--s4); }
.lost p { max-width: 40ch; color: var(--muted); margin: 0 0 var(--s5); }

/* ── On a phone the chrome is one row and the form breathes less ───────── */
@media (max-width: 46rem) {
  /* Lockup and nav share one row; the nav scrolls if it has to. ~56px of
     chrome before the strip instead of two rows. */
  .nav .wrap { flex-wrap: nowrap; min-height: 3.25rem; gap: var(--s3); }
  .lockup b { font-size: 1.3rem; }
  .lockup small { display: none; }
  /* Four items do not fit beside the lockup at 390; wrapping beats a fourth
     item sliced mid-word with no cue that it continues. */
  .nav .wrap { flex-wrap: wrap; }
  .nav nav { flex-wrap: wrap; min-width: 0; gap: 0; }
  .nav nav a { padding: 0.5rem 0.45rem; white-space: nowrap; font-size: 0.72rem; }
  .context .wrap { padding-block: 0.4rem; }
  main.wrap { padding-top: var(--s4); }
  /* Fields: less air between them, hints tighter. */
  .field { margin-bottom: var(--s3); gap: 0.2rem; }
  .field-msg { font-size: 0.78rem; }
  section.panel { padding-block: var(--s3); }
  /* The save bar is ONE row — caption beside the button — and never a
     quarter of the screen. */
  .save-bar { flex-wrap: nowrap; align-items: center; padding: var(--s2) var(--s4); gap: var(--s3); }
  .save-bar p { font-size: 0.68rem; line-height: 1.3; }
  .save-bar .btn { padding: 0.6rem 1rem; min-height: 2.5rem; }
  body:has(.save-bar) main.wrap { padding-bottom: calc(var(--s8) + 3rem); }
}

/* ── Fixes from the first roll ───────────────────────────────────────────── */
/* The form is the card's body, not a padded child of it. */
.ficha > form { padding: 0; border-top: 0; }
.ficha > form + section.panel, .ficha > section.panel + section.panel { border-top: 1px solid var(--line); }
/* A section is a section; a label is a label. */
fieldset > legend { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin-bottom: var(--s3); }
/* The separator trails the first line rather than leading the next. */
.row .meta span + span::before, .ad .meta span + span::before, .house-mast .facts span + span::before { content: none; margin: 0; }
.row .meta span:not(:last-child)::after, .ad .meta span:not(:last-child)::after, .house-mast .facts span:not(:last-child)::after { content: "·"; margin: 0 0.6em; color: var(--faint); }
.house .plain li::before { background: var(--venue-type); }
/* Focus is where you are; invalid is what is wrong. They must not look alike. */
input:focus-visible, select:focus-visible, textarea:focus-visible { border-bottom-color: var(--ink); }
.field[data-invalid="true"] :is(input, select, textarea):focus-visible, :is(input, select, textarea)[aria-invalid="true"]:focus-visible { border-bottom-color: var(--brand); }


/* ── The front door ──────────────────────────────────────────────────────── */
.more { margin: var(--s4) 0 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.more a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 0.15rem; }
.more a:hover { color: var(--ink); border-color: var(--ink); }

/* The three doors as ONE object: a strip with rules between, not three
   cards. The number is mono, the name is the display face, the who is the
   serif, the what is a line. */
.doors { display: grid; margin: var(--s8) 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.doors > a { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--s3); padding: var(--s5) 0; text-decoration: none; color: inherit; border-top: 1px solid var(--line); position: relative; transition: background-color 0.2s; }
.doors > a:first-child { border-top: 0; }
.doors > a::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.doors > a:hover::before, .doors > a:focus-visible::before { transform: scaleX(1); }
.doors > a:focus-visible { outline: none; box-shadow: none; }
.doors > a:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 0.15em; }
.doors .n { grid-row: 1 / span 3; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--brand); padding-top: 0.6rem; }
.doors h3 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 0.35rem; }
.doors h3 i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--brand); font-size: 0.6em; margin-left: 0.3em; }
.doors .who { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--muted); margin: 0 0 0.4rem; }
.doors p:last-child { margin: 0; color: var(--muted); max-width: 42ch; font-size: 0.98rem; }
@media (min-width: 46rem) {
  .doors { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .doors > a { border-top: 0; border-left: 1px solid var(--line); padding: var(--s6) var(--s5) var(--s6) var(--s5); grid-template-columns: 1fr; row-gap: 0; }
  .doors > a:first-child { border-left: 0; padding-left: 0; }
  .doors .n { grid-row: auto; margin-bottom: var(--s4); padding: 0; }
  .doors > a::before { top: 0; }
}

/* For the venues: a short block, the brand's own claim, one door out. */
.for-venues { margin: var(--s8) 0 0; padding: var(--s6) 0 0; border-top: 1px solid var(--line); }
.for-venues .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--s3); }
.for-venues h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.9rem, 6.5vw, 3.2rem); line-height: 1; letter-spacing: -0.025em; text-transform: none; color: var(--ink); margin: 0 0 var(--s4); max-width: 22ch; }
.for-venues p { max-width: 52ch; color: var(--muted); margin: 0 0 var(--s5); }
.for-venues .actions { margin: 0; }