/* ================================================================
   QUÉ HAY RGV — "CARTELERA"
   Visual direction v2. Drop-in replacement for style.css.
   Product of Pragmatic Business Solutions, Rio Grande City, TX.

   AXES (independent, never forked):
     html[data-theme="valle"]   default. dense, warm, 16px root
     html[data-theme="winter"]  larger, calmer, higher contrast, 18px root
     html[data-scheme="light"|"dark"]  forced; absent = OS preference
     (legacy html[data-theme="light"|"dark"] still honoured)

   RULES GRAMMAR — rules carry meaning, they are not decoration:
     3px ink        section boundary        (the expressway)
     2px ink/mid    block boundary          (the farm road)
     1px hairline   row inside a block      (the irrigation lateral)
     1px dashed mid provisional / not yet   (the unpaved caliche road)

   NO shadows anywhere except one hard, un-blurred print offset on
   the price flash. NO border radius. NO backdrop-filter.
   ================================================================ */

/* ---------------------------------------------------------------- 1. FONTS
   Both faces are variable (wght). Subset to the Latin+Spanish set the
   product actually renders — see docs/plan/brainstorm/visual-redesign.md §9
   for the repeatable fontTools script and the byte counts.
   Metric overrides are measured from the real files so the swap is
   zero-CLS: Libre Franklin upem 1000, hhea asc 966 / desc -246 / gap 0;
   Archivo upem 1000, hhea asc 878 / desc -210 / gap 0.
   ---------------------------------------------------------------- */
