/* ========================================
   DE VASTGOEDREALIST · STYLE v3 — ULTIEM
   Anoniem geschreven, openbaar gerekend.
   ======================================== */

/* === DESIGN TOKENS — UITGEBREID === */
:root {
  /* Bases */
  --bg: #04060f;
  --bg-deep: #06091a;
  --bg-pure: #02030a;
  --bg-warm: #0a0608;

  /* Gold spectrum */
  --gold: #c9a961;
  --gold-light: #e8c878;
  --gold-deep: #a08540;
  --gold-pale: #d9c08a;
  --gold-glow: rgba(232, 200, 120, 0.35);
  --gold-shimmer: linear-gradient(135deg, #a08540 0%, #c9a961 25%, #e8c878 50%, #c9a961 75%, #a08540 100%);

  /* Coral/oxblood spectrum */
  --coral: #ff496c;
  --coral-light: #ff7393;
  --coral-dark: #cc2d4a;
  --oxblood: #4d1623;
  --burgundy: #6b1a2c;

  /* Cool accent — voor contrast tegenover het warme goud */
  --teal: #4dd5d0;
  --teal-deep: #2a8a87;
  --teal-glow: rgba(77, 213, 208, 0.3);
  --ice: #a8e0dd;

  /* Knalroze accent — voor de kat */
  --pink: #ff3d9a;
  --pink-light: #ff7ac1;
  --pink-glow: rgba(255, 61, 154, 0.6);

  /* Text */
  --text: #ededed;
  --text-bright: #ffffff;
  --text-muted: rgba(237, 237, 237, 0.65);
  --text-dim: rgba(237, 237, 237, 0.45);
  --text-faint: rgba(237, 237, 237, 0.25);
  --text-ghost: rgba(237, 237, 237, 0.12);

  /* Lines */
  --line: rgba(237, 237, 237, 0.18);
  --line-dim: rgba(237, 237, 237, 0.06);
  --line-gold: rgba(201, 169, 97, 0.25);
  --line-coral: rgba(255, 73, 108, 0.25);

  /* Blue spectrum */
  --blue-deep: #1a2548;
  --blue-mid: #2a4178;
  --blue-glass: #264a78;
  --prussian: #0e1d3f;
  --midnight: #0d1530;
  --indigo-deep: #16193b;

  /* Window lights */
  --window-warm: #ffd88a;
  --window-bright: #ffe6b8;

  /* Fonts */
  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-display: 'Crimson Pro', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Fluid typography */
  --fs-hero: clamp(2.5rem, 1.3rem + 7vw, 9.5rem);
  --fs-hero-italic: clamp(2rem, 1rem + 5.6vw, 7.5rem);
  --fs-hero-sub: clamp(0.95rem, 0.7rem + 0.7vw, 1.25rem);
  --fs-section: clamp(1.625rem, 1rem + 2.5vw, 4rem);
  --fs-tile: clamp(1.25rem, 0.85rem + 1.4vw, 2.5rem);
  --fs-tile-num: clamp(3.5rem, 2rem + 5vw, 9rem);
  --fs-body: clamp(0.8125rem, 0.7rem + 0.4vw, 1rem);
  --fs-mono-sm: clamp(0.5625rem, 0.5rem + 0.2vw, 0.75rem);
  --fs-mono-md: clamp(0.625rem, 0.55rem + 0.25vw, 0.8125rem);

  /* Spacing */
  --pad-page: clamp(1.5rem, 0.8rem + 2.5vw, 4.5rem);
  --pad-section: clamp(2.5rem, 1rem + 5vw, 7rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'onum' 1;
  position: relative;
}

/* === FILMKORREL TEXTUUR — over alles heen === */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(8) infinite;
}

@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* === ATMOSFERISCHE BACKGROUND === */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 800px 400px at 80% 0%, rgba(77, 22, 35, 0.3), transparent 60%),
    radial-gradient(ellipse 600px 300px at 20% 100%, rgba(13, 21, 48, 0.4), transparent 70%),
    radial-gradient(circle 400px at 50% 50%, rgba(201, 169, 97, 0.02), transparent);
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }

::selection { background: var(--coral); color: var(--bg); }

