/* ==========================================================
   Bar Brioche · aftelpagina
   Bolletje → logo over de plattegrond → teller tot 1 december
   Alles in het blauwdrukblauw van de plattegrond.
   ========================================================== */

:root {
  --creme: #F5EEDB;
  --blauw: #1F4E8B;

  --smal: "Archivo", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--blauw);
  font-family: var(--smal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-dicht { overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 6px; }

/* ---------- 1 · het bolletje ---------- */

.intro {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: var(--creme);
}
.intro__bol {
  width: min(46vmin, 300px);
  aspect-ratio: 76.2 / 104;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.bol-svg { display: block; width: 100%; height: 100%; animation: ademen 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.intro__bol:hover .bol-svg { animation-duration: 1.4s; }
/* geen rand bij klikken of tikken; alleen bij navigeren met het toetsenbord */
.intro__bol:focus:not(:focus-visible) { outline: none; }
@keyframes ademen {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.045) rotate(-2deg); }
}

/* het vliegende bolletje tijdens de overgang */
.vlieger { position: fixed; z-index: 20; pointer-events: none; transform-origin: 0 0; }
.vlieger svg { display: block; width: 100%; height: 100%; animation: none; }

/* ---------- 2 · logo over de plattegrond ---------- */

.poster {
  min-height: 100svh;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(20px, 4vh, 44px);
  padding: clamp(24px, 5vh, 56px) 0 clamp(32px, 6vh, 64px);
}
body.is-dicht .poster { opacity: 0; }

.poster__beeld {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: grid; place-items: center;
}
.poster__plan { width: min(100% - 32px, 1200px); }
.plattegrond { display: block; width: 100%; height: auto; }
.pl-tekst { fill: var(--blauw); }
.pl-groot { font: 800 24px var(--smal); font-stretch: 75%; letter-spacing: .22em; }
.pl-klein { font: 500 10.5px var(--mono); letter-spacing: .04em; }
.pl-straat { font: 700 15px var(--smal); letter-spacing: .6em; }
.pl-maat { font: 500 10px var(--mono); }

.poster__logo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
/* de lijnen van de plattegrond stoppen strak rond de letters (crème vorm .logo-plaat in het logo) */
.logo { width: min(48%, 580px); height: auto; }
/* zonder overgang: het vliegende broodje wisselt in één beeld met de O */
body.is-vliegen .logo .logo-o-deel { opacity: 0; }

/* ---------- teller ---------- */

.teller {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(14px, 3.5vw, 44px);
  padding: 0 16px;
}
.teller__vak { display: grid; justify-items: center; min-width: 2.2ch; }
.teller__getal {
  font-family: var(--smal);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--blauw);
}
.teller__naam {
  margin-top: 8px;
  font: 500 .74rem var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blauw);
}

/* ---------- info-knopje rechtsonder ---------- */

.info-knop {
  position: fixed; right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 32px); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--blauw);
  background: var(--creme); color: var(--blauw);
  font: 700 1.35rem/1 var(--mono);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.info-knop:hover { background: var(--blauw); color: var(--creme); }

/* ---------- infopagina: titelblok zoals op de bouwtekening ---------- */

.infoblad {
  min-height: 100svh;
  max-width: 880px; margin: 0 auto;
  padding: clamp(20px, 5vh, 48px) 16px clamp(32px, 6vh, 64px);
  display: grid; align-content: center; gap: clamp(24px, 5vh, 48px);
}
.infoblad__terug {
  justify-self: start;
  font: 500 .8rem var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blauw); text-decoration: none;
}
.infoblad__terug:hover { text-decoration: underline; text-underline-offset: 4px; }
.infoblad__logo { margin: 0; justify-self: center; width: min(78%, 440px); }
.infoblad__logo img { display: block; width: 100%; height: auto; }

.titelblok {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 2px solid var(--blauw);
}
.titelblok__vak {
  display: grid; align-content: start; gap: 6px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--blauw);
}
.titelblok__vak:nth-child(odd) { border-left: 1px solid var(--blauw); }
.titelblok__vak--breed { grid-column: 1 / -1; border-top: 0; border-left: 0 !important; }
.titelblok__label { font: 500 .68rem var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.titelblok__vak p { margin: 0; font: 800 1.15rem/1.25 var(--smal); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }
.titelblok__vak .titelblok__groot { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 900; font-stretch: 62%; line-height: .95; }
.titelblok__link {
  justify-self: start; margin-top: 4px;
  font: 500 .8rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--blauw);
}

@media (max-width: 520px) {
  .titelblok { grid-template-columns: 1fr; }
  .titelblok__vak { border-left: 0 !important; }
}

/* ---------- mobiel: plattegrond rechtop, Boschstraat boven ---------- */

@media (max-width: 700px) {
  .poster { gap: 18px; padding: 16px 0 24px; }

  /* de tekening is 1124 × 500; rechtop wordt dat 500 breed en 1124 hoog */
  .poster__plan {
    --hoog: min(calc(100svh - 210px), calc((100vw - 32px) * 2.248));
    position: relative;
    height: var(--hoog);
    width: calc(var(--hoog) / 2.248);
  }
  .plattegrond {
    position: absolute; left: 50%; top: 50%;
    width: var(--hoog);
    transform: translate(-50%, -50%) rotate(90deg);
  }
  /* namen van de ruimtes blijven gewoon leesbaar */
  .pl-groot, .pl-klein { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
  .pl-sub { display: none; }

  .logo { width: min(86vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  .bol-svg { animation: none; }
}