@font-face{
  font-family:"Libre Franklin";
  src:url("/assets/fonts/libre-body.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  ascent-override:96.6%; descent-override:24.6%; line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2026,U+00B7,U+00BF,U+00A1;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-display.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  ascent-override:87.8%; descent-override:21%; line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2026,U+00B7,U+00BF,U+00A1;
}
/* Metric-matched fallbacks. Arial x-height 0.51855em; Libre Franklin 0.530
   -> 102.2%;  Archivo 0.526 -> 101.4%. Overrides divided by size-adjust. */
@font-face{
  font-family:"LF Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:102.2%; ascent-override:94.5%; descent-override:24.1%; line-gap-override:0%;
}
@font-face{
  font-family:"AR Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:101.4%; ascent-override:86.6%; descent-override:20.7%; line-gap-override:0%;
}

/* ---------------------------------------------------------------- 2. TOKENS
   Every value verified against WCAG 2.2. Ratios in the design doc §3.
   ---------------------------------------------------------------- */
:root{
  /* ---- valle · light (default) ---- */
  --canvas:#F4F1EA;      /* caliche */
  --raised:#FFFFFF;
  --sunken:#E7E3D8;
  --ink:#1A1814;         /* poster ink */
  --ink-2:#4E4839;
  --ink-3:#6B6555;
  --hair:#D5D0C1;
  --mid:#837B69;
  --accent:#BB2547;      /* toronja — Ruby Red grapefruit */
  --accent-hover:#96122F;
  --accent-ink:#FFFFFF;
  --accent-tint:#F6DCE3;
  --accent-on-tint:#8E1230;
  --free:#0E5A3C;        /* sabal */
  --free-ink:#FFFFFF;
  --free-tint:#D6E9DF;
  --free-on-tint:#0B4630;
  --warn:#8A5A00;
  --danger:#B3221C;
  --focus:#0B7F97;       /* resaca */
  --slab:#1A1814;        /* the always-dark band */
  --on-slab:#F4F1EA;
  --on-slab-2:#BDB7A6;
  --slab-hair:#403A2C;
  --accent-on-slab:#FF6B84;
  --free-on-slab:#3FD79A;

  /* ---- type ---- */
  --display:"Archivo","AR Fallback",Arial,sans-serif;
  --body:"Libre Franklin","LF Fallback",Arial,sans-serif;

  --t-d1:clamp(2.75rem,8.5vw,5rem);   /* hero            44 -> 80 */
  --t-d2:clamp(2rem,5vw,3.25rem);     /* section head    32 -> 52 */
  --t-d3:clamp(1.5rem,2.6vw,1.875rem);/* sub-head        24 -> 30 */
  --t-t1:1.25rem;
  --t-t2:1.0625rem;
  --t-t3:.9375rem;
  --t-body:1rem;
  --t-sm:.875rem;
  --t-meta:.8125rem;
  --t-label:.75rem;
  --t-micro:.6875rem;

  --w-display:900;      /* the poster weight */
  --w-head:800;
  --lh-d1:.86;
  --lh-d2:.94;
  --tr-d1:-.045em;
  --tr-d2:-.032em;
  --tr-label:.14em;
  --lh-body:1.55;

  /* ---- structure ---- */
  --rw:2px;             /* block rule   */
  --rw-heavy:3px;       /* section rule */
  --gut:clamp(20px,4.5vw,56px);
  --maxw:1220px;
  --measure:66ch;
  --sp:clamp(2.75rem,6vw,5.5rem);   /* section rhythm */
  --sp-tight:clamp(1.75rem,3.5vw,3rem);
}

/* ---- winter: same tokens, calmer values ---- */
:root[data-theme="winter"]{
  --canvas:#FFFFFF; --raised:#FFFFFF; --sunken:#F0EEE9;
  --ink:#101010; --ink-2:#3A362F; --ink-3:#5A5449;
  --hair:#C9C4B8; --mid:#6E6759;
  --accent:#A31739; --accent-hover:#7E0F2B; --accent-ink:#FFFFFF;
  --accent-tint:#F7DFE6; --accent-on-tint:#8C1230;
  --free:#0A4B31; --free-ink:#FFFFFF; --free-tint:#DCEDE4; --free-on-tint:#083D28;
  --warn:#6E4700; --danger:#96170F; --focus:#0B6A80;
  --slab:#101010; --on-slab:#FFFFFF; --on-slab-2:#C8C4BA; --slab-hair:#3A3A3A;
  --accent-on-slab:#FF8FA1; --free-on-slab:#5EE3AC;

  --t-d1:clamp(2.5rem,6vw,3.75rem);
  --t-d2:clamp(1.875rem,4vw,2.75rem);
  --t-d3:1.5rem;
  --t-t1:1.3333rem; --t-t2:1.1667rem; --t-t3:1rem;
  --t-body:1rem; --t-sm:.9444rem; --t-meta:.8889rem;
  --t-label:.7778rem; --t-micro:.7778rem;   /* winter has no micro tier */

  --w-display:800; --w-head:700;
  --lh-d1:1; --lh-d2:1.1;
  --tr-d1:-.015em; --tr-d2:-.01em; --tr-label:.1em;
  --lh-body:1.65;
  --rw:3px; --rw-heavy:4px;
  --measure:60ch;
  --sp:clamp(3.25rem,6.5vw,6rem);
}
:root[data-theme="winter"]{font-size:18px}

/* ---- dark scheme, valle ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-scheme="light"]):not([data-theme="light"]){
    --canvas:#0F1218; --raised:#171B23; --sunken:#0A0C11;
    --ink:#F2F0EA; --ink-2:#B9B4A8; --ink-3:#8E897C;
    --hair:#262C36; --mid:#6B7688;
    --accent:#FF6B84; --accent-hover:#FF97A9; --accent-ink:#2A0710;
    --accent-tint:#3E1B28; --accent-on-tint:#FF8A9E;
    --free:#3FD79A; --free-ink:#04281A; --free-tint:#103226; --free-on-tint:#4FE0A6;
    --warn:#F0B429; --danger:#FF8072; --focus:#4CC7E0;
    --slab:#05070B; --on-slab:#F2F0EA; --on-slab-2:#9C9689; --slab-hair:#242A34;
    --accent-on-slab:#FF6B84; --free-on-slab:#3FD79A;
  }
  :root[data-theme="winter"]:not([data-scheme="light"]){
    --canvas:#12141A; --raised:#1C1F27; --sunken:#0C0E13;
    --ink:#FFFFFF; --ink-2:#CFCBC1; --ink-3:#A19C90;
    --hair:#333A45; --mid:#78828F;
    --accent:#FF8FA1; --accent-hover:#FFB3BF; --accent-ink:#2A0710;
    --accent-tint:#401D27; --accent-on-tint:#FFA2B1;
    --free:#5EE3AC; --free-ink:#04281A; --free-tint:#13372A; --free-on-tint:#6FE9B5;
    --warn:#F5C458; --danger:#FF9A8E; --focus:#6FD6EA;
    --slab:#05070B; --on-slab:#FFFFFF; --on-slab-2:#B4AFA4; --slab-hair:#2A3038;
    --accent-on-slab:#FF8FA1; --free-on-slab:#5EE3AC;
  }
}
:root[data-scheme="dark"],:root[data-theme="dark"]{
  --canvas:#0F1218; --raised:#171B23; --sunken:#0A0C11;
  --ink:#F2F0EA; --ink-2:#B9B4A8; --ink-3:#8E897C;
  --hair:#262C36; --mid:#6B7688;
  --accent:#FF6B84; --accent-hover:#FF97A9; --accent-ink:#2A0710;
  --accent-tint:#3E1B28; --accent-on-tint:#FF8A9E;
  --free:#3FD79A; --free-ink:#04281A; --free-tint:#103226; --free-on-tint:#4FE0A6;
  --warn:#F0B429; --danger:#FF8072; --focus:#4CC7E0;
  --slab:#05070B; --on-slab:#F2F0EA; --on-slab-2:#9C9689; --slab-hair:#242A34;
  --accent-on-slab:#FF6B84; --free-on-slab:#3FD79A;
}
:root[data-theme="winter"][data-scheme="dark"]{
  --canvas:#12141A; --raised:#1C1F27; --sunken:#0C0E13;
  --ink:#FFFFFF; --ink-2:#CFCBC1; --ink-3:#A19C90;
  --hair:#333A45; --mid:#78828F;
  --accent:#FF8FA1; --accent-hover:#FFB3BF; --accent-ink:#2A0710;
  --accent-tint:#401D27; --accent-on-tint:#FFA2B1;
  --free:#5EE3AC; --free-ink:#04281A; --free-tint:#13372A; --free-on-tint:#6FE9B5;
  --warn:#F5C458; --danger:#FF9A8E; --focus:#6FD6EA;
  --slab:#05070B; --on-slab:#FFFFFF; --on-slab-2:#B4AFA4; --slab-hair:#2A3038;
  --accent-on-slab:#FF8FA1; --free-on-slab:#5EE3AC;
}

/* ---------------------------------------------------------------- 3. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:var(--lh-body);
  font-synthesis-weight:none;
  /* NO -webkit-font-smoothing: it thins type on the low-DPI Android we target */
}
img,svg{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.08em}
p{margin:0 0 .9em}
ul,ol{margin:0 0 1em;padding-left:1.25rem}
li{margin:0 0 .4em}
li::marker{color:var(--mid)}
strong,b{font-weight:600;color:var(--ink)}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Focus: a double ring. The canvas-coloured spacer guarantees >=3:1 against
   whatever the control is filled with, and the outer ring is measured against
   the canvas. This is the only construction that survives a focus landing on a
   filled accent button. */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--canvas),0 0 0 5px var(--focus);
  position:relative;z-index:2;
}
.band.ink :focus-visible,footer :focus-visible,.langbar :focus-visible,.board :focus-visible{
  box-shadow:0 0 0 2px var(--slab),0 0 0 5px var(--focus);
}
.cartel :focus-visible{box-shadow:0 0 0 2px var(--accent-ink),0 0 0 5px var(--slab)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:56rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.75rem;top:.75rem;z-index:200;background:var(--slab);color:var(--on-slab);padding:.7rem 1.1rem}

