/* ============ st64 — Wie zijn wij? (#wie-zijn-wij): Roy stelt zich voor als de eigenaar (A1) en "Hier sta ik voor:"
   staat boven de drie beloften (B1), de keuze uit st63-roy vastgezet. Gezet door ../st64-roy-vast.py. Elke .vN is
   :root geworden (zelfde gewicht), zie clients/_pipeline/VARIANTS.md. Tot 620px staat alles buiten ?telefoon=uit.
   ============ */

/* ═════════ A1 · de groet blijft, de eigenaar volgt ═════════ */

  /* het woord: de oude groet weg, deze regel aan */
  :root #wie-zijn-wij .wie__schaduw > .wie__hoi{display:none}
  :root #wie-zijn-wij [data-roy="eigenaar"]{display:block}
  :root [data-roy="eigenaar"]{position:relative;z-index:2;margin:0}

  /* computer: linksonder op de foto, binnen de vijf zesde van het portret die niet onder de kaart liggen */
  @media (min-width:861px){
    :root .wie__schaduw{padding-top:calc(9rem + clamp(1.9rem,3.4vw,2.8rem) + .9 * clamp(4.2rem,7vw,6.4rem))}
    :root [data-roy="eigenaar"]{
      grid-column:1 / 3;grid-row:1 / -1;align-self:end;
      padding:0 calc(100% / 6 + clamp(1rem,2vw,1.6rem)) clamp(1.3rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.2rem);
    }
  }
  /* 621–860 (en ?telefoon=uit): onderaan de foto, boven de rand van de kaart die over de foto valt */
  @media (max-width:860px){
    :root .wie__schaduw{padding-top:calc(5.5rem + .85 * clamp(2.6rem,12vw,3.4rem))}
    /* zijn gezicht blijft vrij: de regel begint op zijn vroegst 20px onder zijn kin (67% van de hoogte van de foto, die
       hier 4:5 is over de hele breedte: 83,75% van de breedte). Heeft hij meer ruimte nodig dan de foto van 10:11 heeft
       (alleen met ?telefoon=uit op een smal scherm), dan wordt het vak langer: de foto houdt zijn 4:5 van boven af,
       daaronder is het donkergroen, onder de schaduw. De 10:11 van het vak komt dan van een opvulling (::before) in
       plaats van aspect-ratio, die met stretch de breedte zou laten meegroeien */
    :root .wie__beeld{aspect-ratio:auto;align-self:stretch;background:var(--groen-900)}
    :root .wie__beeld::before{content:"";display:block;padding-top:110%}
    :root .wie__beeld img{bottom:auto;height:auto;aspect-ratio:4 / 5}
    :root [data-roy="eigenaar"]{
      grid-column:1 / -1;grid-row:1;align-self:end;
      padding:calc(83.75% + 1.25rem) var(--r-3) calc(var(--over) + var(--r-2));
    }
  }
  /* telefoon: de regel begint waar de groet begon, onderaan de foto, en loopt eronder door in het donkergroen; de foto
     zoals in st63 */
  @media (max-width:620px){
    :root:not([data-telefoon="uit"]) .wie__schaduw{padding-top:calc(9rem + .85 * clamp(3.2rem,15vw,4.5rem))}
    :root:not([data-telefoon="uit"]) .wie__beeld{align-self:normal;background:none}
    :root:not([data-telefoon="uit"]) .wie__beeld::before{content:none}
    :root:not([data-telefoon="uit"]) .wie__beeld img{bottom:0;height:100%;aspect-ratio:auto}
    :root:not([data-telefoon="uit"]) [data-roy="eigenaar"]{
      grid-column:1 / -1;grid-row:auto;align-self:auto;
      margin-top:calc(-1 * (.85 * clamp(3.2rem,15vw,4.5rem) + var(--r-2)));padding:0 var(--pad);
    }
  }

  /* de groet zoals hij is (zijn handschrift, dezelfde maten); de tweede zin in de letter van de koppen */
  :root [data-roy="eigenaar"] .wie__eigen{
    display:block;margin-top:.5em;font-family:var(--serif);font-weight:500;line-height:1.25;letter-spacing:0;
    text-wrap:balance;
  }
  @media (min-width:861px){
    /* de groet op één regel: met de grote naam op een eigen regel kwam de zin over zijn kin */
    :root [data-roy="eigenaar"] .wie__hoi-1{display:inline}
    :root [data-roy="eigenaar"] .wie__hand{margin:0 0 0 .06em;font-size:clamp(2.6rem,5.2vw,5rem)}
    :root [data-roy="eigenaar"] .wie__eigen{font-size:clamp(1.25rem,2.1vw,1.75rem)}
  }
  @media (max-width:860px){
    /* één regel op 496px: met twee regels kwam hij op 768 over zijn kin */
    :root [data-roy="eigenaar"] .wie__eigen{margin-top:.3em;font-size:1.25rem}
  }
  @media (max-width:620px){
    :root:not([data-telefoon="uit"]) [data-roy="eigenaar"] .wie__eigen{margin-top:var(--r-1);font-size:clamp(1.25rem,5.6vw,1.5rem);text-shadow:none}
  }