/* === ANIMATIES === */
@keyframes drawCurve {
  from { stroke-dashoffset: 2400; }
  to { stroke-dashoffset: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes blinkSlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}
@keyframes pulseHalo {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.12); }
}
@keyframes pulseRing {
  0% { r: 11; opacity: 0.65; }
  100% { r: 32; opacity: 0; }
}
@keyframes gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes coralPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes lampFlicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes lampDying {
  0%, 35% { opacity: 0.95; }
  40% { opacity: 0.2; }
  42% { opacity: 0.95; }
  44% { opacity: 0.1; }
  46% { opacity: 0.85; }
  48%, 78% { opacity: 0; }
  80% { opacity: 0.4; }
  82% { opacity: 0; }
  84% { opacity: 0.85; }
  100% { opacity: 0.95; }
}
@keyframes lampGlowDying {
  0%, 35% { opacity: 0.55; }
  40% { opacity: 0.1; }
  42% { opacity: 0.55; }
  48%, 78% { opacity: 0; }
  84% { opacity: 0.45; }
  100% { opacity: 0.55; }
}
@keyframes catBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  92%, 96% { transform: scaleY(0.05); }
}
@keyframes birdHop {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-2px); }
  40% { transform: translateY(0); }
}
@keyframes walkerMove {
  0% { transform: translateX(0); opacity: 0; }
  5%, 95% { opacity: 1; }
  100% { transform: translateX(-960px); opacity: 0; }
}
@keyframes smokeRise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0.5; }
  50% { opacity: 0.4; }
  100% { transform: translate(14px, -55px) scale(1.8); opacity: 0; }
}
@keyframes windowDim {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}
@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes underlineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 169, 97, 0.3)); }
  50% { filter: drop-shadow(0 0 16px rgba(232, 200, 120, 0.5)); }
}
@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fade-up { opacity: 0; animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.fade-in { opacity: 0; animation: fadeIn 1.4s ease-out forwards; }
.delay-1 { animation-delay: 0.4s; }
.delay-2 { animation-delay: 1.7s; }
.delay-3 { animation-delay: 2.3s; }
.delay-4 { animation-delay: 2.9s; }

/* === HEADER === */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 1.4rem + 0.8vw, 36px) var(--pad-page);
  position: relative;
  z-index: 30;
}
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.logo svg {
  width: clamp(28px, 1.6rem + 1vw, 44px);
  height: clamp(28px, 1.6rem + 1vw, 44px);
  animation: glow 4s ease-in-out infinite;
}
.logo-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.logo-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.65rem);
  letter-spacing: 0.005em;
  color: var(--text-bright);
  line-height: 1;
}
.logo-tagline {
  font-family: var(--font-mono);
  font-size: clamp(0.46rem, 0.42rem + 0.15vw, 0.6rem);
  letter-spacing: 0.26em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.6;
  line-height: 1;
}
.header-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.28em;
  color: var(--text-faint);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-meta::before {
  content: '';
  width: clamp(20px, 1.2rem + 0.5vw, 32px);
  height: 0.5px;
  background: var(--text-faint);
}

/* === TICKER === */
.ticker-wrap {
  background:
    linear-gradient(180deg, rgba(77, 22, 35, 0.15) 0%, rgba(255, 73, 108, 0.04) 50%, rgba(77, 22, 35, 0.15) 100%);
  border-top: 0.5px solid rgba(255, 73, 108, 0.22);
  border-bottom: 0.5px solid rgba(255, 73, 108, 0.22);
  overflow: hidden;
  padding: clamp(10px, 0.65rem + 0.3vw, 14px) 0;
  position: relative;
  z-index: 5;
}
.ticker-wrap::before,
.ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(50px, 4rem + 1.5vw, 100px);
  z-index: 2;
  pointer-events: none;
}
.ticker-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 20%, transparent 100%);
}
.ticker-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 20%, transparent 100%);
}
.ticker-track {
  display: flex;
  gap: clamp(20px, 1.4rem + 0.8vw, 36px);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  width: max-content;
  animation: tickerScroll 80s linear infinite;
  align-items: center;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ticker-item .lbl {
  color: var(--text-muted);
}
.ticker-house {
  font-size: 1.15em;
  color: var(--gold);
  opacity: 0.55;
  font-family: var(--font-serif);
  line-height: 1;
}
.ticker-track .accent { color: var(--coral); font-weight: 500; }
.ticker-track .gold-accent { color: var(--gold-light); font-weight: 500; }
.ticker-track .teal-accent { color: var(--teal); font-weight: 500; }
.ticker-divider {
  width: 0.5px;
  background: linear-gradient(180deg, transparent, rgba(201, 169, 97, 0.3), transparent);
  align-self: stretch;
}

/* === HERO CANVAS === */
.canvas-wrap {
  position: relative;
  height: clamp(520px, 45vw + 220px, 880px);
  overflow: hidden;
  z-index: 2;
  background: #04060f;
}

.light-source {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background:
    /* Warme magenta-oxblood zone rechtsboven */
    radial-gradient(ellipse 900px 700px at 85% 25%, rgba(220, 60, 110, 0.28), transparent 60%),
    /* Koele cyaan zone linksonder */
    radial-gradient(ellipse 800px 600px at 5% 70%, rgba(40, 200, 195, 0.22), transparent 60%),
    /* Diep oxblood in de rechterbovenhoek */
    radial-gradient(circle 500px at 95% 5%, rgba(120, 20, 50, 0.4), transparent 70%),
    /* Diep marine onderaan */
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(13, 21, 48, 0.45), transparent 70%);
  transition: background 0.5s ease;
}

.canvas-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.curve-main {
  stroke-dasharray: 2400;
  animation: drawCurve 4.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(0 0 8px rgba(201, 169, 97, 0.5));
}
.building { opacity: 0; animation: fadeUp 0.9s ease-out forwards; }
.building:nth-of-type(1) { animation-delay: 1.4s; }
.building:nth-of-type(2) { animation-delay: 1.6s; }
.building:nth-of-type(3) { animation-delay: 1.8s; }
.building:nth-of-type(4) { animation-delay: 2.0s; }
.building:nth-of-type(5) { animation-delay: 2.2s; }
.building:nth-of-type(6) { animation-delay: 2.4s; }
.building:nth-of-type(7) { animation-delay: 2.6s; }
.building:nth-of-type(8) { animation-delay: 2.8s; }
.light-warm { animation: blink 5s ease-in-out infinite; }
.light-cool { animation: blinkSlow 7s ease-in-out infinite; }
.light-coral { animation: blink 6s ease-in-out infinite; }
.lw1 { animation-delay: 0.4s; }
.lw2 { animation-delay: 1.6s; }
.lw3 { animation-delay: 2.8s; }
.lw4 { animation-delay: 3.7s; }
.lw5 { animation-delay: 0.9s; }
.lw6 { animation-delay: 4.2s; }

