/* Tandartsenpraktijk De Prinsemarij - demo site
   Design system written fresh for this site (doc 05 §4e: keep the skeleton's
   contracts, write the layout fresh; replacing only a :root block produces a
   re-skin, not a design). The direction contract is in the head of index.html. */

/* ---------------------------------------------------------------- typefaces */

@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/Chivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/Chivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------- tokens */

:root {
  /* the field: flat enamel ultramarine carrying whole regions (Committed
     colour strategy). Never a gradient, never a glow. */
  --field: #1f32c4;
  --field-deep: #16268f;
  --field-ink: #ffffff;

  --ground: #fbfbfd;
  --paper: #ffffff;
  --rule: #d7dae5;
  --rule-strong: #a1a7c0;
  --ink: #10131f;
  --ink-soft: #474d66;

  /* the one accent, used only for live state and for the emergency band */
  --signal: #ffb000;
  --signal-ink: #10131f;

  --display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;

  /* every corner on this site is square. Signage plates, not app cards. */
  --radius: 0;
}

/* -------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.015em; font-weight: 700; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--field);
  outline-offset: 2px;
}
.hero__plate :focus-visible,
.band--field :focus-visible,
.split__field :focus-visible,
.band--signal :focus-visible,
.site-footer :focus-visible { outline-color: #ffffff; }

.wrap {
  width: min(76rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #ffffff;
  padding: 0.9rem 1.2rem;
  z-index: 60;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- demo banner */

.demo-banner {
  background: var(--ink);
  color: #eef0f6;
  font-size: 0.875rem;
  line-height: 1.5;
}
.demo-banner p {
  width: min(76rem, 100%);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
}

/* -------------------------------------------------------------------- header */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.15;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  min-height: 44px;
}
.wordmark__mark {
  /* Amber is reserved for live state and the emergency band. It used to form
     this mark's base bar, which decalibrated the accent's meaning in the very
     place the eye learns it (§4h review, 2026-07-26). The mark is a plate now. */
  width: 26px;
  height: 26px;
  background: var(--field);
  border-bottom: 8px solid var(--field-deep);
  flex: none;
}
.wordmark small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem clamp(0.1rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
}

/* Below the desktop breakpoint the header stacks: wordmark on its own line,
   the menu underneath at full width. No hamburger, so nothing can break. */
@media (max-width: 47.99rem) {
  .site-header__inner { flex-wrap: wrap; padding-block: 0.5rem; }
  .wordmark { max-width: 100%; }
  .nav { width: 100%; }
  .nav ul { justify-content: flex-start; margin-left: -0.55rem; }
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.55rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rule-strong); }
.nav a[aria-current='page'] { border-bottom-color: var(--field); }
.nav__call {
  background: var(--field);
  color: var(--field-ink);
  padding: 0 0.95rem;
  font-family: var(--display);
  font-weight: 800;
}
.nav__call:hover { background: var(--field-deep); border-bottom-color: transparent; }

/* -------------------------------------------------------------------- button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.btn:hover { background: var(--field); border-color: var(--field); color: #ffffff; }
.btn:active { transform: scale(0.985); }

.btn--onfield {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--field-deep);
}
.btn--onfield:hover { background: #dee2ff; border-color: #dee2ff; color: var(--field-deep); }

/* ---------------------------------------------------------- A. hero: a plate
   mounted on the room. The photograph runs full bleed; the ultramarine plate
   is bolted over it, square-edged, and the room stays visible around it. */

.hero { position: relative; background: var(--ink); }
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transform: scaleX(-1);
}
.hero__inner { position: relative; }
.hero__plate {
  background: var(--field);
  color: var(--field-ink);
  /* The plate bleeds to the LEFT viewport edge and its content still lines up
     with the site container. It used to be a 40rem box centred inside .wrap,
     which showed photograph on both sides and read as a floating text box
     rather than as a plate bolted to the wall (§4h review, 2026-07-26). */
  padding: clamp(1.6rem, 4vw, 3.1rem);
  padding-inline-start: calc((100% - min(76rem, 100%)) / 2 + var(--gutter));
}
.hero__live {
  display: inline-block;
  /* the plate is a flex column, so without this the badge stretches to its
     full width and stops reading as a stamped-on live indicator */
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.42rem 0.75rem;
  margin-bottom: 1.35rem;
}
.hero h1 { margin-bottom: 1.05rem; }
.hero__sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: 1.8rem;
  color: #e5e8ff;
}

