/* ==========================================================================
   El Nostre Restaurant — full d'estil, versió 2
   La carta impresa damunt de la taula: cinc fulls quadrats per la cantonada
   de dalt a l'esquerra, i una goma negra que els subjecta.

   Les mides surten de mesurar el plantejament gràfic píxel a píxel, no de
   calcular-les a ull. Tot està en proporció a l'amplada de la pila, així que
   canviant --pila-w es mou tot alhora.
   ========================================================================== */

:root{
  /* El full de la marca i les quatre seccions. Els tres primers colors són
     els del plantejament, llegits píxel a píxel. El quart no hi era: és el
     verd bosc de la paleta Rusiñol, que a la v1 ja era d'El Seu i de ningú
     més. De passada fa de nota greu al final de la pila. */
  --sorra:#D9C0A1;
  --salvia:#ABA477;
  --terra:#B07B41;
  --ocre:#CAB669;
  --bosc:#2B4034;

  --tinta:#1E1E1E;
  --tinta-clara:#F2EFE6;
  --negre:#000000;
  --fusta-fosca:#4A2F18;
  --os:#F1EEE6;        /* el blanc trencat de fora del tauler */

  /* ----- la geometria -----
     Els cinc fulls fan tots la mateixa mida i estan escalats: cadascun un pas
     més a la dreta i un pas més avall que l'anterior. La mida no depèn de la
     fondària, i el lloc de cada full a la pila no canvia mai.

     Això últim és el que fa que el muntatge funcioni. Si la mida depengués de
     la fondària, el full que obres creixeria i el de més avall taparia tots
     els altres; amb la mida fixa, obrir-ne un només el puja per damunt, i
     dels que té a sobre en queda la franja de dalt i dels que té a sota la
     franja de baix. */
  /* ----- EL DIT -----
     La mesura que sobresurt d'un full al següent, igual en horitzontal que
     en vertical. Tot el muntatge en depèn: l'amplada del tauler, el marge de
     fusta, l'alçada del cantell i l'escala dels noms. Un sol número. */
  --dit:clamp(26px, 7vw, 40px);

  /* El tauler es tanca al voltant del taco: just un dit a cada banda.
     Compte amb què es compta. El taco no acaba on acaba el full de dalt:
     la carta és un dit més ampla i sobresurt per la dreta. Si el marge es
     comptés sobre --pila-w, la carta se'n menjaria tot el de la dreta i la
     fusta quedaria d'un dit a l'esquerra i de res a l'altra banda.

     Per això el tauler es compta sobre l'extensió de debò del taco —full +
     4 dits d'escala + 1 dit de carta— i hi afegeix un dit a cada costat.
     Resultat: fusta d'un dit a banda i banda, i el tauler un dit més ample
     del que era. --pila-w es queda com estava perquè d'ell en pengen totes
     les mides de lletra: tocar-lo hauria fet créixer tota la tipografia. */
  --base-w:min(560px, var(--vw, 100vw));
  --fitxa-w:calc(var(--base-w) - 6 * var(--dit));
  /* La proporció del full és 1,9 d'alt per 1 d'ample: la d'una carta
     impresa. En una pantalla estreta, però, el full s'encongeix pels dos
     costats alhora i la carta —setze plats— deixa de cabre-hi: a 375px
     demanava 180 píxels més dels que tenia.

     Com que l'alçada ja no es toca mai —cada full fa exactament un dit més
     que el de davant, i això és el muntatge—, qui ha de cedir és la
     proporció del full, no el pas d'un dit, que és el que es veu. D'aquí
     els tres termes:

       1,9 × l'ample   la proporció de la carta impresa. Mana a partir dels
                       560px, que és on el taco ja té la seva mida.
       608px           terra: el full no és mai més curt del que és en una
                       pantalla gran. Mana entre 440 i 560.
       el pendent      per sota de 440px el dit ja ha tocat el seu mínim i
                       el full continua estrenyent-se: el text s'allarga i
                       cal tornar-li l'alçada que la proporció li menja.

     Vol dir que en un mòbil el full queda més allargat que en un escriptori.
     És l'única manera de mantenir el pas fix sense retallar la carta. */
  /* L'alçada base del full. El valor de debò el mesura i l'escriu el JS
     —veure calculaAlcada()—: pregunta als cinc fulls què demana el seu text a
     aquesta amplada i es queda amb el pitjor cas. El que hi ha aquí és el
     valor de partida, el que es veu abans que el JS arribi i el que queda si
     no arriba mai. */
  --fitxa-h:max(calc(var(--fitxa-w) * 1.26), 525px);
  /* El taco: el full més els quatre dits que s'escalen. */
  --pila-w:calc(var(--fitxa-w) + 4 * var(--dit));
  --tauler-w:min(calc(var(--pila-w) + 3 * var(--dit)), var(--vw, 100vw));
  --cos-pad:calc(var(--dit) * 0.78);

  /* Les fotografies surten ja grans: la mida que abans només es veia en
     clicar-les. */
  --pola-w:clamp(168px, 46vw, 250px);

  /* Els dos logotips. El d'El Nostre Restaurant mana, i el de La Central
     en penja: a 0,60 d'amplada les dues lletres fan el mateix cos. El número
     no és a ull, surt de mesurar les bandes de tinta dels dos fitxers —93px
     d'alçada de lletra sobre 833 d'ample el primer, 131 sobre 706 el segon—
     i igualar-les. */
  --logo-w:clamp(150px, calc(var(--pila-w) * 0.47), 235px);

  /* La goma. L'adreça i els dos accessos van A SOBRE d'ella, no per damunt
     seu: la goma és la franja on viuen. Per això ha de ser prou gruixuda per
     aguantar-los, que és el que la fa "una mica més gruixuda" del que jo
     l'havia feta. */
  /* La caiguda de la goma: mig dit des de dalt del full, no un dit sencer.
     Pujar-la acosta la franja negra al cantell de dalt i, de retruc, puja tot
     el contingut dels fulls —el coixí de dalt de .cos es compta des d'aquí—,
     que és el que deixa més aire entre el text de dalt i el peu de baix. */
  --goma-dalt:calc(var(--dit) * 0.5);
  --goma-gruix:clamp(26px, calc(var(--dit) * 0.85), 34px);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Poppins',-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--tinta);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;

  /* Fora del tauler, blanc trencat: el full on cauen les fotografies. */
  background:var(--os);
  position:relative;
  /* El tauler es mesura en vw, que no descompta la barra de desplaçament:
     en una finestra estreta amb barra sobraria una mica i apareixeria
     scroll horitzontal. */
  overflow-x:hidden;
}

