/* MAXX architecten x WebAthletes: design tokens + shared styles.
   Colors, type and shapes are taken from the MAXX handoff README (Stijl section):
   antraciet + papier, terracotta accent, square corners, 1px lines. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root {
  /* Colors */
  --paper: #f5f3ef;
  --white: #ffffff;
  --ink: #26282a;
  --footer: #1e2022;
  --body-2: #4a4d50;
  --muted: #6d6f71;
  --line: #dcd8d0;
  --line-ph: #d3cec5;
  --line-dark: #45484b;
  --on-dark: #c9c7c2;
  --on-dark-muted: #b3b1ac;

  /* Accent: terracotta by default. Switch both to messing (#86662a / #d4b574)
     to try the alternative accent from the handoff. */
  --acc: #a4492e;
  --acc-l: #e0a184;

  /* Type */
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Shape */
  --container: 1320px;
  --gutter: clamp(1.2rem, 4vw, 3rem);
  --section-pad: clamp(3.5rem, 7vw, 6.5rem);

  --stripes: repeating-linear-gradient(135deg, #e7e3dc 0 14px, #ece9e3 14px 28px);
  --stripes-dark: repeating-linear-gradient(135deg, #303235 0 14px, #34373a 14px 28px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: clip;
}
a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--ink); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--acc { color: var(--acc); }
.label--on-dark { color: var(--on-dark-muted); }

.h-display {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-wrap: balance;
}
.acc { color: var(--acc); }
.acc-l { color: var(--acc-l); }

/* Responsive images: picture fills its box, the <img> covers it. */
picture { display: block; height: 100%; }
picture img { width: 100%; height: 100%; object-fit: cover; }

/* Striped placeholder (handoff "Placeholders") */
.ph {
  position: relative;
  background: var(--stripes);
  border: 1px solid var(--line-ph);
  display: grid;
  place-items: center;
}
.ph__inner { text-align: center; display: grid; gap: .4rem; padding: 1rem; }
.ph__title { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--body-2); }
.ph__sub { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

/* A real (Unsplash) photo standing in for the client's own work. Always
   carries a visible "Sfeerbeeld · Unsplash" tag so nobody mistakes it for a MAXX
   realisation. */
.photo { position: relative; overflow: hidden; background: #e7e3dc; border: 1px solid var(--line-ph); }
.photo__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  padding: .5rem .75rem;
  line-height: 1.2;
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Control dock (device preview), present on every page, fixed to the real
   browser viewport. Same behaviour as the Bar Frans dock; square MAXX styling. */
.control-dock {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 3px;
}
.control-dock__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.control-dock__btn:hover { background: var(--paper); }
.control-dock__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* On the demo's mobile layout the fixed call bar owns the bottom edge. */
@media (max-width: 1120px) {
  .page-demo .control-dock { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .control-dock { display: none; }
}

/* Device frame: a real <iframe> of this same URL at phone/tablet size, so
   vw-based sizing and the demo's 1120px breakpoint resolve correctly. */
html[data-device] body { overflow: hidden; }
.device-stage { display: none; }
html[data-device] .device-stage {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #e7e3dc;
  padding: 2rem;
}
.device-frame {
  background: var(--ink);
  border-radius: 40px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(38, 40, 42, .45);
}
.device-frame__screen { flex: 1; background: var(--paper); overflow: hidden; border-radius: 28px; }
.device-frame__screen iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); }
.device-frame__home {
  display: block;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: #5a5d60;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.device-stage--mobile .device-frame { width: 390px; height: min(760px, 84vh); }
.device-stage--tablet .device-frame { width: min(844px, 92vw); height: min(900px, 84vh); border-radius: 26px; padding: 12px; }
.device-stage--tablet .device-frame__screen { border-radius: 16px; }
.device-stage--tablet .device-frame__home { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #5a5d60; background: none; }

/* Access-code gate (same flow as Bar Frans, MAXX styling) */
.gate-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.5rem; background: var(--paper); }
.gate-overlay[hidden] { display: none; }
.gate-box { width: 100%; max-width: 380px; text-align: center; background: var(--white); border: 1px solid var(--ink); padding: 2.2rem 1.8rem 1.6rem; font-family: var(--font-sans); }
.gate-box__mark { font-size: 1rem; color: var(--body-2); margin-bottom: 1.4rem; }
.gate-box__mark b { font-weight: 700; letter-spacing: .14em; color: var(--ink); margin-right: .2em; }
.gate-box h1 { font-weight: 500; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.gate-box p { font-family: var(--font-serif); color: var(--body-2); margin-top: .6rem; }
.gate-box__inputs { display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.gate-box__digit { width: 52px; height: 60px; text-align: center; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }
.gate-box__digit:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.gate-box__error { color: var(--acc) !important; font-family: var(--font-sans) !important; font-size: .86rem; font-weight: 600; min-height: 1.3em; margin-top: 1rem !important; }