/* Studio Lune — Contact (paginaspecifieke layout)
   Opbouw: kop met contactwegen · openingstijden als colofon · route met eigen kaartje · vraag stellen · vaak gevraagd · afspraakkaart */

/* Openingstijden staan op deze pagina al uitgebreid: de weekstrook in de footer is dan dubbel */
.page-contact .footer-week, .page-contact .footer-card { display: none; }

/* ---------- 1. Kop ---------- */
.c-hero { padding-block: clamp(1.75rem, 4vw, 3.25rem) var(--ritme-m); }
.c-hero__title {
  margin: 1.1rem 0 0 -.05em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.6rem, 1.2rem + 13.5vw, 10.5rem);
  line-height: .84;
  letter-spacing: -.045em;
  color: var(--espresso);
}
.c-hero__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 19em;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.05vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.c-hero__lead em { font-style: italic; color: var(--bordeaux); }
.c-hero__actions { margin-top: 2rem; }
.c-hero__note { font-size: var(--fs-small); color: var(--walnoot); }

/* contactwegen als inhoudsopgave */
.c-ways__label {
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--walnoot);
}
.c-ways { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--espresso); }
.c-ways > li { border-bottom: 1px solid var(--lijn); }
.c-way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name arrow" "desc desc" "meta meta";
  gap: .35rem 1rem;
  width: 100%;
  padding: 1.15rem 0 1.25rem;
  border: 0;
  background: none;
  color: var(--espresso);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.c-way__name {
  grid-area: name;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 1.35rem + 1.3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.c-way__desc { grid-area: desc; max-width: 30em; font-size: var(--fs-small); line-height: 1.5; color: var(--walnoot); }
.c-way__meta {
  grid-area: meta;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--espresso);
}
.c-way__status:not(:empty)::before { content: "· "; color: var(--walnoot); }
.c-way__status { font-size: inherit; color: var(--bordeaux); }
.c-way__meta--mail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.c-way__arrow { grid-area: arrow; align-self: center; display: flex; color: var(--walnoot); }
.c-way__arrow .i-arrow { width: 1.4rem; height: 1.4rem; }
.c-way:hover .c-way__name, .c-way:focus-visible .c-way__name { font-style: italic; color: var(--bordeaux); }
.c-way:hover .i-arrow, .c-way:focus-visible .i-arrow { transform: translateX(5px); color: var(--bordeaux); }
.c-way:focus-visible { outline-offset: 2px; }

@media (min-width: 700px) {
  .c-way {
    grid-template-columns: 10.5rem minmax(0, 1fr) auto;
    grid-template-areas: "name desc arrow" "name meta arrow";
    column-gap: 2rem;
    align-items: baseline;
    padding-block: 1.35rem 1.4rem;
  }
}

/* visitekaartje: het gedrukte ding van deze pagina (de footer laat het hier weg). Papier, binnenrand, groot woordmerk. */
.c-hero__side { margin-top: var(--ritme-s); }
.c-visit {
  position: relative;
  container-type: inline-size;
  max-width: 32.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.85rem) .5rem;
  background: var(--papier);
  color: var(--espresso);
  box-shadow: 0 1px 0 var(--lijn), 0 18px 40px -26px rgba(34, 22, 15, .45);
}
.c-visit::before {
  content: "";
  position: absolute;
  inset: .4rem;
  border: 1px solid var(--lijn);
  pointer-events: none;
}
.c-visit > * { position: relative; }
.c-visit__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  font-size: .7rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--walnoot);
}
.c-visit__head span:first-child { color: var(--espresso); }
.c-visit__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32em;
  padding-block: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.1rem);
  border-bottom: 1px solid var(--espresso);
  min-width: 0;
  font-family: var(--serif);
  /* het woordmerk schaalt mee met het kaartje zelf (container), nooit breder dan de binnenrand */
  font-size: min(2.6rem, 10cqi);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c-visit__mark svg { flex: none; width: .82em; height: .82em; }