:focus-visible{outline:3px solid var(--negre);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--sorra);color:var(--tinta);
  padding:12px 20px;font-weight:700;z-index:200}
.skip:focus{left:0}

/* EL TAULER: la fusta amb tot el que hi ha a sobre. Té un límit —no és un
   fons que s'estiri fins on arribi la pantalla— i va centrat. Tot el que hi
   ha a sobre es col·loca respecte d'ell: el taco, les polaroids i la goma.

   La vinyeta no és decoració: fosqueja les vores i deixa el centre —on hi ha
   el taco— una mica més clar, que és el que fa que els fulls semblin posats
   damunt d'alguna cosa i no retallats. */
.escena{
  position:relative;
  width:var(--tauler-w);
  /* Un dit de fons clar per sota: el tauler és una post damunt d'una taula,
     no un fons que arriba fins on arribi la pantalla. Per això tampoc no
     porta min-height: s'acaba on s'acaba el taco. */
  margin:0 auto var(--dit);
  /* El coixí de dalt el posa el tauler, no el taco: si el marge el posés el
     taco, se li escaparia cap enfora i la fusta començaria catorze píxels
     més avall que la pàgina. */
  /* Mig dit a dalt i un dit a baix. No és simètric a propòsit: el que es
     guanya a dalt es gasta a fer els fulls més alts, que és el que els torna
     la proporció de carta impresa. A baix sí que cal el dit sencer, o el
     cantell de l'últim full queda retallat a escaire. */
  padding:calc(var(--dit) * 0.5) 0 var(--dit);
  background:
    radial-gradient(ellipse 110% 70% at 50% 28%,
      rgba(255,226,186,.10) 0%, rgba(0,0,0,0) 58%, rgba(0,0,0,.36) 100%),
    url("../img/taula.jpg") center top/cover;
  background-color:var(--fusta-fosca);
  box-shadow:0 0 40px rgba(0,0,0,.55);
}
/* Mentre hi ha algun full fora de lloc, el fons —fusta i blanc trencat—
   ensenya que es pot picar per tornar-ho tot al taco. Sense aquesta pista el
   gest no el trobaria ningú. Dins dels fulls el cursor ja se'l recupera cada
   cosa: el text, la mà oberta del paper i el dit dels controls. */
body.escampat{cursor:pointer}