/* === MARKERS OP CURVE === */
.marker-grp {
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  transform-box: fill-box;
}
/* ALLES in marker-grp niet klikbaar, ALLEEN de hit-rect ontvangt events */
.marker-grp circle,
.marker-grp line,
.marker-grp text,
.marker-grp polygon,
.marker-grp g {
  pointer-events: none;
}
.marker-hit {
  cursor: pointer;
  pointer-events: all !important;
  fill: transparent;
}
.m1 { animation-delay: 3.0s; }
.m2 { animation-delay: 3.2s; }
.m3 { animation-delay: 3.4s; }
.m4 { animation-delay: 3.6s; }
.marker-grp:hover { transform: scale(1.1); }
.marker-halo {
  animation: pulseHalo 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.marker-ring { animation: pulseRing 2.6s ease-out infinite; }
.mr2 { animation-delay: 0.9s; }
.marker-bob {
  animation: gentle 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.marker-label { opacity: 0; animation: fadeUp 0.6s ease-out forwards; }
.ml1 { animation-delay: 3.8s; }
.ml2 { animation-delay: 4.0s; }
.ml3 { animation-delay: 4.2s; }
.ml4 { animation-delay: 4.4s; }

/* === CURSOR READOUT === */
.cursor-line, .cursor-readout {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.canvas-wrap.is-hovering .cursor-line,
.canvas-wrap.is-hovering .cursor-readout { opacity: 1; }
.cursor-readout {
  position: absolute;
  z-index: 8;
  background: rgba(4, 6, 15, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(77, 213, 208, 0.85);
  border-radius: 4px;
  padding: clamp(14px, 0.85rem + 0.4vw, 22px) clamp(18px, 1.2rem + 0.5vw, 26px);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  min-width: clamp(170px, 11rem + 2.5vw, 230px);
  box-shadow:
    0 8px 40px rgba(77, 213, 208, 0.35),
    0 0 24px rgba(77, 213, 208, 0.2),
    0 0 0 0.5px rgba(77, 213, 208, 0.5),
    inset 0 0 24px rgba(77, 213, 208, 0.07);
  /* default position - until cursor moves */
  top: clamp(20px, 1.5rem + 0.5vw, 40px);
  right: var(--pad-page);
  transition: opacity 0.2s ease;
}
.cursor-readout::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 1px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.cursor-readout::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 24px;
  height: 1px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.cursor-readout .row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.cursor-readout .row + .row { margin-top: 8px; }
.cursor-readout .label { color: var(--teal); letter-spacing: 0.22em; font-size: 0.82em; font-weight: 500; }
.cursor-readout .value { color: var(--text-bright); font-weight: 500; }
.cursor-readout .value-gold { color: var(--gold-light); font-weight: 600; text-shadow: 0 0 10px rgba(232, 200, 120, 0.5); }

/* === HERO TITLE — ASYMMETRISCH GRID === */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 3vw + 24px, 90px) var(--pad-page) clamp(40px, 3vw + 20px, 80px);
  pointer-events: none;
  gap: clamp(20px, 1.5vw, 40px);
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--gold-light);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.hero-eyebrow::before {
  content: '';
  width: clamp(24px, 1.4rem + 0.8vw, 44px);
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-eyebrow .dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Hero title is nu in een asymmetrische grid: top regel rechts, onderste regel links */
.hero-title-block {
  pointer-events: none;
  position: relative;
  margin-top: clamp(20px, 2vw, 40px);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--text-bright);
  position: relative;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1, 'salt' 1;
}
.hero-title-line-1 {
  display: block;
  text-indent: clamp(40px, 8vw, 200px);
}
.hero-title-line-2 {
  display: block;
  font-size: var(--fs-hero-italic);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  position: relative;
  margin-top: clamp(4px, 0.5vw, 16px);
  font-family: var(--font-display);
  background: linear-gradient(135deg, #a08540 0%, #c9a961 25%, #e8c878 50%, #d9c08a 70%, #c9a961 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 8s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(160, 133, 64, 0.2));
  letter-spacing: -0.025em;
  line-height: 1;
}
.hero-title-line-2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: clamp(0.06em, 0.08em, 0.1em);
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, 0.6) 30%, rgba(232, 200, 120, 0.8) 60%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  animation: underlineGrow 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.8s;
}

.hero-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  flex-wrap: wrap;
  gap: 24px;
}
.hero-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-hero-sub);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: clamp(280px, 24vw + 140px, 480px);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.hero-sub strong {
  color: var(--text);
  font-weight: 500;
}
.hero-numerals {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--text-faint);
  text-transform: uppercase;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.hero-numerals .roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 0.8rem + 1.2vw, 2rem);
  letter-spacing: 0.08em;
  color: var(--teal);
  text-transform: none;
  margin-bottom: 4px;
  opacity: 0.7;
  text-shadow: 0 0 12px rgba(77, 213, 208, 0.2);
}

/* === TOOLTIP === */
.tooltip {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  background: rgba(4, 6, 15, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid rgba(255, 73, 108, 0.5);
  border-radius: 4px;
  padding: clamp(14px, 0.9rem + 0.3vw, 22px) clamp(18px, 1.1rem + 0.4vw, 26px);
  min-width: clamp(240px, 16rem + 4vw, 340px);
  max-width: clamp(300px, 20rem + 4vw, 400px);
  z-index: 50;
  transform: translate(-50%, -100%);
  margin-top: -16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 73, 108, 0.12);
}
.tooltip.visible { opacity: 1; }
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px;
  background: rgba(4, 6, 15, 0.97);
  border-right: 0.5px solid rgba(255, 73, 108, 0.5);
  border-bottom: 0.5px solid rgba(255, 73, 108, 0.5);
}
.tooltip .num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  color: var(--coral);
  margin-bottom: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tooltip .num::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(255, 73, 108, 0.25);
}
.tooltip .date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  color: var(--coral);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tooltip .title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.4rem);
  line-height: 1.2;
  color: var(--text-bright);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.tooltip .desc {
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 0.65rem + 0.15vw, 0.85rem);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.tooltip .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tooltip .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 0.5px solid rgba(255, 73, 108, 0.22);
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
}
.tooltip .ex { color: var(--gold-light); letter-spacing: 0.06em; }
.tooltip .pr { color: var(--coral); letter-spacing: 0.12em; }

