/* ============================================================
   Ionic Drive press kit - stylesheet
   ============================================================ */

@layer reset, base, layout, components;

:root {
  --font-heading: "Newsreader", serif;
  --font-body: "Instrument Sans", sans-serif;

  color-scheme: dark;

  /* Logo periwinkle and glow, from the Steam art */
  --color-logo: #aab4ff;
  --color-glow: #5170ff;
  --color-bg: #0d0c0b;
  --color-surface: #17161a;
  --color-text: #e3e0d7;
  --color-muted: #a19d94;
  --color-border: #2c2b31;

  --space-xs: clamp(0.375rem, 1vw, 0.5rem);
  --space-sm: clamp(0.75rem, 2vw, 1rem);
  --space-md: clamp(1.25rem, 4vw, 2rem);
  --space-lg: clamp(2rem, 6vw, 4rem);

  --radius-sm: 4px;
  --content-width: 46rem;
  --factsheet-width: 17.5rem;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  p,
  dl,
  dd,
  ul {
    margin: 0;
  }
  img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
}

@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h2 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: 1.2;
    margin-block: var(--space-lg) var(--space-sm);
  }

  p + p,
  p + ul,
  ul + p {
    margin-block-start: var(--space-sm);
  }

  main ul:not(.gallery) {
    padding-inline-start: 1.25rem;
  }

  a {
    color: var(--color-logo);
    text-underline-offset: 0.2em;
  }
  a:hover {
    color: #fff;
  }
}

@layer layout {
  /* Text sits in the centre column; the factsheet joins the left gutter when it fits */
  .layout {
    display: grid;
    grid-template-columns: 1fr min(var(--content-width), 100% - 32px) 1fr;
    row-gap: var(--space-md);
    padding-block-end: var(--space-lg);
  }
  .layout > * {
    grid-column: 2;
  }

  @media (width >= 90rem) {
    .factsheet {
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
      align-self: start;
      position: sticky;
      inset-block-start: var(--space-md);
      inline-size: var(--factsheet-width);
      margin-inline-end: var(--space-lg);
    }
    .layout > main {
      grid-row: 1;
    }
    .factsheet dl {
      grid-template-columns: 1fr;
    }
  }

  main > :first-child {
    margin-block-start: 0;
  }

  footer {
    border-block-start: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.875rem;
    padding: var(--space-md) 16px;
    text-align: center;
  }
}

@layer components {
  .hero {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-md);
    min-block-size: clamp(18rem, 42vw, 34rem);
    padding: var(--space-lg) 16px;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center;
    margin-block-end: var(--space-lg);
    box-shadow: inset 0 -6rem 6rem -3rem var(--color-bg);
  }

  .hero h1 img {
    inline-size: min(28rem, 80vw);
  }

  .button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-glow);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--color-glow) 30%, transparent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 1.5rem
      color-mix(in oklab, var(--color-glow) 45%, transparent);
  }
  .button:hover {
    background: color-mix(in oklab, var(--color-glow) 55%, transparent);
  }

  .factsheet {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
  }
  .factsheet h2 {
    margin-block-start: 0;
  }
  .factsheet dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    column-gap: var(--space-md);
  }
  .factsheet dt {
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-block-start: var(--space-sm);
  }
  .factsheet dd {
    overflow-wrap: anywhere;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
  }
  .gallery-logo {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  }
  .gallery a {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
  }
  .gallery a:hover {
    border-color: var(--color-glow);
  }
  .gallery img {
    inline-size: 100%;
  }

  .download {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin-block-start: var(--space-sm);
  }

  .footnotes {
    color: var(--color-muted);
    font-size: 0.875rem;
    margin-block-start: var(--space-md);
  }

  .not-found {
    max-inline-size: 40rem;
    margin: var(--space-lg) auto;
    padding-inline: 16px;
    text-align: center;
  }
}