/* El botó de recollir. No existeix fins que hi ha alguna cosa fora de lloc:
   mentre el taco està fet, aquí no hi ha res. Va fix a la finestra perquè és
   l'únic lloc que un full escampat no pot tapar.

   I va discret a propòsit. Era una píndola negra amb ombra i cridava massa:
   la manera normal de recollir és picar el fons, i això és només la xarxa per
   quan els fulls el tapen. O sigui que es comporta com el que és —un desfés,
   no una acció principal—: paper de fons, un fil de vora i la lletra petita
   de la casa. */
.recull{
  position:fixed;z-index:200;
  left:50%;bottom:18px;transform:translateX(-50%) translateY(6px);
  background:var(--os);color:var(--tinta);
  border:1px solid rgba(30,30,30,.28);
  font-family:inherit;font-weight:600;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;cursor:pointer;
  opacity:0;visibility:hidden;
  transition:opacity .22s, transform .22s, border-color .2s, background .2s;
}
body.escampat .recull{opacity:.82;visibility:visible;transform:translateX(-50%) translateY(0)}
body.escampat .recull:hover,body.escampat .recull:focus-visible{
  opacity:1;border-color:var(--tinta);background:#fff;
}
@media(prefers-reduced-motion:reduce){.recull{transition:none}}

/* ==========================================================================
   LA PILA
   Els cinc fulls comparteixen la cantonada de dalt a l'esquerra i cadascun
   del darrere és un pas més ample i un pas més alt. Per això del full amagat
   se'n veuen dues vores: la dreta i la de baix. La de baix porta el nom.
   ========================================================================== */
/* El taco va per damunt de les polaroids: són papers posats a sobre d'elles.
   El z-index aquí també tanca els dels fulls a dins, que és el que deixa que
   una polaroid agafada pugui pujar per sobre de tot el taco amb un sol
   número. */
.pila{
  position:relative;z-index:50;
  /* La caixa del taco inclou el dit que la carta sobresurt per la dreta: és
     la seva extensió de debò, i és el que la fa quedar centrada a la fusta. */
  width:calc(var(--pila-w) + var(--dit));
  height:calc(var(--fitxa-h) + 4 * var(--dit));
  margin:0 auto;
}
/* El full obert pot ser més curt que el de més avall, i llavors el seu
   contingut s'ha de poder llegir igual: el cos ocupa el full sencer. */
.fitxa[data-obert="si"]{overflow:hidden}

.fitxa{
  position:absolute;
  /* El lloc no canvia mai: cada full té el seu, i El Nostre sempre és el
     segon. L'únic que canvia en obrir-ne un és qui queda per damunt.
     Alineats per dalt, escalats cap a la dreta, i cadascun un pas més alt
     que l'anterior: d'aquí surt la franja de baix on va el nom. */
  top:0;
  left:calc(var(--i) * var(--dit));
  width:var(--fitxa-w);
  /* L'alçada base. Si el full obert no hi cap, el JS l'escriu en línia i
     l'augmenta —a ell i als que té a sota, per no tapar-los el cantell. */
  height:calc(var(--fitxa-h) + var(--i) * var(--dit));
  /* El lloc al taco no canvia mai, però el full SÍ que es pot agafar i moure
     per la taula. El desplaçament va en un transform, no en left/top: així no
     toca la geometria del taco i, deixant-lo a zero, el full torna al seu
     lloc exacte. La fondària la posa el JS en línia —veure fondaria[]—. */
  transform:translate(var(--mx, 0px), var(--my, 0px));
  cursor:grab;
  /* Una ombra curta i baixa: són fulls damunt d'una taula, no targetes
     flotant en l'aire. I un fil de llum al cantell de dalt, que és el gruix
     del paper agafant la llum. Això últim no és un detall: és el que separa
     el full verd d'El Seu de la fusta, que per color sols gairebé s'hi fonen
     (1,46:1). Si es treu, El Seu desapareix. */
  box-shadow:0 6px 14px rgba(34,16,0,.34),
             inset 0 1px 0 rgba(255,245,230,.22);
}
/* Dins del full, el text i els controls recuperen el cursor que els toca:
   la mà oberta és per al paper, no per a una paraula que es pot clicar. */
.cos{cursor:auto}
.crida,.cantell,.cos a,.accio{cursor:pointer}

/* Agafat amb el ratolí: s'aixeca una mica de la taula. El transform de moure
   el posa el JS en línia, o sigui que aquí només hi va l'ombra. */
.fitxa.agafada{cursor:grabbing;box-shadow:0 22px 44px rgba(26,12,0,.5),
  inset 0 1px 0 rgba(255,245,230,.26)}
/* Un full que ja no és al seu lloc: el cantell de dalt es marca una mica més,
   que si no sembla enganxat al que tingui a sota. */
