/* ==========================================================================
   El Moll de la Sort — Portada
   Responsive implementation of Portada.dc.html. The canvas ships two
   artboards (desktop 1180px of content, mobile 390px); this file is the one
   fluid layout that resolves to both.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Three blocks on one grid, so the same source order works at both widths:
   lede (epígrafe · H1 · entradilla) · the cobalt field · and the close
   (penyes i empreses · horario · las dos acciones de §10).
   Desktop: lede over close in the left column, the field spanning both rows
   on the right, so the two actions of the close sit at the foot of the
   column and the band closes on an action (bar.md M7). Mobile: the three
   stack lede · close · field, which keeps the two actions inside the first
   screen of a 390x844 phone and turns the field into a real full-bleed band.
   --hero-bleed is the exact distance from the right edge of the 1180px
   content column to the edge of the window at any width: the section's own
   padding while the column is fluid, half of the leftover once it is capped.
   ------------------------------------------------------------------------ */
/* 24 px, que és l'aire REAL que hi havia: eren 64 aquí menys els 40 de marge
   negatiu que el ticker sagnava cap avall. Ara el ticker no sagna (vegeu
   `components.css`) i el número que queda és el net. */
.hero{padding-top:var(--space-3);
  --hero-bleed:max(clamp(16px,4vw,40px),(100vw - var(--content-max)) / 2)}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;
  grid-template-areas:"lede plate" "close plate";
  column-gap:var(--space-4);row-gap:var(--space-4)}
.hero__lede{grid-area:lede}
.hero__close{grid-area:close;align-self:end}

/* §06 · display-xl is the token for the H1 de portada: clamp(44,6vw,84) at
   0.98. Written by hand it was 20px short at the top end. */
.hero__title{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-xl);line-height:var(--lh-display-xl);
  margin:var(--space-2) 0 0}
/* §06 · one italic word per headline, and it is the word the manual's own
   cover emphasises: «La sort de _Mollet_, de tota la vida.» */
.hero__title i{font-style:italic;color:var(--vi)}
.hero__eyebrow{color:var(--vi)}

/* §06 · body-l at 19px / 1.5, and a measure that stays under 66 characters. */
.hero__lead{font-size:var(--text-body-l);line-height:var(--lh-body);
  max-width:42ch;margin-top:var(--space-3);text-wrap:pretty}
.hero__lead a{color:var(--vi);font-weight:600;
  text-decoration-color:var(--vi);text-decoration-thickness:1px;text-underline-offset:3px}
.hero__lead a:hover{color:var(--vi-fosc);text-decoration-color:var(--vi-fosc)}

/* §11 · the other half of September's mandate. Label in warm ink: filled
   garnet and gold are spoken for by the two actions below it.
   §06 · the small register used to be four bodies inside four pixels
   (19 / 17 / 15 / 13). It is now two: body at 16 for running text and small
   at 14 for notes, both straight off the named scale, plus the 12px mono
   label, which is a different job and not a body. */
/* 52ch de Figtree renderiza ~80 caracteres y una de sus líneas salía a 67.
   El `ch` de Figtree sobreestima, y cuánto depende del texto: 43ch —la
   medida general del sitio— aquí seguía dando 70 caracteres, porque esta
   frase lleva muchas letras estrechas. Medido sobre el render, 40ch la deja
   en 65. */
.hero__penyes{font-size:var(--text-body-base);line-height:var(--lh-body);max-width:40ch;text-wrap:pretty}
.hero__tag{display:block;color:var(--tinta);margin-bottom:4px}
/* §11 · the penyes block now has an action of its own. A LINK and not a third
   button: §09 keeps one gold per screen and filled garnet is the call, so a
   third pill would break the hierarchy. Same treatment as the link inside the
   lead, and it lands on the empreses section further down the page, so a call
   that starts here is a call that arrived through the penyes door. */
.hero__penyes a{color:var(--vi);font-weight:600;white-space:nowrap;
  text-decoration-color:var(--vi);text-decoration-thickness:1px;text-underline-offset:3px}
.hero__penyes a:hover{color:var(--vi-fosc);text-decoration-color:var(--vi-fosc)}
/* The line that qualifies the buttons is tied to the buttons: 24 above and 8
   below, both values off the §07 scale, which measures ~29 and ~13 optically.
   It stops reading as a fifth loose paragraph and reads as the caption of the
   action it qualifies. Opening hour and pick-up mode are fused into one line
   so that there is no longer a second consecutive block of small grey type
   between the lead and the call. */
.hero__hours{margin-top:var(--space-3);color:var(--tinta);
  font-size:var(--text-small);line-height:1.5;text-wrap:balance}
.hero__actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}

