/* ============================================================
   verfijning.css — de finetune-ronde van 11 augustus.

   Apart gehouden van stijl.css zodat deze ronde als geheel te beoordelen en zo nodig
   terug te draaien is. Wordt ná stijl.css en wp.css geladen, vóór beweging.css.

   Alles hier komt uit een meting of uit een concrete opmerking, niet uit smaak alleen.
   Per blok staat welke.
   ============================================================ */

/* ---------- 1. de gerechten- en wijnlijsten ----------
   Opmerking: "te saai". Terecht. Een naam links en een prijs 1200 pixels verderop is
   een spreadsheet; je oog moet die afstand elke regel opnieuw overbruggen.

   Wat een gedrukte menukaart doet, doen wij nu ook: een puntjeslijn die naam en prijs
   aan elkaar knoopt, en twee kolommen zodra er ruimte voor is. Dat halveert de afstand,
   vult de bladspiegel en leest van boven naar beneden zoals een kaart hoort te lezen. */
.gerecht{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7rem;row-gap:.1rem;
  border-bottom:0;padding:.92rem 0;
}
.gerecht__naam{order:0;flex:0 1 auto}
/* de puntjeslijn zelf: een flexibel tussenstuk dat de rest van de regel opvult */
.gerecht::after{
  content:'';order:1;flex:1 1 2.5rem;min-width:1.5rem;align-self:baseline;
  border-bottom:1px dotted rgba(94,26,28,.32);transform:translateY(-.3em);
}
.gerecht__prijs{order:2;font-size:1.06rem}
/* min-width en niet alleen flex-basis: stijl.css geeft deze regel max-width:58ch, en
   daardoor dwong flex:1 1 100% nooit een regelafbreking af. Gevolg: vanaf 1280px bleef
   bij twaalf van de tweeentwintig gerechten de prijs midden in de regel hangen in plaats
   van rechts uit te lijnen (11-08 gemeten). */
.gerecht__bij{order:3;flex:1 1 100%;min-width:100%;margin-top:.1rem}

/* Twee kolommen alleen waar de lijst de volle tekstbreedte krijgt. Staat hij in de
   smalle kolom naast een foto (.duo--lijst), dan is één kolom juist goed — vandaar de
   directe-kindselector in plaats van een losse breedteregel. */
@media (min-width:64rem){
  .wrap > .gerechten{
    display:block;columns:2;column-gap:3.4rem;
    column-rule:1px solid rgba(226,207,184,.85);
  }
  .wrap > .gerechten > .gerecht{break-inside:avoid;-webkit-column-break-inside:avoid}
}
/* een lijst die met een kop begint mag die kop niet halverwege een kolom krijgen */
.wrap > .gerechten > h3{break-after:avoid}

/* ---------- 2. aanraakdoelen ----------
   Gemeten in de sweep: de menuknop was 67x33 px en de categorieknoppen 34 px hoog.
   Onder de 44 px mis je ze met je duim — en juist die knoppen zijn op een telefoon de
   enige manier om door de kaart te navigeren. */
.menuknop{min-height:44px;padding:.62rem 1.05rem}
.haken a,.springlijst a{min-height:44px;display:inline-flex;align-items:center}
/* het logo is een link; ook die hoort een fatsoenlijk raakvlak te hebben */
.top .merk,.voet__merk{min-height:44px;display:inline-flex;align-items:center}

/* ---------- 3. de sierletter loopt net buiten zijn kader ----------
   Gemeten: .hand liep op elke pagina en elke breedte 3 tot 4 px buiten zijn eigen kader.
   Dat is de schuine uitloop van de sierletter; zonder ruimte ernaast wordt de laatste
   haal afgeknipt. */
/* .06em is de ontwerpwaarde uit stijl.css. Ik had hem op .14em gezet om een vermeende
   afknipping te repareren die niet bestond (het element heeft overflow:visible), en dat
   brak elf koppen een regel extra af. */
.hand{padding-right:.06em}

/* ---------- 4. de likeurvakjes ----------
   Gemeten op 320 en 480 px: "Boterbabbelaar" en "Kersenbonbon" pasten niet in hun vakje.
   Een naam die uit zijn etiket loopt oogt slordig; afbreken mag hier gewoon. */
.likeur{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:30rem){
  .kabinet{grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr))}
  .likeur{font-size:.88rem;padding:.8rem .6rem .7rem}
}

/* ---------- 6. de paginakoppen ----------
   Opmerking: "te leeg / saai". Klopt. Een kop van twee regels en een alinea van vier
   staan naast een foto van ruim 500 px hoog; wat overblijft is een gat.

   Twee dingen, in deze volgorde. Eerst de foto minder hoog maken — dan is de rij minder
   hoog en verdwijnt het grootste deel van de leegte vanzelf. Daarna de kolom vullen met
   iets dat een bezoeker wil weten: waar het huis voor staat, wat het kost, hoe groot het
   gezelschap mag zijn. Geen opvulling, feiten. */
/* VALKUIL (11-08 gemeten, dit was de klacht van de klant): hier stond `.kop__beeld img`.
   In dat kader zit niet alleen de kopfoto maar óók het ronde zegel met het merkteken
   (`.paar__zegel img`, 33x33 in stijl.css). Beide selectoren wegen even zwaar en dit
   bestand laadt later, dus deze won: het monogram werd opgerekt tot volle breedte en
   boven en onder afgesneden — op acht van de negen pagina's.
   Het directe-kindteken lost het op: de kopfoto is een direct kind van de figure,
   het zegel zit een niveau dieper in zijn eigen span. */
.kop__beeld > img{max-height:clamp(20rem,38vw,29rem);object-fit:cover;width:100%}

/* een rij korte feiten onder de intro */
.kopfeiten{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.15rem;
  margin:1.5rem 0 0;padding:0;list-style:none;
}
.kopfeiten li{
  display:flex;align-items:baseline;gap:.5rem;
  font:600 .92rem/1.35 var(--body);color:var(--inkt);
}
.kopfeiten li::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;
  background:var(--koper);flex:none;transform:translateY(-.15em);
}
.kopfeiten b{font:700 1.06rem/1 var(--kop);color:var(--wijn);font-variant-numeric:tabular-nums}

/* een uitspraak van de eigenaar, in zijn eigen woorden */
.kopcitaat{
  margin:1.6rem 0 0;padding:0 0 0 1.15rem;border-left:2px solid var(--koper);
  font:400 1.14rem/1.55 var(--kop);color:var(--inkt);max-width:34ch;
}
.kopcitaat cite{
  display:block;margin-top:.5rem;font:700 .74rem/1 var(--body);font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);
}

@media (max-width:900px){
  .kop__beeld > img{max-height:18rem}
  .kopcitaat{max-width:none}
}

/* ---------- 5. de openingstijden ----------
   Opmerking: de rij van vandaag sprong uit de tabel. Nu staat de pil erboven en zijn
   alle zeven dagen even zwaar, met vandaag alleen zacht gemarkeerd. */
.tijden{max-width:30rem}
.tijden td{padding:.62rem .55rem}
.tijden tr.vandaag td{font-weight:700}