/* ---------------------------------------------------------------- 4. TYPE */
h1,h2,h3,h4{font-family:var(--display);margin:0 0 .5em;text-wrap:pretty}
h1{
  font-weight:var(--w-display);font-size:var(--t-d1);
  line-height:var(--lh-d1);letter-spacing:var(--tr-d1);
  margin:0 0 .35em;text-wrap:balance;
}
/* THE DISPLAY TREATMENT. The accent word is knocked out of a solid field of
   toronja — the hand-painted price/headline block off a dance poster. It is
   the one place a big area of colour lands, and it costs nothing. */
h1 em,h2 em{
  font-style:normal;
  background:var(--accent);color:var(--accent-ink);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.04em .16em .1em;
  margin-left:-.05em;
}
:root[data-theme="winter"] h1 em,
:root[data-theme="winter"] h2 em{padding:.06em .18em .12em}
h2{
  font-weight:var(--w-display);font-size:var(--t-d2);
  line-height:var(--lh-d2);letter-spacing:var(--tr-d2);
  margin:0 0 .4em;text-wrap:balance;
}
h3{font-weight:var(--w-head);font-size:var(--t-t1);line-height:1.2;letter-spacing:-.012em;margin:0 0 .35em}
h4{font-weight:var(--w-head);font-size:var(--t-t2);line-height:1.25;letter-spacing:-.008em}

/* the small caps label — used everywhere, always in the display face */
.kicker,.eyebrow,.card .meta,.cartel .k,.stats span,.fcol h4,label,
thead th,.step .n,.tier .badge,.legal .toc h2,.indice .sub,.glance dt{
  font-family:var(--display);font-weight:800;
  font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;line-height:1.2;
}
/* every number in the product is set in Archivo, because the shipped
   Libre Franklin subset carries no `tnum` and tabular-nums is a no-op in it */
.stats b,.tier .price,.flash,.indice .no,.season b,td.num,.ledger b{
  font-family:var(--display);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.lede{
  font-size:clamp(1.0625rem,2.1vw,1.375rem);line-height:1.4;
  font-weight:500;color:var(--ink);margin:0 0 .7em;max-width:32ch;
}
.sub{font-size:var(--t-t2);color:var(--ink-2);max-width:52ch;margin:0 0 1.4em;line-height:1.55}
.prose{max-width:var(--measure)}
.prose p,.prose li{color:var(--ink-2)}
.prose h3{margin-top:1.6em}

/* ---------------------------------------------------------------- 5. LANGBAR */
.langbar{background:var(--slab);color:var(--on-slab);font-size:var(--t-sm);display:none;
  border-bottom:var(--rw) solid var(--accent)}
.langbar.on{display:block}
.langbar .wrap{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem}
.langbar p{margin:0;flex:1 1 16rem}
.langbar a{
  color:var(--slab);background:var(--on-slab);text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:var(--t-label);
  letter-spacing:.06em;text-transform:uppercase;padding:.45rem .9rem;white-space:nowrap;
}
.langbar button{
  background:none;border:1px solid var(--slab-hair);color:var(--on-slab-2);
  font:inherit;font-size:var(--t-sm);padding:.4rem .8rem;cursor:pointer;
}
.langbar button:hover{color:var(--on-slab);border-color:var(--on-slab-2)}

/* ---------------------------------------------------------------- 6. HEADER */
.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--canvas);                 /* solid: no backdrop-filter */
  border-bottom:var(--rw-heavy) solid var(--ink);
}
.topbar .wrap{display:flex;align-items:center;gap:1.1rem;padding-top:.7rem;padding-bottom:.7rem}
/* .brand / .mark / .rgv are owned by the logo designer — untouched */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);flex:none}
.brand .mark{
  font-family:var(--display);font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;
  background:var(--accent);color:var(--accent-ink);padding:.3rem .55rem;border-radius:6px;line-height:1.1
}
.brand .rgv{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.14em;color:var(--ink-3)}

nav.main{display:flex;gap:0;margin-left:auto;align-items:stretch}
nav.main a{
  font-family:var(--display);font-weight:700;font-size:var(--t-t3);
  letter-spacing:-.005em;color:var(--ink-2);text-decoration:none;
  padding:.55rem .7rem;white-space:nowrap;
  border-bottom:var(--rw-heavy) solid transparent;margin-bottom:calc(-1 * var(--rw-heavy));
  display:flex;align-items:center;
}
nav.main a:hover{color:var(--ink);border-bottom-color:var(--mid)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.langsw{display:flex;border:var(--rw) solid var(--ink);flex:none;align-self:center}
.langsw a{
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);letter-spacing:.08em;
  padding:.3rem .55rem;text-decoration:none;color:var(--ink);background:transparent;line-height:1.4;
}
.langsw a[aria-current="true"]{background:var(--ink);color:var(--canvas)}
.navtoggle{
  display:none;margin-left:auto;background:none;border:var(--rw) solid var(--ink);
  padding:.5rem .65rem;cursor:pointer;color:var(--ink);
}
.navtoggle span{display:block;width:1.05rem;height:2px;background:currentColor;margin:.2rem 0}
@media (max-width:60rem){
  .navtoggle{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--canvas);border-bottom:var(--rw-heavy) solid var(--ink);
    flex-direction:column;align-items:stretch;padding:0 var(--gut) .75rem;margin-left:0;
  }
  nav.main.open{display:flex}
  nav.main a{
    padding:.85rem 0;font-size:var(--t-t2);
    border-bottom:1px solid var(--hair);margin-bottom:0;
    border-left:var(--rw-heavy) solid transparent;padding-left:.7rem;
  }
  nav.main a[aria-current="page"]{border-left-color:var(--accent);border-bottom-color:var(--hair)}
  .topbar .wrap{position:relative}
}