/* === TILES — VISITEKAARTJES === */
.tiles-section {
  padding: clamp(70px, 5rem + 3vw, 140px) var(--pad-page) 0;
  position: relative;
  z-index: 2;
}
.tiles-eyebrow-wrap {
  max-width: clamp(800px, 84vw, 1400px);
  margin: 0 auto clamp(36px, 2.4rem + 1.4vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.tiles-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--coral);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tiles-eyebrow::before {
  content: '';
  width: clamp(28px, 1.6rem + 1vw, 48px);
  height: 0.5px;
  background: var(--coral);
  opacity: 0.6;
}
.tiles-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.3rem);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.tiles-tag em {
  color: var(--gold);
}
.tiles {
  max-width: clamp(800px, 84vw, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}
.tile {
  background: linear-gradient(180deg, rgba(13, 21, 48, 0.15) 0%, transparent 100%);
  border-top: 0.5px solid var(--line);
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  padding: clamp(28px, 1.6rem + 1.2vw, 52px) clamp(22px, 1.3rem + 0.8vw, 40px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(280px, 18rem + 6vw, 420px);
}
.tile:first-child { border-left: 0.5px solid var(--line); }

/* Subtiel oxidatie-gradient bij hover */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 73, 108, 0) 0%, rgba(201, 169, 97, 0) 60%);
  transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* Top accent line */
.tile::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
  transform: translateX(-50%);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.tile:hover::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 73, 108, 0.2) 0%, rgba(201, 169, 97, 0.12) 30%, rgba(77, 22, 35, 0.08) 60%);
}
.tile:hover::after { width: 60%; }
.tile:hover {
  border-color: rgba(255, 73, 108, 0.45);
  background: linear-gradient(180deg, rgba(13, 21, 48, 0.3) 0%, rgba(77, 22, 35, 0.05) 100%);
}
.tile:hover .tile-num {
  background: linear-gradient(135deg, #a08540 0%, #e8c878 50%, #d9c08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(232, 200, 120, 0.4));
}
.tile:hover .tile-name { color: var(--text-bright); }
.tile:hover .tile-arrow {
  transform: translateX(8px);
  color: var(--coral);
}

.tile-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-tile-num);
  font-weight: 400;
  color: var(--gold);
  line-height: 0.85;
  letter-spacing: -0.025em;
  margin-bottom: clamp(20px, 1.2rem + 0.6vw, 36px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.9;
  /* Subtiel reliëf */
  text-shadow:
    0 1px 0 rgba(160, 133, 64, 0.15),
    0 -1px 0 rgba(232, 200, 120, 0.05);
}
.tile-num-wrap {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: clamp(20px, 1.2rem + 0.6vw, 36px);
}
.tile-num-wrap .tile-num {
  margin-bottom: 0;
}
.tile-num-divider {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-faint);
  letter-spacing: 0.2em;
  align-self: flex-end;
  margin-bottom: 0.6em;
}

.tile-name {
  font-family: var(--font-serif);
  font-size: var(--fs-tile);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.022em;
  margin-bottom: clamp(10px, 0.6rem + 0.3vw, 16px);
  color: var(--text);
  transition: color 0.4s ease;
}
.tile-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.7rem + 0.2vw, 0.95rem);
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: auto;
  padding-bottom: clamp(20px, 1.2rem + 0.6vw, 32px);
}
.tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(14px, 0.9rem + 0.4vw, 22px);
  border-top: 0.5px solid var(--line);
  margin-top: auto;
}
.tile-price {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tile-arrow {
  font-size: clamp(18px, 1rem + 0.5vw, 28px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--gold);
}
.tile.coming-soon { opacity: 0.5; cursor: default; }
.tile.coming-soon:hover {
  transform: none;
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(13, 21, 48, 0.15) 0%, transparent 100%);
}
.tile.coming-soon:hover::before { background: none; }
.tile.coming-soon:hover::after { width: 0; }
.tile.coming-soon .tile-price {
  color: var(--coral);
  font-style: italic;
  letter-spacing: 0.2em;
}

/* === STREET / ARCHIEF === */
.street-section {
  padding: clamp(80px, 5rem + 3.5vw, 160px) var(--pad-page) clamp(50px, 3rem + 2.5vw, 100px);
  max-width: clamp(800px, 84vw, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.street-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 2.5rem + 1.6vw, 72px);
  flex-wrap: wrap;
  gap: 16px;
}
.street-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--coral);
  margin-bottom: clamp(12px, 0.7rem + 0.4vw, 20px);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}