/* --- Hero · the campaign field (§10 pez sobre cobalto) ------------------
   The only cobalt of the screen. Radius 0, no border, no shadow: it is a
   band, and it runs off the right edge of the window and through the
   section's padding so that it meets the garnet announcement band above and
   runs down to the bottom edge of the section with no cream in between. It
   is also the only cobalt: the figures live INSIDE it now, so the strip that
   used to sit under the hero is gone and the field is the whole hero of the
   campaign.
   The padding is the symbol's protection zone (§04: a clear margin equal to
   the height of its crown). The crown of this artwork is 44 of its 365 rows
   = 12.05% of the rendered height; because the ink of the file starts 19.7%
   in from the left and 13.2% down from the top, the free margin is always
   larger than the padding, and it was measured on the render at every width
   from 320 to 2560: the smallest clearance is 36.7px against a 34.7px crown
   (390px wide) and it only grows from there. The fish is never anywhere near
   its 32px floor.
   Top bleed is space-3 and not space-5 because the closed header already
   bleeds space-4 of its own into this section (components.css:101), so
   64 - 40 = 24 is what is left between the garnet band and the content.
   ------------------------------------------------------------------------ */
.hero__plate{grid-area:plate;align-self:stretch;
  /* §04 · fondos permitidos para el símbolo: «papel crema · uso preferente»,
     «granate · campaña», «cobalto · acento puntual (portada, Nadal)».
     Fuera de campaña el campo va en papel: §05 llama al cobalto «acento
     puntual, una vez por pantalla», y un campo de media pantalla al 60 % de
     saturación no es puntual — es un segundo primario. El cobalto entra el
     1 de octubre, con la fase nadal, que es donde §11 lo pone. */
  /* El campo iba en Paper 2 y era invisible: CR 1,106 y ΔL* 3,8 contra el
     crema, por debajo del suelo de CR 1,72 de la referencia. Peor: los filetes
     de 1 px que el campo transporta van a CR 1,45 — el límite de la banda
     contrastaba MENOS que sus propias líneas de un píxel. Pasa a pergamí
     `#D3B78F`: CR 1,609, ΔL* 17,1, todavía un 6 % por debajo del suelo de la
     referencia, así que se lee de un vistazo sin volver a ser un segundo
     primario. Y no es un color nuevo: es el filete que el sistema ya usa. */
  /* Y pergamí tampoco valía, por una razón que no es de contraste de banda:
     §04 enumera los fondos permitidos para el SÍMBOLO —«papel crema · uso
     preferente», «granate · campaña», «cobalto · acento puntual», «una
     tinta»— y pergamí no está en la lista. Este campo lleva el pez grande,
     así que la lista lo gobierna. De las cuatro opciones, crema es la que
     dejaba el campo invisible (el defecto que abrió todo esto) y granate está
     hablado por la banda de avisos, que va justo encima. Queda la tinta, y
     además resuelve un efecto óptico medido: el amarillo del pez contra el
     pergamí daba CR 1,25 y ΔL* 7,9 —se sostenía sólo por su contorno negro—
     y contra la tinta pasa a ~10:1. El pez se separa de su fondo por primera
     vez. */
  --field-bg:var(--tinta);
  --field-ink:var(--paper);
  --field-rule:var(--pergami);
  background:var(--field-bg);color:var(--field-ink);
  margin-top:calc(var(--space-3) * -1);
  margin-bottom:calc(var(--space-5) * -1);
  margin-right:calc(var(--hero-bleed) * -1);
  padding:var(--space-4);
  /* Two columns inside the field: the symbol takes what is left over, the
     figures take a column that grows with the bleed, so the widest window
     spends its extra pixels on data and not on empty blue. */
  /* Una columna, dues files: el peix agafa el que sobra i el segell s'ancora
     al peu. Abans eren dues COLUMNES —peix i una columna de dades de 176-300
     px— i el resultat era que el peix quedava a baix a l'esquerra i les dades
     a dalt a la dreta, amb un forat de tinta al mig que no feia res. */
  /* Files invertides: §04 dibuixa la versió completa amb el símbol A DALT i
     el logotip tipogràfic a sota, així que el peix agafa la fila que creix i
     el logotip s'ancora al peu del camp. */
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;row-gap:var(--space-3);
  /* §04 · «Dejar alrededor del logo, como mínimo, un espacio igual a la
     altura de la corona (x).» La corona és el 14,8 % de l'alçada del pez: amb
     el pez a 355 px són 52, i els 40 del `padding` es quedaven curts per 12.
     64 px per sota, que és el graó següent de la retícula de §07. */
  padding-bottom:var(--space-5)}
/* The symbol is sized by the WIDTH of its column and never by max-height, so
   object-fit never letterboxes it: the box always keeps the file's 264x365,
   which is what makes the two translations and the 4% clip below exact.
   383px of width is the 530px of height that the field can hold. */
/* La mida la manava l'amplada, i en passar a una sola columna el peix va
   créixer de 305 a 383 px d'ample —522 d'alt— i va empènyer el segell fora de
   la pantalla. Ara la mana l'ALÇADA de la seva fila: el peix omple el que
   sobra i no decideix ell l'alçada del hero. */
/* 260 i no més, i està mesurat. `max-height:100%` no serviria perquè la fila
   `1fr` no té alçada definida, així que la mida la mana l'amplada, i l'amplada
   decideix qui manà l'alçada del hero:

     235 px → hero 650, forat esquerre 40 (el solc natural), sagna 28
     260 px → hero 650, forat esquerre 40, sagna 28
     300 px → hero 692, forat esquerre 61, sagna 70
     340 px → hero 746, forat esquerre 88, sagna 125

   A 260 la columna de text encara mana l'alçada, així que el forat entre el
   titular i la crida es queda en el solc de la retícula i no s'obre. Per
   sobre, el camp estira el hero i el forat creix amb ell. I el peix segueix
   sagnant 28 px per sota de la línia de pantalla, que és el que convida a
   baixar. */
