/* ============================================================================
   Coming-soon landing page — shared stylesheet
   ----------------------------------------------------------------------------
   Static. No build step. No external requests. No JavaScript.

   To re-skin for a client, edit ONLY the token block marked "CLIENT TOKENS"
   below. Everything after that block is layout and should stay identical
   across clients, so a fix made once can be copied to every client folder.
   ========================================================================== */

/* --------------------------------------------------------------------- fonts
   Self-hosted Barlow, latin subset only. The latin subset (U+0000-00FF)
   already covers every Dutch diacritic we need: e-diaeresis, i-diaeresis,
   e-acute, u-diaeresis. No latin-ext download required.

   Licensed SIL OFL 1.1 — assets/fonts/OFL.txt MUST ship alongside the fonts.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.woff2") format("woff2");
}

/* ============================================================================
   CLIENT TOKENS — the only block to edit per client
   ========================================================================== */
:root {
  /* Surface and text.
     Set --bg to the logo's own background colour, sampled from the logo file,
     so a logo delivered with a baked-in background blends in seamlessly
     instead of sitting in a visible rectangle. */
  /* The values below are the first real client (Hogeland Occasions) kept as a
     working reference. Replace all of them per client. */
  --bg:          #333438;
  --bg-elev:     #3b3c41;
  --fg:          #f3f4f5;
  --muted:       #a8aaae;   /* keep at or above 4.5:1 against --bg */

  /* Two different jobs, deliberately two tokens:
     --border  delineates an interactive component (the contact chips), so
               WCAG 1.4.11 applies and it must clear 3:1 against --bg.
     --rule    is a purely decorative divider and is exempt, so it can stay
               as quiet as the design wants. */
  --border:      #83848a;
  --rule:        #4a4b50;

  /* Brand.
     --brand      the true logo colour. Fills and rules only; white text
                  may sit on top of it, but it is not itself a text colour.
     --brand-text a lightened variant, for brand-coloured TEXT on --bg.
                  A logo red is almost always too dark to be legible here.
     --brand-glow the decorative wash behind the lockup. Pre-multiplied rgba
                  rather than a hex, so the gradient needs no color-mix() and
                  therefore no fallback branch.
     Verify the first two with tools/check-contrast.py before shipping. */
  --brand:       #d12020;
  --brand-text:  #f06a6a;
  --brand-glow:  rgba(209, 32, 32, 0.16);

  /* Type */
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-body);

  /* Metrics */
  --maxw:   44rem;
  --radius: 999px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   Page frame
   ========================================================================== */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh; /* progressive: avoids the mobile URL-bar height jump */
  display: grid;
  grid-template-rows: 1fr auto;

  background-color: var(--bg); /* always explicit, never the UA default */
  color: var(--fg);
  border-top: 3px solid var(--brand);

  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 8vh, 6rem) var(--gutter);
  overflow: hidden; /* clips the glow */
}

/* Soft brand glow behind the lockup. Purely decorative.
   The radius is viewport-aware rather than a fixed rem size: at a fixed size
   the glow is a pleasant vignette on a desktop viewport but swallows a 360px
   phone screen whole, tinting the entire page red. The clamp keeps it at
   roughly 1.5x the lockup width at every size, matching the logo's own
   clamp(13rem, 46vw, 22rem). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    clamp(20rem, 72vw, 40rem) clamp(12rem, 46vw, 24rem) at 50% 24%,
    var(--brand-glow),
    transparent 72%
  );
}

.hero__inner {
  position: relative; /* lifts content above the glow */
  width: 100%;
  max-width: var(--maxw);
  text-align: center;
}

.logo {
  margin: 0 auto clamp(1.75rem, 5vh, 2.75rem);
  width: clamp(13rem, 46vw, 22rem);

  /* Width alone is not a sufficient bound. In a short landscape viewport the
     46vw term makes the lockup large while there is almost no height to spend,
     so cap the vertical footprint too. object-fit keeps this client-agnostic:
     it works for any logo aspect ratio without hard-coding one here. */
  max-height: 30vh;
  object-fit: contain;
}

.rule {
  width: 3.5rem;
  height: 2px;
  margin: 0 auto clamp(1.5rem, 4vh, 2.25rem);
  border: 0;
  background: var(--brand);
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance; /* progressive enhancement */
}

/* Accent word inside the headline. <em> is used for the semantics of
   emphasis; the italic is deliberately removed. */
.title em {
  font-style: normal;
  color: var(--brand-text);
}

.lead {
  margin: 0 auto;
  max-width: 42ch;
  color: var(--muted);
  text-wrap: pretty;
}

/* ============================================================================
   Contact chips.
   If a client has no published contact details, remove the <ul> from that
   client's index.html and leave these rules in place. Keeping every
   stylesheet byte-identical across clients is what makes a fix portable;
   the unused rules cost well under a kilobyte.
   ========================================================================== */
.contact {
  margin: clamp(2rem, 5vh, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    transform 0.18s ease;
}

/* Hover uses --brand-text, not --brand: the raw logo red is too dark against
   the chip surface for the state change to be clearly visible. The lift is a
   second, non-colour cue. */
.chip:hover,
.chip:focus-visible {
  border-color: var(--brand-text);
  background: var(--bg);
  transform: translateY(-1px);
}

.chip__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  opacity: 0.75;
}

/* Visible keyboard focus on every interactive element. */
:where(a, button):focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================================
   Footer
   ========================================================================== */
.footer {
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer p {
  margin: 0;
}

.footer a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.footer a:hover {
  color: var(--fg);
}

/* ============================================================================
   Short viewports — phone and tablet landscape
   ----------------------------------------------------------------------------
   The only media query in this stylesheet, and it keys on HEIGHT, not width.
   Everything else is fluid on viewport width, which is the right default but
   cannot see that a 740x360 landscape phone has plenty of width and almost no
   height. Without this the stack overflowed by ~129px there: the lead was cut
   off and the footer sat below the fold.

   The vh terms inside the clamp() gaps do not solve it on their own, because
   at 360px tall each vh term falls below its own rem floor and the floor wins.
   ========================================================================== */
@media (max-height: 620px) and (min-width: 30rem) {
  .hero {
    padding-block: clamp(1rem, 4vh, 2rem);
  }

  .logo {
    max-height: 22vh;
    margin-bottom: clamp(0.75rem, 3vh, 1.25rem);
  }

  .rule {
    margin-bottom: clamp(0.75rem, 3vh, 1.25rem);
  }

  .eyebrow {
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
  }

  .title {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    margin-bottom: 0.5rem;
  }

  .lead {
    font-size: 0.9375rem;
    max-width: 58ch;
  }

  .contact {
    margin-top: clamp(1rem, 3vh, 1.5rem);
  }

  .footer {
    padding-block: 0.8rem 1rem;
  }
}

/* ============================================================================
   Entrance animation — only when motion is welcome
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .reveal:nth-child(1) { animation-delay: 0.05s; }
  .reveal:nth-child(2) { animation-delay: 0.14s; }
  .reveal:nth-child(3) { animation-delay: 0.20s; }
  .reveal:nth-child(4) { animation-delay: 0.26s; }
  .reveal:nth-child(5) { animation-delay: 0.32s; }
  .reveal:nth-child(6) { animation-delay: 0.38s; }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ============================================================================
   Print — flatten to something ink-friendly
   ========================================================================== */
@media print {
  body {
    background: #fff;
    color: #000;
    border-top-color: #000;
  }
  .hero::before { display: none; }
  .chip {
    border-color: #999;
    background: #fff;
    color: #000;
  }
  .footer {
    border-top-color: #999;
    color: #000;
  }
}