/* ============================================================================
   TASTE CHOLULA — IDENTITY v2
   Drop-in stylesheet. Every token is named for a specific thing in Cholula.
   See IDENTITY-v2.md for derivation.

   The drop-in sheet carries the canonical classes (.indice / .el-indice /
   .portales, .remedios-mark, .display-1, .meta, .card, .button, etc.).
   A BRIDGE section at the bottom adapts the existing HTML class surface to
   the same identity, so the page renders with the new ground and cobalt
   load-bearing colour without touching the copy or markup structure.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. CUSTOM PROPERTIES — THE PALETTE
   --------------------------------------------------------------------------- */

:root {
  /* GROUND — tin-glaze white of Talavera Poblana. NOT cream, NOT bone.
     Pairs with --cobalto to read as blue-and-white tile, not paper. */
  --talavera-blanco: #EFE7D4;   /* 239 231 212 — fired tin glaze, daylight */
  --talavera-blanco-deep: #E5DDC8; /* one step down for layered surfaces */

  /* PRIMARY — cobalt oxide on talavera glaze. The load-bearing color. */
  --cobalto:         #1E3A6B;   /*  30  58 107 — canonical talavera blue */
  --cobalto-deep:    #14284C;   /* one step down, for hover and emphasis */
  --cobalto-faint:   #C7CFE0;   /* hairlines, dividers, secondary rules */

  /* ACCENT — the Remedios facade: golden ochre, sunlight on the church. */
  --remedios:        #D9A441;   /* 217 164  65 — iconic yellow church */
  --laminilla:       #B8862E;   /* 184 134  46 — 24k gilded panels */

  /* SECONDARY — earth tones, named for the place. */
  --tierra:          #A65A2E;   /* 166  90  46 — portales terracotta */
  --tizoc:           #2E2620;   /*  46  38  32 — deep volcanic earth / text */

  /* TERCIARY — the horizon and the spring bloom. */
  --popoca:          #4A5C6E;   /*  74  92 110 — Popocatépetl in blue air */
  --jacaranda:       #6B4A7A;   /* 107  74 122 — jacaranda against pyramid */

  /* SEMANTIC ALIASES — do not redefine these below without testing contrast */
  --ground:          var(--talavera-blanco);
  --surface:         var(--talavera-blanco-deep);
  --ink:             var(--tizoc);
  --ink-secondary:   var(--cobalto);
  --rule:            var(--cobalto);
  --accent:          var(--remedios);
  --accent-deep:     var(--laminilla);

  /* TYPE — Fraunces for display, Inter for body, Plex Mono for numerals */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
                  "Book Antiqua", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace,
                  SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* SCALE — modular, major third (1.250) */
  --fs-display-1: 4.50rem;
  --fs-display-2: 3.00rem;
  --fs-h1:        2.25rem;
  --fs-h2:        1.50rem;
  --fs-body:      1.0625rem;
  --fs-caption:   0.875rem;
  --fs-meta:      0.75rem;

  --lh-tight:     0.95;
  --lh-snug:      1.10;
  --lh-heading:   1.20;
  --lh-body:      1.55;
  --lh-caption:   1.40;

  /* SPACING — 8px base */
  --s-1: 0.25rem;
  --s-2: 0.50rem;
  --s-3: 0.75rem;
  --s-4: 1.00rem;
  --s-5: 1.50rem;
  --s-6: 2.00rem;
  --s-7: 3.00rem;
  --s-8: 4.50rem;
  --s-9: 6.00rem;

  /* LAYOUT */
  --measure: 68ch;          /* optimal line length for body */
  --frame:  min(92vw, 1240px);
  --gutter: clamp(16px, 2vw, 28px);
}

/* ----------------------------------------------------------------------------
   2. RESET (minimal, opinionated)
   --------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ----------------------------------------------------------------------------
   3. GROUND & BASE BODY
   --------------------------------------------------------------------------- */

html, body { height: 100%; }

