/* Official Google Fonts latin subsets. Licenses and source URLs: assets/fonts/. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* An exhibition poster: real people, open image fields and one invitation. */
:root {
  --cream: #fbf4e9;
  --paper: #f3e7d6;
  --ink: #1f1611;
  --ink-2: #4a3a2f;
  --tan: #c9a27e;
  /* The six letters of the logo, sampled from logo-original.png, in its order. */
  --rosa: #f81898;
  --amarillo: #f5e400;
  --rojo: #f83030;
  --verde: #00b850;
  --morado: #783898;
  --naranja: #f86030;
  /* Deeper steps of the same hues for text and white-on-color (4.5:1 or better). */
  --rosa-fuerte: #c80a70;
  --rojo-fuerte: #d91f26;
  --verde-fuerte: #008a3c;
  --logo-stripe: linear-gradient(90deg, var(--rosa) 0 16.66%, var(--amarillo) 0 33.33%, var(--rojo) 0 50%, var(--verde) 0 66.66%, var(--morado) 0 83.33%, var(--naranja) 0);
  --magenta: var(--rosa-fuerte);
  --yellow: var(--amarillo);
  --red: var(--rojo-fuerte);
  --green: var(--verde-fuerte);
  --purple: var(--morado);
  --orange: var(--naranja);
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --detail-size: 12px;
  --detail-leading: 1.4;
  --control-duration: 150ms;
  --control-ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 4.5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; color: var(--ink); background: var(--cream); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; font-optical-sizing: auto; }
h2 { font-size: clamp(32px, 4.3vw, 60px); line-height: 1.04; font-weight: 600; text-wrap: balance; }
h3 { font-size: 21px; line-height: 1.2; font-weight: 600; }
p { text-wrap: pretty; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
.wrap { width: min(100%, 1600px); padding-inline: var(--gutter); margin-inline: auto; }
.eyebrow { font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 50; padding: 12px 20px; background: var(--ink); color: var(--cream); }
.skip:focus { top: 12px; }
.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; }

/* The supplied mark, traced to assets/logo.svg with its white field knocked out, sits straight on the page. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--gutter); background: #fff; border-bottom: 1px solid var(--paper); }
.mark { display: inline-flex; align-items: center; width: 212px; min-height: 44px; flex: none; }
.mark img { width: 100%; height: auto; }
.mark:hover { opacity: .8; }
.mark:active { opacity: .65; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 24px; }
.nav a, .header-visit { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.nav a:active { color: var(--purple); }
.link-arrow { display: block; width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; padding: 12px 20px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: 16px; line-height: 1.5; text-decoration: none; border: 1px solid transparent; transition: background-color var(--control-duration) var(--control-ease), color var(--control-duration) var(--control-ease); }
.button .link-arrow { width: 20px; height: 20px; }
.button:hover { background: var(--purple); }
.button:active { background: var(--ink-2); }
.button--light { background: var(--cream); color: var(--ink); }
.button--light:hover { background: var(--yellow); }
.button--light:active { background: var(--paper); }
.text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration-thickness: 1px; }
.text-link:hover, .text-link:focus-visible { text-decoration-thickness: 3px; }
.text-link:active { opacity: .7; }

/* The invitation is part of the first composition, not a later section. */
.hero { padding-top: 44px; }
.hero__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; padding-bottom: 40px; }
.hero__heading .eyebrow { margin-bottom: 8px; }
.hero h1 { font-size: clamp(80px, 13.4vw, 196px); line-height: .88; font-weight: 700; letter-spacing: -.055em; }
.hero__subtitle { display: block; font-size: clamp(28px, 3.45vw, 48px); line-height: 1.15; letter-spacing: -.045em; font-weight: 500; margin-top: 12px; }
.hero__intro { max-width: 29ch; padding-bottom: 4px; font-size: clamp(17px, 1.55vw, 22px); }
.hero__exhibition { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
.hero__portrait { grid-column: 1; grid-row: 1; position: relative; min-height: 480px; background: var(--paper); }
.hero__photos { position: absolute; inset: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px; padding-bottom: 42px; }
.hero__photos img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 45%; }
.hero__photos img + img { object-position: 58% 55%; }
.hero__portrait figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--ink); color: var(--cream); font-size: var(--detail-size); line-height: var(--detail-leading); }
.event { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 32px 32px; background: var(--yellow); scroll-margin-top: 20px; }
.caption-title { font-weight: 600; }
.caption-meta { font-variant-numeric: tabular-nums; }
.hero__portrait .caption-meta { text-align: right; }
.event__topline { padding-bottom: 12px; border-bottom: 1px solid currentColor; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; gap: 8px 16px; font-size: var(--detail-size); font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 8px; }
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.live--past .live__dot { background: transparent; border: 1px solid var(--ink); }
.event h2 { font-size: clamp(40px, 4.2vw, 64px); margin-top: 20px; }
.event__date { margin-top: 4px; margin-bottom: 24px; }
.event__date > span:first-child { display: block; font-family: var(--display); font-size: clamp(56px, 6vw, 88px); letter-spacing: -.045em; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.05; }
.event__dash { margin-inline: .025em; }
.event__date > span:last-child { display: block; font-size: 18px; margin-top: 4px; }
.event__venue h3 { font-family: var(--body); font-size: 18px; letter-spacing: -.015em; }
.event__venue p { font-size: 14px; margin-top: 8px; max-width: 40ch; }
.event__facts { margin-block: 20px; font-size: 14px; font-weight: 700; }
.event__facts span { margin-inline: 4px; }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 80px; }
.intro h2 { font-size: clamp(32px, 4vw, 56px); }
.intro__copy { max-width: 48ch; align-self: center; }
.intro__copy p + p { margin-top: 16px; color: var(--ink-2); }

