/*
 * The coming soon page: one manila sheet on the olive drab ground, the same materials and the
 * same lock-up as the game's title page (DESIGN.md sections 1, 2, 3 and 8). The values are
 * copied from src/styles.css rather than imported, because this page is deployed on its own and
 * must not depend on a build.
 *
 * The one webfont is the stencil the mark and the name are set in, copied to a fixed path in the
 * bucket (soon.woff2) because the game's own faces live under Vite's hashed names. It is Big
 * Shoulders Stencil, latin subset, SIL Open Font License 1.1, the same file @fontsource ships.
 * font-src 'self' allows it and forbids a font service, which is why it is copied rather than
 * linked.
 */

@font-face {
  font-family: 'Big Shoulders Stencil';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/soon.woff2') format('woff2');
}

:root {
  --paper: #ece2c2;
  --ink: #1e2016;
  --ink-soft: #4b4935;
  --od: #454c22;
  --blaze: #ff6a13;
  --f-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-stencil: 'Big Shoulders Stencil', 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2.5rem 1rem 3rem;
  background: var(--od);
  color: var(--ink);
  font: 400 1rem/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

/* The sheet: manila stock, square corners, the one paper shadow. */
.cover {
  width: min(560px, 100%);
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 2.25rem;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

/* The lock-up is sized off this column, so it fits whole at any width. */
.cover-head {
  container: cover-head / inline-size;
}

.brandmark {
  --logo: min(6rem, 22.5cqi);
  display: flex;
  align-items: center;
  gap: calc(var(--logo) * 0.16);
}

.mark {
  flex: none;
  width: calc(var(--logo) * 1.7);
  height: calc(var(--logo) * 1.7);
  color: var(--ink);
}

.mark-dot {
  fill: var(--blaze);
}

.logo {
  margin: 0;
  font: 800 var(--logo) / 0.88 var(--f-stencil);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.logo span {
  display: block;
}

.note {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}