.hero__fish{max-width:min(100%,260px);width:auto;height:auto;
  /* Amb el segell ancorat al peu, el peix ja no ha de fer d'àncora: es centra
     a la seva fila i el camp queda equilibrat de dalt a baix. */
  align-self:center;justify-self:center;
  object-fit:contain;min-height:0;
  /* Aquí había dos correcciones del fichero viejo, y las dos sobran ahora.
     Una era `transform:translate(-9.75%,-6.5%)`, que compensaba que la mancha
     empezaba al 19,7 % por la izquierda y al 13,2 % por arriba y llegaba
     pegada a los otros dos bordes: el lienzo nuevo lleva 130 px de aire por
     los cuatro lados, así que la caja YA está centrada sobre la mancha.
     La otra era `clip-path:inset(4% 0 0 0)`, que recortaba la fila de celeste
     —el color que §04 prohíbe— que sobrevivió a la extracción del PDF en
     y=0. En el fichero nuevo hay 0 píxeles de celeste medidos, así que no hay
     nada que recortar; y recortar un 4 % de este lienzo se comería parte de
     la zona de protección. Nada se escala, se inclina, se recolorea ni se
     sombrea (§04). */
  }

/* --- Hero · the four etiquetas, inside the field ------------------------
   They are the same §07 component the strip used to be, knocked out in cream
   on the cobalt. Three decisions worth naming:
   · The hairlines survive but change ink. --filet is a warm sand meant for
     cream paper and it goes muddy on cobalt (2.4:1); the rule is now 1px of
     --paper, the tint §05 pairs with cobalt at 7.1:1. One rule per cell, so
     the rules span their own column exactly and the grid closes flush against
     the field's padding on BOTH sides — the strip used to overlap the field
     on the left and stop short of it on the right.
   · Vertical rules are gone. On cream they were doing the separating; on a
     colour field the change of ground already does it, and eight cream lines
     inside one band would be noise.
   · align-content:space-between spreads the four over the whole height of the
     field, which is what stops the blue from being empty: the column of
     figures is as tall as the field and as wide as the bleed lets it be.
   ------------------------------------------------------------------------ */
/* --- El segell de la casa ----------------------------------------------
   Una sola composició ancorada al peu del camp, en lloc de tres etiquetes
   apilades amb un forat al mig. La gramàtica és la de §07 —filet, retolació
   mono en majúscules, xifra gran en Bodoni, fet petit a sota— però aplicada
   una vegada i no tres, que és el que la feia semblar un formulari.

   La xifra és el 2, i és la decisió de fons: és el número d'aquesta
   administració, és com el poble l'anomena, i abans no sortia enlloc. El
   color no hi fa res —tot va en el paper del camp— perquè el que la fa gran
   és l'escala, no un segon accent: §05 no dona el segon or d'aquesta pantalla,
   que ja se'l gasta el botó de WhatsApp.
   ---------------------------------------------------------------------- */
/* --- El logotip complet (§04 C) --------------------------------------
   Aquí hi havia `.hero__segell`, una etiqueta de tres peces amb una xifra
   gran al mig que em vaig inventar. §10 diu del hero «titular Bodoni XL +
   foto real o pez sobre cobalto» i §04 assigna a la portada la versió
   completa del logotip: cap de les dues demana una fitxa de dades.

   El logotip va a sota del peix, que és l'ordre de la lámina de §04. Abans el
   bloc de text anava a dalt perquè al peu del camp queia per sota de la línia
   de pantalla —a 745 px d'alçada acabava a 754—, però allò eren quatre línies
   més la de campanya; això són dues i curtes. Mesurat al render. */
/* `width:100%` no és decoratiu: sense ell el bloc és shrink-to-fit i el
   `min(100%,240px)` de la màscara resolia el 100 % contra el seu propi pare,
   o sigui contra l'amplada del claim. El logotip es quedava a 203 px, l'ample
   del text del claim, en lloc dels 240 demanats. */
.hero__logotip{align-self:end;width:100%;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
  color:var(--field-ink)}