@media (min-width: 60rem) {
  .hero__inner { min-height: 32rem; display: flex; align-items: stretch; }
  .hero__plate {
    width: 66%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
}

/* On a phone the plate keeps the overlap, but it comes FIRST and the room
   follows it, tucked under the plate's bottom edge.
   Two things forced this, both seen on a real handset (2026-07-26):
   1. A real phone viewport is around 630 CSS px tall once the browser's own
      chrome is there, not the 844 a headless test reports. With the room above
      the plate, the CTA fell below the fold.
   2. The room band above the plate was only ~104 px tall, which cropped to the
      underside of the operating lamp and read as an unidentifiable white
      appliance rather than as a treatment room.
   So the room now gets a 3:2 band, which shows the whole room and is legible,
   and it sits below the plate with its top corner behind it. The mirror is
   desktop-only: it exists to fill the strip beside the plate, and on a phone it
   just makes the room harder to recognise. */
@media (max-width: 59.99rem) {
  /* column-reverse, not column: the img is the first DOM child, and reversing is
     what puts the plate above the room without moving the markup.
     Both elements run full width and there are NO insets. An earlier version
     offset the plate right and the photo left to suggest layering; on a 390px
     screen the two strips of exposed --ink read as letterboxing artifacts rather
     than as composition, which is what Lorenzo saw on his handset. The overlap
     device belongs to the desktop breakpoint, where there is room for it. */
  .hero { display: flex; flex-direction: column-reverse; background: var(--field); }
  .hero__inner { width: 100%; position: relative; z-index: 1; }
  .hero__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    opacity: 1;
    transform: none;
    z-index: 0;
  }
}

/* Buy back vertical space above the fold on a phone: the address repeats in the
   footer and on the contact page, so it does not need to sit under the wordmark
   on the one screen where every pixel is conversion. */
@media (max-width: 47.99rem) {
  .wordmark small { display: none; }
  h1 { font-size: 1.75rem; }
  .demo-banner p { padding-block: 0.55rem; }
  .hero__plate { padding-block: 1.4rem 1.6rem; }
  .hero__live { margin-bottom: 1rem; }
  .hero h1 { margin-bottom: 0.8rem; }
  .hero__sub { margin-bottom: 1.3rem; }
}

/* --------------------------------------------------------- B. the week board */

