/* ============================================================
   FONTS — self-hosted, variable woff2 (see fonts/OFL-*.txt)
   One file per family per subset covers every weight we use:
   Montserrat 100/300/400/500, Roboto Mono 400/500.
   unicode-range means latin-ext is only fetched if a glyph
   on the page needs it.
   ============================================================ */

/* Montserrat — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-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;
}

/* Montserrat — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Mono — latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/roboto-mono-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;
}

/* Roboto Mono — latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/roboto-mono-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   EXIT — shared shell
   Layout: .masthead (beam art) + .stage (black art) + .sheet
   (white) + .site-footer (dark bar). Per page, only the inner
   content of .stage and .sheet changes.

   NOTE: url() paths below resolve relative to THIS file
   (assets/), not to the HTML that links it.
   ============================================================ */

/* --- design tokens ---------------------------------------- */
:root {
  --c-teal:        #00ae9a;   /* primary   — buttons, fills   */
  --c-teal-bright: #0deae3;   /* secondary — glow, link/CTA   */
  --c-teal-deep:   #012a24;   /* hairline borders on black    */
  --c-black:       #05090b;   /* stage fill behind the art    */
  --c-ink:         #0e1319;   /* footer bar                   */
  --c-white:       #ffffff;
  --c-body:        #2b3134;   /* copy on white                */
  --c-body-dim:    #6b7478;
  --c-invert:      #f2f6f6;   /* copy on black                */
  --c-invert-dim:  #a5b0b2;
  --c-rule:        #e2e5e5;

  --font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --focus: var(--c-teal-bright);
}

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

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

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-body);
  font: 400 1rem/1.6 var(--font-sans);
  text-wrap: pretty;
}

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

a { color: var(--c-teal); }
a:hover { color: var(--c-teal-bright); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- skip link -------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  z-index: 10;
  padding: .625rem 1.25rem;
  background: var(--c-teal);
  color: #00201c;
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: #00201c; }

/* ============================================================
   MASTHEAD — the lit beam strip
   ============================================================ */
.masthead {
  position: relative;
  background:
    linear-gradient(rgba(5, 9, 11, .35), rgba(5, 9, 11, .35)),
    url("hero-beam.jpg") center bottom / cover no-repeat,
    var(--c-black);
  color: var(--c-invert);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  min-height: 8.75rem;
  padding-block: 1.25rem;
}

/* wordmark */
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  font-weight: 100;          /* Montserrat Thin */
  font-size: clamp(2.25rem, 7.7vw, 6.5rem);  /* 104px cap matches the design */
  line-height: .9;
  letter-spacing: .12em;
  color: var(--c-invert);
  text-decoration: none;
}
.logo:hover { color: var(--c-white); }
.logo__mark { color: var(--c-teal-bright); }

/* primary navigation */
.nav { flex: 1 1 auto; }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem clamp(1.5rem, 4vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: .5rem .125rem;
  border-bottom: 2px solid transparent;
  color: var(--c-invert);
  font-size: clamp(.9375rem, 1.1vw, 1.125rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--c-teal-bright); border-bottom-color: var(--c-teal-bright); }
.nav__link--current,
.nav__link[aria-current="page"] { border-bottom-color: currentColor; }

/* studio mark, right of the nav — the PNG is the full lockup
   (spiral + "Spiraldust WebGames"), so the words live in the
   alt text rather than in the markup. */
.studio {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  opacity: .9;
  transition: opacity .15s ease;
}
.studio:hover,
.studio:focus-visible { opacity: 1; }

.studio__logo {
  display: block;
  width: auto;
  height: 4.75rem;  /* 76px — the lockup measures 58x76 in the
                       design, which is 1:1 with CSS pixels */
}

/* mobile disclosure — replace <details> with a JS button if you
   prefer aria-expanded; this works with no script at all. */
.nav-toggle { display: none; }

/* ============================================================
   STAGE — the black panel. Swap the inner content per page.
   ============================================================ */
.stage {
  background:
    url("hero-wall.jpg") center bottom / cover no-repeat,
    var(--c-black);
  color: var(--c-invert);
}

.stage__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 27rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 12vw, 7.5rem);
}

.hero { max-width: 36rem; }

.hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.6vw, 3rem);   /* tops out at 48px */
  font-weight: 300;                      /* Montserrat Light */
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--c-white);
}

.hero__text {
  margin: 0 0 2.25rem;
  max-width: 34rem;
  color: var(--c-invert-dim);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  text-align: justify;
  hyphens: auto;
}

/* --- buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: .875rem 1.5rem;
  border: 1px solid var(--c-teal);
  border-radius: 2px;
  background: rgba(0, 174, 154, .18);   /* --c-teal at 18%, sampled from the design */
  color: var(--c-teal-bright);
  font: 500 .8125rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,
