/* ============================================================================
   CHAPTER4 · COMING-SOON  —  developer handoff stylesheet
   ----------------------------------------------------------------------------
   The visual design is FINAL and approved. This file re-expresses the approved
   ".CS" splash 1:1 with named design tokens so it can be rebuilt exactly.
   Structure, values and breakpoints mirror the approved version verbatim — the
   only change is that the page now fills the viewport (real coming-soon page)
   instead of living inside a 16:9 mock frame, so the original container-queries
   become plain viewport media-queries. See REDLINE.md for the token table,
   intentional exceptions and per-component measurements.
   ========================================================================== */
/* ----------------------------------------------------------------------------
   FONTS
   ------------------------------------------------------------------------- */
/* inter-tight-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-tight-v9-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-tight-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-tight-v9-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-tight-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-tight-v9-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-tight-800 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/inter-tight-v9-latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v20-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-v20-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jetbrains-mono-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/jetbrains-mono-v24-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jetbrains-mono-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/jetbrains-mono-v24-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ----------------------------------------------------------------------------
   DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* ---- Spacing · 4px base scale (4·8·12·16·24·32·48·64·96·128) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ---- Radii & borders ------------------------------------------------- */
  --radius-pill: 999px;        /* badge, button            */
  --radius-circle: 50%;        /* team photos              */
  --border-hairline: 1px;

  /* ---- Colours (read from the design; near-duplicates merged) ---------- */
  --color-bg:         #0A0A0A;
  --color-on-accent:  #0C0C0C;                 /* text on green            */
  --color-text:       #FFFFFF;
  --color-accent:     #3DD45A;                 /* Chapter4 green           */
  --color-accent-rgb: 61, 212, 90;
  --color-text-soft:  rgba(255,255,255,.82);   /* badge label              */
  --color-text-mute:  rgba(255,255,255,.60);   /* role micro-label         */
  --color-text-faint: rgba(255,255,255,.40);   /* "·" / "|" separators     */
  --color-hairline:   rgba(255,255,255,.25);   /* glass borders            */
  --color-glass:      rgba(255,255,255,.05);   /* glass fills              */

  /* ---- Effects --------------------------------------------------------- */
  --shadow-btn-hover: 0 16px 34px -14px rgba(0,0,0,.70);
  --blur-bg: 18px;
  --blur-glass: 6px;

  /* ---- Typography · families ------------------------------------------- */
  --font-display: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Typography · weights / line-heights ----------------------------- */
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800;
  --lh-hero: 0.92; --lh-tight: 1.1; --lh-base: 1.5;

  /* ---- Typography · fluid sizes (endpoints snapped to 12·14·16·18·20·24·32·40·48) */
  --fs-hero:    clamp(48px, 7vw, 132px);
  --fs-tagline: clamp(17px, 1.95vw, 28px);
  --fs-btn:     clamp(14px, 1.10vw, 16px);
  --fs-badge:   clamp(10px, 0.90vw, 12px);
  --fs-name:    clamp(13px, 1.05vw, 15.5px);
  --fs-contact: clamp(12px, 0.92vw, 14px);
  --fs-role:    clamp(8.5px, 0.72vw, 10px);
}

/* ----------------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent); color: var(--color-on-accent); }
img { display: block; max-width: 100%; }

/* ----------------------------------------------------------------------------
   LAYOUT  ·  full-bleed dark hero, everything centred
   ------------------------------------------------------------------------- */
.coming-soon {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
.coming-soon__bg {
  position: absolute; inset: -5%;
  background: url('images/hero.webp') center 40% / cover no-repeat;
  filter: blur(var(--blur-bg)) brightness(.60) saturate(.95);
  transform: scale(1.1);
}
.coming-soon__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 34%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.74) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.72) 100%);
}
.coming-soon__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(var(--space-6), 3.2vw, 52px) clamp(var(--space-6), 3.6vw, 58px);
}

/* the single centred column that holds everything */
.cs-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   COMPONENT · badge
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: clamp(var(--space-3), 1.4vw, 18px);
  padding: var(--space-2) 18px var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-badge);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  background: var(--color-glass);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-glass));
}
.badge__dot {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--color-accent);
  animation: badge-pulse 1.9s ease-out infinite;
}
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--color-accent-rgb), .55); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--color-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--color-accent-rgb), 0); }
}

/* ----------------------------------------------------------------------------
   COMPONENT · brand wordmark + tagline
   ------------------------------------------------------------------------- */
.brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.brand__accent { color: var(--color-accent); }

.tagline {
  margin: clamp(var(--space-3), 1.4vw, 20px) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-tagline);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.tagline__accent { color: var(--color-accent); }

/* ----------------------------------------------------------------------------
   COMPONENT · CTA button
   ------------------------------------------------------------------------- */