body {
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The ground is the talavera-blanco field. Cobalt is what sits on it.
   Body copy at 8.92:1 (cobalto) or 12.13:1 (tizoc) — both pass AAA. */
body:not(.is-inverted) {
  background-color: var(--talavera-blanco);
  color: var(--tizoc);
}

/* When a section needs the inverse — the negative of a talavera tile.
   Cobalt ground, blanco type. 9.10:1 — AAA. */
.is-inverted,
.invert {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
}
.is-inverted a,
.invert a { color: var(--remedios); }
.is-inverted h1, .is-inverted h2,
.invert h1, .invert h2 { color: var(--talavera-blanco); }

/* ----------------------------------------------------------------------------
   4. TYPE — DISPLAY, HEADINGS, BODY
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, .display, .heading {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--tizoc);
  letter-spacing: -0.01em;
}

h1, .display-2 { font-size: var(--fs-display-2); line-height: var(--lh-snug); font-weight: 700; }
h2, .h1        { font-size: var(--fs-h1); }
h3, .h2        { font-size: var(--fs-h2); }
h4             { font-size: 1.125rem; }

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cobalto);
}

p {
  max-width: var(--measure);
  margin-block-end: var(--s-4);
}

p:last-child { margin-block-end: 0; }

strong, b { font-weight: 600; }
em, i     { font-style: italic; }

small, .caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--popoca);
}

.meta, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalto);
  font-weight: 400;
}

/* Drop caps on opening paragraph — Fraunces ochre, the Remedios facade. */
.lede::first-letter,
p.lede::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.1em 0 0;
  color: var(--remedios);
}

/* ----------------------------------------------------------------------------
   5. LINKS & FOCUS
   --------------------------------------------------------------------------- */

a {
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 120ms ease, background-color 120ms ease;
}

a:hover {
  color: var(--cobalto-deep);
  text-decoration-thickness: 2px;
}

.is-inverted a:hover,
.invert a:hover { color: var(--talavera-blanco); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--remedios);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--cobalto);
  color: var(--talavera-blanco);
}

/* ----------------------------------------------------------------------------
   6. THE SIGNATURE ELEMENT — EL ÍNDICE / THE PORTALES STRIP
   --------------------------------------------------------------------------- */

/* A numbered horizontal sequence of places. Reads as the 46 semicircular
   arches of the Portal Guerrero on the Plaza de la Concordia. Cobalt rules
   on talavera-blanco tile. The flip on hover is the negative of the tile. */

.indice,
.el-indice,
.portales {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;                              /* the joints between tiles */
  background-color: var(--cobalto);       /* shows through the gap as a grid */
  border: 1px solid var(--cobalto);
}

.indice > li,
.el-indice > li,
.portales > li {
  background-color: var(--talavera-blanco);
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.indice > li > a,
.el-indice > li > a,
.portales > li > a {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  color: var(--tizoc);
  outline: none;
}

.indice__num,
.el-indice__num,
.portales__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cobalto);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.indice__name,
.el-indice__name,
.portales__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tizoc);
  border-bottom: 1px solid var(--cobalto-faint);
  padding-bottom: var(--s-1);
}

.indice__meta,
.el-indice__meta,
.portales__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--popoca);
  margin-top: auto;
}

/* The flip — the negative of the tile, on hover and focus. */
.indice > li > a:hover,
.indice > li > a:focus-visible,
.el-indice > li > a:hover,
.el-indice > li > a:focus-visible,
.portales > li > a:hover,
.portales > li > a:focus-visible {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
}
.indice > li > a:hover *,
.indice > li > a:focus-visible *,
.el-indice > li > a:hover *,
.el-indice > li > a:focus-visible *,
.portales > li > a:hover *,
.portales > li > a:focus-visible * {
  color: var(--talavera-blanco);
  border-color: var(--talavera-blanco);
}

/* Mobile — the portales become a stack but keep the cobalt rule. */
@media (max-width: 720px) {
  .indice,
  .el-indice,
  .portales {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* ----------------------------------------------------------------------------
   7. THE PYRAMID + CHURCH HIERARCHY MARK
   --------------------------------------------------------------------------- */

/* The single small element that sits on top of the index — Remedios (ochre,
   the church) directly above the strip (the pyramid). Two coloured bars and
   a single word. No SVG, no emoji. The church-on-pyramid relationship. */

.remedios-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
}

.remedios-mark__church {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background-color: var(--remedios);
  color: var(--cobalto);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  line-height: 1;
}

.remedios-mark__pyramid {
  width: 100%;
  min-width: 12ch;
  padding: var(--s-1) var(--s-4);
  background-color: var(--tierra);
  color: var(--talavera-blanco);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* ----------------------------------------------------------------------------
   8. BUTTONS — REMEDIOS ON COBALT (ICONIC PAIRING)
   --------------------------------------------------------------------------- */

/* Remedies ochre on cobalt blue is 4.95:1 — AA normal text. This is the
   church-on-sky pairing, used for the primary call to action only. */

.button,
.btn,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background-color: var(--cobalto);
  color: var(--remedios);
  border: 1px solid var(--cobalto);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease;
}

.button:hover,
.btn:hover,
button[type="submit"]:hover {
  background-color: var(--cobalto-deep);
  border-color: var(--laminilla);
  color: var(--laminilla);
}

.button--ghost {
  background-color: transparent;
  color: var(--cobalto);
  border-color: var(--cobalto);
}
.button--ghost:hover {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
}

/* ----------------------------------------------------------------------------
   9. DIVIDERS & RULES
   --------------------------------------------------------------------------- */

hr {
  border: 0;
  height: 1px;
  background-color: var(--cobalto);
  margin: var(--s-7) 0;
}

hr.hairline { background-color: var(--cobalto-faint); }

.rule-double {
  border: 0;
  height: 4px;
  background:
    linear-gradient(var(--cobalto), var(--cobalto)) top/100% 1px no-repeat,
    linear-gradient(var(--cobalto), var(--cobalto)) bottom/100% 1px no-repeat;
  margin: var(--s-6) 0;
}

/* ----------------------------------------------------------------------------
   10. FIGURES, QUOTES, CARDS
   --------------------------------------------------------------------------- */

blockquote {
  border-left: 3px solid var(--remedios);
  padding: var(--s-2) var(--s-5);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--cobalto);
  margin: var(--s-6) 0;
  max-width: var(--measure);
}