.street-eyebrow::before {
  content: '';
  width: clamp(24px, 1.4rem + 1vw, 44px);
  height: 0.5px;
  background: var(--coral);
  opacity: 0.6;
}
.street-title {
  font-family: var(--font-serif);
  font-size: var(--fs-section);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-bright);
  max-width: 18ch;
}
.street-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.street-wrap { position: relative; }
.house {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
  transform-box: fill-box;
}
.house:hover { transform: translateY(-5px); }
.house:hover .house-glass { opacity: 0.7; }
.house:hover .house-windows rect { opacity: 0.95; fill: var(--window-bright); }
.house.active .house-glass { fill: var(--coral); opacity: 0.6; }
.house.active .house-windows rect { fill: var(--window-bright); opacity: 1; }
.house.active { animation: coralPulse 2s ease-in-out infinite; }
.house-glass { transition: all 0.3s ease; }
.house-windows rect { transition: all 0.3s ease; }
.recent-house .recent-glow { animation: coralPulse 2.4s ease-in-out infinite; }
.lamp-light { animation: lampFlicker 5s ease-in-out infinite; }
.lamp-dying { animation: lampDying 8s ease-in-out infinite; }
.lamp-glow-dying { animation: lampGlowDying 8s ease-in-out infinite; }
.cat-eye { animation: catBlink 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.bird { animation: birdHop 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.walker { animation: walkerMove 24s linear infinite; }
.smoke-puff { animation: smokeRise 4s ease-out infinite; }
.smoke-puff:nth-child(2) { animation-delay: 1.3s; }
.smoke-puff:nth-child(3) { animation-delay: 2.6s; }
.window-dim { animation: windowDim 7s ease-in-out infinite; }

/* === ARTICLE PANE === */
.article-pane {
  background:
    linear-gradient(135deg, rgba(255, 73, 108, 0.06) 0%, rgba(201, 169, 97, 0.04) 50%, rgba(13, 21, 48, 0.1) 100%);
  border: 0.5px solid rgba(255, 73, 108, 0.3);
  border-left: 2px solid var(--coral);
  border-radius: 0 6px 6px 0;
  padding: clamp(28px, 1.8rem + 1.2vw, 52px) clamp(32px, 2rem + 1.4vw, 60px);
  min-height: clamp(240px, 15rem + 5vw, 360px);
  margin-top: clamp(32px, 2rem + 1.4vw, 56px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.article-pane::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.1) 0%, transparent 60%);
  pointer-events: none;
}
.article-pane::after {
  content: '§';
  position: absolute;
  top: clamp(20px, 1.4rem + 0.4vw, 32px);
  right: clamp(28px, 1.8rem + 0.6vw, 44px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 1vw, 2.5rem);
  color: var(--gold);
  opacity: 0.25;
}
.article-pane .meta-line {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.28em;
  color: var(--coral);
  margin-bottom: clamp(16px, 1rem + 0.5vw, 26px);
  text-transform: uppercase;
}
.article-pane h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.625rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.022em;
  margin: 0 0 clamp(16px, 1rem + 0.5vw, 26px);
  color: var(--text-bright);
  max-width: 26ch;
}
.article-pane .read-time {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: clamp(20px, 1.4rem + 0.6vw, 32px);
  text-transform: uppercase;
}
.article-pane p {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 clamp(24px, 1.5rem + 0.7vw, 38px);
  max-width: 68ch;
}
.article-pane .pane-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(18px, 1.2rem + 0.5vw, 28px);
  border-top: 0.5px solid rgba(255, 73, 108, 0.2);
}
.article-pane .signature {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.article-pane .read-more {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  color: var(--coral);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.article-pane .read-more:hover {
  color: var(--coral-light);
  letter-spacing: 0.24em;
}

/* === FOOTER === */
.site-footer {
  padding: clamp(32px, 2rem + 1.2vw, 56px) var(--pad-page);
  border-top: 0.5px solid var(--line-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(50px, 3rem + 2.5vw, 100px);
  position: relative;
  z-index: 2;
}
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 0.82rem + 0.3vw, 1.125rem);
  color: var(--text-dim);
  letter-spacing: 0.005em;
}
.footer-handle {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.footer-handle:hover { color: var(--coral); }

/* === CALCULATOR PAGE === */
.calc-page {
  max-width: clamp(720px, 80vw, 1080px);
  margin: 0 auto;
  padding: clamp(40px, 3rem + 2vw, 80px) var(--pad-page);
  position: relative;
  z-index: 2;
}
.calc-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: clamp(28px, 2rem + 1.2vw, 56px);
  transition: all 0.3s ease;
}
.calc-back:hover { color: var(--coral); letter-spacing: 0.24em; }
.calc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--coral);
  text-transform: uppercase;
  margin-bottom: clamp(12px, 0.8rem + 0.4vw, 20px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.calc-eyebrow::before {
  content: '';
  width: clamp(24px, 1.4rem + 1vw, 44px);
  height: 0.5px;
  background: var(--coral);
  opacity: 0.6;
}
.calc-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 clamp(16px, 1rem + 0.5vw, 28px);
  color: var(--text-bright);
}
.calc-title em {
  font-style: italic;
  background: linear-gradient(135deg, #a08540 0%, #e8c878 50%, #d9c08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calc-intro {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 72ch;
  margin-bottom: clamp(40px, 2.5rem + 2vw, 80px);
}

/* === ARTICLE PAGE === */
.article-page {
  max-width: clamp(620px, 60vw, 800px);
  margin: 0 auto;
  padding: clamp(40px, 3rem + 2vw, 80px) var(--pad-page);
  position: relative;
  z-index: 2;
}
.article-page .article-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.28em;
  color: var(--coral);
  text-transform: uppercase;
  margin-bottom: clamp(16px, 1rem + 0.5vw, 26px);
}
.article-page h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(20px, 1.4rem + 0.7vw, 34px);
  color: var(--text-bright);
}
.article-page .article-subline {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: clamp(36px, 2.4rem + 1.4vw, 64px);
  display: flex;
  gap: clamp(20px, 1.4rem + 0.6vw, 32px);
  padding-bottom: clamp(20px, 1.4rem + 0.6vw, 32px);
  border-bottom: 0.5px solid var(--line);
}
.article-body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  line-height: 1.8;
  color: var(--text-muted);
}
.article-body p { margin: 0 0 clamp(20px, 1.3rem + 0.5vw, 32px); }
.article-body p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  line-height: 0.85;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--coral);
  font-style: italic;
}
.article-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  margin: clamp(40px, 2.5rem + 1.4vw, 64px) 0 clamp(16px, 1rem + 0.5vw, 24px);
  color: var(--text-bright);
  letter-spacing: -0.012em;
}
.article-body strong { color: var(--text-bright); font-weight: 600; }
.article-body em {
  background: linear-gradient(135deg, #a08540 0%, #e8c878 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.article-signature {
  margin-top: clamp(50px, 3rem + 1.5vw, 80px);
  padding-top: clamp(28px, 1.8rem + 0.8vw, 40px);
  border-top: 0.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.28em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* === LIVE DATA / BLOOMBERG-STYLE ELEMENTS === */

/* Koers feed linksboven */
.live-koers {
  position: absolute;
  top: clamp(40px, 3vw + 24px, 90px);
  right: var(--pad-page);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.06em;
  padding: 8px 14px;
  background: rgba(4, 6, 15, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(77, 213, 208, 0.3);
  border-radius: 3px;
  pointer-events: auto;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards 2.4s;
}
.live-koers .koers-lbl {
  color: var(--text-dim);
  font-size: 0.85em;
  letter-spacing: 0.18em;
}
.live-koers .koers-val {
  color: var(--text-bright);
  font-weight: 500;
  transition: color 0.4s ease;
  font-variant-numeric: tabular-nums;
}
.live-koers .koers-val.up { color: var(--gold-light); }
.live-koers .koers-val.down { color: var(--coral); }
.live-koers .koers-arrow {
  font-size: 0.9em;
  transition: color 0.4s ease;
}
.live-koers .koers-arrow.up { color: var(--gold-light); }
.live-koers .koers-arrow.down { color: var(--coral); }

/* Marker readouts naast de markers */
.marker-readout {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.5rem + 0.18vw, 0.7rem);
  letter-spacing: 0.08em;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 2px 5px;
  background: rgba(4, 6, 15, 0.55);
  backdrop-filter: blur(4px);
  border-left: 1px solid rgba(255, 73, 108, 0.3);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease, border-color 0.4s ease;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards 4.5s;
}
.marker-readout.flash-up { color: var(--gold-light); border-left-color: var(--gold-light); }
.marker-readout.flash-down { color: var(--coral); border-left-color: var(--coral); }

/* Curve pulse - klein bolletje dat over curve loopt */
.curve-pulse {
  filter: drop-shadow(0 0 8px rgba(232, 200, 120, 0.7));
}

/* Live data strip onderaan hero */
.live-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.5rem + 1vw, 44px);
  padding: 12px var(--pad-page);
  background: linear-gradient(180deg, transparent 0%, rgba(4, 6, 15, 0.85) 50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 0.5px solid rgba(77, 213, 208, 0.18);
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.55rem + 0.2vw, 0.78rem);
  letter-spacing: 0.06em;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards 2.8s;
}
.live-strip::-webkit-scrollbar { display: none; }
.live-strip .strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.live-strip .strip-lbl {
  color: var(--text-dim);
  font-size: 0.85em;
  letter-spacing: 0.2em;
}
.live-strip .strip-val {
  color: var(--text-bright);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
  min-width: 4em;
  text-align: right;
}
.live-strip .strip-val.flash-up { color: var(--gold-light); text-shadow: 0 0 8px rgba(232, 200, 120, 0.5); }
.live-strip .strip-val.flash-down { color: var(--coral); text-shadow: 0 0 8px rgba(255, 73, 108, 0.5); }
.live-strip .strip-arrow {
  font-size: 0.95em;
  width: 0.9em;
  transition: color 0.4s ease;
  color: var(--text-faint);
}
.live-strip .strip-arrow.up { color: var(--gold-light); }
.live-strip .strip-arrow.down { color: var(--coral); }