/* El logotip tipogràfic es pinta com a MÀSCARA i no com a imatge: la tinta
   del PNG és gris neutre, fora de paleta, i sobre camp fosc es veuria com una
   taca —és la raó per la qual la capçalera fa servir text viu. Amb
   `mask-image` el color surt de `currentColor`, crema heretat del camp, i
   això és la versió «una tinta crema sobre tinta» que §04 dibuixa per a fons
   foscos. Mateixa tècnica que els logotips de SELAE de `/jocs`.

   I es RETALLA al nom. El fitxer és la versió B de §04 sencera —«logotipo
   tipográfico + claim»—, o sigui que el claim hi va dibuixat a dins. Fent-lo
   servir tal qual el claim sortiria dues vegades, i la seva còpia dibuixada
   mesuraria set píxels d'alt: il·legible, no seleccionable i sense traduir.
   Mesurant la tinta fila per fila del PNG, el nom ocupa les files 0-29 i el
   claim les 37-49, amb un buit net entremig. La màscara es queda amb 30 de
   les 50 files: `top` amb l'amplada al 100 % i l'alçada automàtica retalla la
   resta. Així el nom manté el lockup dibuixat —el «DE» i el «LA» petits
   encaixats— i el claim baixa a text viu.

   La màscara ja NO és el PNG: és `wordmark-moll.svg`, el mateix dibuix
   vectoritzat. Això treu el sostre que hi havia aquí, i val la pena explicar
   per què existia i per què ja no.

   El fitxer del manual té 281 px d'ample i és l'únic que hi ha: les nou
   aparicions del logotip a les 23 pàgines del PDF són el MATEIX objecte
   ràster (objecte 76, 281×50), o sigui que no hi havia vectorial d'on tirar.
   A 200 px CSS això ja són 1,42× d'ampliació en una pantalla de densitat
   doble, i pujar-ho era canviar mida per nitidesa. El propietari va dir que a
   200 quedava petit al costat del peix, i tenia raó: el camp fa 586 px, el
   peix 260 i el logotip 200.

   El vectorial surt de traçar el canal ALFA del PNG, que està antialiasat: el
   degradat de la vora és informació de subpíxel sobre on cau el contorn de
   veritat, i un marching squares interpolat la fa servir en lloc de
   llençar-la. Per això el traçat no només escala, sinó que a 380 px es veu
   més net que el ràster al mateix tamany. Comprovat a ull, l'un damunt de
   l'altre. Es va provar també amb les vores suavitzades com a quadràtiques i
   es va descartar: els astils rectes sortien ondulats, i un logotip amb els
   astils ondulats es llegeix com un error.

   El PNG es queda al repositori perquè és l'obra original del manual; el que
   es fa servir és el derivat. Com es va derivar, a `assets/img/README.md`.

   320 px, i el que ho fixa és el camp, no el gust: a 1024 el camp interior fa
   321,6 px i `min(100%, …)` hi encaixa el logotip amb els 40 px de farciment
   del camp a cada costat, que cobreixen de sobres la zona de protecció de
   §04 —una alçada de caixa alta, aquí 34 px—. El mínim d'ús de §04 són 140 i
   el més estret que arriba a sortir són 160, a 320 px d'amplada. */
.hero__logotip__marca{display:block;width:min(100%,320px);aspect-ratio:281/30;
  background:currentColor;
  -webkit-mask:url("../img/wordmark-moll.svg") center/100% 100% no-repeat;
  mask:url("../img/wordmark-moll.svg") center/100% 100% no-repeat}

/* §03 · «El claim actual, La Administració dels 100 Milions, se mantiene como
   firma histórica bajo el logotipo.» Firma vol dir petit i a sota. */
.hero__logotip__claim{font-family:var(--font-display);font-style:italic;
  font-weight:500;line-height:1.4;
  /* Creix amb el camp i només on hi cap. El terra es queda a 13 px perquè
     per sota de 900 el logotip comparteix la fila amb el peix i només té la
     columna que aquell li deixa: a 320 px són 160, i el claim a 14 px ja
     mesuraria 203 i sortiria MÉS AMPLE que el logotip que firma. Una firma
     més ampla que allò que firma és un error de composició, i per això aquí
     el `clamp` no puja fins que la pantalla dona amplada. */
  font-size:clamp(13px,1.4vw,16px);
  color:var(--field-ink);text-align:center}

/* El nom, per a qui no veu la màscara: present per a l'oïda i per als
   cercadors, fora de la vista. `clip-path` i no `display:none`, que el trauria
   de l'arbre d'accessibilitat. */
.nomes-veu{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* §11 · «Nadal: hero en cobalto con el pez.» Del 1 d'octubre al 22 de desembre
   el campo se vuelve de campaña. Crema sobre cobalto está en la tabla de §05
   a 7,1:1, y cobalto es fondo permitido para el símbolo (§04). */
:root[data-phase="nadal"] .hero__plate{
  --field-bg:var(--blau);
  --field-ink:var(--text-on-blau);
  --field-rule:var(--paper);
}

/* --- Draws ------------------------------------------------------------- */
.draws{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-4)}
.draw{border:var(--border-w-rule) solid var(--border-card);padding:clamp(20px,2vw,24px);
  display:flex;flex-direction:column;gap:var(--space-1)}
.draw--featured{background:var(--surface-campaign);color:var(--text-on-vi);border-color:var(--vi)}
.draw--featured .label{color:var(--text-on-vi)}
/* Bajó un peldaño. A display-l compartía rango exacto con el h2 de la banda
   —cap 38 contra 39, misma asta, misma tinta, a 185 px de distancia— y la
   pantalla se leía como una fila plana de cuatro cifras en lugar de
   título-y-luego-contenido. La referencia mantiene un peldaño entre título de
   banda (cap 37) y contenido de tarjeta (cap 22): 46/28 = 1,64x es ese mismo
   peldaño. */
.draw__figure{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m)}
.draw--featured .draw__figure{color:var(--text-prize)}
.draw__note{font-size:16px;margin-bottom:var(--space-1)}
/* Sube antes de las tarjetas: la sección cierra con las tres cifras de bote,
   no con un enlace suelto al final (bar.md M7). */
