/* Shapesetter: the printed page. Cream paper, flat inks, and bodies raised on walls as the game's shapes are --
   never a soft shadow. */

@font-face {
  font-family: "Heros";
  src: url("fonts/texgyreheros-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Heros";
  src: url("fonts/texgyreheros-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #F2EDE1;
  --card: #FAF6EC;
  --ink: #17150F;
  --muted: #5E594C;
  --grey: #9A9482;
  --grey-light: #C7C1B0;
  --red: #CE3B2E;
  --blue: #1E5DAA;
  --yellow: #E8B62C;
  --lattice: rgba(23, 21, 15, 0.055);
  --rule: 3px;
  --line: 3px;
  --corner: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 1180px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--lattice) 1px, transparent 1px),
    linear-gradient(90deg, var(--lattice) 1px, transparent 1px);
  background-size: 40px 40px;
  font-family: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }

/* Raised bodies: a face standing on the page as a shape stands on the board in the game. Its wall -- the face's color
   darkened -- shows below and to the right, and one ink line runs round the whole silhouette, face and wall together,
   with none between them. The wall is a stack of hard copies of the box, one per sixth of the rise, so its corners run
   on the diagonal; the line is the same stack spread by --line, drawn under the wall. A body that is a link hops up as
   the pointer lands on it (the face moves up and left, the wall grows, the foot stays put) and sinks almost flat onto
   the page while pressed. */