.card {
  background-color: var(--talavera-blanco);
  border: 1px solid var(--cobalto);
  padding: var(--s-5);
}

.card--accent {
  border-color: var(--remedios);
  border-width: 2px;
}

/* ----------------------------------------------------------------------------
   11. PAGE LAYOUT HELPERS
   --------------------------------------------------------------------------- */

.frame {
  width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.stack > * + * { margin-block-start: var(--s-4); }
.stack-lg > * + * { margin-block-start: var(--s-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* Section spacing */
section + section { margin-block-start: var(--s-9); }

/* ----------------------------------------------------------------------------
   12. PRINT
   --------------------------------------------------------------------------- */

@media print {

  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .indice, .el-indice, .portales { grid-auto-flow: row; }
}

/* ============================================================================
   BRIDGE SECTION — adapts existing HTML class surface to the v2 identity.

   The drop-in sheet above carries the canonical signature classes
   (.indice/.el-indice/.portales, .remedios-mark, .display-1, .meta, .card,
   .button, .frame, .stack, .cluster, .is-inverted, .lede).

   The pages that ship with this build also use a few additional layout
   primitives from prior iterations — .site-head, .wordmark, .lang-switch,
   .nav-primary, .container, .hero, .section, .section-head, .prose, .pull,
   .cycle, .day, .mercados, .dishes-table, .card, .catalogue, .colophon, etc.

   This bridge maps every one of those primitives onto the v2 token system so
   the rendered ground is talavera-blanco, the load-bearing ink is cobalt, and
   no cream / cinder / masa / chile / poblano / flame colour survives anywhere.

   No :root tokens are redefined here.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   B.1  CONTAINERS & FRAME
   --------------------------------------------------------------------------- */

.container {
  width: var(--frame);
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--s-4);
}

/* ----------------------------------------------------------------------------
   B.2  THE SITE HEAD — wordmark, language switch, primary nav
   --------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--cobalto);
  background-color: var(--talavera-blanco);
}

.site-head-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--cobalto);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}
.wordmark:hover { color: var(--cobalto-deep); }

.wordmark::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1px;
  background-color: var(--remedios);
  vertical-align: middle;
  margin-inline-start: 0.2em;
}

.wordmark span.towns {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--popoca);
  font-weight: 400;
}

.lang-switch {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}

.lang-switch a {
  color: var(--popoca);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.lang-switch a:hover { color: var(--cobalto); }
.lang-switch a.active {
  color: var(--talavera-blanco);
  background-color: var(--cobalto);
  border-color: var(--cobalto);
}
.lang-switch .sep { color: var(--cobalto-faint); }

.nav-primary {
  border-top: 1px solid var(--cobalto-faint);
  border-bottom: 1px solid var(--cobalto-faint);
  background-color: var(--talavera-blanco);
}

.nav-primary-inner {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.nav-primary a {
  color: var(--popoca);
  text-decoration: none;
  position: relative;
  padding-block: 2px;
  transition: color 120ms ease;
}
.nav-primary a:hover { color: var(--cobalto); }
.nav-primary a.current {
  color: var(--cobalto);
  font-weight: 600;
}
.nav-primary a.current::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--remedios);
}

/* ----------------------------------------------------------------------------
   B.3  THE INDEX / PORTALES STRIP — adapted to existing HTML structure

   The existing nav uses a flat list of anchors with separator dots. We restyle
   that structure so it reads as the cobalt-gridded portales tile sequence.
   --------------------------------------------------------------------------- */

.indice {
  background-color: var(--cobalto);
  border-bottom: 1px solid var(--cobalto);
  padding: 0;
}

.indice-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1240px;
  margin-inline: auto;
  padding: 0;
}

.indice-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--talavera-blanco);
  background-color: var(--cobalto);
  padding: var(--s-3) var(--s-4);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.indice-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background-color: var(--cobalto);
  flex: 1;
  padding: 0;
  margin: 0;
}