/* ---------------------------------------------------------------- 7. BUTTONS */
.btn{
  font-family:var(--display);font-weight:800;font-size:var(--t-t3);
  letter-spacing:.01em;line-height:1.15;
  padding:.8rem 1.3rem;text-decoration:none;border:var(--rw) solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  min-width:0;text-align:center;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear;
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--canvas)}
.btn.light{background:var(--on-slab);color:var(--slab);border-color:var(--on-slab)}
.btn.light:hover{background:transparent;color:var(--on-slab)}
.btn.sm{font-size:var(--t-label);padding:.55rem .95rem;letter-spacing:.04em;text-transform:uppercase}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch}

/* ---------------------------------------------------------------- 8. HERO */
.hero{
  background:var(--canvas);
  border-bottom:var(--rw-heavy) solid var(--ink);
  position:relative;overflow:hidden;
}
.hero .wrap{padding-top:var(--sp-tight);padding-bottom:var(--sp)}
.herogrid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:end;
}
@media (max-width:56rem){.herogrid{grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}}

/* the eyebrow is a ruled slab label, not a pill */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  color:var(--ink-2);margin:0 0 1.3rem;padding:0 0 .55rem;
  border-bottom:1px solid var(--hair);
}
.eyebrow::before{
  content:"";width:1.6rem;height:var(--rw-heavy);background:var(--accent);flex:none;
}
.hero .lede{margin-top:1rem}
.geopick{margin:0 0 1.2rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.geopick label{display:inline;margin:0}
.geopick select{width:auto;min-width:11rem;margin:0;padding:.45rem .6rem;font-size:var(--t-t3)}

/* interior page header */
.phead{background:var(--canvas);border-bottom:var(--rw-heavy) solid var(--ink)}
.phead .wrap{padding-top:1rem;padding-bottom:var(--sp-tight)}
.phead h1{font-size:var(--t-d2);margin-bottom:.5em}
.phead .sub{margin-bottom:0;max-width:58ch}
.crumbs{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.45rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--hair);
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--mid)}

/* ---------------------------------------------------------------- 9. CARTEL
   The flyer-absent panel. This is a poster, not a jumbotron: a solid field of
   toronja, square corners, a hard un-blurred registration offset in ink, and a
   knockout header bar. It is honest — it says "your flyer goes here" — so it
   never pretends to be a real event. */
.cartel{
  background:var(--accent);color:var(--accent-ink);
  padding:clamp(1.4rem,2.6vw,2.2rem);
  position:relative;
  box-shadow:8px 8px 0 var(--slab);
  isolation:isolate;
}
@media (max-width:56rem){.cartel{box-shadow:5px 5px 0 var(--slab)}}
/* screenprint register band across the top — one gradient, zero bytes of image */
.cartel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:.5rem;
  background:repeating-linear-gradient(90deg,
    var(--slab) 0 1.25rem,transparent 1.25rem 2.5rem);
  opacity:.85;
}
.cartel .k{
  display:inline-block;background:var(--accent-ink);color:var(--accent);
  padding:.3rem .6rem;margin:.9rem 0 1.1rem;
}
.cartel .t{
  font-family:var(--display);font-weight:var(--w-display);
  font-size:clamp(1.75rem,4.2vw,2.75rem);line-height:var(--lh-d1);
  letter-spacing:var(--tr-d1);margin:0 0 .5em;text-wrap:balance;
}
.cartel .d{font-size:var(--t-t3);margin:0 0 1.2rem;line-height:1.5;max-width:38ch}
.cartel .meta{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:var(--rw) solid var(--accent-ink);padding-top:.85rem;
}
.cartel .meta span{
  font-family:var(--display);font-weight:800;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .85rem;border-right:1px solid var(--accent-ink);
}
.cartel .meta span:first-child{padding-left:0}
.cartel .meta span:last-child{border-right:0}

/* ---------------------------------------------------------------- 10. SECTIONS */
section{padding:var(--sp) 0}
section.tight{padding:var(--sp-tight) 0}
.band{background:var(--sunken);border-top:var(--rw) solid var(--mid);border-bottom:var(--rw) solid var(--mid)}
.band.ink{background:var(--slab);border-color:var(--slab);color:var(--on-slab)}
.band.ink h2,.band.ink h3,.band.ink h4{color:var(--on-slab)}
.band.ink p,.band.ink .sub{color:var(--on-slab-2)}
.band.ink .kicker{color:var(--accent-on-slab)}
.band.ink a{color:var(--accent-on-slab)}
.band.ink h2 em{background:var(--accent-on-slab);color:var(--slab)}

/* THE SECTION HEAD — the mile marker. A heavy rule, then a caps label whose
   hairline runs out to the full page width, then the head. This is what makes
   a page read as a board rather than a stack of marketing slabs, and it works
   with the markup gen.py already emits. */
.sec-head{margin:0 0 var(--sp-tight);max-width:none;border-top:var(--rw-heavy) solid var(--ink);padding-top:.9rem}
.band.ink .sec-head{border-top-color:var(--on-slab)}
.sec-head > h2{max-width:22ch}
.sec-head > p:not(.kicker){font-size:var(--t-t2);color:var(--ink-2);margin:0;max-width:52ch}
.sec-head.center{text-align:center}
.kicker{
  color:var(--accent);margin:0 0 1rem;
  display:flex;align-items:center;gap:.75rem;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--hair)}