.band { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.band--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.band--field { background: var(--field); color: var(--field-ink); }
.band--signal { background: var(--signal); color: var(--signal-ink); }

.band__head { max-width: var(--measure); margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.band__head p { color: var(--ink-soft); margin-top: 0.9rem; }
.band--signal .band__head p { color: #3a2f0d; }
.band--field .band__head p { color: #dee2ff; }

/* The board, on its own field. A departure board is type on a coloured plate,
   not a table on paper, and this is the region that makes FORM literal. */
.band--field .week { border-top-color: #ffffff; }
.band--field .week__row { border-bottom-color: rgba(255, 255, 255, 0.3); }
.band--field .week__row--today {
  background: var(--signal);
  color: var(--signal-ink);
  border-bottom-color: var(--signal);
}
.band--field .week__row--today .week__tag { background: var(--signal-ink); color: var(--signal); }
.band--field .week__note { color: #dee2ff; }
.band--field .lines { border-top-color: #ffffff; }
.band--field .lines__row { border-bottom-color: rgba(255, 255, 255, 0.3); }
.band--field .lines__when { color: #dee2ff; }
.band--field .lines__nr:hover { color: #ffffff; }

.week { border-top: 3px solid var(--ink); }
.week__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.week__day {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -0.005em;
}
.week__hours {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.week__row--today {
  background: var(--field);
  color: var(--field-ink);
  border-bottom-color: var(--field);
}
.week__tag[hidden] { display: none; }
.week__tag {
  display: inline-block;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  margin-left: 0.6rem;
  vertical-align: 0.15em;
}
.week__note {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  font-size: 1rem;
}

/* the two phone lines, set as a rule rather than a paragraph */
.lines { margin-top: clamp(2rem, 4vw, 3rem); border-top: 3px solid var(--ink); }
.lines__row {
  display: grid;
  gap: 0.2rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .lines__row { grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: center; }
}
.lines__what { font-weight: 700; }
.lines__when { color: var(--ink-soft); font-size: 1rem; }
.lines__nr {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.lines__nr:hover { color: var(--field); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------- C. treatments bento */

.bento {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 46rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cell {
  background: var(--paper);
  padding: clamp(1.3rem, 2.3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 11.5rem;
}
.cell p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; }
/* Not every discipline carries the same weight of the practice's year. The two
   that do are set larger, so the grid ranks instead of listing (§4h review). */
.cell--lead h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.cell--lead p { font-size: 1.06rem; max-width: 46ch; }
.cell--photo { padding: 0; min-height: 13rem; position: relative; }
.cell--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a portrait source in a wide short cell: frame the tray, not the drill tips */
.cell--photo--tray img { object-position: center 72%; }
.cell--field { background: var(--field); color: var(--field-ink); }
.cell--field p { color: #dee2ff; }
@media (min-width: 68rem) {
  .cell--wide { grid-column: span 2; }
}

/* ------------------------------------------------------ D. the emergency band */

.spoed { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 56rem) { .spoed { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.spoed h2 { max-width: 15ch; }
.spoed__intro { margin-top: 0.9rem; color: #3a2f0d; max-width: 40ch; }
.spoed__steps { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--signal-ink); }
.spoed__step {
  display: grid;
  gap: 0.15rem 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(16, 19, 31, 0.3);
}
@media (min-width: 32rem) { .spoed__step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.spoed__label { font-weight: 700; }
.spoed__nr {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}
.spoed__nr:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------- E. the appointment split */

.split { display: grid; }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.split__field {
  background: var(--field);
  color: var(--field-ink);
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
}
.split__field h1,
.split__field h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-bottom: 1rem; }
.split__field p { color: #dee2ff; font-size: 1rem; }
.split__field a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.split__field ol { margin: 1.1rem 0 0; padding-left: 1.2rem; color: #dee2ff; }
.split__field li { margin-bottom: 0.5rem; }
.split__form {
  background: var(--paper);
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
  border: 1px solid var(--rule);
}
@media (min-width: 58rem) { .split__form { border-left: 0; } }

/* --------------------------------------------------------------------- forms */

.formulier { display: grid; gap: 1.05rem; }
.formulier label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.formulier input,
.formulier select,
.formulier textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid #6c7290;
  border-radius: var(--radius);
  padding: 0.78rem 0.85rem;
  min-height: 48px;
}
.formulier textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.formulier input::placeholder { color: #565c7a; }
.formulier__hint { font-size: 1rem; color: var(--ink-soft); margin: 0.35rem 0 0; }
.formulier__disclaimer {
  font-size: 1rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin: 0;
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------- F. the team roster */

.roster { border-top: 3px solid var(--ink); }
.roster__group { border-bottom: 1px solid var(--rule); padding: 1.35rem 0; }
.roster__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.roster__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem 2rem; }
@media (min-width: 40rem) { .roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .roster__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roster__list li { display: grid; }
.roster__naam { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; }
.roster__rol { color: var(--ink-soft); font-size: 1rem; }

/* --------------------------------------------------- G. photo + information */

.info { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 58rem) { .info { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); } }
.info__photo { margin: 0; }
.info__photo img { width: 100%; }
.info__photo figcaption { font-size: 1rem; color: var(--ink-soft); margin-top: 0.6rem; }

.feiten { border-top: 3px solid var(--ink); margin: 0; }
.feiten > div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 34rem) { .feiten > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; }
.feiten a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 2px solid var(--rule-strong);
  word-break: break-word;
}
.feiten a:hover { border-bottom-color: var(--field); color: var(--field); }

.kaart {
  width: 100%;
  height: clamp(16rem, 40vw, 24rem);
  border: 1px solid var(--rule-strong);
  display: block;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
/* the facade the visitor clicks before the map iframe is fetched */
.kaart--facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--ground);
}
.kaart--facade p { color: var(--ink-soft); max-width: 34ch; margin: 0; }

/* -------------------------------------------------------- prose + list pages */

.paginakop {
  background: var(--field);
  color: var(--field-ink);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.paginakop p { color: #dee2ff; max-width: var(--measure); margin-top: 1rem; font-size: 1.06rem; }

.prose { max-width: var(--measure); }
.prose p { font-size: 1.06rem; }
.prose h2 { margin-top: 2.4rem; margin-bottom: 0.9rem; }

.dienst {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: 1.55rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 50rem) { .dienst { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }
.dienst:first-of-type { border-top: 3px solid var(--ink); }
.dienst h3 { font-size: clamp(1.22rem, 2.3vw, 1.55rem); }
.dienst p { color: var(--ink-soft); max-width: 58ch; margin: 0; }

.fact-strip {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 42rem) { .fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { background: var(--paper); padding: 1.4rem clamp(1.1rem, 2vw, 1.7rem); }
.fact__nr {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--field);
}
.fact p { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 1rem; }

/* -------------------------------------------------------------------- footer */

.site-footer { background: var(--ink); color: #d9dcea; }
.site-footer a { color: #ffffff; }
.site-footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.4rem, 5vw, 3.75rem);
}
@media (min-width: 52rem) { .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer__naam {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 0.8rem;
  color: #ffffff;
}
.site-footer p { margin-bottom: 0.7rem; }
.site-footer__tijden h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a7aec9;
  margin: 0 0 0.8rem;
  font-weight: 800;
  font-family: var(--display);
}
.tijden { margin: 0; border-top: 1px solid #2c3149; }
.tijden > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #2c3149;
}
.tijden dt { font-weight: 600; }
.tijden dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
  font-weight: 700;
  white-space: nowrap;
}
.site-footer__credit {
  /* a real photographer credited for a real photo, which the CC BY 2.0 licence
     on img/dordrecht.webp actually requires. Not a decorative caption. */
  font-size: 1rem;
  color: #a7aec9;
}
.site-footer__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
/* a link that is the whole content of its paragraph is a standalone action and
   has to meet the 44px target, not the inline-in-copy exception */
.site-footer__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  word-break: break-word;
}

/* ------------------------------------------------------------------- motion
   MOTION_INTENSITY 2. One entrance fade and state feedback, nothing else.
   The reveal exists only when the visitor has NOT asked for reduced motion,
   so no element can ever be left stuck at opacity 0. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}