/* Ontwerp persoonlijk: wit, petrol en een bleke lijst, Courier Prime en
   Nunito Sans.

   Gemaakt op 12 november 2026, naar de opbouw van een eigen KK-site (Evrim
   Akyigit), in andere kleuren en letters. Een visitekaartje voor één persoon:
   coach, fotograaf, muzikant, therapeut.

   Kenmerk: de zijkolom. Rechts staat over de hele hoogte een vaste kolom in
   petrol met de naam, het menu onder elkaar tussen dunne lijnen, en de knop.
   Links de pagina op wit, smal en rustig, met de naam in typemachineletter.
   De foto in de opening heeft een verschoven lijst in bleek petrol en steekt
   een stukje de kolom in. Op een smal scherm wordt de kolom een balk
   bovenaan.

   De rollen staan uitgelegd in docs/starter-thema.md; contrast van inkt op
   ondergrond en accent-inkt op accent is minstens 4,5 : 1 (petrol op wit en
   wit op petrol 6,4 : 1). */

.starter[data-stemming="persoonlijk"] {
  --ondergrond: #ffffff;
  --vlak: #ffffff;
  --inkt: #3d3a40;
  --inkt-zacht: #6f6a73;
  --accent: #2f6673;
  --accent-inkt: #ffffff;
  --lijn: #dcdfe1;
  --letter-kop: "Courier Prime", "Courier New", monospace;
  --letter-tekst: "Nunito Sans", system-ui, sans-serif;
  --kop-gewicht: 700;
  --kop-hoofdletters: none;
  --kop-spatie: -0.04em;
  --kop-schaal: 1;
  --hoek: 0.125rem;
  --ruimte: clamp(3.5rem, 7vw, 6rem);
  --hero-kolommen: minmax(0, 1.1fr) minmax(0, 1fr);
  --hero-verhouding: 4 / 5;
  --letterbreedte: 0.6;
  /* De zijkolom, de bleke lijst achter een foto, hoe ver die verschuift, en
     hoe ver de openingsfoto de kolom in steekt. */
  --zij: clamp(15rem, 27vw, 22rem);
  --lijst: #d5e5e8;
  --verschuif: 0.875rem;
  --insteek: 1.75rem;
  font-size: 1.0625rem;
}

.starter[data-stemming="persoonlijk"] :is(h1, h2) {
  color: var(--accent);
}

.starter[data-stemming="persoonlijk"] h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  text-align: center;
}

.starter[data-stemming="persoonlijk"] h3 {
  font-family: var(--letter-tekst);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* Geen wisselende banden: alles op wit. */
.starter[data-stemming="persoonlijk"] .st-home > .st-band:nth-child(even) {
  background-color: transparent;
}

/* De pagina zelf: ruimte vrij voor de kolom. */
.starter[data-stemming="persoonlijk"] :is(main, .st-voet) {
  margin-right: var(--zij);
}

.starter[data-stemming="persoonlijk"] .st-breed {
  width: min(100% - 3rem, 58rem);
}

/* ----- de zijkolom */

.starter[data-stemming="persoonlijk"] .st-kop {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--zij);
  overflow-y: auto;
  background: var(--accent);
  backdrop-filter: none;
  border: 0;
  color: var(--accent-inkt);
}

.starter[data-stemming="persoonlijk"] .st-kop-binnen {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2.25rem;
  width: 100%;
  min-height: 100%;
  /* Links meer ruimte: daar steekt de openingsfoto de kolom in. */
  padding: 3rem 1.5rem 3rem calc(var(--insteek) + var(--verschuif) + 0.75rem);
  text-align: center;
}