.fitxa.moguda{box-shadow:0 10px 22px rgba(26,12,0,.44),
  inset 0 1px 0 rgba(255,245,230,.3)}

.fitxa-marca{background:var(--sorra)}
/* Els colors van per ordre de pila, no per secció: en moure la carta al
   final, cada secció hereta el to de la que tenia davant. El verd bosc —que
   a la v1 ja era el color de l'escola— es queda per al full de més avall,
   que ara és la carta, i fa de nota greu al final del taco. */
.fitxa-espai{background:var(--salvia)}
.fitxa-serveis{background:var(--terra)}
/* L'únic fosc: la tinta s'hi gira. */
.fitxa-escola{background:var(--ocre)}

/* La carta: l'única fosca, i un dit més ampla que la resta. L'amplada de
   més no és estètica: eixampla la columna de text i hi fa cabre els setze
   plats sense que el full hagi de créixer cap avall. Hi cap perquè l'últim
   full tenia un dit de marge de fusta a la dreta, i ara se'l queda. */
.fitxa-carta{
  background:var(--bosc);color:var(--tinta-clara);
  width:calc(var(--fitxa-w) + var(--dit));
}
.fitxa-carta .cantell{color:var(--tinta-clara);
  font-size:clamp(10.5px, calc(var(--pila-w) * 0.031), 13px);
  letter-spacing:.1em;text-transform:uppercase}
/* I una mica menys d'interlineat: amb setze plats, cada dècima compta.
   Entre l'amplada de més i aquests ajustos, la carta passa de demanar 255px
   més dels que tenia a cabre-hi de manera natural. */
/* El coixí de baix de tots els fulls deixa lloc a la franja del full de sota,
   que porta el seu nom. La carta no en té cap, a sota: és l'últim full, i
   quan està obert el seu propi cantell no es veu. O sigui que aquells trenta
   píxels de marge no guarden res, i amb setze plats fan molta falta. */
.fitxa-carta .cos{padding-bottom:16px}
/* La lletra de la carta creix més a poc a poc que la de la resta. El perquè
   és una pantalla de mig format —una tauleta de 480px—: allà la columna
   encara és estreta i, amb el pendent normal, la lletra ja hi arriba al seu
   màxim. Columna curta i lletra grossa alhora és el pitjor cas possible, i
   era l'únic lloc on els setze plats no hi cabien. Amb aquest pendent, la
   lletra arriba als 13px quan la columna també hi ha arribat: a la pantalla
   gran es veu igual que abans. */
/* I el pes. La resta del web va en 600 damunt de fons clar; aquí la lletra és
   clara damunt de fons fosc, i el blanc sobre fosc ja engreixa sol: en 600 la
   carta semblava tota en negreta. En 400 pesa el mateix que la de les altres
   fitxes. Els epígrafs —Primers, Segons, Postres— sí que es queden en 700. */
/* L'interlineat i la separació entre plats. Van ser molt més tancats del que
   són ara: la carta era el full que marcava l'alçada de tot el taco i cada
   dècima comptava. Ara ja no ho és —en una pantalla gran demana 460 quan en
   té 560— i es pot tornar a respirar, que una carta amb els plats arrambats
   l'un sobre l'altre es llegeix malament.

   En un mòbil, en canvi, la carta SÍ que continua sent la que mana: allà
   cada píxel que se li dóna creix el tauler. Per això la separació va en
   dues mides, i la del mòbil és més justa. */
.fitxa-carta .cos li{
  font-size:clamp(10.5px, calc(var(--pila-w) * 0.027), 13px);
  font-weight:400;
  line-height:1.26;margin-bottom:7px;
}
@media (max-width:559px){
  .fitxa-carta .cos li{line-height:1.22;margin-bottom:4px}
}
/* La càmera de la carta, una mica més petita i més arrambada que la de les
   altres fitxes: són setze, i cada plat porta la seva al final de la línia.
   Un parell de píxels de més hi feien saltar dos plats a una segona línia. */
.fitxa-carta .crida::after{width:.9em;height:.9em;margin-left:.2em;vertical-align:-.1em}
.fitxa-carta .cos h3{margin-top:17px}
.fitxa-carta .cos h3:first-of-type{margin-top:17px}
.fitxa-carta .cos ul{margin-top:9px}

/* El contingut només existeix al full de davant. visibility, no opacity: així
   els lectors de pantalla tampoc no llegeixen els fulls amagats, i el que se
   sent és el mateix que es veu.
   El coixí de dalt deixa passar la goma i la franja de l'adreça. */
