/* CloudLabs · storing.css · de pagina Na een storing (R1 / RCA)
   ==========================================================================
   Hangt onder huisstijl/pagina.css. Laadvolgorde: pagina.css -> storing.css
   Zelfde raster als de rest: kantlijn --kantlijn, tekst --kolom. */

.storingpagina{max-width:var(--max);margin:0 auto}
.storingkop{margin:0 0 40px var(--inspring);max-width:var(--kolom)}
.storingkop h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,52px);
               line-height:1.06;letter-spacing:-.022em;margin:0 0 22px;text-wrap:balance}
.storingkop .lead{font-family:var(--serif);font-size:21px;line-height:1.55;color:var(--dim);margin:0;max-width:none}

/* Het directe antwoord: wie hier komt heeft haast en wil binnen één alinea
   weten of hij hier goed zit. Taalmodellen citeren overwegend uit het eerste
   deel van een pagina, dus dit blok doet twee dingen tegelijk. */
.direct{margin:0 0 46px var(--inspring);max-width:var(--kolom);
        border-left:2px solid var(--accent);padding:2px 0 2px 22px}
.direct p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);margin:0}

.stap-blok{display:grid;grid-template-columns:var(--kantlijn) minmax(0,1fr);gap:0 var(--kantgat);
           border-top:1px solid var(--rule);padding:38px 0 18px;
           scroll-margin-top:calc(var(--kopbalk,80px) + 20px)}
.stap-naam{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
           color:var(--faint);margin:0;padding-top:10px}
.stap-tekst{max-width:var(--kolom)}
.stap-tekst h2{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.16;
               letter-spacing:-.012em;margin:0 0 18px}
.stap-tekst h3{font-size:17px;font-weight:600;margin:28px 0 10px}
.stap-tekst p{font-family:var(--serif);font-size:18px;line-height:1.72;color:var(--dim);margin:0 0 18px}
.stap-tekst ul{margin:0 0 18px;padding-left:22px}
.stap-tekst li{font-family:var(--serif);font-size:18px;line-height:1.68;color:var(--dim);margin:10px 0}
.stap-tekst p:last-child,.stap-tekst ul:last-child{margin-bottom:0}
.stap-tekst a{color:var(--accent)}
.stap-tekst code{font-family:var(--mono);font-size:.86em;background:var(--sunk);
                 border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink)}

/* de meetwaarden uit de veldrun, in mono omdat het gemeten getallen zijn */
.veldwaarde{font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--ink);
            background:var(--sunk);border:1px solid var(--rule);border-radius:4px;
            padding:16px 18px;margin:0 0 18px;font-variant-numeric:tabular-nums}

.vraagblok{border-top:1px solid var(--rule);padding:24px 0}
.vraagblok:first-child{border-top:0;padding-top:0}
.vraagblok h3{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.35;margin:0 0 12px;
              scroll-margin-top:calc(var(--kopbalk,80px) + 20px)}
.vraagblok p{font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--dim);margin:0 0 12px}
.vraagblok p:last-child{margin:0}

@media(max-width:820px){
  .stap-blok{grid-template-columns:1fr;gap:0;padding-top:30px}
  .stap-naam{padding-top:0;margin-bottom:12px}
  .storingkop .lead{font-size:18px}
  .stap-tekst h2{font-size:26px}
  .stap-tekst p,.stap-tekst li{font-size:16.5px}
}