.c-visit__list { display: block; font-style: normal; font-size: var(--fs-small); }
.c-visit__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--lijn);
  line-height: 1.5;
}
.c-visit__row i { font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; color: var(--walnoot); }
.c-visit__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--bordeaux);
  text-decoration: none;
}
.c-visit__link:hover { color: var(--espresso); }
.c-visit__link .i-arrow { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Onder 1100px ligt het kaartje onder de contactwegen (volle breedte, max 520px): in een smalle kolom zou het
   woordmerk krimpen en braken adres en tijden in korte regels. Vanaf 1100px staat het rechts, op hoogte van de
   intro, en reist het sticky mee langs Bellen, WhatsApp en E-mail. */
@media (min-width: 900px) {
  .c-hero__main, .c-hero__side { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .c-hero__main { grid-column: 1 / 8; }
  .c-hero__side { grid-column: 8 / 13; align-self: stretch; margin-top: 0; padding-top: clamp(11rem, 3rem + 11vw, 15rem); }
  .c-visit {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    width: min(30rem, calc(100% - 1.5rem));
    margin-left: auto;
    margin-right: .25rem;
    /* een halve graad: genoeg voor 'neergelegd', klein genoeg dat de kleine tekst scherp blijft;
       de .25rem houdt de gedraaide hoek binnen de kolom */
    transform: rotate(.5deg);
  }
}

/* ---------- 2. Openingstijden als colofon ---------- */
.c-hours__status {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.35rem);
  line-height: 1.15;
  color: var(--karamel);
}
.c-hours__notes { display: grid; gap: 0; margin-top: 2.25rem; }
.c-hours__notes > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .85rem;
  border-top: 1px solid var(--lijn-donker);
  font-size: var(--fs-small);
}
.c-hours__notes dt {
  padding-top: .15em;
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--karamel);
}
.c-hours__notes dd { color: var(--zand-dim); }
@media (max-width: 479px) {
  .c-hours__notes > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

.c-hours__week { margin-top: var(--ritme-s); }
/* Openingstijden gezet als het colofon van een blad: dagnaam in Bodoni italic, tijd in tabelcijfers.
   Vandaag krijgt het halve maantje; koopavond staat er in karamel italic bij. Geen balken, geen tijdas. */
.colofon, .colofon tbody { display: block; width: 100%; }
.colofon { border-top: 1px solid var(--lijn-donker); }
.colofon tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-block: .8rem .85rem;
  border-bottom: 1px solid var(--lijn-donker);
}
.colofon th, .colofon td { display: block; padding: 0; border: 0; font-weight: 400; }
.colofon th {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--creme);
}
.colofon td {
  text-align: right;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--creme);
  white-space: nowrap;
}
.colofon td.is-closed { font-size: var(--fs-small); color: var(--zand-dim); }
.colofon__late {
  margin-right: .6em;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--karamel);
}
/* vandaag: het halve maantje (hetzelfde teken als in het woordmerk) achter de dagnaam, in karamel */
.colofon tr.is-today th, .colofon tr.is-today td { font-weight: 400; color: var(--karamel); }
.colofon tr.is-today th::after {
  content: "";
  display: inline-block;
  font-size: 1em;
  width: .48em;
  height: .48em;
  margin: 0 0 0 .38em;
  padding: 0;
  border: 0;
  vertical-align: .08em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 1.4a10.6 10.6 0 0 1 0 21.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 1.4a10.6 10.6 0 0 1 0 21.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 379px) {
  .colofon__late { display: block; margin: 0 0 .1rem; font-size: .9375rem; }
}
@media (min-width: 700px) {
  .colofon tr { padding-block: 1rem 1.05rem; }
  .colofon td { font-size: 1.125rem; }
}
.c-hours__foot { margin-top: 1.25rem; max-width: 40em; font-size: var(--fs-small); color: var(--zand-dim); }

/* mobiel: eerst de week, dan de tips; desktop: tips onder de kop, week ernaast */
.c-hours__notes { margin-top: var(--ritme-s); }
@media (min-width: 900px) {
  .c-hours__grid { grid-template-rows: auto 1fr; }
  .c-hours__intro { grid-column: 1 / 5; grid-row: 1; }
  .c-hours__notes { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: 2.25rem; }
  .c-hours__week { grid-column: 6 / 13; grid-row: 1 / 3; margin-top: 2.6rem; }
}

/* ---------- 3. Route + kaart ---------- */
.c-map { margin: 0; }
.c-map__frame {
  --k: 1.6;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--zand);
  box-shadow: 0 0 0 1px var(--lijn);
}
.c-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 600px) {
  .c-map__frame { --k: 1.45; aspect-ratio: 4 / 3; }
}
/* op een staand scherm schuift de wereld iets op, zodat salon, plein en garage in beeld blijven */
@media (max-width: 599px) {
  .map__world { transform: translate(30px, 0); }
}