/* An open, staggered display lets each object retain its own shape. */
.find { padding-bottom: 80px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 24px; margin-bottom: 32px; border-top: 1px solid var(--tan); }
.section-heading h2 { font-size: clamp(28px, 3vw, 42px); }
.section-heading > p { font-size: 15px; color: var(--ink-2); }
.exhibits { display: grid; grid-template-columns: 1.05fr 1.3fr .85fr; align-items: start; gap: 24px; }
.exhibit__image { overflow: hidden; background: var(--paper); }
.exhibit__image img { width: 100%; height: 100%; object-fit: cover; }
.exhibit--textile .exhibit__image { aspect-ratio: 3 / 4; }
.exhibit--textile img { object-position: 50% 45%; }
.exhibit--craft { padding-top: 64px; }
.exhibit--craft .exhibit__image { aspect-ratio: 1 / 1; }
.exhibit--craft img { object-position: 51% 50%; }
.exhibit--food { padding-top: 128px; }
.exhibit--food .exhibit__image { aspect-ratio: 3 / 4; }
.exhibit--food img { object-position: 50% 45%; }
.exhibit figcaption { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tan); }
.exhibit__number { font-size: var(--detail-size); line-height: var(--detail-leading); min-width: 2ch; margin-top: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.exhibit h3 { font-size: 20px; }
.exhibit p { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.details-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.details-strip figure { display: grid; grid-template-columns: 144px 1fr; gap: 20px; align-items: center; }
.details-strip img { width: 144px; height: 104px; object-fit: cover; }
.details-strip img[src$="bebidas-de-la-expo.webp"] { object-position: 50% 68%; }
.details-strip p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

.people { background: var(--purple); color: var(--cream); }
.people__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; padding-block: 64px; }
.people__text .eyebrow { margin-bottom: 24px; }
.people__text h2 { font-size: clamp(40px, 5.5vw, 80px); line-height: 1.01; }
.people__text > p:not(.eyebrow) { max-width: 32ch; margin-top: 24px; }
.people__text .text-link { margin-top: 16px; }
.people__photos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
/* Override intrinsic HTML height so each breakpoint’s crop ratio governs. */
.people__photos img { width: 100%; height: auto; object-fit: cover; }
.people__large img { aspect-ratio: 3 / 4; object-position: 50% 58%; }
.people__small { margin-top: 112px; }
.people__small img { aspect-ratio: 3 / 4; }
.people__photos figcaption { font-size: var(--detail-size); line-height: var(--detail-leading); margin-top: 12px; padding-top: 8px; border-top: 1px solid currentColor; }

.route { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-block: 80px; }
.route__intro p { max-width: 32ch; margin-top: 24px; color: var(--ink-2); }
.timeline { list-style: none; margin: 0; padding: 0; }
.stop__month, .stop__tag, .route__years h3 { font-variant-numeric: tabular-nums; }
.timeline--featured { border-top: 2px solid var(--ink); }
.timeline--featured .stop { display: grid; grid-template-columns: 1fr auto; padding-block: 20px 16px; }
.timeline--featured .stop__month { font-size: 14px; grid-column: 1; }
.timeline--featured .stop__city { font-family: var(--display); font-size: 48px; line-height: 1.1; letter-spacing: -.04em; margin-top: 8px; grid-column: 1; }
.stop__tag { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 6px 12px; border-radius: 20px; font-size: 13px; background: var(--paper); }
.stop--now .stop__tag { background: var(--yellow); }
.timeline--featured .text-link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.route__history { border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan); }
.route__history summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
.route__history summary::-webkit-details-marker { display: none; }
.route__history summary:hover, .route__history summary:focus-visible { color: var(--magenta); }
.route__history summary:active { color: var(--purple); }
/* Native details owns both labels and the continuing plus/minus strokes. */
.history-label { display: grid; }
.history-label > span { grid-area: 1 / 1; }
.history-label__open { visibility: hidden; }
.route__history[open] .history-label__closed { visibility: hidden; }
.route__history[open] .history-label__open { visibility: visible; }
.disclosure-icon { position: relative; width: 20px; height: 20px; flex: none; }
.disclosure-icon::before, .disclosure-icon::after { content: ""; position: absolute; background: currentColor; }
.disclosure-icon::before { width: 16px; height: 2px; left: 2px; top: 9px; }
.disclosure-icon::after { width: 2px; height: 16px; left: 9px; top: 2px; transform: scaleY(1); transition: transform var(--control-duration) var(--control-ease); }
.route__history[open] .disclosure-icon::after { transform: scaleY(0); }
.route__years { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-block: 12px 24px; }
.route__years h3 { font-size: 22px; margin-bottom: 12px; }
.route__years .stop { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; border-top: 1px solid var(--paper); }
.route__years .stop__month { font-size: 13px; color: var(--ink-2); }
.route__years .stop__city { font-size: 17px; font-weight: 600; }

.videos { padding-bottom: 80px; }
.videos__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.vid video { width: 100%; background: var(--ink); }
.vid--wide video { aspect-ratio: 16 / 9; }
.vid--tall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 20px; align-items: end; }
.vid--tall video { aspect-ratio: 9 / 16; object-fit: contain; }
.vid--tall figcaption { flex-direction: column; margin-top: 0; gap: 8px; padding-bottom: 4px; }
.vid figcaption { padding-top: 12px; border-top: 1px solid var(--tan); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; }
.vid figcaption .caption-meta { color: var(--ink-2); font-size: var(--detail-size); line-height: var(--detail-leading); }
.vid figcaption strong { font-weight: 600; }

.contact { background: var(--ink); color: var(--cream); }
.contact__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; padding-block: 64px; }
.contact .eyebrow { color: var(--yellow); margin-bottom: 20px; }
.contact h2 { font-size: clamp(40px, 5.4vw, 76px); }
.contact__paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact__paths h3 { font-family: var(--body); font-size: 17px; letter-spacing: 0; }
.contact__paths p { font-size: 15px; margin-top: 8px; }
.contact__paths .button { grid-column: 1 / -1; justify-self: start; }
.contact__paths .contact__note { grid-column: 1 / -1; margin-top: -16px; font-size: 12px; }