/* ═════════ B1 · de kop ═════════ */

  /* het woord */
  :root #wie-zijn-wij [data-roy="voor"]{display:block}
  :root [data-roy="voor"]{position:relative;z-index:1;margin:0}

  /* computer: een rij erbij in de kaart, bovenaan; het portret loopt over alle rijen */
  @media (min-width:861px){
    /* de lucht boven en onder de kaart mag kleiner dan in st63 (1rem in plaats van 2rem op 861): anders werd het
       portret op 861 hoger dan 4:5 om de kaart met haar kop te houden */
    :root .wie__kaart{grid-template-rows:minmax(clamp(1rem,2vw,3.5rem),1fr) auto auto minmax(clamp(1rem,2vw,3.5rem),1fr)}
    :root .wie__beeld{grid-row:1 / -1}
    :root .wie__kaart::after{grid-row:2 / 4}
    :root .wie__punten{grid-row:3;padding-top:0}
    :root [data-roy="voor"]{grid-column:2 / 4;grid-row:2}
  }

  /* 621–860 (en ?telefoon=uit): ook hier een rij erbij, bovenin de kaart die over de foto valt */
  @media (max-width:860px){
    :root .wie__kaart::after{grid-row:2 / 4}
    :root .wie__punten{grid-row:3;margin-top:0;padding-top:0}
    :root [data-roy="voor"]{grid-column:2;grid-row:2;margin-top:calc(-1 * var(--over))}
  }

  /* telefoon: tussen de foto en de beloften; het goudlijntje van de lijst gaat naar deze regel */
  @media (max-width:620px){
    :root:not([data-telefoon="uit"]) .wie__punten::before{content:none}
    :root:not([data-telefoon="uit"]) [data-roy="voor"]{grid-column:1 / -1;grid-row:auto;margin:0;border:0}
  }

  /* een gedrukte kop, cursief, met een dubbele punt */
  :root [data-roy="voor"]{font-family:var(--serif);font-style:italic;font-weight:500;line-height:1.15;letter-spacing:-.005em;color:var(--groen-700)}
  @media (min-width:861px){
    :root [data-roy="voor"]{
      margin:0 clamp(1.8rem,3.4vw,3rem);padding:calc(4px + clamp(1.3rem,2.2vw,1.9rem)) 0 clamp(.9rem,1.5vw,1.2rem);
      border-bottom:1px solid var(--kalk-300);font-size:clamp(1.55rem,2.4vw,2.1rem);
    }
  }
  @media (max-width:860px){
    :root [data-roy="voor"]{
      margin-inline:var(--r-2);padding:calc(4px + var(--r-3)) 0 var(--r-2);border-bottom:1px solid var(--kalk-300);
      font-size:clamp(1.5rem,4.2vw,1.8rem);
    }
  }
  @media (max-width:620px){
    :root:not([data-telefoon="uit"]) [data-roy="voor"]{padding:var(--r-3) var(--pad) 0;color:var(--bak-600);font-size:clamp(1.6rem,8vw,2.2rem)}
    :root:not([data-telefoon="uit"]) [data-roy="voor"]::before{content:"";display:block;width:48px;height:2px;margin-bottom:var(--r-3);background:var(--bak-600)}
  }