/* Universele flash classes */
@keyframes flashUp {
  0% { color: var(--gold-light); text-shadow: 0 0 12px rgba(232, 200, 120, 0.7); }
  100% { }
}
@keyframes flashDown {
  0% { color: var(--coral); text-shadow: 0 0 12px rgba(255, 73, 108, 0.7); }
  100% { }
}
.flash-up { animation: flashUp 0.7s ease-out; }
.flash-down { animation: flashDown 0.7s ease-out; }

/* Hero meta-row aanpassen vanwege live strip */
.hero-content {
  padding-bottom: clamp(80px, 5vw + 40px, 130px);
}

/* === STERREN === */
.star-twinkle {
  animation: twinkle 3s ease-in-out infinite;
  opacity: 0.4;
}
.hero-star-twinkle {
  animation: twinkle 3.5s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); filter: drop-shadow(0 0 3px #ededed); }
}

/* === STRAAT-HERO BOVEN ARCHIEF === */
.street-hero {
  margin: 0 0 clamp(40px, 2.5rem + 1.5vw, 70px);
  position: relative;
  border-top: 0.5px solid var(--line-dim);
  border-bottom: 0.5px solid var(--line-dim);
}
.street-svg-wrap {
  overflow: hidden;
}
.street-svg {
  width: 100%;
  height: clamp(140px, 12vw + 60px, 220px);
  display: block;
}
.house-mini {
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
  transform-box: fill-box;
}
/* Alle visible huis-elementen ontvangen events - niet alleen de hit-rect */
.house-mini .house-body,
.house-mini .hm-window,
.house-mini .house-mini-hit,
.house-mini polygon,
.house-mini path,
.house-mini rect:not(.house-mini-hit) {
  pointer-events: all;
  cursor: pointer;
}
.house-mini-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}
/* Decoratieve elementen géén events (anders blokkeren ze hover) */
.house-mini .house-spotlight,
.house-mini .house-recent-glow,
.house-mini .smoke-puff-mini,
.house-mini .house-cat,
.house-mini .cat-eye-mini {
  pointer-events: none;
}
.house-mini.is-hover, .house-mini:hover,
.house-mini.is-hover-from-list {
  transform: translateY(-6px);
}
/* Meest recente pand: GEEN extra hover effecten — heeft al permanente roze glow + kat */
.house-mini.is-recent.is-hover,
.house-mini.is-recent:hover,
.house-mini.is-recent.is-hover-from-list {
  transform: none;
}
.house-mini.is-recent.is-hover .house-body,
.house-mini.is-recent:hover .house-body,
.house-mini.is-recent.is-hover-from-list .house-body {
  /* Geen extra body-style verandering bij hover */
  fill: #0e1326;
  stroke: #2a4178;
  stroke-opacity: 0.5;
  stroke-width: 0.5;
}