.draws__all{font-size:16px;max-width:43ch;margin-top:var(--space-3)}
.draws__all--lead{margin:var(--space-2) 0 0}

/* --- El dècim de mostra i el cercador, costat a costat ----------------
   La secció era un títol, dues frases i cinc caselles buides. Ara obre amb
   el dècim dibuixat a l'esquerra i el cercador a la dreta: es veu què es ven
   abans de demanar que hi escriguis res. Per sota de 900 px passen a una
   columna, el dècim primer.

   El dècim no s'estira: 360 px de màxim. La plantilla és una imatge de
   1519×894 i per damunt d'aquesta mida es nota el ràster. */
/* `center` i no `start`: el propietari volia el cercador alineat amb el
   CENTRE del dècim de mostra, que és la peça que hi ha al costat. Amb `start`
   quedaven les dues capçaleres a la mateixa alçada i el bloc semblava caigut,
   perquè el dècim és molt més alt que el formulari.
   `--sola` és el sorteig sense plantilla: sense mostra al costat, una columna. */
.numbers__cerca{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:var(--space-4);align-items:center;
  margin-block:var(--space-4) var(--space-5)}
/* El sorteig sense plantilla no té mostra al costat: una columna, i el
   cercador necessita EL SEU aire per sota, perquè sense el dècim que
   l'acompanya quedava enganxat a la reixa de números. */
.numbers__cerca--sola{grid-template-columns:minmax(0,1fr);
  margin-block:var(--space-4) var(--space-6)}
.numbers__cerca .finder{margin-top:0}
.mostra{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.mostra__peu{font-size:var(--text-small);line-height:1.5;max-width:38ch;margin:0}
/* El preu en mono i amb la tinta del cos, com el de les targetes de dècim de
   `/nadal`. NO en `--text-prize`: aquell alias és or i el comentari de
   `components.css` ja ho diu —«existe un alias --text-prize: var(--or)» per al
   camp de tinta—. Or sobre el crema d'aquesta secció no arriba al contrast. */
.mostra__preu{font-family:var(--font-mono);font-weight:600;
  white-space:nowrap;margin-left:var(--space-1)}

/* --- Number finder ---------------------------------------------------- */
/* DESVIACIÓ DEL MANUAL, demanada pel propietari i conscient. §07 diu
   «esquinas vivas» i `--radius-card:0`, i els tokens porten
   `--shadow-none:none` amb el comentari «shadows are never used». El
   propietari ho va demanar explícitament sabent-ho —«aunque diga que no el
   documento PDF… que sea un poco más redondito y que tenga un poquito de
   sombras»— perquè el cercador ha de llegir-se com una peça que flota per
   damunt de la secció i no com una fitxa més. És l'ÚNIC element del lloc amb
   radi i ombra: si algú n'hi posa un segon, ja no flota res.
   L'ombra és discreta a propòsit (10% i 6% de negre) i no toca el contrast:
   el fons del formulari segueix sent `--surface-card` opac. */
.finder{border:var(--border-w-rule) solid var(--border-card);background:var(--surface-card);
  padding:clamp(16px,2vw,24px);display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;
  margin-top:var(--space-4);border-radius:16px;
  box-shadow:0 28px 60px -12px rgba(26,26,26,.30),
             0 10px 24px -8px rgba(26,26,26,.20),
             0 2px 6px rgba(26,26,26,.10)}
.finder__title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,2.4vw,28px);line-height:1.1;margin:0 0 var(--space-2)}
.finder__digits{display:flex;gap:var(--space-1)}
.finder__digit{
  width:56px;height:64px;padding:0;text-align:center;
  border:var(--border-w-rule) solid var(--tinta);border-radius:0;background:var(--paper);
  font-family:var(--font-mono);font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.finder__digit::-webkit-outer-spin-button,
.finder__digit::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* --- El resultat del cercador ------------------------------------------
   La pregunta que la gent fa al taulell és «el tens?», i la resposta ha de ser
   tan visible com la pregunta. Per això no és una línia de text a sota del
   formulari sinó un bloc que ocupa tota l'amplada, amb l'estat en una píndola
   i el número al cos de les targetes.

   El color el mana l'estat, amb els mateixos tres tokens que les targetes de
   número —cobalt disponible, granat pocs, gris càlid esgotat— i un quart per
   al «no el tenim», que és el mateix gris: no tenir-lo no és una alarma.
   ---------------------------------------------------------------------- */
.finder__resultat{
  --res-color:var(--tinta);
  flex:1 1 100%;order:9;margin-top:var(--space-3);
  border-top:2px solid var(--res-color);padding-top:var(--space-3);
  display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:var(--space-3);align-items:start}
/* Sense dècim —quan no el tenim— la columna del dibuix no ha de deixar un
   forat: el bloc passa a una sola columna. */
.finder__resultat[data-state="cap"]{grid-template-columns:minmax(0,1fr)}
.finder__resultat[data-state="cap"] .finder__resultat__decim{display:none}

/* El dècim del resultat és el mateix component que la llista, i és aquí on
   `container-type:inline-size` de `.decim` es resol: la caixa li dona
   l'amplada i tot el que hi va a sobre escala amb `cqw`. */
.finder__resultat__decim{min-width:0}
.finder__resultat__dades{display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}
.finder__resultat[data-state="disponible"]{--res-color:var(--state-available)}
.finder__resultat[data-state="pocs"]{--res-color:var(--state-low)}
.finder__resultat[data-state="esgotat"],
.finder__resultat[data-state="cap"]{--res-color:var(--state-soldout)}

/* L'estat és la resposta a la pregunta que la gent fa —«el tens?»— així que
   és el que va gran. Mono i no Bodoni: és una etiqueta d'estat, i §09 dibuixa
   els estats en mono. */
.finder__resultat__estat{
  font-family:var(--font-mono);font-size:clamp(22px,2.6vw,30px);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.2;
  color:var(--res-color)}

/* Només s'ompla quan NO el tenim: aleshores no hi ha dècim que ensenyi el
   número i torna a ser ell el gran. */
.finder__resultat__num:empty{display:none}
.finder__resultat__num{
  font-family:var(--font-mono);font-size:clamp(30px,4vw,40px);font-weight:600;
  letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums;
  line-height:1.1;color:var(--res-color)}
.finder__resultat[data-state="cap"] .finder__resultat__num{opacity:.55}

.finder__resultat__meta{font-family:var(--font-mono);font-size:var(--text-small);
  letter-spacing:.04em;margin-top:4px}
.finder__resultat__accions{display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-2)}

