/* Ontwerp atelier: doekwit, strak omlijnde lichtgrijze kaders, kop en voet in
   paars, Alegreya Sans overal.

   Gemaakt op 13 november 2026, naar de opbouw van een eigen KK-site (Aafke
   Buringh, 6 nov 2026). Een portfolio voor wie iets maakt: schilder,
   fotograaf, keramist, meubelmaker. Het werk staat voorop, de vormgeving
   blijft eromheen.

   Kenmerk: het werk zelf. De opening toont één werk in zijn eigen
   verhouding, zo groot als het venster toelaat; in Werk staan de werken op
   een wand van gelijke rijen, zonder titels eronder (die staan in het grote
   scherm), en met meer reeksen blijft het rijtje reeksen bovenin staan.
   Werken worden nooit bijgesneden. Koppen van reeksen en groepen staan in een
   grijs vlak met een zwarte lijn; een knop is zo'n lijn met de tekst erin.

   De rollen staan uitgelegd in docs/starter-thema.md; contrast van inkt op
   ondergrond en accent-inkt op accent is minstens 4,5 : 1 (doekwit op paars
   6,9 : 1, zwart op het grijze vlak 11,7 : 1). */

.starter[data-stemming="atelier"] {
  --ondergrond: #f6f1e7;
  --vlak: #f6f1e7;
  --inkt: #1c1917;
  --inkt-zacht: #6b6468;
  --accent: #5d4b6e;
  --accent-inkt: #f6f1e7;
  --lijn: #d8d3ca;
  --letter-kop: "Alegreya Sans", system-ui, sans-serif;
  --letter-tekst: "Alegreya Sans", system-ui, sans-serif;
  --kop-gewicht: 500;
  --kop-hoofdletters: none;
  --kop-spatie: 0.02em;
  --kop-schaal: 0.8;
  --hoek: 0;
  --ruimte: clamp(3rem, 6vw, 5rem);
  --hero-kolommen: minmax(0, 0.8fr) minmax(0, 1.2fr);
  --hero-verhouding: 4 / 5;
  --letterbreedte: 0.5;
  /* Het grijze vlak achter een kop of een aangewezen knop, en de lijn
     eromheen. */
  --kader: #d8d3ca;
  --kaderlijn: 0.125rem;
  --schaduw: 0 0.05rem 0.3rem rgb(28 25 23 / 0.2);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* Klein, in kapitalen, wijd gespatieerd: menu, knoppen, tabs, jaren. */
.starter[data-stemming="atelier"] :is(.st-menu a, .button, .st-reeksen a, .st-jaren) {
  font-family: var(--letter-tekst);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

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

.starter[data-stemming="atelier"] .st-band {
  scroll-margin-top: 0;
}

/* ----- knop: een zwarte lijn met de tekst erin, aangewezen grijs */

.starter[data-stemming="atelier"] .button {
  padding: 0.75rem 1.125rem 0.6875rem;
  border: var(--kaderlijn) solid var(--inkt);
  background-color: var(--ondergrond);
  color: var(--inkt);
}

.starter[data-stemming="atelier"] .button:hover {
  background-color: var(--kader);
}

.starter[data-stemming="atelier"] .st-tekstlink {
  text-decoration-color: var(--inkt-zacht);
}

/* ----- een kop in een vlak: reeksen en prijsgroepen */

.starter[data-stemming="atelier"] h3 {
  display: inline-block;
  padding: 0.5rem 0.875rem 0.4375rem;
  border: 0.15rem solid var(--inkt);
  background-color: var(--kader);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
}

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

/* ----- kop: een rechte paarse band, niet vast; in Werk blijft het rijtje
   reeksen staan */

.starter[data-stemming="atelier"] .st-kop {
  position: relative;
  /* De rollen omgedraaid: doekwit op paars, en wat erin staat volgt. */
  --ondergrond: var(--accent);
  --inkt: var(--accent-inkt);
  --accent-tekst: var(--accent-inkt);
  --kader: color-mix(in srgb, var(--accent-inkt) 22%, var(--accent));
  background: var(--accent);
  backdrop-filter: none;
  border: 0;
  color: var(--accent-inkt);
}

.starter[data-stemming="atelier"] .st-kop-binnen {
  padding-block: 1.25rem;
  column-gap: 2.5rem;
}

.starter[data-stemming="atelier"] .st-logo {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.03em;
  line-height: 1.05;
}

.starter[data-stemming="atelier"] .st-menu ul {
  column-gap: 1.75rem;
}

.starter[data-stemming="atelier"] .st-menu a {
  padding-bottom: 0.3rem;
  opacity: 0.85;
}

.starter[data-stemming="atelier"] .st-menu a:hover {
  opacity: 1;
  box-shadow: inset 0 -0.125rem currentColor;
}

/* ----- opening: één werk, onbewerkt, zo groot als het venster toelaat */

.starter[data-stemming="atelier"] .st-hero {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.starter[data-stemming="atelier"] .st-hero h1 {
  --naam-maat: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.starter[data-stemming="atelier"] .st-slogan {
  color: var(--inkt);
  font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
  line-height: 1.5;
}

.starter[data-stemming="atelier"] .st-hero-beelden {
  justify-self: center;
}

/* Geen vaste verhouding: het werk bepaalt zelf hoe het staat. De hoogte gaat
   tot het venster min kop en ruimte, zodat het in één keer te zien is. */
.starter[data-stemming="atelier"] .st-hero-foto:not(.leeg) {
  aspect-ratio: auto;
  overflow: visible;
}

.starter[data-stemming="atelier"] .st-hero-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(24rem, calc(100svh - 12rem));
  object-fit: contain;
  box-shadow: var(--schaduw);
}

/* ----- over: het portret links, de tekst ernaast */

.starter[data-stemming="atelier"] .st-over .st-twee {
  grid-template-columns: minmax(0, 24rem) minmax(0, 40rem);
  justify-content: start;
  align-items: start;
}

.starter[data-stemming="atelier"] .st-over .st-foto {
  order: -1;
  aspect-ratio: 4 / 5;
  box-shadow: var(--schaduw);
}

/* ----- werk */

/* Het rijtje reeksen blijft bovenin staan zolang je door het werk schuift. */
.starter[data-stemming="atelier"] .st-reeksen {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-block: 0.75rem;
  background: var(--ondergrond);
  /* Een lijn eronder, maar alleen als het rijtje vastzit (waar de browser
     dat kan zeggen); bovenaan de pagina staat er geen. */
  container-type: scroll-state;
}

.starter[data-stemming="atelier"] .st-reeksen ul {
  gap: 0.625rem;
  margin: 0;
}

.starter[data-stemming="atelier"] .st-reeksen a {
  display: block;
  padding: 0.5rem 0.875rem 0.4375rem;
  border: var(--kaderlijn) solid var(--inkt);
  color: var(--inkt);
  text-decoration: none;
  white-space: nowrap;
}

.starter[data-stemming="atelier"] .st-reeksen a:hover {
  background-color: var(--kader);
  color: var(--inkt);
}

@container scroll-state(stuck: top) {
  .starter[data-stemming="atelier"] .st-reeksen ul {
    box-shadow: 0 0.75rem 0 var(--ondergrond), 0 0.875rem 0 var(--inkt);
  }
}

/* Onder het vaste rijtje uit, niet erachter. */
.starter[data-stemming="atelier"] .st-reeks {
  scroll-margin-top: 5.5rem;
}

.starter[data-stemming="atelier"] .st-reeks + .st-reeks {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.starter[data-stemming="atelier"] .st-reeks h3 {
  margin-bottom: 1.25rem;
}

.starter[data-stemming="atelier"] .st-jaren {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  vertical-align: 0.15em;
}

/* Werken even ver uit elkaar als de rijen, zonder titels eronder. */
.starter[data-stemming="atelier"] .st-wand {
  gap: 0.75rem;
}

/* Alleen onder het werk in de wand; het grote scherm staat ook in de wand
   en houdt zijn titel. */
.starter[data-stemming="atelier"] .st-wand-knop + figcaption {
  display: none;
}

.starter[data-stemming="atelier"] .st-wand-knop {
  overflow: visible;
  background: #e8e2d6;
  box-shadow: var(--schaduw);
  outline-offset: 0.25rem;
}

.starter[data-stemming="atelier"] .st-wand-knop:hover {
  outline: 0.2rem solid var(--inkt-zacht);
}

.starter[data-stemming="atelier"] .st-wand-knop:hover img {
  opacity: 1;
}

/* De ruimte voor de schuifbalk hoort bij de pagina, niet bij het grote
   scherm; zonder dit blijft daar een doekwitte strook naast staan. */
html:has(.starter[data-stemming="atelier"] .st-groot:popover-open) {
  background: #151215;
}

/* Groot: een donker scherm, het werk in het midden, titel en gegevens
   eronder. De rollen omgedraaid, zodat de knop meegaat. */
.starter[data-stemming="atelier"] .st-groot {
  --ondergrond: #151215;
  --inkt: var(--accent-inkt);
  --inkt-zacht: color-mix(in srgb, var(--accent-inkt) 70%, #151215);
  --kader: #3a3438;
}

.starter[data-stemming="atelier"] .st-groot img {
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.5);
}

.starter[data-stemming="atelier"] .st-groot figcaption {
  margin-top: 1rem;
}

.starter[data-stemming="atelier"] .st-groot .st-titel {
  font-size: 1.375rem;
  font-weight: 500;
}

/* ----- prijzen */

.starter[data-stemming="atelier"] .st-prijs {
  color: var(--inkt);
}

/* ----- ervaringen */

.starter[data-stemming="atelier"] .st-recensies blockquote p {
  font-size: 1.3125rem;
  font-style: italic;
  font-weight: 400;
}

.starter[data-stemming="atelier"] .st-recensies figcaption::before {
  border-top-color: var(--inkt);
}

/* ----- voet: paars, net als de kop */

.starter[data-stemming="atelier"] .st-voet {
  --inkt: var(--accent-inkt);
  --inkt-zacht: var(--accent-inkt);
  --accent-tekst: var(--accent-inkt);
  border: 0;
  background: var(--accent);
  color: var(--accent-inkt);
}

.starter[data-stemming="atelier"] .st-voet :is(a, button):hover {
  text-decoration-thickness: 0.125rem;
}

/* ----- smal */

@media (max-width: 48rem) {
  .starter[data-stemming="atelier"] .st-breed {
    width: min(100% - 2rem, 90rem);
  }

  .starter[data-stemming="atelier"] .st-kop-binnen {
    padding-block: 0.875rem 1rem;
  }

  .starter[data-stemming="atelier"] .st-hero-foto img {
    max-height: none;
  }

  .starter[data-stemming="atelier"] .st-over .st-twee {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Op de telefoon eerst de kop en de tekst. */
  .starter[data-stemming="atelier"] .st-over .st-foto {
    order: 0;
    max-width: 22rem;
  }

  /* Alle reeksen in beeld, ook op de telefoon; daarmee wordt het rijtje te
     hoog om te blijven staan. */
  .starter[data-stemming="atelier"] .st-reeksen {
    position: static;
  }

  .starter[data-stemming="atelier"] .st-reeksen ul {
    gap: 0.5rem;
  }

  .starter[data-stemming="atelier"] .st-reeksen a {
    padding: 0.4375rem 0.6875rem 0.375rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  .starter[data-stemming="atelier"] .st-reeks {
    scroll-margin-top: 1rem;
  }

  /* Lagere rijen, zodat er vaker twee werken naast elkaar passen. */
  .starter[data-stemming="atelier"] .st-wand {
    --rij: 8rem;
    gap: 0.5rem;
  }
}