@property --rise {
  syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

.trailer,
.trailer-soon,
.features li,
.wishlist-card,
.presskit table,
.button,
.trailer-play,
.shots a {
  --face: var(--card);
  --wall: color-mix(in srgb, var(--face) 86%, #000);
  --rest: 6px;
  --hop: 3px;
  --rise: var(--rest);
  border-radius: var(--corner);
  background-color: var(--face);
  box-shadow:
    calc(var(--rise) / 6) calc(var(--rise) / 6) 0 var(--wall),
    calc(var(--rise) / 3) calc(var(--rise) / 3) 0 var(--wall),
    calc(var(--rise) / 2) calc(var(--rise) / 2) 0 var(--wall),
    calc(var(--rise) * 2 / 3) calc(var(--rise) * 2 / 3) 0 var(--wall),
    calc(var(--rise) * 5 / 6) calc(var(--rise) * 5 / 6) 0 var(--wall),
    var(--rise) var(--rise) 0 var(--wall),
    0 0 0 var(--line) var(--ink),
    calc(var(--rise) / 6) calc(var(--rise) / 6) 0 var(--line) var(--ink),
    calc(var(--rise) / 3) calc(var(--rise) / 3) 0 var(--line) var(--ink),
    calc(var(--rise) / 2) calc(var(--rise) / 2) 0 var(--line) var(--ink),
    calc(var(--rise) * 2 / 3) calc(var(--rise) * 2 / 3) 0 var(--line) var(--ink),
    calc(var(--rise) * 5 / 6) calc(var(--rise) * 5 / 6) 0 var(--line) var(--ink),
    var(--rise) var(--rise) 0 var(--line) var(--ink);
}
.button,
.trailer-play,
.shots a {
  transition: --rise 180ms cubic-bezier(0.3, 1.7, 0.6, 1), transform 180ms cubic-bezier(0.3, 1.7, 0.6, 1),
    background-color 120ms ease-out;
}
.button:hover, .trailer-play:hover, .shots a:hover {
  --rise: calc(var(--rest) + var(--hop));
  transform: translate(calc(0px - var(--hop)), calc(0px - var(--hop)));
  background-color: color-mix(in srgb, var(--face) 88%, #fff);
}
.button:active, .trailer-play:active, .shots a:active {
  --rise: 1px;
  transform: translate(calc(var(--rest) - 1px), calc(var(--rest) - 1px));
  background-color: color-mix(in srgb, var(--face) 94%, #000);
  transition-duration: 60ms;
  transition-timing-function: ease-out;
}

/* The bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--gutter);
  background: var(--paper);
  border-bottom: var(--rule) solid var(--ink);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark img { width: 26px; height: 26px; }
.bar nav { display: flex; gap: 22px; margin-left: auto; }
.bar nav a {
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.bar nav a:hover { border-bottom-color: var(--red); }

/* Buttons: raised bodies that hop under the pointer and sink when pressed */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  --face: var(--red);
  color: var(--paper);
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.button svg { width: 18px; height: 18px; }
.button-plain { --face: var(--card); color: var(--ink); }
.button-small { padding: 8px 14px; font-size: 0.9rem; --rest: 4px; --hop: 2px; }

/* The hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 104px) var(--gutter) clamp(32px, 6vw, 72px);
}
.kicker {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
h1 {
  margin: 0;
  font-size: clamp(3.4rem, 10.5vw, 8.4rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.tagline {
  margin: 20px 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lead { margin: 14px 0 0; max-width: 34em; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }

.hero-art { position: relative; margin: 0; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 4% -6% -6% 4%;
  background-image: radial-gradient(var(--grey-light) 30%, transparent 32%);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 60% 60%, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle at 60% 60%, #000 30%, transparent 70%);
}
.hero-art svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.construction { fill: none; stroke: var(--grey); stroke-width: 1; stroke-dasharray: 4 5; }
/* Each shape of the plate a body of its own, its wall and line from the #raised filter (index.html) */
.plate > * { filter: url(#raised); }
.arm line { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.arm circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.registration { fill: none; stroke: var(--ink); stroke-width: 1.5; }

/* Sections */

.section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--gutter);
}
.section-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 28px;
  padding-bottom: 10px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  border-bottom: var(--rule) solid var(--ink);
}
.section-title span { font-size: 0.5em; color: var(--red); letter-spacing: 0; }
.note { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); }

/* The trailer: a poster that loads YouTube only when played */

.trailer {
  position: relative;
  aspect-ratio: 16 / 9;
  --face: var(--ink);
  --wall: #4A4538;
  overflow: hidden;
}
.trailer-poster, .trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.trailer-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(72px, 12vw, 112px);
  height: clamp(72px, 12vw, 112px);
  padding: 0;
  --face: var(--red);
  --corner: 50%;
  border: 0;
  cursor: pointer;
}
.trailer-play svg { display: block; width: 100%; height: 100%; }
.trailer-soon {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 14px 22px;
  transform: translate(-50%, -50%);
  font-weight: 700;
  white-space: nowrap;
}
.trailer.is-soon .trailer-play { display: none; }
.trailer.is-soon .trailer-soon { display: block; }
.trailer.is-playing .trailer-play, .trailer.is-playing .trailer-poster { display: none; }

/* About: prose beside a Mondrian of features, each a body of its own */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.about-text p { margin: 0 0 1em; }
.about-text p:first-child { font-size: 1.15em; font-weight: 700; letter-spacing: -0.01em; }
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 12px 12px 0;
  padding: 0;
  list-style: none;
}
.features li {
  padding: 18px 18px 22px;
  min-height: 132px;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 700;
}
.features .f-wide { grid-column: span 2; }
.features .f-red { --face: var(--red); color: var(--paper); }
.features .f-blue { --face: var(--blue); color: var(--paper); }
.features .f-yellow { --face: var(--yellow); }

/* Screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.shots a {
  display: block;
  --face: var(--ink);
  --wall: #4A4538;
  overflow: hidden;
}
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* The first runs the grid's width, the rest pair up under it: five fill the grid with no orphan */
.shots a:first-child { grid-column: 1 / -1; }

/* The wishlist card */

.wishlist-card {
  position: relative;
  padding: clamp(28px, 5vw, 56px);
  --face: var(--blue);
  color: var(--paper);
  overflow: hidden;
}
.wishlist-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background-image: radial-gradient(var(--yellow) 32%, transparent 34%);
  background-size: 12px 12px;
}
.wishlist-card h2 {
  position: relative;
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.wishlist-card p { position: relative; margin: 0 0 26px; max-width: 32em; }
.wishlist-card .actions { position: relative; margin-top: 0; }

/* Press */

.press p { margin: 0; max-width: 40em; }

/* The press page: the fact sheet, rendered from PressKit/presskit.md */

.presskit { max-width: 860px; }
.presskit h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; margin: 0 0 24px; }
.presskit h2 {
  margin: 44px 0 16px;
  padding-bottom: 8px;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  border-bottom: var(--rule) solid var(--ink);
}
.presskit table { width: calc(100% - 12px); border-collapse: separate; border-spacing: 0; }
.presskit td, .presskit th { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grey-light); }
.presskit td:first-child { width: 34%; }
.presskit td a { word-break: break-all; }
.presskit tr:last-child td { border-bottom: 0; }
.presskit code { font-size: 0.9em; padding: 1px 5px; background: var(--card); border: 1px solid var(--grey-light); }
.presskit .download { margin: 0 0 40px; }

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: clamp(32px, 6vw, 64px);
  padding: 28px var(--gutter);
  color: var(--paper);
  background: var(--ink);
}
.wordmark-text { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.footer nav { display: flex; gap: 20px; }
.footer nav a { text-decoration: none; font-weight: 700; }
.footer nav a:hover { text-decoration: underline; }
.fine { margin-left: auto; font-size: 0.85rem; color: var(--grey); }

/* Narrow screens */

@media (max-width: 860px) {
  .hero, .about { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .bar { gap: 12px; }
  .bar nav { display: none; }
  .bar .button-small { margin-left: auto; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .features .f-wide { grid-column: auto; }
  .features li { min-height: 0; }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .trailer-soon { white-space: normal; text-align: center; width: 80%; }
  .fine { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .shots a, .trailer-play { transition: none; }
}