/* Geleverde merkfonts; de bestanden staan in de map fonts/. */
@font-face {
  font-family: "All Round Gothic";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/all-round-gothic-xlight.woff") format("woff");
}
@font-face {
  font-family: "All Round Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/all-round-gothic-book.woff") format("woff");
}
@font-face {
  font-family: "All Round Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/all-round-gothic-bold.woff") format("woff");
}
@font-face {
  font-family: "Livvic";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/livvic-light.woff") format("woff");
}
@font-face {
  font-family: "Livvic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/livvic-regular.woff") format("woff");
}
@font-face {
  font-family: "Livvic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/livvic-medium.woff") format("woff");
}
@font-face {
  font-family: "Livvic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/livvic-semibold.woff") format("woff");
}
@font-face {
  font-family: "Livvic";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/livvic-italic.woff") format("woff");
}

/* ROUXE — coming soon, standalone stylesheet.
   Kleuren: rood #7E2124, achtergrond #F4EDEA, tekst #47474A. */

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


:root {
  --primary: #7e2124;
  --primary-foreground: #f4edea;
  --background: #f4edea;
  --foreground: #47474a;
  --card: #ffffff;
  --border: rgba(126, 33, 36, 0.19);
  --ring: #7e2124;
  --radius-md: 6px;
}

html {
  background-color: var(--background);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Livvic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* ROUXE — rustige typografie en de drie geleverde merkkleuren. */
.rouxe-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 0 64px;
}
.rouxe-header {
  display: flex;
  justify-content: center;
  padding-top: 28px;
}
.rouxe-logo { width: 300px; height: auto; display: block; }
.rouxe-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 0 100px;
}
.rouxe-content { width: 100%; max-width: 600px; text-align: left; }
.rouxe-title {
  font-family: "All Round Gothic", sans-serif;
  font-size: 88px;
  line-height: 1.1;
  font-weight: 200;
  letter-spacing: 0.01em;
  color: var(--primary);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}
.rouxe-signoff { margin: 34px 0 0; font-size: 16px; line-height: 1.75; }
.rouxe-footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 26px 0 29px;
  text-align: left;
}
.rouxe-footer p { margin: 0; font-family: "All Round Gothic", sans-serif; font-weight: 400; font-size: 10px; line-height: 1.8; letter-spacing: 0.12em; }
.rouxe-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.rouxe-x {
  position: absolute;
  width: min(92vw, 1080px);
  max-width: none;
  aspect-ratio: 4018 / 4263;
  height: auto;
  right: calc(-22% - 6px);
  top: -14%;
  opacity: 1;
  pointer-events: none;
}
@media (max-width: 1400px) and (min-width: 701px) {
  .rouxe-x { width: 60vw; right: -45%; top: -20%; }
}
a:focus-visible { outline: 2px solid var(--ring); outline-offset: 5px; }
::selection { background: var(--primary); color: var(--primary-foreground); }
@media (max-width: 1366px) {
  .rouxe-page { padding: 0 40px; }
  .rouxe-header { padding-top: 32px; }
  .rouxe-logo { width: 260px; max-width: 100%; }
  .rouxe-main { padding: 64px 0 96px; }
  .rouxe-content { max-width: 560px; }
  .rouxe-title { font-size: 64px; line-height: 1.12; }
  .rouxe-title span { display: block; }
  .rouxe-signoff { margin-top: 28px; text-wrap: pretty; }
  .rouxe-footer { padding: 22px 0 24px; }
  .rouxe-backdrop { bottom: 0; clip-path: none; }
  .rouxe-x {
    width: 92vw;
    right: -48vw;
    left: auto;
    height: auto;
    max-height: none;
    max-width: none;
    top: 50%;
    transform: translateY(-50%);
  }
  .rouxe-content { position: relative; }
  .rouxe-footer { position: relative; }
}
@media (min-width: 701px) and (max-width: 1366px) and (orientation: portrait) {
  .rouxe-main {
    align-items: flex-start;
    padding-top: clamp(120px, 18svh, 240px);
    padding-bottom: 160px;
  }
}
@media (min-width: 701px) and (max-width: 1366px) and (orientation: landscape) {
  .rouxe-main { padding-top: 48px; padding-bottom: 96px; }
}
@media (max-width: 700px) {
  .rouxe-page { padding: 0 24px; }
  .rouxe-header { padding-top: 24px; }
  .rouxe-logo { width: 220px; }
  .rouxe-main { padding: 48px 0 88px; }
  .rouxe-title { font-size: 44px; line-height: 1.18; }
  .rouxe-signoff { margin-top: 26px; line-height: 1.7; }
  .rouxe-backdrop { clip-path: none; }
  .rouxe-x {
    width: 100%;
    left: 70%;
    right: auto;
    top: 134px;
    height: calc(100% - 200px);
    aspect-ratio: auto;
    max-height: none;
    max-width: none;
    transform: none;
  }
  .rouxe-footer p { letter-spacing: 0.08em; }
}
@media (max-width: 360px) {
  .rouxe-logo { width: 168px; }
  .rouxe-title { font-size: 38px; }
}
/* Desktop: gecentreerde tekst, gecentreerd op het scherm. */
@media (min-width: 1367px) {
  .rouxe-main { padding: 0; }
  .rouxe-content { text-align: center; }
  .rouxe-title span { display: block; white-space: nowrap; }
}
@media (max-width: 1024px) and (max-height: 600px) {
  .rouxe-header { padding-top: 16px; }
  .rouxe-main { padding-top: 28px; padding-bottom: 56px; }
}

