/* Ontwerp warm: licht papier, oker en bessenrood, Jost licht.

   Opnieuw opgezet op 12 november 2026. Het oude warm (honing en aubergine,
   boogvensters, een ronde sticker) was warm in elk vlak en werd daardoor
   zwaar. Nu is de ondergrond licht en zit de warmte in de accenten: oker voor
   de knop en het jaartal, bessenrood voor de koppen en de prijzen. Eén donker
   vlak, onderaan, voor langskomen en de voet. Richting: de verhoudingen van
   daraskolnick.com, niet haar uiterlijk.

   Kenmerk: inspringen. Het jaartal staat half over de onderrand van de
   openingsfoto; de kaart met openingstijden en adres staat half op het lichte
   en half op het donkere vlak. Verder alles in het midden en veel lucht.

   De rollen staan uitgelegd in docs/starter-thema.md; contrast van inkt op
   ondergrond en accent-inkt op accent is minstens 4,5 : 1, ook op het donkere
   vlak (bessenrood op papier 6,3 : 1, oker op antraciet 7 : 1). */

.starter[data-stemming="warm"] {
  --ondergrond: #fbf8f3;
  --vlak: #f3ece1;
  --inkt: #3b3431;
  --inkt-zacht: #6e625c;
  --accent: #e2a52b;
  --accent-inkt: #2b2522;
  --accent-tekst: #a3324f;
  --lijn: color-mix(in srgb, #3b3431 22%, transparent);
  --letter-kop: "Jost", system-ui, sans-serif;
  --letter-tekst: "Jost", system-ui, sans-serif;
  --kop-gewicht: 300;
  --kop-hoofdletters: none;
  --kop-spatie: 0;
  --kop-schaal: 1;
  --hoek: 0.25rem;
  --ruimte: clamp(4rem, 8vw, 7rem);
  --hero-kolommen: minmax(0, 1fr);
  --hero-verhouding: auto;
  --letterbreedte: 0.5;
  --donker: #2f2a27;
}

/* De rollen op het donkere vlak. */
.starter[data-stemming="warm"] .st-voet {
  --inkt: #f6efe4;
  --inkt-zacht: #cbbfb2;
  --accent-tekst: #e8b44a;
  --lijn: color-mix(in srgb, #f6efe4 25%, transparent);
}

/* ----- koppen: licht en groot, tussenkoppen cursief en vet */

.starter[data-stemming="warm"] h3 {
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
}

/* Een sectiekop over de hele breedte staat in het midden, in bessenrood,
   tussen twee lijnen. */
.starter[data-stemming="warm"] .st-band > .st-breed > h2 {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  color: var(--accent-tekst);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  text-align: center;
}

.starter[data-stemming="warm"] .st-band > .st-breed > h2::before,
.starter[data-stemming="warm"] .st-band > .st-breed > h2::after {
  content: "";
  flex: 1 1 0;
  border-top: 0.0625rem solid currentColor;
  opacity: 0.45;
}

/* Een kop in een kolom (over de zaak) blijft links, ook in bessenrood. */
.starter[data-stemming="warm"] .st-twee h2 {
  color: var(--accent-tekst);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
}

/* ----- kop en menu */

.starter[data-stemming="warm"] .st-logo {
  font-weight: 600;
  font-size: 1.375rem;
}

.starter[data-stemming="warm"] .st-menu a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.starter[data-stemming="warm"] .button {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.875rem;
  padding: 0.9375rem 1.75rem;
}

.starter[data-stemming="warm"] .st-kop .button {
  padding: 0.625rem 1.125rem;
}

/* ----- opening: een brede foto bovenaan, de rest in het midden eronder */

.starter[data-stemming="warm"] .st-hero {
  padding-top: 0;
}

.starter[data-stemming="warm"] .st-hero-binnen {
  width: 100%;
  justify-items: center;
  gap: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.starter[data-stemming="warm"] .st-hero-beelden {
  order: -1;
  width: 100%;
}

.starter[data-stemming="warm"] .st-hero-foto {
  height: clamp(15rem, 44vh, 28rem);
  border-radius: 0;
}

/* Een brede strook snijdt veel weg; een gezicht zit meestal in het bovenste
   derde, dus dat blijft staan. */
.starter[data-stemming="warm"] .st-hero-foto img {
  object-position: 50% 30%;
}

.starter[data-stemming="warm"] .st-hero-tekst {
  width: min(100% - 2.5rem, 46rem);
}

.starter[data-stemming="warm"] .st-hero h1 {
  --naam-maat: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300;
}

.starter[data-stemming="warm"] .st-slogan {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--inkt);
  font-size: clamp(1.3125rem, 2.2vw, 1.625rem);
  font-weight: 300;
  line-height: 1.65;
}

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

/* Het jaartal als label half over de onderrand van de foto. */
.starter[data-stemming="warm"] .st-sticker {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  margin: 0;
  padding: 0.8125rem 1.5rem;
  background: var(--accent);
  color: var(--accent-inkt);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.starter[data-stemming="warm"] .st-sticker span {
  font-weight: 700;
}

/* ----- over */

.starter[data-stemming="warm"] .st-over .st-foto {
  aspect-ratio: 4 / 5;
  max-width: 30rem;
}

/* ----- ervaringen: in het midden, licht en cursief */

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

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

.starter[data-stemming="warm"] .st-recensies blockquote p {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
}

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

.starter[data-stemming="warm"] .st-recensies figcaption {
  color: var(--accent-tekst);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ----- langskomen: een lichte kaart, half op het donkere vlak eronder */

.starter[data-stemming="warm"] .st-bezoek {
  overflow-x: clip;
}

.starter[data-stemming="warm"] .st-bezoek .st-twee {
  position: relative;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 3.5rem);
}

/* Achter de kaart: het donkere vlak vanaf de helft tot onder aan de band,
   over de hele breedte van het scherm. */
.starter[data-stemming="warm"] .st-bezoek .st-twee::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  bottom: calc(-1 * var(--ruimte) - 0.0625rem);
  left: -100vmax;
  right: -100vmax;
  background: var(--donker);
}

/* De kaart zelf. */
.starter[data-stemming="warm"] .st-bezoek .st-twee::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--hoek);
  background: #fffdf9;
  box-shadow: 0 1.25rem 3rem -1.5rem rgb(0 0 0 / 0.45);
}

/* ----- voet: doorlopend in het donkere vlak */

.starter[data-stemming="warm"] .st-voet {
  border-top: 0;
  background: var(--donker);
}

.starter[data-stemming="warm"] .st-voet-binnen {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .starter[data-stemming="warm"] .st-hero-foto {
    aspect-ratio: auto;
    height: clamp(13rem, 36vh, 20rem);
  }
}