/* Stratagem Software site styles. Colors, type and scale come from
   tokens.css, a copy of docs/brand/tokens.css. */

/* Self-hosted fonts, per the brand guidelines. Licenses sit beside the files. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-black);
  color: var(--color-bone);
  font: var(--type-body);
}

::selection {
  background: var(--color-bone);
  color: var(--color-black);
}

p { text-wrap: pretty; }

/* Links stay neutral: Bone text, a Slash Gray underline that turns Bone on
   hover, and a visible focus ring. Never prism colors. */
a {
  color: var(--color-bone);
  text-decoration: underline;
  text-decoration-color: var(--color-slash-gray);
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-color: var(--color-bone); }

a:focus-visible {
  outline: 2px solid var(--color-bone);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Captions and section labels. The // is Slash Gray; the words are Mist. */
.caption {
  display: block;
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-mist);
}

.slashes { color: var(--color-slash-gray); }

/* Header bar: primary lockup top left, 28px tall, navigation on the right,
   a Graphite rule beneath. The padding and gap keep the clear space (half
   the symbol's height, 14px) free. */
.site-header { border-bottom: 1px solid var(--color-graphite); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}

.site-nav a {
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-mist);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--color-bone); }

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

.site-header img {
  display: block;
  width: auto;
  height: 28px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The hero takes any spare height, so the footer stays at the bottom. */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 2.5rem 3.5rem;
}

/* Split hero: text on the left, the symbol large on the right as artwork.
   The name is already in the header, so the symbol stands alone here, and
   the column gap keeps the // caption well clear of it. */
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.lead {
  max-width: 34rem;
  margin-top: 1.5rem;
}

/* Narrow screens: the homepage drops the header bar and the hero opens
   with the full horizontal lockup instead. Wide screens: the header carries
   the lockup and the hero shows the symbol alone, as artwork. */
.home .site-header,
.site-nav { display: none; }

.hero-mark {
  display: block;
  order: -1;
}

.hero-mark img {
  display: block;
  width: min(100%, 22rem);
  height: auto;
}

/* Section bands: a label column and a content column on wide screens. */
.split {
  display: grid;
  gap: 1.25rem 4rem;
  align-items: baseline;
}

/* Bands below the hero alternate Charcoal and Black. */
.standards, .name {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.standards { background: var(--color-charcoal); }

.standards h2 {
  font: var(--type-heading);
  letter-spacing: var(--tracking-display);
}

.standards p { max-width: 36rem; }

/* Heading size, body weight: a statement, not a paragraph. */
.name-text {
  max-width: 34rem;
  font: var(--type-heading);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
}

/* Press page: takes the spare height, like the homepage hero. */
.press {
  flex: 1;
  padding-block: clamp(3.5rem, 10vh, 7rem);
}

.press p { max-width: 36rem; }

.home-link { display: inline-block; }


/* Logo sheet: each file previewed on the ground it's made for. */
.press-group {
  margin-top: 2.5rem;
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-mist);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 1rem;
  list-style: none;
}

.logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  margin-bottom: 0.625rem;
}

.logo-preview-dark { background: var(--color-charcoal); }

.logo-preview-light { background: var(--color-bone); }

.logo-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 42%;
}

.press-note {
  margin-top: 2.5rem;
  color: var(--color-mist);
}

.site-footer { border-top: 1px solid var(--color-graphite); }

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 2rem;
}

.site-footer p { color: var(--color-mist); }

@media (min-width: 56rem) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
  }

  .hero { padding-block: clamp(3.5rem, 10vh, 7rem); }

  .home .site-header { display: block; }

  .site-nav { display: block; }

  .hero-mark {
    order: 0;
    justify-self: end;
    width: min(100%, 22rem);
  }

  .hero-mark img { width: 100%; }

  .split { grid-template-columns: 1fr 2fr; }
}