/* ==========================================================================
   Integra Praxis Berlin — Holding Page
   Petrol & Bronze · Source Serif 4 (display) / Inter (body)
   Confirmed running brand system per
   Integra_Brand_Strategy_Phase8_Visual_Identity.md §4 — Source Serif 4 for
   all headline/display text, Inter for body/UI, no third typeface. The
   logo's own baked-in wordmark (Playfair Display + Allura) is a separate
   asset and isn't part of this system. */

:root {
  --petrol: #153B3B;
  --bronze: #A9713D;
  --charcoal: #2B2B2B;
  --grey: #6B6B6B;
  --cream: #EDEAE1;
  --white: #FFFFFF;

  --font-display: 'Source Serif 4', serif;
  --font-body: 'Inter', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Holding page layout ----
   Everything centred on this page, by exception — the shared Visual
   Identity system calls for left-aligned body text on the multi-page
   sites, but a single-screen holding page with no body copy to read is
   a deliberate, narrow exception to that rule. */
.holding-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  gap: var(--space-md);
}

.logo {
  width: 100%;
  max-width: 420px;
}

.tagline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--petrol);
  line-height: 1.3;
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem);
  max-width: 32ch;
}

.deck {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  color: var(--charcoal);
  font-size: clamp(1.25rem, 1.6vw + 0.95rem, 1.75rem);
  max-width: 40ch;
}

/* Status banner — same Petrol-background/white-bold-text pattern as YLP's
   "Opening soon in Berlin." banner (see YLP's .opening-banner), reused here
   in normal document flow at this point in the page rather than pinned to
   the top, since this page has no header for it to sit under. Inter, not
   Source Serif 4 — this is a UI/status element, not a headline, same
   reasoning YLP applied to its own banner text. */
.status-banner {
  background: var(--petrol);
  padding: 0.75rem var(--space-md);
}

.status-banner__text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
}

.credentials {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.credentials-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--petrol);
  font-size: 1.25rem;
}

.credentials-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.credentials-list li {
  color: var(--charcoal);
  font-size: 0.9375rem;
}

/* Bronze on white is AA-large only (4.1:1 per the Visual Identity
   accessibility audit) — kept at bold 20px so the colour stays within
   the size band where it's actually compliant, never used this small
   and unbolded elsewhere. */
.cross-link {
  margin-top: var(--space-sm);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bronze);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cross-link:hover,
.cross-link:focus-visible {
  color: var(--petrol);
}