/* PER-HUIS SPOTLIGHT — verborgen default, verschijnt bij hover */
.house-spotlight {
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}
.house-mini.is-hover, .house-mini:hover .house-spotlight,
.house-mini.is-hover-from-list .house-spotlight {
  opacity: 1;
}

/* Default state — rook verborgen, behalve op meest-recent waar het altijd loopt */
.house-smoke .smoke-puff-mini {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Hover: rook puffs animeren omhoog in fel teal */
.house-mini.is-hover, .house-mini:hover .house-smoke .smoke-puff-mini,
.house-mini.is-hover-from-list .house-smoke .smoke-puff-mini,
.house-mini.is-recent .house-smoke .smoke-puff-mini {
  animation: housePuff 2.4s ease-out infinite;
  filter: drop-shadow(0 0 6px rgba(77, 213, 208, 0.7));
}
.house-mini.is-hover, .house-mini:hover .smoke-puff-mini.sp1,
.house-mini.is-hover-from-list .smoke-puff-mini.sp1,
.house-mini.is-recent .smoke-puff-mini.sp1 {
  animation-delay: 0s;
}
.house-mini.is-hover, .house-mini:hover .smoke-puff-mini.sp2,
.house-mini.is-hover-from-list .smoke-puff-mini.sp2,
.house-mini.is-recent .smoke-puff-mini.sp2 {
  animation-delay: 0.8s;
}
.house-mini.is-hover, .house-mini:hover .smoke-puff-mini.sp3,
.house-mini.is-hover-from-list .smoke-puff-mini.sp3,
.house-mini.is-recent .smoke-puff-mini.sp3 {
  animation-delay: 1.6s;
}

@keyframes housePuff {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  20% {
    opacity: 0.85;
    transform: translate(2px, -8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(8px, -28px) scale(2);
  }
}

/* Hover: ramen lichten fel op teal-wit */
.house-mini.is-hover, .house-mini:hover .hm-window,
.house-mini.is-hover-from-list .hm-window {
  fill: #ffe6b8 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 3px rgba(255, 230, 184, 0.6));
}

/* Body wordt iets lichter bij hover - met teal-rand */
.house-mini.is-hover, .house-mini:hover .house-body,
.house-mini.is-hover-from-list .house-body {
  fill: #1a2548;
  stroke: var(--teal);
  stroke-opacity: 0.8;
  stroke-width: 1;
}

/* KAT op het meest recente pand */
.cat-eye-mini {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95));
  animation: catGlow 2.5s ease-in-out infinite;
}
@keyframes catGlow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
  }
}

/* Ogen knipperen kort om de paar seconden */
.cat-eyes {
  animation: catBlinkEyes 5s steps(1, end) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes catBlinkEyes {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.05); }
}

/* Body extra glow voor knalroze effect */
.cat-body {
  animation: catBreathe 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 6px rgba(255, 61, 154, 0.7));
}
@keyframes catBreathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.04, 0.98); }
}

/* Staart zwiept rustig links-rechts - met pink glow */
.cat-tail {
  animation: catTailSwish 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 61, 154, 0.7));
}
@keyframes catTailSwish {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(15deg); }
}

/* Halo pulseert in roze */
.cat-halo {
  animation: catHaloPulse 3.5s ease-in-out infinite;
  filter: blur(4px);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes catHaloPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* Aura bolletjes zweven omhoog - knalroze */
.cat-aura-1, .cat-aura-2, .cat-aura-3 {
  filter: drop-shadow(0 0 5px rgba(255, 61, 154, 1));
  opacity: 0;
}
.cat-aura-1 { animation: auraFloat 4s ease-out infinite 0s; }
.cat-aura-2 { animation: auraFloat 4s ease-out infinite 1.3s; }
.cat-aura-3 { animation: auraFloat 4s ease-out infinite 2.6s; }
@keyframes auraFloat {
  0% { opacity: 0; transform: translateY(8px) scale(0.4); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.6); }
}

