/* ------------------------------------------------------------------------
   KERN / MONO — alternatieve native route
   Web projection of a native Unreal Engine 5.8 information chamber.

   The page repeats the rule of the native scene: one axis, one light, one
   object, one ingredient. Nothing here is a card grid, a dashboard, a glass
   panel or a gradient blob.
   ------------------------------------------------------------------------ */

:root {
  --inkt:        #0A0B0C;
  --beton-diep:  #121314;
  --beton:       #1B1C1D;
  --beton-hoog:  #232527;
  --lijn:        #2E3134;
  --lijn-zacht:  #202325;
  --staal:       #9AA1A8;
  --kalk:        #E9E6DF;
  --kalk-zacht:  #BCB9B2;
  --signaal:     #93B7CB;
  --signaal-op:  #14202A;

  --display: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SFMono-Regular", Menlo, monospace;

  --as: 1px solid var(--lijn);
}

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

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

body {
  margin: 0;
  background: var(--inkt);
  color: var(--kalk);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signaal);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--kalk);
  color: var(--inkt);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 14px 20px;
  text-decoration: none;
}
.skip:focus { left: 0; }

.frame {
  max-width: 1440px;
  margin: 0 auto;
  border-left: var(--as);
  border-right: var(--as);
}

/* -------------------------------------------------------------- masthead */

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 74px;
  padding: 0 34px;
  border-bottom: var(--as);
}

.masthead__mark {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.masthead__nav {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

.masthead__nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kalk-zacht);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color 140ms linear, border-color 140ms linear;
}
.masthead__nav a:hover { color: var(--kalk); border-bottom-color: var(--signaal); }

.masthead__nav a i {
  font-style: normal;
  color: var(--signaal);
  margin-right: 8px;
}

.masthead__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--staal);
  white-space: nowrap;
}

.masthead__bar { display: none; }

/* --------------------------------------------------------------- opening */

.opening { position: relative; }

.opening__view {
  position: relative;
  margin: 0;
  height: 604px;
  overflow: hidden;
  background: var(--beton-diep);
}

.opening__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 52%;
}

.opening__img--tall { display: none; }

.opening__plate {
  position: absolute;
  inset: 0 auto 0 0;
  width: 600px;
  padding: 46px 48px 40px 34px;
  background: rgba(10, 11, 12, 0.945);
  border-right: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kicker {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signaal);
}

.opening h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.0;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.opening h1 em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--staal);
}

.lede {
  margin: 0 0 30px;
  max-width: 44ch;
  font-size: 16.5px;
  color: var(--kalk-zacht);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}

.btn--primary { background: var(--kalk); color: var(--inkt); border-color: var(--kalk); }
.btn--primary:hover { background: #FFFDF7; }

.btn--ghost { color: var(--kalk); border-color: var(--staal); }
.btn--ghost:hover { border-color: var(--kalk); background: rgba(233, 230, 223, 0.07); }

.guard {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--lijn-zacht);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--staal);
  max-width: 46ch;
}

/* ------------------------------------------------- fact plinth (desktop) */

.plint {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--as);
  border-bottom: var(--as);
}

.plint__cell {
  padding: 22px 26px 24px;
  border-left: 1px solid var(--lijn-zacht);
}
.plint__cell:first-child { border-left: 0; }

.plint__label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--staal);
}

.plint__value {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.plint__value small {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--kalk-zacht);
}

/* ---------------------------------------------------------------- sections */

.band { padding: 92px 34px; border-bottom: var(--as); }

.band--beton { background: var(--beton-diep); }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signaal);
}

.band h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 20ch;
}

.band p { max-width: 58ch; color: var(--kalk-zacht); }

/* ------------------------------------------------------------- de kamer */

.kamer__grid {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 64px;
  align-items: start;
}

.kamer__figure { margin: 0; }

.kamer__figure img { width: 100%; border: var(--as); }

.kamer__caption {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--staal);
}

.opbouw { margin: 38px 0 0; padding: 0; list-style: none; border-top: var(--as); }

.opbouw li {
  display: grid;
  grid-template-columns: 46px 200px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.opbouw b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--signaal);
}

.opbouw strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.opbouw span { color: var(--kalk-zacht); font-size: 15px; }

/* --------------------------------------------------------- doorsnede svg */

.doorsnede { margin: 76px 0 0; }

.doorsnede__sheet {
  border: var(--as);
  background: var(--inkt);
  padding: 18px;
}

.doorsnede svg { display: block; width: 100%; height: auto; }

.doorsnede__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--staal);
}

.doorsnede__legend li { display: flex; align-items: center; gap: 10px; }

.sleutel { width: 16px; height: 3px; display: inline-block; }
.sleutel--licht { background: #93B7CB; }
.sleutel--beton { background: #4A4E52; }
.sleutel--staal { background: #9AA1A8; }
.sleutel--pot   { background: #E9E6DF; }
.sleutel--kris  { background: #6E8FA3; }

/* --------------------------------------------------------------- formule */

.formule__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.lijst { margin: 0; border-top: 2px solid var(--kalk); }

.lijst p { margin: 0; }

.lijst__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--staal);
  border-bottom: 1px solid var(--lijn);
}

.lijst__regel {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--lijn);
}

.lijst__regel b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--signaal);
}