.map__ground { fill: var(--zand); }
.map__park { fill: var(--lijn); }
.map__trees { fill: url(#kaart-bomen); }
#kaart-bomen circle { fill: var(--walnoot); opacity: .3; }
.map__casing, .map__road { fill: none; stroke-linejoin: round; }
.map__casing { stroke: rgba(103, 80, 63, .38); }
.map__road { stroke: var(--papier); }
.map__casing--main { stroke-width: 17; }
.map__road--main { stroke-width: 15; }
.map__casing--shop { stroke-width: 14; stroke: rgba(103, 80, 63, .55); }
.map__road--shop { stroke-width: 12; stroke: var(--creme); }
.map__casing--minor { stroke-width: 9; }
.map__road--minor { stroke-width: 7; }

.map__route {
  fill: none;
  stroke: var(--bordeaux);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 10;
}
.map__route-draw { fill: none; stroke: #fff; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.map__bus rect { fill: var(--walnoot); stroke: var(--papier); stroke-width: 2.5; }
.map__p rect { fill: var(--espresso); }
.map__p text { fill: var(--papier); font-family: var(--sans); font-weight: 700; font-size: 21px; }
.map__salon-halo { fill: var(--bordeaux); opacity: .14; }
.map__salon-ring { fill: var(--papier); stroke: var(--bordeaux); stroke-width: 2.5; }
.map__salon-fill { fill: var(--bordeaux); }

/* labels: --k = kaarteenheden per css-pixel (gezet door js/contact.js), zodat tekst overal even groot leest */
.map__lbl {
  font-family: var(--sans);
  font-size: calc(var(--k) * 11px);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--espresso);
  paint-order: stroke;
  stroke: var(--zand);
  stroke-width: calc(var(--k) * 4px);
  stroke-linejoin: round;
}
.map__lbl--wide { letter-spacing: .3em; font-size: calc(var(--k) * 12px); }
.map__lbl--soft { fill: var(--walnoot); }
.map__lbl--tag { font-size: calc(var(--k) * 9.5px); letter-spacing: .16em; fill: var(--walnoot); }
.map__lbl--road { font-size: calc(var(--k) * 9.5px); letter-spacing: .12em; fill: var(--walnoot); stroke: var(--creme); }
.map__lbl--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--k) * 15px);
  letter-spacing: 0;
  text-transform: none;
}
.map__lbl--salon { font-size: calc(var(--k) * 19px); fill: var(--bordeaux); font-weight: 500; }
.map__lbl--walk { font-size: calc(var(--k) * 14px); fill: var(--bordeaux); }
.map__lbl--city { fill: var(--walnoot); font-size: calc(var(--k) * 14px); }

/* de looproute tekent zich in als de kaart in beeld komt (alleen met JS en als beweging mag) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .c-map[data-reveal] .map__route-draw {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s var(--ease) .5s;
  }
  .reveal-on .c-map[data-reveal].is-in .map__route-draw { stroke-dashoffset: 0; }
  .reveal-on .c-map[data-reveal] .map__salon { transform-box: fill-box; }
}

.c-map__title {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .45rem .75rem .5rem;
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--lijn);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--espresso);
}
.c-map__title i { color: var(--bordeaux); }

.c-map .caption { margin-top: .6rem; }

.c-route__copy { margin-top: var(--ritme-s); }
.c-route__address {
  display: grid;
  gap: .15rem;
  margin-top: 1.75rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--lijn);
  color: var(--walnoot);
}
.c-route__name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; color: var(--espresso); margin-bottom: .2rem; }
.c-route__ways { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.c-route__ways dt { font-weight: 600; }
.c-route__ways dd { margin-top: .15rem; font-size: var(--fs-small); color: var(--walnoot); }
.c-route__actions { margin-top: 1.75rem; }

@media (min-width: 900px) {
  .c-map { grid-column: 1 / 8; }
  .c-route__copy { grid-column: 9 / 13; margin-top: 0; padding-top: .2rem; }
}

/* ---------- 4. Een vraag stellen ---------- */
.c-ask__grid { display: grid; }
.c-ask__lead { margin-top: 1.5rem; }
.c-ask__text { margin-top: 1rem; max-width: 34em; color: var(--walnoot); }
.c-ask__who { margin: 2.25rem 0 0; }
.c-ask__who-label {
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--walnoot);
}
/* drie namen als typografisch portretje, zoals de aftiteling in een blad */
.c-who { margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--espresso); }
.c-who li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
  padding-block: .85rem .9rem;
  border-bottom: 1px solid var(--lijn-sterk);
}
.c-who__name { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1; color: var(--bordeaux); }
.c-who__what { font-size: var(--fs-small); color: var(--espresso); }
.c-form { margin-top: 2.5rem; }
.c-form__topics .choices { margin-top: .1rem; }
.c-form__tips { margin-top: .1rem; }
.c-form__tip {
  display: none;
  margin-top: .75rem;
  padding-left: .9rem;
  border-left: 1px solid var(--bordeaux);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--walnoot);
}
.c-form:has(input[value="verzetten"]:checked) [data-tip="verzetten"],
.c-form:has(input[value="kleur"]:checked) [data-tip="kleur"],
.c-form:has(input[value="bruiloft"]:checked) [data-tip="bruiloft"],
.c-form:has(input[value="cadeaubon"]:checked) [data-tip="cadeaubon"],
.c-form:has(input[value="product"]:checked) [data-tip="product"] { display: block; }
.c-form__tip a { color: var(--bordeaux); font-weight: 500; }
.c-form__topics + .field-row { margin-top: 2rem; }
.c-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
.c-form__fine { font-size: .875rem; color: var(--walnoot); max-width: 22em; }
.c-form__notice { margin-top: 1.5rem; }
/* zonder JS: knop staat uit (HTML) en een korte regel legt uit waarom; het formulier verstuurt nooit */
.c-form__nojs { margin-top: .75rem; }
.js .c-form__nojs { display: none; }
.c-form [type="submit"]:disabled { opacity: .55; cursor: not-allowed; }

