/* Portfoliopagina Andor Manu Emilio Danse.

   Het palet komt uit twee dingen uit zijn eigen werk: de tabbalk van de browser
   (waar de helft van zijn vondsten over gaat) en het lichtblauwe vlak dat je krijgt
   als je een regel tekst selecteert (wat hij letterlijk de hele dag doet).
   Daarom heten de kleuren ook zo. */

:root {
  --tabbalk:     #1A1D21;  /* de donkere strook boven de pagina */
  --pagina:      #FBFBF9;  /* het warme wit van een leeg tabblad */
  --selectie:    #2B5CE6;  /* de rand van een geselecteerde regel */
  --selectievlak:#D8E4FE;  /* het lichte blauw achter geselecteerde tekst */
  --uitgegrijsd: #B7BCC2;  /* de kleur van "niet veilig" in de adresbalk */

  --inkt:        #14171A;  /* leestekst, iets zachter dan de tabbalk */
  --inkt-stil:   #5C6570;

  --kop:   'Gabarito', system-ui, sans-serif;
  --tekst: 'Source Serif 4', Georgia, serif;

  --regel: 34rem;   /* leesbreedte, in rem en niet in ch: ch rekent met de bodyletter
                       en dat gaf eerder een kop die middenin een woord afbrak */
  --breed: 62rem;   /* de buitenmaat op een groot scherm */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

/* De echte tekstselectie in dezelfde kleuren als de pagina, zodat het
   signatuurelement klopt zodra iemand zelf iets aanwijst. */
::selection { background: var(--selectievlak); color: var(--inkt); }

a { color: var(--selectie); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.overslaan {
  position: absolute; left: -9999px;
  background: var(--tabbalk); color: var(--pagina);
  padding: .7rem 1rem; z-index: 10;
}
.overslaan:focus { left: 1rem; top: 1rem; }

.omhulsel {
  max-width: var(--regel);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- tabbalk ---------- */

.tabbalk {
  background: var(--tabbalk);
  padding: .5rem 1.5rem 0;
  display: flex;
}
.tab {
  font-family: var(--kop);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--pagina);
  background: #2A2E34;
  padding: .45rem 1rem;
  border-radius: 7px 7px 0 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- kop ---------- */

.kop { padding: 3.5rem 0 2.5rem; }

.bovenregel {
  font-family: var(--kop);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkt-stil);
  margin: 0 0 1rem;
}

h1 {
  font-family: var(--kop);
  font-weight: 800;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
}

.kop .onder {
  margin: 0;
  font-size: 1.15rem;
  color: var(--inkt-stil);
}

/* ---------- het signatuurelement ---------- */

.vondst-groot { padding: 1.5rem 0 3.5rem; }

.aanloop {
  font-family: var(--kop);
  font-weight: 500;
  font-size: 1rem;
  color: var(--inkt-stil);
  margin: 0 0 1.4rem;
}

.markering { margin: 0; }

.markering p {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.3;
}

/* Het selectievlak. Geen keurige knop met afgeronde hoeken: een selectie in een browser
   is een strak rechthoekig vlak dat de regels los omsluit, en dat is precies de bedoeling.
   box-decoration-break zorgt dat het over meerdere regels blijft kloppen. */
.markering mark {
  background: var(--selectievlak);
  color: var(--inkt);
  padding: .12em .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: inset 0 0 0 1px rgba(43, 92, 230, .35);
}

.markering.klein p { font-size: clamp(1.15rem, 4vw, 1.35rem); }

.bijschrift {
  margin: 1.2rem 0 0;
  color: var(--inkt-stil);
}

/* ---------- blokken ---------- */

.blok { padding: 2.6rem 0; border-top: 1px solid #E6E4DF; }

h2 {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.42rem;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}

h3 {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0 0 .35rem;
}

.inleiding { margin: 0 0 1.8rem; color: var(--inkt-stil); }

/* ---------- de feiten die Craft vroeg ---------- */

.feiten { margin: 0; display: grid; gap: .1rem; }

.feiten > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 1rem;
  padding: .72rem 0;
  border-top: 1px solid #EDEBE6;
}
.feiten > div:first-child { border-top: 0; }

.feiten dt {
  font-family: var(--kop);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--inkt-stil);
  padding-top: .28rem;
  min-width: 0;
}
.feiten dd { margin: 0; min-width: 0; }

/* ---------- het werk ---------- */

.werken { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.8rem; }

.werk { min-width: 0; }

.waar {
  font-family: var(--kop);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--inkt-stil);
  margin: 0 0 1rem;
}

.werk .deed { margin: .9rem 0 0; }

.link { margin: 1rem 0 0; font-family: var(--kop); font-size: .95rem; font-weight: 500; }

/* ---------- stappen ---------- */

.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.7rem; counter-reset: stap; }
.stappen li { min-width: 0; }
.stappen p { margin: 0; color: var(--inkt-stil); }

/* ---------- afsluiter ---------- */

.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

.knop {
  font-family: var(--kop);
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  background: var(--tabbalk);
  color: var(--pagina);
  padding: .8rem 1.3rem;
  border-radius: 6px;
  /* een lange knoptekst mag afbreken in plaats van de pagina breder maken */
  white-space: normal;
}
.knop:hover { background: #000; }

.knop--stil {
  background: transparent;
  color: var(--inkt);
  box-shadow: inset 0 0 0 1.5px var(--uitgegrijsd);
}
.knop--stil:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--inkt); }

footer {
  border-top: 1px solid #E6E4DF;
  padding: 2rem 0 3rem;
  font-size: .9rem;
  color: var(--inkt-stil);
}
footer p { margin: 0; }

@media (max-width: 30rem) {
  .feiten > div { grid-template-columns: 1fr; gap: .15rem; }
  .feiten dt { padding-top: 0; }
  .knop { width: 100%; text-align: center; }
}

/* ---------- groot scherm ----------

   Op een breed scherm hing de hele pagina eerst als een smalle sliert in het midden,
   met links en rechts niets. Dat leest als een uitgerekte telefoonpagina, en dat is
   precies de indruk die deze pagina niet mag wekken.

   Daarom een tweede kolom: de sectiekop gaat naar links en blijft staan terwijl je
   leest, de tekst blijft op zijn eigen leesbreedte rechts. De regellengte verandert
   dus niet, alleen de ruimte eromheen wordt gebruikt. */

@media (min-width: 64rem) {
  .omhulsel { max-width: var(--breed); }

  h1 { font-size: 4.1rem; }
  .kop { padding: 5rem 0 3rem; }
  .kop .onder { font-size: 1.3rem; max-width: 32rem; }

  .vondst-groot { padding: 1rem 0 5rem; }
  .markering p { font-size: 3rem; }
  .vondst-groot .bijschrift { max-width: 34rem; font-size: 1.1rem; }

  .blok { padding: 3.6rem 0; }

  .blok > .omhulsel {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--regel));
    gap: 0 4rem;
    align-items: start;
  }
  /* Alles behalve de kop schuift naar de rechterkolom. */
  .blok > .omhulsel > * { grid-column: 2; min-width: 0; }
  .blok > .omhulsel > h2 {
    grid-column: 1;
    grid-row: 1 / span 20;   /* over alle rijen, anders staat hij alleen naast het eerste blok */
    position: sticky;
    top: 2.5rem;
    margin: 0;
    font-size: 1.25rem;
    align-self: start;
  }

  .markering.klein p { font-size: 1.45rem; }
  .werken { gap: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}