/* ==========================================================================
   II Alpha 30 homepage splash — TEMPORARY (launch 1 October 2026)

   Owns every style for the splash band on index.html: a wrapper
   (.alpha30-splash) holding the band (.alpha30-band). The wrapper sits ABOVE
   the nav and fills the first viewport below the site-wide sticky bar, which
   is injected (with its own styles) by alpha30-bar.js and publishes its height
   as --alpha30-bar-h. Nothing else on the site uses this file.
   The band's two buttons reuse .btn-primary / .btn-ghost from index.html.

   Switch off : set  data-alpha30-splash="off"  on <body> in index.html.
   Remove     : delete the three ALPHA30-SPLASH blocks and the body attribute
                in index.html, then delete this file. See CLAUDE.md.
   ========================================================================== */

/* ── Kill switch: anything but "on" hides the whole splash ─────────────── */
body:not([data-alpha30-splash="on"]) .alpha30-splash {
  display: none !important;
}

/* ── Wrapper: fills the first viewport under the sticky bar ───────────── */
.alpha30-splash {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--alpha30-bar-h, 0px));
  min-height: calc(100dvh - var(--alpha30-bar-h, 0px)); /* mobile browsers: exclude the dynamic toolbar */
}
.alpha30-band {
  flex: 1 0 auto;
  display: flex;
  overflow-x: clip; /* the slogan's α overprints past its box; never let it widen the page */
}
.alpha30-band > .container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* The main row takes whatever height is spare and centres its content in it;
   the header row stays at the top, the method points at the bottom. */
.alpha30-top {
  flex: 1 0 auto;
  align-content: center;
}

/* ── Splash band (first thing on the page after the bar, above the nav) ── */
.alpha30-band {
  background: var(--teal);
  color: #fff;
}
.alpha30-band > .container {
  padding-top: 22px;
  padding-bottom: 56px;
}

/* Header row: the band stands in for the masthead on the first screen, so it
   carries the brand mark and a way past itself to the regular nav. */
.alpha30-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.alpha30-logo img {
  display: block;
  height: 48px;
}
.alpha30-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.alpha30-skip svg {
  flex-shrink: 0;
}
.alpha30-skip:hover {
  color: #fff;
}
.alpha30-skip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* Zero-height target for the "Continue to site" link: lands the nav at the top */
.alpha30-site-anchor {
  display: block;
  height: 0;
}

/* Top row: copy + worked example */
.alpha30-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 64px;
  align-items: center;
}
.alpha30-eyebrow {
  font-size: 33px; /* 11px + 200% */
  font-weight: 900; /* Roboto Black (loaded in the fenced head block) */
  line-height: 1.1;
  letter-spacing: 0.08em; /* tighter than the 11px eyebrow: wide tracking looks gappy in Black at this size */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 20px;
}
.alpha30-headline {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 300;
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 22px;
}
.alpha30-body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin-bottom: 32px;
}
.alpha30-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Slogan box: an oversized Greek alpha (GFS Didot) at 50% white is overprinted
   across the box AND the band around it (the box does not clip it); the slogan
   sits in front in Roboto Black, sized relative to the box so it is as large
   as will fit without overflowing. */
.alpha30-slogan {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: 300px;
  padding: 36px 40px;
  background: rgba(10, 35, 41, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}
.alpha30-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%); /* the letter sits low in its em box; lift it to centre visually */
  font-family: "GFS Didot", "Times New Roman", serif;
  font-size: 1000px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
  pointer-events: none;
}
.alpha30-slogan-text {
  position: relative;
  font-size: clamp(56px, 5.5vw, 80px); /* fallback for browsers without container units */
  font-size: 19cqw; /* of the box's content width: ~75px in the 475px desktop box, "quartile" still fits one line */
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(10, 35, 41, 0.45);
}
.alpha30-slogan-text em {
  font-style: normal;
  color: var(--ochre);
}

/* Bottom row: method points + webinar */
.alpha30-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: 36px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.alpha30-point h3,
.alpha30-webinar h3 {
  font-size: 13.65px; /* 19.5px − 30% */
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 8px;
  text-wrap: balance; /* fallback where `pretty` is unsupported */
  text-wrap: pretty;  /* no single-word last lines */
}
.alpha30-point p,
.alpha30-webinar p {
  font-size: 12.74px; /* 18.2px − 30% */
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  text-wrap: balance;
  text-wrap: pretty;
}
.alpha30-webinar {
  background: rgba(10, 35, 41, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 20px 22px;
}
.alpha30-webinar a {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.alpha30-webinar a:hover {
  text-decoration-thickness: 2.5px;
}
.alpha30-webinar a:focus-visible,
.alpha30-band .btn-primary:focus-visible,
.alpha30-band .btn-ghost:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .alpha30-top {
    gap: 44px;
  }
  .alpha30-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (max-width: 860px) {
  .alpha30-band > .container {
    padding-top: 18px;
    padding-bottom: 56px;
  }
  .alpha30-head {
    margin-bottom: 36px;
  }
  .alpha30-logo img {
    height: 42px;
  }
  .alpha30-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .alpha30-body {
    max-width: none;
  }
  .alpha30-eyebrow {
    font-size: 26px;
  }
  .alpha30-slogan {
    min-height: 260px;
  }
  .alpha30-glyph {
    font-size: 760px;
  }
  .alpha30-bottom {
    margin-top: 44px;
    padding-top: 32px;
  }
}
@media (max-width: 560px) {
  .alpha30-bottom {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .alpha30-slogan {
    min-height: 220px;
    padding: 28px 24px;
  }
  .alpha30-glyph {
    font-size: 640px;
  }
  .alpha30-actions .btn-primary,
  .alpha30-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}