/* Recent pand: aura altijd zichtbaar, ramen helderder */
.house-mini.is-recent .house-recent-glow {
  animation: recentPulse 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.house-mini.is-recent .hm-window {
  fill: #ffe6b8;
  filter: drop-shadow(0 0 2px rgba(255, 230, 184, 0.4));
}

@keyframes recentPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* HOVER TOOLTIP-CARD voor het huis */
.house-tooltip {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  background: rgba(4, 6, 15, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(77, 213, 208, 0.85);
  border-radius: 4px;
  padding: 14px 18px;
  min-width: 240px;
  max-width: 320px;
  z-index: 50;
  transform: translate(-50%, -100%);
  margin-top: -16px;
  box-shadow:
    0 8px 32px rgba(77, 213, 208, 0.25),
    0 0 0 0.5px rgba(77, 213, 208, 0.4);
  font-family: var(--font-mono);
}
.house-tooltip::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 1px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.house-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: rgba(4, 6, 15, 0.97);
  border-right: 1px solid rgba(77, 213, 208, 0.85);
  border-bottom: 1px solid rgba(77, 213, 208, 0.85);
}
.house-tooltip.visible {
  opacity: 1;
}
.house-tooltip .ht-roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--teal);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.house-tooltip .ht-roman::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(77, 213, 208, 0.3);
}
.house-tooltip .ht-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--text-bright);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.house-tooltip .ht-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 0.5px solid rgba(77, 213, 208, 0.2);
}
.house-tooltip .ht-cat {
  color: var(--coral);
}
.house-tooltip .ht-recent {
  color: var(--teal);
  font-weight: 500;
}

/* Highlighted item in archief lijst (gekoppeld aan huis-hover) */
.archive-item.is-highlighted {
  padding-left: 24px;
}
.archive-item.is-highlighted::before {
  width: 16px;
}
.archive-item.is-highlighted .archive-title-text {
  color: var(--text-bright);
}

/* === ARCHIEF — TYPOGRAFISCHE LIJST === */
.archive-section {
  padding: clamp(80px, 5rem + 3.5vw, 160px) var(--pad-page) clamp(50px, 3rem + 2.5vw, 100px);
  max-width: clamp(800px, 84vw, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.archive-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 2.5rem + 1.6vw, 72px);
  flex-wrap: wrap;
  gap: 16px;
}
.archive-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.32em;
  color: var(--coral);
  margin-bottom: clamp(12px, 0.7rem + 0.4vw, 20px);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 16px;
}
.archive-eyebrow::before {
  content: '';
  width: clamp(24px, 1.4rem + 1vw, 44px);
  height: 0.5px;
  background: var(--coral);
  opacity: 0.6;
}
.archive-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-bright);
  max-width: 22ch;
}
.archive-title em {
  font-style: italic;
  background: linear-gradient(135deg, #a08540 0%, #e8c878 50%, #d9c08a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.archive-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  color: var(--teal);
  text-transform: uppercase;
  opacity: 0.75;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0.5px solid var(--line);
}

.archive-item {
  display: grid;
  grid-template-columns: clamp(80px, 6rem + 1.5vw, 140px) 1fr clamp(80px, 6rem + 1.5vw, 140px);
  gap: clamp(24px, 1.5rem + 1.5vw, 60px);
  align-items: baseline;
  padding: clamp(20px, 1.3rem + 0.8vw, 38px) 0;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.archive-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--coral);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.archive-item:hover {
  padding-left: 24px;
}
.archive-item:hover::before {
  width: 12px;
}
.archive-item:hover .archive-title-text {
  color: var(--text-bright);
}
.archive-item:hover .archive-arrow {
  opacity: 1;
  transform: translateX(8px);
  color: var(--coral);
}
.archive-item:hover .archive-num {
  color: var(--gold-light);
}

.archive-item.is-recent {
  background: linear-gradient(90deg, rgba(255, 73, 108, 0.04) 0%, transparent 60%);
}
.archive-item.is-recent::after {
  content: 'meest recent';
  position: absolute;
  right: 0;
  top: clamp(8px, 0.5rem + 0.3vw, 14px);
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.5rem + 0.15vw, 0.7rem);
  letter-spacing: 0.22em;
  color: var(--coral);
  text-transform: uppercase;
  opacity: 0.85;
}

.archive-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.18em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.archive-num .roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.2rem);
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: none;
  margin-bottom: 2px;
  opacity: 0.8;
}
.archive-num .date {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.6rem + 0.18vw, 0.78rem);
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.archive-content {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.5rem + 0.3vw, 14px);
  min-width: 0;
}
.archive-title-text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.85rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text);
  transition: color 0.4s ease;
  margin: 0;
  max-width: 42ch;
}
.archive-meta {
  display: flex;
  gap: clamp(14px, 0.9rem + 0.4vw, 22px);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.55rem + 0.18vw, 0.72rem);
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.archive-meta .cat {
  color: var(--coral);
  opacity: 0.85;
}

.archive-end {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.55rem + 0.18vw, 0.72rem);
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-transform: uppercase;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.archive-arrow {
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem);
  color: var(--gold);
  opacity: 0.5;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) {
  .archive-item {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
  .archive-end { display: none; }
  .archive-item:hover { padding-left: 0; }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile:nth-child(2) { border-right: 0.5px solid var(--line); }
  .tile:nth-child(3) { border-left: 0.5px solid var(--line); }
}

@media (max-width: 768px) {
  .site-header { flex-wrap: wrap; gap: 8px; }
  .header-meta { font-size: 9px; }
  .hero-content {
    padding-top: 36px;
    padding-bottom: 30px;
  }
  .hero-title-line-1 { text-indent: 0; }
  .hero-numerals { display: none; }
  .hero-meta-row { flex-direction: column; align-items: flex-start; }
  .tiles-eyebrow-wrap { flex-direction: column; align-items: flex-start; }
  .tile { min-height: 240px; }
  .street-header { flex-direction: column; align-items: flex-start; }
  .site-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
}

@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { border-left: 0.5px solid var(--line) !important; }
  .tile-num-wrap .tile-num { font-size: 4rem; }
}