/* overflow:hidden i no auto: el full no porta barra pròpia. Si el contingut
   no hi cap, qui creix és el full —ho fa ajustaAlcades() al JS— i qui es
   desplaça és la pàgina. Una carta de setze plats dins d'una caixa amb
   barreta era justament el que no es volia. */
.cos{
  position:absolute;inset:0;overflow:hidden;
  /* El coixí de dalt deixa passar la goma. És el mateix per a tots els fulls
     encara que la goma només travessi els dos primers: així el marge de dalt
     és igual a tot arreu, que és com està fet el paper de debò. */
  padding:calc(var(--goma-dalt) + var(--goma-gruix) + var(--pila-w) * 0.05)
          var(--cos-pad) calc(var(--dit) + 6px) var(--cos-pad);
  visibility:hidden;
}
.fitxa[data-obert="si"] .cos{visibility:visible}

/* Hi ha fulls que tenen peu: un bloc que no va darrere del text sinó A BAIX
   del full, com el peu d'una pàgina impresa. L'adreça de l'entrada i el «qui
   hi ha darrere» d'El Seu. Per això aquests dos cossos són una columna. */
.fitxa-marca .cos,.fitxa-escola .cos{display:flex;flex-direction:column}
.peu-full{margin-top:auto;padding-top:18px}

/* El cantell: la franja de full que es veu quan està tancat. Dels fulls que
   queden per sobre del que s'ha obert se'n veu la franja de dalt; dels que
   queden per sota, la de baix. El nom hi va a dins, i l'escala del
   plantejament surt sola perquè cada full ja està un pas més a la dreta. */
.cantell{
  position:absolute;left:0;right:0;z-index:2;
  height:var(--dit);
  border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:700;
  font-size:clamp(10.5px, calc(var(--pila-w) * 0.031), 13px);
  color:inherit;text-align:left;
  display:flex;align-items:center;
  padding:0 0 0 var(--cos-pad);
  transition:opacity .2s;
}
.cantell:hover{opacity:.62}
/* Amb tots els fulls alineats per dalt, l'única franja que sobresurt és la
   de baix: la de cada full queda per sota del que té al davant, perquè és un
   pas més alt. */
.fitxa .cantell{bottom:0}
/* L'obert es veu sencer: el seu nom ja és al titular. */
.fitxa[data-obert="si"] .cantell{visibility:hidden}

/* ==========================================================================
   LA GOMA I LA CAPÇALERA
   La goma negra travessa els cinc fulls i els subjecta: va per damunt de
   tots, i una mica més ampla que la pila, com una goma de debò que els
   abraça. Per sobre d'ella queda la franja de dalt del full, i allà hi ha
   l'adreça i els dos botons.
   ========================================================================== */
/* La goma va de costat a costat del tauler i s'hi acaba: ni un píxel més
   enllà de la fusta. I és la franja on viuen l'adreça i els dos accessos:
   hi van A SOBRE, no per damunt seu.
   Per anar del taco a les vores del tauler, el desplaçament es compta des
   del seu propi centre: just un dit a cada banda. */
.goma{
  position:absolute;z-index:70;
  top:var(--goma-dalt);
  /* Dos píxels més enllà de la fusta per cada banda. Just els que calen
     perquè sembli que la goma volta la post i torna per darrere; amb més,
     deixaria de ser una goma i semblaria una franja posada a sobre. */
  left:calc(var(--dit) * -1 - 2px);
  right:calc(var(--dit) * -1 - 2px);
  height:var(--goma-gruix);
  background:var(--negre);
  box-shadow:0 2px 6px rgba(0,0,0,.40);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--dit) * 0.3) 0 var(--dit);
  gap:10px;
  color:var(--tinta-clara);
}
.lloc{
  font-size:clamp(9px, calc(var(--pila-w) * 0.026), 12px);
  font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding-left:var(--cos-pad);
}
/* Els dos accessos, separats de debò i no arrambats l'un a l'altre: a cinc
   píxels semblaven un sol bloc partit. */
.accions{display:flex;gap:calc(var(--dit) * 0.45);flex:none}
.accio{
  position:relative;
  border:1px solid currentColor;background:transparent;color:inherit;
  font-family:inherit;font-weight:700;
  font-size:clamp(8px, calc(var(--pila-w) * 0.022), 10px);
  letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;cursor:pointer;line-height:1.5;
  transition:background .2s,color .2s;
}
/* La goma és estreta —ho és al plantejament— i el botó dibuixat hi ha de
   cabre. El que s'estira és la zona que respon al dit, no el dibuix: així el
   botó es veu petit i es pot tocar igualment. */