.band.ink .kicker::after{background:var(--slab-hair)}
/* a section head that carries a right-hand element (a link, the flash) */
.sec-head.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end}
.sec-head.split .kicker{grid-column:1/-1}
@media (max-width:44rem){.sec-head.split{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- 11. GRIDS + CARDS */
.grid{display:grid;gap:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
/* cards butt against each other and share rules — a board, not floating tiles */
.card{
  background:var(--raised);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  border-top:var(--rw-heavy) solid var(--ink);
  padding:1.3rem 1.25rem 1.5rem;
  transition:background-color .12s linear,border-top-color .12s linear;
}
.band .card{background:var(--raised)}
a.card{text-decoration:none;color:inherit;display:block;position:relative}
a.card:hover,a.card:focus-visible{border-top-color:var(--accent);background:var(--accent-tint)}
.card h3{margin-bottom:.4em;letter-spacing:-.018em}
.card p{color:var(--ink-2);font-size:var(--t-sm);margin:0;line-height:1.5}
.card .meta{color:var(--ink-3);margin:0 0 .7rem;display:block}
/* the arrow "Learn more ->" span is redundant with a whole-card link: it is
   hidden from sight but kept in the DOM for screen readers until gen.py drops it */
.card .more{
  display:block;margin-top:1rem;
  font-family:var(--display);font-weight:800;font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}

/* numbered steps — a ruled ledger */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  gap:0;border-top:var(--rw-heavy) solid var(--ink);
}
.step{
  background:transparent;padding:1.2rem 1.4rem 1.6rem 0;
  border-right:1px solid var(--hair);
}
.step:last-child{border-right:0}
@media (max-width:52rem){
  .step{border-right:0;border-bottom:1px solid var(--hair);padding:1.1rem 0 1.3rem}
  .step:last-child{border-bottom:0}
}
.step .n{
  color:var(--accent);margin:0 0 .8rem;font-size:1.5rem;
  font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;text-transform:none;
}
.step h3{font-size:var(--t-t2)}
.step p{margin:0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5}

/* ---------------------------------------------------------------- 12. CHIPS
   Hard-edged tabs with a meaning-bearing left bar. No pills anywhere. */
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-family:var(--display);font-weight:700;font-size:var(--t-t3);
  letter-spacing:-.005em;line-height:1.3;
  padding:.5rem .8rem;
  border:1px solid var(--hair);border-left:var(--rw-heavy) solid var(--mid);
  background:var(--raised);color:var(--ink);text-decoration:none;display:inline-block;
  transition:border-left-color .12s linear,background-color .12s linear;
}
a.chip:hover,a.chip:focus-visible{border-left-color:var(--accent);background:var(--accent-tint)}
.chip.free{border-left-color:var(--free);background:var(--free-tint);color:var(--free-on-tint)}
a.chip.free:hover{border-left-color:var(--free);background:var(--free-tint)}
.chip.hot{border-left-color:var(--accent);background:var(--accent-tint);color:var(--accent-on-tint)}

/* ---------------------------------------------------------------- 13. STATS / LEDGER */
.stats,.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr));gap:0;
  border-top:var(--rw-heavy) solid currentColor;
}
.stats > div,.ledger > div{
  padding:1rem 1.1rem 1.2rem 0;border-right:1px solid var(--hair);
}
.stats > div:last-child,.ledger > div:last-child{border-right:0}
.band.ink .stats > div{border-right-color:var(--slab-hair)}
.stats b,.ledger b{
  display:block;font-weight:900;font-size:clamp(1.75rem,3.4vw,2.5rem);
  letter-spacing:-.035em;line-height:1;
}
.stats span,.ledger span{display:block;color:var(--ink-3);margin-top:.5rem;max-width:16ch}
.band.ink .stats span{color:var(--on-slab-2)}

/* ---------------------------------------------------------------- 14. NOTE
   dashed = provisional. This is the honest "not launched yet" voice, made
   into a rule the reader can learn. */
.note{
  background:transparent;border:1px dashed var(--mid);border-left:var(--rw-heavy) solid var(--accent);
  padding:1rem 1.1rem;margin:1.5rem 0;font-size:var(--t-sm);color:var(--ink-2);
}
.note.palm{border-left-color:var(--free)}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink)}

/* ---------------------------------------------------------------- 15. PRICING */
.tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:0;
  align-items:stretch;border-top:var(--rw-heavy) solid var(--ink);
  border-bottom:1px solid var(--hair);
}
.tier{
  background:var(--raised);border-right:1px solid var(--hair);
  padding:1.4rem 1.3rem 1.6rem;display:flex;flex-direction:column;
}
.tier:last-child{border-right:0}
.tier.feat{background:var(--accent-tint);outline:var(--rw) solid var(--accent);outline-offset:calc(-1 * var(--rw))}
.tier .badge{
  color:var(--accent-ink);background:var(--accent);padding:.25rem .6rem;
  align-self:flex-start;margin:0 0 .8rem;display:inline-block;
}
.tier h3{font-size:var(--t-t1);margin-bottom:.15em}
.tier .who{font-size:var(--t-meta);color:var(--ink-3);margin:0 0 1.1rem;min-height:3.2em;line-height:1.4}
.tier .price{
  font-weight:900;font-size:clamp(2.5rem,5vw,3.5rem);letter-spacing:-.05em;
  line-height:.9;margin:0 0 .2rem;
}
.tier .price small{font-size:var(--t-t2);font-weight:700;color:var(--ink-3);letter-spacing:0}
.tier .per{font-size:var(--t-meta);color:var(--ink-3);margin:0 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--hair)}
.tier ul{list-style:none;padding:0;margin:0 0 1.4rem;flex:1}
.tier li{
  position:relative;padding:.5rem 0 .5rem 1.4rem;margin:0;
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;
  border-bottom:1px solid var(--hair);
}
.tier li:last-child{border-bottom:0}
.tier li::before{
  content:"";position:absolute;left:0;top:.95em;width:.55rem;height:.3rem;
  border-left:var(--rw) solid var(--free);border-bottom:var(--rw) solid var(--free);
  transform:rotate(-45deg);
}
.tier.feat .who,.tier.feat .per{color:var(--ink-2)}
.tier .btn{width:100%}