@media (max-width:639px){
  /* El dècim té 1519x894 de proporció: en dues columnes estretes es queda en
     un segell il·legible, així que passa a sobre i a tota l'amplada. */
  .numbers__cerca{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .sorteig,.sorteig + .sorteig{margin-top:var(--space-4)}
  .sorteig + .sorteig{padding-top:var(--space-3)}
  .finder__resultat{grid-template-columns:minmax(0,1fr)}
  .finder__resultat__accions .btn{width:100%;justify-content:center}
}

.finder__status{margin-top:var(--space-2);font-size:15px}
/* Amagada per als ulls i present per a l'oïda: `display:none` la trauria de
   l'arbre i el lector de pantalla no anunciaria el resultat. */
.finder__status--nomes-veu{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Numbers grid ----------------------------------------------------- */
.numbers__update{max-width:43ch;margin:var(--space-4) 0 var(--space-2)}

/* --- El sub-bloc d'un sorteig -------------------------------------------
   Un per sorteig amb números, dins de la mateixa secció. La jerarquia es fa
   com mana §07 —«con color de fondo y filetes»— i no amb una segona banda:
   dues seccions seguides del mateix pergamí no separarien res, i canviar-ne
   una de color gastaria un accent que §05 reserva.

   Els 64 px entre sortejos són el graó de secció de §07 a escriptori (40 a
   mòbil); el filet superior és el mateix `--filet` d'1 px que separa files a
   tot el lloc. El primer no en porta: ja el separa el buscador. */
.sorteig + .sorteig{margin-top:var(--space-5);
  border-top:var(--border-w-rule) solid var(--border-rule);padding-top:var(--space-4)}
.sorteig{margin-top:var(--space-5)}
.sorteig__titol{margin:0}
.sorteig__recompte{max-width:43ch;margin:var(--space-1) 0 var(--space-3)}
.sorteig .numbers__grid{margin:0}
.sorteig .numbers__all{margin:var(--space-3) 0 0;font-size:16px}
.numbers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.numbers__close{margin-top:var(--space-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.numbers__close .numbers__all{margin:0;order:-1}

/* --- Prizes · §09 «Hem repartit» --------------------------------------- */
/* Cifra en Bodoni granate, fecha en mono, título y una frase. Un solo bloque:
   el premio más reciente ocupa la portada. */
.prize-block{
  border-top:var(--border-w-rule) solid var(--border-rule);
  border-bottom:var(--border-w-rule) solid var(--border-rule);
  padding:var(--space-3) 0;margin-top:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.prize-block__figure{font-family:var(--font-display);font-weight:700;
  font-size:var(--text-display-xl);line-height:var(--lh-display-xl);color:var(--vi)}
.prize-block__title{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m);
  margin:var(--space-1) 0 0}
.prize-block__body{font-size:var(--text-body-base);max-width:40ch}
.prize-block__pending{font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);opacity:.7;margin-top:var(--space-2)}

/* --- Story ------------------------------------------------------------ */
/* Una sola columna mentre no hi hagi fotos: ni la de la botiga ni la del Moll
   Fer hi són —la segona, retirada fins tenir el permís escrit de la colla— i
   dues columnes deixaven mitja pantalla buida. Quan arribin, torna
   `grid-template-columns:1fr 1fr` i n'hi ha prou. */
.story{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:center}
/* §08 · la foto real ocupa el hueco con SU proporción y sin recortar: alto
   automático y ningún `object-fit`, así que no se pierde nada del encuadre ni
   se deforma. Sin borde, sin radio y sin sombra, como pide §08 —el borde que
   lleva `.plate` es del marcador de hueco, no del tratamiento de la foto. */
img.story__photo{display:block;width:100%;height:auto;border:0}
/* Sense foto de la botiga la reixa de dues columnes deixava mitja pantalla
   buida. Amb una sola columna el text no s'estira: `.measure` el manté a 43ch
   i el bloc es queda a l'esquerra, alineat amb la resta de la pàgina. */

/* --- Business band ---------------------------------------------------- */
.business{display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
/* Era un segundo h2 a 1,27x del otro: dos titulares de sección para el mismo
   oficio, y tres de los cuatro escalones intermedios de display dentro de un
   margen de 1,30x. Un solo h2 en la página. */
.business__lead{font-size:var(--text-body-l);max-width:43ch;margin-top:var(--space-2)}
.business__actions{margin-top:var(--space-3)}

/* --- Where we are ----------------------------------------------------- */
.where{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-4);align-items:stretch}
.map{border:var(--border-w-rule) solid var(--border-card);background:var(--surface-card);
  min-height:380px;position:relative;
  background-image:
    repeating-linear-gradient(0deg,rgba(30,24,19,.07) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,rgba(30,24,19,.07) 0 1px,transparent 1px 40px);}
.map__pin{position:absolute;left:46%;top:44%;display:flex;flex-direction:column;align-items:center;gap:6px}
.map__pin svg{width:34px;height:34px}
.map__pin span{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  background:var(--vi);color:var(--text-on-vi);padding:3px 7px;white-space:nowrap}
.map__caption{position:absolute;bottom:12px;left:12px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-label);opacity:.6}
.shop{border:var(--border-w-rule) solid var(--border-card);padding:clamp(20px,2.6vw,32px);
  display:flex;flex-direction:column;gap:var(--space-2)}
.shop__address{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m)}
.shop__town{font-size:17px;margin-top:4px}
.shop__hours{border-top:var(--border-w-rule) solid var(--border-rule);
  border-bottom:var(--border-w-rule) solid var(--border-rule);padding:var(--space-2) 0;line-height:1.9}
/* Contorno y no relleno: encima del botón de llamada, una píldora granate
   maciza compite con la única acción real de la tarjeta. */
.pill-open{display:inline-block;background:transparent;color:var(--vi);
  box-shadow:inset 0 0 0 1px var(--vi);
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:600;
  letter-spacing:var(--tracking-label);padding:6px 14px;border-radius:var(--radius-pill)}
/* Tancat no pot anar del mateix color que obert: passa al gris càlid del
   sistema, el mateix que marca un número esgotat. */
.pill-open--tancat{color:var(--state-soldout);box-shadow:inset 0 0 0 1px var(--state-soldout)}
.shop__actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}
.shop__station{font-size:15px}


