/* Bootleg Bureau: one plain sheet of paper, the mark, and a story told by the scroll.
   The page never travels: each notch of the scroll brings the next piece of the
   composition forward, until the whole board is assembled. Cobalt appears only in the mark and the focus ring. */

@font-face {
  font-family: "Happy Times";
  src: url("/assets/fonts/happy-times-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Happy Times";
  src: url("/assets/fonts/happy-times-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Happy Times";
  src: url("/assets/fonts/happy-times-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sporting Grotesque";
  src: url("/assets/fonts/sporting-grotesque-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sporting Grotesque";
  src: url("/assets/fonts/sporting-grotesque-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sligoil";
  src: url("/assets/fonts/sligoil-micro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #eee9de;
  --ink: #12110f;
  --ink-soft: #4d483f;
  --red: #c42a1f;
  --cobalt: #2747d1;

  --serif: "Happy Times", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --grotesk: "Sporting Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "Sligoil", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 3.2vw, 48px);
  --col-gap: clamp(16px, 2vw, 24px);
  /* All products fit on one line whenever the screen allows it. Keep --count in step with the list. */
  --count: 2;
  --col-w: clamp(184px, calc((100vw - 2 * var(--gutter) - (var(--count) - 1) * var(--col-gap)) / var(--count)), 260px);
  --mark-w: clamp(56px, 6vw, 72px);
  --mark-big: min(34vw, 30vh, 260px);
}

@media (max-width: 700px) {
  :root { --col-w: min(72vw, 260px); }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  scroll-snap-type: y mandatory;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--paper);
  font-family: var(--grotesk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- The story ---------- */

/* The track gives the scroll its length, one screen per step. The stage never moves. */
.track { position: relative; }
.snap-point { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }
.stage { position: fixed; inset: 0; overflow: hidden; }

/* The final composition, laid out once. The scroll reveals it piece by piece
   and keeps whatever is visible centred on screen. */
.col {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  will-change: transform;
}

.mark { display: block; width: var(--mark-w); }
.mark img { width: 100%; }
/* The story's mark is laid out at its opening size and scaled down to rest, so it stays sharp.
   The negative margin gives the column the layout of the small mark (712 / 545 is its ratio). */
.col .mark {
  width: var(--mark-big);
  margin-bottom: calc((var(--mark-w) - var(--mark-big)) * 712 / 545);
  transform-origin: 50% 0;
  will-change: transform;
}
.brand { display: flex; flex-direction: column; align-items: center; font-weight: 400; }
/* The name sits under the mark from the first screen and stays with it. */
.wordmark {
  display: block;
  margin-top: clamp(12px, 1.8vh, 18px);
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  will-change: transform;
}

.descriptor { margin-top: clamp(16px, 2.4vh, 24px); font-size: clamp(17px, 1.6vw, 21px); }
.tagline {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}

[data-step] { opacity: 0; visibility: hidden; will-change: transform, opacity; }

/* ---------- Products ---------- */

.row {
  align-self: stretch;
  margin: clamp(36px, 7vh, 64px) calc(-1 * var(--gutter)) 0;
  text-align: left;
  touch-action: pan-y;
}
.strip { display: flex; gap: var(--col-gap); width: max-content; will-change: transform; }
.strip.dragging { user-select: none; cursor: grabbing; }

.product { width: var(--col-w); border-top: 1px solid var(--ink); padding-top: 14px; }
.name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-bottom: 10px;
}
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.meta b { font-weight: 400; color: var(--ink); }
.meta b::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  background: var(--red);
  vertical-align: 1px;
}
.meta b.wip::before { background: none; border: 1px solid currentColor; }
.voice { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.3; }
.go {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  -webkit-user-drag: none;
}
.go:hover { color: var(--red); }

/* While no game is listed, one status line stands where the row will be. */
.soon { margin-top: clamp(36px, 7vh, 64px); font-size: 13px; }

/* ---------- Header: the studio's profiles along the top of the screen, arriving with the footer ---------- */

.top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  padding: clamp(16px, 3vh, 28px) var(--gutter) 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.social a { text-decoration: none; color: var(--ink-soft); -webkit-user-drag: none; }
.social a:hover { color: var(--red); }

/* ---------- Footer: manifesto, Dispatches, contact along the bottom of the screen ---------- */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px) 1fr;
  grid-template-areas: "manifesto news contact";
  align-items: end;
  column-gap: var(--col-gap);
  padding: 0 var(--gutter) clamp(16px, 3vh, 28px);
  text-align: center;
}
.foot__manifesto {
  grid-area: manifesto;
  justify-self: start;
  align-self: last baseline;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.contact { grid-area: contact; justify-self: end; align-self: last baseline; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.foot__manifesto, .contact a { -webkit-user-drag: none; }
.contact a { padding-bottom: 2px; border-bottom: 1px solid currentColor; text-decoration: none; }
.foot__manifesto:hover, .contact a:hover { color: var(--red); }

/* Short screens (a phone held sideways): the Dispatches blurb goes, the form and its consent note stay. */
@media (max-height: 560px) {
  .foot .dispatches h2 { font-size: 17px; }
  .foot .dispatches__copy { display: none; }
  .foot .dispatches__form { margin-top: 4px; }
}

/* Phones: Dispatches across the width, the manifesto and the address under it. */
@media (max-width: 700px) {
  .foot {
    grid-template-columns: auto auto;
    grid-template-areas: "news news" "manifesto contact";
    row-gap: 14px;
    justify-content: space-between;
  }
}

.hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Reading pages (manifesto) ---------- */

/* An ordinary page that scrolls: no story, the same sheet. */
html.page { scroll-snap-type: none; }

.doc {
  width: min(100%, 44rem);
  margin: 0 auto;
  padding: clamp(32px, 7vh, 64px) var(--gutter) clamp(40px, 8vh, 72px);
}
.doc__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.doc__head .mark { width: var(--mark-w); }
.doc__title {
  margin-top: clamp(20px, 3vh, 28px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
/* The manifesto line: upright serif, as it closed the home page before. */
.doc .doc__line {
  margin-top: clamp(20px, 3vh, 28px);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}

.doc section { margin-top: clamp(48px, 8vh, 72px); }
.doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.15;
}
.doc p, .doc li { font-size: 17px; line-height: 1.55; }
.doc h2 + p, .doc p + p { margin-top: 14px; }

/* Principles: a name in the serif, one or two plain sentences after it. */
.principles { margin-top: 18px; }
.principles li + li { margin-top: 16px; }
.principles b { font-family: var(--serif); font-weight: 400; font-size: 20px; }

.doc a:not(.mark) { padding-bottom: 1px; border-bottom: 1px solid currentColor; text-decoration: none; }
.doc a:not(.mark):hover { color: var(--red); }
.doc .meta { font-size: 11px; line-height: 1.4; }
.doc .doc__revised { margin-top: clamp(40px, 6vh, 56px); }
.doc__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px 24px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.doc__foot .go { margin-top: 0; }
.doc__foot .contact { justify-self: auto; font-size: 13px; }

/* ---------- 404 ---------- */

.lost {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px var(--gutter);
  text-align: center;
}
.lost .mark { width: var(--mark-w); }
.lost__title { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); }
.lost__text { font-size: 16px; color: var(--ink-soft); }
.lost .go { font-size: 15px; }