.indice-list a {
  background-color: var(--talavera-blanco);
  color: var(--cobalto);
  text-decoration: none;
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: background-color 120ms ease, color 120ms ease;
}

.indice-list a:hover,
.indice-list a:focus-visible {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
}

.indice-list a.current {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
}
.indice-list a.current::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: 6px;
  background-color: var(--remedios);
}

.indice-list a .num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.indice-list .dot { display: none; }

@media (max-width: 720px) {
  .indice-inner { flex-direction: column; }
  .indice-list { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* ----------------------------------------------------------------------------
   B.4  HERO
   --------------------------------------------------------------------------- */

.hero {
  padding-block: var(--s-8) var(--s-7);
  background-color: var(--talavera-blanco);
  border-bottom: 1px solid var(--cobalto-faint);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
}

.hero-grid .lead { grid-column: 9 / span 4; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cobalto);
  margin: 0;
}

.hero .byline {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--popoca);
}

.hero .byline .token {
  color: var(--remedios);
  border-bottom: 1px solid var(--remedios);
}

/* ----------------------------------------------------------------------------
   B.5  SECTION + SECTION HEAD
   --------------------------------------------------------------------------- */

.section {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--cobalto-faint);
}

.section + .section { padding-top: var(--s-8); }

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--cobalto);
}

.section-head .num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto);
  background-color: var(--talavera-blanco-deep);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--cobalto);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--tizoc);
  margin: 0;
  letter-spacing: -0.01em;
}

.section-head .rule {
  display: none; /* the border-bottom on section-head IS the rule */
}

.section-head .count {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--popoca);
  text-align: right;
}

/* ----------------------------------------------------------------------------
   B.6  PROSE, PULL, LINK-2, MONO, META
   --------------------------------------------------------------------------- */

.prose {
  max-width: 64ch;
  color: var(--tizoc);
}

.prose p + p { margin-top: var(--s-4); }

.prose strong { color: var(--cobalto); font-weight: 600; }

.lead.prose {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--popoca);
  font-family: var(--font-body);
}

.pull {
  border-top: 1px solid var(--cobalto);
  border-bottom: 1px solid var(--cobalto);
  padding: var(--s-5) 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--cobalto);
  font-style: italic;
  margin: var(--s-6) 0;
  max-width: 56ch;
}

.link-2 {
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.link-2:hover {
  color: var(--cobalto-deep);
  text-decoration-thickness: 2px;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--popoca);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalto);
}

.meta-row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--popoca);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--cobalto-faint);
}

/* ----------------------------------------------------------------------------
   B.7  CYCLE / WEEKLY TIANGUIS GRID
   --------------------------------------------------------------------------- */

.cycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background-color: var(--cobalto);
  border: 1px solid var(--cobalto);
  margin-block: var(--s-5);
}

.cycle .day {
  background-color: var(--talavera-blanco);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.cycle .day-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--remedios);
  font-weight: 600;
  margin: 0;
}

.cycle .tianguis {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--tizoc);
  margin: var(--s-1) 0 0;
  line-height: 1.2;
}

.cycle .where {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--popoca);
  margin: 0;
}

.cycle .hours {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--popoca);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--cobalto-faint);
}

/* ----------------------------------------------------------------------------
   B.8  MERCADOS LIST + DISHES TABLE
   --------------------------------------------------------------------------- */

.mercados {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 var(--s-5);
  display: grid;
  gap: 1px;
  background-color: var(--cobalto);
  border: 1px solid var(--cobalto);
}

.mercados > li {
  background-color: var(--talavera-blanco);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-1);
}

.mercados .m-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--cobalto);
  margin: 0;
}

.mercados .m-meta {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--tizoc);
  margin: 0;
  line-height: 1.45;
}

.dishes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  margin-block: var(--s-4);
  border-top: 2px solid var(--cobalto);
  border-bottom: 2px solid var(--cobalto);
}

.dishes-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--talavera-blanco);
  background-color: var(--cobalto);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
}

.dishes-table tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--cobalto-faint);
  vertical-align: top;
  color: var(--tizoc);
}