/* ROUXE — pop-up met het persbericht bij het landen. */
.rouxe-popup {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Het bord begint net onder het logo, zodat het woordmerk vrij blijft. */
  --rouxe-popup-top: 208px;
  --rouxe-popup-bottom: 40px;
  padding: var(--rouxe-popup-top) 24px var(--rouxe-popup-bottom);
  background: rgba(71, 71, 74, 0.14);
  overflow-y: auto;
}
.rouxe-popup-card {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 680px;
  /* Zo hoog als kan, maar het logo blijft er boven vrij staan. */
  max-height: max(200px, calc(100svh - var(--rouxe-popup-top) - var(--rouxe-popup-bottom)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 52px 56px 44px;
  color: var(--foreground);
}
/* De tekst schuift binnenin; het kruisje blijft zo altijd in beeld. */
.rouxe-popup-scroll {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
/* Op desktop breder: het persbericht mag daar zijn ruimte krijgen. */
@media (min-width: 1367px) {
  /* De kaart schuift zo hoog mogelijk op, maar blijft net onder het logo (onderkant 195px). */
  .rouxe-popup { --rouxe-popup-top: 199px; }
  .rouxe-popup-card { max-width: 1000px; padding: 56px 72px 48px; }
}
.rouxe-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--primary);
  font-family: "All Round Gothic", "Jost", sans-serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.rouxe-popup-close:hover { background: rgba(126, 33, 36, 0.09); }
.rouxe-popup-close:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.rouxe-popup-title {
  font-family: "All Round Gothic", "Jost", sans-serif;
  font-weight: 200;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--primary);
  margin: 0 0 26px;
  padding-right: 44px;
  text-wrap: balance;
}
.rouxe-popup-card p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
}
.rouxe-popup-subhead {
  font-family: "All Round Gothic", "Jost", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 30px 0 14px;
}
.rouxe-popup-quote { font-style: italic; }
.rouxe-popup-card p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .rouxe-popup {
    --rouxe-popup-top: 172px;
    --rouxe-popup-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .rouxe-popup-card { padding: 36px 22px 28px; }
  .rouxe-popup-title { font-size: 20px; line-height: 1.35; padding-right: 36px; }
  .rouxe-popup-card p { font-size: 15px; line-height: 1.7; }
  .rouxe-popup-subhead { font-size: 14px; margin-top: 24px; }
}
@media (max-width: 360px) {
  .rouxe-popup { --rouxe-popup-top: 142px; }
}