/* ---- DM Sans (self-hosted, variable) ---- */
/* Paths are relative to this stylesheet (assets/) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand-green: #2A8454;   /* base green, used as fallback */
  --ink: #ffffff;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--brand-green);
  background-image: url('slide1-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  width: 100%;
  max-width: 72rem;
  padding: 6vmin 6vw;
}

h1 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  font-size: clamp(1.45rem, 6.5vw, 3.15rem);
  overflow-wrap: break-word;
}

.nowrap { white-space: nowrap; }

p.tagline {
  margin: 0.7em auto 0;
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(0.95rem, 3.6vw, 1.7rem);
  text-wrap: balance;
}

/* Small eyebrow label above the heading (e.g. the "404" on the error page) */
.eyebrow {
  display: block;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: clamp(0.8rem, 2.6vw, 1.05rem);
  color: rgba(255, 255, 255, 0.72);
}

/* Outlined pill link, e.g. "Return home" on the error page */
.home-link {
  display: inline-block;
  margin-top: 1.8em;
  padding: 0.7em 1.6em;
  font-weight: 600;
  font-size: clamp(0.9rem, 2.6vw, 1.05rem);
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.home-link:hover,
.home-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--ink);
}

.home-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Bottom bar: tiny copyright (left) + brand wordmark (right) */
.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* baseline (not flex-end): the copyright's text baseline aligns to the logo's
     bottom edge (a replaced element's baseline), so the visible bottom of the
     text lines up exactly with the bottom of the logo at every window size.
     flex-end would align the line-box bottoms, leaving the text a few px high. */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 3.2vw, 2.75rem) clamp(1.1rem, 4vw, 3.25rem);
}

.copyright {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.brand {
  flex: none;
  width: clamp(84px, 12vw, 132px);
  height: auto;
}