.dishes-table tbody tr:nth-child(odd) td {
  background-color: var(--talavera-blanco-deep);
}

.dishes-table .name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cobalto);
}

.dishes-table .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tizoc);
  white-space: nowrap;
}

.dishes-table .price.unknown {
  color: var(--popoca);
  font-style: italic;
}

.dishes-table .season {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--popoca);
  letter-spacing: 0.04em;
}

.dishes-table caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--popoca);
  text-align: left;
  padding-top: var(--s-3);
  caption-side: bottom;
  max-width: 72ch;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   B.9  CATALOGUE / CARD SYSTEM (places + drivers)
   --------------------------------------------------------------------------- */

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
  margin-block: var(--s-5);
}

.card {
  background-color: var(--talavera-blanco);
  border: 1px solid var(--cobalto);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color 120ms ease, transform 160ms ease;
}

.card:hover {
  border-color: var(--cobalto-deep);
}

.card .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cobalto);
  margin: 0;
  line-height: 1.15;
}

.card .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--popoca);
}

.card .body {
  font-family: var(--font-body);
  color: var(--tizoc);
  line-height: 1.5;
  font-size: 0.9375rem;
}

.card.has-photo {
  padding: 0;
  overflow: hidden;
}

.card.has-photo > img,
.card.has-photo .ph {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--cobalto);
}

.card.has-photo > .card-body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.card.is-vouched {
  border-color: var(--remedios);
  border-width: 2px;
}

.card.is-vouched::before {
  content: "Vouched";
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto);
  background-color: var(--remedios);
  padding: 3px 8px;
  margin-bottom: var(--s-1);
  font-weight: 600;
}

.card.is-researched::before {
  content: "Researched";
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--talavera-blanco);
  background-color: var(--cobalto);
  padding: 3px 8px;
  margin-bottom: var(--s-1);
  font-weight: 600;
}

.card.is-typographic {
  background-color: var(--talavera-blanco-deep);
  border-left: 4px solid var(--tierra);
}

.card .v,
.card .v.unknown {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--cobalto);
}
.card .v.unknown { color: var(--popoca); font-style: italic; }

.card .vouched {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cobalto);
  background-color: var(--remedios);
  padding: 3px 8px;
  display: inline-block;
  font-weight: 600;
}

.card .researched {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--talavera-blanco);
  background-color: var(--cobalto);
  padding: 3px 8px;
  display: inline-block;
  font-weight: 600;
}

.card .k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--popoca);
  margin-right: var(--s-2);
}

.card .flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--talavera-blanco);
  background-color: var(--tierra);
  padding: 2px 6px;
  font-weight: 600;
}

.card .note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--popoca);
  font-style: italic;
  line-height: 1.45;
}

/* ----------------------------------------------------------------------------
   B.10  TWO-COLUMN LAYOUT (about / sobre-nosotros)
   --------------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; }
}

.col-a, .col-b { min-width: 0; }

.ph {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cobalto);
}

/* ----------------------------------------------------------------------------
   B.11  COLOPHON (FOOTER)
   --------------------------------------------------------------------------- */

.colophon {
  background-color: var(--cobalto);
  color: var(--talavera-blanco);
  padding-block: var(--s-6);
  margin-top: var(--s-9);
  border-top: 4px solid var(--remedios);
}

.colophon-inner {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.colophon-inner .sep { color: var(--remedios); }
.colophon-inner .token {
  color: var(--remedios);
  border-bottom: 1px solid var(--remedios);
}

.colophon-inner a { color: var(--talavera-blanco); }
.colophon-inner a:hover { color: var(--remedios); }

/* ----------------------------------------------------------------------------
   B.12  ROOT INDEX (language selector) — minimal overrides
   --------------------------------------------------------------------------- */

.pick {
  max-width: 560px;
  width: 100%;
  border: 1px solid var(--cobalto);
  background-color: var(--talavera-blanco);
  padding: 48px 40px;
  margin: 0 auto;
}

.pick .sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--popoca);
  margin: 0 0 32px;
}

.pick .cities {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--remedios);
  margin: 0 0 32px;
  font-weight: 600;
}

.pick .row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.pick a {
  display: block;
  flex: 1;
  min-width: 200px;
  padding: 24px;
  border: 1.5px solid var(--cobalto);
  color: var(--cobalto);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  background-color: var(--talavera-blanco);
  transition: background-color 140ms linear, color 140ms linear;
}

.pick a:hover {
  background-color: var(--cobalto);
  color: var(--remedios);
  border-color: var(--cobalto);
}

.pick a span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.7;
  font-weight: 400;
}