@media (max-width: 1100px) {
  .top { gap: 20px; }
  .mark { width: 184px; }
  .hero__heading { gap: 32px; }
  .hero__exhibition { grid-template-columns: 1.1fr 1fr; }
  .event { padding: 24px; }
  .event__facts { max-width: 30ch; }
  .intro, .people__inner, .route, .contact__inner { gap: 48px; }
  .exhibits { gap: 20px; }
  .exhibit h3 { font-size: 18px; }
  .details-strip { gap: 32px; }
  .details-strip figure { grid-template-columns: 112px 1fr; gap: 16px; }
  .details-strip img { width: 112px; height: 96px; }
  .people__photos { gap: 16px; }
  .people__small { margin-top: 80px; }
}
@media (max-width: 850px) {
  .hero { padding-top: 32px; }
  .hero__heading { align-items: flex-start; }
  .hero__intro { font-size: 16px; max-width: 23ch; padding-top: 24px; }
  .hero__subtitle { font-size: 28px; }
  .hero__exhibition { grid-template-columns: 1fr 1fr; }
  .hero__portrait { min-height: 440px; }
  .hero__portrait figcaption { flex-direction: column; gap: 0; padding: 12px; }
  .event { padding: 20px; }
  .event h2 { font-size: 40px; }
  .event__date > span:first-child { font-size: 60px; }
  .event__venue p { font-size: 14px; }
  .event__facts { font-size: 14px; }
  .intro, .route { gap: 32px; padding-block: 56px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 12px; }
  .exhibits { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .exhibit--craft { padding-top: 48px; }
  .exhibit--food { grid-column: 1 / -1; padding-top: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
  .exhibit--food .exhibit__image { aspect-ratio: 4 / 3; }
  .exhibit--food img { object-position: 50% 42%; }
  .details-strip { margin-top: 32px; gap: 24px; }
  .details-strip figure { display: block; }
  .details-strip img { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .details-strip figcaption { margin-top: 12px; }
  .people__inner { gap: 32px; grid-template-columns: 1fr 1fr; padding-block: 48px; }
  .people__text .eyebrow { font-size: 10px; }
  .people__text h2 { font-size: 48px; }
  .people__text > p:not(.eyebrow) { font-size: 16px; }
  .people__photos { gap: 12px; }
  .people__small { margin-top: 96px; }
  .people__photos figcaption { font-size: var(--detail-size); }
  .route__intro p { font-size: 16px; }
  .route__years { gap: 20px; }
  .videos__grid { gap: 24px; grid-template-columns: 1.4fr 1fr; }
  .vid--tall { grid-template-columns: minmax(0, 1fr); }
  .vid--tall video { max-height: 320px; }
  .contact__inner { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 48px; }
  .contact__paths { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  html { scroll-padding-top: 20px; }
  body { font-size: 16px; }
  .top { padding-block: 8px; gap: 12px; }
  .mark { width: 164px; }
  .hero { padding-top: 28px; }
  .hero__heading { display: block; padding-bottom: 24px; }
  .hero__heading .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(72px, 22.5vw, 130px); line-height: .88; }
  .hero__subtitle { font-size: clamp(23px, 6.6vw, 34px); margin-top: 8px; letter-spacing: -.04em; }
  .hero__intro { font-size: 15px; max-width: 40ch; padding-top: 16px; }
  .hero__exhibition { display: flex; flex-direction: column; }
  .event { padding: 20px; }
  .event__topline { font-size: 11px; gap: 8px; }
  .event h2 { font-size: 38px; margin-top: 16px; }
  .event__date { margin-top: 4px; margin-bottom: 16px; display: flex; align-items: center; gap: 20px; }
  .event__date > span:first-child { font-size: 56px; flex: none; }
  .event__date > span:last-child { font-size: 14px; max-width: 10ch; margin-top: 0; line-height: 1.25; }
  .event__venue h3 { font-size: 16px; }
  .event__venue p { font-size: 14px; margin-top: 4px; max-width: 39ch; }
  .event__facts { font-size: 14px; max-width: none; margin-block: 16px; }
  .event__facts span { margin-inline: 2px; }
  .hero__portrait { min-height: 0; aspect-ratio: 1.2 / 1; }
  .hero__photos { padding-bottom: 39px; }
  .hero__portrait figcaption { flex-direction: row; font-size: 11px; gap: 12px; }
  .intro { grid-template-columns: 1fr; gap: 24px; padding-block: 48px; }
  .intro h2 { font-size: 38px; }
  .intro__copy { font-size: 16px; }
  .intro__copy p + p { margin-top: 12px; }
  .find { padding-bottom: 48px; }
  .section-heading { margin-bottom: 24px; padding-top: 20px; }
  .section-heading h2 { max-width: 15ch; font-size: 32px; }
  .section-heading > p { font-size: 14px; margin-top: 8px; }
  .exhibits { gap: 24px 16px; }
  .exhibit--textile .exhibit__image { aspect-ratio: 3 / 5; }
  .exhibit--craft { padding-top: 40px; }
  .exhibit--craft .exhibit__image { aspect-ratio: 3 / 4; }
  .exhibit--craft img { object-position: 52% 50%; }
  .exhibit figcaption { display: block; padding-top: 12px; }
  .exhibit__number { display: block; margin: 0 0 4px; font-size: var(--detail-size); }
  .exhibit h3 { font-size: 18px; letter-spacing: -.02em; }
  .exhibit p { font-size: 13px; }
  .exhibit--food { grid-template-columns: 1.1fr 1fr; gap: 16px; }
  .exhibit--food .exhibit__image { aspect-ratio: 4 / 5; }
  .exhibit--food img { object-position: 50% 40%; }
  .exhibit--food figcaption { margin-top: 0; padding-top: 12px; }
  .details-strip { gap: 16px; }
  .details-strip img { aspect-ratio: 4 / 3; }
  .details-strip h3 { font-size: 18px; }
  .details-strip p { font-size: 13px; }
  .people__inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-block: 40px; }
  .people__text .eyebrow { margin-bottom: 20px; }
  .people__text h2 { font-size: 48px; }
  .people__text > p:not(.eyebrow) { max-width: 34ch; margin-top: 20px; }
  .people__text .text-link { margin-top: 12px; }
  .people__photos { gap: 16px; grid-template-columns: 1.15fr 1fr; }
  .people__large img { aspect-ratio: 4 / 5; }
  .people__small { margin-top: 32px; }
  .people__small img { aspect-ratio: 1 / 1; }
  .people__photos figcaption { font-size: var(--detail-size); }
  .route { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
  .route__intro h2 { font-size: 38px; }
  .route__intro h2 br { display: none; }
  .route__intro p { margin-top: 16px; max-width: 40ch; }
  .timeline--featured .stop__city { font-size: 40px; }
  .route__history summary { min-height: 56px; font-size: 14px; }
  .route__years { gap: 24px; }
  .route__years .stop__city { font-size: 16px; }
  .videos { padding-bottom: 48px; }
  .videos__grid { grid-template-columns: 1fr; gap: 28px; }
  .vid figcaption { font-size: 13px; }
  .vid--tall { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: end; }
  .vid--tall video { aspect-ratio: 9 / 16; max-height: none; }
  .vid--tall figcaption { flex-direction: column; margin-top: 0; gap: 8px; padding-bottom: 4px; }
  .contact__inner { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .contact h2 { font-size: 48px; }
  .contact__paths { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .contact__paths h3 { font-size: 15px; }
  .contact__paths p { font-size: 14px; }
  .contact__paths .button { justify-self: stretch; }
  .contact__paths .contact__note { margin-top: -12px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .mark { width: 144px; }
  .event { padding: 16px; }
  .event__date { gap: 16px; }
  .vid--tall { grid-template-columns: 136px 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .disclosure-icon::after { transition: none; }
}

/* ---------- Site shell: sticky header, menu and footer ---------- */
.people :focus-visible, .contact :focus-visible, .band :focus-visible, .lightbox :focus-visible { outline-color: var(--cream); }
.top { position: sticky; top: 0; z-index: 30; }
.nav { gap: 22px; margin-right: 8px; }
.nav a { font-size: 15px; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--magenta); }
.header-visit { flex: none; gap: 8px; padding: 6px 14px; min-height: 40px; border-radius: 999px; background: var(--yellow); font-size: 14px; transition: background-color var(--control-duration) var(--control-ease); }
.header-visit:hover, .header-visit:focus-visible { background: var(--ink); color: var(--cream); }
.header-visit:active { background: var(--ink-2); color: var(--cream); }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; margin-left: auto; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; }
.menu-toggle__icon { position: relative; width: 22px; height: 14px; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform var(--control-duration) var(--control-ease); }
.menu-toggle__icon::before { top: 2px; }
.menu-toggle__icon::after { bottom: 2px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-4px) rotate(-45deg); }
.event__today { font-size: 14px; margin: -8px 0 20px; max-width: 34ch; }
.event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; width: 100%; margin-top: auto; }
.event__actions .button { flex: 1 1 200px; }
.live--closed .live__dot { background: transparent; border: 1px solid var(--ink); }

.foot { background: var(--paper); margin-top: 0; }
.foot__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-block: 56px 32px; }
.mark--foot { width: 220px; }
.foot__identity > p { max-width: 40ch; font-size: 14px; margin-top: 16px; color: var(--ink-2); }
.foot__col { display: flex; flex-direction: column; }
.foot__col h2 { font: 700 12px/1.4 var(--body); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; }
.foot__col a:hover, .foot__col a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 16px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--tan); font-size: 13px; color: var(--ink-2); }
.foot__base p { margin-right: auto; }
.foot__base a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__base .text-link { font-size: 13px; gap: 12px; }