.cta-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4);
  margin-top: clamp(22px, 2.4vw, var(--space-8));
}
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 15px 26px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-btn);
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-glass);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-pill);
}
.btn--primary {
  font-weight: var(--fw-extrabold);
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn--primary:hover {
  background: var(--color-text); border-color: var(--color-text);
  color: var(--color-on-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

/* ----------------------------------------------------------------------------
   COMPONENT · team / contacts  (3 equal blocks)
   ------------------------------------------------------------------------- */
.team { display: flex; justify-content: center; margin-top: clamp(var(--space-12), 5.2vw, 76px); }
.team__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: stretch;
  gap: clamp(20px, 2.16vw, 38px);
}
.person {
  display: flex; align-items: center;
  gap: clamp(var(--space-3), 1.2vw, 17px);
  text-align: left;
}
.person__photo {
  align-self: center;
  flex-shrink: 0;
  width: clamp(72px, 6.4vw, 88px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: var(--radius-circle);
  border: var(--border-hairline) solid var(--color-hairline);
  background-size: 195%;
  background-position: center 18%;
  background-repeat: no-repeat;
}
.person__photo--sigrid   { background-image: url('images/team/sigrid.webp'); }
.person__photo--boris    { background-image: url('images/team/boris.webp'); }
.person__photo--heinisch { background-image: url('images/team/heinisch.webp'); }

.person__body {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(var(--space-1), 0.6vw, var(--space-2));
  width: max-content;
  max-width: 214px;
  text-align: left;
}
.person__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-name);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  color: var(--color-accent);
  white-space: nowrap;
}
.person__name .fn { padding-right: .4em; }

.person__role {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-role);
  line-height: var(--lh-base);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}
.person__role .brk { display: block; height: 0; }   /* line-break on desktop */

.person__contacts {
  margin: var(--space-1) 0 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.contact {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-contact);
  letter-spacing: -0.005em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.contact:hover { text-decoration: underline; }

/* ============================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   • Desktop   > 1024px  — full hero, team in a 3-up row
   • Tablet  641–1024px  — same layout, tighter team gaps & body width
   • Mobile    ≤ 640px   — content flows vertically; team = centred stack
   • ≤ 600px / ≤ 420px   — CTA tap-padding & small-phone tightening
   ========================================================================== */

/* ---- Tablet: relax the 3-up team row ------------------------------------- */
@media (max-width: 1024px) {
  .team__list { gap: clamp(14px, 2.16vw, 25px); }
  .person__body { width: max-content; max-width: 200px; }
}

/* ---- Mobile: stack everything, centre the contact cards ------------------ */
@media (max-width: 640px) {
  .coming-soon__inner {
    position: relative; inset: auto;
    min-height: 100dvh;
    padding: clamp(var(--space-12), 11vw, 72px) clamp(var(--space-6), 6.5vw, var(--space-8));
  }
  .cs-center { width: 100%; max-width: 480px; }

  .badge { font-size: 11px; letter-spacing: .28em; padding: 7px 15px 7px 13px; }
  .brand { font-size: clamp(38px, 13.5vw, 104px); max-width: 100%; }
  .tagline { font-size: clamp(18px, 5.2vw, 26px); margin-top: clamp(var(--space-3), 3vw, 18px); }

  /* CTA hugs its content, centred */
  .cta-row { width: 100%; margin-top: clamp(22px, 6vw, var(--space-8)); }
  .btn { width: auto; justify-content: center; text-align: center; padding: var(--space-4) 26px; font-size: 15px; }

  /* team → centred vertical stack */
  .team { width: 100%; margin-top: clamp(14px, 3.5vw, 22px); }
  .team__list {
    flex-direction: column; align-items: center;
    width: 100%; max-width: 480px;
    gap: clamp(22px, 5.5vw, var(--space-8));
    padding-top: clamp(var(--space-2), 2.5vw, 14px);
  }
  .person { flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 100%; }
  .person__photo { align-self: center; width: clamp(64px, 18vw, 84px); height: auto; }
  .person__body { width: auto; max-width: none; align-items: center; text-align: center; gap: 5px; }
  .person__name { font-size: 16px; white-space: normal; }

  /* role on ONE line, parts joined by " · " */
  .person__role { font-size: 9.5px; }
  .person__role .brk { display: inline; height: auto; }
  .person__role .brk::before { content: " · "; color: var(--color-text-faint); }

  /* email + phone on ONE line, joined by " | " */
  .person__contacts {
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0; margin-top: var(--space-1);
  }
  .contact { font-size: 13px; white-space: normal; }
  .contact + .contact::before { content: "|"; color: var(--color-text-faint); margin: 0 9px; }
}

/* ---- ≤600px: a touch more tap-padding on the button ---------------------- */
@media (max-width: 600px) { .btn { padding: var(--space-4) var(--space-6); } }

/* ---- ≤420px: small-phone tightening -------------------------------------- */
@media (max-width: 420px) {
  .coming-soon__inner { padding: 44px 18px 48px; }
  .person__photo { width: clamp(60px, 18vw, 72px); }
}