.btn:focus-visible {
  background: rgba(13, 234, 227, .26);  /* lifted so hover still reads against the new fill */
  border-color: var(--c-teal-bright);
  color: var(--c-white);
}
.btn__arrow { transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid {
  border-color: var(--c-teal);
  background: var(--c-teal);
  color: #00201c;
}
.btn--solid:hover,
.btn--solid:focus-visible { background: var(--c-teal-bright); color: #00201c; }

/* ============================================================
   SHEET — the white panel. Swap the inner content per page.
   ============================================================ */
.sheet { background: var(--c-white); }

.sheet__inner { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* multi-column body copy (CSS columns, as requested) */
.prose {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.75rem);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  text-align: justify;
  hyphens: auto;
}
.prose > * { break-inside: avoid-column; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.5rem; }
.prose h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 400;
}

/* Row of game logos. Mixed intrinsic widths and no shared baseline, so
   centre them on the cross axis and let the gaps do the spacing. */
.influences {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.influences img { flex: 0 0 auto; }

/* Below this the four logos no longer fit on one line. Centre the rows:
   space-between would strand the wrapped one against the left edge. */
@media (max-width: 39rem) {
  .influences { justify-content: center; gap: 1.25rem 1.75rem; }
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--c-rule);
}

.signup__intro {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1 1 16rem;
}
.signup__icon { flex: 0 0 auto; color: var(--c-body); }
.signup__title {
  margin: 0 0 .375rem;
  font: 500 .8125rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.signup__note {
  margin: 0;
  max-width: 22ch;
  color: var(--c-body-dim);
  font: 400 .75rem/1.5 var(--font-mono);
}

.signup__form {
  flex: 2 1 20rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .25rem .25rem 1rem;
  border: 1px solid var(--c-rule);
}
.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .625rem 0;
  border: 0;
  background: transparent;
  color: var(--c-body);
  font: 400 .875rem/1.2 var(--font-mono);
}
.signup__input::placeholder { color: #a7aeb1; }
.signup__input:focus { outline: none; }
.signup__form:focus-within { border-color: var(--c-teal); }
.signup__submit { padding: .75rem 1.25rem; gap: 0; }

.social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 clamp(0rem, 2vw, 1.5rem);
  border-left: 1px solid var(--c-rule);
  list-style: none;
}
.social__link {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--c-rule);
  color: var(--c-body);
  font: 500 .8125rem/1 var(--font-mono);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
/* drop your own brand SVGs inside .social__link and delete the text */
.social__link:hover { border-color: var(--c-teal); color: var(--c-teal); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-ink);
  color: var(--c-invert-dim);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: 5.25rem;
  padding-block: 1.25rem;
  font: 400 .75rem/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin: 0; padding: 0;
  list-style: none;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--c-teal-bright); }

/* ============================================================
   BREAKPOINTS — tablet down, then phone
   ============================================================ */
@media (max-width: 62rem) {
  .masthead__inner { min-height: 7rem; }
  .nav__list { justify-content: flex-end; gap: .5rem 1.5rem; }
  .studio { display: none; }
  .prose { column-gap: 2.25rem; }
  .social { padding-left: 0; border-left: 0; }
}

@media (max-width: 48rem) {
  .masthead__inner { flex-wrap: nowrap; justify-content: space-between; }

  /* collapse the nav behind a disclosure */
  .nav-toggle {
    display: block;
    flex: 0 0 auto;
    position: relative;
  }
  .nav-toggle__summary {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .5rem .25rem;
    color: var(--c-invert);
    font: 500 .75rem/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .nav-toggle__summary::-webkit-details-marker { display: none; }
  .nav-toggle__summary::marker { content: ""; }   /* Firefox */
  .nav-toggle__bars {
    display: block;
    position: relative;
    width: 1.375rem; height: 2px;
    background: currentColor;
  }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%; height: 2px;
    background: currentColor;
  }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after  { top: 6px; }
  /* all three bars, not just the middle one — the ::before/::after
     bars paint with currentColor, so they need naming explicitly */
  .nav-toggle[open] .nav-toggle__bars,
  .nav-toggle[open] .nav-toggle__bars::before,
  .nav-toggle[open] .nav-toggle__bars::after { background: var(--c-teal-bright); }

  /* The panel is closed by default and revealed by the disclosure.
     .nav follows .nav-toggle in the DOM, so the native [open] state
     can drive it through the sibling combinator — no script needed.
     It is positioned against .masthead (the nearest positioned
     ancestor), so it drops below the whole bar rather than the
     summary. */
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    z-index: 5;
    /* opaque: at .96 the hero copy underneath stayed legible
       through the panel — in near-black values a 4% bleed is
       still a ~2x luminance ratio */
    background: var(--c-black);
    border-top: 1px solid var(--c-teal-deep);
  }
  .nav-toggle[open] ~ .nav { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1rem;
  }
  .nav__link {
    display: block;
    padding: .9375rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav__link--current,
  .nav__link[aria-current="page"] { color: var(--c-teal-bright); }

  /* Narrow crops of the same art. Both halves must swap together:
     hero-mobile.jpg is the WHOLE panel (beam + wall), so using it for
     .stage alone left the masthead's beam showing above a second beam
     at the top of the stage. */
  .masthead {
    background:
      linear-gradient(rgba(5, 9, 11, .35), rgba(5, 9, 11, .35)),
      url("hero-beam-mobile.jpg") center bottom / cover no-repeat,
      var(--c-black);
  }
  .stage {
    background:
      url("hero-wall-mobile.jpg") center bottom / cover no-repeat,
      var(--c-black);
  }
  .stage__inner { min-height: 0; }
  .hero__text, .prose { text-align: left; }
  .prose { columns: 1; }
  .signup { flex-direction: column; align-items: stretch; }
  .signup__note { max-width: none; }
  .social { justify-content: center; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}