.accio::after{content:"";position:absolute;left:-4px;right:-4px;
  top:50%;transform:translateY(-50%);height:44px}
.accio:hover{background:var(--tinta-clara);color:var(--negre)}

/* ---------- on van exactament els dos accessos ----------
   Cadascun va centrat damunt del tros de full que li toca, i això es pot
   calcular perquè el muntatge és regular. En coordenades del taco —zero a
   l'esquerra del primer full— cada fitxa i ocupa de i·dit fins a i·dit+ample,
   o sigui que la franja que se'n veu per dalt va de la dreta de l'anterior a
   la seva pròpia:

     taronja (El Teu)   ample + 2 dits  ..  ample + 3 dits
     groc    (El Seu)   ample + 3 dits  ..  ample + 4 dits
     verd    (la carta) ample + 4 dits  ..  ample + 6 dits   (dos dits: és
                                                              un dit més ampla)

   Carta va al mig del verd —ample + 5 dits— i Reserves al mig del groc i el
   taronja junts —ample + 3 dits—. I com que la goma arrenca un dit i dos
   píxels a l'esquerra del taco, mesurant des d'ella aquests dos números es
   queden igual: el dit de desplaçament ja hi és comptat. */
@media (min-width:560px){
  .accio{position:absolute;top:50%;transform:translate(-50%, -50%)}
  .accio[data-va-a="espai"]{left:calc(var(--fitxa-w) + 3 * var(--dit) + 2px)}
  .accio[data-va-a="carta"]{left:calc(var(--fitxa-w) + 5 * var(--dit) + 2px)}
}
/* Per sota de 560 el taco s'encongeix i les franges es queden en 26 píxels:
   dos botons centrats allà se solaparien. Allà manen el flex i el coixí de
   la goma, que és com estaven. */

/* ---------- els logotips ---------- */
/* El nom de la casa ja no es compon amb text: és el logotip. Va dins de l'h1,
   i el nom el porta l'alt de la imatge —així qui no la veu el llegeix igual i
   el titular continua sent un titular de debò. */
.marca{line-height:0}
.marca img{display:block;width:var(--logo-w);height:auto}
/* El de La Central, al peu d'El Seu. A 0,60 els dos logotips tenien el mateix
   cos de lletra, que era el que es volia; però El Seu és el full que marca
   l'alçada de tot el taco i aquest logotip hi pesava tant com sis línies de
   text. A 0,45 la lletra queda un punt més petita que la de l'entrada —ja no
   coincideixen— i es guanyen 28px de taula. Decisió presa a consciència. */
.logo-central{display:block;width:calc(var(--logo-w) * 0.45);height:auto;margin-top:12px}
/* Un logotip no es subratlla. */
.logo-enllac{display:inline-block;text-decoration:none}
.logo-enllac:hover .logo-central,.logo-enllac:focus-visible .logo-central{opacity:.72}
.logo-central{transition:opacity .2s}

/* ---------- la tipografia del full, com la de la carta impresa ---------- */
.claim{margin-top:20px;font-size:clamp(11px, calc(var(--pila-w) * 0.037), 15px);
  font-weight:700;line-height:1.3}

.cos h2{font-size:clamp(15px, calc(var(--pila-w) * 0.049), 21px);
  font-weight:700;line-height:1.18}
/* Què és la secció, en petit sota el seu nom: El Nostre . és la carta,
   El Vostre . és l'espai. Sense això els quatre noms no es distingeixen. */
.peu-titol{font-size:clamp(9px, calc(var(--pila-w) * 0.0275), 11.5px);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:.62;margin-top:5px}

.cos h3{font-size:clamp(10.5px, calc(var(--pila-w) * 0.033), 13.5px);
  font-weight:700;line-height:1.2;margin-top:18px}
.cos h3:first-of-type{margin-top:20px}

.text{font-size:clamp(10.5px, calc(var(--pila-w) * 0.0315), 13px);
  font-weight:600;line-height:1.38;margin-top:7px}
.cos h2 + .text,.peu-titol + .text{margin-top:18px}

.cos ul{list-style:none;margin-top:10px}
.cos li{
  position:relative;padding-left:13px;
  font-size:clamp(10.5px, calc(var(--pila-w) * 0.0315), 13px);
  font-weight:600;line-height:1.32;margin-bottom:9px;
}
/* El punt de la marca, fent de pic de llista. */
.cos li::before{content:".";position:absolute;left:2px;top:0;font-weight:700}


