@layer reset, tokens, base, components, page;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, p { margin: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --ink: #202019;
    --paper: #f3f0e7;
    --accent: #ee5b3e;
    --line: #cbc7ba;
    --muted: #67675f;
    --page: min(100% - 2.5rem, 78rem);
  }
}

@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
  }

  a { color: inherit; }
  a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
}

@layer components {
  .eyebrow {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .site-header,
  footer {
    align-items: center;
    display: flex;
    inline-size: var(--page);
    justify-content: space-between;
    margin-inline: auto;
  }

  .site-header {
    border-block-end: 1px solid var(--line);
    min-block-size: 5rem;
  }

  .wordmark {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-decoration: none;
  }

  nav { display: flex; gap: clamp(1.25rem, 4vw, 3rem); }
  nav a { font-size: 0.85rem; text-decoration: none; }
  nav a:hover { text-decoration: underline; text-underline-offset: 0.35em; }

  .primary-action {
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    display: inline-flex;
    font-size: 0.85rem;
    gap: 2.5rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
  }

  .primary-action:hover { background: var(--accent); }
}

@layer page {
  .hero {
    inline-size: var(--page);
    margin-inline: auto;
    min-block-size: calc(100svh - 5rem);
    padding-block: clamp(4rem, 10vw, 8rem) 5rem;
    position: relative;
  }

  .hero h1 {
    font-size: clamp(4rem, 11vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.82;
    margin-block: 2.25rem 2.5rem;
    max-inline-size: 10ch;
  }

  .hero h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }

  .hero-copy {
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-block-end: 2rem;
    max-inline-size: 34rem;
  }

  .hero-mark {
    align-items: end;
    display: flex;
    gap: 0.6rem;
    inset-block-end: 5rem;
    inset-inline-end: 0;
    position: absolute;
    transform: rotate(-10deg);
  }

  .hero-mark span { background: var(--accent); border-radius: 50%; display: block; }
  .hero-mark span:nth-child(1) { block-size: 3rem; inline-size: 3rem; }
  .hero-mark span:nth-child(2) { block-size: 5rem; inline-size: 5rem; }
  .hero-mark span:nth-child(3) { block-size: 7rem; inline-size: 7rem; }

  .games,
  .studio {
    display: grid;
    gap: 4rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
    padding: clamp(5rem, 10vw, 9rem) max(1.25rem, calc((100% - 78rem) / 2));
  }

  .games { background: var(--ink); color: var(--paper); }
  .games .eyebrow { color: #aaa99f; }
  .studio { border-block-end: 1px solid var(--line); }

  .games h2,
  .studio h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.95;
    margin-block-start: 2rem;
  }

  .games > p,
  .studio > p:last-child {
    align-self: end;
    font-size: 1.1rem;
    max-inline-size: 28rem;
  }

  footer { color: var(--muted); font-size: 0.78rem; min-block-size: 7rem; }

  .content-page {
    inline-size: var(--page);
    margin-inline: auto;
    min-block-size: calc(100svh - 12rem);
    padding-block: clamp(3rem, 8vw, 7rem);
  }

  .content-page h1 { font-family: Georgia, serif; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.95; margin-block: 1rem 2rem; }
  .content-page > p, .play-shell > p { margin-block: 1rem; max-inline-size: 42rem; }
  .catalog-list { display: grid; gap: 1rem; margin-block-start: 3rem; }
  .catalog-list article { border-block-start: 1px solid var(--line); padding-block: 2rem; }
  .catalog-list h2 { font-size: clamp(2rem, 5vw, 4rem); }
  button.primary-action { border: 0; cursor: pointer; font: inherit; }
  button.primary-action:disabled { cursor: wait; opacity: 0.65; }
  .play-exit { font: inherit; margin-inline-start: 1rem; padding: 0.9rem 1.2rem; }
  .play-frame { margin-block-start: 2rem; }
  .play-frame iframe { border: 1px solid var(--line); block-size: min(70svh, 48rem); inline-size: 100%; }

  @media (max-width: 42rem) {
    .hero-mark { opacity: 0.16; }
    .games, .studio { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}