/* ---------------------------------------------------------------- 16. TABLE */
.tablewrap{overflow-x:auto;border-top:var(--rw-heavy) solid var(--ink);background:transparent;margin:1.5rem 0}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:34rem}
thead th{
  text-align:left;color:var(--ink-3);padding:.75rem 1rem .75rem 0;
  border-bottom:var(--rw) solid var(--mid);white-space:nowrap;vertical-align:bottom;
}
tbody td{padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--ink);font-weight:600;font-family:var(--display)}
td.num{text-align:right;padding-right:0}
tbody tr:hover td{background:var(--sunken)}

/* ---------------------------------------------------------------- 17. FORMS */
.formcard{
  background:var(--raised);border:1px solid var(--hair);
  border-top:var(--rw-heavy) solid var(--ink);
  padding:clamp(1.25rem,3vw,2rem);
}
.formcard h3{font-size:var(--t-d3);font-weight:var(--w-display);letter-spacing:var(--tr-d2)}
.formcard > p{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 1.4rem}
label{display:block;color:var(--ink-2);margin:0 0 .35rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:var(--body);font-size:1.0625rem;color:var(--ink);
  background:var(--canvas);border:var(--rw) solid var(--mid);
  padding:.7rem .75rem;margin:0 0 1rem;line-height:1.4;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%;
  background-size:.36rem .36rem,.36rem .36rem;background-repeat:no-repeat;
  padding-right:2.2rem;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
.consent{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--sunken);border-left:var(--rw-heavy) solid var(--mid);
  padding:.85rem .9rem;margin:.25rem 0 1.2rem;
}
.consent input{margin:.2rem 0 0;width:1.2rem;height:1.2rem;flex:none;accent-color:var(--accent)}
.consent p{margin:0;font-size:var(--t-meta);line-height:1.45;color:var(--ink-2)}
.formnote{font-size:var(--t-meta);color:var(--ink-3);margin:.9rem 0 0;line-height:1.45}
.msg{margin:1rem 0 0;padding:.75rem .9rem;font-size:var(--t-sm);display:none;border-left:var(--rw-heavy) solid}
.msg.ok{display:block;background:var(--free-tint);color:var(--free-on-tint);border-left-color:var(--free)}
.msg.err{display:block;background:var(--accent-tint);color:var(--accent-on-tint);border-left-color:var(--danger)}

/* ---------------------------------------------------------------- 18. FAQ */
.faq{border-top:var(--rw-heavy) solid var(--ink);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;position:relative;
  font-family:var(--display);font-weight:var(--w-head);font-size:var(--t-t2);
  color:var(--ink);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:0;top:1.15rem;width:.85rem;height:.85rem;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat;
  transition:background-size .16s linear;
}
.faq details[open] summary::after{background-size:100% 2px,2px 0}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding:0 0 1.2rem;color:var(--ink-2);font-size:var(--t-sm);max-width:58ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- 19. LEGAL */
.legal{max-width:70ch;padding:1.5rem 0 var(--sp)}
.legal .updated{color:var(--ink-3);font-size:var(--t-meta);margin:0 0 .5rem;
  font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.legal h2{font-size:var(--t-d3);margin:2.5rem 0 .6em;padding-top:1.1rem;border-top:var(--rw) solid var(--ink)}
.legal h3{font-size:var(--t-t2);margin:1.6rem 0 .4em}
.legal p,.legal li{color:var(--ink-2)}
.legal .box{background:var(--sunken);border-left:var(--rw-heavy) solid var(--accent);padding:1rem 1.1rem;margin:1.4rem 0}
.legal .box p{font-size:var(--t-sm);margin-bottom:.6em}
.legal .box p:last-child{margin-bottom:0}
.legal .toc{border-top:var(--rw-heavy) solid var(--ink);border-bottom:1px solid var(--hair);padding:1rem 0 .6rem;margin:0 0 2.2rem}
.legal .toc h2{color:var(--ink-3);margin:0 0 .8rem;border:0;padding:0;font-size:var(--t-label)}
.legal .toc ol{columns:2;column-gap:2rem;list-style:none;padding:0;margin:0;font-size:var(--t-meta)}
.legal .toc li{break-inside:avoid;margin-bottom:.3rem}
.legal .toc a{color:var(--ink-2);text-decoration:none}
.legal .toc a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:40rem){.legal .toc ol{columns:1}}

/* ---------------------------------------------------------------- 20. FOOTER */
footer{background:var(--slab);color:var(--on-slab);padding:var(--sp-tight) 0 1.5rem;border-top:var(--rw-heavy) solid var(--accent)}
footer a{color:var(--on-slab-2);text-decoration:none}
footer a:hover{color:var(--on-slab);text-decoration:underline}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:0}
.fgrid > *{padding:0 1.25rem;border-right:1px solid var(--slab-hair)}
.fgrid > *:first-child{padding-left:0}
.fgrid > *:last-child{border-right:0}
@media (max-width:64rem){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}
  .fgrid > *{padding-left:1.25rem}
  .fgrid > *:first-child{grid-column:1/-1;padding-left:0;border-right:0;padding-bottom:1.5rem;border-bottom:1px solid var(--slab-hair)}
  .fgrid > *:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:34rem){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid > *{padding-left:0;border-right:0}
  .fgrid > *:nth-child(odd){border-right:1px solid var(--slab-hair);padding-right:1.25rem}
}
.fbrand .mark{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.035em;margin:0 0 .5rem}
.fbrand p{color:var(--on-slab-2);font-size:var(--t-sm);max-width:32ch;margin:0 0 .9rem}
.fbrand .flogo{margin:0 0 .8rem;display:block;height:2.1rem;width:auto;color:var(--on-slab)}
.fcol h4{color:var(--on-slab-2);margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--slab-hair)}
.fcol ul{list-style:none;padding:0;margin:0}
.fcol li{margin-bottom:.4rem;font-size:var(--t-meta);line-height:1.4}
.fbot{
  margin:2rem 0 0;padding-top:1.1rem;border-top:var(--rw) solid var(--slab-hair);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:baseline;
}
.fbot p{margin:0;font-size:var(--t-meta);color:var(--on-slab-2)}
.fbot .pub{color:var(--on-slab)}
.fbot .pubmail{margin:0}
.fbot .pubmail a{color:var(--on-slab-2)}
.postbtn{flex:none}
@media (max-width:66rem){.postbtn{display:none}}