/* ---------- Shared page building blocks ---------- */
.page-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: end; padding-block: 56px 48px; }
.page-hero h1 { font-size: clamp(48px, 6.6vw, 108px); line-height: .95; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero__lead { font-size: clamp(17px, 1.45vw, 21px); max-width: 46ch; margin-top: 24px; }
.page-hero__meta { margin-top: 20px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.page-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; background: var(--paper); }
.page-hero__media figcaption, .tall-figure figcaption, .mosaic figcaption, .drinks figcaption { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tan); font-size: var(--detail-size); line-height: var(--detail-leading); color: var(--ink-2); }
.page-hero__media--video video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.page-hero--compact { grid-template-columns: minmax(0, 1fr); }
.page-hero--compact h1 { max-width: 15ch; }
.page-hero--compact .button-row { margin-top: 32px; }
.status-card { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 32px; background: var(--yellow); }
.status-card[data-phase="past"], .status-card[data-phase="closed"] { background: var(--paper); }
.status-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid currentColor; }
.status-card__state { font-family: var(--display); font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; margin-top: 20px; }
.status-card__detail { margin-top: 12px; font-size: 16px; max-width: 34ch; }
.status-card__day { margin-top: 16px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.status-card__note { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.subnav { display: flex; gap: 8px 28px; overflow-x: auto; scrollbar-width: none; border-block: 1px solid var(--tan); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.subnav a:hover, .subnav a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.block { padding-block: 56px; }
.block + .block { padding-top: 0; }
.block--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.section-heading--stack { display: block; }
.section-heading--stack > p { margin-top: 8px; }
.fineprint { margin-top: 20px; max-width: 72ch; font-size: 14px; color: var(--ink-2); }
.prose p + p { margin-top: 16px; }
.prose--large { font-size: clamp(17px, 1.4vw, 20px); }
.prose--doc { max-width: 70ch; }
.prose--doc h3 { margin: 32px 0 8px; font-size: 22px; }
.prose--doc h3:first-child { margin-top: 0; }
.prose a, .fineprint a, .faq a, .index-list a, .band a:not(.button), .tips a { text-decoration-thickness: 1px; }
.prose a:hover, .fineprint a:hover, .faq a:hover, .index-list a:hover, .band a:not(.button):hover { text-decoration-thickness: 3px; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button--outline { background: transparent; color: var(--ink); border-color: var(--ink); cursor: pointer; }
.button--outline:hover { background: var(--ink); color: var(--cream); }
.button--outline:active { background: var(--ink-2); color: var(--cream); }
button.button { font-family: var(--body); cursor: pointer; }
.share-status { min-height: 24px; margin-top: 12px; font-size: 14px; font-weight: 600; }

/* Numbers strip on the home page */
.facts { padding-block: 40px 0; }
.facts__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 0; border-top: 2px solid var(--ink); padding-top: 20px; }
.facts__list dt { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.facts__list dd { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); max-width: 22ch; }

/* Explore tiles */
.explore { padding-bottom: 80px; }
.explore__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tile { display: block; text-decoration: none; }
.tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper); transition: opacity var(--control-duration) var(--control-ease); }
.tile__text { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tan); }
.tile__title { display: block; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.tile__meta { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.tile:hover .tile__title, .tile:focus-visible .tile__title { text-decoration: underline; text-decoration-thickness: 2px; }
.tile:hover img { opacity: .9; }
.exhibit h3 a { text-decoration: none; }
.exhibit h3 a:hover, .exhibit h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.exhibit__image { display: block; }

/* Visit: hours, days, map, tips, FAQ */
.hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hours__card { padding: 28px; border: 1px solid var(--tan); background: #fff; }
.hours__card.is-open { border-color: var(--ink); box-shadow: inset 0 4px 0 var(--green); }
.hours__card h3 { font-size: 20px; }
.hours__time { margin-top: 12px; font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.hours__status { margin-top: 16px; font-size: 15px; font-weight: 600; }
.hours__card.is-open .hours__status { color: var(--green); }
.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.day { display: flex; flex-direction: column; gap: 2px; min-height: 148px; padding: 14px 12px; border-top: 3px solid var(--ink); background: #fff; }
.day--weekend { background: var(--paper); }
.day--today { background: var(--yellow); }
.day--past { opacity: .55; }
.day__name { font-size: 13px; font-weight: 600; }
.day__num { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.day__tag { margin-top: auto; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.day--today .day__tag { color: var(--ink); font-weight: 600; }
.address { font-style: normal; font-size: 18px; line-height: 1.5; }
.address strong { display: block; font-family: var(--display); font-size: 26px; letter-spacing: -.03em; margin-bottom: 4px; }
.address__note { margin: 12px 0 24px; font-weight: 700; font-size: 15px; }
.map { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--tan); }
.map__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; font-size: 15px; color: var(--ink-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 32px; }
.tips li { padding-top: 16px; border-top: 1px solid var(--tan); }
.tips h3 { font-size: 19px; }
.tips p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--tan); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq summary:focus-visible { color: var(--magenta); }
.faq details[open] .disclosure-icon::after { transform: scaleY(0); }
.faq details p { max-width: 70ch; padding-bottom: 24px; color: var(--ink-2); }

/* Crafts */
.crafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.craft img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper); }
.craft > div { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tan); }
.craft h3 { font-size: 21px; }
.craft p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.mosaic { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: 20px; align-items: start; }
.mosaic img { width: 100%; height: auto; object-fit: cover; background: var(--paper); }
.mosaic__a img { aspect-ratio: 4 / 5; }
.mosaic__b { margin-top: 80px; }
.mosaic__b img { aspect-ratio: 3 / 4; }
.mosaic__c img { aspect-ratio: 3 / 2; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-top: 40px; max-width: 1100px; }
.index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.index-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.index-list li { padding-top: 14px; border-top: 1px solid var(--tan); }
.index-list h3 { font-size: 19px; }
.index-list p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.band { background: var(--purple); color: var(--cream); }
.band__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-block: 64px; align-items: start; }
.band .eyebrow { color: var(--yellow); margin-bottom: 16px; }
.band h2 { font-size: clamp(36px, 4.6vw, 64px); }
.band p + p, .band p + .button, .band p + ol { margin-top: 16px; }
.band .button { margin-top: 24px; }
.steps { list-style: none; counter-reset: step; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps li { counter-increment: step; padding-top: 14px; border-top: 2px solid var(--ink); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: var(--detail-size); color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.steps h3 { font-size: 19px; }
.steps p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* Food */
.moles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.mole { padding-top: 16px; border-top: 1px solid var(--tan); }
.mole__swatch { display: block; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.mole--negro { --swatch: #2a1a14; }
.mole--coloradito { --swatch: #8a2c1c; }
.mole--rojo { --swatch: #b3261e; }
.mole--amarillo { --swatch: #e0a526; }
.mole--verde { --swatch: #4f7a2a; }
.mole--chichilo { --swatch: #4a3328; }
.mole--almendrado { --swatch: #b5683a; }
.mole h3 { font-size: 24px; }
.mole p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { padding-block: 16px; border-top: 1px solid var(--tan); }
.menu h3 { font-size: 20px; }
.menu p { margin-top: 4px; font-size: 15px; color: var(--ink-2); max-width: 54ch; }
.tall-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper); }
.drinks { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.drinks img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* Activities */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin: 0; }
.figures div { padding-top: 14px; border-top: 2px solid var(--ink); }
.figures dt { font-family: var(--display); font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.figures dd { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.figures--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: end; }
.rifa-steps { margin: 16px 0 0; padding-left: 22px; }
.rifa-steps li + li { margin-top: 8px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--tan); }

/* Regions */
.regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 48px; }
.region { padding-top: 18px; border-top: 6px solid var(--region); scroll-margin-top: 96px; }
.region__num { display: block; font-size: var(--detail-size); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.region h3 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 4px; }
.region p { margin-top: 10px; max-width: 58ch; }
.region__find { font-size: 15px; color: var(--ink-2); }
.region__find span { font-weight: 700; color: var(--ink); }

/* History and press */
.history { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.history__item { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--tan); }
.history__item.stop--now { background: var(--yellow); padding-inline: 16px; }
.history__item:not(.history__item--now) .stop__tag { display: none; }
.history__date { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.history__item h3 { font-size: 22px; }
.history__item p { margin-top: 4px; font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.history__item.stop--now p { color: var(--ink); }
.press { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.press a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--tan); text-decoration: none; }
.press a > .link-arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 20px; height: 20px; }
.press__source { grid-column: 1; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.press__title { grid-column: 1; font-family: var(--display); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; line-height: 1.2; font-weight: 600; }
.press__note { grid-column: 1; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.press a:hover .press__title, .press a:focus-visible .press__title { text-decoration: underline; text-decoration-thickness: 2px; }

/* Participate */
.offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.offer li { padding-top: 16px; border-top: 2px solid var(--ink); }
.offer__num { display: block; font-family: var(--display); font-size: clamp(40px, 4vw, 56px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--magenta); }
.offer h3 { margin-top: 12px; font-size: 20px; }
.offer p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.channels { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.form { padding: 32px; background: #fff; border: 1px solid var(--tan); }
.field + .field { margin-top: 20px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field__optional { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea, .composer-result textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ink-2); border-radius: 0; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--body); }
.field textarea, .composer-result textarea { resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .composer-result textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.field__hint { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.field__error { margin-top: 6px; font-size: 14px; font-weight: 600; color: #a3160d; }
.form > .button { margin-top: 24px; }
.composer-result { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--ink); }
.composer-result:focus { outline: none; }
.composer-result h3 { font-size: 22px; }
.composer-result p { margin: 6px 0 12px; font-size: 15px; }
.composer-result .button-row { margin-top: 12px; }

/* Gallery and viewer */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters[hidden] { display: none; }
.filters button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; }
.filters button:hover { background: var(--paper); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.gallery { list-style: none; margin: 0; padding: 0; columns: 4 240px; column-gap: 16px; }
.gallery__item { break-inside: avoid; margin-bottom: 16px; }
.gallery__item[hidden] { display: none; }
.gallery__link { display: block; background: var(--paper); }
.gallery__link img { width: 100%; height: auto; transition: opacity var(--control-duration) var(--control-ease); }
.gallery__link:hover img { opacity: .88; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgb(20 14 10 / .97); color: var(--cream); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgb(0 0 0 / .7); }
.lightbox__figure { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.lightbox__figure figcaption { font-size: 15px; text-align: center; }
.lightbox__controls { display: flex; justify-content: center; align-items: center; gap: 16px; padding-bottom: env(safe-area-inset-bottom); }
.lightbox__controls button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--cream); border-radius: 50%; background: transparent; color: var(--cream); cursor: pointer; }
.lightbox__controls button:hover { background: var(--cream); color: var(--ink); }
.lightbox__controls .link-arrow { width: 20px; height: 20px; }
.lightbox__count { min-width: 64px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.lightbox__controls [data-lightbox-close] { margin-left: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .menu-toggle { display: inline-flex; order: 3; margin-left: 0; }
  .header-visit { order: 2; margin-left: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--gutter) 24px; background: var(--cream); border-bottom: 1px solid var(--tan); box-shadow: 0 16px 32px rgb(31 22 17 / .08); }
  .menu-open .nav { display: flex; }
  .nav a { min-height: 52px; font-family: var(--display); font-size: 24px; letter-spacing: -.03em; border-bottom: 1px solid var(--paper); }
  .facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .moles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__inner { grid-template-columns: 1fr 1fr 1fr; }
  .foot__identity { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
  .page-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 32px; }
  .page-hero__media img { aspect-ratio: 4 / 3; max-height: 520px; }
  .status-card { padding: 24px; }
  .block { padding-block: 44px; }
  .block--split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .crafts, .tips, .index-list, .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-list--wide { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic__c { grid-column: 1 / -1; }
  .mosaic__b { margin-top: 48px; }
  .columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .band__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 48px; }
  .regions { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .drinks { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; }
  .history__item { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .hours { gap: 16px; }
  .hours__card { padding: 22px; }
}
@media (max-width: 600px) {
  .header-visit { display: none; }
  .menu-toggle { margin-left: auto; }
  .page-hero { padding-block: 32px 28px; }
  .page-hero h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .page-hero__lead { margin-top: 16px; }
  .page-hero__media img { aspect-ratio: 4 / 5; }
  .status-card__state { font-size: 34px; }
  .block { padding-block: 36px; }
  .facts { padding-top: 32px; }
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .facts__list div:last-child { grid-column: 1 / -1; }
  .explore { padding-bottom: 48px; }
  .explore__grid { gap: 24px 16px; }
  .tile__title { font-size: 18px; }
  .tile__meta { font-size: 13px; }
  .hours { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px; }
  .day__num { font-size: 30px; order: -1; }
  .day__tag { flex-basis: 100%; margin-top: 0; }
  .map { aspect-ratio: 1 / 1; }
  .button-row .button { flex: 1 1 100%; }
  .tips, .index-list, .offer, .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .crafts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .craft h3 { font-size: 17px; }
  .craft p { font-size: 14px; }
  .moles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .mole h3 { font-size: 20px; }
  .mole p { font-size: 14px; }
  .drinks { grid-template-columns: minmax(0, 1fr); }
  .drinks figure img { aspect-ratio: 4 / 3; }
  .figures--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history__item { grid-template-columns: minmax(0, 1fr) auto; }
  .history__date { grid-column: 1 / -1; }
  .history__item .stop__tag { grid-row: 1; grid-column: 2; }
  .press a { gap: 4px 16px; }
  .faq summary { font-size: 16px; min-height: 56px; }
  .form { padding: 20px; margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .gallery { columns: 2; column-gap: 8px; }
  .gallery__item { margin-bottom: 8px; }
  .lightbox { padding: 8px; }
  .lightbox__controls { gap: 8px; }
  .lightbox__controls [data-lightbox-close] { margin-left: 8px; }
  .foot__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 24px; }
  .foot__col:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
  .foot__col:last-child h2 { flex-basis: 100%; }
  .foot__base p { flex-basis: 100%; }
  .event__actions .button { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .crafts, .moles { grid-template-columns: minmax(0, 1fr); }
  .figures--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__icon::before, .menu-toggle__icon::after, .tile img, .gallery__link img, .header-visit { transition: none; }
}
.craft img.craft__img--low { object-position: 50% 88%; }

/* ---------- Color: "Faja, campos y sello" (direction C plus color; Santiago 10-14 19:1x CDMX: "mitigate the visual thing on all white background. use fun elements and use secondary and terciary colours"). ----------
   Three steps of each logo color, the way the letters are built:
   primary = the letter (logo word, greca belt, area labels, photo plates, the +50 seal),
   secondary = the lighter greca inside the letter (light section grounds and tiles, ink text),
   tertiary = the dark shade under the letter (dark bands, white text).
   Each band of the page uses one hue family; cream only where the logo word or the photos need room. */
:root {
  --greca: url("assets/greca.svg");
  --ground: #fcf3e2;
  --rosa-claro: #ff9fd4; --amarillo-claro: #fff27a; --rojo-claro: #ff9d90; --verde-claro: #86e2ad; --morado-claro: #c9a6e6; --naranja-claro: #ffb48f;
  --rosa-hondo: #680a40; --rojo-hondo: #6a1411; --verde-hondo: #0b4a2b; --morado-hondo: #36134c; --naranja-hondo: #6d2b0d;
  --belt: linear-gradient(90deg, var(--rosa) 0 40px, var(--amarillo) 0 80px, var(--rojo) 0 120px, var(--verde) 0 160px, var(--morado) 0 200px, var(--naranja) 0 240px) 0 0 / 240px 20px repeat-x;
}
body { background: var(--ground); }
main { position: relative; z-index: 0; overflow-x: clip; }

/* A full-width field behind a centered section. */
.intro, .find, .route, .page-hero { position: relative; }
.intro::before, .page-hero::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--field); z-index: -1; }

/* The belt: greca units in logo order, under the header and over the footer. */
.top { border-bottom: 0; box-shadow: 0 26px 0 var(--ground); }
.top::after, .foot::before { content: ""; position: absolute; left: 0; right: 0; height: 20px; pointer-events: none; background: var(--belt);
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }
.top::after { bottom: -26px; z-index: 2; }
.hero { padding-top: 72px; }
.nav a[aria-current="page"] { color: var(--ink); }
.header-visit { background: var(--morado-hondo); color: #fff; }
.header-visit:hover, .header-visit:focus-visible { background: var(--rosa-fuerte); }

/* One-color greca band along the top of a dark field, primary on its own tertiary. */
.feature-video, .contact { position: relative; }
.feature-video::before, .contact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--band); pointer-events: none;
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }

/* Home word: the six logo letters with the logo's dark offset shadow. */
.hero__word > span { text-shadow: .03em .03em 0 var(--ink); }
.hero__word > span:nth-child(1) { color: var(--rosa); }
.hero__word > span:nth-child(2) { color: var(--amarillo); }
.hero__word > span:nth-child(3) { color: var(--rojo); }
.hero__word > span:nth-child(4) { color: var(--verde); }
.hero__word > span:nth-child(5) { color: var(--morado); }
.hero__word > span:nth-child(6) { color: var(--naranja); }

/* Metepec card on morado hondo; the dates in amarillo. */
.event { background: var(--morado-hondo); color: #fff; }
.event .live__dot { background: var(--amarillo); }
.event__date > span:first-child { color: var(--amarillo); }
.event :focus-visible { outline-color: var(--amarillo); }

.hero__portrait { background: none; }

/* The +50 seal from the logo, as a flat sticker on the hero photos. */
.seal { position: absolute; z-index: 2; top: -28px; right: 20px; display: grid; place-content: center; width: 112px; height: 112px; border-radius: 50%; background: var(--rojo); color: #fff; text-align: center; line-height: 1; transform: rotate(-10deg); box-shadow: inset 0 0 0 5px var(--rojo), inset 0 0 0 7px var(--amarillo), 4px 4px 0 var(--ink); }
.seal b { font: 700 40px/1 var(--display); letter-spacing: -.05em; color: var(--amarillo); }
.seal span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

/* Buttons: a flat two-stop gradient, no shine, glow or bevel (desk n171). */
.button { background: linear-gradient(90deg, var(--rosa-fuerte), var(--rojo-fuerte)); color: #fff; }
.button:hover { background: var(--morado); }
.button:active { background: var(--morado-hondo); }
.event .button { background: linear-gradient(90deg, var(--rosa-fuerte), var(--rojo-fuerte)); color: #fff; }
.event .button:hover { background: var(--rosa); color: var(--ink); }
.button--light, .contact .button--light { background: var(--amarillo); color: var(--ink); }
.button--light:hover, .contact .button--light:hover { background: #fff; }

/* Video on rosa hondo with a rosa greca along its top edge. */
.feature-video { background: var(--rosa-hondo); color: #fff; --band: var(--rosa); }
.feature-video__inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: center; padding-block: 88px 72px; }
.feature-video .eyebrow { margin-bottom: 20px; color: var(--rosa-claro); }
.feature-video h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.01; }
.feature-video__text > p:not(.eyebrow) { max-width: 34ch; margin-top: 20px; }
.feature-video__text .text-link { margin-top: 12px; }
.feature-video :focus-visible { outline-color: #fff; }
.feature-video__player video { width: 100%; aspect-ratio: 16 / 9; background: #000; box-shadow: 10px 10px 0 var(--rosa); }
.feature-video__player figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .35); font-size: 14px; }

/* Facts: five woven labels, each a secondary tile edged in its own primary greca. */
.facts { padding-block: 48px; }
.facts__list { border-top: 0; padding-top: 0; gap: 16px; }
.facts__list > div { position: relative; padding: 20px 20px 40px; background: var(--claro); }
.facts__list > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: var(--fuerte);
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }
.facts__list > div:nth-child(1) { --claro: var(--rosa-claro); --fuerte: var(--rosa); }
.facts__list > div:nth-child(2) { --claro: var(--verde-claro); --fuerte: var(--verde); }
.facts__list > div:nth-child(3) { --claro: var(--naranja-claro); --fuerte: var(--naranja); }
.facts__list > div:nth-child(4) { --claro: var(--morado-claro); --fuerte: var(--morado); }
.facts__list > div:nth-child(5) { --claro: var(--rojo-claro); --fuerte: var(--rojo); }
.facts__list dd { color: var(--ink); }

/* Intro on amarillo claro. */
.intro { --field: var(--amarillo-claro); }
.intro__copy p + p { color: var(--ink); }

/* Photos below the hero sit on a hard plate of a logo color, like the letters sit on their shadow.
   Exhibits: each photo on its plate, the number in a solid disc of the same color. */
.exhibit__image { overflow: visible; background: none; }
.exhibit__image img { box-shadow: 8px 8px 0 var(--c); }
.exhibit--textile { --c: var(--rosa); }
.exhibit--craft { --c: var(--verde); }
.exhibit--food { --c: var(--naranja); }
.find .section-heading { border-top: 0; padding-top: 72px; }
.exhibit figcaption { border-top: 0; margin-top: 20px; padding-top: 0; }
.exhibit__number { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 0; border-radius: 50%; background: var(--c); color: var(--ink); font-weight: 700; }

/* Explore tiles: the area's secondary color as the label plate under each photo. */
.tile__text { margin-top: 0; padding: 14px 16px 18px; border-top: 0; background: var(--claro); min-height: 104px; }
.tile__meta { color: var(--ink); }
.tile img { display: block; }
.tile:hover img { opacity: 1; }
.tile[href="visita.html"] { --claro: var(--amarillo-claro); }
.tile[href="actividades.html"] { --claro: var(--rojo-claro); }
.tile[href="oaxaca.html"] { --claro: var(--verde-claro); }
.tile[href="galeria.html"] { --claro: var(--morado-claro); }

/* People on naranja claro, photos on rosa and morado plates. */
.people { background: var(--naranja-claro); color: var(--ink); }
.people__inner { padding-block: 72px; }
.people :focus-visible { outline-color: var(--ink); }
.people__large img { box-shadow: 8px 8px 0 var(--rosa); }
.people__small img { box-shadow: 8px 8px 0 var(--morado); }

.timeline--featured { border-top-color: var(--ink); }
.stop__tag { background: var(--rosa-claro); }
.stop--now .stop__tag { background: var(--amarillo); }

/* Contact on verde hondo with a verde greca; footer on morado hondo under the belt. */
.contact { background: var(--verde-hondo); color: #fff; --band: var(--verde); }
.contact__inner { padding-block: 88px 72px; }
.contact .eyebrow { color: var(--amarillo); }
.contact :focus-visible { outline-color: #fff; }
.foot { position: relative; background: var(--morado-hondo); color: #fff; border-top: 0; padding-top: 44px; }
.foot::before { top: 0; }
.foot__inner { padding-top: 40px; }
.foot__identity > p, .foot__base, .foot__base a { color: rgb(255 255 255 / .82); }
.foot__base { border-top-color: rgb(255 255 255 / .25); }
.foot :focus-visible { outline-color: var(--amarillo); }

/* Inner pages open on the area's secondary field; its primary appears once, as the solid label. */
body[data-page="visita"] { --page: var(--amarillo); --field: var(--amarillo-claro); }
body[data-page="expo"] { --page: var(--rosa); --field: var(--rosa-claro); }
body[data-page="cocina"] { --page: var(--naranja); --field: var(--naranja-claro); }
body[data-page="actividades"] { --page: var(--rojo); --field: var(--rojo-claro); }
body[data-page="oaxaca"] { --page: var(--verde); --field: var(--verde-claro); }
body[data-page="galeria"] { --page: var(--morado); --field: var(--morado-claro); --page-ink: #fff; }
body[data-page="nosotros"] { --page: var(--rosa-hondo); --field: var(--rosa-claro); --page-ink: #fff; }
body[data-page="participa"] { --page: var(--verde-hondo); --field: var(--verde-claro); --page-ink: #fff; }
body[data-page="privacidad"], body[data-page="404"] { --page: var(--morado-hondo); --field: var(--amarillo-claro); --page-ink: #fff; }
.page-hero { margin-bottom: 0; padding-top: 72px; padding-bottom: 64px; }
.page-hero .eyebrow { display: inline-block; padding: 6px 12px; background: var(--page, var(--ink)); color: var(--page-ink, var(--ink)); }
.page-hero__media img { box-shadow: 8px 8px 0 var(--page, var(--rosa)); }
.page-hero__media figcaption { border-top-color: var(--ink); }
.status-card { background: var(--morado-hondo); color: #fff; box-shadow: 8px 8px 0 var(--page, var(--rosa)); }
.status-card * { color: inherit; }

@media (max-width: 850px) {
  .feature-video__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 64px 48px; }
}
@media (max-width: 600px) {
  .feature-video__inner { padding-block: 56px 40px; }
  .feature-video h2 { font-size: 40px; }
  .facts { padding-block: 32px; }
  .facts__list { gap: 12px; }
  .facts__list > div { padding: 16px 14px 36px; }
  .seal { width: 84px; height: 84px; top: -20px; right: 12px; }
  .seal b { font-size: 30px; }
  .seal span { font-size: 10px; }
  .exhibit__image img, .people__large img, .people__small img, .page-hero__media img { box-shadow: 5px 5px 0 var(--c, var(--rosa)); }
  .people__small img { box-shadow: 5px 5px 0 var(--morado); }
  .page-hero__media img { box-shadow: 5px 5px 0 var(--page, var(--rosa)); }
  .feature-video__player video { box-shadow: 6px 6px 0 var(--rosa); }
  .tile__text { min-height: 0; padding: 12px 12px 14px; }
  .page-hero { padding-top: 56px; padding-bottom: 40px; }
  .find .section-heading { padding-top: 48px; }
}

@media (max-width: 1180px) {
  /* The open phone menu covers the belt instead of sliding under it. */
  .nav { z-index: 3; }
}

/* ---------- Review 10-14 19:5x: no pure white fields, no long cream runs, no loose lines. ---------- */
/* Header on the page ground; the traced mark has no plate of its own. */
.top { background: var(--ground); }
.mark { width: 232px; }

/* The +50 seal on rojo fuerte so "años" passes 4.5:1 in white. */
.seal { background: var(--rojo-fuerte); box-shadow: inset 0 0 0 5px var(--rojo-fuerte), inset 0 0 0 7px var(--amarillo), 4px 4px 0 var(--ink); }

/* Secondary lines live in a small label, never loose next to a heading. */
.section-heading > p { width: fit-content; padding: 6px 12px; background: var(--field, var(--amarillo-claro)); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.page-hero__media figcaption, .tall-figure figcaption, .mosaic figcaption, .drinks figcaption, .people__photos figcaption { width: fit-content; margin-top: 16px; padding: 4px 10px; border-top: 0; background: var(--ink); color: var(--cream); }

/* Woven tiles: a secondary ground edged in its own primary greca (same as the home facts). */
.tips { gap: 16px; }
.tips li, .hours__card { position: relative; padding: 20px 20px 44px; border: 0; background: var(--claro); }
.tips li::after, .hours__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: var(--fuerte);
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }
.tips li:nth-child(6n+1), .hours__card[data-area="artesanos"] { --claro: var(--rosa-claro); --fuerte: var(--rosa); }
.tips li:nth-child(6n+2), .hours__card--food { --claro: var(--naranja-claro); --fuerte: var(--naranja); }
.tips li:nth-child(6n+3) { --claro: var(--verde-claro); --fuerte: var(--verde); }
.tips li:nth-child(6n+4) { --claro: var(--morado-claro); --fuerte: var(--morado); }
.tips li:nth-child(6n+5) { --claro: var(--amarillo-claro); --fuerte: var(--amarillo); }
.tips li:nth-child(6n+6) { --claro: var(--rojo-claro); --fuerte: var(--rojo); }
.tips p { color: var(--ink); }
.hours__card { padding: 28px 28px 52px; }
.hours__card.is-open { box-shadow: 8px 8px 0 var(--ink); }
.hours__card.is-open .hours__status { color: var(--ink); }

/* Calendar days and the form card off pure white. */
.day { background: var(--paper); }
.day--weekend { background: var(--rosa-claro); }
.day--today { background: var(--amarillo); }
.day__tag { color: var(--ink); }
.form { border: 0; background: var(--verde-claro); box-shadow: 8px 8px 0 var(--verde); }
.field__hint, .field__optional { color: var(--ink); }

/* Galeria: photos on rotating logo plates, filters as solid pills, videos on rosa hondo like the home video. */
.gallery { column-gap: 24px; }
.gallery__item { margin-bottom: 24px; }
.gallery__link { background: none; box-shadow: 6px 6px 0 var(--c); }
.gallery__item:nth-child(6n+1) { --c: var(--rosa); }
.gallery__item:nth-child(6n+2) { --c: var(--amarillo); }
.gallery__item:nth-child(6n+3) { --c: var(--rojo); }
.gallery__item:nth-child(6n+4) { --c: var(--verde); }
.gallery__item:nth-child(6n+5) { --c: var(--morado); }
.gallery__item:nth-child(6n+6) { --c: var(--naranja); }
.filters button { border: 0; background: var(--morado-claro); color: var(--ink); }
.filters button:hover { background: var(--morado); color: #fff; }
.filters button[aria-pressed="true"] { background: var(--morado-hondo); color: #fff; }
.videos { position: relative; padding-block: 88px 72px; color: #fff; }
.videos::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--rosa-hondo); z-index: -1; }
.videos::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 0; height: 20px; background: var(--rosa); pointer-events: none;
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }
.videos .section-heading { border-top: 0; padding-top: 0; }
.videos .section-heading > p { background: var(--rosa-claro); }
.videos :focus-visible { outline-color: #fff; }
.vid video { box-shadow: 8px 8px 0 var(--rosa); }
.vid figcaption { margin-top: 20px; border-top-color: rgb(255 255 255 / .35); }
.vid figcaption .caption-meta { padding: 2px 8px; background: var(--rosa-claro); color: var(--ink); }
.videos .fineprint { width: fit-content; margin-top: 40px; padding: 8px 14px; background: var(--amarillo); color: var(--ink); }

/* Nosotros: trajectory dates as labels, the current stop on amarillo claro, the press on a naranja claro field. */
.history__date { width: fit-content; padding: 3px 8px; background: var(--field, var(--paper)); }
.history__item.stop--now { background: var(--amarillo-claro); }
.history__item.stop--now .stop__tag { background: var(--ink); color: var(--amarillo); }
.block.block--field { position: relative; padding-block: 72px; }
.block--field::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--fill, var(--naranja-claro)); z-index: -1; }
.block--field .section-heading { border-top: 0; padding-top: 0; }
.block--field .press__source, .block--field .press__note { color: var(--ink); }
.block--field .press a { border-bottom-color: rgb(31 22 17 / .3); }

@media (max-width: 1100px) { .mark { width: 204px; } }
@media (max-width: 600px) {
  .mark { width: 184px; }
  .gallery { column-gap: 12px; }
  .gallery__item { margin-bottom: 12px; }
  .gallery__link { box-shadow: 4px 4px 0 var(--c); }
  .vid video { box-shadow: 5px 5px 0 var(--rosa); }
  .videos { padding-block: 56px 48px; }
  .hours__card { padding: 22px 22px 48px; }
  .form { margin-inline: 0; box-shadow: 5px 5px 0 var(--verde); }
  .block.block--field { padding-block: 48px; }
}
@media (max-width: 360px) { .mark { width: 164px; } }
/* The history tag sits in its own third column (the home timeline's grid rule would stretch it across the text). */
@media (min-width: 601px) { .history__item .stop__tag { grid-column: 3; grid-row: 1; justify-self: end; } }
/* Four tiles share one row instead of leaving a 3 + 1 orphan. */
@media (min-width: 851px) { .tips:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.history__item.stop--now { margin-inline: -16px; }
@media (max-width: 600px) {
  .history__item .history__date { grid-column: 1; grid-row: 1; }
  .history__item > div { grid-column: 1 / -1; }
  .history__item .stop__tag { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* ---------- Reels 10-14 20:1x: three planes on the home hero. ----------
   Back: the logo word, huge. Middle: the photos as Oaxacan arches (portales) rising over the word.
   Top: "Cómo llegar". The subtitle is a painted sign inside the picture, not a line under it. */
.hero--planes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 48px; align-items: start; padding-top: 56px; padding-bottom: 24px; }
.hero--planes .hero__lead { position: relative; container-type: inline-size; }
.hero--planes .hero__lead .eyebrow { margin-bottom: 12px; }
.hero--planes h1 { position: relative; z-index: 0; font-size: 32.5cqi; line-height: .8; letter-spacing: -.055em; white-space: nowrap; }
.hero--planes .hero__portrait { position: relative; z-index: 1; min-height: 0; margin-top: -11cqi; background: none; }
.hero--planes .hero__photos { position: relative; inset: auto; display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; padding: 0; height: 64cqi; }
.hero--planes .hero__photos img { border-radius: 999px 999px 0 0; }
.hero--planes .hero__photos img + img { margin-top: 9cqi; height: calc(100% - 9cqi); }
.hero--planes .seal { top: 2cqi; right: -18px; }
.hero--planes .hero__sign { position: absolute; z-index: 2; inset: auto auto 22px -12px; display: block; width: auto; max-width: 78%; padding: 12px 18px 14px; background: var(--amarillo); color: var(--ink); transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); }
.hero--planes .hero__subtitle { display: block; margin: 0; font-family: var(--display); font-size: clamp(24px, 6.4cqi, 46px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.hero--planes .hero__sign .caption-meta { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.hero--planes .hero__float { position: absolute; z-index: 3; right: -20px; bottom: 30%; gap: 20px; box-shadow: 4px 4px 0 var(--ink); }
.hero--planes .hero__intro { max-width: 44ch; margin-top: 28px; padding: 0; font-size: clamp(16px, 1.4vw, 20px); }
.hero--planes .event { grid-column: 2; grid-row: 1; align-self: start; margin-top: 30px; }
.hero--planes .event__actions { padding-top: 8px; }

@media (max-width: 850px) {
  .hero--planes { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; }
  .hero--planes .event { grid-column: 1; grid-row: auto; margin-top: 0; }
  .hero--planes .hero__float { right: 12px; bottom: auto; top: 44%; }
  .hero--planes .seal { right: 8px; }
}
@media (max-width: 600px) {
  .hero--planes { padding-top: 52px; gap: 28px; }
  .hero--planes .hero__lead .eyebrow { font-size: 10px; }
  .hero--planes .hero__photos { height: 86cqi; gap: 8px; }
  .hero--planes .hero__sign { inset: auto auto 16px -6px; max-width: 86%; padding: 10px 14px 12px; }
  .hero--planes .hero__subtitle { font-size: 26px; }
  .hero--planes .hero__float { top: auto; bottom: 37%; right: 8px; min-height: 44px; padding: 10px 14px; font-size: 15px; gap: 12px; }
  .hero--planes .hero__intro { margin-top: 20px; font-size: 15px; }
}

/* ---------- Reels 10-14 20:1x: the ten days as a printed program, not a table. ----------
   Day, leader dots, time at the right; what happens that day sits below as the aside. */
.days--program { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 0 64px; border-top: 2px solid var(--ink); }
.days--program .day { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: baseline; gap: 2px 12px; min-height: 0; padding: 16px 12px 14px; border-top: 0; border-bottom: 1px solid rgb(31 22 17 / .18); background: none; flex-direction: initial; }
.days--program .day__when { grid-column: 1; display: flex; align-items: baseline; gap: 8px; }
.days--program .day__name { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.days--program .day__num { order: 0; font-size: 26px; line-height: 1.1; }
.days--program .day__dots { grid-column: 2; align-self: baseline; height: 0; border-bottom: 3px dotted var(--ink); opacity: .45; transform: translateY(-5px); }
.days--program .day__time { grid-column: 3; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.days--program .day__tag { grid-column: 1 / -1; margin-top: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); font-weight: 400; }
.days--program .day--weekend .day__tag { color: var(--rosa-fuerte); font-weight: 700; }
.days--program .day--today { background: var(--amarillo); }
.days--program .day--today .day__tag { color: var(--ink); font-weight: 700; }
.days--program .day--today .day__tag::before { content: "Hoy · "; }
.days--program .day--past { opacity: 1; }
.days--program .day--past .day__when, .days--program .day--past .day__time { color: var(--ink-2); }
.days--program .day--past .day__dots { opacity: .2; }
@media (max-width: 850px) {
  .days--program { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 600px) {
  .days--program .day { padding: 14px 4px 12px; gap: 2px 8px; }
  .days--program .day__name, .days--program .day__num { font-size: 22px; }
  .days--program .day__time { font-size: 15px; }
  .days--program .day--today { padding-inline: 10px; margin-inline: -6px; }
}

/* ---------- Reels cut 2: the name lives inside the object (R12 "random", ALENA 15). ----------
   /cocina: each mole is a clay plate with its name written in the mole. /oaxaca: each region is a colored tile with its name huge inside. */
.moles { gap: 40px 24px; }
.mole { padding-top: 0; border-top: 0; }
.mole__plate { container-type: inline-size; position: relative; display: grid; place-content: center; justify-items: center; text-align: center;
  width: 100%; max-width: 240px; aspect-ratio: 1; margin-bottom: 16px; border-radius: 50%; color: var(--plate-ink, var(--cream));
  background: radial-gradient(circle closest-side, var(--swatch) 0 67%, #6e2c12 67.5% 70%, #b0562d 70.5% 100%); }
.mole__plate::after { content: ""; position: absolute; inset: 6%; border: 3px dotted rgb(251 244 233 / .7); border-radius: 50%; pointer-events: none; }
.mole__kind { font-size: clamp(9px, 5cqi, 12px); line-height: 1; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; opacity: .85; }
.mole .mole__plate h3 { font-size: clamp(15px, 11.5cqi, 30px); line-height: 1; letter-spacing: -.03em; margin-top: 4px; }
.mole--amarillo { --plate-ink: var(--ink); }
.mole p { max-width: 30ch; }

.regions { gap: 48px 32px; }
.region { padding-top: 0; border-top: 0; }
.region__tile { position: relative; display: flex; flex-direction: column; min-height: clamp(200px, 21vw, 300px); padding: 40px 24px 22px; margin-bottom: 18px; overflow: hidden;
  background: var(--region); color: var(--region-ink, var(--cream)); }
/* Woven greca along the top edge: texture only on the empty part of the tile. */
.region__tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: currentColor; opacity: .22;
  -webkit-mask: var(--greca) 0 0 / 40px 20px repeat-x; mask: var(--greca) 0 0 / 40px 20px repeat-x; }
.region .region__num { color: inherit; font-size: var(--detail-size); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.region .region__tile h3 { margin-top: auto; padding-top: 24px; font-size: clamp(40px, 5.2vw, 76px); line-height: .92; letter-spacing: -.045em; }
.region__alt { display: block; margin-top: 8px; font-size: .36em; letter-spacing: -.01em; line-height: 1.1; }
.region__tile + p { margin-top: 0; }

@media (max-width: 600px) {
  .moles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .mole__plate { margin-bottom: 12px; }
  .region__tile { min-height: 168px; padding: 36px 18px 18px; }
  .region .region__tile h3 { font-size: clamp(36px, 11vw, 52px); }
}

/* Root r26 review of cut 1 + reel 60-30-10: in the hero, cream is the 60, photos and ink the 30, the amarillo sign the one 10.
   "Cómo llegar" rides inside the sign as an ink button (top plane, no pink over the photos); the +50 seal turns ink, smaller and off the word. */
.hero--planes .hero__go { display: flex; width: max-content; margin-top: 12px; min-height: 44px; padding: 10px 16px; gap: 16px; font-size: 15px; background: var(--ink); color: var(--cream); }
.hero--planes .hero__go:hover { background: var(--ink-2); color: var(--cream); }
.hero--planes .seal { top: auto; bottom: 46%; right: -14px; width: 76px; height: 76px; background: var(--ink); transform: rotate(-8deg);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--amarillo); }
.hero--planes .seal b { font-size: 26px; }
.hero--planes .seal span { font-size: 9px; margin-top: 2px; }
@media (max-width: 850px) { .hero--planes .seal { right: 8px; } }
@media (max-width: 600px) {
  .hero--planes .seal { width: 64px; height: 64px; bottom: 50%; }
  .hero--planes .seal b { font-size: 22px; }
  .hero--planes .hero__go { margin-top: 10px; }
}

/* ---------- Reels cut 3. ----------
   Arches (ALENA 17): the opening photo of every inner page and the tall food photos take the Oaxacan portal shape.
   The gallery grid keeps whole rectangles: people open those photos to see them complete. */
.page-hero__media img, .tall-figure img, .drinks img { border-radius: 999px 999px 0 0; }
.page-hero__media--video video { border-radius: 0; }

/* Trayectoria as an explainer (V-DefOwqfyVvF): a tiny label and the evidence drawn as an instrument,
   one dot per edition on a 20-month line (March 2025 = 0, October 2026 = 19), counted from the list below it. */
.route-line { margin: 0 0 40px; padding: 24px 24px 20px; background: var(--paper); }
.route-line__label, .route-line__last { font-size: var(--detail-size); line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.route-line__track { position: relative; list-style: none; margin: 28px 8px 0; padding: 0; height: 16px; }
.route-line__track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink); }
.route-line__stop { position: absolute; top: 0; left: calc(var(--at) / 19 * 100%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.route-line__stop--last { background: var(--amarillo); box-shadow: 0 0 0 3px var(--paper), inset 0 0 0 2px var(--ink); }
.route-line__years { position: relative; height: 20px; margin: 10px 8px 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.route-line__years span { position: absolute; left: calc(var(--at) / 19 * 100%); transform: translateX(-8px); }
.route-line__last { margin-top: 12px; text-align: right; }
@media (max-width: 600px) {
  .route-line { padding: 20px 16px 16px; margin-bottom: 32px; }
  .route-line__stop { width: 12px; height: 12px; margin-left: -6px; }
  .route-line__track { height: 12px; }
  .route-line__track::before { top: 5px; }
}

/* Root r27 on cut 2: region tiles 35% shorter so the text sits near its name; Almendrado's fill lifted to almond tan with ink text,
   so it no longer melts into the clay rim. */
.region__tile { min-height: clamp(132px, 13.5vw, 195px); padding-top: 34px; }
.region .region__tile h3 { padding-top: 12px; }
.mole--almendrado { --swatch: #d39a5c; --plate-ink: var(--ink); }
@media (max-width: 600px) { .region__tile { min-height: 132px; padding-top: 32px; } }