/* --- Responsive ------------------------------------------------------- */
/* Below 1360 the field is under 550px wide once the bleed is counted, which is
   not enough for the symbol and a column of figures side by side: the symbol
   would end up narrower than the figures, and measured on the render the field
   carries LESS ink that way than stacked. So in that band the field stacks the
   way the phone does — symbol first, figures under it in two columns. Same
   field, same content, one reflow. */
@media (max-width:1359px){
  /* 24 of padding and not 40: in this band the field is narrow and tall, and
     every pixel of padding is a pixel of empty blue. The protection zone of
     §04 still clears the crown by 6 to 20px at every width in the band. */
  .hero__plate{grid-template-columns:minmax(0,1fr);row-gap:var(--space-3);
    padding:var(--space-3);grid-template-rows:auto minmax(0,1fr)}
  /* Ja no hi ha `hero__facts`: el segell és un sol bloc i no necessita
     repartir-se en columnes. */
}

@media (max-width:900px){
  .hero__grid,.story,.where,.alert{grid-template-columns:1fr}
  .hero__grid > *,.story > *,.where > *,.alert > *{min-width:0}
  /* One column, and the field goes LAST. Between the lead and the buttons it
     pushed the two actions past the fold of a 390x844 phone, which is the one
     thing this hero cannot do; behind them it closes the section as a band
     that bleeds to both edges and runs down to the section's own bottom.
     So the phone and WhatsApp stay in the first screen, and the cobalt still
     changes the ground from edge to edge (bar.md M2). */
  /* `.section.hero` i no `.hero`: dins d'aquesta media query hi ha un
     `.section{padding-block:var(--space-4)}` MÉS AVALL, amb la mateixa
     especificitat, que guanyava per ordre de codi. O sigui que el
     `.hero{padding-top}` d'aquí era codi mort i ningú ho havia vist perquè
     els dos valien 40 px. En treure el marge negatiu del ticker deixaven de
     valer el mateix i el hero de mòbil guanyava 24 px d'aire del no-res. */
  .section.hero{padding-top:var(--space-2)}
  .hero__grid{grid-template-areas:"lede" "close" "plate";row-gap:var(--space-3)}
  /* padding-inline = the bleed, so the content INSIDE the field lands back on
     the same 16px street as the column above it: the symbol and the first
     column of figures join the axis instead of floating in the band. */
  .hero__plate{margin-top:var(--space-2);
    margin-bottom:calc(var(--space-4) * -1);
    margin-inline:calc(var(--hero-bleed) * -1);
    padding:var(--space-3) var(--hero-bleed) var(--space-4)}
  /* El pez ocupaba 293 px CSS en exclusiva, el 41 % de la segunda pantalla, y
     empujaba las cifras de prueba a 1,55-1,76 pantallas de profundidad — en
     escritorio están en la primera. Ahora va AL LADO de las cifras en una
     columna estrecha y las atraviesa, así que la banda entera cabe en una
     pantalla y las cifras suben a 0,9.
     §04 sigue cumplido: el fichero lleva un 5,7 % de margen transparente
     propio por arriba y el `align-self:start` deja la corona holgada. */
  /* En mòbil el camp deixa de ser una columna alta: el peix passa a un buit
     de 104 px a l'esquerra i el segell se li posa al costat. Apilats
     ocuparien mitja pantalla per dir dues coses. */
  .hero__plate{grid-template-columns:minmax(0,104px) minmax(0,1fr);
    column-gap:var(--space-3);grid-template-rows:auto;align-items:center}
  .hero__fish{max-width:100%;width:100%;align-self:center;justify-self:center;
    grid-column:1;grid-row:1}
  /* En aquesta banda el camp és ample i baix, i la composició es posa en
     horitzontal: el peix a l'esquerra i el logotip a la dreta, alineat a
     l'esquerra en lloc de centrat perquè comparteix la línia amb el peix. */
  .hero__logotip{grid-column:2;grid-row:1;align-self:center;
    align-items:flex-start}
  .hero__logotip__claim{text-align:left}
  /* Per sota de 521 px el peix està fixat a una columna de 104 px, i deixar
     que el logotip arribi als seus 320 el deixava a 3,08× el peix: el símbol
     es perdia al costat del nom. A 240 la relació es queda com la que es veu
     a 390 px, que és 2,2×, i el peix segueix llegint-se com a part del
     conjunt. El tall va a 520 i no a 519 a propòsit: entre el
     `max-width:519px` i el `min-width:521px` que ja hi havia queda un forat
     d'un píxel, i aquesta propietat no hi ha de caure. */
  @media (max-width:520px){
    .hero__logotip__marca{width:min(100%,240px)}
  }

  .alert{gap:var(--space-3)}
  .draws{grid-template-columns:1fr;gap:var(--space-2)}
  .prizes{grid-template-columns:1fr;gap:var(--space-2)}
  .numbers__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  /* Estas dos reglas son del MARCADOR de hueco, no de la foto. Aplicadas a
     una imagen real, el `aspect-ratio:3/2` y el `min-height` la deformaban:
     medido a 320 px daba 1,44 en lugar de 1,778, es decir la foto aplastada.
     Se escopan a `.plate`, que es el rectángulo vacío que espera foto. */
  .map{height:auto;min-height:200px}
  .map{aspect-ratio:2/1;min-height:0}
  .map__pin{left:40%;top:38%}
  .map__pin svg{width:30px;height:30px}
  .where{gap:0} /* map + shop card read as one block */
  .shop{border-top:none}
  .shop__actions{flex-direction:column;align-items:stretch}
  .finder{display:block}
  .finder__digits{gap:var(--space-1);width:100%}
  .finder__digit{flex:1 1 0;width:auto;min-width:0;height:56px;font-size:24px;padding:0}
  .finder .btn{width:100%;margin-top:var(--space-2)}
    .business .btn{width:100%}
  .alert__row .btn{width:100%}
  .draw .btn{width:100%}
  .prize-total{white-space:normal}
  .section{padding-block:var(--space-4)}
  .section--tight{padding-block:var(--space-4)}
  .rule-top{padding-top:var(--space-4)}
}