/* ================================================================
   21. THE SIGNATURE MOMENT — "EL FLASH DE PRECIO"
   A 24-point starburst carrying the one number that matters on a page:
   $0 on pricing, GRATIS on the free category, 1.4M on the stat strip.
   Pure CSS: two gradients, one mask, one hard drop-shadow. ~1.1 KB.
   Never above the fold; never on the LCP element.
   Markup:  <span class="flash"><b>$0</b><i>para publicar</i></span>
   ================================================================ */
.flash{
  --flash-d:clamp(6.5rem,15vw,9.5rem);
  position:relative;flex:none;
  width:var(--flash-d);height:var(--flash-d);
  display:grid;place-content:center;place-items:center;
  text-align:center;line-height:.88;
  color:var(--accent-ink);
  font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  rotate:-8deg;
}
.flash::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-conic-gradient(from 0deg,var(--accent) 0 7.5deg,transparent 7.5deg 15deg),
    radial-gradient(circle at 50% 50%,var(--accent) 0 64%,transparent 64%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 50%,transparent 50%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0 50%,transparent 50%);
  filter:drop-shadow(5px 6px 0 var(--slab));
}
.flash b{display:block;font-size:calc(var(--flash-d) * .34);font-weight:900;color:inherit}
.flash i{
  display:block;font-style:normal;margin-top:.35em;
  font-size:calc(var(--flash-d) * .085);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;max-width:7em;line-height:1.15;
}
/* winter: fewer spikes, less rotation, larger — loud is not the same as legible */
:root[data-theme="winter"] .flash{--flash-d:clamp(7.5rem,16vw,11rem);rotate:-3deg}
:root[data-theme="winter"] .flash::before{
  background:
    repeating-conic-gradient(from 0deg,var(--accent) 0 11.25deg,transparent 11.25deg 22.5deg),
    radial-gradient(circle at 50% 50%,var(--accent) 0 68%,transparent 68%);
}
/* the only entrance animation in the product, and it is opt-in */
@media (prefers-reduced-motion:no-preference){
  .flash.stamp{animation:qh-stamp .28s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes qh-stamp{from{transform:scale(1.22);opacity:0}to{transform:none;opacity:1}}
}
/* graceful degradation: no mask support -> a plain accent disc, still correct */
@supports not ((mask-image:radial-gradient(#000,#000)) or (-webkit-mask-image:radial-gradient(#000,#000))){
  .flash::before{background:var(--accent);border-radius:50%}
}

/* ================================================================
   22. DENSITY BLOCKS
   Layout patterns that make a page substantial without inventing content.
   Every one of these renders data content.py already holds.
   ================================================================ */

/* 22a. EDITORIAL — asymmetric main + sticky sidebar */
.editorial{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media (max-width:56rem){.editorial{grid-template-columns:minmax(0,1fr)}}
.rail{position:sticky;top:5.5rem;border-top:var(--rw-heavy) solid var(--ink);padding-top:1rem}
@media (max-width:56rem){.rail{position:static}}
.rail + .rail{margin-top:2rem}

/* 22b. GLANCE — the at-a-glance fact panel (dl of ruled rows) */
.glance{margin:0;border-top:var(--rw-heavy) solid var(--ink)}
.glance div{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.75rem;
  padding:.6rem 0;border-bottom:1px solid var(--hair)}
.glance dt{color:var(--ink-3);margin:0;padding-top:.15em}
.glance dd{margin:0;font-size:var(--t-sm);color:var(--ink)}
@media (max-width:26rem){.glance div{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* 22c. INDICE — the directory index. Replaces the chip wall of 18 cities.
   Ordered west to east along the river, numbered, county-labelled. */
.indice{border-top:var(--rw-heavy) solid var(--ink)}
.indice ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr));gap:0}
.indice li{margin:0;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair)}
.indice a{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.6rem;
  padding:.65rem .9rem .7rem 0;text-decoration:none;color:var(--ink);
  border-left:var(--rw-heavy) solid transparent;padding-left:.7rem;
  transition:border-left-color .12s linear,background-color .12s linear;
}
.indice a:hover,.indice a:focus-visible{border-left-color:var(--accent);background:var(--accent-tint)}
.indice .no{font-weight:800;font-size:var(--t-micro);color:var(--ink-3);padding-top:.4em;letter-spacing:.04em}
.indice .nm{font-family:var(--display);font-weight:var(--w-head);font-size:var(--t-t2);letter-spacing:-.015em;line-height:1.2}
.indice .sub{display:block;color:var(--ink-3);margin:.2rem 0 0;max-width:none;font-size:var(--t-micro)}

/* 22d. SEASON — the twelve-month band. Real festival months, nothing invented. */
.season{border-top:var(--rw-heavy) solid var(--ink);overflow-x:auto}
.season ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(5.5rem,1fr));min-width:44rem}
.season li{margin:0;border-right:1px solid var(--hair);padding:.7rem .6rem 1rem 0;min-height:7rem}
.season li:last-child{border-right:0}
.season b{display:block;font-weight:800;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.season li.on b{color:var(--accent)}
.season a{display:block;font-family:var(--display);font-weight:700;font-size:var(--t-meta);
  line-height:1.2;color:var(--ink);text-decoration:none;margin-bottom:.5rem;
  border-left:var(--rw) solid var(--accent);padding-left:.45rem}
.season a:hover{color:var(--accent)}

/* 22e. BOARD — a full-bleed ruled strip used between sections */
.board{
  background:var(--slab);color:var(--on-slab);
  border-top:var(--rw) solid var(--accent);border-bottom:var(--rw) solid var(--accent);
}
.board .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;
  padding-top:.7rem;padding-bottom:.7rem}