/* ==========================================================================
   LES POLAROIDS
   Enganxades a la fusta, als marges, darrere del taco. Només surten les de
   la secció oberta. Es poden arrossegar: en agafar-ne una puja per damunt de
   tot, perquè en una pantalla estreta no hi ha marge i queden mig amagades
   darrere dels fulls. Moure-les és la manera de mirar-les.
   ========================================================================== */
/* El taulell és tota la pàgina, no el tauler: les fotografies cauen FORA de
   la fusta, damunt del blanc trencat. Per això va per sobre del tauler i
   arriba a les vores de la finestra. */
.taulell{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:80;
  /* El contenidor no ha de robar cap clic a la fusta ni al taco: només les
     polaroids responen. */
  pointer-events:none;
  /* Res de retallar. Hi va haver un overflow:hidden aquí per evitar el
     desplaçament horitzontal, i el preu era que qualsevol fotografia que es
     mogués una mica fora quedava tallada: justament el contrari del que es vol
     si la gràcia és poder jugar-hi. El desplaçament ja el mata el body. */
}

.polaroid{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--pola-w);
  pointer-events:auto;
  background:#F6F2E8;
  padding:7px 7px 0;
  /* Rectes. Res de rotacions: el paper està posat, no tirat.
     L'escala va escrita a cada estat i no en una variable: les propietats
     personalitzades no s'interpolen, i passant per una el canvi de mida feia
     un salt sec en comptes de créixer. */
  transform:scale(1);
  transform-origin:center;
  box-shadow:0 8px 18px rgba(26,12,0,.44);
  cursor:grab;
  /* Sense això, al mòbil el dit arrossega la pàgina en comptes de la foto. */
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  transition:box-shadow .2s, transform .22s cubic-bezier(.22,.72,.26,1);
}

.polaroid img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  -webkit-user-drag:none;
}
.peu-foto{
  /* El marge blanc de baix del paper, que és on s'escriu. */
  padding:7px 2px 11px;
  font-size:10px;font-weight:600;letter-spacing:.02em;color:#5A564C;
}

/* Aquí hi havia el dors de postal: la fotografia girava i al darrere hi havia
   unes ratlles per escriure-hi. Fora. Veure el comentari d'interaccions.js:
   per fer-ho de debò calien servidor, moderació i política de privacitat. */

/* La X per treure-la de la taula. Va a sobre del paper, no dins del marge:
   és un gest de retirar, no part de la fotografia. */