.lijst__regel strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.lijst__regel span {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--kalk-zacht);
  white-space: nowrap;
}

.lijst__slot {
  padding: 22px 0 0;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--staal);
}

.formule__noot {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--staal);
  max-width: 46ch;
}

/* --------------------------------------------------------------- routine */

.routine__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.regels { margin: 0; padding: 0; border-top: var(--as); }

.regels > div {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.regels dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.regels dd { margin: 0; color: var(--kalk-zacht); font-size: 15.5px; }

.geenadvies {
  margin: 40px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--signaal);
  background: var(--beton);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--kalk-zacht);
  max-width: none;
}

/* -------------------------------------------------------------- colophon */

.colophon { padding: 54px 34px 64px; }

.colophon__mark {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.colophon p + p { margin-top: 10px; }

.colophon__note,
.colophon__meta {
  margin: 0;
  max-width: 74ch;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--staal);
}

/* ========================================================================
   MOBILE — 390×844 recomposition, not a scale-down.

   The room turns: the wide sightline is replaced by the portrait native
   camera, the overlay plate drops below the image so no customer text sits
   on a photograph, the five-column fact plinth becomes a numbered vertical
   ledger, the inline nav becomes a full-width section bar under the hero,
   and the wide render returns lower down as the chamber crop — the exact
   inverse of the desktop image roles.
   ======================================================================== */

@media (max-width: 860px) {

  body { font-size: 15.5px; }

  .frame { border-left: 0; border-right: 0; }

  .masthead {
    grid-template-columns: 1fr;
    gap: 6px;
    height: auto;
    padding: 18px 18px 16px;
  }

  .masthead__mark { font-size: 19px; }
  .masthead__nav { display: none; }
  .masthead__meta { white-space: normal; font-size: 10.5px; letter-spacing: 0.13em; }

  .opening__view { height: 240px; }
  .opening__img--wide { display: none; }
  .opening__img--tall { display: block; object-position: 50% 44%; }

  .opening__plate {
    position: static;
    width: auto;
    border-right: 0;
    border-top: var(--as);
    background: var(--inkt);
    padding: 20px 18px 22px;
  }

  .kicker { margin-bottom: 8px; font-size: 10px; }

  .opening h1 { font-size: 30px; margin-bottom: 10px; }

  .lede { font-size: 14px; line-height: 1.45; margin-bottom: 14px; max-width: none; }

  .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn { justify-content: center; min-height: 50px; font-size: 13px; }

  .guard { max-width: none; margin-top: 12px; font-size: 10.5px; line-height: 1.45; }

  /* full-width section bar replaces the desktop masthead nav */
  .masthead__bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: var(--as);
    border-bottom: var(--as);
  }

  .masthead__bar a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 62px;
    padding: 10px 12px;
    border-left: 1px solid var(--lijn-zacht);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kalk);
  }
  .masthead__bar a:first-child { border-left: 0; }
  .masthead__bar a i { font-style: normal; font-size: 10px; color: var(--signaal); }

  /* the five-column plinth becomes a numbered vertical ledger */
  .plint { grid-template-columns: 1fr; border-top: 0; }

  .plint__cell {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 16px 18px;
    border-left: 0;
    border-bottom: 1px solid var(--lijn-zacht);
  }
  .plint__cell:last-child { border-bottom: 0; }

  .plint__cell::before {
    content: attr(data-index);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--signaal);
  }

  .plint__label {
    grid-column: 2;
    margin: 0 0 4px;
    font-size: 10px;
  }

  .plint__value { grid-column: 2; font-size: 22px; }
  .plint__value small { margin-top: 4px; font-size: 12.5px; }

  .band { padding: 52px 18px; }
  .band h2 { font-size: 29px; max-width: none; }
  .band p { max-width: none; }

  .kamer__grid,
  .formule__grid,
  .routine__grid { grid-template-columns: 1fr; gap: 34px; }

  /* image roles invert: portrait opened the page, the wide room closes this band */
  .kamer__figure { order: 2; }
  .kamer__figure img { object-fit: cover; height: 232px; }

  .opbouw { margin-top: 26px; }
  .opbouw li { grid-template-columns: 38px 1fr; gap: 6px 14px; padding: 16px 0; }
  .opbouw b { grid-row: span 2; }
  .opbouw span { grid-column: 2; }

  .doorsnede { margin-top: 44px; }
  .doorsnede__sheet { padding: 12px; }
  .doorsnede__legend { gap: 10px 20px; font-size: 10px; }

  .lijst__regel { grid-template-columns: 40px 1fr; gap: 6px 12px; padding: 22px 0; }
  .lijst__regel strong { font-size: 24px; }
  .lijst__regel span { grid-column: 2; white-space: normal; }
  .lijst__slot { font-size: 18px; }
  .formule__noot { max-width: none; }

  .regels > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .regels dt { font-size: 18px; }

  .geenadvies { margin-top: 30px; padding: 18px 18px; font-size: 12px; }

  .colophon { padding: 38px 18px 48px; }
}

@media (max-width: 400px) {
  .opening h1 { font-size: 30px; }
  .masthead__bar a { font-size: 10.5px; letter-spacing: 0.06em; }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
}