.c-form__done { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--papier); border-top: 3px solid var(--bordeaux); }
.c-form__done > * + * { margin-top: 1rem; }
.c-form__done-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-2);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.c-form__done-title em { font-style: italic; color: var(--bordeaux); }
.c-form__done-soft { color: var(--walnoot); }
.c-form__done .actions { margin-top: 1.75rem; }

@media (max-width: 639px) {
  .c-form__send .btn { width: 100%; }
}
@media (min-width: 900px) {
  .c-ask__grid { grid-template-rows: auto 1fr; align-items: start; }
  .c-ask__intro { grid-column: 1 / 6; grid-row: 1; }
  .c-ask__who { grid-column: 1 / 6; grid-row: 2; margin: 3rem 0 0; }
  .c-form { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: .35rem; }
}

/* ---------- 5. Vaak gevraagd ---------- */
.c-faq__text { margin-top: 1.25rem; max-width: 26em; color: var(--walnoot); }
.c-faq__head .link-arrow { margin-top: 1rem; }
.c-faq__list { margin-top: 2.5rem; }
@media (min-width: 900px) {
  .c-faq__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
  .c-faq__list { grid-column: 6 / 13; margin-top: .35rem; }
}

/* ---------- 6. Slot: de afspraakkaart ----------
   De kaart ligt over het scherm van de telefoon (dat scherm is in de foto leeg): als een kaartje dat je
   bij de balie meekrijgt, in het midden van de foto. */
.c-next__visual { position: relative; }
.c-next__figure { margin: 0 calc(var(--marge) * -1); }
.c-next__figure .caption { padding-inline: var(--marge); margin-top: .75rem; }
.c-next__photo { position: relative; }
.c-next__photo .media { aspect-ratio: 4 / 5; }
.c-next__photo .media img { object-position: 50% 50%; }
.c-card {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 47%;
  width: min(19rem, 78%);
  padding: 1.5rem 1.35rem 1.45rem;
  background: var(--papier);
  color: var(--espresso);
  box-shadow: 0 0 0 1px var(--lijn), 10px 10px 0 -1px var(--creme), 10px 10px 0 0 var(--lijn), 0 24px 40px -24px rgba(34, 22, 15, .55);
  transform: translate(-50%, -50%) rotate(-2.2deg);
}
.c-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--lijn);
}
.c-card__logo {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.c-card__logo svg { width: .9em; height: .9em; }
.c-card__label {
  font-size: .62rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--walnoot);
}
.c-card__title { margin-top: .9rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.c-card__rows { margin-top: .5rem; }
.c-card__rows > div {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: .5rem;
  border-bottom: 1px solid var(--lijn);
}
.c-card__rows dt {
  font-size: .62rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--walnoot);
}
.c-card__rows dd { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.2; color: var(--bordeaux); }
.c-card__foot { margin-top: .75rem; font-size: .75rem; line-height: 1.4; color: var(--walnoot); }

.c-next__copy { margin-top: var(--ritme-s); }
.c-next__text { margin-top: 1.25rem; max-width: 30em; font-size: var(--fs-lead); }
.c-next__actions { margin-top: 2rem; }

@media (min-width: 600px) {
  .c-next__figure { margin-inline: 0; }
  .c-next__figure .caption { padding-inline: 0; }
  .c-next__photo .media { aspect-ratio: 3 / 2; }
  .c-card { top: 46%; width: 21.5rem; }
}
@media (min-width: 900px) {
  .c-next__grid { align-items: center; }
  .c-next__visual { grid-column: 1 / 8; }
  .c-next__copy { grid-column: 9 / 13; margin-top: 0; }
}

/* ---------- Toegankelijkheid ---------- */
@media (forced-colors: active) {
  .c-way { border: 0; }
  .colofon tr.is-today th::after { forced-color-adjust: none; background: CanvasText; }
  .c-card { border: 1px solid CanvasText; }
}