/* ==========================================================================
   COGLANDS teaser overrides
   Loaded after coglands.css, which owns every token, primitive and component
   used here. This file only covers the places where the short page needs to
   behave differently from the full one. If you find yourself adding a colour
   or a font stack below, it belongs in coglands.css instead.

   1. Navigation   2. Hero   3. Premise   4. FAQ   5. "Soon" state
   6. Footer       7. Responsive
   ========================================================================== */

/* ── 1. Navigation ─────────────────────────────────────────────────────────
   The teaser has no section links, so there is no mobile menu to open and no
   hamburger. That removes the fixed panel coglands.css builds at 880px, and
   the bar becomes the same two elements at every width. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── 2. Hero ───────────────────────────────────────────────────────────────
   coglands.css caps the hero at min(100svh, 940px). On a full-screen 1080p
   browser the viewport is around 945px, so the cap wins by a few pixels and
   the hero stops just short of the fold — visible as a sliver of the next
   section. On the full page that cap is doing a real job: the hero is one of
   thirteen sections and there is a lot below it worth reaching. The teaser
   has four, and the hero is the page, so it gets the whole viewport.

   svh rather than vh: on mobile, vh is the viewport with the browser chrome
   retracted, which makes the hero taller than what you can actually see on
   load. The plain vh line above is the fallback for browsers without svh. */
.teaser .hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* ── 3. Premise ────────────────────────────────────────────────────────────
   coglands.css lays the premise out as text beside a framed screenshot. There
   is no screenshot to put here, and an empty second column reads as a broken
   image rather than as a choice, so the teaser drops to a single narrow
   measure held between two brass hairlines.

   Heading and eyebrow are centred; the body copy is not. Three centred
   paragraphs give the reader a ragged left edge to hunt for on every line,
   which costs more than the symmetry is worth. */
.premise--solo {
  border-block: 1px solid var(--hair-soft);
}

.premise__solo {
  max-width: 44rem;
  margin-inline: auto;
}

.premise__solo .eyebrow,
.premise__solo .h2 {
  text-align: center;
}

/* Short centred rule above the eyebrow: the same brass hairline language as
   the rest of the site, used once, as a section mark. */
.premise__solo .eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 1.6rem;
  background: linear-gradient(90deg, transparent, var(--brass-primary), transparent);
}

.premise__solo .h2 {
  margin-bottom: 2.5rem;
  text-wrap: balance;
}

.premise__solo p:not(.eyebrow) {
  color: var(--ink-soft);
}

/* ── 4. FAQ ────────────────────────────────────────────────────────────────
   The sticky heading in coglands.css assumes a long list scrolling past it.
   Four questions are shorter than the viewport, so it would stick, travel a
   few pixels and unstick, which reads as a jitter rather than as an effect. */
.teaser .faq__head {
  position: static;
}

/* ── 5. "Soon" state ───────────────────────────────────────────────────────
   The Discord does not exist yet, so its buttons are <button> elements that
   go nowhere. The job of this state is to look deliberate rather than broken:
   on hover the fill powers down from lit purple to the dark shade, and the
   label slides up to be replaced by "Opening soon".

   Reading it as "powering down" rather than "greying out" is the point. The
   page is about industry, and a machine that is built but not yet running is
   a better metaphor here than a disabled form control. */
.btn--soon {
  cursor: not-allowed;
}

/* The lift on .btn:hover promises a click that leads somewhere. */
.btn--soon:hover,
.btn--soon:active {
  transform: none;
}

.btn--purple.btn--soon:hover,
.btn--purple.btn--soon:focus-visible {
  --btn-bg: var(--purple-dark);
  box-shadow: 0 0 0 1px rgba(201, 145, 240, .22), 0 8px 22px -16px rgba(141, 70, 199, .7);
}

/* Both labels occupy the same grid cell, so the button is sized to the wider
   of the two and does not resize mid-hover. overflow clips the one sliding
   out of view. */
.btn__swap {
  display: grid;
  overflow: hidden;
  text-align: center;
}

.btn__label,
.btn__alt {
  grid-area: 1 / 1;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}

.btn__alt {
  transform: translateY(100%);
  opacity: 0;
  color: var(--brass-light);
}

.btn--soon:hover .btn__label,
.btn--soon:focus-visible .btn__label {
  transform: translateY(-100%);
  opacity: 0;
}

.btn--soon:hover .btn__alt,
.btn--soon:focus-visible .btn__alt {
  transform: none;
  opacity: 1;
}

/* Touch has no hover, so a state only reachable by hovering is a state a
   phone user never sees — they would tap a live-looking button and get
   nothing. There, the button reads "Opening soon" permanently instead. */
@media (hover: none) {
  .btn--soon .btn__label {
    display: none;
  }

  .btn--soon .btn__alt {
    transform: none;
    opacity: 1;
  }
}

/* Footer equivalent: not a link, since there is nowhere to go. */
.footer__soon {
  color: var(--ink-dim);
  font-size: .9375rem;
}

.footer__soon em {
  margin-left: .5rem;
  font: 500 .625rem var(--mono);
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-primary);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: .15rem .4rem;
  vertical-align: 1px;
}

/* ── 6. Footer ─────────────────────────────────────────────────────────────
   Two link columns instead of three, and they sit at their natural width
   rather than stretching across a 1.2fr track: two columns spread over that
   much space leaves a gap wide enough to look like a third column is missing. */
.footer__inner--teaser {
  grid-template-columns: 1fr auto;
  align-items: start;
}

.footer__cols--teaser {
  grid-template-columns: repeat(2, minmax(8rem, auto));
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* ── 7. Responsive ─────────────────────────────────────────────────────────
   coglands.css collapses .footer__inner to one column at 880px; the teaser's
   own grid needs the same treatment at the same breakpoint. */
@media (max-width: 880px) {
  .footer__inner--teaser {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  /* coglands.css makes .btn full-width here, which is right for the stacked
     hero actions and wrong for a button sitting in the nav bar. */
  .nav__actions .btn {
    width: auto;
  }

  .footer__cols--teaser {
    grid-template-columns: repeat(2, 1fr);
  }
}