/* Mixuvo: a printed page. Cream paper, flat inks, and bodies raised on walls as the shapes in its games 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;
  --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: 1040px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { min-height: 100%; display: flex; flex-direction: column; }

body {
  flex: 1;
  display: flex;
  flex-direction: column;
  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;
  -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;
}

.game,
.button,
.social {
  --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,
.social {
  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, .social: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, .social: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;
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 112px) var(--gutter) clamp(40px, 7vw, 88px);
}

/* The intro: the logo as drawn in the kit, with its clear space */

.intro h1 { margin: 0; line-height: 0; }
.logo { width: clamp(220px, 34vw, 340px); }
.lead {
  margin: clamp(28px, 4vw, 40px) 0 0;
  max-width: 30em;
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

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

.actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.button {
  display: inline-flex;
  align-items: center;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  --face: var(--red);
  color: var(--paper);
  text-decoration: none;
}
.button-plain { --face: var(--card); color: var(--ink); }

/* The game */

.game {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-top: clamp(48px, 8vw, 88px);
  overflow: hidden;
}
.game-art { display: block; border-right: var(--rule) solid var(--ink); background: var(--paper); }
.game-art img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-text { padding: clamp(22px, 3.5vw, 36px); }
.kicker {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.game h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.tagline { margin: 10px 0 0; font-weight: 700; letter-spacing: -0.01em; }
.game-text > p:not(.kicker):not(.tagline) { margin: 12px 0 0; color: var(--muted); font-size: 0.95rem; }

/* Follow */

.follow { margin-top: clamp(48px, 8vw, 88px); }
.follow h2 {
  margin: 0 0 22px;
  padding-bottom: 8px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  border-bottom: var(--rule) solid var(--ink);
}
.socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social {
  display: flex;
  align-items: stretch;
  height: 100%;
  text-decoration: none;
  overflow: hidden;
}
.social-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  border-right: var(--rule) solid var(--ink);
  color: var(--paper);
}
.social-icon svg { width: 26px; height: 26px; fill: currentColor; }
.s-blue { background: var(--blue); }
.s-red { background: var(--red); }
.s-yellow { background: var(--yellow); color: var(--ink); }
.social-text { display: flex; flex-direction: column; justify-content: center; padding: 12px 16px; min-width: 0; }
.social-text b { font-size: 1.05rem; line-height: 1.2; }
.social-text span { font-size: 0.88rem; color: var(--muted); }

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 24px var(--gutter);
  font-size: 0.9rem;
  color: var(--paper);
  background: var(--ink);
}
.footer a { font-weight: 700; text-underline-offset: 3px; }
.footer a:hover { color: var(--yellow); }
.fine { margin-left: auto; color: var(--grey); }

/* Narrow screens */

@media (max-width: 860px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .game-art { border-right: 0; border-bottom: var(--rule) solid var(--ink); }
  .socials { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .fine { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .social { transition: none; }
}

/* The card page (/card): where the business card's QR code leads -- one column of links, for a phone */

.page-card { max-width: 640px; }
.page-card .kicker { margin-bottom: 14px; }
.page-card .lead { font-size: clamp(1.15rem, 4.6vw, 1.35rem); }
.links {
  display: grid;
  gap: 18px;
  margin: clamp(32px, 6vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.links .social { min-height: 72px; }
.link-group { margin-top: clamp(32px, 6vw, 48px); }
.group-head {
  margin: 0 0 14px;
  padding-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: var(--rule) solid var(--ink);
}
.link-group .links { margin-top: 0; }
.s-ink { background: var(--ink); }
.s-paper { background: var(--paper); }
.s-paper img { width: 30px; height: 30px; }