/* 520-900 · the hero is one column, so the field is now 520-900px wide and
   full-bleed. A 208px symbol with the figures under it would leave the same
   empty blue this round is here to remove — measured, 9.7% of ink at 600px —
   so from the width where the band stops being a phone the field goes back to
   the two columns of the desktop, with the four figures in one column spread
   over the whole height of the band. */
@media (min-width:521px) and (max-width:900px){
  /* padding-top climbs to 40 because in this band the symbol is as tall as the
     field's whole content box, so the top of the protection zone (§04) is the
     field's own top padding and nothing else. */
  .hero__plate{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:var(--space-4);align-items:center;padding-top:var(--space-4);
    grid-template-rows:auto}
  .hero__fish{max-width:min(100%,240px);width:auto;align-self:center;
    justify-self:center;grid-column:1;grid-row:1}
  .hero__logotip{grid-column:2;grid-row:1;align-self:center}
}

/* The two hero actions only stack once the pair stops fitting on one line.
   Between 520 and 900px the column is single but still 500-860px wide, and
   two pills stretched to that width would read as two banners. */
/* Ocho tarjetas en una columna costaban 1,9 pantallas de móvil contra 0,46 en
   escritorio: 4,1 veces el presupuesto vertical por el mismo dato. A dos
   columnas caben desde 360 px con la cifra a su tamaño de móvil. Por debajo
   de 360 el número en mono a 0,14 em ya no entra sin desbordar su caja. */
@media (max-width:359px){
  .numbers__grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:519px){
  /* §07 · the stacked pair used to sit 12px apart, a value off the
     8/16/24/40/64/96 scale and the only override of its kind in the piece.
     It is now the same --space-2 the pair uses side by side on the desktop,
     so the gap is on the grid and identical at both breakpoints. */
  .hero__actions{flex-direction:column;align-items:stretch;gap:var(--space-2)}
  .hero__actions .btn{width:100%}
}