.treu{
  position:absolute;top:-9px;right:-9px;z-index:3;
  width:22px;height:22px;border-radius:50%;
  border:0;background:var(--negre);color:var(--tinta-clara);
  font-family:inherit;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .18s;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
/* Només surt quan la toques o hi tens el ratolí a sobre: si no, setze creus
   damunt de les fotos fan més soroll que servei. */
.polaroid:hover .treu,.polaroid:focus-within .treu,.treu:focus-visible{opacity:1}
/* Però el dit no fa hover: en tàctil sempre hi és. */
@media(hover:none){.treu{opacity:1}}

/* La caiguda no es fa aquí: la fa el JS, que és l'únic que sap d'on ha
   sortit la fotografia —del punt on s'ha clicat la paraula— i on va a parar.
   Veure fesCaure() a interaccions.js. */

/* Clicada: la meitat més gran, per mirar-la de prop sense sortir de la taula.
   Un altre clic la torna a deixar com era. Creix des de baix al centre —no
   des del seu propi centre— perquè el peu amb el nom no es mogui de lloc i la
   fotografia s'obri cap amunt, que és cap on hi ha espai. */
.polaroid.ampliada{transform:scale(1.5);transform-origin:center bottom;
  box-shadow:0 18px 40px rgba(26,12,0,.52)}
/* Agafada: s'aixeca una mica, com quan la tens als dits. Si ja era gran, es
   queda gran: agafar-la no és deixar-la anar. */
.polaroid.agafada{cursor:grabbing;transform:scale(1.06);animation:none;
  box-shadow:0 20px 38px rgba(26,12,0,.52)}
.polaroid.ampliada.agafada{transform:scale(1.56);transform-origin:center bottom}

.polaroid:focus-visible{outline:3px solid var(--sorra);outline-offset:3px}
/* Les de les altres seccions, i les que s'han tret, no hi són. */
.polaroid[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.polaroid{transition:none}}

/* ==========================================================================
   LES CRIDES: les paraules que treuen una fotografia
   Abans anaven subratllades de punts i semblaven enllaços, que és just el que
   no són: no porten enlloc, obren una foto. Ara el que ho diu és un petit
   icona de càmera darrere de la paraula, dins del text.

   L'icona va en una màscara i no en una imatge de color: així agafa el color
   de la lletra que té al costat i funciona igual damunt del sorra, del verd
   fosc o del que sigui, sense tenir-ne una versió per full.
   ========================================================================== */
:root{
  --icona-foto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7.6 1.4H4.2A2.8 2.8 0 0 0 1.4 4.2v3.4'/%3E%3Cpath d='M16.4 1.4h3.4a2.8 2.8 0 0 1 2.8 2.8v3.4'/%3E%3Cpath d='M7.6 22.6H4.2a2.8 2.8 0 0 1-2.8-2.8v-3.4'/%3E%3Cpath d='M16.4 22.6h3.4a2.8 2.8 0 0 0 2.8-2.8v-3.4'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' d='M6.5 7.8h2.9l.8-1.7h3.6l.8 1.7h2.9a1.8 1.8 0 0 1 1.8 1.8v6.2a1.8 1.8 0 0 1-1.8 1.8H6.5a1.8 1.8 0 0 1-1.8-1.8V9.6a1.8 1.8 0 0 1 1.8-1.8Zm5.5 2.1a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm4.6.5a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7Z'/%3E%3C/svg%3E");
}

.crida{
  display:inline;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:inherit;
  transition:opacity .2s;
}
/* L'icona, enganxada a la paraula. Va amb un espai fi al davant i amb
   white-space:nowrap al conjunt perquè mai no es quedi sola al principi de
   la línia següent, separada de la paraula que explica. */
.crida::after{
  content:"";
  display:inline-block;
  width:1.02em;height:1.02em;
  margin-left:.28em;
  vertical-align:-.14em;
  background-color:currentColor;
  -webkit-mask:var(--icona-foto) center/contain no-repeat;
          mask:var(--icona-foto) center/contain no-repeat;
  opacity:.52;
  transition:opacity .2s, transform .2s;
}
.crida:hover::after,.crida:focus-visible::after{opacity:1;transform:scale(1.1)}
/* Amb la fotografia a la taula, la paraula es queda marcada. */
.crida[aria-pressed="true"]::after{opacity:1}
/* Una crida curta —dues paraules— va sencera i amb l'icona enganxat: així no
   es queda mai una càmera sola al principi d'una línia. Les llargues sí que
   s'han de poder partir, o se'n sortiria la caixa. */
.crida.curta{white-space:nowrap}

/* La variant de la carta: cada plat ocupa la seva línia. L'icona es comporta
   exactament igual que a les altres fitxes —darrere del plat, sempre a la
   vista, i s'encén en passar-hi per damunt—. Abans sortia a la dreta i el
   text s'apartava: el moviment feia més nosa que servei en una llista de
   setze línies, i la càmera quedava lluny del plat que obria. */
.crida.bloc{
  display:block;width:100%;text-align:left;padding:0;
  background:none;white-space:normal;
}
@media(prefers-reduced-motion:reduce){.crida,.crida::after{transition:none}}

/* ---------- els enllaços que sí que porten a algun lloc ---------- */
/* El blau del navegador no hi pinta res: aquí tot són tons de terra. El verd
   bosc és l'únic color de la paleta que aguanta damunt dels tres fulls clars
   —6,4:1 sobre el sorra, 4,5:1 sobre el sàlvia, 5,6:1 sobre l'ocre—, o sigui
   que és aquest. Damunt del verd de la carta, el sorra. */
.cos a{
  color:var(--bosc);font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:text-decoration-thickness .15s, opacity .15s;
}
.cos a:hover,.cos a:focus-visible{text-decoration-thickness:3px}
.fitxa-carta .cos a{color:var(--sorra)}

/* ---------- el que encara està pendent ----------
   La nota groga de sota el tauler —fusta, fotografies— ja no hi és. La marca
   es queda perquè l'avís del dors de les postals sí que la fa servir: aquell
   no parla de la maqueta, parla a qui escriu. */
.pendent{background:#FFF3C4;color:#6B5600;padding:1px 5px;
  border-bottom:1px dotted #B79400}

/* ==========================================================================
   EL PEU LEGAL
   Fora del tauler, damunt del blanc trencat. No forma part del muntatge —el
   taco s'acaba on s'acaba la fusta—, però la llei demana que hi sigui i que
   es pugui trobar. O sigui: discret, no amagat.
   ========================================================================== */
.peu-legal{
  text-align:center;
  padding:0 var(--cos-pad) calc(var(--dit) * 1.1);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta);opacity:.6;
}
.peu-legal a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.peu-legal a:hover{opacity:1}
.peu-legal span{margin:0 8px}