/* Zo breed als de kolom, zodat een lange naam daarbinnen breekt. */
.starter[data-stemming="persoonlijk"] .st-logo {
  flex: none;
  align-self: stretch;
  margin: 0;
  overflow-wrap: break-word;
  color: var(--accent-inkt);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.starter[data-stemming="persoonlijk"] .st-menu ul {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.starter[data-stemming="persoonlijk"] .st-menu li {
  border-bottom: 0.0625rem solid rgb(255 255 255 / 0.4);
}

.starter[data-stemming="persoonlijk"] .st-menu a {
  display: block;
  padding: 0.625rem 1.5rem 0.5rem;
  color: var(--accent-inkt);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.starter[data-stemming="persoonlijk"] .st-menu a:hover {
  color: var(--lijst);
}

/* In de kolom omgedraaid: wit met petrol. */
.starter[data-stemming="persoonlijk"] .st-kop .button {
  background: var(--accent-inkt);
  color: var(--accent);
  box-shadow: none;
}

.starter[data-stemming="persoonlijk"] .st-kop .button:hover {
  background: var(--lijst);
}

/* ----- knop: petrol met een verschoven bleke lijst */

.starter[data-stemming="persoonlijk"] .button {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.875rem;
  box-shadow: 0.375rem 0.375rem 0 var(--lijst);
}

/* ----- opening: naam in typemachineletter, foto met lijst tegen de kolom */

/* Boven de kolom (z-index 10), zodat de foto er een stukje overheen kan:
   de opening telt als eigen laag, want de naamkolom erin is een container. */
.starter[data-stemming="persoonlijk"] .st-hero {
  position: relative;
  z-index: 11;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Zonder bovengrens tot aan de kolom, zodat de foto er altijd tegenaan
   staat. */
.starter[data-stemming="persoonlijk"] .st-hero-binnen {
  width: 100%;
  padding-left: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.starter[data-stemming="persoonlijk"] .st-hero-tekst {
  align-self: center;
  text-align: center;
}

.starter[data-stemming="persoonlijk"] .st-hero h1 {
  --naam-maat: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
}

.starter[data-stemming="persoonlijk"] .st-slogan {
  margin-inline: auto;
  max-width: 30rem;
  color: var(--inkt);
  font-size: 1.1875rem;
  line-height: 1.7;
}

.starter[data-stemming="persoonlijk"] .st-knoppen {
  justify-content: center;
}

.starter[data-stemming="persoonlijk"] .st-hero-beelden {
  justify-self: end;
  width: min(100%, 26rem);
  /* Een stukje over de naad, de kolom in. */
  translate: var(--insteek) 0;
}

.starter[data-stemming="persoonlijk"] :is(.st-hero-foto, .st-over .st-foto) {
  overflow: visible;
  box-shadow: var(--verschuif) calc(-1 * var(--verschuif)) 0 var(--lijst);
}

/* ----- over */

.starter[data-stemming="persoonlijk"] .st-over .st-foto {
  aspect-ratio: 4 / 5;
  max-width: 24rem;
  justify-self: center;
}

.starter[data-stemming="persoonlijk"] .st-over h2 {
  text-align: left;
}

/* ----- ervaringen: in het midden */

.starter[data-stemming="persoonlijk"] .st-recensies {
  text-align: center;
}

.starter[data-stemming="persoonlijk"] .st-recensies figure {
  align-items: center;
}

.starter[data-stemming="persoonlijk"] .st-recensies blockquote p {
  font-family: var(--letter-tekst);
  font-size: 1.3125rem;
  font-style: italic;
}

.starter[data-stemming="persoonlijk"] .st-recensies figcaption::before {
  display: none;
}

.starter[data-stemming="persoonlijk"] .st-recensies figcaption {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ----- voet */

.starter[data-stemming="persoonlijk"] .st-voet {
  border-top: 0;
  text-align: center;
}

.starter[data-stemming="persoonlijk"] .st-voet-binnen {
  justify-content: center;
}

/* ----- smal: de kolom wordt een balk bovenaan */

@media (max-width: 48rem) {
  .starter[data-stemming="persoonlijk"] :is(main, .st-voet) {
    margin-right: 0;
  }

  .starter[data-stemming="persoonlijk"] .st-kop {
    position: static;
    width: auto;
    overflow: visible;
  }

  .starter[data-stemming="persoonlijk"] .st-kop-binnen {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1.25rem;
    text-align: left;
  }

  /* Een lange naam breekt, in plaats van buiten het scherm te lopen. */
  .starter[data-stemming="persoonlijk"] .st-logo {
    flex: 1 1 0;
    align-self: center;
    min-width: 0;
    font-size: 1.125rem;
    overflow-wrap: break-word;
  }

  .starter[data-stemming="persoonlijk"] .st-menu ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
  }

  .starter[data-stemming="persoonlijk"] .st-menu li {
    border: 0;
  }

  .starter[data-stemming="persoonlijk"] .st-menu a {
    padding: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
  }

  .starter[data-stemming="persoonlijk"] .st-hero-binnen {
    padding-inline: 1.5rem;
  }

  .starter[data-stemming="persoonlijk"] .st-hero-beelden {
    justify-self: center;
    translate: none;
    width: min(100% - var(--verschuif), 24rem);
  }
}