.board p{margin:0;font-size:var(--t-meta);color:var(--on-slab-2)}
.board strong{font-family:var(--display);font-weight:800;font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-slab)}

/* 22f. two-column prose for long documents at desktop */
@media (min-width:64rem){
  .prose.twocol{max-width:none;columns:2;column-gap:3rem;column-rule:1px solid var(--hair)}
  .prose.twocol p{break-inside:avoid}
}

/* ---------------------------------------------------------------- 23. MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}
/* ---------------------------------------------------------------- 24. PRINT */
@media print{
  .topbar,.langbar,footer,.navtoggle,.langsw,.cta-row,.flash{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .card,.tier,.formcard{break-inside:avoid}
}
/* ---------------------------------------------------------------- 25. FORCED COLORS */
@media (forced-colors:active){
  .cartel,.tier.feat,.btn.primary,.flash::before{forced-color-adjust:none}
  .card,.chip,.tier{border:1px solid CanvasText}
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
}

/* ---- logo ---------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);flex:none}
.brand svg{height:26px;width:auto;display:block}
@media(max-width:560px){.brand svg{height:22px}}
.fbrand .flogo{height:38px;width:auto;display:block;margin:0 0 14px;color:var(--paper)}

/* ---- deepened page copy ------------------------------------------- */
.citybody,.catbody{margin-top:34px;max-width:68ch}
.citybody p,.catbody p{font-size:17.5px;line-height:1.65;margin:0 0 17px}
.citybody p:first-child::first-letter,.catbody p:first-child::first-letter{
  font-family:var(--display);font-weight:800;font-size:3.1em;line-height:.82;
  float:left;margin:.06em .09em 0 0;color:var(--accent)}
.glance{margin:42px 0 0}
.glance h2{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.glance th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap;
  width:1%;padding-right:26px;vertical-align:top}
.glance table{min-width:0}

/* ---- border wait board --------------------------------------------- */
.bwt-loading{color:var(--ink-3);padding:18px 0}
table.bwt th[scope=row]{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap;padding-right:22px}
table.bwt .bwt-hours{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);letter-spacing:0;text-transform:none}
table.bwt td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--display)}
table.bwt td.num b{font-weight:800;font-size:1.12em}
table.bwt .bwt-good{color:var(--palm)}
table.bwt .bwt-warn{color:var(--gold)}
table.bwt .bwt-bad{color:var(--accent);font-weight:700}
table.bwt .bwt-na,table.bwt .bwt-closed{color:var(--ink-3);font-family:var(--body);font-size:14px}
table.bwt .bwt-upd{color:var(--ink-3);font-size:13px;white-space:nowrap}
.bwt-src{margin:14px 0 0;font-size:13.5px;color:var(--ink-3)}
.bwt-src .bwt-staleflag{color:var(--accent);margin-left:6px}

/* ---- long-form guide ------------------------------------------------ */
.guide{max-width:68ch}
.guide p{font-size:17.5px;line-height:1.68;margin:0 0 18px}
.guide h2{font-size:clamp(22px,3vw,29px);margin:40px 0 14px;padding-top:20px;border-top:2px solid var(--ink)}
.guide h3{font-size:19px;margin:28px 0 10px}
.guide ul{margin:0 0 18px;padding-left:22px}
.guide li{margin-bottom:9px;font-size:17px;line-height:1.6}
.guide strong{font-weight:650;color:var(--ink)}
.guide > p:first-of-type{font-size:20px;line-height:1.55;color:var(--ink)}

.flashrow{display:flex;align-items:center;gap:clamp(20px,4vw,44px);margin:48px 0 0;flex-wrap:wrap}
.flashrow .prose{flex:1 1 320px;max-width:52ch}

/* ---- the twelve-month season band ---------------------------------- */
.season{margin:0 0 8px}
.season h2{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;border:0;padding:0}
.skey{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 16px;font-size:12.5px;color:var(--ink-3)}
.skey .k{display:inline-flex;align-items:center;gap:7px}
.skey .k::before{content:"";width:11px;height:11px;flex:none}
.skey .k-festival::before{background:var(--accent)}
.skey .k-trough::before{background:var(--rule-2)}
.skey .k-fiesta::before{background:var(--palm)}
.season ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.season li{background:var(--surface);padding:14px 15px 16px;border-top:3px solid var(--rule-2);position:relative}
.season li.s-festival{border-top-color:var(--accent)}
.season li.s-fiesta{border-top-color:var(--palm)}
.season li.on{background:var(--sunk)}
.season .mo{display:block;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}
.season .hd{display:block;font-size:14px;line-height:1.45;color:var(--ink-2)}
.season li a{display:inline-block;margin-top:8px;font-family:var(--display);
  font-weight:700;font-size:13px}
.snote{margin:14px 0 0;font-size:13px;color:var(--ink-3);max-width:62ch}